feat: show search index status badge COMPASS-7205 (#4847)

show search index status badge
mongodb-js · Sep 14, 2023 · c32a02c · c32a02c
1 parent 875b49e
commit c32a02c
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.spec.tsx b/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.spec.tsx
@@ -78,6 +78,13 @@ describe('SearchIndexesTable Component', function () {
         ]) {
           expect(within(indexRow).getByTestId(indexCell)).to.exist;
         }
+
+        // Renders status badges
+        const badge = within(indexRow).getByTestId(
+          `search-indexes-status-${index.name}`
+        );
+        expect(badge).to.exist;
+        expect(badge).to.have.text(index.status);
       }
     });
   }

diff --git a/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx b/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx
@@ -1,9 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import type { SearchIndex } from 'mongodb-data-service';
+import type { SearchIndex, SearchIndexStatus } from 'mongodb-data-service';
 import { withPreferences } from 'compass-preferences-model';
 
-import { EmptyContent, Button, Link } from '@mongodb-js/compass-components';
+import { BadgeVariant } from '@mongodb-js/compass-components';
+import {
+  EmptyContent,
+  Button,
+  Link,
+  Badge,
+} from '@mongodb-js/compass-components';
 
 import type { SearchSortColumn } from '../../modules/search-indexes';
 import {
@@ -64,6 +70,29 @@ function ZeroState({ openCreateModal }: { openCreateModal: () => void }) {
   );
 }
 
+const statusBadgeVariants: Record<SearchIndexStatus, BadgeVariant> = {
+  BUILDING: BadgeVariant.Blue,
+  FAILED: BadgeVariant.Red,
+  PENDING: BadgeVariant.Yellow,
+  READY: BadgeVariant.Green,
+  STALE: BadgeVariant.LightGray,
+};
+
+function IndexStatus({
+  status,
+  'data-testid': dataTestId,
+}: {
+  status: SearchIndexStatus;
+  'data-testid': string;
+}) {
+  const variant = statusBadgeVariants[status];
+  return (
+    <Badge variant={variant} data-testid={dataTestId}>
+      {status}
+    </Badge>
+  );
+}
+
 export const SearchIndexesTable: React.FunctionComponent<
   SearchIndexesTableProps
 > = ({
@@ -100,7 +129,12 @@ export const SearchIndexesTable: React.FunctionComponent<
         },
         {
           'data-testid': 'status-field',
-          children: index.status, // TODO(COMPASS-7205): show some badge, not just text
+          children: (
+            <IndexStatus
+              status={index.status}
+              data-testid={`search-indexes-status-${index.name}`}
+            />
+          ),
         },
       ],
 

diff --git a/packages/data-service/src/index.ts b/packages/data-service/src/index.ts
@@ -14,4 +14,7 @@ export {
 export type { ReauthenticationHandler } from './connect-mongo-client';
 export type { ExplainExecuteOptions } from './data-service';
 export type { IndexDefinition } from './index-detail-helper';
-export type { SearchIndex } from './search-index-detail-helper';
+export type {
+  SearchIndex,
+  SearchIndexStatus,
+} from './search-index-detail-helper';
diff --git a/packages/data-service/src/search-index-detail-helper.ts b/packages/data-service/src/search-index-detail-helper.ts
@@ -1,9 +1,16 @@
 import type { Document } from 'mongodb';
 
+export type SearchIndexStatus =
+  | 'BUILDING'
+  | 'FAILED'
+  | 'PENDING'
+  | 'READY'
+  | 'STALE';
+
 export type SearchIndex = {
   id: string;
   name: string;
-  status: 'BUILDING' | 'FAILED' | 'PENDING' | 'READY' | 'STALE';
+  status: SearchIndexStatus;
   queryable: boolean;
   latestDefinition: Document;
 };