Skip to content

Commit b96fb95

Browse files
syn-zhusyn-zhu
committed
Refactor
1 parent 8f1a3f1 commit b96fb95

File tree

7 files changed

+133
-55
lines changed

7 files changed

+133
-55
lines changed

‎packages/compass-connections-navigation/src/base-navigation-item.tsx‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,17 @@ const ClusterStateBadge: React.FunctionComponent<{
9797
state: string;
9898
}> = ({ state }) => {
9999
const badgeVariant =
100-
state === 'CREATING' ? BadgeVariant.Blue : BadgeVariant.LightGray;
101-
const badgeText = state === 'DELETING' ? 'TERMINATING' : state;
100+
state === 'CREATING'
101+
? BadgeVariant.Blue
102+
: state === 'DELETED'
103+
? BadgeVariant.Red
104+
: BadgeVariant.LightGray;
105+
const badgeText =
106+
state === 'DELETING'
107+
? 'TERMINATING'
108+
: state === 'DELETED'
109+
? 'TERMINATED'
110+
: state;
102111

103112
return (
104113
<Badge variant={badgeVariant} data-testid="navigation-item-state-badge">
@@ -112,32 +121,31 @@ const ClusterStateBadgeWithTooltip: React.FunctionComponent<{
112121
}> = ({ item }) => {
113122
const isDarkMode = useDarkMode();
114123

115-
if (item.type === 'connection') {
116-
const atlasClusterState = item.connectionInfo.atlasMetadata?.clusterState;
117-
if (atlasClusterState === 'PAUSED') {
118-
return (
119-
<Tooltip
120-
enabled={true}
121-
darkMode={isDarkMode}
122-
trigger={({
123-
children: tooltipChildren,
124-
...tooltipTriggerProps
125-
}: React.HTMLProps<HTMLDivElement>) => (
126-
<div {...tooltipTriggerProps}>
127-
<ClusterStateBadge state={atlasClusterState} />
128-
{tooltipChildren}
129-
</div>
130-
)}
131-
>
132-
<Body>Unpause your cluster to connect to it</Body>
133-
</Tooltip>
134-
);
135-
} else if (
136-
atlasClusterState === 'DELETING' ||
137-
atlasClusterState === 'CREATING'
138-
) {
139-
return <ClusterStateBadge state={atlasClusterState} />;
140-
}
124+
const atlasClusterState = item.connectionInfo?.atlasMetadata?.clusterState;
125+
if (atlasClusterState === 'PAUSED') {
126+
return (
127+
<Tooltip
128+
enabled={true}
129+
darkMode={isDarkMode}
130+
trigger={({
131+
children: tooltipChildren,
132+
...tooltipTriggerProps
133+
}: React.HTMLProps<HTMLDivElement>) => (
134+
<div {...tooltipTriggerProps}>
135+
<ClusterStateBadge state={atlasClusterState} />
136+
{tooltipChildren}
137+
</div>
138+
)}
139+
>
140+
<Body>Unpause your cluster to connect to it</Body>
141+
</Tooltip>
142+
);
143+
} else if (
144+
atlasClusterState === 'DELETING' ||
145+
atlasClusterState === 'CREATING' ||
146+
atlasClusterState === 'DELETED'
147+
) {
148+
return <ClusterStateBadge state={atlasClusterState} />;
141149
}
142150

143151
return null;

‎packages/compass-connections-navigation/src/connections-navigation-tree.tsx‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useMemo } from 'react';
22
import AutoSizer from 'react-virtualized-auto-sizer';
3-
import { getVirtualTreeItems } from './tree-data';
3+
import { clusterIsConnectable, getVirtualTreeItems } from './tree-data';
44
import { ROW_HEIGHT } from './constants';
55
import type { Actions } from './constants';
66
import { VirtualTree } from './virtual-list/virtual-list';
@@ -21,6 +21,7 @@ import {
2121
import type { WorkspaceTab } from '@mongodb-js/compass-workspaces';
2222
import { usePreference } from 'compass-preferences-model/provider';
2323
import type { NavigationItemActions } from './item-actions';
24+
import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';
2425
import {
2526
collectionItemActions,
2627
connectedConnectionItemActions,
@@ -57,6 +58,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
5758
);
5859

5960
const id = useId();
61+
const { getConnectionById } = useConnectionsListRef();
6062

6163
const treeData = useMemo(() => {
6264
return getVirtualTreeItems({
@@ -69,6 +71,14 @@ const ConnectionsNavigationTree: React.FunctionComponent<
6971

7072
const onDefaultAction: OnDefaultAction<SidebarActionableItem> = useCallback(
7173
(item, evt) => {
74+
const isConnectableCluster = clusterIsConnectable(
75+
item,
76+
getConnectionById
77+
);
78+
if (!isConnectableCluster) {
79+
return;
80+
}
81+
7282
if (item.type === 'connection') {
7383
if (item.connectionStatus === 'connected') {
7484
onItemAction(item, 'select-connection');
@@ -83,7 +93,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<
8393
}
8494
}
8595
},
86-
[onItemAction]
96+
[onItemAction, getConnectionById]
8797
);
8898

8999
const activeItemId = useMemo(() => {
@@ -144,6 +154,15 @@ const ConnectionsNavigationTree: React.FunctionComponent<
144154

145155
const getItemActionsAndConfig = useCallback(
146156
(item: SidebarTreeItem) => {
157+
const isConnectableCluster = clusterIsConnectable(
158+
item,
159+
getConnectionById
160+
);
161+
if (!isConnectableCluster) {
162+
return {
163+
actions: [],
164+
};
165+
}
147166
switch (item.type) {
148167
case 'placeholder':
149168
return {
@@ -192,7 +211,11 @@ const ConnectionsNavigationTree: React.FunctionComponent<
192211
};
193212
}
194213
},
195-
[isRenameCollectionEnabled, getCollapseAfterForConnectedItem]
214+
[
215+
isRenameCollectionEnabled,
216+
getCollapseAfterForConnectedItem,
217+
getConnectionById,
218+
]
196219
);
197220

198221
const isTestEnv = process.env.NODE_ENV === 'test';

‎packages/compass-connections-navigation/src/item-actions.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -146,13 +146,6 @@ export const notConnectedConnectionItemActions = ({
146146
connectionInfo: ConnectionInfo;
147147
connectionStatus: NotConnectedConnectionStatus;
148148
}): NavigationItemActions => {
149-
if (
150-
connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
151-
connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
152-
connectionInfo.atlasMetadata?.clusterState === 'CREATING'
153-
) {
154-
return [];
155-
}
156149
const commonActions = commonConnectionItemActions({ connectionInfo });
157150
if (connectionStatus === 'connecting') {
158151
return commonActions;

‎packages/compass-connections-navigation/src/navigation-item-icon.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,22 @@ export const NavigationItemIcon = ({ item }: { item: SidebarTreeItem }) => {
6363
return <Icon glyph="TimeSeries" />;
6464
}
6565
if (item.type === 'connection') {
66+
const atlasClusterState = item.connectionInfo.atlasMetadata?.clusterState;
67+
if (atlasClusterState === 'DELETING' || atlasClusterState === 'CREATING') {
68+
return (
69+
<WithStatusMarker status={'disconnected'}>
70+
<Icon glyph="Refresh" />
71+
</WithStatusMarker>
72+
);
73+
}
74+
if (atlasClusterState === 'PAUSED' || atlasClusterState === 'DELETED') {
75+
return (
76+
<WithStatusMarker status={'disconnected'}>
77+
<ServerIcon />
78+
</WithStatusMarker>
79+
);
80+
}
81+
6682
const isFavorite = item.connectionInfo.savedConnectionType === 'favorite';
6783
if (isFavorite) {
6884
return (
@@ -78,16 +94,6 @@ export const NavigationItemIcon = ({ item }: { item: SidebarTreeItem }) => {
7894
</WithStatusMarker>
7995
);
8096
}
81-
if (
82-
item.connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
83-
item.connectionInfo.atlasMetadata?.clusterState === 'CREATING'
84-
) {
85-
return (
86-
<WithStatusMarker status={item.connectionStatus}>
87-
<Icon glyph="Refresh" />
88-
</WithStatusMarker>
89-
);
90-
}
9197
return (
9298
<WithStatusMarker status={item.connectionStatus}>
9399
<ServerIcon />

‎packages/compass-connections-navigation/src/styled-navigation-item.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
DefaultColorCode,
55
} from '@mongodb-js/connection-form';
66
import { palette, useDarkMode } from '@mongodb-js/compass-components';
7-
import type { SidebarTreeItem } from './tree-data';
7+
import { clusterIsConnectable, type SidebarTreeItem } from './tree-data';
8+
import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';
89

910
type AcceptedStyles = {
1011
'--item-bg-color'?: string;
@@ -29,6 +30,8 @@ export default function StyledNavigationItem({
2930
() => (isDarkMode ? palette.gray.light1 : palette.gray.dark1),
3031
[isDarkMode]
3132
);
33+
const { getConnectionById } = useConnectionsListRef();
34+
const isConnectableCluster = clusterIsConnectable(item, getConnectionById);
3235

3336
const style: React.CSSProperties & AcceptedStyles = useMemo(() => {
3437
const style: AcceptedStyles = {};
@@ -44,17 +47,22 @@ export default function StyledNavigationItem({
4447
style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
4548
}
4649

47-
if (isDisconnectedConnection || isNonExistentNamespace) {
50+
if (
51+
isDisconnectedConnection ||
52+
isNonExistentNamespace ||
53+
!isConnectableCluster
54+
) {
4855
style['--item-color'] = inactiveColor;
4956
}
5057

51-
// For a non-existent namespace, even if its active, we show it as inactive
52-
if (isNonExistentNamespace) {
58+
// We always show these as inactive
59+
if (isNonExistentNamespace || !isConnectableCluster) {
5360
style['--item-color-active'] = inactiveColor;
5461
}
5562
return style;
5663
}, [
5764
inactiveColor,
65+
isConnectableCluster,
5866
item,
5967
colorCode,
6068
connectionColorToHex,

‎packages/compass-connections-navigation/src/tree-data.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,24 @@ export type SidebarActionableItem =
124124

125125
export type SidebarTreeItem = PlaceholderTreeItem | SidebarActionableItem;
126126

127+
export function clusterIsConnectable(
128+
item: SidebarTreeItem,
129+
getConnectionById: any
130+
): boolean {
131+
if (item.type === 'connection') {
132+
const clusterState = item.connectionInfo.atlasMetadata?.clusterState;
133+
return !['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
134+
clusterState
135+
);
136+
} else if (item.type === 'database' || item.type === 'collection') {
137+
const connection = getConnectionById(item.connectionId);
138+
return !['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
139+
connection.info.atlasMetadata?.clusterState
140+
);
141+
}
142+
return true;
143+
}
144+
127145
const notConnectedConnectionToItems = ({
128146
connection: { name, connectionInfo, connectionStatus },
129147
connectionIndex,

‎packages/compass-connections/src/stores/connections-store-redux.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -530,9 +530,12 @@ function mergeConnections(
530530
? newConnections
531531
: [newConnections];
532532

533+
const removedConnectionIds = new Set(connectionsState.ids);
534+
533535
let newConnectionsById = connectionsState.byId;
534536

535537
for (const connectionInfo of newConnections) {
538+
removedConnectionIds.delete(connectionInfo.id);
536539
const existingConnection = newConnectionsById[connectionInfo.id];
537540

538541
// If we got a new connection, just create a default state for this
@@ -560,6 +563,25 @@ function mergeConnections(
560563
}
561564
}
562565

566+
for (const connectionId of removedConnectionIds) {
567+
const removedConnection = newConnectionsById[connectionId];
568+
if (removedConnection.info.atlasMetadata) {
569+
newConnectionsById = {
570+
...newConnectionsById,
571+
[connectionId]: {
572+
...removedConnection,
573+
info: {
574+
...removedConnection.info,
575+
atlasMetadata: {
576+
...removedConnection.info.atlasMetadata,
577+
clusterState: 'DELETED',
578+
},
579+
},
580+
},
581+
};
582+
}
583+
}
584+
563585
// If we haven't modified newConnectionsById at this point, we can stop: none
564586
// of the new connections are different from what we have in the state already
565587
if (newConnectionsById === connectionsState.byId) {
@@ -1491,9 +1513,9 @@ const connectWithOptions = (
14911513

14921514
const atlasClusterState = connectionInfo.atlasMetadata?.clusterState;
14931515
if (
1494-
atlasClusterState === 'DELETED' ||
1495-
atlasClusterState === 'PAUSED' ||
1496-
atlasClusterState === 'CREATING'
1516+
['DELETING', 'DELETED', 'CREATING', 'PAUSED'].includes(
1517+
atlasClusterState
1518+
)
14971519
) {
14981520
return;
14991521
}

0 commit comments

Comments
 (0)