Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions configs/testing-library-compass/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,12 @@ export class MockDataService
implements
Pick<
DataService,
| 'getConnectionString'
| 'getConnectionOptions'
| 'getMongoClientConnectionOptions'
| 'addReauthenticationHandler'
| 'getCurrentTopologyType'
| 'getLastSeenTopology'
| 'getUpdatedSecrets'
| 'disconnect'
| 'instance'
Expand All @@ -126,6 +130,12 @@ export class MockDataService
getConnectionOptions() {
return this.connectionOptions;
}
getMongoClientConnectionOptions() {
return {
url: this.connectionOptions.connectionString,
options: { productName: 'Test', productDocsLink: 'http://example.com' },
};
}
addReauthenticationHandler(): void {
// noop
}
Expand Down
2 changes: 0 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 7 additions & 18 deletions packages/compass-app-stores/src/stores/instance-store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -352,25 +352,14 @@ export function createInstancesStore(
}
);

on(
globalAppRegistry,
'sidebar-filter-navigation-list',
({ connectionId }: { connectionId?: string } = {}) => {
const connectedConnectionIds = Array.from(
instancesManager.listMongoDBInstances().keys()
);
// connectionId will be provided by the sidebar when in single connection
// mode. We don't derive that from the list of connected connections
// because there is a possibility for us to be fetching all collections on
// wrong connection that way
const connectionIds = connectionId
? [connectionId]
: connectedConnectionIds;
for (const id of connectionIds) {
void fetchAllCollections({ connectionId: id });
}
on(globalAppRegistry, 'sidebar-filter-navigation-list', () => {
const connectedConnectionIds = Array.from(
instancesManager.listMongoDBInstances().keys()
);
for (const id of connectedConnectionIds) {
void fetchAllCollections({ connectionId: id });
}
);
});

on(
globalAppRegistry,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,21 +55,12 @@ const CollectionHeaderActions: React.FunctionComponent<
const { id: connectionId, atlasMetadata } = connectionInfo;
const { openCollectionWorkspace, openEditViewWorkspace, openShellWorkspace } =
useOpenWorkspace();
const {
readOnly: preferencesReadOnly,
enableShell,
enableMultipleConnectionSystem,
} = usePreferences([
'readOnly',
'enableShell',
'enableMultipleConnectionSystem',
]);
const { readOnly: preferencesReadOnly, enableShell: showOpenShellButton } =
usePreferences(['readOnly', 'enableShell']);
const track = useTelemetry();

const { database, collection } = toNS(namespace);

const showOpenShellButton = enableShell && enableMultipleConnectionSystem;

return (
<div
className={collectionHeaderActionsStyles}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { SelectTable } from './select-table';
import type { ImportExportResult } from '../hooks/common';
import { useOpenModalThroughIpc } from '../hooks/common';
import { useImportConnections } from '../hooks/use-import-connections';
import { usePreference } from 'compass-preferences-model/provider';

const TOAST_TIMEOUT_MS = 5000;

Expand All @@ -38,9 +37,6 @@ export function ImportConnectionsModal({
setOpen: (newOpen: boolean, trackingProps?: Record<string, unknown>) => void;
trackingProps?: Record<string, unknown>;
}): React.ReactElement {
const multipleConnectionsEnabled = usePreference(
'enableMultipleConnectionSystem'
);
const { openToast } = useToast('compass-connection-import-export');
const finish = useCallback(
(result: ImportExportResult) => {
Expand Down Expand Up @@ -100,16 +96,15 @@ export function ImportConnectionsModal({
variant={conn.selected ? 'yellow' : 'lightgray'}
data-testid={`existing-favorite-badge-${conn.id}`}
>
Existing{' '}
{multipleConnectionsEnabled ? 'Connection' : 'Favorite'}
Existing Connection
</Badge>
)}
</>
),
})),
connectionList.some((conn) => conn.isExistingConnection && conn.selected),
];
}, [connectionList, multipleConnectionsEnabled]);
}, [connectionList]);

