Refactor context input field to use Dropdown component for improved usability and update sticky note attachment selection

Author: stijnpotters1

src/main/frontend/app/components/inputs/dropdown.tsx

@@ -39,7 +39,8 @@ export default function Dropdown({
   }, [optionsArray, selectedValue])
 
   const getSelectedLabel = () => {
-    return selectedValue ? options[selectedValue] : placeholder
+    if (selectedValue !== undefined && selectedValue in options) return options[selectedValue]
+    return placeholder
   }
 
   const toggleDropdown = useCallback(() => {
@@ -179,7 +180,7 @@ export default function Dropdown({
         <div
           onClick={toggleDropdown}
           className={clsx(
-            'border-border bg-backdrop flex items-center justify-between rounded-md border px-3 py-2',
+            'border-border bg-backdrop flex items-center justify-between rounded-md border px-3 py-2 transition-colors',
             disabled ? 'cursor-not-allowed' : 'cursor-pointer',
             isOpen ? 'bg-selected' : 'hover:bg-hover',
           )}

src/main/frontend/app/components/inputs/segmented-button.tsx

@@ -14,10 +14,8 @@ export default function SegmentedButton({
   return (
     <button
       className={clsx(
-        'text-foreground cursor-pointer px-3 py-1 text-sm',
-        isActive
-          ? 'bg-selected font-medium'
-          : 'text-foreground-muted hover:bg-hover active:bg-selected',
+        'text-foreground cursor-pointer px-3 py-1 text-sm transition-colors',
+        isActive ? 'bg-selected font-medium' : 'text-foreground-muted hover:bg-hover active:bg-selected',
         className,
       )}
       {...properties}

src/main/frontend/app/routes/configurations/configuration-overview.tsx

@@ -177,12 +177,12 @@ export default function ConfigurationOverview() {
 
   return (
     <div className="bg-background flex h-full w-full flex-col p-6">
-      <div className="hover:bg-hover flex w-fit hover:cursor-pointer py-2 px-4 rounded" onClick={() => navigate('/')}>
+      <div className="hover:bg-hover flex w-fit rounded px-4 py-2 hover:cursor-pointer" onClick={() => navigate('/')}>
         <ArrowLeftIcon className="h-6 w-auto fill-current hover:cursor-pointer" />
         <p>Switch configuration</p>
       </div>
 
-      <h1 className="ml-2 text-2xl font-bold mt-4">Configuration Overview</h1>
+      <h1 className="mt-4 ml-2 text-2xl font-bold">Configuration Overview</h1>
       <div className="mb-4 flex items-center justify-between">
         <p className="ml-2">
           Configuration files within src/main/configurations/

src/main/frontend/app/routes/editor/editor.tsx

@@ -4,7 +4,6 @@ type ITextModel = Monaco['editor']['ITextModel']
 type FindMatch = Monaco['editor']['FindMatch']
 type IModelDeltaDecoration = Monaco['editor']['IModelDeltaDecoration']
 type IEditorDecorationsCollection = Monaco['editor']['IEditorDecorationsCollection']
-import clsx from 'clsx'
 import XsdFeatures from 'monaco-xsd-code-completion/esm/XsdFeatures'
 import 'monaco-xsd-code-completion/src/style.css'
 import XsdManager from 'monaco-xsd-code-completion/esm/XsdManager'

src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu-item.tsx

@@ -13,7 +13,7 @@ export default function HandleMenuItem({
 }: Readonly<HandleMenuItemProperties>) {
   return (
     <li
-      className={`hover:bg-border border-border flex h-10 cursor-pointer items-center justify-between p-2 ${
+      className={`hover:bg-hover border-border flex h-10 cursor-pointer items-center justify-between p-2 transition-colors ${
         isLast ? '' : 'border-b'
       }`}
       onClick={onClick}

src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu.tsx

@@ -57,14 +57,16 @@ export default function HandleMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="nodrag bg-background border-border absolute border shadow-md"
+      className="nodrag bg-background border-border absolute rounded border shadow-md"
       style={{
         left: `${position.x + 10}px`, // offset to the right of cursor
         top: `${position.y - 5}px`,
       }}
     >
       <div className="w-70">
-        <div className="border-border bg-muted h-10 border-b px-3 py-1 font-bold">{title}</div>
+        <div className="border-border text-foreground-muted flex h-10 items-center border-b px-3 py-1 text-xs font-semibold tracking-wide uppercase">
+          {title}
+        </div>
         <ul className="w-full">
           {handleTypes.map((type, index) => (
             <HandleMenuItem

src/main/frontend/app/routes/studio/context/context-input-field.tsx

@@ -1,5 +1,5 @@
-// ContextInputField.tsx
 import React from 'react'
+import Dropdown from '~/components/inputs/dropdown'
 import Toggle from '~/components/inputs/toggle'
 import ValidatedInput from '~/components/inputs/validatedInput'
 import Input from '~/components/inputs/input'
@@ -24,20 +24,14 @@ export default function ContextInputField({
   // Render enum dropdown
   if (enumOptions) {
     return (
-      <select
+      <Dropdown
         id={id}
         value={value}
-        onChange={(event) => onChange(event.currentTarget.value)}
-        onKeyDown={onKeyDown}
-        className="border-border bg-background focus:border-border focus:ring-border mt-1 w-full rounded-md border px-3 py-2 shadow-sm sm:text-sm"
-      >
-        <option value="">Select option…</option>
-        {Object.keys(enumOptions).map((optKey) => (
-          <option key={optKey} value={optKey}>
-            {optKey}
-          </option>
-        ))}
-      </select>
+        onChange={onChange}
+        options={Object.fromEntries(Object.keys(enumOptions).map((key) => [key, key]))}
+        placeholder="Select option…"
+        className="mt-1"
+      />
     )
   }
 

src/main/frontend/app/routes/studio/context/sticky-note-context.tsx

@@ -1,6 +1,7 @@
 import useFlowStore, { isFrankNode, isStickyNote } from '~/stores/flow-store'
 import { STICKY_NOTE_COLORS } from '~/routes/studio/canvas/nodetypes/sticky-note'
 import { useShallow } from 'zustand/react/shallow'
+import Dropdown from '~/components/inputs/dropdown'
 
 export default function StickyNoteContext({ nodeId }: Readonly<{ nodeId: string }>) {
   const node = useFlowStore((flowState) => flowState.nodes.find((node) => node.id === nodeId))
@@ -46,20 +47,14 @@ export default function StickyNoteContext({ nodeId }: Readonly<{ nodeId: string
 
       <div className="flex flex-col gap-1">
         <label className="text-foreground-muted text-xs font-semibold tracking-wide uppercase">Attach to node</label>
-        <select
+        <Dropdown
           value={attachedToNodeId ?? ''}
-          onChange={(changeEvent) =>
-            useFlowStore.getState().setStickyAttachment(nodeId, changeEvent.target.value || null)
-          }
-          className="border-border bg-background text-foreground focus:ring-ring w-full rounded border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
-        >
-          <option value="">None</option>
-          {frankNodes.map((node) => (
-            <option key={node.id} value={node.id}>
-              {node.data.name}
-            </option>
-          ))}
-        </select>
+          onChange={(value) => useFlowStore.getState().setStickyAttachment(nodeId, value || null)}
+          options={{
+            '': 'None',
+            ...Object.fromEntries(frankNodes.map((node) => [node.id, node.data.name])),
+          }}
+        />
       </div>
     </div>
   )