feat: implement new indexes modal designs COMPASS-5978

packages/compass-components/package.json

@@ -35,7 +35,7 @@
     "@leafygreen-ui/banner": "^3.0.9",
     "@leafygreen-ui/button": "^12.0.5",
     "@leafygreen-ui/card": "^5.1.4",
-    "@leafygreen-ui/checkbox": "^6.0.6",
+    "@leafygreen-ui/checkbox": "^7.0.1",
     "@leafygreen-ui/code": "^9.4.0",
     "@leafygreen-ui/confirmation-modal": "^2.2.3",
     "@leafygreen-ui/emotion": "^4.0.0",

packages/compass-components/src/components/collapsible-field-set.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import { TextInput } from './leafygreen';
+import { render, screen, cleanup } from '@testing-library/react';
+
+import { CollapsibleFieldSet } from './collapsible-field-set';
+
+function collapsibleFieldSet(toggled: boolean) {
+  const onToggleSpy = sinon.spy();
+  return (
+    <CollapsibleFieldSet
+      toggled={toggled}
+      onToggle={onToggleSpy}
+      label="Test"
+      dataTestId="my-checkbox"
+      description="Some description."
+    >
+      <TextInput
+        data-testid="my-input"
+        label="Test input"
+        value={'Hello World'}
+        type="text"
+      />
+    </CollapsibleFieldSet>
+  );
+}
+
+describe('CollapsibleFieldSet Component', function () {
+  afterEach(cleanup);
+
+  it('should not display a child input', function () {
+    render(collapsibleFieldSet(false));
+    const checkbox = screen.getByTestId('my-checkbox');
+    expect(checkbox).to.exist;
+    expect(screen.queryByTestId('my-input')).to.not.exist;
+  });
+
+  it('should display a child input', function () {
+    render(collapsibleFieldSet(true));
+    const checkbox = screen.getByTestId('my-checkbox');
+    expect(checkbox).to.exist;
+    expect(screen.queryByTestId('my-input')).to.exist;
+  });
+});

packages/compass-components/src/components/collapsible-field-set.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { css } from '@leafygreen-ui/emotion';
+import { Link, Checkbox, Label } from './leafygreen';
+import { spacing } from '@leafygreen-ui/tokens';
+import { withTheme } from '../hooks/use-theme';
+import { Description } from '@leafygreen-ui/typography';
+
+const infoLinkStyles = css({
+  marginLeft: spacing[1],
+});
+
+const collapsibleFieldsetStyles = css({
+  margin: `${spacing[3]}px 0`,
+  fieldset: {
+    paddingLeft: `${spacing[4]}px`,
+  },
+});
+
+export type CollapsibleFieldSetProps = {
+  darkMode?: boolean;
+  dataTestId?: string;
+  children?: React.ReactElement;
+  label: string;
+  description?: React.ReactElement | string;
+  disabled?: boolean;
+  helpUrl?: string;
+  onToggle: (checked: boolean) => void;
+  toggled?: boolean;
+};
+
+const UnthemedCollapsibleFieldSet = ({
+  darkMode,
+  description,
+  disabled,
+  helpUrl,
+  label,
+  onToggle,
+  toggled,
+  dataTestId,
+  children,
+}: React.PropsWithChildren<CollapsibleFieldSetProps>): React.ReactElement => {
+  const labelId = dataTestId || 'collapsible-fieldset-props';
+  return (
+    <fieldset
+      className={collapsibleFieldsetStyles}
+      data-testid={`${labelId}-fieldset`}
+    >
+      <Checkbox
+        data-testid={labelId}
+        onChange={(event) => {
+          onToggle(event.target.checked);
+        }}
+        disabled={disabled}
+        label={<Label htmlFor={labelId}>{label}</Label>}
+        description={
+          !description
+            ? ''
+            : ((
+                <Description>
+                  {description}
+                  {!!helpUrl && (
+                    <Link
+                      className={infoLinkStyles}
+                      href={helpUrl}
+                      aria-label={label}
+                    >
+                      Learn More
+                    </Link>
+                  )}
+                </Description>
+              ) as any) // LG Checkbox expects a string description, but we use Description component to include helpUrl.
+        }
+        checked={toggled}
+        id={labelId}
+        darkMode={darkMode}
+      />
+      {toggled && <fieldset>{children}</fieldset>}
+    </fieldset>
+  );
+};
+
+const CollapsibleFieldSet = withTheme(UnthemedCollapsibleFieldSet);
+export { CollapsibleFieldSet };

packages/compass-components/src/components/leafy-green/combobox/combobox.styles.ts

@@ -351,3 +351,11 @@ export const menuMessage = css`
     height: 1em;
   }
 `;
+
+// Show combobox menu under the input workaround when usePortal=false.
+export const popoverStyle = () => css`
+  overflow: hidden;
+  top: auto;
+  left: auto;
+  box-shadow: 0 3px 7px 0 rgba(6, 22, 33, 0.3);
+`;

packages/compass-components/src/components/leafy-green/combobox/combobox.tsx

@@ -45,6 +45,7 @@ import {
   menuMessage,
   menuStyle,
   menuWrapperStyle,
+  popoverStyle,
 } from './combobox.styles';
 import { InternalComboboxGroup } from './combobox-group';
 import type { OptionObject } from './util';
