feat(ui): code refs

ui/web-v2/package.json

@@ -53,6 +53,8 @@
     "js-cookie": "^3.0.5",
     "jstat": "1.9.4",
     "option-t": "23.0.2",
+    "prism-react-renderer": "^2.4.1",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.6.0",
     "query-string": "7.0.1",
     "react": "17.0.2",

ui/web-v2/src/assets/lang/en.json

@@ -206,6 +206,17 @@
   "button.stop": "Stop",
   "button.submit": "Submit",
   "close": "Close",
+  "codeRefs.branch": "Branch",
+  "codeRefs.description": "References to this feature flag found in your codebase",
+  "codeRefs.enableCodeRefs": "Enable code references",
+  "codeRefs.enableCodeRefsDescription": "Quickly see references of feature flags used in your codebase using our CLI tool. The result will be reported to our backend and shown on this tab.",
+  "codeRefs.fileExtensions": "File Extensions",
+  "codeRefs.multipleReferenceFound": "{value} reference(s) found in {branchLink} branch",
+  "codeRefs.noRefsInCodebase": "There are no code references in your codebase yet.",
+  "codeRefs.noRegisteredRefs": "No registered code references",
+  "codeRefs.referenceFound": "{value} reference found in {branchLink} branch",
+  "codeRefs.repository": "Repository",
+  "codeRefs.viewInSource": "View in Source",
   "copy.copied": "Copied!",
   "copy.copyToClipboard": "Copy to clipboard",
   "created": "Created",
@@ -353,6 +364,7 @@
   "feature.status": "status",
   "feature.strategy.selectRolloutPercentage": "Select rollout percentage",
   "feature.tab.autoOps": "Auto Operations",
+  "feature.tab.codeRefs": "Code Refs",
   "feature.tab.evaluation": "Evaluation",
   "feature.tab.experiments": "Experiments",
   "feature.tab.history": "History",
@@ -634,4 +646,4 @@
   "urlCode": "URL code",
   "warning": "Warning",
   "yes": "Yes"
-}
+}

ui/web-v2/src/assets/lang/ja.json

@@ -206,6 +206,17 @@
   "button.stop": "終了",
   "button.submit": "送信",
   "close": "閉じる",
+  "codeRefs.branch": "ブランチ",
+  "codeRefs.description": "コードベースで見つかったコードリファレンスです",
+  "codeRefs.enableCodeRefs": "コードリファレンスを有効にする",
+  "codeRefs.enableCodeRefsDescription": "BucketeerのCLI ツールを利用して、コードベースで利用されているフィーチャーフラグの参照をすばやく検索してくれます。結果はバックエンドに報告され、このタブに表示されます。",
+  "codeRefs.fileExtensions": "ファイル拡張",
+  "codeRefs.multipleReferenceFound": "{branchLink}ブランチに {value} 件の参照がありました",
+  "codeRefs.noRefsInCodebase": "コードベースにはまだコードリファレンスがありません。",
+  "codeRefs.noRegisteredRefs": "コードリファレンスはありません",
+  "codeRefs.referenceFound": "{branchLink}ブランチに {value} 件の参照がありました",
+  "codeRefs.repository": "レポジトリー",
+  "codeRefs.viewInSource": "ソースを表示",
   "copy.copied": "コピーしました",
   "copy.copyToClipboard": "クリップボードにコピー",
   "created": "作成",
@@ -353,6 +364,7 @@
   "feature.status": "ステータス",
   "feature.strategy.selectRolloutPercentage": "割合で選択",
   "feature.tab.autoOps": "オートオペレーション",
+  "feature.tab.codeRefs": "コードリファレンス",
   "feature.tab.evaluation": "エバリュエーション",
   "feature.tab.experiments": "エクスペリメント",
   "feature.tab.history": "履歴",

ui/web-v2/src/constants/routing.ts

@@ -28,6 +28,7 @@ export const PAGE_PATH_FEATURE_EVALUATION = '/evaluation';
 export const PAGE_PATH_FEATURE_AUTOOPS = '/autoops';
 export const PAGE_PATH_FEATURE_TRIGGER = '/trigger';
 export const PAGE_PATH_FEATURE_HISTORY = '/history';
+export const PAGE_PATH_CODE_REFS = '/coderefs';
 
 export const PAGE_PATH_AUTH_CALLBACK = '/auth/callback';
 export const PAGE_PATH_AUTH_SIGNIN = '/auth/signin';

ui/web-v2/src/grpc/codeRefs.ts

