feat(connect-form): Replace hardcoded hex codes with color codes COMPASS-5475 (#2756)

* feat(connect-form): use color codes

* move back to connect-form, fix connection list

* add tests

* Update packages/connect-form/src/hooks/use-connection-color.ts

Co-authored-by: Anna Henningsen <[email protected]>

* Update packages/connect-form/src/hooks/use-connection-color.ts

Co-authored-by: Anna Henningsen <[email protected]>

* fix lint errors

* fix tests

* add test for disable save button in the connection modal

Co-authored-by: Anna Henningsen <[email protected]>

Author: mcasimir

…onents/saved-connection-color-picker.tsx …src/components/favorite-color-picker.tsxpackages/connect-form/src/components/saved-connection-color-picker.tsx renamed to packages/connect-form/src/components/favorite-color-picker.tsx packages/connect-form/src/components/saved-connection-color-picker.tsx renamed to packages/connect-form/src/components/favorite-color-picker.tsx

@@ -2,36 +2,28 @@ import React from 'react';
 import {
   css,
   cx,
+  Label,
   spacing,
   uiColors,
-  Label,
 } from '@mongodb-js/compass-components';
+import {
+  CONNECTION_COLOR_CODES,
+  legacyColorsToColorCode,
+  useConnectionColor,
+} from '../hooks/use-connection-color';
 
 /**
  * Default colors.
  */
-const COLORS = [
-  '#5fc86e',
-  '#326fde',
-  '#deb342',
-  '#d4366e',
-  '#59c1e2',
-  '#2c5f4a',
-  '#d66531',
-  '#773819',
-  '#3b8196',
-  '#ababab',
-];
-
 const colorOptionStyles = css({
   outline: 'none',
   margin: 0,
   padding: 0,
   marginRight: spacing[2],
   borderRadius: '50%',
   verticalAlign: 'middle',
-  width: 36,
-  height: 36,
+  width: spacing[5] + spacing[1],
+  height: spacing[5] + spacing[1],
   border: '1px solid transparent',
   boxShadow: `0 0 0 0 ${uiColors.focus}`,
   transition: 'box-shadow .16s ease-in',
@@ -66,10 +58,12 @@ const selectedColorCheckmarkStyles = css({
 function ColorOption({
   isSelected,
   onClick,
+  code,
   hex,
 }: {
   isSelected: boolean;
   onClick: () => void;
+  code: string;
   hex: string;
 }): React.ReactElement {
   return (
@@ -80,7 +74,7 @@ function ColorOption({
         [activeColorOptionStyles]: isSelected,
         [inActiveColorOptionStyles]: !isSelected,
       })}
-      data-testid={`color-pick-${hex}${isSelected ? '-selected' : ''}`}
+      data-testid={`color-pick-${code}${isSelected ? '-selected' : ''}`}
       onClick={onClick}
       title={hex}
       aria-pressed={isSelected}
@@ -110,13 +104,16 @@ function ColorOption({
   );
 }
 
-function SavedConnectionColorPicker({
-  hex,
+export function FavoriteColorPicker({
+  colorCode,
   onChange,
 }: {
-  hex?: string;
+  colorCode?: string;
   onChange: (newColor?: string) => void;
 }): React.ReactElement {
+  const selectedColorCode = legacyColorsToColorCode(colorCode);
+  const { connectionColorToHex: colorCodeToHex } = useConnectionColor();
+  const selectedColorHex = colorCodeToHex(selectedColorCode);
   return (
     <>
       <Label htmlFor="favorite-color-selector">Color</Label>
@@ -128,30 +125,34 @@ function SavedConnectionColorPicker({
           }}
           className={cx({
             [colorOptionStyles]: true,
-            [activeColorOptionStyles]: !hex,
+            [activeColorOptionStyles]: !selectedColorHex,
           })}
           onClick={() => {
             onChange();
           }}
-          data-testid={`color-pick-no-color${!hex ? '-selected' : ''}`}
+          data-testid={`color-pick-no-color${
+            !selectedColorHex ? '-selected' : ''
+          }`}
           title="No color"
-          aria-pressed={!hex}
+          aria-pressed={!selectedColorHex}
         >
           <div className={noColorRedBarStyles} />
         </button>
-        {COLORS.map((color) => (
-          <ColorOption
-            onClick={() => {
-              onChange(color);
-            }}
-            isSelected={color === hex}
-            hex={color}
-            key={color}
-          />
-        ))}
+        {CONNECTION_COLOR_CODES.map((colorCode) => {
+          const hex = colorCodeToHex(colorCode) || '';
+          return (
+            <ColorOption
+              onClick={() => {
+                onChange(colorCode);
+              }}
+              isSelected={colorCode === selectedColorCode}
+              hex={hex}
+              code={colorCode}
+              key={colorCode}
+            />
+          );
+        })}
       </div>
     </>
   );
 }
-
-export default SavedConnectionColorPicker;

packages/connect-form/src/components/save-connection-modal.spec.tsx

@@ -40,7 +40,7 @@ describe('SaveConnectionModal Component', function () {
 
     describe('when the color and name are changed and save is clicked', function () {
       beforeEach(function () {
-        fireEvent.click(screen.getByTestId('color-pick-#59c1e2'));
+        fireEvent.click(screen.getByTestId('color-pick-color3'));
 
         const textArea = screen.getByRole('textbox');
 
@@ -72,7 +72,7 @@ describe('SaveConnectionModal Component', function () {
           expect(onSaveSpy.callCount).to.equal(1);
           expect(onSaveSpy.firstCall.args[0]).to.deep.equal({
             name: 'delicious cuban sandwich',
-            color: '#59c1e2',
+            color: 'color3',
           });
         });
 
@@ -83,6 +83,42 @@ describe('SaveConnectionModal Component', function () {
     });
   });
 
+  describe('when the connection does not have a name', function () {
+    beforeEach(function () {
+      render(
+        <SaveConnectionModal
+          onSaveClicked={onSaveSpy}
+          onCancelClicked={onCancelSpy}
+          open
+          initialFavoriteInfo={{ color: 'color1', name: '' }}
+        />
+      );
+    });
+
+    it('renders save disabled', function () {
+      const button = screen.getByText('Save').closest('button');
+      expect(button.disabled).to.be.true;
+    });
+  });
+
+  describe('when the connection does have a name', function () {
+    beforeEach(function () {
+      render(
+        <SaveConnectionModal
+          onSaveClicked={onSaveSpy}
+          onCancelClicked={onCancelSpy}
+          open
+          initialFavoriteInfo={{ color: 'color1', name: 'some name' }}
+        />
+      );
+    });
+
+    it('renders save as enabled', function () {
+      const button = screen.getByText('Save').closest('button');
+      expect(button.disabled).not.to.be.true;
+    });
+  });
+
   describe('when the loaded connection is already a favorite', function () {
     beforeEach(function () {
       render(
@@ -92,7 +128,7 @@ describe('SaveConnectionModal Component', function () {
           open
           initialFavoriteInfo={{
             name: 'pineapples',
-            color: '#326fde',
+            color: 'color3',
           }}
         />
       );
@@ -104,7 +140,7 @@ describe('SaveConnectionModal Component', function () {
 
     it('should have the color already selected', function () {
       expect(screen.queryByTestId('color-pick-no-color-selected')).to.not.exist;
-      expect(screen.getByTestId('color-pick-#326fde-selected')).to.be.visible;
+      expect(screen.getByTestId('color-pick-color3-selected')).to.be.visible;
     });
   });
 });

packages/connect-form/src/components/save-connection-modal.tsx

@@ -8,7 +8,7 @@ import {
 import type { ConnectionFavoriteOptions } from 'mongodb-data-service';
 
 import FormFieldContainer from './form-field-container';
-import SavedConnectionColorPicker from './saved-connection-color-picker';
+import { FavoriteColorPicker } from './favorite-color-picker';
 
 const connectionNameInputStyles = css({
   marginTop: spacing[5],
@@ -41,6 +41,7 @@ function SaveConnectionModal({
           ...editingFavorite,
         });
       }}
+      submitDisabled={(editingFavorite.name || '').trim() ? false : true}
       onCancel={onCancelClicked}
       buttonText="Save"
     >
@@ -61,8 +62,8 @@ function SaveConnectionModal({
         />
       </FormFieldContainer>
       <FormFieldContainer>
-        <SavedConnectionColorPicker
-          hex={editingFavorite.color}
+        <FavoriteColorPicker
+          colorCode={editingFavorite.color}
           onChange={(newColor?: string) => {
             setEditingFavorite({
               ...editingFavorite,

packages/connect-form/src/hooks/use-connection-color.spec.tsx

@@ -0,0 +1,68 @@
+import { cleanup, render } from '@testing-library/react';
+import { expect } from 'chai';
+import React from 'react';
+import {
+  useConnectionColor,
+  CONNECTION_COLOR_CODES,
+} from './use-connection-color';
+
+function TestComponent({
+  colorCode,
+}: {
+  colorCode: string;
+}): React.ReactElement {
+  const { connectionColorToHex } = useConnectionColor();
+  return <div>{connectionColorToHex(colorCode)}</div>;
+}
+
+describe('useConnectionColor', function () {
+  afterEach(cleanup);
+
+  it('converts a color code to hex', function () {
+    for (const colorCode of CONNECTION_COLOR_CODES) {
+      const { container } = render(<TestComponent colorCode={colorCode} />);
+      expect(container.firstChild.textContent).to.match(
+        /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
+      );
+    }
+  });
+
+  it('converts legacy colors', function () {
+    const legacyColors = {
+      '#5fc86e': 'color1',
+      '#326fde': 'color2',
+      '#deb342': 'color3',
+      '#d4366e': 'color4',
+      '#59c1e2': 'color5',
+      '#2c5f4a': 'color6',
+      '#d66531': 'color7',
+      '#773819': 'color8',
+      '#3b8196': 'color9',
+      '#ababab': 'color10',
+    };
+
+    for (const [legacyColor, colorCode] of Object.entries(legacyColors)) {
+      const { container: container1 } = render(
+        <TestComponent colorCode={legacyColor} />
+      );
+      const { container: container2 } = render(
+        <TestComponent colorCode={colorCode} />
+      );
+      expect(container1.firstChild.textContent).to.equal(
+        container2.firstChild.textContent
+      );
+    }
+  });
+
+  it('does not convert an unknown color code', function () {
+    const { container } = render(
+      <TestComponent colorCode={'someKindOfColor'} />
+    );
+    expect(container.firstChild.textContent).to.be.empty;
+  });
+
+  it('does not convert an unknown hex code', function () {
+    const { container } = render(<TestComponent colorCode={'#100000'} />);
+    expect(container.firstChild.textContent).to.be.empty;
+  });
+});

packages/connect-form/src/hooks/use-connection-color.ts

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+
+type ColorCode = `color${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`;
+
+const COLOR_CODES_TO_UI_COLORS_DARK_THEME_MAP: Record<ColorCode, string> = {
+  color1: '#00A35C', // green.dark1
+  color2: '#71F6BA', // green.light1
+  color3: '#016BF8', // blue.base
+  color4: '#0498EC', // blue.light1
+  color5: '#FFC010', // yellow.base
+  color6: '#EF5752', // red.light1
+  color7: '#B45AF2', // purple.base
+  color8: '#F1D4FD', // purple.light2
+  color9: '#889397', // gray.base
+  color10: '#C1C7C6', // gray.light1
+};
+
+const LEGACY_COLORS_TO_COLOR_CODE_MAP: Record<string, ColorCode> = {
+  '#5fc86e': 'color1',
+  '#326fde': 'color2',
+  '#deb342': 'color3',
+  '#d4366e': 'color4',
+  '#59c1e2': 'color5',
+  '#2c5f4a': 'color6',
+  '#d66531': 'color7',
+  '#773819': 'color8',
+  '#3b8196': 'color9',
+  '#ababab': 'color10',
+};
+
+export const CONNECTION_COLOR_CODES = Object.keys(
+  COLOR_CODES_TO_UI_COLORS_DARK_THEME_MAP
+) as ColorCode[];
+
+function isColorCode(hexOrColorCode: string | undefined): boolean {
+  return CONNECTION_COLOR_CODES.includes(hexOrColorCode as ColorCode);
+}
+
+export function legacyColorsToColorCode(
+  hexOrColorCode: string | undefined
+): ColorCode | undefined {
+  if (!hexOrColorCode) {
+    return;
+  }
+
+  if (isColorCode(hexOrColorCode)) {
+    return hexOrColorCode as ColorCode;
+  }
+
+  return LEGACY_COLORS_TO_COLOR_CODE_MAP[hexOrColorCode];
+}
+
+export function useConnectionColor(): {
+  connectionColorToHex: (colorCode: string | undefined) => string | undefined;
+} {
+  const colorCodeToHex = useCallback(
+    (colorCode: string | undefined): string | undefined => {
+      if (!colorCode) {
+        return;
+      }
+
+      const migratedColor = legacyColorsToColorCode(colorCode);
+      if (!migratedColor) {
+        return;
+      }
+
+      return COLOR_CODES_TO_UI_COLORS_DARK_THEME_MAP[migratedColor];
+    },
+    []
+  );
+
+  return {
+    connectionColorToHex: colorCodeToHex,
+  };
+}

packages/connect-form/src/index.ts

@@ -1,5 +1,6 @@
 import ConnectForm from './components/connect-form';
 import SaveConnectionModal from './components/save-connection-modal';
-
-export { SaveConnectionModal };
+import { useConnectionColor } from './hooks/use-connection-color';
+useConnectionColor;
+export { SaveConnectionModal, useConnectionColor };
 export default ConnectForm;