Clean up "Actions" generic types

mongodb-js · Dec 11, 2024 · 1aaee2d · 1aaee2d
1 parent 94f3f17
commit 1aaee2d
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 43 deletions.
diff --git a/packages/compass-components/src/components/actions/dropdown-menu-button.tsx b/packages/compass-components/src/components/actions/dropdown-menu-button.tsx
@@ -116,7 +116,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} />}

diff --git 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<Action extends string>({
+export function ItemActionButton({
   action,
   icon = <></>,
   label,
@@ -17,7 +17,7 @@ export function ItemActionButton<Action extends string>({
   iconStyle,
   isDisabled,
   'data-testid': dataTestId,
-}: ItemComponentProps<Action>) {
+}: ItemComponentProps) {
   return (
     <SmallIconButton
       key={action}

diff --git a/packages/compass-components/src/components/actions/item-action-controls.spec.tsx b/packages/compass-components/src/components/actions/item-action-controls.spec.tsx
@@ -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;
@@ -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;
@@ -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');
@@ -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;
@@ -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;
@@ -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;
@@ -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');

diff --git a/packages/compass-components/src/components/actions/item-action-controls.tsx b/packages/compass-components/src/components/actions/item-action-controls.tsx
@@ -32,7 +32,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,

diff --git 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<Action extends string>({
             iconStyle={iconStyle}
             iconClassName={iconClassName}
             onClick={onClick}
-            data-testid={actionTestId<Action>(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
@@ -140,7 +140,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} />}

diff --git 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<Action extends string> = {
+export type ItemBase<Action extends string = string> = {
   action: Action;
   label: string;
   icon?: React.ReactChild;
@@ -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'
 > & {
@@ -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>;
 

diff --git 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<Action extends string>(
-  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
@@ -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<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>

diff --git 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<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
       : {
@@ -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 = ({
@@ -86,7 +92,7 @@ export const connectedConnectionItemActions = ({
   const connectionManagementActions = commonConnectionItemActions({
     connectionInfo,
   });
-  const actions: (ItemAction<Actions> | ItemSeparator | null)[] = [
+  return stripNullActions([
     hasWriteActionsDisabled
       ? null
       : {
@@ -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 = ({

diff --git 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<NavigationActions>[] = [];
+    const actions: ItemAction<Actions>[] = [];
     if (!item.isGenuineMongoDB) {
       actions.push({
         action: 'open-non-genuine-mongodb-modal',
@@ -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>
       )}