@@ -0,0 +1,74 @@
+import { Nullable, isNotNull, isNull } from 'option-t/lib/Nullable/Nullable';
+import { urls } from '../config';
+import {
+  CodeReferenceServiceClient,
+  ServiceError
+} from '../proto/coderef/service_pb_service';
+
+import { extractErrorMessage } from './messages';
+import {
+  checkUnauthenticatedError,
+  getMetaDataForClient as getMetaData
+} from './utils';
+import { UNAUTHENTICATED_ERROR } from '../middlewares/thunkErrorHandler';
+import {
+  ListCodeReferencesRequest,
+  ListCodeReferencesResponse
+} from '../proto/coderef/service_pb';
+
+export class CodeRefsServiceError<Request> extends Error {
+  request: Request;
+
+  error: Nullable<ServiceError>;
+
+  constructor(
+    message: string,
+    request: Request,
+    error: Nullable<ServiceError>
+  ) {
+    if (checkUnauthenticatedError(error.code)) {
+      super(UNAUTHENTICATED_ERROR);
+    } else {
+      super(message);
+    }
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CodeRefsServiceError);
+    }
+    this.name = 'CodeRefsServiceError';
+    this.request = request;
+    this.error = error;
+  }
+}
+
+const client = new CodeReferenceServiceClient(urls.GRPC);
+
+export interface ListCodeRefsResult {
+  request: ListCodeReferencesRequest;
+  response: ListCodeReferencesResponse;
+}
+
+export function listCodeRefs(
+  request: ListCodeReferencesRequest
+): Promise<ListCodeRefsResult> {
+  return new Promise(
+    (resolve: (result: ListCodeRefsResult) => void, reject): void => {
+      client.listCodeReferences(
+        request,
+        getMetaData(),
+        (error, response): void => {
+          if (isNotNull(error) || isNull(response)) {
+            reject(
+              new CodeRefsServiceError(
+                extractErrorMessage(error),
+                request,
+                error
+              )
+            );
+          } else {
+            resolve({ request, response });
+          }
+        }
+      );
+    }
+  );
+}

ui/web-v2/src/lang/messages.ts

@@ -722,6 +722,53 @@ export const messages = {
       defaultMessage: 'Updated'
     })
   },
+  codeRefs: {
+    description: defineMessage({
+      id: 'codeRefs.description',
+      defaultMessage: 'References to this feature flag found in your codebase'
+    }),
+    repository: defineMessage({
+      id: 'codeRefs.repository',
+      defaultMessage: 'Repository'
+    }),
+    branch: defineMessage({
+      id: 'codeRefs.branch',
+      defaultMessage: 'Branch'
+    }),
+    fileExtensions: defineMessage({
+      id: 'codeRefs.fileExtensions',
+      defaultMessage: 'File Extensions'
+    }),
+    viewInSource: defineMessage({
+      id: 'codeRefs.viewInSource',
+      defaultMessage: 'View in Source'
+    }),
+    referenceFound: defineMessage({
+      id: 'codeRefs.referenceFound',
+      defaultMessage: '{value} reference found in {branchLink} branch'
+    }),
+    multipleReferenceFound: defineMessage({
+      id: 'codeRefs.multipleReferenceFound',
+      defaultMessage: '{value} reference(s) found in {branchLink} branch'
+    }),
+    noRegisteredRefs: defineMessage({
+      id: 'codeRefs.noRegisteredRefs',
+      defaultMessage: 'No registered code references'
+    }),
+    noRefsInCodebase: defineMessage({
+      id: 'codeRefs.noRefsInCodebase',
+      defaultMessage: 'There are no code references in your codebase yet.'
+    }),
+    enableCodeRefs: defineMessage({
+      id: 'codeRefs.enableCodeRefs',
+      defaultMessage: 'Enable code references'
+    }),
+    enableCodeRefsDescription: defineMessage({
+      id: 'codeRefs.enableCodeRefsDescription',
+      defaultMessage:
+        'Quickly see references of feature flags used in your codebase using our CLI tool. The result will be reported to our backend and shown on this tab.'
+    })
+  },
   maintainer: defineMessage({
     id: 'maintainer',
     defaultMessage: 'Maintainer'
@@ -2105,6 +2152,10 @@ export const messages = {
       variations: defineMessage({
         id: 'feature.tab.variations',
         defaultMessage: 'Variations'
+      }),
+      codeRefs: defineMessage({
+        id: 'feature.tab.codeRefs',
+        defaultMessage: 'Code Refs'
       })
     },
     search: {