Skip to content

Commit 7b276ee

Browse files
himanshusinghshimanshusinghs
authored
chore(compass-sidebar): adds CSFLE / Non-Genuine MongoDB markers in the sidebar along with some alignments with the new sidebar design (#5976)
1 parent 82744f6 commit 7b276ee

22 files changed

+561
-399
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-components/src/components/icons/server-icon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ const ServerIcon = () => {
1313
return (
1414
<svg
1515
className={iconStyles}
16-
width="14"
17-
height="14"
18-
viewBox="0 0 14 14"
16+
width="16"
17+
height="16"
18+
viewBox="0 0 16 16"
1919
fill="none"
2020
xmlns="http://www.w3.org/2000/svg"
2121
>

‎packages/compass-components/src/components/item-action-controls.tsx‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export type ItemAction<Action extends string> = {
2828
isDisabled?: boolean;
2929
disabledDescription?: string;
3030
tooltip?: string;
31+
actionButtonClassName?: string;
3132
};
3233

3334
export type ItemSeparator = { separator: true };
@@ -72,10 +73,17 @@ const actionControlsStyle = css({
7273

7374
const actionGroupButtonStyle = css({
7475
'&:not(:first-child)': {
75-
marginLeft: spacing[1],
76+
marginLeft: spacing[100],
7677
},
7778
});
7879

80+
// Action buttons are rendered 4px apart from each other. With this we keep the
81+
// same spacing also when action buttons are rendered alongside action menu
82+
// (happens when collapseAfter prop is specified)
83+
const actionMenuWithActionControlsStyles = css({
84+
marginLeft: spacing[100],
85+
});
86+
7987
const iconContainerStyle = css({
8088
display: 'block',
8189
flex: 'none',
@@ -327,8 +335,15 @@ export function ItemActionGroup<Action extends string>({
327335
return <MenuSeparator key={`separator-${idx}`} />;
328336
}
329337

330-
const { action, icon, label, isDisabled, tooltip, tooltipProps } =
331-
menuItem;
338+
const {
339+
action,
340+
icon,
341+
label,
342+
isDisabled,
343+
tooltip,
344+
tooltipProps,
345+
actionButtonClassName,
346+
} = menuItem;
332347
const button = (
333348
<ItemActionButton
334349
key={action}
@@ -339,7 +354,11 @@ export function ItemActionGroup<Action extends string>({
339354
data-action={action}
340355
data-testid={actionTestId<Action>(dataTestId, action)}
341356
onClick={onClick}
342-
className={cx(actionGroupButtonStyle, iconClassName)}
357+
className={cx(
358+
actionGroupButtonStyle,
359+
iconClassName,
360+
actionButtonClassName
361+
)}
343362
style={iconStyle}
344363
disabled={isDisabled}
345364
/>
@@ -351,7 +370,11 @@ export function ItemActionGroup<Action extends string>({
351370
key={action}
352371
{...tooltipProps}
353372
trigger={({ children, ...props }) => (
354-
<div {...props} style={{ display: 'inherit' }}>
373+
<div
374+
{...props}
375+
className={actionGroupButtonStyle}
376+
style={{ display: 'inherit' }}
377+
>
355378
{button}
356379
{children}
357380
</div>
@@ -442,6 +465,10 @@ export function ItemActionControls<Action extends string>({
442465
actions={collapsedActions}
443466
{...sharedProps}
444467
{...sharedMenuProps}
468+
className={cx(
469+
actionMenuWithActionControlsStyles,
470+
sharedProps.className
471+
)}
445472
></ItemActionMenu>
446473
</div>
447474
);

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

Lines changed: 82 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,87 @@ import {
44
spacing,
55
css,
66
ItemActionControls,
7+
cx,
78
} from '@mongodb-js/compass-components';
89
import { ROW_HEIGHT, type Actions } from './constants';
9-
import {
10-
ItemContainer,
11-
ItemLabel,
12-
ItemWrapper,
13-
ItemButtonWrapper,
14-
ExpandButton,
15-
} from './tree-item';
10+
import { ExpandButton } from './tree-item';
1611
import { type NavigationItemActions } from './item-actions';
1712

1813
type NavigationBaseItemProps = {
19-
isActive: boolean;
20-
style: React.CSSProperties;
21-
2214
name: string;
23-
icon: React.ReactNode;
24-
25-
dataAttributes?: Record<string, string | undefined>;
26-
15+
isActive: boolean;
2716
canExpand: boolean;
2817
isExpanded: boolean;
2918
isFocused: boolean;
30-
onExpand: (toggle: boolean) => void;
19+
icon: React.ReactNode;
20+
style: React.CSSProperties;
3121

22+
dataAttributes?: Record<string, string | undefined>;
3223
actionProps: {
3324
collapseAfter?: number;
3425
collapseToMenuThreshold?: number;
3526
actions: NavigationItemActions;
3627
onAction: (action: Actions) => void;
3728
};
29+
onExpand: (toggle: boolean) => void;
3830
};
3931

40-
const baseItemContainerStyles = css({
41-
height: ROW_HEIGHT,
32+
const menuStyles = css({
33+
width: '240px',
34+
maxHeight: 'unset',
35+
marginLeft: 'auto',
4236
});
4337

44-
const baseItemButtonWrapperStyles = css({
38+
const itemContainerStyles = css({
39+
paddingLeft: spacing[300],
40+
paddingRight: spacing[300],
41+
cursor: 'pointer',
42+
color: 'var(--item-color)',
43+
backgroundColor: 'var(--item-bg-color)',
44+
'&[data-is-active="true"] .item-wrapper': {
45+
fontWeight: 600,
46+
color: 'var(--item-color-active)',
47+
backgroundColor: 'var(--item-bg-color-active)',
48+
},
49+
'&:hover:not([data-is-active="true"]) .item-wrapper': {
50+
backgroundColor: 'var(--item-bg-color-hover)',
51+
},
52+
svg: {
53+
flexShrink: 0,
54+
},
55+
});
56+
57+
const itemWrapperStyles = css({
58+
display: 'flex',
4559
height: ROW_HEIGHT,
60+
alignItems: 'center',
61+
paddingLeft: spacing[100],
4662
paddingRight: spacing[100],
63+
gap: spacing[50],
64+
borderRadius: spacing[100],
4765
});
4866

49-
const baseItemLabelStyles = css({
50-
marginLeft: spacing[200],
67+
const labelAndIconWrapperStyles = css({
68+
width: '100%',
69+
display: 'flex',
70+
gap: spacing[150],
71+
overflow: 'hidden',
72+
alignItems: 'center',
73+
'& span': {
74+
overflow: 'hidden',
75+
whiteSpace: 'nowrap',
76+
textOverflow: 'ellipsis',
77+
},
5178
});
5279

53-
const menuStyles = css({
54-
width: '240px',
55-
maxHeight: 'unset',
80+
const actionControlsWrapperStyles = css({
81+
display: 'flex',
82+
marginLeft: 'auto',
83+
alignItems: 'center',
84+
gap: spacing[100],
5685
});
5786

58-
export const NavigationBaseItem = ({
87+
export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
5988
isActive,
6089
actionProps,
6190
name,
@@ -66,43 +95,41 @@ export const NavigationBaseItem = ({
6695
isExpanded,
6796
isFocused,
6897
onExpand,
69-
}: NavigationBaseItemProps) => {
98+
children,
99+
}) => {
70100
const [hoverProps, isHovered] = useHoverState();
71101
return (
72-
<ItemContainer
102+
<div
73103
data-testid="base-navigation-item"
74-
isActive={isActive}
75-
className={baseItemContainerStyles}
104+
className={itemContainerStyles}
76105
{...hoverProps}
77106
{...dataAttributes}
78107
>
79-
<ItemWrapper>
80-
<ItemButtonWrapper
81-
style={style}
82-
className={baseItemButtonWrapperStyles}
83-
>
84-
{canExpand && (
85-
<ExpandButton
86-
onClick={(evt) => {
87-
evt.stopPropagation();
88-
onExpand(!isExpanded);
89-
}}
90-
isExpanded={isExpanded}
91-
></ExpandButton>
92-
)}
108+
<div className={cx('item-wrapper', itemWrapperStyles)} style={style}>
109+
{canExpand && (
110+
<ExpandButton
111+
onClick={(evt) => {
112+
evt.stopPropagation();
113+
onExpand(!isExpanded);
114+
}}
115+
isExpanded={isExpanded}
116+
></ExpandButton>
117+
)}
118+
<div className={labelAndIconWrapperStyles}>
93119
{icon}
94-
<ItemLabel className={baseItemLabelStyles} title={name}>
95-
{name}
96-
</ItemLabel>
97-
</ItemButtonWrapper>
98-
<ItemActionControls<Actions>
99-
menuClassName={menuStyles}
100-
isVisible={isActive || isHovered || isFocused}
101-
data-testid="sidebar-navigation-item-actions"
102-
iconSize="small"
103-
{...actionProps}
104-
></ItemActionControls>
105-
</ItemWrapper>
106-
</ItemContainer>
120+
<span title={name}>{name}</span>
121+
</div>
122+
<div className={actionControlsWrapperStyles}>
123+
<ItemActionControls<Actions>
124+
menuClassName={menuStyles}
125+
isVisible={isActive || isHovered || isFocused}
126+
data-testid="sidebar-navigation-item-actions"
127+
iconSize="xsmall"
128+
{...actionProps}
129+
></ItemActionControls>
130+
{children}
131+
</div>
132+
</div>
133+
</div>
107134
);
108135
};

0 commit comments

Comments
 (0)