return (
<FormModal
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -243,31 +243,28 @@ describe('useExportConnections', function () {
expect(result.current.state.error).to.equal('');
});

context('when multiple connections is enabled', function () {
it('includes also the non-favorites connections in the export list', function () {
const { result } = renderUseExportConnectionsHook(
{},
{
preferences: { enableMultipleConnectionSystem: true },
connections: [
{
id: 'id1',
connectionOptions: {
connectionString: 'mongodb://localhost:2020',
},
favorite: {
name: 'name1',
},
// expecting to include the non-favorite connections as well
savedConnectionType: 'recent',
it('includes also the non-favorites connections in the export list', function () {
const { result } = renderUseExportConnectionsHook(
{},
{
connections: [
{
id: 'id1',
connectionOptions: {
connectionString: 'mongodb://localhost:2020',
},
],
}
);
favorite: {
name: 'name1',
},
// expecting to include the non-favorite connections as well
savedConnectionType: 'recent',
},
],
}
);

expect(result.current.state.connectionList).to.deep.equal([
{ id: 'id1', name: 'name1', selected: true },
]);
});
expect(result.current.state.connectionList).to.deep.equal([
{ id: 'id1', name: 'name1', selected: true },
]);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,6 @@ describe('useImportConnections', function () {
const { result, connectionStorage } = renderUseImportConnectionsHook(
{},
{
preferences: { enableMultipleConnectionSystem: true },
connections: [
{
id: 'id1',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@ describe('ConnectionsNavigationTree', function () {
preferences = await createSandboxFromDefaultPreferences();
await preferences.savePreferences({
enableRenameCollectionModal: true,
enableMultipleConnectionSystem: true,
...preferencesOverrides,
});
return render(
Expand Down Expand Up @@ -661,7 +660,6 @@ describe('ConnectionsNavigationTree', function () {
preferences = await createSandboxFromDefaultPreferences();
await preferences.savePreferences({
enableRenameCollectionModal: true,
enableMultipleConnectionSystem: true,
});
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,11 @@ import {
notConnectedConnectionItemActions,
} from './item-actions';

const MCContainer = css({
const ConnectionsNavigationContainerStyles = css({
display: 'flex',
flex: '1 0 auto',
height: `calc(100% - ${spacing[1600]}px - ${spacing[200]}px)`,
});

const SCContainer = css({
display: 'flex',
flex: '1 0 auto',
height: 0,
});

export interface ConnectionsNavigationTreeProps {
connections: Connection[];
activeWorkspace: WorkspaceTab | null;
Expand All @@ -59,7 +52,6 @@ const ConnectionsNavigationTree: React.FunctionComponent<
}) => {
const preferencesShellEnabled = usePreference('enableShell');
const preferencesReadOnly = usePreference('readOnly');
const isSingleConnection = !usePreference('enableMultipleConnectionSystem');
const isRenameCollectionEnabled = usePreference(
'enableRenameCollectionModal'
);
Expand All @@ -69,18 +61,11 @@ const ConnectionsNavigationTree: React.FunctionComponent<
const treeData = useMemo(() => {
return getVirtualTreeItems({
connections,
isSingleConnection,
expandedItems: expanded,
preferencesReadOnly,
preferencesShellEnabled,
});
}, [
connections,
isSingleConnection,
expanded,
preferencesReadOnly,
preferencesShellEnabled,
]);
}, [connections, expanded, preferencesReadOnly, preferencesShellEnabled]);

const onDefaultAction: OnDefaultAction<SidebarActionableItem> = useCallback(
(item, evt) => {
Expand Down Expand Up @@ -111,11 +96,11 @@ const ConnectionsNavigationTree: React.FunctionComponent<
return `${activeWorkspace.connectionId}.${activeWorkspace.namespace}`;
}
// Database List (of a connection)
if (activeWorkspace.type === 'Databases' && !isSingleConnection) {
if (activeWorkspace.type === 'Databases') {
return activeWorkspace.connectionId;
}
}
}, [activeWorkspace, isSingleConnection]);
}, [activeWorkspace]);

const getCollapseAfterForConnectedItem = useCallback(
(actions: NavigationItemActions) => {
Expand Down Expand Up @@ -213,7 +198,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
const isTestEnv = process.env.NODE_ENV === 'test';

return (
<div className={isSingleConnection ? SCContainer : MCContainer}>
<div className={ConnectionsNavigationContainerStyles}>
<VisuallyHidden id={id}>Databases and Collections</VisuallyHidden>
{/* AutoSizer types does not allow both width and height to be disabled
considering that to be a pointless usecase and hence the type
Expand Down
8 changes: 3 additions & 5 deletions packages/compass-connections-navigation/src/placeholder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import type { CSSProperties } from 'react';
import { Placeholder, css } from '@mongodb-js/compass-components';
import { ROW_HEIGHT } from './constants';
import { getTreeItemStyles } from './utils';
import { usePreference } from 'compass-preferences-model/provider';

const placeholderItem = css({
display: 'flex',
Expand All @@ -13,25 +12,24 @@ const placeholderItem = css({
color: 'var(--item-color)',
});

const MULTIPLE_CONNECTION_PROPS = {
const PLACEHOLDER_PROPS = {
gradientStart: 'var(--item-bg-color-active)',
gradientEnd: 'var(--item-bg-color)',
style: { filter: 'brightness(0.98)' },
} as const;
};

export const PlaceholderItem: React.FunctionComponent<{
level: number;
style?: CSSProperties;
}> = ({ level, style }) => {
const isSingleConnection = !usePreference('enableMultipleConnectionSystem');
const itemPaddingStyles = useMemo(
() => getTreeItemStyles({ level, isExpandable: false }),
[level]
);

return (
<div className={placeholderItem} style={{ ...style, ...itemPaddingStyles }}>
<Placeholder {...(isSingleConnection ? {} : MULTIPLE_CONNECTION_PROPS)} />
<Placeholder {...PLACEHOLDER_PROPS} />
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
useConnectionColor,
DefaultColorCode,
} from '@mongodb-js/connection-form';
import { usePreference } from 'compass-preferences-model/provider';
import { palette, useDarkMode } from '@mongodb-js/compass-components';
import type { SidebarTreeItem } from './tree-data';
import { ConnectionStatus } from '@mongodb-js/compass-connections/provider';
Expand All @@ -25,7 +24,6 @@ export default function StyledNavigationItem({
const isDarkMode = useDarkMode();
const { connectionColorToHex, connectionColorToHexActive } =
useConnectionColor();
const isSingleConnection = !usePreference('enableMultipleConnectionSystem');
const { colorCode } = item;
const isDisconnectedConnection =
item.type === 'connection' &&
Expand All @@ -34,23 +32,20 @@ export default function StyledNavigationItem({
const style: React.CSSProperties & AcceptedStyles = useMemo(() => {
const style: AcceptedStyles = {};

if (!isSingleConnection) {
if (colorCode && colorCode !== DefaultColorCode) {
style['--item-bg-color'] = connectionColorToHex(colorCode);
style['--item-bg-color-hover'] = connectionColorToHexActive(colorCode);
style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
}
if (colorCode && colorCode !== DefaultColorCode) {
style['--item-bg-color'] = connectionColorToHex(colorCode);
style['--item-bg-color-hover'] = connectionColorToHexActive(colorCode);
style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
}

if (isDisconnectedConnection) {
style['--item-color'] = isDarkMode
? palette.gray.light1
: palette.gray.dark1;
}
if (isDisconnectedConnection) {
style['--item-color'] = isDarkMode
? palette.gray.light1
: palette.gray.dark1;
}
return style;
}, [
isDarkMode,
isSingleConnection,
isDisconnectedConnection,
colorCode,
connectionColorToHex,
Expand Down
Loading
Loading