From be3d5f97c142a1a62831cbb6b70edb79ac62ed02 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Mon, 30 Sep 2024 12:55:16 +0200 Subject: [PATCH] fix: remove compass-preferences from connection-form completely COMPASS-8098 (#6294) --- package-lock.json | 2 - .../components/legacy/favorite-indicator.tsx | 27 -- .../legacy/navigation-items.spec.tsx | 82 ---- .../components/legacy/navigation-items.tsx | 416 ----------------- .../legacy/sidebar-databases-navigation.tsx | 429 ------------------ .../src/components/legacy/sidebar-title.tsx | 174 ------- .../src/components/legacy/sidebar.tsx | 268 ----------- packages/compass-sidebar/src/plugin.tsx | 26 +- packages/connection-form/package.json | 1 - .../src/components/connection-form.spec.tsx | 15 +- .../src/components/favorite-color-picker.tsx | 163 ------- .../components/save-connection-modal.spec.tsx | 168 ------- .../src/components/save-connection-modal.tsx | 76 ---- .../src/hooks/use-connection-color.spec.tsx | 29 -- .../src/hooks/use-connection-color.ts | 62 +-- packages/connection-form/src/index.ts | 3 - 16 files changed, 11 insertions(+), 1930 deletions(-) delete mode 100644 packages/compass-sidebar/src/components/legacy/favorite-indicator.tsx delete mode 100644 packages/compass-sidebar/src/components/legacy/navigation-items.spec.tsx delete mode 100644 packages/compass-sidebar/src/components/legacy/navigation-items.tsx delete mode 100644 packages/compass-sidebar/src/components/legacy/sidebar-databases-navigation.tsx delete mode 100644 packages/compass-sidebar/src/components/legacy/sidebar-title.tsx delete mode 100644 packages/compass-sidebar/src/components/legacy/sidebar.tsx delete mode 100644 packages/connection-form/src/components/favorite-color-picker.tsx delete mode 100644 packages/connection-form/src/components/save-connection-modal.spec.tsx delete mode 100644 packages/connection-form/src/components/save-connection-modal.tsx diff --git a/package-lock.json b/package-lock.json index 5cbc368642d..df47bfba330 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47563,7 +47563,6 @@ "@mongodb-js/compass-editor": "^0.31.0", "@mongodb-js/connection-info": "^0.9.0", "@mongodb-js/shell-bson-parser": "^1.1.2", - "compass-preferences-model": "^2.29.0", "lodash": "^4.17.21", "mongodb": "^6.8.0", "mongodb-build-info": "^1.7.2", @@ -59197,7 +59196,6 @@ "@types/sinon-chai": "^3.2.5", "bson": "^6.7.0", "chai": "^4.3.4", - "compass-preferences-model": "^2.29.0", "depcheck": "^1.4.1", "electron-mocha": "^12.2.0", "eslint": "^7.25.0", diff --git a/packages/compass-sidebar/src/components/legacy/favorite-indicator.tsx b/packages/compass-sidebar/src/components/legacy/favorite-indicator.tsx deleted file mode 100644 index cb504e8deae..00000000000 --- a/packages/compass-sidebar/src/components/legacy/favorite-indicator.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import type { ConnectionFavoriteOptions } from '@mongodb-js/connection-info'; -import { useConnectionColor } from '@mongodb-js/connection-form'; - -import { css, spacing } from '@mongodb-js/compass-components'; - -const favoriteCSS = css({ - height: spacing[2], -}); - -export default function FavoriteIndicator({ - favoriteColor, -}: { - favoriteColor: ConnectionFavoriteOptions['color']; -}) { - const { connectionColorToHex } = useConnectionColor(); - - const favoriteColorHex = connectionColorToHex(favoriteColor) ?? 'transparent'; - - return ( -
- ); -} diff --git a/packages/compass-sidebar/src/components/legacy/navigation-items.spec.tsx b/packages/compass-sidebar/src/components/legacy/navigation-items.spec.tsx deleted file mode 100644 index c4691923791..00000000000 --- a/packages/compass-sidebar/src/components/legacy/navigation-items.spec.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { render, screen, cleanup } from '@mongodb-js/testing-library-compass'; -import { Provider } from 'react-redux'; -import { createStore, applyMiddleware } from 'redux'; -import thunk from 'redux-thunk'; -import reducer from '../../modules'; - -import { NavigationItems } from './navigation-items'; -import { WorkspacesProvider } from '@mongodb-js/compass-workspaces'; - -const CONNECTION_ID = 'webscale'; - -function renderNavigationItems( - props?: Partial> -) { - const store = createStore(reducer, applyMiddleware(thunk)); - return render( - - null }, - { name: 'Performance', component: () => null }, - ]} - > - { - /* noop */ - }} - showCreateDatabaseAction={true} - isPerformanceTabSupported={true} - activeWorkspace={null} - {...props} - /> - - - ); -} - -const createDatabaseText = 'Create database'; -const refreshCTAText = 'Refresh databases'; - -// TODO(COMPASS-7906): remove -describe.skip('NavigationItems [Component]', function () { - afterEach(cleanup); - - describe('when rendered', function () { - it('renders the create database button', function () { - renderNavigationItems(); - expect(screen.getByLabelText(createDatabaseText)).to.be.visible; - }); - - it('renders the refresh databases button', function () { - renderNavigationItems(); - expect(screen.getByLabelText(refreshCTAText)).to.be.visible; - }); - }); - - describe('when rendered read only', function () { - it('does not render the create database button', function () { - renderNavigationItems({ - showCreateDatabaseAction: false, - }); - expect(screen.queryByLabelText(createDatabaseText)).to.not.exist; - }); - }); - - describe('when performance tab is not supported', function () { - it('renders disabled "Performance" navigation item', function () { - renderNavigationItems({ - isPerformanceTabSupported: false, - }); - - expect(screen.getByRole('button', { name: 'Performance' })).to.exist; - expect( - screen.getByRole('button', { name: 'Performance' }) - ).to.have.attribute('aria-disabled', 'true'); - }); - }); -}); diff --git a/packages/compass-sidebar/src/components/legacy/navigation-items.tsx b/packages/compass-sidebar/src/components/legacy/navigation-items.tsx deleted file mode 100644 index b6ee65ad57a..00000000000 --- a/packages/compass-sidebar/src/components/legacy/navigation-items.tsx +++ /dev/null @@ -1,416 +0,0 @@ -import React, { useCallback, useMemo, useState } from 'react'; -import { connect } from 'react-redux'; -import { - useHoverState, - css, - cx, - ItemActionControls, - spacing, - Icon, - useFocusRing, - mergeProps, - useDefaultAction, - SignalPopover, - PerformanceSignals, - Placeholder, - ContentWithFallback, - palette, - useDarkMode, - Tooltip, -} from '@mongodb-js/compass-components'; -import { - usePreference, - withPreferences, -} from 'compass-preferences-model/provider'; -import type { ItemAction } from '@mongodb-js/compass-components'; -import NavigationItemsFilter from '../navigation-items-filter'; -import SidebarDatabasesNavigation from './sidebar-databases-navigation'; -import type { RootState } from '../../modules'; -import { - useOpenWorkspace, - useWorkspacePlugins, -} from '@mongodb-js/compass-workspaces/provider'; -import type { ConnectionInfo } from '@mongodb-js/connection-info'; -import type { WorkspaceTab } from '@mongodb-js/compass-workspaces'; - -type DatabasesActions = 'open-create-database' | 'refresh-databases'; - -const navigationItem = css({ - cursor: 'pointer', - color: 'var(--item-color)', - border: 'none', - height: spacing[800], - position: 'relative', - - '& .item-action-controls': { - marginLeft: 'auto', - marginRight: spacing[100], - }, - - '&:hover .item-background': { - display: 'block', - backgroundColor: 'var(--item-bg-color-hover)', - }, - - '& .item-action-controls:hover + .item-background': { - display: 'none', - }, - - svg: { - flexShrink: 0, - }, -}); - -const activeNavigationItem = css({ - color: 'var(--item-color-active)', - fontWeight: 'bold', - - '.item-background, :hover .item-background': { - backgroundColor: 'var(--item-bg-color-active)', - }, - - // this is copied from leafygreen's own navigation, hence the pixel values - '::before': { - zIndex: 1, - backgroundColor: 'var(--item-color-active)', - content: '""', - position: 'absolute', - left: '0px', - top: '6px', - bottom: '6px', - width: '4px', - borderRadius: '0px 6px 6px 0px', - }, -}); - -const itemPlaceholderStyles = css({ - width: '100%', - display: 'flex', - alignItems: 'center', - paddingLeft: spacing[400], - height: spacing[800], -}); - -const itemWrapper = css({ - position: 'relative', - display: 'flex', - alignItems: 'center', - height: spacing[800], - gap: spacing[200], - zIndex: 1, -}); - -const itemBackground = css({ - position: 'absolute', - top: 0, - left: 0, - width: '100%', - height: '100%', - zIndex: -1, -}); - -const itemButtonWrapper = css({ - display: 'flex', - alignItems: 'center', - minWidth: 0, - paddingLeft: spacing[400], -}); - -const signalContainerStyles = css({ - flex: 'none', -}); - -const navigationItemLabel = css({ - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - marginLeft: spacing[200], -}); - -const navigationItemDisabledDarkModeStyles = css({ - '--item-color': palette.gray.dark1, - '--item-color-active': palette.gray.dark1, - '--item-bg-color-hover': 'var(--item-bg-color)', -}); - -const navigationItemDisabledLightModeStyles = css({ - '--item-color': palette.gray.base, - '--item-color-active': palette.gray.base, - '--item-bg-color-hover': 'var(--item-bg-color)', -}); - -const databaseCollectionsFilter = css({ - margin: `${spacing[100]}px ${spacing[400]}px`, -}); - -const navigationItemActionIcons = css({ color: 'inherit' }); - -export function NavigationItem({ - onAction, - onClick: onButtonClick, - glyph, - label, - actions, - isActive, - showTooManyCollectionsInsight, - disabled: isButtonDisabled = false, - disabledMessage: buttonDisabledMessage, -}: { - onAction(actionName: Actions, ...rest: any[]): void; - onClick(): void; - glyph: string; - label: string; - actions?: ItemAction[]; - isActive: boolean; - showTooManyCollectionsInsight?: boolean; - disabled?: boolean; - disabledMessage?: string; -}) { - const darkMode = useDarkMode(); - const showInsights = usePreference('showInsights'); - const onClick = useCallback(() => { - if (isButtonDisabled) { - return; - } - onButtonClick(); - }, [isButtonDisabled, onButtonClick]); - const [hoverProps] = useHoverState(); - const focusRingProps = useFocusRing(); - const defaultActionProps = useDefaultAction(onClick); - - const navigationItemProps = mergeProps( - { - className: cx( - navigationItem, - isActive && activeNavigationItem, - isButtonDisabled && - (darkMode - ? navigationItemDisabledDarkModeStyles - : navigationItemDisabledLightModeStyles) - ), - role: 'button', - ['aria-label']: label, - ['aria-current']: isActive, - ['aria-disabled']: isButtonDisabled, - tabIndex: 0, - }, - hoverProps, - defaultActionProps, - focusRingProps - ) as React.HTMLProps; - - return ( - -
-
- - {label} -
- {showInsights && showTooManyCollectionsInsight && ( -
- -
- )} - {!isButtonDisabled && actions && ( - - iconSize="small" - onAction={onAction} - data-testid="sidebar-navigation-item-actions" - actions={actions} - // This is what renders the "create database" action, - // the icons here should always be clearly visible, - // so we let the icon to inherit the foreground color of - // the text - isVisible={true} - iconClassName={navigationItemActionIcons} - collapseToMenuThreshold={3} - > - )} -
-
-
- } - > - {buttonDisabledMessage} - - ); -} - -const PlaceholderItem = ({ forLabel }: { forLabel: string }) => { - return ( -
- -
- ); -}; - -export function NavigationItems({ - isReady, - connectionInfo, - showCreateDatabaseAction, - isPerformanceTabSupported, - onAction, - activeWorkspace, - showTooManyCollectionsInsight = false, -}: { - isReady?: boolean; - connectionInfo: ConnectionInfo; - showCreateDatabaseAction: boolean; - isPerformanceTabSupported: boolean; - onAction(actionName: string, ...rest: any[]): void; - activeWorkspace: WorkspaceTab | null; - showTooManyCollectionsInsight?: boolean; -}) { - const { - openMyQueriesWorkspace, - openPerformanceWorkspace, - openDatabasesWorkspace, - } = useOpenWorkspace(); - const { hasWorkspacePlugin } = useWorkspacePlugins(); - - const [databasesFilterRegex, setDatabasesFilterRegex] = - useState(null); - - const onDatabasesFilterChange = useCallback( - (filterRegex: RegExp | null) => setDatabasesFilterRegex(filterRegex), - [setDatabasesFilterRegex] - ); - - const databasesActions = useMemo(() => { - const actions: ItemAction[] = [ - { - action: 'refresh-databases', - label: 'Refresh databases', - icon: 'Refresh', - }, - ]; - - if (showCreateDatabaseAction) { - actions.push({ - action: 'open-create-database', - label: 'Create database', - icon: 'Plus', - }); - } - - return actions; - }, [showCreateDatabaseAction]); - - return ( - <> - { - return ( - shouldRender && ( - <> - {hasWorkspacePlugin('My Queries') && ( - - )} - {hasWorkspacePlugin('Performance') && ( - - )} - - - ) - ); - }} - content={(shouldRender) => { - return ( - shouldRender && ( - <> - {hasWorkspacePlugin('My Queries') && ( - - onAction={onAction} - onClick={openMyQueriesWorkspace} - glyph="CurlyBraces" - label="My Queries" - isActive={activeWorkspace?.type === 'My Queries'} - /> - )} - {hasWorkspacePlugin('Performance') && ( - - onAction={onAction} - onClick={() => openPerformanceWorkspace(connectionInfo.id)} - glyph="Gauge" - label="Performance" - isActive={activeWorkspace?.type === 'Performance'} - disabled={!isPerformanceTabSupported} - disabledMessage="Performance metrics are not available for your deployment or to your database user" - /> - )} - - onAction={onAction} - onClick={() => openDatabasesWorkspace(connectionInfo.id)} - glyph="Database" - label="Databases" - actions={databasesActions} - isActive={activeWorkspace?.type === 'Databases'} - showTooManyCollectionsInsight={showTooManyCollectionsInsight} - /> - - ) - ); - }} - > - - - - - ); -} - -const mapStateToProps = ( - state: RootState, - { - connectionInfo, - readOnly: preferencesReadOnly, - }: { connectionInfo: ConnectionInfo; readOnly: boolean } -) => { - const connectionId = connectionInfo.id; - const totalCollectionsCount = ( - state.databases[connectionId]?.databases ?? [] - ).reduce((acc: number, db: { collectionsLength: number }) => { - return acc + db.collectionsLength; - }, 0); - - const isReady = - ['ready', 'refreshing'].includes( - state.instance[connectionId]?.status ?? '' - ) && typeof state.isPerformanceTabSupported[connectionId] === 'boolean'; - - const isDataLake = state.instance[connectionId]?.dataLake.isDataLake ?? false; - const isWritable = state.instance[connectionId]?.isWritable ?? false; - - return { - isReady, - showPerformanceItem: !isDataLake, - showCreateDatabaseAction: !isDataLake && isWritable && !preferencesReadOnly, - showTooManyCollectionsInsight: totalCollectionsCount > 10_000, - isPerformanceTabSupported: - !isDataLake && !!state.isPerformanceTabSupported[connectionId], - }; -}; - -const MappedNavigationItems = withPreferences( - connect(mapStateToProps)(NavigationItems), - ['readOnly'] -); - -export default MappedNavigationItems; diff --git a/packages/compass-sidebar/src/components/legacy/sidebar-databases-navigation.tsx b/packages/compass-sidebar/src/components/legacy/sidebar-databases-navigation.tsx deleted file mode 100644 index 9f9282d5eed..00000000000 --- a/packages/compass-sidebar/src/components/legacy/sidebar-databases-navigation.tsx +++ /dev/null @@ -1,429 +0,0 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { - type MapDispatchToProps, - type MapStateToProps, - connect, -} from 'react-redux'; -import { ConnectionsNavigationTree } from '@mongodb-js/compass-connections-navigation'; -import type { - Actions, - SidebarConnectedConnection, - SidebarItem, -} from '@mongodb-js/compass-connections-navigation'; -import toNS from 'mongodb-ns'; -import { - fetchAllCollections, - onDatabaseExpand, - type Database, -} from '../../modules/databases'; -import type { RootState, SidebarThunkAction } from '../../modules'; -import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider'; -import type { ConnectionInfo } from '@mongodb-js/connection-info'; -import { findCollection } from '../../helpers/find-collection'; -import { ConnectionStatus } from '@mongodb-js/compass-connections/provider'; - -type ExpandedDatabases = Record< - Database['_id'], - 'expanded' | 'tempExpanded' | undefined ->; - -interface Match { - isMatch?: boolean; -} - -type Collection = Database['collections'][number]; - -type FilteredCollection = Collection & Match; -type FilteredDatabase = Omit & - Match & { - collections: FilteredCollection[]; - }; - -const filterDatabases = ( - databases: Database[], - regex: RegExp -): FilteredDatabase[] => { - const results: FilteredDatabase[] = []; - for (const db of databases) { - const isMatch = regex.test(db.name); - const childMatches = filterCollections(db.collections, regex); - - if (isMatch || childMatches.length) { - results.push({ - ...db, - isMatch, - collections: - !isMatch && childMatches.length ? childMatches : db.collections, - }); - } - } - return results; -}; - -const filterCollections = ( - collections: Collection[], - regex: RegExp -): FilteredCollection[] => { - return collections - .filter(({ name }) => regex.test(name)) - .map((collection) => ({ ...collection, isMatch: true })); -}; - -/** - * Take the starting expandedDatabase, and add 'tempExpanded' to collapsed items that: - * - are included in the filterResults - * - they either are a direct match, or their children are a direct match - */ -const applyTempExpanded = ( - expandedDatabases: ExpandedDatabases, - filterResults: FilteredDatabase[] -): ExpandedDatabases => { - const newExpanded = { ...expandedDatabases }; - - filterResults.forEach(({ _id: databaseId, isMatch, collections }) => { - const childrenCollsAreMatch = collections.length && collections[0].isMatch; - if ((isMatch || childrenCollsAreMatch) && !newExpanded[databaseId]) { - newExpanded[databaseId] = 'tempExpanded'; - } - }); - return newExpanded; -}; - -/** - * Reverts 'applyTempExpanded', bringing the items back to collapsed state - */ -const clearTempExpanded = ( - expandedDatabases: ExpandedDatabases -): ExpandedDatabases => { - const cleared: ExpandedDatabases = Object.fromEntries( - Object.entries(expandedDatabases || []).map(([dbId, dbState]) => [ - dbId, - dbState === 'tempExpanded' ? undefined : dbState, - ]) - ); - return cleared; -}; -type SidebarDatabasesNavigationComponentProps = Pick< - React.ComponentProps, - 'activeWorkspace' -> & { - connectionInfo: ConnectionInfo; - filterRegex: RegExp | null; -}; - -type MapStateProps = { - connections: SidebarConnectedConnection[]; -}; - -type MapDispatchProps = { - fetchAllCollections(connectionId: string): void; - onNamespaceAction( - connectionId: string, - namespace: string, - action: Actions - ): void; - onDatabaseExpand(connectionId: string, databaseId: string): void; -}; - -type SidebarDatabasesNavigationProps = - SidebarDatabasesNavigationComponentProps & MapStateProps & MapDispatchProps; - -function SidebarDatabasesNavigation({ - connections, - onNamespaceAction: _onNamespaceAction, - onDatabaseExpand: _onDatabaseExpand, - fetchAllCollections: _fetchAllCollections, - activeWorkspace, - filterRegex, -}: SidebarDatabasesNavigationProps) { - const { - openCollectionsWorkspace, - openCollectionWorkspace, - openEditViewWorkspace, - } = useOpenWorkspace(); - const connection = connections[0]; - const connectionId = connection.connectionInfo.id; - - const [expandedDatabases, setExpandedDatabases] = useState( - {} - ); - const [filteredDatabases, setFilteredDatabases] = useState< - Database[] | undefined - >(undefined); - - const handleDatabaseExpand = useCallback( - (actionConnectionId: string, namespace: string, isExpanded: boolean) => { - if (actionConnectionId !== connectionId) return; - const { database: databaseId } = toNS(namespace); - setExpandedDatabases((expandedDatabases) => { - return { - ...expandedDatabases, - [databaseId]: isExpanded ? 'expanded' : undefined, - }; - }); - _onDatabaseExpand(connectionId, databaseId); - }, - [setExpandedDatabases, _onDatabaseExpand, connectionId] - ); - - const connectionsButOnlyIfFilterIsActive = filteredDatabases && connections; - const filteredConnections: SidebarConnectedConnection[] | undefined = - useMemo(() => { - if (filteredDatabases && connectionsButOnlyIfFilterIsActive) { - return [ - { - ...connectionsButOnlyIfFilterIsActive[0], - databases: filteredDatabases, - }, - ]; - } - }, [filteredDatabases, connectionsButOnlyIfFilterIsActive]); - - const expandedMemo: Record> = useMemo( - () => ({ - [connectionId]: Object.fromEntries( - Object.entries(expandedDatabases || {}).map(([dbId, dbState]) => [ - dbId, - !!dbState, - ]) - ), - }), - [expandedDatabases, connectionId] - ); - - const temporarilyExpand = useCallback( - (filterResults: FilteredDatabase[]) => { - setExpandedDatabases((expandedDatabases: ExpandedDatabases) => { - const expandedStart = clearTempExpanded(expandedDatabases); - return applyTempExpanded(expandedStart, filterResults); - }); - }, - [setExpandedDatabases] - ); - - const collapseAllTemporarilyExpanded = useCallback(() => { - setExpandedDatabases(clearTempExpanded); - }, [setExpandedDatabases]); - - // filter updates - // databases change often, but the effect only uses databases if the filter is active - // so we use this conditional dependency to avoid too many calls - const databasesButOnlyIfFilterIsActive = - filterRegex && connections[0].databases; - useEffect(() => { - if (!filterRegex) { - setFilteredDatabases(undefined); - collapseAllTemporarilyExpanded(); - } else if (databasesButOnlyIfFilterIsActive) { - // the above check is extra just to please TS - - // When filtering, emit an event so that we can fetch all collections. This - // is required as a workaround for the synchronous nature of the current - // filtering feature - _fetchAllCollections(connectionId); - - const results = filterDatabases( - databasesButOnlyIfFilterIsActive, - filterRegex - ); - setFilteredDatabases(results); - temporarilyExpand(results); - } - }, [ - connectionId, - filterRegex, - databasesButOnlyIfFilterIsActive, - setFilteredDatabases, - temporarilyExpand, - collapseAllTemporarilyExpanded, - _fetchAllCollections, - ]); - - const onNamespaceAction = useCallback( - (connectionId: string, ns: string, action: Actions) => { - switch (action) { - case 'select-database': - openCollectionsWorkspace(connectionId, ns); - return; - case 'select-collection': - openCollectionWorkspace(connectionId, ns); - return; - case 'open-in-new-tab': - openCollectionWorkspace(connectionId, ns, { newTab: true }); - return; - case 'modify-view': { - const coll = findCollection(ns, connection.databases || []); - - if (coll && coll.sourceName && coll.pipeline) { - openEditViewWorkspace(connectionId, coll._id, { - sourceName: coll.sourceName, - sourcePipeline: coll.pipeline, - newTab: true, - }); - } - return; - } - default: - _onNamespaceAction(connectionId, ns, action); - return; - } - }, - [ - connection, - openCollectionsWorkspace, - openCollectionWorkspace, - openEditViewWorkspace, - _onNamespaceAction, - ] - ); - - // auto-expanding on a workspace change - useEffect(() => { - if ( - activeWorkspace && - (activeWorkspace.type === 'Collections' || - activeWorkspace.type === 'Collection') - ) { - const namespace: string = activeWorkspace.namespace; - handleDatabaseExpand(connectionId, namespace, true); - } - }, [activeWorkspace, handleDatabaseExpand, connectionId]); - - const onItemAction = useCallback( - (item: SidebarItem, action: Actions) => { - if (item.type !== 'connection') { - const ns = item.type === 'database' ? item.dbName : item.namespace; - onNamespaceAction(item.connectionId, ns, action); - } - }, - [onNamespaceAction] - ); - - const onItemExpand = useCallback( - (item: SidebarItem, isExpanded: boolean) => { - if (item.type === 'database') { - handleDatabaseExpand(item.connectionId, item.dbName, isExpanded); - } - }, - [handleDatabaseExpand] - ); - - return ( - - ); -} - -const mapStateToProps: MapStateToProps< - MapStateProps, - SidebarDatabasesNavigationComponentProps, - RootState -> = (state: RootState, { connectionInfo }) => { - const connectionId = connectionInfo.id; - const instance = state.instance[connectionId]; - const { databases } = state.databases[connectionId] || {}; - - const status = instance?.databasesStatus; - const isReady = - status !== undefined && !['initial', 'fetching'].includes(status); - - const isDataLake = instance?.dataLake?.isDataLake ?? false; - const isWritable = instance?.isWritable ?? false; - - return { - connections: [ - { - isReady, - isDataLake, - isWritable, - name: '', - connectionInfo, - databasesLength: databases?.length || 0, - databasesStatus: (status ?? - 'fetching') as SidebarConnectedConnection['databasesStatus'], - databases: databases ?? [], - connectionStatus: ConnectionStatus.Connected, - // TODO: this should be state formed in render, but alas, refactoring - // this is too much work and this code will go away soon anyway. This - // flag is only relevant for compass-web, so we'll just set it to always - // `true` here - isPerformanceTabAvailable: true, - isPerformanceTabSupported: - !isDataLake && !!state.isPerformanceTabSupported[connectionId], - isGenuineMongoDB: instance?.genuineMongoDB.isGenuine !== false, - csfleMode: instance?.csfleMode, - }, - ], - }; -}; - -const onNamespaceAction = ( - connectionId: ConnectionInfo['id'], - namespace: string, - action: Actions -): SidebarThunkAction => { - return (_dispatch, getState, { globalAppRegistry }) => { - // TODO: COMPASS-7719 to adapt modals to be multiple connection aware - const emit = (action: string, ...rest: any[]) => { - globalAppRegistry.emit(action, ...rest); - }; - const ns = toNS(namespace); - switch (action) { - case 'drop-database': - emit('open-drop-database', ns.database, { connectionId }); - return; - case 'rename-collection': - emit('open-rename-collection', ns, { connectionId }); - return; - case 'drop-collection': - emit('open-drop-collection', ns, { connectionId }); - return; - case 'create-collection': - emit('open-create-collection', ns, { - connectionId, - }); - return; - case 'duplicate-view': { - const coll = findCollection( - namespace, - getState().databases[connectionId].databases - ); - if (coll && coll.sourceName) { - emit( - 'open-create-view', - { - source: coll.sourceName, - pipeline: coll.pipeline, - duplicate: true, - }, - { - connectionId, - } - ); - } - return; - } - default: - // no-op - } - }; -}; - -const mapDispatchToProps: MapDispatchToProps< - MapDispatchProps, - SidebarDatabasesNavigationComponentProps -> = { - onNamespaceAction, - fetchAllCollections, - onDatabaseExpand, -}; - -export default connect( - mapStateToProps, - mapDispatchToProps -)(SidebarDatabasesNavigation); diff --git a/packages/compass-sidebar/src/components/legacy/sidebar-title.tsx b/packages/compass-sidebar/src/components/legacy/sidebar-title.tsx deleted file mode 100644 index ff7714a7455..00000000000 --- a/packages/compass-sidebar/src/components/legacy/sidebar-title.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; - -import { - MongoDBLogoMark, - css, - cx, - palette, - spacing, - ItemActionControls, - useDarkMode, - useDefaultAction, -} from '@mongodb-js/compass-components'; - -import type { ItemAction } from '@mongodb-js/compass-components'; -import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider'; -import FavoriteIndicator from './favorite-indicator'; - -type Action = - | 'copy-connection-string' - | 'edit-favorite' - | 'open-connection-info' - | 'expand-sidebar' - | 'refresh-data' - | 'open-compass-settings'; - -const titleLabel = css({ - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - fontSize: '18px', - fontWeight: 600, // TODO: 500 once we have the new font - marginLeft: '2px', // hardcoded to try and match the design - paddingRight: spacing[2], -}); - -const TitleLabel: React.FunctionComponent> = ({ - children, - className, - ...props -}) => { - return ( - - {children} - - ); -}; - -const titleLogo = css({ - width: spacing[5], - marginTop: '6px', // hardcoded to try and match the design - flexShrink: 0, -}); - -function TitleLogo() { - const darkMode = useDarkMode(); - - return ( -
- -
- ); -} - -const sidebarTitle = css({ - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - color: 'var(--title-color)', - backgroundColor: 'var(--title-bg-color)', - - height: spacing[6], - padding: spacing[3], -}); - -const iconButtonDark = css({ - color: palette.gray.dark3, - '&:hover': { - color: palette.white, - }, -}); - -const iconButtonLight = css({ - color: palette.white, - '&:hover': { - color: palette.gray.dark3, - }, -}); - -const iconButtonStyle = css({ - color: 'inherit', -}); - -function SidebarTitle({ - title, - isFavorite, - favoriteColor, - onAction, -}: { - title: string; - isFavorite: boolean; - favoriteColor?: string; - onAction(actionName: Action, ...rest: any[]): void; -}) { - const { openMyQueriesWorkspace } = useOpenWorkspace(); - - const actions = useMemo(() => { - const actions: ItemAction[] = []; - - actions.push({ - action: 'copy-connection-string', - label: 'Copy connection string', - icon: 'Copy', - }); - - actions.push({ - action: 'edit-favorite', - label: isFavorite ? 'Edit favorite' : 'Save favorite', - icon: 'Favorite', - }); - - actions.push({ - action: 'open-connection-info', - label: 'Connection info', - icon: 'Connect', - }); - - actions.push({ - action: 'open-compass-settings', - label: 'Compass Settings', - icon: 'Settings', - }); - - return actions; - }, [isFavorite]); - - const darkMode = useDarkMode(); - - const onClick = useCallback(() => { - openMyQueriesWorkspace(); - }, [openMyQueriesWorkspace]); - - const defaultActionProps = useDefaultAction(onClick); - - return ( - <> -
- - {title} - - onAction={onAction} - iconSize="small" - actions={actions} - data-testid="sidebar-title-actions" - iconClassName={cx( - iconButtonStyle, - darkMode ? iconButtonDark : iconButtonLight - )} - > -
- {isFavorite && favoriteColor && ( - - )} - - ); -} - -export default SidebarTitle; diff --git a/packages/compass-sidebar/src/components/legacy/sidebar.tsx b/packages/compass-sidebar/src/components/legacy/sidebar.tsx deleted file mode 100644 index 61bc871f409..00000000000 --- a/packages/compass-sidebar/src/components/legacy/sidebar.tsx +++ /dev/null @@ -1,268 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { cloneDeep } from 'lodash'; -import { connect } from 'react-redux'; -import { getConnectionTitle } from '@mongodb-js/connection-info'; -import type { ConnectionInfo } from '@mongodb-js/connection-info'; -import { - css, - spacing, - ResizableSidebar, - useToast, -} from '@mongodb-js/compass-components'; -import { SaveConnectionModal } from '@mongodb-js/connection-form'; -import { - useConnectionInfo, - useConnections, -} from '@mongodb-js/compass-connections/provider'; - -import SidebarTitle from './sidebar-title'; -import NavigationItems from './navigation-items'; -import ConnectionInfoModal from '../connection-info-modal'; -import CSFLEConnectionModal from '../csfle-connection-modal'; -import CSFLEMarker from '../csfle-marker'; -import NonGenuineMarker from '../non-genuine-marker'; - -import { setConnectionIsCSFLEEnabled } from '../../modules/data-service'; -import { useMaybeProtectConnectionString } from '@mongodb-js/compass-maybe-protect-connection-string'; -import type { RootState, SidebarThunkAction } from '../../modules'; -import type { WorkspaceTab } from '@mongodb-js/compass-workspaces'; - -const TOAST_TIMEOUT_MS = 5000; // 5 seconds. - -const sidebarStyles = css({ - // Sidebar internally has z-indexes higher than zero. We set zero on the - // container so that the sidebar doesn't stick out in the layout z ordering - // with other parts of the app - zIndex: 0, -}); - -const connectionBadgesContainerStyles = css({ - display: 'grid', - gridTemplateColumns: '100%', - gridTemplateRows: 'auto', - gap: spacing[2], - marginTop: spacing[3], - '&:empty': { - display: 'none', - }, -}); - -const navigationItemsContainerStyles = css({ - display: 'flex', - flexDirection: 'column', - flex: 1, - marginTop: spacing[2], - '&:first-child': { - marginTop: 2, - }, -}); - -// eslint-disable-next-line no-empty-pattern -export function Sidebar({ - showSidebarHeader = true, - activeWorkspace, - connectionInfo, - setConnectionIsCSFLEEnabled, - isGenuine, - csfleMode, - onSidebarAction, -}: { - showSidebarHeader?: boolean; - activeWorkspace: WorkspaceTab | null; - connectionInfo: ConnectionInfo; - setConnectionIsCSFLEEnabled: (connectionId: string, enabled: boolean) => void; - isGenuine?: boolean; - csfleMode?: 'enabled' | 'disabled' | 'unavailable'; - onSidebarAction(action: string, ...rest: any[]): void; -}) { - const { saveEditedConnection, showNonGenuineMongoDBWarningModal } = - useConnections(); - const [isFavoriteModalVisible, setIsFavoriteModalVisible] = useState(false); - const [isConnectionInfoModalVisible, setIsConnectionInfoModalVisible] = - useState(false); - - const onClickSaveFavorite = useCallback( - (newFavoriteInfo) => { - setIsFavoriteModalVisible(false); - - return saveEditedConnection({ - ...cloneDeep(connectionInfo), - favorite: newFavoriteInfo, - savedConnectionType: 'favorite', - }); - }, - [connectionInfo, saveEditedConnection] - ); - - const { openToast } = useToast('compass-connections'); - const maybeProtectConnectionString = useMaybeProtectConnectionString(); - - const onAction = useCallback( - (action: string, ...rest: any[]) => { - async function copyConnectionString(connectionString: string) { - try { - await navigator.clipboard.writeText(connectionString); - openToast('copy-to-clipboard', { - title: 'Success', - description: 'Copied to clipboard.', - variant: 'success', - timeout: TOAST_TIMEOUT_MS, - }); - } catch (err) { - openToast('copy-to-clipboard', { - title: 'Error', - description: - 'An error occurred when copying to clipboard. Please try again.', - variant: 'warning', - timeout: TOAST_TIMEOUT_MS, - }); - } - } - - if (action === 'copy-connection-string') { - void copyConnectionString( - maybeProtectConnectionString( - connectionInfo.connectionOptions.connectionString ?? '' - ) - ); - return; - } - - if (action === 'edit-favorite') { - setIsFavoriteModalVisible(true); - return; - } - - if (action === 'open-connection-info') { - setIsConnectionInfoModalVisible(true); - return; - } - - if (action === 'open-create-database') { - onSidebarAction(action, ...rest, { - connectionId: connectionInfo.id, - }); - return; - } - - if (action === 'refresh-databases') { - onSidebarAction(action, ...rest, { - connectionId: connectionInfo.id, - }); - return; - } - - onSidebarAction(action, ...rest); - }, - [ - connectionInfo.id, - onSidebarAction, - openToast, - maybeProtectConnectionString, - connectionInfo.connectionOptions.connectionString, - ] - ); - - const [isCSFLEModalVisible, setIsCSFLEModalVisible] = useState(false); - - const toggleCSFLEModalVisible = useCallback(() => { - setIsCSFLEModalVisible(!isCSFLEModalVisible); - }, [setIsCSFLEModalVisible, isCSFLEModalVisible]); - - return ( - - <> - {showSidebarHeader && ( -
- -
- { - showNonGenuineMongoDBWarningModal(connectionInfo.id); - }} - /> - -
-
- )} - -
- -
- - setIsFavoriteModalVisible(false)} - onSaveClicked={(favoriteInfo) => onClickSaveFavorite(favoriteInfo)} - /> - setIsCSFLEModalVisible(false)} - setConnectionIsCSFLEEnabled={(enabled) => - setConnectionIsCSFLEEnabled(connectionInfo.id, enabled) - } - /> - setIsConnectionInfoModalVisible(false)} - /> - - - ); -} - -const mapStateToProps = ( - state: RootState, - { - connectionInfo, - }: { - connectionInfo: ConnectionInfo; - } -) => { - return { - isGenuine: state.instance[connectionInfo.id]?.genuineMongoDB.isGenuine, - csfleMode: state.instance[connectionInfo.id]?.csfleMode, - }; -}; - -const onSidebarAction = ( - action: string, - ...rest: any[] -): SidebarThunkAction => { - return (_dispatch, _getState, { globalAppRegistry }) => { - globalAppRegistry.emit(action, ...rest); - }; -}; - -const MappedSidebar = connect(mapStateToProps, { - setConnectionIsCSFLEEnabled, - onSidebarAction, -})(Sidebar); - -export default function SidebarWithConnectionInfo( - props: Omit, 'connectionInfo'> -) { - const connectionInfo = useConnectionInfo(); - return ( - - ); -} diff --git a/packages/compass-sidebar/src/plugin.tsx b/packages/compass-sidebar/src/plugin.tsx index 9b387b75806..4f5b2ae5540 100644 --- a/packages/compass-sidebar/src/plugin.tsx +++ b/packages/compass-sidebar/src/plugin.tsx @@ -6,11 +6,8 @@ import { defaultSidebarWidth, } from '@mongodb-js/compass-components'; import { useActiveWorkspace } from '@mongodb-js/compass-workspaces/provider'; -import Sidebar from './components/legacy/sidebar'; -import { usePreference } from 'compass-preferences-model/provider'; import MultipleConnectionSidebar from './components/multiple-connections/sidebar'; import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider'; -import { useSingleConnectionModeConnectionInfoStatus } from '@mongodb-js/compass-connections/provider'; const errorBoundaryStyles = css({ width: defaultSidebarWidth, @@ -27,11 +24,6 @@ const SidebarPlugin: React.FunctionComponent = ({ showSidebarHeader, onOpenConnectViaModal, }) => { - const isMultiConnectionEnabled = usePreference( - 'enableMultipleConnectionSystem' - ); - const { connectionInfo } = useSingleConnectionModeConnectionInfoStatus(); - const activeWorkspace = useActiveWorkspace(); const { log, mongoLogId } = useLogger('COMPASS-SIDEBAR-UI'); @@ -48,19 +40,11 @@ const SidebarPlugin: React.FunctionComponent = ({ ); }} > - {isMultiConnectionEnabled && ( - - )} - {!isMultiConnectionEnabled && connectionInfo && ( - - )} + ); }; diff --git a/packages/connection-form/package.json b/packages/connection-form/package.json index 410310a5bcb..9c511ef3e38 100644 --- a/packages/connection-form/package.json +++ b/packages/connection-form/package.json @@ -52,7 +52,6 @@ "@mongodb-js/compass-editor": "^0.31.0", "@mongodb-js/connection-info": "^0.9.0", "@mongodb-js/shell-bson-parser": "^1.1.2", - "compass-preferences-model": "^2.29.0", "lodash": "^4.17.21", "mongodb": "^6.8.0", "mongodb-build-info": "^1.7.2", diff --git a/packages/connection-form/src/components/connection-form.spec.tsx b/packages/connection-form/src/components/connection-form.spec.tsx index 0620a892e00..46485aac68a 100644 --- a/packages/connection-form/src/components/connection-form.spec.tsx +++ b/packages/connection-form/src/components/connection-form.spec.tsx @@ -9,8 +9,6 @@ import { within, } from '@mongodb-js/testing-library-compass'; import { expect } from 'chai'; -import type { PreferencesAccess } from 'compass-preferences-model'; -import { createSandboxFromDefaultPreferences } from 'compass-preferences-model'; import ConnectionForm from './connection-form'; import type { ConnectionFormProps } from './connection-form'; import Sinon from 'sinon'; @@ -32,7 +30,6 @@ const saveAndConnectText = 'Save & Connect'; const favoriteText = 'FAVORITE'; describe('ConnectionForm Component', function () { - let preferences: PreferencesAccess; function renderForm(props: Partial = {}) { return render( void; - code: string; - hex: string; -}): React.ReactElement { - return ( - - ); -} - -export function FavoriteColorPicker({ - colorCode, - onChange, -}: { - colorCode?: string; - onChange: (newColor?: string) => void; -}): React.ReactElement { - const selectedColorCode = legacyColorsToColorCode(colorCode); - const { connectionColorToHex: colorCodeToHex } = useConnectionColor(); - const selectedColorHex = colorCodeToHex(selectedColorCode); - return ( - <> - -
- - {CONNECTION_COLOR_CODES.map((colorCode) => { - const hex = colorCodeToHex(colorCode) || ''; - return ( - { - onChange(colorCode); - }} - isSelected={colorCode === selectedColorCode} - hex={hex} - code={colorCode} - key={colorCode} - /> - ); - })} -
- - ); -} diff --git a/packages/connection-form/src/components/save-connection-modal.spec.tsx b/packages/connection-form/src/components/save-connection-modal.spec.tsx deleted file mode 100644 index 4399932522b..00000000000 --- a/packages/connection-form/src/components/save-connection-modal.spec.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import React from 'react'; -import { - render, - screen, - cleanup, - fireEvent, -} from '@mongodb-js/testing-library-compass'; -import { expect } from 'chai'; -import sinon from 'sinon'; - -import SaveConnectionModal from './save-connection-modal'; - -describe('SaveConnectionModal Component', function () { - let onSaveSpy: sinon.SinonSpy; - let onCancelSpy: sinon.SinonSpy; - - beforeEach(function () { - onSaveSpy = sinon.spy(); - onCancelSpy = sinon.spy(); - }); - - afterEach(function () { - cleanup(); - }); - - describe('when the loaded connection is not a favorite', function () { - beforeEach(function () { - render( - - ); - }); - - it('should have the title "Save connection to favorites"', function () { - expect(screen.getByText('Save connection to favorites')).to.be.visible; - }); - - it('should have the no-color option already selected', function () { - expect(screen.getByTestId('color-pick-no-color-selected')).to.be.visible; - }); - - describe('when the color and name are changed and save is clicked', function () { - beforeEach(function () { - fireEvent.click(screen.getByTestId('color-pick-color3')); - - const textArea = screen.getByRole('textbox'); - - fireEvent.change(textArea, { - target: { value: 'delicious cuban sandwich' }, - }); - }); - - describe('when the cancel button is clicked', function () { - beforeEach(function () { - fireEvent.click(screen.getByText('Cancel')); - }); - - it('should not have called to save', function () { - expect(onSaveSpy.callCount).to.equal(0); - }); - - it('should have called the cancel spy', function () { - expect(onCancelSpy.callCount).to.equal(1); - }); - }); - - describe('when the save button is clicked', function () { - beforeEach(function () { - fireEvent.click(screen.getByText('Save')); - }); - - it('should have called to save with the new config', function () { - expect(onSaveSpy.callCount).to.equal(1); - expect(onSaveSpy.firstCall.args[0]).to.deep.equal({ - name: 'delicious cuban sandwich', - color: 'color3', - }); - }); - - it('should not have called the cancel spy', function () { - expect(onCancelSpy.callCount).to.equal(0); - }); - }); - }); - }); - - describe('when the connection does not have a name', function () { - beforeEach(function () { - render( - - ); - }); - - it('renders save disabled', function () { - const button = screen.getByText('Save').closest('button'); - expect(button?.getAttribute('aria-disabled')).to.equal('true'); - }); - }); - - describe('when the connection does have a name', function () { - beforeEach(function () { - render( - - ); - }); - - it('renders save as enabled', function () { - const button = screen.getByText('Save').closest('button'); - expect(button?.getAttribute('aria-disabled')).to.not.equal('true'); - }); - }); - - describe('when the loaded connection is already a favorite', function () { - beforeEach(function () { - render( - - ); - }); - - it('should have the title "Edit favorite"', function () { - expect(screen.getByText('Edit favorite')).to.be.visible; - }); - - it('should have the color already selected', function () { - expect(screen.queryByTestId('color-pick-no-color-selected')).to.not.exist; - expect(screen.getByTestId('color-pick-color3-selected')).to.be.visible; - }); - }); - - describe('when saveText is passed', function () { - beforeEach(function () { - render( - - ); - }); - - it('should set the button text accordingly', function () { - expect(screen.getByText('Save & Connect')).to.be.visible; - }); - }); -}); diff --git a/packages/connection-form/src/components/save-connection-modal.tsx b/packages/connection-form/src/components/save-connection-modal.tsx deleted file mode 100644 index 483720c938d..00000000000 --- a/packages/connection-form/src/components/save-connection-modal.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { useState } from 'react'; -import { - FormModal, - FormFieldContainer, - TextInput, -} from '@mongodb-js/compass-components'; -import type { ConnectionFavoriteOptions } from '@mongodb-js/connection-info'; - -import { FavoriteColorPicker } from './favorite-color-picker'; - -function SaveConnectionModal({ - initialFavoriteInfo, - onCancelClicked, - onSaveClicked, - open, - saveText = 'Save', -}: { - initialFavoriteInfo?: ConnectionFavoriteOptions; - onCancelClicked: () => void; - onSaveClicked: (favoriteInfo: ConnectionFavoriteOptions) => Promise; - open: boolean; - saveText?: string; -}): React.ReactElement { - const [editingFavorite, setEditingFavorite] = useState({ - name: '', - ...initialFavoriteInfo, - }); - - return ( - { - void onSaveClicked({ - ...editingFavorite, - }); - }} - submitDisabled={(editingFavorite.name || '').trim() ? false : true} - onCancel={onCancelClicked} - submitButtonText={saveText} - data-testid="favorite-modal" - > - - ) => { - setEditingFavorite({ - ...editingFavorite, - name: value, - }); - }} - label="Name" - value={editingFavorite.name} - /> - - - { - setEditingFavorite({ - ...editingFavorite, - color: newColor, - }); - }} - /> - - - ); -} - -export default SaveConnectionModal; diff --git a/packages/connection-form/src/hooks/use-connection-color.spec.tsx b/packages/connection-form/src/hooks/use-connection-color.spec.tsx index fcbdf223944..5c4e6dfa761 100644 --- a/packages/connection-form/src/hooks/use-connection-color.spec.tsx +++ b/packages/connection-form/src/hooks/use-connection-color.spec.tsx @@ -33,35 +33,6 @@ describe('useConnectionColor', function () { } }); - // TODO(COMPASS-7906): remove - it.skip('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( - - ); - const { container: container2 } = render( - - ); - expect(container1.firstChild?.textContent).to.be.not.be.undefined; - expect(container1.firstChild?.textContent).to.equal( - container2.firstChild?.textContent - ); - } - }); - it('does not convert an unknown color code', function () { const { container } = render( diff --git a/packages/connection-form/src/hooks/use-connection-color.ts b/packages/connection-form/src/hooks/use-connection-color.ts index 7a5b232b291..0b84862f56c 100644 --- a/packages/connection-form/src/hooks/use-connection-color.ts +++ b/packages/connection-form/src/hooks/use-connection-color.ts @@ -1,5 +1,4 @@ import { useCallback } from 'react'; -import { usePreference } from 'compass-preferences-model/provider'; import { palette, useDarkMode } from '@mongodb-js/compass-components'; type ColorCode = `color${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}`; @@ -86,19 +85,6 @@ export const COLOR_CODE_TO_NAME: Record = { color10: 'Gray', }; -const LEGACY_COLORS_TO_COLOR_CODE_MAP: Record = { - '#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[]; @@ -109,20 +95,6 @@ function isColorCode( return CONNECTION_COLOR_CODES.includes(hexOrColorCode as ColorCode); } -export function legacyColorsToColorCode( - hexOrColorCode: string | undefined -): ColorCode | undefined { - if (!hexOrColorCode) { - return; - } - - if (isColorCode(hexOrColorCode)) { - return hexOrColorCode; - } - - return LEGACY_COLORS_TO_COLOR_CODE_MAP[hexOrColorCode]; -} - export function useConnectionColor(): { connectionColorCodes: () => ColorCode[]; connectionColorToHex: (colorCode: string | undefined) => string | undefined; @@ -133,7 +105,7 @@ export function useConnectionColor(): { } { const isDarkMode = useDarkMode(); - const newColorCodeToHex = useCallback( + const colorCodeToHex = useCallback( (colorCode: string | undefined): string | undefined => { if (!colorCode || !isColorCode(colorCode)) { return; @@ -161,22 +133,6 @@ export function useConnectionColor(): { [isDarkMode] ); - 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]; - }, - [] - ); - const colorToName = useCallback( (colorCode: string | undefined): string | undefined => { if (!colorCode || !isColorCode(colorCode)) { @@ -188,22 +144,10 @@ export function useConnectionColor(): { [] ); - const isMultiConnectionEnabled = usePreference( - 'enableMultipleConnectionSystem' - ); - - const connectionColorCodes = () => { - if (isMultiConnectionEnabled) { - return CONNECTION_COLOR_CODES.slice(0, 9); - } else { - return CONNECTION_COLOR_CODES; - } - }; + const connectionColorCodes = () => CONNECTION_COLOR_CODES.slice(0, 9); return { - connectionColorToHex: isMultiConnectionEnabled - ? newColorCodeToHex - : colorCodeToHex, + connectionColorToHex: colorCodeToHex, connectionColorToHexActive: connectionColorToHexActive, connectionColorToName: colorToName, connectionColorCodes, diff --git a/packages/connection-form/src/index.ts b/packages/connection-form/src/index.ts index ea1ff5de37b..1358163ec23 100644 --- a/packages/connection-form/src/index.ts +++ b/packages/connection-form/src/index.ts @@ -1,17 +1,14 @@ import ConnectionForm, { ColorCircleGlyph } from './components/connection-form'; import ConnectionFormModal from './components/connection-form-modal'; -import SaveConnectionModal from './components/save-connection-modal'; import { adjustConnectionOptionsBeforeConnect } from './hooks/use-connect-form'; export { - SaveConnectionModal, adjustConnectionOptionsBeforeConnect, ConnectionFormModal, ColorCircleGlyph, }; export { - legacyColorsToColorCode, useConnectionColor, DefaultColorCode, CONNECTION_COLOR_CODES,