feat(compass-indexes): adds support for hiding and unhiding indexes in Index tab (#4531)

Co-authored-by: Sergey Petushkov <[email protected]>

Author: himanshusinghs

packages/compass-components/src/components/item-action-controls.tsx

@@ -1,5 +1,7 @@
 import React, { useRef, forwardRef, useCallback, useState } from 'react';
 import { Button, Icon, IconButton, Menu, MenuItem } from './leafygreen';
+import { Tooltip } from './tooltip';
+import type { TooltipProps } from './tooltip';
 import type { ButtonProps } from '@leafygreen-ui/button';
 
 import { spacing } from '@leafygreen-ui/tokens';
@@ -11,6 +13,11 @@ export type ItemAction<Action> = {
   icon: string;
 };
 
+export type GroupedItemAction<Action> = ItemAction<Action> & {
+  tooltip?: string;
+  tooltipProps?: TooltipProps;
+};
+
 export type MenuAction<Action> = {
   action: Action;
   label: string;
@@ -215,7 +222,7 @@ export function ItemActionGroup<Action extends string>({
   isVisible = true,
   'data-testid': dataTestId,
 }: {
-  actions: ItemAction<Action>[];
+  actions: GroupedItemAction<Action>[];
   onAction(actionName: Action): void;
   className?: string;
   iconClassName?: string;
@@ -243,21 +250,39 @@ export function ItemActionGroup<Action extends string>({
       className={cx(actionControlsStyle, className)}
       data-testid={dataTestId}
     >
-      {actions.map(({ action, icon, label }) => {
-        return (
+      {actions.map(({ action, icon, label, tooltip, tooltipProps }) => {
+        const button = (
           <ItemActionButton
             key={action}
             glyph={icon}
             label={label}
-            title={label}
+            title={!tooltip ? label : undefined}
             size={iconSize}
             data-action={action}
             data-testid={actionTestId<Action>(dataTestId, action)}
             onClick={onClick}
             className={cx(actionGroupButtonStyle, iconClassName)}
             style={iconStyle}
-          ></ItemActionButton>
+          />
         );
+
+        if (tooltip) {
+          return (
+            <Tooltip
+              {...tooltipProps}
+              trigger={({ children, ...props }) => (
+                <div {...props} style={{ display: 'inherit' }}>
+                  {button}
+                  {children}
+                </div>
+              )}
+            >
+              {tooltip}
+            </Tooltip>
+          );
+        }
+
+        return button;
       })}
     </div>
   );

packages/compass-components/src/components/tooltip.tsx

@@ -23,12 +23,19 @@ type LeafyGreenTooltipProps = React.ComponentPropsWithoutRef<
 
 type TooltipTrigger = React.FunctionComponent;
 
-const Tooltip: React.FunctionComponent<
-  TooltipTriggerProps &
-    Omit<LeafyGreenTooltipProps, 'trigger'> & {
-      trigger: TooltipTrigger;
-    }
-> = ({ isDisabled, triggerOn, delay, trigger, children, ...rest }) => {
+type TooltipProps = TooltipTriggerProps &
+  Omit<LeafyGreenTooltipProps, 'trigger'> & {
+    trigger: TooltipTrigger;
+  };
+
+const Tooltip: React.FunctionComponent<TooltipProps> = ({
+  isDisabled,
+  triggerOn,
+  delay,
+  trigger,
+  children,
+  ...rest
+}) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const tooltipState = useTooltipTriggerState({
     isDisabled,
@@ -66,4 +73,4 @@ const Tooltip: React.FunctionComponent<
   );
 };
 
-export { Tooltip };
+export { Tooltip, TooltipProps };

packages/compass-components/src/hooks/use-confirmation.tsx

@@ -9,7 +9,7 @@ export { ConfirmationModalVariant };
 
 type ConfirmationProperties = {
   title: string;
-  description: string;
+  description: React.ReactNode;
   buttonText?: string;
   variant?: ConfirmationModalVariant;
 };
@@ -129,7 +129,7 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
     <ConfirmationModalContext.Provider value={contextValue}>
       {children}
       <ConfirmationModal
-        data-testid="confirmation-modal"
+        data-testid={'confirmation-modal'}
         open={confirmationProps.open}
         title={confirmationProps.title ?? 'Are you sure?'}
         variant={confirmationProps.variant ?? ConfirmationModalVariant.Default}

packages/compass-components/src/index.ts

@@ -40,6 +40,7 @@ import ResizableSidebar, {
 } from './components/resizeable-sidebar';
 import {
   ItemAction,
+  GroupedItemAction,
   MenuAction,
   ItemActionControls,
   ItemActionGroup,
@@ -96,6 +97,7 @@ export {
   WarningSummary,
   WorkspaceTabs,
   ItemAction,
+  GroupedItemAction,
   MenuAction,
   ItemActionControls,
   ItemActionGroup,

packages/compass-e2e-tests/helpers/commands/create-index.ts

@@ -0,0 +1,97 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+type CreateIndexOptions = {
+  uniqueIndex?: boolean;
+  indexName?: string;
+  ttl?: number;
+  partialFilterExpression?: string;
+  wildcardProjection?: string;
+  customCollation?: string;
+  sparseIndex?: boolean;
+};
+
+type IndexType = '1' | '-1' | '2dsphere' | 'text';
+
+const indexTypeToIndexSelectOption: Record<IndexType, string> = {
+  '1': '1 (asc)',
+  '-1': '-1 (desc)',
+  '2dsphere': '2dsphere',
+  text: 'text',
+};
+
+export async function createIndex(
+  browser: CompassBrowser,
+  indexDefinition: {
+    fieldName: string;
+    indexType: IndexType;
+  },
+  extraOptions?: CreateIndexOptions,
+  screenshotName?: string
+): Promise<string> {
+  const createRowIndex = 0;
+  const { fieldName, indexType } = indexDefinition;
+  const indexName = extraOptions?.indexName ?? `${fieldName}_${indexType}`;
+
+  // Open the modal
+  await browser.clickVisible(Selectors.CreateIndexButton);
+  const createModal = await browser.$(Selectors.CreateIndexModal);
+  await createModal.waitForDisplayed();
+
+  // Select / type field name
+  await browser.setValueVisible(
+    Selectors.createIndexModalFieldNameSelectInput(createRowIndex),
+    fieldName
+  );
+  await browser.keys(['Enter']);
+
+  // Select field type
+  const fieldTypeSelect = await browser.$(
+    Selectors.createIndexModalFieldTypeSelectButton(createRowIndex)
+  );
+  await fieldTypeSelect.waitForDisplayed();
+  await fieldTypeSelect.click();
+  const fieldTypeSelectMenu = await browser.$(
+    Selectors.createIndexModalFieldTypeSelectMenu(createRowIndex)
+  );
+  await fieldTypeSelectMenu.waitForDisplayed();
+  await browser.clickVisible(
+    `li[value="${indexTypeToIndexSelectOption[indexType]}"]`
+  );
+  await fieldTypeSelectMenu.waitForDisplayed({ reverse: true });
+
+  // Select extra options
+  if (extraOptions) {
+    await browser.clickVisible(Selectors.IndexToggleOptions);
+    const { wildcardProjection } = extraOptions;
+
+    if (wildcardProjection) {
+      await browser.clickVisible(
+        Selectors.indexToggleOption('wildcardProjection')
+      );
+
+      // set the text in the editor
+      await browser.setCodemirrorEditorValue(
+        Selectors.indexOptionInput('wildcardProjection', 'code'),
+        wildcardProjection
+      );
+    }
+  }
+
+  if (screenshotName) {
+    await browser.screenshot(screenshotName);
+  }
+
+  // Create the index
+  await browser.clickVisible(Selectors.CreateIndexConfirmButton);
+
+  // Assert that modal goes away
+  await createModal.waitForDisplayed({ reverse: true });
+
+  // Assert that index does come in table
+  const indexComponentSelector = Selectors.indexComponent(indexName);
+  const indexComponent = await browser.$(indexComponentSelector);
+  await indexComponent.waitForDisplayed();
+
+  return indexName;
+}

packages/compass-e2e-tests/helpers/commands/drop-index.ts

@@ -0,0 +1,37 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function dropIndex(
+  browser: CompassBrowser,
+  indexName: string,
+  screenshotName?: string
+) {
+  const indexComponentSelector = Selectors.indexComponent(indexName);
+  const indexComponent = await browser.$(indexComponentSelector);
+  await indexComponent.waitForDisplayed();
+
+  await browser.hover(indexComponentSelector);
+  await browser.clickVisible(
+    `${indexComponentSelector} ${Selectors.DropIndexButton}`
+  );
+
+  const dropModal = await browser.$(Selectors.DropIndexModal);
+  await dropModal.waitForDisplayed();
+
+  const confirmInput = await browser.$(Selectors.DropIndexModalConfirmName);
+  await confirmInput.waitForDisplayed();
+  await confirmInput.setValue(indexName);
+
+  if (screenshotName) {
+    await browser.screenshot(screenshotName);
+  }
+
+  const ConfirmButtonSelector = Selectors.ConfirmationModalConfirmButton(
+    Selectors.DropIndexModal
+  );
+  await browser.clickVisible(ConfirmButtonSelector);
+
+  await dropModal.waitForDisplayed({ reverse: true });
+
+  await indexComponent.waitForDisplayed({ reverse: true });
+}

packages/compass-e2e-tests/helpers/commands/hide-index.ts

@@ -0,0 +1,31 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function hideIndex(
+  browser: CompassBrowser,
+  indexName: string,
+  screenshotName?: string
+) {
+  const indexComponentSelector = Selectors.indexComponent(indexName);
+  const indexComponent = await browser.$(indexComponentSelector);
+  await indexComponent.waitForDisplayed();
+
+  await browser.hover(indexComponentSelector);
+  await browser.clickVisible(
+    `${indexComponentSelector} ${Selectors.HideIndexButton}`
+  );
+
+  const hideModal = await browser.$(Selectors.ConfirmationModal);
+  await hideModal.waitForDisplayed();
+
+  if (screenshotName) {
+    await browser.screenshot(screenshotName);
+  }
+
+  await browser.clickVisible(Selectors.ConfirmationModalConfirmButton());
+
+  await hideModal.waitForDisplayed({ reverse: true });
+
+  const hiddenBadge = await browser.$(Selectors.HiddenIndexBadge(indexName));
+  await hiddenBadge.waitForDisplayed();
+}

packages/compass-e2e-tests/helpers/commands/index.ts

@@ -60,3 +60,7 @@ export * from './add-wizard';
 export * from './set-combo-box-value';
 export * from './wait-for-export-to-finish';
 export * from './get-connect-form-connection-string';
+export * from './create-index';
+export * from './drop-index';
+export * from './hide-index';
+export * from './unhide-index';

packages/compass-e2e-tests/helpers/commands/unhide-index.ts

@@ -0,0 +1,31 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function unhideIndex(
+  browser: CompassBrowser,
+  indexName: string,
+  screenshotName?: string
+) {
+  const indexComponentSelector = Selectors.indexComponent(indexName);
+  const indexComponent = await browser.$(indexComponentSelector);
+  await indexComponent.waitForDisplayed();
+
+  await browser.hover(indexComponentSelector);
+  await browser.clickVisible(
+    `${indexComponentSelector} ${Selectors.UnhideIndexButton}`
+  );
+
+  const unhideModal = await browser.$(Selectors.ConfirmationModal);
+  await unhideModal.waitForDisplayed();
+
+  if (screenshotName) {
+    await browser.screenshot(screenshotName);
+  }
+
+  await browser.clickVisible(Selectors.ConfirmationModalConfirmButton());
+
+  await unhideModal.waitForDisplayed({ reverse: true });
+
+  const hiddenBadge = await browser.$(Selectors.HiddenIndexBadge(indexName));
+  await hiddenBadge.waitForDisplayed({ reverse: true });
+}

packages/compass-e2e-tests/helpers/selectors.ts

@@ -957,11 +957,17 @@ export const CreateIndexConfirmButton = `${CreateIndexModal} [data-testid="creat
 export const DropIndexModal = '[data-testid="drop-index-modal"]';
 export const DropIndexModalConfirmName =
   '[data-testid="confirm-drop-index-name"]';
-export const DropIndexModalConfirmButton =
-  '[data-testid="drop-index-modal"] [role=dialog] > div:nth-child(2) button:first-child';
-
 export const DropIndexButton = '[data-testid="index-actions-delete-action"]';
 
+export const HiddenIndexBadge = (indexName: string) =>
+  `${indexComponent(indexName)} [data-testid="HIDDEN-badge"]`;
+export const HideIndexModal = '[data-testid="hide-index-confirmation-modal"]';
+export const HideIndexButton = '[data-testid="index-actions-hide-action"]';
+
+export const UnhideIndexModal =
+  '[data-testid="unhide-index-confirmation-modal"]';
+export const UnhideIndexButton = '[data-testid="index-actions-unhide-action"]';
+
 // Validation tab
 export const AddRuleButton = '[data-testid="add-rule-button"]';
 export const ValidationEditor = '[data-testid="validation-editor"]';
@@ -1079,7 +1085,9 @@ export const ExportToLanguageQueryOutput =
 
 // Confirmation modal
 export const ConfirmationModal = '[data-testid="confirmation-modal"]';
-export const ConfirmationModalConfirmButton = `${ConfirmationModal} [role=dialog] > div:nth-child(2) button:first-child`;
+export const ConfirmationModalConfirmButton = (
+  modalSelector = ConfirmationModal
+) => `${modalSelector} [role=dialog] button:nth-of-type(1)`;
 
 // New pipeline from text modal
 export const NewPipelineFromTextModal = '[data-testid="import-pipeline-modal"]';