refactor: review

Author: peppescg

src/components/SortableArea.tsx

@@ -7,43 +7,43 @@ import {
   UniqueIdentifier,
   useSensor,
   useSensors,
-} from "@dnd-kit/core";
+} from '@dnd-kit/core'
 import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { useSortable } from "@dnd-kit/sortable";
-import { Drag } from "./icons";
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { useSortable } from '@dnd-kit/sortable'
+import { Drag } from './icons'
 
 type Props<T> = {
-  children: (item: T, index: number) => React.ReactNode;
-  setItems: (items: T[]) => void;
-  items: T[];
-  disableDragByIndex?: number;
-};
+  children: (item: T, index: number) => React.ReactNode
+  setItems: (items: T[]) => void
+  items: T[]
+  disableDragByIndex?: number
+}
 
 function ItemWrapper({
   children,
   id,
-  disabledDrag,
+  hasDragDisabled,
 }: {
-  children: React.ReactNode;
-  id: UniqueIdentifier;
-  disabledDrag: boolean;
+  children: React.ReactNode
+  id: UniqueIdentifier
+  hasDragDisabled: boolean
 }) {
   const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id });
+    useSortable({ id })
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
-  };
+  }
 
   return (
-    <div style={style} className="flex items-center w-full">
-      {disabledDrag ? (
+    <div style={style} className="flex w-full items-center">
+      {hasDragDisabled ? (
         <div className="size-8" />
       ) : (
         <div ref={setNodeRef} {...attributes} {...listeners} className="size-8">
@@ -52,7 +52,7 @@ function ItemWrapper({
       )}
       <div className="grow">{children}</div>
     </div>
-  );
+  )
 }
 
 export function SortableArea<T extends { id: UniqueIdentifier }>({
@@ -65,21 +65,22 @@ export function SortableArea<T extends { id: UniqueIdentifier }>({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
+    })
+  )
 
   function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
+    const { active, over } = event
 
     if (over == null) {
-      return;
+      // The item was dropped in it's original place
+      return
     }
 
     if (active.id !== over.id) {
-      const oldIndex = items.findIndex(({ id }) => id === active.id);
-      const newIndex = items.findIndex(({ id }) => id === over.id);
+      const oldIndex = items.findIndex(({ id }) => id === active.id)
+      const newIndex = items.findIndex(({ id }) => id === over.id)
 
-      setItems(arrayMove(items, oldIndex, newIndex));
+      setItems(arrayMove(items, oldIndex, newIndex))
     }
   }
 
@@ -94,12 +95,12 @@ export function SortableArea<T extends { id: UniqueIdentifier }>({
           <ItemWrapper
             key={index}
             id={item.id}
-            disabledDrag={disableDragByIndex === index}
+            hasDragDisabled={disableDragByIndex === index}
           >
             {children(item, index)}
           </ItemWrapper>
         ))}
       </SortableContext>
     </DndContext>
-  );
+  )
 }

src/features/workspace/components/workspace-models-dropdown.tsx

@@ -14,6 +14,7 @@ import {
   OptionsSchema,
 } from '@stacklok/ui-kit'
 import { ChevronDown, SearchMd } from '@untitled-ui/icons-react'
+import { map, groupBy } from 'lodash'
 import { useState } from 'react'
 
 type Props = {
@@ -32,28 +33,14 @@ type Props = {
 function groupModelsByProviderName(
   models: ModelByProvider[]
 ): OptionsSchema<'listbox', string>[] {
-  return models.reduce<OptionsSchema<'listbox', string>[]>(
-    (groupedProviders, item) => {
-      const providerData = groupedProviders.find(
-        (group) => group.id === item.provider_name
-      )
-      if (!providerData) {
-        groupedProviders.push({
-          id: item.provider_name,
-          items: [],
-          textValue: item.provider_name,
-        })
-      }
-
-      ;(providerData?.items ?? []).push({
-        id: `${item.provider_id}/${item.name}`,
-        textValue: item.name,
-      })
-
-      return groupedProviders
-    },
-    []
-  )
+  return map(groupBy(models, 'provider_name'), (items, providerName) => ({
+    id: providerName,
+    textValue: providerName,
+    items: items.map((item) => ({
+      id: `${item.provider_id}/${item.name}`,
+      textValue: item.name,
+    })),
+  }))
 }
 
 function filterModels({
@@ -95,7 +82,7 @@ export function WorkspaceModelsDropdown({
     currentProvider && rule.model
       ? `${currentProvider?.provider_name}/${rule.model}`
       : ''
-  const selectedKey = `${rule.provider_id}_${rule.model}`
+  const selectedKey = `${rule.provider_id}/${rule.model}`
 
   return (
     <div className="flex w-full">

src/features/workspace/components/workspace-muxing-model.tsx

@@ -77,7 +77,7 @@ function SortableItem({
   isArchived,
   isDefaultRule,
 }: SortableItemProps) {
-  const placeholder = isDefaultRule ? 'Catch All' : 'eg file type, file name'
+  const placeholder = isDefaultRule ? 'Catch-all' : 'e.g. file type, file name'
   return (
     <div className="flex items-center gap-2" key={rule.id}>
       <div className="flex w-full justify-between">