diff --git a/packages/compass-components/src/components/actions/dropdown-menu-button.tsx b/packages/compass-components/src/components/actions/dropdown-menu-button.tsx index 05ce4f9201a..cec039fc151 100644 --- a/packages/compass-components/src/components/actions/dropdown-menu-button.tsx +++ b/packages/compass-components/src/components/actions/dropdown-menu-button.tsx @@ -117,7 +117,7 @@ export function DropdownMenuButton({ (dataTestId, action)} + data-testid={actionTestId(dataTestId, action)} data-action={action} data-menuitem={true} glyph={} diff --git a/packages/compass-components/src/components/actions/item-action-button.tsx b/packages/compass-components/src/components/actions/item-action-button.tsx index 8ed0b098037..aa4c12c9d94 100644 --- a/packages/compass-components/src/components/actions/item-action-button.tsx +++ b/packages/compass-components/src/components/actions/item-action-button.tsx @@ -5,7 +5,7 @@ import { ItemActionButtonSize } from './constants'; import type { ItemComponentProps } from './types'; import { SmallIconButton } from './small-icon-button'; -export function ItemActionButton({ +export function ItemActionButton({ action, icon = <>, label, @@ -17,7 +17,7 @@ export function ItemActionButton({ iconStyle, isDisabled, 'data-testid': dataTestId, -}: ItemComponentProps) { +}: ItemComponentProps) { return ( {}} data-testid="test-actions" - > + /> ); expect(screen.queryByTestId('test-actions')).to.not.exist; @@ -32,7 +32,7 @@ describe('item action controls components', function () { actions={[{ action: 'copy', label: 'Copy', icon: 'Copy' }]} onAction={() => {}} data-testid="test-actions" - > + /> ); expect(screen.getByTestId('test-actions')).to.exist; @@ -47,7 +47,7 @@ describe('item action controls components', function () { onAction={() => {}} data-testid="test-actions" collapseToMenuThreshold={1} - > + /> ); const trigger = screen.getByTestId('test-actions-show-actions'); @@ -69,7 +69,7 @@ describe('item action controls components', function () { onAction={onAction} data-testid="test-actions" collapseToMenuThreshold={3} - > + /> ); expect(onAction).not.to.be.called; @@ -90,7 +90,7 @@ describe('item action controls components', function () { onAction={onAction} data-testid="test-actions" collapseToMenuThreshold={1} - > + /> ); expect(onAction).not.to.be.called; @@ -112,7 +112,7 @@ describe('item action controls components', function () { onAction={() => {}} data-testid="test-actions" collapseAfter={1} - > + /> ); expect(screen.queryByTestId('test-actions-connect-action')).to.exist; @@ -146,7 +146,7 @@ describe('item action controls components', function () { onAction={() => {}} data-testid="test-actions" collapseAfter={1} - > + /> ); const actionButton = screen.getByTestId('test-actions-connect-action'); diff --git a/packages/compass-components/src/components/actions/item-action-controls.tsx b/packages/compass-components/src/components/actions/item-action-controls.tsx index 54a0b0322e2..2deeb2f88d1 100644 --- a/packages/compass-components/src/components/actions/item-action-controls.tsx +++ b/packages/compass-components/src/components/actions/item-action-controls.tsx @@ -33,7 +33,7 @@ export type ItemActionControlsProps = { 'data-testid'?: string; }; -export function ItemActionControls({ +export function ItemActionControls({ isVisible = true, actions, onAction, diff --git a/packages/compass-components/src/components/actions/item-action-group.tsx b/packages/compass-components/src/components/actions/item-action-group.tsx index 87fc048c1ff..83a86acc2e2 100644 --- a/packages/compass-components/src/components/actions/item-action-group.tsx +++ b/packages/compass-components/src/components/actions/item-action-group.tsx @@ -83,7 +83,7 @@ export function ItemActionGroup({ iconStyle={iconStyle} iconClassName={iconClassName} onClick={onClick} - data-testid={actionTestId(dataTestId, itemProps.action)} + data-testid={actionTestId(dataTestId, itemProps.action)} /> ); diff --git a/packages/compass-components/src/components/actions/item-action-menu.tsx b/packages/compass-components/src/components/actions/item-action-menu.tsx index 1717368438b..205f41536a8 100644 --- a/packages/compass-components/src/components/actions/item-action-menu.tsx +++ b/packages/compass-components/src/components/actions/item-action-menu.tsx @@ -141,7 +141,7 @@ export function ItemActionMenu({ return ( (dataTestId, action)} + data-testid={actionTestId(dataTestId, action)} data-action={action} data-menuitem={true} glyph={} diff --git a/packages/compass-components/src/components/actions/types.ts b/packages/compass-components/src/components/actions/types.ts index c7d36a07b09..dde2eca9196 100644 --- a/packages/compass-components/src/components/actions/types.ts +++ b/packages/compass-components/src/components/actions/types.ts @@ -2,7 +2,7 @@ import type { glyphs } from '@leafygreen-ui/icon'; import type { ItemActionButtonSize } from './constants'; -export type ItemBase = { +export type ItemBase = { action: Action; label: string; icon?: React.ReactChild; @@ -18,7 +18,7 @@ export type ItemBase = { expandedAs?: React.ComponentType>; }; -export type ItemComponentProps = Omit< +export type ItemComponentProps = Omit< ItemBase, 'expandedAs' > & { @@ -30,7 +30,7 @@ export type ItemComponentProps = Omit< onClick(evt: React.MouseEvent): void; }; -export type ItemAction = { +export type ItemAction = { icon: keyof typeof glyphs | React.ReactElement; } & ItemBase; diff --git a/packages/compass-components/src/components/actions/utils.ts b/packages/compass-components/src/components/actions/utils.ts index 41bee0247a3..4a02d70183f 100644 --- a/packages/compass-components/src/components/actions/utils.ts +++ b/packages/compass-components/src/components/actions/utils.ts @@ -1,6 +1,3 @@ -export function actionTestId( - dataTestId: string | undefined, - action: Action -) { +export function actionTestId(dataTestId: string | undefined, action: string) { return dataTestId ? `${dataTestId}-${action}-action` : undefined; } diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx index 8ad07bb1bb4..0b39b0ca02b 100644 --- a/packages/compass-connections-navigation/src/base-navigation-item.tsx +++ b/packages/compass-connections-navigation/src/base-navigation-item.tsx @@ -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'; @@ -128,13 +128,13 @@ export const NavigationBaseItem: React.FC = ({ {name}
- + + /> {children}
diff --git a/packages/compass-connections-navigation/src/item-actions.ts b/packages/compass-connections-navigation/src/item-actions.ts index e78a7d4055a..9e4f58c5b19 100644 --- a/packages/compass-connections-navigation/src/item-actions.ts +++ b/packages/compass-connections-navigation/src/item-actions.ts @@ -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 | ItemSeparator)[]; +export type NavigationItemAction = ItemAction | ItemSeparator; +export type NavigationItemActions = NavigationItemAction[]; +export type NullableNavigationItemActions = (NavigationItemAction | null)[]; + +function stripNullActions( + actions: NullableNavigationItemActions +): NavigationItemActions { + return actions.filter( + (action): action is Exclude => action !== null + ); +} export const commonConnectionItemActions = ({ connectionInfo, }: { connectionInfo: ConnectionInfo; -}): NavigationItemActions => { +}): NavigationItemAction[] => { const isAtlas = !!connectionInfo.atlasMetadata; - const actions: (ItemAction | ItemSeparator | null)[] = [ + return stripNullActions([ isAtlas ? null : { @@ -58,11 +68,7 @@ export const commonConnectionItemActions = ({ icon: 'Trash', variant: 'destructive', }, - ]; - - return actions.filter((action): action is Exclude => { - return !!action; - }); + ]); }; export const connectedConnectionItemActions = ({ @@ -86,7 +92,7 @@ export const connectedConnectionItemActions = ({ const connectionManagementActions = commonConnectionItemActions({ connectionInfo, }); - const actions: (ItemAction | ItemSeparator | null)[] = [ + return stripNullActions([ hasWriteActionsDisabled ? null : { @@ -130,11 +136,7 @@ export const connectedConnectionItemActions = ({ }, { separator: true }, ...connectionManagementActions, - ]; - - return actions.filter((action): action is Exclude => { - return !!action; - }); + ]); }; export const notConnectedConnectionItemActions = ({ diff --git a/packages/compass-connections-navigation/src/navigation-item.tsx b/packages/compass-connections-navigation/src/navigation-item.tsx index 4f97b8ac321..932407b2109 100644 --- a/packages/compass-connections-navigation/src/navigation-item.tsx +++ b/packages/compass-connections-navigation/src/navigation-item.tsx @@ -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, @@ -214,7 +212,7 @@ export function NavigationItem({ return []; } - const actions: ItemAction[] = []; + const actions: ItemAction[] = []; if (!item.isGenuineMongoDB) { actions.push({ action: 'open-non-genuine-mongodb-modal', @@ -272,14 +270,14 @@ export function NavigationItem({ actionProps={actionProps} > {!!connectionStaticActions.length && ( - + + /> )} )}