diff --git a/packages/connection-form/src/components/connection-form-modal.tsx b/packages/compass-connections/src/components/connection-form-modal.tsx similarity index 92% rename from packages/connection-form/src/components/connection-form-modal.tsx rename to packages/compass-connections/src/components/connection-form-modal.tsx index 4f8e547110c..9699f11257c 100644 --- a/packages/connection-form/src/components/connection-form-modal.tsx +++ b/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': { diff --git a/packages/compass-connections/src/index.tsx b/packages/compass-connections/src/index.tsx index daf8203eccb..09cb4db0cc6 100644 --- a/packages/compass-connections/src/index.tsx +++ b/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'; diff --git a/packages/compass-sidebar/package.json b/packages/compass-sidebar/package.json index 4e384789096..439739bf979 100644 --- a/packages/compass-sidebar/package.json +++ b/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", diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx index d21a551b368..c6ac80d4b5f 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx +++ b/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'; diff --git a/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx b/packages/connection-form/src/components/connection-form-actions.spec.tsx similarity index 80% rename from packages/connection-form/src/components/connection-form-modal-actions.spec.tsx rename to packages/connection-form/src/components/connection-form-actions.spec.tsx index 33c420dcd69..18a378020fa 100644 --- a/packages/connection-form/src/components/connection-form-modal-actions.spec.tsx +++ b/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('', function () { +describe('', function () { it('should show warnings', function () { render( - undefined} onSaveAndConnect={() => undefined} - > + > ); expect(screen.getByText('Warning!')).to.be.visible; }); it('should show errors', function () { render( - undefined} onSaveAndConnect={() => undefined} - > + > ); expect(screen.getByText('Error!')).to.be.visible; }); @@ -34,12 +34,12 @@ describe('', function () { it('should call onSaveAndConnect function', function () { const onSaveAndConnectSpy = sinon.spy(); render( - undefined} onSaveAndConnect={onSaveAndConnectSpy} - > + > ); const connectButton = screen.getByRole('button', { name: 'Save & Connect', @@ -51,10 +51,10 @@ describe('', function () { it('should hide "connect" button if there is no callback', function () { render( - + > ); expect(screen.queryByRole('button', { name: 'Save & Connect' })).to.not .exist; @@ -65,12 +65,12 @@ describe('', function () { it('should call onSave function', function () { const onSaveSpy = sinon.spy(); render( - undefined} - > + > ); const saveButton = screen.getByRole('button', { name: 'Save' }); userEvent.click(saveButton); @@ -79,11 +79,11 @@ describe('', function () { it('should hide "save" button if there is no callback', function () { render( - undefined} - > + > ); expect(screen.queryByRole('button', { name: 'Save' })).to.not.exist; }); @@ -93,13 +93,13 @@ describe('', function () { it('should call onCancel function', function () { const onCancelSpy = sinon.spy(); render( - undefined} onSaveAndConnect={() => undefined} onCancel={onCancelSpy} - > + > ); const cancelButton = screen.getByRole('button', { name: 'Cancel' }); userEvent.click(cancelButton); @@ -109,12 +109,12 @@ describe('', function () { it('should hide onCancel button if there is no callback', function () { render( - undefined} onSaveAndConnect={() => undefined} - > + > ); expect(screen.queryByRole('button', { name: 'Cancel' })).to.not.exist; }); diff --git a/packages/connection-form/src/components/connection-form-modal-actions.tsx b/packages/connection-form/src/components/connection-form-actions.tsx similarity index 95% rename from packages/connection-form/src/components/connection-form-modal-actions.tsx rename to packages/connection-form/src/components/connection-form-actions.tsx index 42b88ed6c88..6ae36688bbd 100644 --- a/packages/connection-form/src/components/connection-form-modal-actions.tsx +++ b/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 (
diff --git a/packages/connection-form/src/components/connection-form.tsx b/packages/connection-form/src/components/connection-form.tsx index 660bb426ac0..a299f04ab10 100644 --- a/packages/connection-form/src/components/connection-form.tsx +++ b/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 )} > -