From 904f9cb096ac7564480f6467eb2500425f04cd92 Mon Sep 17 00:00:00 2001
From: Ruby Dong <ruby.dong@mongodb.com>
Date: Wed, 7 May 2025 12:19:34 -0400
Subject: [PATCH 1/3] added new accordion with updated styles

---
 .../create-index-form/create-index-form.tsx   | 67 ++++++++++-----
 .../create-index-options-accordion.tsx        | 84 +++++++++++++++++++
 2 files changed, 130 insertions(+), 21 deletions(-)
 create mode 100644 packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx

diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx
index 72b108a64a0..90868ef5ddc 100644
--- a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx
+++ b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx
@@ -21,6 +21,7 @@ import { usePreference } from 'compass-preferences-model/provider';
 import IndexFlowSection from './index-flow-section';
 import QueryFlowSection from './query-flow-section';
 import toNS from 'mongodb-ns';
+import CreateIndexOptionsAccordion from './create-index-options-accordion';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -165,28 +166,52 @@ function CreateIndexForm({
           collectionName={collectionName}
         />
       )}
-
-      {/* TODO in CLOUDP-314036: update the accordion design */}
-      <Accordion data-testid="create-index-modal-toggle-options" text="Options">
-        <div
-          data-testid="create-index-modal-options"
-          className={createIndexModalOptionStyles}
+      {showIndexesGuidanceVariant ? (
+        <CreateIndexOptionsAccordion>
+          <div
+            data-testid="create-index-modal-options"
+            className={createIndexModalOptionStyles}
+          >
+            <CheckboxInput name="unique"></CheckboxInput>
+            <CollapsibleInput name="name"></CollapsibleInput>
+            <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
+            <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
+            <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
+            <CollapsibleInput name="collation"></CollapsibleInput>
+            {hasColumnstoreIndexesSupport(serverVersion) && (
+              <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
+            )}
+            <CheckboxInput name="sparse"></CheckboxInput>
+            {showRollingIndexOption && (
+              <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
+            )}
+          </div>
+        </CreateIndexOptionsAccordion>
+      ) : (
+        <Accordion
+          data-testid="create-index-modal-toggle-options"
+          text="Options"
         >
-          <CheckboxInput name="unique"></CheckboxInput>
-          <CollapsibleInput name="name"></CollapsibleInput>
-          <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
-          <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
-          <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
-          <CollapsibleInput name="collation"></CollapsibleInput>
-          {hasColumnstoreIndexesSupport(serverVersion) && (
-            <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
-          )}
-          <CheckboxInput name="sparse"></CheckboxInput>
-          {showRollingIndexOption && (
-            <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
-          )}
-        </div>
-      </Accordion>
+          <div
+            data-testid="create-index-modal-options"
+            className={createIndexModalOptionStyles}
+          >
+            <CheckboxInput name="unique"></CheckboxInput>
+            <CollapsibleInput name="name"></CollapsibleInput>
+            <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
+            <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
+            <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
+            <CollapsibleInput name="collation"></CollapsibleInput>
+            {hasColumnstoreIndexesSupport(serverVersion) && (
+              <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
+            )}
+            <CheckboxInput name="sparse"></CheckboxInput>
+            {showRollingIndexOption && (
+              <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
+            )}
+          </div>
+        </Accordion>
+      )}
     </>
   );
 }
diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx
new file mode 100644
index 00000000000..b117078cfb4
--- /dev/null
+++ b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx
@@ -0,0 +1,84 @@
+import {
+  Body,
+  css,
+  cx,
+  Icon,
+  palette,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+import React, { useState } from 'react';
+
+const buttonLightThemeStyles = css({
+  color: palette.gray.dark2,
+});
+const buttonDarkThemeStyles = css({
+  color: palette.white,
+});
+
+const buttonStyles = css({
+  fontWeight: 'bold',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: 0,
+  paddingRight: 0,
+  border: 'none',
+  background: 'none',
+  boxShadow: 'none',
+  '&:hover': {
+    cursor: 'pointer',
+  },
+});
+
+const buttonIconContainerStyles = css({
+  marginLeft: '4px',
+});
+
+const iconDarkThemeStyles = css({
+  color: palette.gray.base,
+});
+
+const iconLightThemeStyles = css({
+  color: palette.gray.dark1,
+});
+
+const CreateIndexOptionsAccordion = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [open, setOpen] = useState(false);
+  const darkMode = useDarkMode();
+
+  const onOpenChange = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <>
+      <button
+        className={cx(
+          darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
+          buttonStyles
+        )}
+        type="button"
+        aria-expanded={open ? 'true' : 'false'}
+        onClick={onOpenChange}
+      >
+        <Body baseFontSize={16} weight="medium">
+          Options
+        </Body>
+        <Icon
+          className={
+            (cx(darkMode ? iconDarkThemeStyles : iconLightThemeStyles),
+            buttonIconContainerStyles)
+          }
+          glyph={open ? 'ChevronDown' : 'ChevronRight'}
+        />
+      </button>
+
+      {open && <>{children}</>}
+    </>
+  );
+};
+
+export default CreateIndexOptionsAccordion;

