Skip to content

Commit e12899d

Browse files
syn-zhusyn-zhu
committed
refactor
1 parent 3b30da4 commit e12899d

File tree

6 files changed

+70
-67
lines changed

6 files changed

+70
-67
lines changed

‎packages/compass-components/src/hooks/use-theme.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ enum Theme {
1111
export function useDarkMode(localDarkMode?: boolean): boolean | undefined {
1212
const darkMode = useLeafyGreenDarkMode(localDarkMode);
1313
return darkMode.darkMode;
14-
// return false;
1514
}
1615

1716
interface WithDarkModeProps {

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

Lines changed: 54 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@ import {
77
cx,
88
Badge,
99
BadgeVariant,
10+
Tooltip,
11+
useDarkMode,
12+
Body,
1013
} from '@mongodb-js/compass-components';
1114
import { type Actions, ROW_HEIGHT } from './constants';
1215
import { ExpandButton } from './tree-item';
1316
import { type NavigationItemActions } from './item-actions';
14-
import type { SidebarTreeItem, SidebarActionableItem } from './tree-data';
17+
import type { SidebarTreeItem } from './tree-data';
1518

1619
type NavigationBaseItemProps = {
1720
item: SidebarTreeItem;
@@ -90,6 +93,55 @@ const actionControlsWrapperStyles = css({
9093
gap: spacing[100],
9194
});
9295

96+
const ClusterStateBadge: React.FunctionComponent<{
97+
state: string;
98+
}> = ({ state }) => {
99+
const badgeVariant =
100+
state === 'CREATING' ? BadgeVariant.Blue : BadgeVariant.LightGray;
101+
102+
return (
103+
<Badge variant={badgeVariant} data-testid="navigation-item-state-badge">
104+
{state}
105+
</Badge>
106+
);
107+
};
108+
109+
const ClusterStateBadgeWithTooltip: React.FunctionComponent<{
110+
item: SidebarTreeItem;
111+
}> = ({ item }) => {
112+
const isDarkMode = useDarkMode();
113+
114+
if (item.type === 'connection') {
115+
const atlasClusterState = item.connectionInfo.atlasMetadata?.clusterState;
116+
if (atlasClusterState === 'PAUSED') {
117+
return (
118+
<Tooltip
119+
enabled={true}
120+
darkMode={isDarkMode}
121+
trigger={({
122+
children: tooltipChildren,
123+
...tooltipTriggerProps
124+
}: React.HTMLProps<HTMLDivElement>) => (
125+
<div {...tooltipTriggerProps}>
126+
<ClusterStateBadge state={atlasClusterState} />
127+
{tooltipChildren}
128+
</div>
129+
)}
130+
>
131+
<Body>Unpause your cluster to connect to it</Body>
132+
</Tooltip>
133+
);
134+
} else if (
135+
atlasClusterState === 'DELETING' ||
136+
atlasClusterState === 'CREATING'
137+
) {
138+
return <ClusterStateBadge state={atlasClusterState} />;
139+
}
140+
}
141+
142+
return null;
143+
};
144+
93145
export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
94146
item,
95147
isActive,
@@ -106,26 +158,6 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
106158
toggleExpand,
107159
children,
108160
}) => {
109-
// TODO: add extra UI stuff here
110-
111-
let isDisabled = false;
112-
let status = '';
113-
let variant = BadgeVariant.LightGray;
114-
if (item.type === 'connection') {
115-
const connectionInfo = item.connectionInfo;
116-
isDisabled =
117-
connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
118-
connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
119-
connectionInfo.atlasMetadata?.clusterState === 'CREATING';
120-
if (isDisabled) {
121-
status = connectionInfo.atlasMetadata?.clusterState;
122-
if (status === 'CREATING') {
123-
variant = BadgeVariant.Blue;
124-
}
125-
console.log(status);
126-
}
127-
}
128-
129161
const [hoverProps, isHovered] = useHoverState();
130162
return (
131163
<div
@@ -152,18 +184,7 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
152184
{icon}
153185
<span title={name}>{name}</span>
154186
</div>
155-
{isDisabled && (
156-
<Badge
157-
variant={variant}
158-
className={css({
159-
verticalAlign: 'middle',
160-
marginLeft: spacing[100],
161-
})}
162-
data-testid="navigation-item-state-badge"
163-
>
164-
{status}
165-
</Badge>
166-
)}
187+
<ClusterStateBadgeWithTooltip item={item} />
167188
<div className={actionControlsWrapperStyles}>
168189
<ItemActionControls
169190
menuClassName={menuStyles}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,16 @@ export const NavigationItemIcon = ({ item }: { item: SidebarTreeItem }) => {
7878
</WithStatusMarker>
7979
);
8080
}
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+
}
8191
return (
8292
<WithStatusMarker status={item.connectionStatus}>
8393
<ServerIcon />

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

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -111,23 +111,14 @@ export function NavigationItem({
111111
onItemExpand,
112112
getItemActions,
113113
}: NavigationItemProps) {
114-
let isDisabled = false;
115-
if (item.type === 'connection') {
116-
const connectionInfo = item.connectionInfo;
117-
isDisabled =
118-
connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
119-
connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
120-
connectionInfo.atlasMetadata?.clusterState === 'CREATING';
121-
}
122-
123114
const isDarkMode = useDarkMode();
124115
const onAction = useCallback(
125116
(action: Actions) => {
126-
if (item.type !== 'placeholder' || !isDisabled) {
117+
if (item.type !== 'placeholder') {
127118
onItemAction(item, action);
128119
}
129120
},
130-
[item, onItemAction, isDisabled]
121+
[item, onItemAction]
131122
);
132123

133124
const style = useMemo(() => getTreeItemStyles(item), [item]);
@@ -210,10 +201,10 @@ export function NavigationItem({
210201
}, [item, isDarkMode]);
211202

212203
const toggleExpand = useCallback(() => {
213-
if (item.type !== 'placeholder' || isDisabled) {
204+
if (item.type !== 'placeholder') {
214205
onItemExpand(item, !item.isExpanded);
215206
}
216-
}, [onItemExpand, item, isDisabled]);
207+
}, [onItemExpand, item]);
217208

218209
return (
219210
<StyledNavigationItem item={item}>

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export default function StyledNavigationItem({
3434
const style: AcceptedStyles = {};
3535
const isDisconnectedConnection =
3636
item.type === 'connection' && item.connectionStatus !== 'connected';
37-
3837
const isNonExistentNamespace =
3938
(item.type === 'database' || item.type === 'collection') &&
4039
item.isNonExistent;
@@ -45,21 +44,12 @@ export default function StyledNavigationItem({
4544
style['--item-bg-color-active'] = connectionColorToHexActive(colorCode);
4645
}
4746

48-
if (isDisconnectedConnection) {
47+
if (isDisconnectedConnection || isNonExistentNamespace) {
4948
style['--item-color'] = inactiveColor;
50-
const connectionInfo = item.connectionInfo;
51-
if (
52-
connectionInfo.atlasMetadata?.clusterState === 'DELETING' ||
53-
connectionInfo.atlasMetadata?.clusterState === 'PAUSED' ||
54-
connectionInfo.atlasMetadata?.clusterState === 'CREATING'
55-
) {
56-
style['--item-color-active'] = inactiveColor;
57-
}
5849
}
5950

6051
// For a non-existent namespace, even if its active, we show it as inactive
6152
if (isNonExistentNamespace) {
62-
style['--item-color'] = inactiveColor;
6353
style['--item-color-active'] = inactiveColor;
6454
}
6555
return style;

‎packages/compass-web/src/connection-storage.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -291,9 +291,7 @@ export class AtlasCloudConnectionStorage
291291

292292
const connectionInfoList = (await res.json()) as ConnectionInfo[];
293293

294-
console.log(connectionInfoList);
295-
296-
const cil = connectionInfoList
294+
return connectionInfoList
297295
.map((connectionInfo: ConnectionInfo): ConnectionInfo | null => {
298296
if (
299297
!connectionInfo.atlasMetadata ||
@@ -304,8 +302,6 @@ export class AtlasCloudConnectionStorage
304302
return null;
305303
}
306304

307-
console.log(connectionInfo);
308-
309305
const clusterName = connectionInfo.atlasMetadata.clusterName;
310306

311307
return {
@@ -327,10 +323,6 @@ export class AtlasCloudConnectionStorage
327323
.filter((connectionInfo): connectionInfo is ConnectionInfo => {
328324
return !!connectionInfo;
329325
});
330-
331-
console.log('FILTERED');
332-
console.log(cil);
333-
return cil;
334326
}
335327

336328
/**

0 commit comments

Comments
 (0)