feat(connection-form): add show favorite actions preference, make sav…

…e prop required VSCODE-406 (#5326)
mongodb-js · Jan 11, 2024 · d7c2707 · d7c2707
1 parent 4e27d5b
commit d7c2707
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 56 deletions.
diff --git a/packages/connection-form/src/components/connection-form-actions.spec.tsx b/packages/connection-form/src/components/connection-form-actions.spec.tsx
@@ -23,7 +23,6 @@ describe('ConnectFormActions Component', function () {
             onSaveAndConnectClicked={onSaveAndConnectClickedFn}
             saveButton="hidden"
             saveAndConnectButton="hidden"
-            showSaveActions
           ></ConnectFormActions>
         );
       });
@@ -46,7 +45,6 @@ describe('ConnectFormActions Component', function () {
             onSaveAndConnectClicked={onSaveAndConnectClickedFn}
             saveButton="disabled"
             saveAndConnectButton="hidden"
-            showSaveActions
           ></ConnectFormActions>
         );
       });
@@ -81,7 +79,6 @@ describe('ConnectFormActions Component', function () {
             onSaveAndConnectClicked={onSaveAndConnectClickedFn}
             saveButton="enabled"
             saveAndConnectButton="hidden"
-            showSaveActions
           ></ConnectFormActions>
         );
       });
@@ -117,7 +114,6 @@ describe('ConnectFormActions Component', function () {
             onSaveAndConnectClicked={onSaveAndConnectClickedFn}
             saveButton="hidden"
             saveAndConnectButton="hidden"
-            showSaveActions
           ></ConnectFormActions>
         );
       });
@@ -140,7 +136,6 @@ describe('ConnectFormActions Component', function () {
             onSaveAndConnectClicked={onSaveAndConnectClickedFn}
             saveButton="disabled"
             saveAndConnectButton="disabled"
-            showSaveActions
           ></ConnectFormActions>
         );
       });
@@ -175,7 +170,6 @@ describe('ConnectFormActions Component', function () {
             onSaveAndConnectClicked={onSaveAndConnectClickedFn}
             saveButton="disabled"
             saveAndConnectButton="enabled"
-            showSaveActions
           ></ConnectFormActions>
         );
       });
@@ -209,7 +203,6 @@ describe('ConnectFormActions Component', function () {
             onSaveAndConnectClicked={() => true}
             saveButton="hidden"
             saveAndConnectButton="hidden"
-            showSaveActions
           ></ConnectFormActions>
         );
       });

diff --git a/packages/connection-form/src/components/connection-form-actions.tsx b/packages/connection-form/src/components/connection-form-actions.tsx
@@ -12,6 +12,7 @@ import type {
   ConnectionFormError,
   ConnectionFormWarning,
 } from '../utils/validation';
