refac: defer queries until the AssetActionMenu is actually opened

Author: SpencerWhitehead7

js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx

@@ -1,8 +1,9 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // eslint-disable-next-line no-restricted-imports
-import {Popover2, Popover2Props} from '@blueprintjs/popover2';
+import {
+  Popover as BlueprintPopover,
+  PopoverProps as BlueprintPopoverProps,
+} from '@blueprintjs/core';
 import deepmerge from 'deepmerge';
-import * as React from 'react';
 import {createGlobalStyle, css} from 'styled-components';
 
 import {Colors} from './Color';
@@ -105,13 +106,9 @@ export const GlobalPopoverStyle = createGlobalStyle`
 // Overwrite arrays instead of concatting them.
 const overwriteMerge = (destination: any[], source: any[]) => source;
 
-interface Props extends Popover2Props {
-  children: React.ReactNode;
-}
-
-export const Popover = (props: Props) => {
+export const Popover = (props: BlueprintPopoverProps) => {
   return (
-    <Popover2
+    <BlueprintPopover
       minimal
       autoFocus={false}
       enforceFocus={false}

js_modules/dagster-ui/packages/ui-core/src/assets/AssetActionMenu.tsx

@@ -3,6 +3,7 @@ import {
   HoverButton,
   Icon,
   Menu,
+  MenuDivider,
   MenuItem,
   Popover,
   Spinner,
@@ -24,6 +25,7 @@ import {showSharedToaster} from '../app/DomUtils';
 import {AssetKeyInput} from '../graphql/types';
 import {MenuLink} from '../ui/MenuLink';
 import {RepoAddress} from '../workspace/types';
+
 interface Props {
   path: string[];
   definition: AssetTableDefinitionFragment | null;
@@ -89,7 +91,6 @@ export const AssetActionMenu = memo((props: Props) => {
           <Menu>
             {executeItem}
             <AddToFavoritesMenuItem assetKey={{path}} />
-
             <MenuLink
               text="Show in group"
               to={
@@ -134,6 +135,7 @@ export const AssetActionMenu = memo((props: Props) => {
                   />
                 ))
               : undefined}
+            <MenuDivider />
             {wipe.dropdownOptions}
             {deletePartitions.dropdownOptions}
           </Menu>

js_modules/dagster-ui/packages/ui-core/src/assets/useAssetPermissions.tsx

@@ -51,16 +51,12 @@ export const useAssetPermissions = (assetKeys: AssetKeyInput[], locationName: st
     }
 
     // Permission is allowed only if ALL assets allow it
-    const hasMaterializePermission = assetNodes.every((node) => node.hasMaterializePermission);
-    const hasWipePermission = assetNodes.every((node) => node.hasWipePermission);
-    const hasReportRunlessAssetEventPermission = assetNodes.every(
-      (node) => node.hasReportRunlessAssetEventPermission,
-    );
-
     return {
-      hasMaterializePermission,
-      hasWipePermission,
-      hasReportRunlessAssetEventPermission,
+      hasMaterializePermission: assetNodes.every((node) => node.hasMaterializePermission),
+      hasWipePermission: assetNodes.every((node) => node.hasWipePermission),
+      hasReportRunlessAssetEventPermission: assetNodes.every(
+        (node) => node.hasReportRunlessAssetEventPermission,
+      ),
       loading,
     };
   }, [data, loading, locationLoading, fallbackPermissions, assetKeys]);

js_modules/dagster-ui/packages/ui-core/src/assets/useDeleteDynamicPartitionsDialog.tsx

@@ -1,13 +1,13 @@
 import {Colors, Icon, MenuItem} from '@dagster-io/ui-components';
-import {useContext, useState} from 'react';
+import {Dispatch, SetStateAction, useContext, useState} from 'react';
 
 import {DeleteDynamicPartitionsDialog} from './DeleteDynamicPartitionsDialog';
 import {useAssetPermissions} from './useAssetPermissions';
 import {CloudOSSContext} from '../app/CloudOSSContext';
 import {AssetKeyInput, PartitionDefinitionType} from '../graphql/types';
 import {RepoAddress} from '../workspace/types';
 
-export function useDeleteDynamicPartitionsDialog(
+export const useDeleteDynamicPartitionsDialog = (
   opts: {
     repoAddress: RepoAddress;
     assetKey: AssetKeyInput;
@@ -20,8 +20,8 @@ export function useDeleteDynamicPartitionsDialog(
     };
   } | null,
   refresh?: () => void,
-) {
-  const [showing, setShowing] = useState(false);
+) => {
+  const [isShowing, setIsShowing] = useState(false);
 
   const {
     featureContext: {canSeeWipeMaterializationAction},
@@ -31,19 +31,14 @@ export function useDeleteDynamicPartitionsDialog(
     (d) => d.type === PartitionDefinitionType.DYNAMIC,
   );
 
-  const {hasWipePermission} = useAssetPermissions(
-    opts?.assetKey ? [opts.assetKey] : [],
-    opts?.repoAddress.location || '',
-  );
-
   if (
     !opts ||
     !dynamicDimension?.dynamicPartitionsDefinitionName ||
     !canSeeWipeMaterializationAction
   ) {
     return {
       element: undefined,
-      dropdownOptions: [] as JSX.Element[],
+      dropdownOptions: [],
     };
   }
 
@@ -53,20 +48,44 @@ export function useDeleteDynamicPartitionsDialog(
         repoAddress={opts.repoAddress}
         assetKey={opts.assetKey}
         partitionsDefName={dynamicDimension.dynamicPartitionsDefinitionName}
-        isOpen={showing}
-        onClose={() => setShowing(false)}
+        isOpen={isShowing}
+        onClose={() => setIsShowing(false)}
         onComplete={refresh}
       />
     ),
     dropdownOptions: [
-      <MenuItem
+      <DeleteDynamicPartitionsMenuItem
         key="delete"
-        text="Delete partitions"
-        icon={<Icon name="delete" color={Colors.accentRed()} />}
-        disabled={!hasWipePermission}
-        intent="danger"
-        onClick={() => setShowing(true)}
+        setIsShowing={setIsShowing}
+        assetKeys={opts?.assetKey ? [opts.assetKey] : []}
+        locationName={opts?.repoAddress.location || ''}
       />,
     ],
   };
-}
+};
+
+type DeleteDynamicPartitionsMenuItemProps = {
+  assetKeys: AssetKeyInput[];
+  locationName: string;
+  setIsShowing: Dispatch<SetStateAction<boolean>>;
+};
+
+const DeleteDynamicPartitionsMenuItem = ({
+  assetKeys,
+  locationName,
+  setIsShowing,
+}: DeleteDynamicPartitionsMenuItemProps) => {
+  // this separate comp exists to defer this expensive query until
+  // the menuItem is rendered instead of when the hook is called
+  const {hasWipePermission} = useAssetPermissions(assetKeys, locationName);
+
+  return (
+    <MenuItem
+      text="Delete partitions"
+      icon={<Icon name="delete" color={Colors.accentRed()} />}
+      disabled={!hasWipePermission}
+      intent="danger"
+      onClick={() => setIsShowing(true)}
+    />
+  );
+};

js_modules/dagster-ui/packages/ui-core/src/assets/useWipeDialog.tsx

@@ -1,48 +1,62 @@
-import {Colors, Icon, MenuDivider, MenuItem} from '@dagster-io/ui-components';
-import {useContext, useState} from 'react';
+import {Colors, Icon, MenuItem} from '@dagster-io/ui-components';
+import {Dispatch, SetStateAction, useContext, useState} from 'react';
 import {AssetWipeDialog} from 'shared/assets/AssetWipeDialog.oss';
 
 import {useAssetPermissions} from './useAssetPermissions';
 import {CloudOSSContext} from '../app/CloudOSSContext';
 import {AssetKeyInput} from '../graphql/types';
 
-export function useWipeDialog(
+export const useWipeDialog = (
   opts: {assetKey: AssetKeyInput; repository: {location: {name: string}} | null} | null,
-  refresh?: () => void,
-) {
-  const [showing, setShowing] = useState(false);
+  refresh?: VoidFunction,
+) => {
+  const [isShowing, setIsShowing] = useState(false);
 
   const {
     featureContext: {canSeeWipeMaterializationAction},
   } = useContext(CloudOSSContext);
 
-  const {hasWipePermission} = useAssetPermissions(
-    opts?.assetKey ? [opts.assetKey] : [],
-    opts?.repository?.location.name || '',
-  );
-
   return {
     element: (
       <AssetWipeDialog
         assetKeys={opts ? [opts.assetKey] : []}
-        isOpen={showing}
-        onClose={() => setShowing(false)}
+        isOpen={isShowing}
+        onClose={() => setIsShowing(false)}
         onComplete={refresh}
       />
     ),
     dropdownOptions:
       opts && canSeeWipeMaterializationAction
         ? [
-            <MenuDivider key="wipe-divider" />,
-            <MenuItem
+            <WipeDialogMenuItem
               key="wipe"
-              text="Wipe materializations"
-              icon={<Icon name="delete" color={Colors.accentRed()} />}
-              disabled={!hasWipePermission}
-              intent="danger"
-              onClick={() => setShowing(true)}
+              setIsShowing={setIsShowing}
+              assetKeys={opts?.assetKey ? [opts.assetKey] : []}
+              locationName={opts?.repository?.location.name || ''}
             />,
           ]
         : [],
   };
-}
+};
+
+type WipeDialogMenuItemProps = {
+  assetKeys: AssetKeyInput[];
+  locationName: string;
+  setIsShowing: Dispatch<SetStateAction<boolean>>;
+};
+
+const WipeDialogMenuItem = ({assetKeys, locationName, setIsShowing}: WipeDialogMenuItemProps) => {
+  // this separate comp exists to defer this expensive query until
+  // the menuItem is rendered instead of when the hook is called
+  const {hasWipePermission} = useAssetPermissions(assetKeys, locationName);
+
+  return (
+    <MenuItem
+      text="Wipe materializationz"
+      icon={<Icon name="delete" color={Colors.accentRed()} />}
+      disabled={!hasWipePermission}
+      intent="danger"
+      onClick={() => setIsShowing(true)}
+    />
+  );
+};