From 79c2a500f2f640b9596f0f90470265bfccde94db Mon Sep 17 00:00:00 2001
From: Ruby Dong <ruby.dong@mongodb.com>
Date: Wed, 7 May 2025 12:31:22 -0400
Subject: [PATCH 2/3] cleaned up redundant code and added tests

---
 .../create-index-options-accordion.spec.tsx   | 44 +++++++++++++++++++
 .../create-index-options-accordion.tsx        | 30 +++----------
 2 files changed, 49 insertions(+), 25 deletions(-)
 create mode 100644 packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx

diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx
new file mode 100644
index 00000000000..b43ff065ddd
--- /dev/null
+++ b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import CreateIndexOptionsAccordion from './create-index-options-accordion';
+
+describe('CreateIndexOptionsAccordion', () => {
+  it('renders the button with "Options" text', () => {
+    render(
+      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
+    );
+    expect(screen.getByText('Options')).to.exist;
+  });
+
+  it('toggles the accordion content when the button is clicked', () => {
+    render(
+      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
+    );
+
+    const button = screen.getByRole('button', { name: /options/i });
+    expect(screen.queryByText('Test Content')).to.not.exist;
+
+    userEvent.click(button);
+    expect(screen.getByText('Test Content')).to.exist;
+
+    userEvent.click(button);
+    expect(screen.queryByText('Test Content')).to.not.exist;
+  });
+
+  it('renders the correct icon based on the open state', () => {
+    render(
+      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
+    );
+
+    const button = screen.getByRole('button', { name: /options/i });
+    expect(
+      screen.getByTestId('create-index-options-accordion-icon')
+    ).to.have.attribute('aria-label', 'Chevron Right Icon');
+
+    userEvent.click(button);
+    expect(
+      screen.getByTestId('create-index-options-accordion-icon')
+    ).to.have.attribute('aria-label', 'Chevron Down Icon');
+  });
+});
diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx
index b117078cfb4..da8a8867cbb 100644
--- a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx
+++ b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx
@@ -1,20 +1,12 @@
 import {
   Body,
   css,
-  cx,
   Icon,
   palette,
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import React, { useState } from 'react';
 
-const buttonLightThemeStyles = css({
-  color: palette.gray.dark2,
-});
-const buttonDarkThemeStyles = css({
-  color: palette.white,
-});
-
 const buttonStyles = css({
   fontWeight: 'bold',
   display: 'flex',
@@ -29,18 +21,10 @@ const buttonStyles = css({
   },
 });
 
-const buttonIconContainerStyles = css({
+const iconStyles = css({
   marginLeft: '4px',
 });
 
-const iconDarkThemeStyles = css({
-  color: palette.gray.base,
-});
-
-const iconLightThemeStyles = css({
-  color: palette.gray.dark1,
-});
-
 const CreateIndexOptionsAccordion = ({
   children,
 }: {
@@ -56,10 +40,7 @@ const CreateIndexOptionsAccordion = ({
   return (
     <>
       <button
-        className={cx(
-          darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
-          buttonStyles
-        )}
+        className={buttonStyles}
         type="button"
         aria-expanded={open ? 'true' : 'false'}
         onClick={onOpenChange}
@@ -68,11 +49,10 @@ const CreateIndexOptionsAccordion = ({
           Options
         </Body>
         <Icon
-          className={
-            (cx(darkMode ? iconDarkThemeStyles : iconLightThemeStyles),
-            buttonIconContainerStyles)
-          }
+          color={darkMode ? palette.gray.base : palette.gray.dark1}
+          className={iconStyles}
           glyph={open ? 'ChevronDown' : 'ChevronRight'}
+          data-testid="create-index-options-accordion-icon"
         />
       </button>
 

From a3e9f07376bff7d4f515d0e188eafea67b23e05f Mon Sep 17 00:00:00 2001
From: Ruby Dong <ruby.dong@mongodb.com>
Date: Fri, 9 May 2025 11:00:40 -0400
Subject: [PATCH 3/3] reusing original accordion

---
 .../create-index-form/create-index-form.tsx   | 69 +++++++------------
 .../create-index-options-accordion.spec.tsx   | 44 ------------
 .../create-index-options-accordion.tsx        | 64 -----------------
 3 files changed, 23 insertions(+), 154 deletions(-)
 delete mode 100644 packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx
 delete mode 100644 packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx

diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx
index 90868ef5ddc..736e0f9f13f 100644
--- a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx
+++ b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx
@@ -21,7 +21,6 @@ import { usePreference } from 'compass-preferences-model/provider';
 import IndexFlowSection from './index-flow-section';
 import QueryFlowSection from './query-flow-section';
 import toNS from 'mongodb-ns';
-import CreateIndexOptionsAccordion from './create-index-options-accordion';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -166,52 +165,30 @@ function CreateIndexForm({
           collectionName={collectionName}
         />
       )}
-      {showIndexesGuidanceVariant ? (
-        <CreateIndexOptionsAccordion>
-          <div
-            data-testid="create-index-modal-options"
-            className={createIndexModalOptionStyles}
-          >
-            <CheckboxInput name="unique"></CheckboxInput>
-            <CollapsibleInput name="name"></CollapsibleInput>
-            <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
-            <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
-            <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
-            <CollapsibleInput name="collation"></CollapsibleInput>
-            {hasColumnstoreIndexesSupport(serverVersion) && (
-              <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
-            )}
-            <CheckboxInput name="sparse"></CheckboxInput>
-            {showRollingIndexOption && (
-              <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
-            )}
-          </div>
-        </CreateIndexOptionsAccordion>
-      ) : (
-        <Accordion
-          data-testid="create-index-modal-toggle-options"
-          text="Options"
+
+      <Accordion
+        data-testid="create-index-modal-toggle-options"
+        text={showIndexesGuidanceVariant ? 'Index Options' : 'Options'}
+      >
+        <div
+          data-testid="create-index-modal-options"
+          className={createIndexModalOptionStyles}
         >
-          <div
-            data-testid="create-index-modal-options"
-            className={createIndexModalOptionStyles}
-          >
-            <CheckboxInput name="unique"></CheckboxInput>
-            <CollapsibleInput name="name"></CollapsibleInput>
-            <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
-            <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
-            <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
-            <CollapsibleInput name="collation"></CollapsibleInput>
-            {hasColumnstoreIndexesSupport(serverVersion) && (
-              <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
-            )}
-            <CheckboxInput name="sparse"></CheckboxInput>
-            {showRollingIndexOption && (
-              <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
-            )}
-          </div>
-        </Accordion>
-      )}
+          <CheckboxInput name="unique"></CheckboxInput>
+          <CollapsibleInput name="name"></CollapsibleInput>
+          <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
+          <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
+          <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
+          <CollapsibleInput name="collation"></CollapsibleInput>
+          {hasColumnstoreIndexesSupport(serverVersion) && (
+            <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
+          )}
+          <CheckboxInput name="sparse"></CheckboxInput>
+          {showRollingIndexOption && (
+            <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
+          )}
+        </div>
+      </Accordion>
     </>
   );
 }
diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx
deleted file mode 100644
index b43ff065ddd..00000000000
--- a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.spec.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
-import { expect } from 'chai';
-import CreateIndexOptionsAccordion from './create-index-options-accordion';
-
-describe('CreateIndexOptionsAccordion', () => {
-  it('renders the button with "Options" text', () => {
-    render(
-      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
-    );
-    expect(screen.getByText('Options')).to.exist;
-  });
-
-  it('toggles the accordion content when the button is clicked', () => {
-    render(
-      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
-    );
-
-    const button = screen.getByRole('button', { name: /options/i });
-    expect(screen.queryByText('Test Content')).to.not.exist;
-
-    userEvent.click(button);
-    expect(screen.getByText('Test Content')).to.exist;
-
-    userEvent.click(button);
-    expect(screen.queryByText('Test Content')).to.not.exist;
-  });
-
-  it('renders the correct icon based on the open state', () => {
-    render(
-      <CreateIndexOptionsAccordion>Test Content</CreateIndexOptionsAccordion>
-    );
-
-    const button = screen.getByRole('button', { name: /options/i });
-    expect(
-      screen.getByTestId('create-index-options-accordion-icon')
-    ).to.have.attribute('aria-label', 'Chevron Right Icon');
-
-    userEvent.click(button);
-    expect(
-      screen.getByTestId('create-index-options-accordion-icon')
-    ).to.have.attribute('aria-label', 'Chevron Down Icon');
-  });
-});
diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx
deleted file mode 100644
index da8a8867cbb..00000000000
--- a/packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  Body,
-  css,
-  Icon,
-  palette,
-  useDarkMode,
-} from '@mongodb-js/compass-components';
-import React, { useState } from 'react';
-
-const buttonStyles = css({
-  fontWeight: 'bold',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: 0,
-  paddingRight: 0,
-  border: 'none',
-  background: 'none',
-  boxShadow: 'none',
-  '&:hover': {
-    cursor: 'pointer',
-  },
-});
-
-const iconStyles = css({
-  marginLeft: '4px',
-});
-
-const CreateIndexOptionsAccordion = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  const [open, setOpen] = useState(false);
-  const darkMode = useDarkMode();
-
-  const onOpenChange = () => {
-    setOpen(!open);
-  };
-
-  return (
-    <>
-      <button
-        className={buttonStyles}
-        type="button"
-        aria-expanded={open ? 'true' : 'false'}
-        onClick={onOpenChange}
-      >
-        <Body baseFontSize={16} weight="medium">
-          Options
-        </Body>
-        <Icon
-          color={darkMode ? palette.gray.base : palette.gray.dark1}
-          className={iconStyles}
-          glyph={open ? 'ChevronDown' : 'ChevronRight'}
-          data-testid="create-index-options-accordion-icon"
-        />
-      </button>
-
-      {open && <>{children}</>}
-    </>
-  );
-};
-
-export default CreateIndexOptionsAccordion;