Clean up "Actions" generic types

Author: kraenhansen

packages/compass-components/src/components/actions/dropdown-menu-button.tsx

@@ -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} />}

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');

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)}
           />
         );
 

packages/compass-components/src/components/actions/item-action-menu.tsx

@@ -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} />}

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;
 }

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>

packages/compass-connections-navigation/src/connect-button.tsx

@@ -3,8 +3,9 @@ import {
   Button,
   type ItemComponentProps,
 } from '@mongodb-js/compass-components';
+import type { Actions } from './constants';
 
-type ConnectButtonProps = ItemComponentProps<string>;
+type ConnectButtonProps = ItemComponentProps<Actions>;
 
 export function ConnectButton({
   action,

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 = ({

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>
       )}