feat: switch ui tile run menu to split action dropdown

No added functionality here, but paving the way for alternate run actions besides Run Once (what we had before as the default behavior of the run icon button).

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/masonry/MasonryTile.tsx

@@ -1,7 +1,6 @@
-import { useCallback, useMemo } from "react"
+import { useMemo } from "react"
 
 import {
-  Button,
   CardHeader,
   CardTitle,
   DescriptionList,
@@ -14,6 +13,7 @@ import {
 } from "@patternfly/react-core"
 
 import Result from "../Result"
+import RunMenu from "./RunMenu"
 import Duration from "./Duration"
 import MasonryTileWrapper from "./MasonryTileWrapper"
 import BreadcrumbBarForBlockId from "../breadcrumbs/BreadcrumbBarForBlockId"
@@ -28,8 +28,6 @@ const gapSm = { default: "gapSm" as const }
 const nowrap = { default: "nowrap" as const }
 const center = { default: "alignItemsCenter" as const }
 
-import RunIcon from "@patternfly/react-icons/dist/esm/icons/redo-icon"
-
 export default function MasonryTile({
   sml,
   id,
@@ -48,12 +46,6 @@ export default function MasonryTile({
   block,
   run,
 }: Props) {
-  const myRun = useCallback(() => {
-    if (block && run) {
-      run(block)
-    }
-  }, [block, run])
-
   const actions = useMemo(
     () => ({
       actions: (
@@ -68,22 +60,15 @@ export default function MasonryTile({
           )}
           {tileActions.map((action) =>
             action === "run" ? (
-              <Button
-                key={action}
-                icon={<RunIcon />}
-                variant="plain"
-                size="sm"
-                isDisabled={!window.__TAURI_INTERNALS__}
-                onClick={myRun}
-              />
+              <RunMenu key="run" run={run} block={block} />
             ) : (
               <></>
             ),
           )}
         </>
       ),
     }),
-    [tileActions, myRun, start_nanos, end_nanos, timezone, sml],
+    [tileActions, run, block, start_nanos, end_nanos, timezone, sml],
   )
 
   const maxHeight =

pdl-live-react/src/view/masonry/RunMenu.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useMemo, useState } from "react"
+import {
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleAction,
+} from "@patternfly/react-core"
+
+import RunIcon from "@patternfly/react-icons/dist/esm/icons/redo-icon"
+
+type Props = Pick<import("./Tile").default, "block"> & {
+  run: import("./MasonryCombo").Runner
+}
+
+/**
+ * The Run split action dropdown placed in the upper right of each
+ * MasonryTile.
+ */
+export default function RunMenu({ block, run }: Props) {
+  const runOnce = useCallback(() => {
+    if (block && run) {
+      run(block)
+    }
+  }, [block, run])
+
+  const [isRunOpen, setIsRunOpen] = useState(false)
+  const onRunToggle = useCallback(
+    () => setIsRunOpen((open) => !open),
+    [setIsRunOpen],
+  )
+
+  const splitButtonItems = useMemo(
+    () => [
+      <MenuToggleAction
+        key="split-action-run"
+        aria-label="Run"
+        onClick={runOnce}
+      >
+        <RunIcon />
+      </MenuToggleAction>,
+    ],
+    [runOnce],
+  )
+
+  return (
+    <Dropdown
+      isOpen={isRunOpen}
+      onSelect={onRunToggle}
+      onOpenChange={setIsRunOpen}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          size="sm"
+          ref={toggleRef}
+          onClick={onRunToggle}
+          isExpanded={isRunOpen}
+          isDisabled={!window.__TAURI_INTERNALS__}
+          splitButtonItems={splitButtonItems}
+        />
+      )}
+    >
+      <DropdownList>
+        <DropdownItem
+          icon={<RunIcon />}
+          description="Run this block once"
+          onClick={runOnce}
+        >
+          Run Once
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  )
+}