@@ -886,12 +887,18 @@ export default function Combobox<M extends boolean>({
 
       setInputFocus(cursorPos);
     }
+
+    // Open menu on click instead of on focus.
+    // https://jira.mongodb.org/browse/PD-2321
+    openMenu();
   };
 
   // Fired when the wrapper gains focus
   const handleInputWrapperFocus = () => {
     scrollToEnd();
-    openMenu();
+    // To prevent Combobox menu from automatically being opened on focus.
+    // https://jira.mongodb.org/browse/PD-2321
+    // openMenu();
   };
 
   // Fired onChange
@@ -1152,7 +1159,12 @@ export default function Combobox<M extends boolean>({
           justify="middle"
           refEl={comboboxRef}
           adjustOnMutation={true}
-          className={menuWrapperStyle({ darkMode, size, width: menuWidth })}
+          className={cx(
+            popoverStyle(),
+            menuWrapperStyle({ darkMode, size, width: menuWidth })
+          )}
+          usePortal={false} // combobox@0.9.0 does not have implemented functionality for usePortal yet.
+          popoverZIndex={999999}
         >
           <div
             id={menuId}

packages/compass-components/src/index.ts

@@ -28,6 +28,7 @@ import { RadioBoxGroup } from './components/radio-box-group';
 import { SpinLoader } from './components/spin-loader';
 import { ResizeHandle, ResizeDirection } from './components/resize-handle';
 import { Accordion } from './components/accordion';
+import { CollapsibleFieldSet } from './components/collapsible-field-set';
 import { WorkspaceTabs } from './components/workspace-tabs/workspace-tabs';
 import ResizableSidebar from './components/resizeable-sidebar';
 import {
@@ -76,6 +77,7 @@ import IndexIcon from './components/index-icon';
 
 export {
   Accordion,
+  CollapsibleFieldSet,
   CancelLoader,
   ConfirmationModal,
   ErrorSummary,

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

@@ -774,26 +774,33 @@ export const IndexList = '[data-test-id="index-list"]';
 export const IndexComponent = '[data-test-id="index-list"] tr';
 export const IndexFieldName = '[data-testid="index-field-name"]';
 export const IndexFieldType = '[data-testid="index-field-type"]';
-export const IndexToggleOptions =
-  '[data-test-id="create-index-modal-toggle-options"]';
-export const IndexToggleIsWildcard =
-  '[data-test-id="wildcard-projection"] input[type="checkbox"]';
-export const IndexWildcardProjectionEditor =
-  '[data-test-id="create-index-modal-options-param-wrapper-editor"] .ace_editor';
+
 export const CreateIndexButton =
   '[data-testid="open-create-index-modal-button"]';
-export const CreateIndexModal = '[data-test-id="create-index-modal"]';
+
+// Indexes modal
+export const CreateIndexModal = '[data-testid="create-index-modal"]';
 
 export const CreateIndexModalFieldNameSelectInput = (idx: number): string => {
-  return `[data-test-id="create-index-field-name-${idx}"] input`;
+  return `[data-testid="create-index-fields-name-${idx}"] input`;
 };
 export const CreateIndexModalFieldTypeSelectButton = (idx: number): string => {
-  return `[data-test-id="create-index-field-type-${idx}"] button`;
+  return `[data-testid="create-index-fields-type-${idx}"] button`;
 };
 export const CreateIndexModalFieldTypeSelectMenu = (idx: number): string => {
-  return `[data-test-id="create-index-field-type-${idx}"] #create-index-field-type-${idx}-menu`;
+  return `[data-testid="create-index-fields-type-${idx}"] #create-index-fields-type-select-${idx}-menu`;
 };
-export const CreateIndexConfirmButton = '[data-test-id="create-index-button"]';
+
+export const IndexToggleOptions =
+  '[data-testid="create-index-modal-toggle-options"]';
+export const IndexToggleIsWildcard =
+  '[data-testid="create-index-modal-use-wildcard-checkbox-fieldset"] #create-index-modal-use-wildcard-checkbox-label';
+export const IndexWildcardProjectionEditor =
+  '[data-testid="create-index-modal-use-wildcard-checkbox-fieldset"] .ace_editor';
+
+export const CreateIndexErrorMessage = `${CreateIndexModal} [role="alert"]`;
+export const CreateIndexConfirmButton = `${CreateIndexModal} [role=dialog] > div:nth-child(2) button:first-child`;
+export const CreateIndexCancelButton = `${CreateIndexModal} [role=dialog] > div:nth-child(2) button:last-child`;
 
 export const DropIndexModal = '[data-testid="drop_index_modal"]';
 export const DropIndexModalConfirmName =

packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts

@@ -65,7 +65,6 @@ describe('Collection indexes tab', function () {
       Selectors.CreateIndexModalFieldTypeSelectButton(0)
     );
     await fieldTypeSelect.waitForDisplayed();
-
     await fieldTypeSelect.click();
 
     const fieldTypeSelectMenu = await browser.$(
@@ -144,7 +143,9 @@ describe('Collection indexes tab', function () {
       const indexToggleIsWildcard = await browser.$(
         Selectors.IndexToggleIsWildcard
       );
-      await indexToggleIsWildcard.click();
+
+      await indexToggleIsWildcard.waitForDisplayed();
+      await browser.clickVisible(Selectors.IndexToggleIsWildcard);
 
       // set the text in the editor
       await browser.setAceValue(