Skip to content

chore(connections-navigation): disable sidebar right-caret on disconnected connections #6499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 4, 2024
Merged

chore(connections-navigation): disable sidebar right-caret on disconnected connections #6499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
61d704d
Add and use disable prop on ExpandButton
kraenhansen Nov 15, 2024
a2c3f42
Pass functional Item component directly
kraenhansen Nov 15, 2024
dde7f36
Pass and call a memoized toggle callback
kraenhansen Nov 15, 2024
f7dfdfc
Prevent propagation of clicks on the ExpandButton
kraenhansen Nov 15, 2024
03449f7
Revert "Pass functional Item component directly"
kraenhansen Nov 15, 2024
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
13 changes: 7 additions & 6 deletions packages/compass-connections-navigation/src/base-navigation-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ type NavigationBaseItemProps = {
actions: NavigationItemActions;
onAction: (action: Actions) => void;
};
onExpand: (toggle: boolean) => void;
toggleExpand: () => void;
};

const menuStyles = css({
Expand Down Expand Up @@ -98,7 +98,7 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
isExpanded,
isFocused,
hasDefaultAction,
onExpand,
toggleExpand,
children,
}) => {
const [hoverProps, isHovered] = useHoverState();
Expand All @@ -114,12 +114,13 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
<div className={cx('item-wrapper', itemWrapperStyles)} style={style}>
{isExpandVisible && (
<ExpandButton
onClick={(evt) => {
if (isExpandDisabled) return;
evt.stopPropagation();
Copy link
Contributor

@himanshusinghs himanshusinghs Nov 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is still desirable because what I noticed - once you connect, and click on the expanded caret to collapse the tree, the default action (to open the tab for databases list) happens instead of collapse.

Copy link
Contributor Author

@kraenhansen kraenhansen Nov 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was hoping you'd share context on this. I forgot to ask directly 😬
I'll add it back and write a comment on why it's there 👍

onExpand(!isExpanded);
onClick={(event) => {
// Prevent the click from propagating to the `TreeItem`, triggering the default action
event.stopPropagation();
toggleExpand();
}}
isExpanded={isExpanded}
disabled={isExpandDisabled}
Copy link
Member

@Anemy Anemy Nov 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on what Betsy's message, I was under the impression we were going to hide the caret altogether, not make it disabled: https://mongodb.slack.com/archives/G2L10JAV7/p1731623253437699?thread_ts=1731413469.751959&cid=G2L10JAV7
I feel showing it in the UI makes me want to click it. I feel we should either make it not show up at all or make it clickable to connect.

Copy link
Contributor Author

@kraenhansen kraenhansen Nov 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bsradcliffe wanted to keep them (see #6449 (comment))

I would like to preserve the chevrons.

Copy link
Member

@Anemy Anemy Nov 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool cool, fine as is then. I'll ping @bsradcliffe to see if making them clickable to connect is an option, or if we want to keep it as is with the disabled.

></ExpandButton>
)}
<div className={labelAndIconWrapperStyles}>
Expand Down
10 changes: 7 additions & 3 deletions packages/compass-connections-navigation/src/navigation-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,12 @@ export function NavigationItem({
return actions;
}, [item, isDarkMode]);

const toggleExpand = useCallback(() => {
if (item.type !== 'placeholder') {
onItemExpand(item, !item.isExpanded);
}
}, [onItemExpand, item]);

return (
<StyledNavigationItem item={item}>
{item.type === 'placeholder' ? (
Expand All @@ -262,9 +268,7 @@ export function NavigationItem({
isExpandDisabled={
item.type === 'connection' && item.connectionStatus !== 'connected'
}
onExpand={(isExpanded: boolean) => {
onItemExpand(item, isExpanded);
}}
toggleExpand={toggleExpand}
actionProps={actionProps}
>
{!!connectionStaticActions.length && (
Expand Down
18 changes: 12 additions & 6 deletions packages/compass-connections-navigation/src/tree-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ const expandButton = css({
display: 'flex',
transition: 'transform .16s linear',
transform: 'rotate(0deg)',
'&:hover': {
cursor: 'pointer',
},
// we're sizing the icon down below but we still want the button to take up
// 16px so that the grid lines up
minWidth: spacing[400],
Expand All @@ -24,18 +21,23 @@ const expandButton = css({
justifyContent: 'center',
});

const expanded = css({
const expandedStyles = css({
transform: 'rotate(90deg)',
});

const enabledStyles = css({
cursor: 'pointer',
});

export type VirtualListItemProps = {
style?: CSSProperties;
};

export const ExpandButton: React.FunctionComponent<{
onClick: React.MouseEventHandler<HTMLButtonElement>;
isExpanded: boolean;
}> = ({ onClick, isExpanded }) => {
disabled?: boolean;
}> = ({ onClick, isExpanded, disabled = false }) => {
return (
<button
type="button"
Expand All @@ -46,7 +48,11 @@ export const ExpandButton: React.FunctionComponent<{
// using a mouse
tabIndex={-1}
onClick={onClick}
className={cx(buttonReset, expandButton, isExpanded && expanded)}
className={cx(buttonReset, expandButton, {
[expandedStyles]: isExpanded,
[enabledStyles]: !disabled,
})}
disabled={disabled}
>
<Icon width={14} height={14} glyph="CaretRight" size="small"></Icon>
</button>
Expand Down
Loading