+import { useConnectionFormPreference } from '../hooks/use-connect-form-preferences';
 
 const formActionStyles = css({
   paddingLeft: spacing[4],
@@ -45,7 +46,6 @@ function ConnectFormActions({
   onSaveAndConnectClicked,
   saveButton,
   saveAndConnectButton,
-  showSaveActions,
 }: {
   errors: ConnectionFormError[];
   warnings: ConnectionFormWarning[];
@@ -54,8 +54,11 @@ function ConnectFormActions({
   onSaveAndConnectClicked: () => void;
   saveButton: 'enabled' | 'disabled' | 'hidden';
   saveAndConnectButton: 'enabled' | 'disabled' | 'hidden';
-  showSaveActions?: boolean;
 }): React.ReactElement {
+  const showFavoriteActions = useConnectionFormPreference(
+    'showFavoriteActions'
+  );
+
   return (
     <div className={cx(formActionStyles)}>
       {warnings.length > 0 && (
@@ -75,7 +78,7 @@ function ConnectFormActions({
         </div>
       )}
       <div className={cx(formActionItemStyles, formActionButtonsStyles)}>
-        {showSaveActions && (
+        {showFavoriteActions && (
           <>
             {saveButton !== 'hidden' && (
               <Button
@@ -108,7 +111,7 @@ function ConnectFormActions({
           variant={ButtonVariant.Primary}
           onClick={onConnectClicked}
         >
-          Connect
+          {showFavoriteActions ? 'Connect' : 'Save & Connect'}
         </Button>
       </div>
     </div>

diff --git a/packages/connection-form/src/components/connection-form.spec.tsx b/packages/connection-form/src/components/connection-form.spec.tsx
@@ -26,6 +26,7 @@ const noop = (): any => {
 };
 
 const saveAndConnectText = 'Save & Connect';
+const favoriteText = 'FAVORITE';
 
 function renderForm(props: Partial<ConnectionFormProps> = {}) {
   return render(
@@ -230,6 +231,17 @@ describe('ConnectionForm Component', function () {
     );
   });
 
+  context('when preferences.showFavoriteActions === false', function () {
+    it('should not render the favorite button', function () {
+      renderForm({
+        preferences: {
+          showFavoriteActions: false,
+        },
+      });
+      expect(screen.queryByText(favoriteText)).to.not.exist;
+    });
+  });
+
   it('should render an error with an invalid connection string', function () {
     render(
       <ConnectionForm
@@ -247,22 +259,7 @@ describe('ConnectionForm Component', function () {
       .visible;
   });
 
-  it('should not show to save a connection when onSaveConnectionClicked doesnt exist', function () {
-    render(
-      <ConnectionForm
-        onConnectClicked={noop}
-        initialConnectionInfo={{
-          id: 'test',
-          connectionOptions: {
-            connectionString: 'pineapples',
-          },
-        }}
-      />
-    );
-    expect(screen.queryByText('FAVORITE')).to.not.exist;
-  });
-
-  it('should show a button to save a connection when onSaveConnectionClicked exists', function () {
+  it('should show a button to save a connection', function () {
     render(
       <ConnectionForm
         onConnectClicked={noop}
@@ -275,7 +272,7 @@ describe('ConnectionForm Component', function () {
         onSaveConnectionClicked={noop}
       />
     );
-    expect(screen.getByText('FAVORITE').closest('button')).to.be.visible;
+    expect(screen.getByText(favoriteText).closest('button')).to.be.visible;
   });
 
   it('should show the saved connection modal when the favorite button is clicked', function () {
@@ -294,7 +291,7 @@ describe('ConnectionForm Component', function () {
 
     expect(screen.queryByText('Save connection to favorites')).to.not.exist;
 
-    fireEvent.click(screen.getByText('FAVORITE').closest('button'));
+    fireEvent.click(screen.getByText(favoriteText).closest('button'));
 
     expect(screen.getByText('Save connection to favorites')).to.be.visible;
   });
@@ -312,6 +309,7 @@ describe('ConnectionForm Component', function () {
             connectionString: 'mongodb://localhost:27017',
           },
         }}
+        onSaveConnectionClicked={noop}
       />
     );
 
@@ -365,25 +363,4 @@ describe('ConnectionForm Component', function () {
 
     expect(() => screen.getByText(saveAndConnectText)).to.throw;
   });
-
-  it('should not show any save buttons when there is no save handler passed', function () {
-    render(
-      <ConnectionForm
-        onConnectClicked={noop}
-        initialConnectionInfo={{
-          id: 'test',
-          connectionOptions: {
-            connectionString: 'pineapples',
-          },
-        }}
-        onSaveConnectionClicked={undefined}
-      />
-    );
-
-    const saveAndConnectButton = screen.queryByText(saveAndConnectText);
-    expect(saveAndConnectButton).to.not.exist;
-
-    const saveButton = screen.queryByText('Save');
-    expect(saveButton).to.not.exist;
-  });
 });
diff --git a/packages/connection-form/src/components/connection-form.tsx b/packages/connection-form/src/components/connection-form.tsx
@@ -94,7 +94,7 @@ type ConnectionFormPropsWithoutPreferences = {
   initialConnectionInfo: ConnectionInfo;
   connectionErrorMessage?: string | null;
   onConnectClicked: (connectionInfo: ConnectionInfo) => void;
-  onSaveConnectionClicked?: (connectionInfo: ConnectionInfo) => Promise<void>;
+  onSaveConnectionClicked: (connectionInfo: ConnectionInfo) => Promise<void>;
 };
 
 export type ConnectionFormProps = ConnectionFormPropsWithoutPreferences & {
@@ -191,7 +191,10 @@ function ConnectionForm({
     },
     [onSaveConnectionClicked, setErrors]
   );
-  const showSaveActions = !!onSaveConnectionClicked;
+
+  const showFavoriteActions = useConnectionFormPreference(
+    'showFavoriteActions'
+  );
 
   return (
     <ConfirmationModalArea>
@@ -208,7 +211,7 @@ function ConnectionForm({
         <div className={formContentContainerStyles}>
           <H3 className={formHeaderStyles}>
             {initialConnectionInfo.favorite?.name ?? 'New Connection'}
-            {showSaveActions && (
+            {showFavoriteActions && (
               <IconButton
                 type="button"
                 aria-label="Save Connection"
@@ -225,7 +228,7 @@ function ConnectionForm({
           <Description className={descriptionStyles}>
             Connect to a MongoDB deployment
           </Description>
-          {showSaveActions && (
+          {showFavoriteActions && (
             <IconButton
               aria-label="Save Connection"
               data-testid="edit-favorite-icon-button"
@@ -276,7 +279,6 @@ function ConnectionForm({
           <ConnectionFormActions
             errors={connectionStringInvalidError ? [] : errors}
             warnings={connectionStringInvalidError ? [] : warnings}
-            showSaveActions={showSaveActions}
             saveButton={
               isDirty || !initialConnectionInfo.favorite
                 ? 'enabled'
@@ -302,7 +304,7 @@ function ConnectionForm({
           />
         </div>
       </form>
-      {showSaveActions && (
+      {showFavoriteActions && (
         <SaveConnectionModal
           open={saveConnectionModal !== 'hidden'}
           saveText={

diff --git a/packages/connection-form/src/hooks/use-connect-form-preferences.tsx b/packages/connection-form/src/hooks/use-connect-form-preferences.tsx
@@ -2,6 +2,7 @@ import { createContext, useContext } from 'react';
 
 // Not all of these preference map to Compass preferences.
 export type ConnectionFormPreferences = {
+  showFavoriteActions: boolean;
   protectConnectionStrings: boolean;
   forceConnectionOptions: [key: string, value: string][];
   showKerberosPasswordField: boolean;
@@ -15,6 +16,7 @@ export type ConnectionFormPreferences = {
 };
 
 const defaultPreferences = {
+  showFavoriteActions: true,
   protectConnectionStrings: false,
   forceConnectionOptions: [],
   showKerberosPasswordField: false,