feat: add search indexes details badges COMPASS-7206 (#4850)

* add search indexes details badges * Update packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx Co-authored-by: Anna Henningsen <[email protected]> --------- Co-authored-by: Anna Henningsen <[email protected]>
mongodb-js · Sep 15, 2023 · 14b6e6a · 14b6e6a
1 parent 0cf4a5b
commit 14b6e6a
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 2 deletions.
diff --git a/packages/compass-indexes/src/components/regular-indexes-table/regular-indexes-table.tsx b/packages/compass-indexes/src/components/regular-indexes-table/regular-indexes-table.tsx
@@ -123,7 +123,12 @@ export const RegularIndexesTable: React.FunctionComponent<
           onUnhideIndex={onUnhideIndex}
         ></IndexActions>
       ),
-      details: <IndexKeysBadge keys={index.fields} />,
+      details: (
+        <IndexKeysBadge
+          keys={index.fields}
+          data-testid={`indexes-details-${index.name}`}
+        />
+      ),
     };
   });
 

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
@@ -9,6 +9,7 @@ import {
 import { expect } from 'chai';
 import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
+import type { Document } from 'mongodb';
 
 import { SearchIndexesTable } from './search-indexes-table';
 import { SearchIndexesStatuses } from '../../modules/search-indexes';
@@ -69,6 +70,28 @@ describe('SearchIndexesTable Component', function () {
         );
         expect(badge).to.exist;
         expect(badge).to.have.text(index.status);
+
+        // Renders details
+
+        const expandButton = within(indexRow).getByLabelText('Expand row');
+        expect(expandButton).to.exist;
+        fireEvent.click(expandButton);
+
+        const details = screen.getByTestId(
+          `search-indexes-details-${index.name}`
+        );
+        expect(details).to.exist;
+
+        if (index.latestDefinition.mappings?.dynamic) {
+          expect(within(details).getAllByText('Dynamic Mappings')).to.exist;
+        }
+        if (index.latestDefinition.mappings?.fields) {
+          for (const field of Object.keys(
+            index.latestDefinition.mappings.fields as Document
+          )) {
+            expect(within(details).getAllByText(field)).to.exist;
+          }
+        }
       }
     });
   }

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,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import type { Document } from 'mongodb';
 import type { SearchIndex, SearchIndexStatus } from 'mongodb-data-service';
 import { withPreferences } from 'compass-preferences-model';
 
@@ -9,6 +10,8 @@ import {
   Button,
   Link,
   Badge,
+  css,
+  spacing,
 } from '@mongodb-js/compass-components';
 
 import type { SearchSortColumn } from '../../modules/search-indexes';
@@ -96,6 +99,54 @@ function IndexStatus({
   );
 }
 
+const searchIndexDetailsStyles = css({
+  display: 'inline-flex',
+  gap: spacing[1],
+});
+
+const searchIndexFieldStyles = css({
+  // Override LeafyGreen's uppercase styles as we want to keep the case sensitivity of the key.
+  textTransform: 'none',
+  gap: spacing[1],
+});
+
+function SearchIndexDetails({
+  indexName,
+  definition,
+}: {
+  indexName: string;
+  definition: Document;
+}) {
+  const badges: { name: string; className?: string }[] = [];
+  if (definition.mappings?.dynamic) {
+    badges.push({
+      name: 'Dynamic Mappings',
+      className: undefined,
+    });
+  }
+
+  if (definition.mappings?.fields) {
+    badges.push(
+      ...Object.keys(definition.mappings.fields as Document).map((name) => ({
+        name,
+        className: searchIndexFieldStyles,
+      }))
+    );
+  }
+  return (
+    <div
+      className={searchIndexDetailsStyles}
+      data-testid={`search-indexes-details-${indexName}`}
+    >
+      {badges.map((badge) => (
+        <Badge key={badge.name} className={badge.className}>
+          {badge.name}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
 export const SearchIndexesTable: React.FunctionComponent<
   SearchIndexesTableProps
 > = ({
@@ -141,8 +192,13 @@ export const SearchIndexesTable: React.FunctionComponent<
           ),
         },
       ],
+      details: (
+        <SearchIndexDetails
+          indexName={index.name}
+          definition={index.latestDefinition}
+        />
+      ),
       actions: <IndexActions index={index} onDropIndex={onDropIndex} />,
-      // TODO(COMPASS-7206): details for the nested row
     };
   });