Skip to content

Commit

Permalink
Clean up "Actions" generic types
Browse files Browse the repository at this point in the history
  • Loading branch information
kraenhansen committed Dec 19, 2024
1 parent fdb64f8 commit c5d25a8
Show file tree
Hide file tree
Showing 11 changed files with 40 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export function DropdownMenuButton<Action extends string>({
<MenuItem
active={activeAction === action}
key={action}
data-testid={actionTestId<Action>(dataTestId, action)}
data-testid={actionTestId(dataTestId, action)}
data-action={action}
data-menuitem={true}
glyph={<ActionGlyph glyph={icon} size={iconSize} />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ItemActionButtonSize } from './constants';
import type { ItemComponentProps } from './types';
import { SmallIconButton } from './small-icon-button';

export function ItemActionButton<Action extends string>({
export function ItemActionButton({
action,
icon = <></>,
label,
Expand All @@ -17,7 +17,7 @@ export function ItemActionButton<Action extends string>({
iconStyle,
isDisabled,
'data-testid': dataTestId,
}: ItemComponentProps<Action>) {
}: ItemComponentProps) {
return (
<SmallIconButton
key={action}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('item action controls components', function () {
actions={[]}
onAction={() => {}}
data-testid="test-actions"
></ItemActionControls>
/>
);

expect(screen.queryByTestId('test-actions')).to.not.exist;
Expand All @@ -32,7 +32,7 @@ describe('item action controls components', function () {
actions={[{ action: 'copy', label: 'Copy', icon: 'Copy' }]}
onAction={() => {}}
data-testid="test-actions"
></ItemActionControls>
/>
);

expect(screen.getByTestId('test-actions')).to.exist;
Expand All @@ -47,7 +47,7 @@ describe('item action controls components', function () {
onAction={() => {}}
data-testid="test-actions"
collapseToMenuThreshold={1}
></ItemActionControls>
/>
);

const trigger = screen.getByTestId('test-actions-show-actions');
Expand All @@ -69,7 +69,7 @@ describe('item action controls components', function () {
onAction={onAction}
data-testid="test-actions"
collapseToMenuThreshold={3}
></ItemActionControls>
/>
);

expect(onAction).not.to.be.called;
Expand All @@ -90,7 +90,7 @@ describe('item action controls components', function () {
onAction={onAction}
data-testid="test-actions"
collapseToMenuThreshold={1}
></ItemActionControls>
/>
);

expect(onAction).not.to.be.called;
Expand All @@ -112,7 +112,7 @@ describe('item action controls components', function () {
onAction={() => {}}
data-testid="test-actions"
collapseAfter={1}
></ItemActionControls>
/>
);

expect(screen.queryByTestId('test-actions-connect-action')).to.exist;
Expand Down Expand Up @@ -146,7 +146,7 @@ describe('item action controls components', function () {
onAction={() => {}}
data-testid="test-actions"
collapseAfter={1}
></ItemActionControls>
/>
);

const actionButton = screen.getByTestId('test-actions-connect-action');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export type ItemActionControlsProps<Action extends string> = {
'data-testid'?: string;
};

export function ItemActionControls<Action extends string>({
export function ItemActionControls<Action extends string = string>({
isVisible = true,
actions,
onAction,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function ItemActionGroup<Action extends string>({
iconStyle={iconStyle}
iconClassName={iconClassName}
onClick={onClick}
data-testid={actionTestId<Action>(dataTestId, itemProps.action)}
data-testid={actionTestId(dataTestId, itemProps.action)}
/>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export function ItemActionMenu<Action extends string>({
return (
<MenuItem
key={action}
data-testid={actionTestId<Action>(dataTestId, action)}
data-testid={actionTestId(dataTestId, action)}
data-action={action}
data-menuitem={true}
glyph={<ActionGlyph glyph={icon} size={iconSize} />}
Expand Down
6 changes: 3 additions & 3 deletions packages/compass-components/src/components/actions/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { glyphs } from '@leafygreen-ui/icon';

import type { ItemActionButtonSize } from './constants';

export type ItemBase<Action extends string> = {
export type ItemBase<Action extends string = string> = {
action: Action;
label: string;
icon?: React.ReactChild;
Expand All @@ -18,7 +18,7 @@ export type ItemBase<Action extends string> = {
expandedAs?: React.ComponentType<ItemComponentProps<Action>>;
};

export type ItemComponentProps<Action extends string> = Omit<
export type ItemComponentProps<Action extends string = string> = Omit<
ItemBase<Action>,
'expandedAs'
> & {
Expand All @@ -30,7 +30,7 @@ export type ItemComponentProps<Action extends string> = Omit<
onClick(evt: React.MouseEvent<unknown>): void;
};

export type ItemAction<Action extends string> = {
export type ItemAction<Action extends string = string> = {
icon: keyof typeof glyphs | React.ReactElement;
} & ItemBase<Action>;

Expand Down
5 changes: 1 addition & 4 deletions packages/compass-components/src/components/actions/utils.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
export function actionTestId<Action extends string>(
dataTestId: string | undefined,
action: Action
) {
export function actionTestId(dataTestId: string | undefined, action: string) {
return dataTestId ? `${dataTestId}-${action}-action` : undefined;
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
ItemActionControls,
cx,
} from '@mongodb-js/compass-components';
import { ROW_HEIGHT, type Actions } from './constants';
import { type Actions, ROW_HEIGHT } from './constants';
import { ExpandButton } from './tree-item';
import { type NavigationItemActions } from './item-actions';

Expand Down Expand Up @@ -128,13 +128,13 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
<span title={name}>{name}</span>
</div>
<div className={actionControlsWrapperStyles}>
<ItemActionControls<Actions>
<ItemActionControls
menuClassName={menuStyles}
isVisible={isActive || isHovered || isFocused}
data-testid="sidebar-navigation-item-actions"
iconSize="xsmall"
{...actionProps}
></ItemActionControls>
/>
{children}
</div>
</div>
Expand Down
32 changes: 17 additions & 15 deletions packages/compass-connections-navigation/src/item-actions.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
import type { ItemAction } from '@mongodb-js/compass-components';
import { type ConnectionInfo } from '@mongodb-js/connection-info';
import { type Actions } from './constants';
import { type ItemSeparator } from '@mongodb-js/compass-components';
import { type NotConnectedConnectionStatus } from './tree-data';
import { ConnectButton } from './connect-button';
import type { Actions } from './constants';

export type NavigationItemActions = (ItemAction<Actions> | ItemSeparator)[];
export type NavigationItemAction = ItemAction<Actions> | ItemSeparator;
export type NavigationItemActions = NavigationItemAction[];
export type NullableNavigationItemActions = (NavigationItemAction | null)[];

function stripNullActions(
actions: NullableNavigationItemActions
): NavigationItemActions {
return actions.filter(
(action): action is Exclude<typeof action, null> => action !== null
);
}

export const commonConnectionItemActions = ({
connectionInfo,
}: {
connectionInfo: ConnectionInfo;
}): NavigationItemActions => {
}): NavigationItemAction[] => {
const isAtlas = !!connectionInfo.atlasMetadata;
const actions: (ItemAction<Actions> | ItemSeparator | null)[] = [
return stripNullActions([
isAtlas
? null
: {
Expand Down Expand Up @@ -58,11 +68,7 @@ export const commonConnectionItemActions = ({
icon: 'Trash',
variant: 'destructive',
},
];

return actions.filter((action): action is Exclude<typeof action, null> => {
return !!action;
});
]);
};

export const connectedConnectionItemActions = ({
Expand All @@ -86,7 +92,7 @@ export const connectedConnectionItemActions = ({
const connectionManagementActions = commonConnectionItemActions({
connectionInfo,
});
const actions: (ItemAction<Actions> | ItemSeparator | null)[] = [
return stripNullActions([
hasWriteActionsDisabled
? null
: {
Expand Down Expand Up @@ -130,11 +136,7 @@ export const connectedConnectionItemActions = ({
},
{ separator: true },
...connectionManagementActions,
];

return actions.filter((action): action is Exclude<typeof action, null> => {
return !!action;
});
]);
};

export const notConnectedConnectionItemActions = ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ import { ConnectionStatus } from '@mongodb-js/compass-connections/provider';
import { WithStatusMarker } from './with-status-marker';
import type { Actions } from './constants';

type NavigationActions = 'open-non-genuine-mongodb-modal' | 'open-csfle-modal';

const nonGenuineBtnStyles = css({
color: palette.yellow.dark2,
background: palette.yellow.light3,
Expand Down Expand Up @@ -214,7 +212,7 @@ export function NavigationItem({
return [];
}

const actions: ItemAction<NavigationActions>[] = [];
const actions: ItemAction<Actions>[] = [];
if (!item.isGenuineMongoDB) {
actions.push({
action: 'open-non-genuine-mongodb-modal',
Expand Down Expand Up @@ -272,14 +270,14 @@ export function NavigationItem({
actionProps={actionProps}
>
{!!connectionStaticActions.length && (
<ItemActionControls<NavigationActions>
<ItemActionControls
iconSize="xsmall"
actions={connectionStaticActions}
onAction={onAction}
// these are static buttons that we want visible always on the
// sidebar, not as menu item but as action group
collapseAfter={connectionStaticActions.length}
></ItemActionControls>
/>
)}
</NavigationBaseItem>
)}
Expand Down

0 comments on commit c5d25a8

Please sign in to comment.