mongodb-js · mabaasit · Aug 26, 2022 · Aug 23, 2022 · Aug 23, 2022 · Aug 23, 2022
@@ -80,8 +80,6 @@
     "hadron-app": "^5.0.0",
     "hadron-app-registry": "^9.0.0",
     "lodash.contains": "^2.4.3",
-    "lodash.map": "^4.6.0",
-    "lodash.max": "^4.0.1",
     "mocha": "^8.4.0",
     "mongodb": "^4.6.0",
     "mongodb-data-service": "^22.0.0",

@@ -110,7 +110,7 @@ function CreateIndexModal({
   resetForm: () => void;
   isVisible: boolean;
   namespace: string;
-  error?: string;
+  error: string | null;
   clearError: () => void;
   inProgress: boolean;
   createIndex: () => void;

@@ -5,9 +5,9 @@ import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
 
 import { IndexesTable } from './indexes-table';
-import type { IndexModel } from './indexes-table';
+import type { IndexDefinition } from '../../modules/indexes';
 
-const indexes: IndexModel[] = [
+const indexes: IndexDefinition[] = [
   {
     cardinality: 'single',
     name: '_id_',
@@ -26,6 +26,7 @@ const indexes: IndexModel[] = [
         ];
       },
     },
+    usageCount: 10,
   },
   {
     cardinality: 'compound',
@@ -49,6 +50,7 @@ const indexes: IndexModel[] = [
         ];
       },
     },
+    usageCount: 15,
   },
   {
     cardinality: 'compound',
@@ -73,6 +75,7 @@ const indexes: IndexModel[] = [
         ];
       },
     },
+    usageCount: 20,
   },
   {
     cardinality: 'single',
@@ -97,6 +100,7 @@ const indexes: IndexModel[] = [
         ];
       },
     },
+    usageCount: 25,
   },
 ];
 

@@ -15,6 +15,11 @@ import SizeField from './size-field';
 import UsageField from './usage-field';
 import PropertyField from './property-field';
 import DropField from './drop-field';
