[MAIN-IMP] Add job-focused proxy link dialog and fix dropdown stacking interactions

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "scheduler-ui-by-moda20",
+  "name": "type-scheduler-ui-by-moda20",
   "description": "The frontend for the scheduler backend",
   "private": false,
   "version": "0.0.0-pre-alpha",
@@ -24,19 +24,22 @@
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@melloware/react-logviewer": "^6.3.5",
     "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/primitive": "1.1.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-primitive": "2.1.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-slot": "^1.3.0",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.2",
@@ -47,6 +50,7 @@
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.13.18",
+    "@types/lodash-es": "^4.17.12",
     "ansi-colors": "^4.1.3",
     "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1",
@@ -58,6 +62,7 @@
     "fuse.js": "^7.4.0",
     "history": "^5.3.0",
     "js-cookie": "^3.0.5",
+    "lodash-es": "^4.18.1",
     "lucide": "^0.474.0",
     "lucide-react": "^0.453.0",
     "moment": "^2.30.1",

src/components/custom/DrawerMenuConfigurator.tsx

@@ -16,6 +16,7 @@ import { verifyUserConnection } from "@/utils/authUtils"
 import { ButtonWithTooltip } from "@/components/custom/general/ButtonWithTooltip"
 
 export default function DrawerMenuConfigurator() {
+  const [open, setOpen] = useState(false)
   useHotkeys(
     ["ctrl+l", "meta+l"],
     () => {
@@ -25,6 +26,7 @@ export default function DrawerMenuConfigurator() {
     },
     {
       preventDefault: true,
+      enabled: open,
     },
   )
 
@@ -69,6 +71,7 @@ export default function DrawerMenuConfigurator() {
     {
       enableOnFormTags: true,
       enableOnContentEditable: true,
+      enabled: open,
     },
   )
 
@@ -88,6 +91,7 @@ export default function DrawerMenuConfigurator() {
       side={"right"}
       title={"Configuration"}
       description={"Update server configuration"}
+      onOpenChange={setOpen}
       trigger={
         <Button
           variant={"outline"}

src/components/custom/ManagedSelect.tsx

@@ -7,9 +7,18 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import useDialogueManager from "@/hooks/useDialogManager"
-import { useEffect, useState } from "react"
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ElementRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react"
 import { safeStringCast } from "@/utils/generalUtils"
 import { cn } from "@/lib/utils"
+import { useHotkeys } from "react-hotkeys-hook"
 
 export type ManagedSelectInputValue = {
   value?: string | boolean
@@ -32,11 +41,34 @@ export interface ManagedSelectProps {
   itemClassName?: string
 }
 
-export default function ManagedSelect(props: ManagedSelectProps) {
+const ManagedSelect = forwardRef<
+  ElementRef<typeof SelectTrigger>,
+  ManagedSelectProps
+>((props, ref) => {
   const { isDialogOpen, setDialogState } = useDialogueManager()
   const [parsedInputs, setParsedInputs] = useState<
     Array<ParsedManagedSelectInputValue>
   >([])
+  const innerRef = useRef<HTMLButtonElement>(null)
+  useImperativeHandle(ref, () => innerRef.current)
+  const hotkeyRef = useHotkeys(
+    ["enter"],
+    () => {
+      handleDialogState(!isDialogOpen)
+    },
+    {
+      ignoreModifiers: false,
+      preventDefault: true,
+    },
+  )
+
+  const refCallback = useCallback(
+    (elem: HTMLButtonElement) => {
+      innerRef.current = elem
+      hotkeyRef(elem)
+    },
+    [hotkeyRef],
+  )
 
   useEffect(() => {
     setParsedInputs(
@@ -49,24 +81,43 @@ export default function ManagedSelect(props: ManagedSelectProps) {
     )
   }, [props.inputOptions])
 
+  const handleDialogState = useCallback(
+    (open: boolean) => {
+      if (open) {
+        if (!props.disabled) {
+          setDialogState(true)
+        }
+      } else {
+        setDialogState(false)
+      }
+    },
+    [props.disabled, setDialogState],
+  )
+
   return (
     <Select
       open={isDialogOpen}
-      onOpenChange={v => setDialogState(v)}
+      onOpenChange={v => handleDialogState(v)}
       onValueChange={v => {
         const targetValue = props.inputOptions.find(
           e => safeStringCast(e.value) === v,
         )
         props.onChange(props.exportOnlyValue ? targetValue?.value : targetValue)
-        setDialogState(false)
+        handleDialogState(false)
       }}
       defaultValue={safeStringCast(props.defaultValue)}
       disabled={props.disabled}
     >
       <SelectTrigger
+        ref={refCallback}
+        onKeyDownCapture={e => {
+          if (e.key === "Enter") {
+            e.preventDefault()
+          }
+        }}
         onClick={v => {
           v.preventDefault()
-          setDialogState(true)
+          handleDialogState(true)
         }}
         className={cn(props.className)}
       >
@@ -91,4 +142,8 @@ export default function ManagedSelect(props: ManagedSelectProps) {
       </SelectContent>
     </Select>
   )
-}
+})
+
+ManagedSelect.displayName = "ManagedSelect"
+
+export default ManagedSelect

src/components/custom/SearchBar.tsx

@@ -29,14 +29,15 @@ import {
 } from "@/app/reducers/uiReducer"
 import { useNavigate } from "react-router"
 import { useAppDispatch, useAppSelector } from "@/app/hooks"
+import { cn } from "@/lib/utils"
 
 export interface SearchBarProps {
   trigger?: ReactNode
 }
 
 export default function SearchBar({ trigger }: SearchBarProps) {
   const inputRef = useRef<HTMLInputElement>(null)
-  const { isDialogOpen, setDialogState } = useDialogueManager()
+  const { isDialogOpen, setDialogState, isTopOfTheStack } = useDialogueManager()
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
   const routesList = useAppSelector(routes)
@@ -248,7 +249,12 @@ export default function SearchBar({ trigger }: SearchBarProps) {
                 inputGroup="commandActions"
                 modal={true}
               >
-                <CommandItem asChild className="rounded">
+                <CommandItem
+                  asChild
+                  className={cn("rounded", {
+                    "pointer-events-none": !isTopOfTheStack,
+                  })}
+                >
                   <div className="flex items-center justify-between">
                     <div className="flex flex-col gap-1">
                       <span>{job.name}</span>

src/components/custom/jobsTable/actionDropdown.tsx

@@ -17,6 +17,7 @@ import {
   EllipsisVertical,
   EyeIcon,
   FileSliders,
+  LinkIcon,
   LogsIcon,
   Settings,
   Trash2Icon,
@@ -42,6 +43,11 @@ import { JobExecutionDialog } from "@/components/job-execution-dialog"
 import DrawerJobEvents from "@/components/custom/DrawerJobEvents"
 import DrawerFilePreview from "@/components/custom/DrawerFilePreview"
 import JobEventNotificationsDrawer from "@/components/custom/jobsTable/JobEvents/JobEventNotificationsDrawer"
+import { JobProxyLinkDialog } from "@/components/custom/system/JobProxyLinkDialog"
+import { cn } from "@/lib/utils"
+import { set, unset } from "lodash-es"
+import { safeJsonParse } from "@/utils/generalUtils"
+import { toast } from "@/hooks/use-toast"
 
 export interface ActionDropdownProps {
   columnsProps: tableColumnsProps
@@ -167,6 +173,29 @@ export default function ActionDropdown({
     return columnsProps.takeAction(row, jobActions.REFRESH)
   }, [row])
 
+  const updateProxyStrategy = useCallback(
+    (newStrategy?: string, specificProxyId?: string) => {
+      const { data: oldParam, error } = safeJsonParse(row.param || "{}")
+      if (error) {
+        toast({
+          title: "Failed to parse Job params. this is a JSON parsing issue.",
+          description: oldParam?.toString(),
+          variant: "destructive",
+        })
+      }
+      set(oldParam, "proxyConfig.proxyStrategy", newStrategy)
+      if (specificProxyId) {
+        set(oldParam, "proxyConfig.targetProxyId", specificProxyId)
+      } else {
+        unset(oldParam, "proxyConfig.targetProxyId")
+      }
+      return columnsProps.takeAction(row, jobActions.UPDATE, {
+        param: JSON.stringify(oldParam),
+      })
+    },
+    [row],
+  )
+
   const eventHandlers = useMemo(() => {
     try {
       const params = JSON.parse(row.param || "{}")
@@ -194,7 +223,10 @@ export default function ActionDropdown({
         )}
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        className="bg-background w-auto"
+        tabIndex={!isTopOfTheStack ? -1 : 0}
+        className={cn("bg-background w-auto", {
+          "pointer-events-none": !isTopOfTheStack,
+        })}
         onEscapeKeyDown={handleEscapeDirectTrigger}
         {...dropdownContentProps}
       >
@@ -271,7 +303,7 @@ export default function ActionDropdown({
             >
               <DockIcon />
               <span>Custom run</span>
-              <DropdownMenuShortcut>⌘+⇧+E</DropdownMenuShortcut>
+              <DropdownMenuShortcut>⌘⇧E</DropdownMenuShortcut>
             </DropdownMenuItemExtended>
           </JobExecutionDialog>
           <DropdownMenuItemExtended
@@ -323,6 +355,22 @@ export default function ActionDropdown({
             modal={modal}
           />
         </DropdownMenuGroup>
+        <DropdownMenuGroup>
+          <JobProxyLinkDialog
+            jobDetails={row}
+            onProxyStrategyChange={updateProxyStrategy}
+          >
+            <DropdownMenuItemExtended
+              keyBinding="meta+shift+p"
+              onSelect={handleEventPrevention}
+              disabled={!isTopOfTheStack}
+            >
+              <LinkIcon />
+              <span>Linked Proxies</span>
+              <DropdownMenuShortcut>⌘⇧P</DropdownMenuShortcut>
+            </DropdownMenuItemExtended>
+          </JobProxyLinkDialog>
+        </DropdownMenuGroup>
         <DropdownMenuGroup>
           <DrawerLokiLogs
             jobName={row.name}