chore(connection-form): move connection-form-modal, rename connection-form-modal-actions COMPASS-8471

packages/connection-form/src/components/connection-form-modal.tsx → packages/compass-connections/src/components/connection-form-modal.tsx

@@ -1,8 +1,8 @@
 import { css, cx, Modal, spacing } from '@mongodb-js/compass-components';
 import React, { useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { ConnectionFormProps } from './connection-form';
-import ConnectionForm from './connection-form';
+import type { ConnectionFormProps } from '@mongodb-js/connection-form';
+import ConnectionForm from '@mongodb-js/connection-form';
 
 const modalStyles = css({
   '& > div': {

packages/compass-connections/src/index.tsx

@@ -19,6 +19,7 @@ import {
 } from './stores/store-context';
 export { default as SingleConnectionForm } from './components/legacy-connections';
 export { LegacyConnectionsModal } from './components/legacy-connections-modal';
+export { default as ConnectionFormModal } from './components/connection-form-modal';
 export { useConnectionFormPreferences } from './hooks/use-connection-form-preferences';
 import type { connect as devtoolsConnect } from 'mongodb-data-service';
 import type { ExtraConnectionData as ExtraConnectionDataForTelemetry } from '@mongodb-js/compass-telemetry';

packages/compass-sidebar/package.json

@@ -57,7 +57,6 @@
     "@mongodb-js/compass-maybe-protect-connection-string": "^0.28.0",
     "@mongodb-js/compass-telemetry": "^1.2.3",
     "@mongodb-js/compass-workspaces": "^0.28.0",
-    "@mongodb-js/connection-form": "^1.44.0",
     "@mongodb-js/connection-info": "^0.9.3",
     "compass-preferences-model": "^2.30.0",
     "hadron-app-registry": "^9.2.7",

packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx

@@ -5,7 +5,10 @@ import {
   useConnections,
   useConnectionsWithStatus,
 } from '@mongodb-js/compass-connections/provider';
-import { useConnectionFormPreferences } from '@mongodb-js/compass-connections';
+import {
+  useConnectionFormPreferences,
+  ConnectionFormModal,
+} from '@mongodb-js/compass-connections';
 import { type ConnectionInfo } from '@mongodb-js/connection-info';
 import {
   ResizableSidebar,
@@ -15,7 +18,6 @@ import {
   HorizontalRule,
 } from '@mongodb-js/compass-components';
 import { SidebarHeader } from './header/sidebar-header';
-import { ConnectionFormModal } from '@mongodb-js/connection-form';
 import { type RootState, type SidebarThunkAction } from '../../modules';
 import { Navigation } from './navigation/navigation';
 import ConnectionInfoModal from '../connection-info-modal';

packages/connection-form/src/components/connection-form-modal-actions.spec.tsx → packages/connection-form/src/components/connection-form-actions.spec.tsx

@@ -3,29 +3,29 @@ import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import sinon from 'sinon';
 
-import { ConnectionFormModalActions } from './connection-form-modal-actions';
+import { ConnectionFormActions } from './connection-form-actions';
 
-describe('<ConnectionFormModalActions />', function () {
+describe('<ConnectionFormActions />', function () {
   it('should show warnings', function () {
     render(
-      <ConnectionFormModalActions
+      <ConnectionFormActions
         errors={[]}
         warnings={[{ message: 'Warning!' }]}
         onSave={() => undefined}
         onSaveAndConnect={() => undefined}
-      ></ConnectionFormModalActions>
+      ></ConnectionFormActions>
     );
     expect(screen.getByText('Warning!')).to.be.visible;
   });
 
   it('should show errors', function () {
     render(
-      <ConnectionFormModalActions
+      <ConnectionFormActions
         errors={[{ message: 'Error!' }]}
         warnings={[]}
         onSave={() => undefined}
         onSaveAndConnect={() => undefined}
-      ></ConnectionFormModalActions>
+      ></ConnectionFormActions>
     );
     expect(screen.getByText('Error!')).to.be.visible;
   });
@@ -34,12 +34,12 @@ describe('<ConnectionFormModalActions />', function () {
     it('should call onSaveAndConnect function', function () {
       const onSaveAndConnectSpy = sinon.spy();
       render(
-        <ConnectionFormModalActions
+        <ConnectionFormActions
           errors={[]}
           warnings={[]}
           onSave={() => undefined}
           onSaveAndConnect={onSaveAndConnectSpy}
-        ></ConnectionFormModalActions>
+        ></ConnectionFormActions>
       );
       const connectButton = screen.getByRole('button', {
         name: 'Save & Connect',
@@ -51,10 +51,10 @@ describe('<ConnectionFormModalActions />', function () {
 
     it('should hide "connect" button if there is no callback', function () {
       render(
-        <ConnectionFormModalActions
+        <ConnectionFormActions
           errors={[]}
           warnings={[]}
-        ></ConnectionFormModalActions>
+        ></ConnectionFormActions>
       );
       expect(screen.queryByRole('button', { name: 'Save & Connect' })).to.not
         .exist;
@@ -65,12 +65,12 @@ describe('<ConnectionFormModalActions />', function () {
     it('should call onSave function', function () {
       const onSaveSpy = sinon.spy();
       render(
-        <ConnectionFormModalActions
+        <ConnectionFormActions
           errors={[]}
           warnings={[]}
           onSave={onSaveSpy}
           onSaveAndConnect={() => undefined}
-        ></ConnectionFormModalActions>
+        ></ConnectionFormActions>
       );
       const saveButton = screen.getByRole('button', { name: 'Save' });
       userEvent.click(saveButton);
@@ -79,11 +79,11 @@ describe('<ConnectionFormModalActions />', function () {
 
     it('should hide "save" button if there is no callback', function () {
       render(
-        <ConnectionFormModalActions
+        <ConnectionFormActions
           errors={[]}
           warnings={[]}
           onSaveAndConnect={() => undefined}
-        ></ConnectionFormModalActions>
+        ></ConnectionFormActions>
       );
       expect(screen.queryByRole('button', { name: 'Save' })).to.not.exist;
     });
@@ -93,13 +93,13 @@ describe('<ConnectionFormModalActions />', function () {
     it('should call onCancel function', function () {
       const onCancelSpy = sinon.spy();
       render(
-        <ConnectionFormModalActions
+        <ConnectionFormActions
           errors={[]}
           warnings={[]}
           onSave={() => undefined}
           onSaveAndConnect={() => undefined}
           onCancel={onCancelSpy}
-        ></ConnectionFormModalActions>
+        ></ConnectionFormActions>
       );
       const cancelButton = screen.getByRole('button', { name: 'Cancel' });
       userEvent.click(cancelButton);
@@ -109,12 +109,12 @@ describe('<ConnectionFormModalActions />', function () {
 
     it('should hide onCancel button if there is no callback', function () {
       render(
-        <ConnectionFormModalActions
+        <ConnectionFormActions
           errors={[]}
           warnings={[]}
           onSave={() => undefined}
           onSaveAndConnect={() => undefined}
-        ></ConnectionFormModalActions>
+        ></ConnectionFormActions>
       );
       expect(screen.queryByRole('button', { name: 'Cancel' })).to.not.exist;
     });

packages/connection-form/src/components/connection-form-modal-actions.tsx → packages/connection-form/src/components/connection-form-actions.tsx

@@ -38,7 +38,7 @@ const saveAndConnectStyles = css({
   justifyContent: 'flex-end',
 });
 
-export type ConnectionFormModalActionsProps = {
+export type ConnectionFormActionsProps = {
   errors: ConnectionFormError[];
   warnings: ConnectionFormWarning[];
 
@@ -48,14 +48,14 @@ export type ConnectionFormModalActionsProps = {
   onConnect?(): void;
 };
 
-export function ConnectionFormModalActions({
+export function ConnectionFormActions({
   errors,
   warnings,
   onCancel,
   onSave,
   onSaveAndConnect,
   onConnect,
-}: ConnectionFormModalActionsProps): React.ReactElement {
+}: ConnectionFormActionsProps): React.ReactElement {
   const saveAndConnectLabel = useConnectionFormSetting('saveAndConnectLabel');
   return (
     <div className={cx(formActionStyles)}>

packages/connection-form/src/components/connection-form.tsx

@@ -25,7 +25,7 @@ import {
 import { cloneDeep } from 'lodash';
 import ConnectionStringInput from './connection-string-input';
 import AdvancedConnectionOptions from './advanced-connection-options';
-import { ConnectionFormModalActions } from './connection-form-modal-actions';
+import { ConnectionFormActions } from './connection-form-actions';
 import {
   useConnectForm,
   type ConnectionPersonalizationOptions,
@@ -622,7 +622,7 @@ function ConnectionForm({
               : formFooterBorderLightModeStyles
           )}
         >
-          <ConnectionFormModalActions
+          <ConnectionFormActions
             errors={connectionStringInvalidError ? [] : errors}
             warnings={connectionStringInvalidError ? [] : warnings}
             onCancel={onCancel}

packages/connection-form/src/index.ts

@@ -1,12 +1,10 @@
 import ConnectionForm, { ColorCircleGlyph } from './components/connection-form';
-import ConnectionFormModal from './components/connection-form-modal';
+import type { ConnectionFormProps } from './components/connection-form';
 import { adjustConnectionOptionsBeforeConnect } from './hooks/use-connect-form';
 
-export {
-  adjustConnectionOptionsBeforeConnect,
-  ConnectionFormModal,
-  ColorCircleGlyph,
-};
+export { adjustConnectionOptionsBeforeConnect, ColorCircleGlyph };
+
+export type { ConnectionFormProps };
 
 export {
   useConnectionColor,