+import type {
+  IndexDefinition,
+  SortColumn,
+  SortDirection,
+} from '../../modules/indexes';
 
 // When row is hovered, we show the delete button
 const rowStyles = css({
@@ -53,27 +58,11 @@ const nameFieldStyles = css({
   paddingBottom: spacing[2],
 });
 
-// todo: move to redux store when converting that to ts
-export type IndexModel = {
-  name: string;
-  fields: {
-    serialize: () => { field: string; value: number | string }[];
-  };
-  type: 'geo' | 'hashed' | 'text' | 'wildcard' | 'clustered' | 'columnstore';
-  cardinality: 'single' | 'compound';
-  properties: ('unique' | 'sparse' | 'partial' | 'ttl' | 'collation')[];
-  extra: Record<string, string | number | Record<string, any>>;
-  size: number;
-  relativeSize: number;
-  usageCount?: number;
-  usageSince?: Date;
-};
-
 type IndexesTableProps = {
   darkMode?: boolean;
-  indexes: IndexModel[];
+  indexes: IndexDefinition[];
   canDeleteIndex: boolean;
-  onSortTable: (name: string, direction: 'asc' | 'desc') => void;
+  onSortTable: (column: SortColumn, direction: SortDirection) => void;
   onDeleteIndex: (name: string) => void;
 };
 
@@ -84,13 +73,14 @@ export const IndexesTable: React.FunctionComponent<IndexesTableProps> = ({
   onDeleteIndex,
 }) => {
   const columns = useMemo(() => {
-    const _columns = [
+    const sortColumns: SortColumn[] = [
       'Name and Definition',
       'Type',
       'Size',
       'Usage',
       'Properties',
-    ].map((name) => {
+    ];
+    const _columns = sortColumns.map((name) => {
       return (
         <TableHeader
           data-testid={`index-header-${name}`}

@@ -8,7 +8,7 @@ import {
   IndexIcon,
 } from '@mongodb-js/compass-components';
 
-import type { IndexModel } from './indexes-table';
+import type { IndexDefinition } from '../../modules/indexes';
 
 const keyListStyles = css({
   marginTop: spacing[1],
@@ -26,7 +26,7 @@ const badgeStyles = css({
 
 type NameFieldProps = {
   name: string;
-  keys: ReturnType<IndexModel['fields']['serialize']>;
+  keys: ReturnType<IndexDefinition['fields']['serialize']>;
 };
 
 const NameField: React.FunctionComponent<NameFieldProps> = ({ name, keys }) => {

@@ -2,7 +2,7 @@ import React from 'react';
 import getIndexHelpLink from '../../utils/index-link-helper';
 
 import { spacing, css, Tooltip, Body } from '@mongodb-js/compass-components';
-import type { IndexModel } from './indexes-table';
+import type { IndexDefinition } from '../../modules/indexes';
 import BadgeWithIconLink from './badge-with-icon-link';
 
 const containerStyles = css({
@@ -19,8 +19,8 @@ const ttlTooltip = (expireAfterSeconds: number) => {
 };
 
 export const getPropertyTooltip = (
-  property: IndexModel['properties'][0],
-  extra: IndexModel['extra']
+  property: IndexDefinition['properties'][0],
+  extra: IndexDefinition['extra']
 ): string | null => {
   return property === 'ttl'
     ? ttlTooltip(extra.expireAfterSeconds as number)
@@ -50,9 +50,9 @@ const PropertyBadgeWithTooltip: React.FunctionComponent<{
 };
 
 type PropertyFieldProps = {
-  extra: IndexModel['extra'];
-  properties: IndexModel['properties'];
-  cardinality: IndexModel['cardinality'];
+  extra: IndexDefinition['extra'];
+  properties: IndexDefinition['properties'];
+  cardinality: IndexDefinition['cardinality'];
 };
 
 const PropertyField: React.FunctionComponent<PropertyFieldProps> = ({

@@ -2,20 +2,20 @@ import React from 'react';
 import getIndexHelpLink from '../../utils/index-link-helper';
 import { Tooltip, Body } from '@mongodb-js/compass-components';
 
-import type { IndexModel } from './indexes-table';
+import type { IndexDefinition } from '../../modules/indexes';
 import BadgeWithIconLink from './badge-with-icon-link';
 
-export const canRenderTooltip = (type: IndexModel['type']) => {
+export const canRenderTooltip = (type: IndexDefinition['type']) => {
   return ['text', 'wildcard', 'columnstore'].indexOf(type) !== -1;
 };
 
 type TypeFieldProps = {
-  type: IndexModel['type'];
-  extra: IndexModel['extra'];
+  type: IndexDefinition['type'];
+  extra: IndexDefinition['extra'];
 };
 
 export const IndexTypeTooltip: React.FunctionComponent<{
-  extra: IndexModel['extra'];
+  extra: IndexDefinition['extra'];
 }> = ({ extra }) => {
   const allowedProps = [
     'weights',

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 import AppRegistry from 'hadron-app-registry';
@@ -14,12 +14,14 @@ const renderIndexesToolbar = (
 
   render(
     <IndexesToolbar
-      errorMessage={undefined}
+      errorMessage={null}
       isReadonly={false}
       isReadonlyView={false}
       isWritable={true}
       localAppRegistry={appRegistry}
       writeStateDescription={undefined}
+      onRefreshIndexes={() => {}}
+      isRefreshing={false}
       {...props}
     />
   );
@@ -128,4 +130,36 @@ describe('IndexesToolbar Component', function () {
       expect(emitSpy.firstCall.args[1]).to.equal(true);
     });
   });
+
+  describe('when the refresh button is clicked', function () {
+    it('renders refresh button - enabled state', function () {
+      renderIndexesToolbar({
+        isRefreshing: false,
+      });
+      const refreshButton = screen.getByTestId('refresh-indexes-button');
+      expect(refreshButton).to.exist;
+      expect(refreshButton.getAttribute('disabled')).to.be.null;
+    });
+
+    it('renders refresh button - disabled state', function () {
+      renderIndexesToolbar({
+        isRefreshing: true,
+      });
+      const refreshButton = screen.getByTestId('refresh-indexes-button');
+      expect(refreshButton).to.exist;
+      expect(refreshButton.getAttribute('disabled')).to.not.be.null;
+      expect(within(refreshButton).getByTitle(/refreshing indexes/i)).to.exist;
+    });
+
+    it('should call onRefreshIndexes', function () {
+      const onRefreshIndexesSpy = sinon.spy();
+      renderIndexesToolbar({
+        onRefreshIndexes: onRefreshIndexesSpy,
+      });
+      const refreshButton = screen.getByTestId('refresh-indexes-button');
+      expect(onRefreshIndexesSpy.callCount).to.equal(0);
+      userEvent.click(refreshButton);
+      expect(onRefreshIndexesSpy).to.have.been.calledOnce;
+    });
+  });
 });
@@ -8,6 +8,8 @@ import {
   css,
   mergeProps,
   spacing,
+  Icon,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import type AppRegistry from 'hadron-app-registry';
 
@@ -23,18 +25,22 @@ const toolbarButtonsContainer = css({
   justifyContent: 'flex-end',
 });
 
+const spinnerStyles = css({ marginRight: spacing[2] });
+
 const createIndexButtonContainerStyles = css({
   display: 'inline-block',
   width: 'fit-content',
 });
 
 type IndexesToolbarProps = {
-  errorMessage?: string;
+  errorMessage: string | null;
   isReadonly: boolean;
   isReadonlyView: boolean;
   isWritable: boolean;
   localAppRegistry: AppRegistry;
+  isRefreshing: boolean;
   writeStateDescription?: string;
+  onRefreshIndexes: () => void;
 };
 
 export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
@@ -43,17 +49,36 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
   isReadonlyView,
   isWritable,
   localAppRegistry,
+  isRefreshing,
   writeStateDescription,
+  onRefreshIndexes,
 }) => {
   const onClickCreateIndex = useCallback(() => {
     localAppRegistry.emit('toggle-create-index-modal', true);
   }, [localAppRegistry]);
 
   const showCreateIndexButton = !isReadonly && !isReadonlyView && !errorMessage;
+  const refreshButtonIcon = isRefreshing ? (
+    <div className={spinnerStyles}>
+      <SpinLoader title="Refreshing Indexes" />
+    </div>
+  ) : (
+    <Icon glyph="Refresh" title="Refresh Indexes" />
+  );
 
   return (
     <Toolbar className={toolbarStyles} data-testid="indexes-toolbar">
       <div className={toolbarButtonsContainer}>
+        <Button
+          data-testid="refresh-indexes-button"
+          disabled={isRefreshing}
+          onClick={() => onRefreshIndexes()}
+          variant="default"
+          size="small"
+          leftGlyph={refreshButtonIcon}
+        >
+          Refresh
+        </Button>
         {showCreateIndexButton && (
           <Tooltip
             enabled={!isWritable}

@@ -16,9 +16,11 @@ const renderIndexes = (
       isReadonly={false}
       isReadonlyView={false}
       description={undefined}
-      error={undefined}
+      error={null}
       localAppRegistry={appRegistry}
+      isRefreshing={false}
       onSortTable={() => {}}
+      onRefresh={() => {}}
       {...props}
     />
   );
@@ -79,6 +81,7 @@ describe('Indexes Component', function () {
               ];
             },
           },
+          usageCount: 20,
         },
       ],
       isReadonlyView: false,