Reenable most dashboard linters (#262)

Author: jamescmartinez

eslint.config.js

@@ -30,6 +30,7 @@ export default defineConfig(
       "prettier.config.js",
       "examples/workflow-discovery/openworkflow.config.js",
       "packages/dashboard/.output",
+      "packages/dashboard/src/routeTree.gen.ts",
     ],
   },
   {
@@ -136,52 +137,31 @@ export default defineConfig(
   },
   {
     files: ["packages/dashboard/**/*.{ts,tsx,js,jsx}"],
-    // massive, but temporary, will need to come back and enable these a few at
-    // a time
     rules: {
-      "@cspell/spellchecker": "off",
-      "@typescript-eslint/array-type": "off",
-      "@typescript-eslint/consistent-type-definitions": "off",
-      "@typescript-eslint/explicit-function-return-type": "off",
-      "@typescript-eslint/no-confusing-void-expression": "off",
-      "@typescript-eslint/no-deprecated": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-floating-promises": "off",
-      "@typescript-eslint/no-unnecessary-boolean-literal-compare": "off",
-      "@typescript-eslint/no-unnecessary-condition": "off",
-      "@typescript-eslint/no-unsafe-assignment": "off",
-      "@typescript-eslint/no-unsafe-member-access": "off",
-      "@typescript-eslint/no-unsafe-return": "off",
-      "@typescript-eslint/no-unused-vars": "off",
-      "@typescript-eslint/prefer-nullish-coalescing": "off",
-      "@typescript-eslint/restrict-template-expressions": "off",
-      "@typescript-eslint/unified-signatures": "off",
-      "func-style": "off",
-      "functional/prefer-property-signatures": "off",
-      "import/no-cycle": "off",
-      "import/no-extraneous-dependencies": "off",
       "import/no-relative-parent-imports": "off",
-      "import/no-unresolved": "off",
-      "import/no-useless-path-segments": "off",
-      "import/order": "off",
-      "jsdoc/check-indentation": "off",
       "jsdoc/require-jsdoc": "off",
-      "jsdoc/require-throws": "off",
-      "jsdoc/sort-tags": "off",
-      "no-unused-vars": "off",
-      "no-void": "off",
-      "sonarjs/cognitive-complexity": "off",
-      "sonarjs/deprecation": "off",
-      "sonarjs/function-return-type": "off",
-      "sonarjs/no-nested-conditional": "off",
       "sonarjs/prefer-read-only-props": "off",
-      "sonarjs/pseudo-random": "off",
-      "sonarjs/unused-import": "off",
+    },
+  },
+  {
+    files: [
+      "packages/dashboard/**/*.test.ts",
+      "packages/dashboard/**/*.test.tsx",
+    ],
+    rules: {
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: true,
+          packageDir: [".", "packages/dashboard"],
+        },
+      ],
+    },
+  },
+  {
+    files: ["packages/dashboard/src/routes/runs/$runId.tsx"],
+    rules: {
       "unicorn/filename-case": "off",
-      "unicorn/no-abusive-eslint-disable": "off",
-      "unicorn/no-null": "off",
-      "unicorn/prevent-abbreviations": "off",
-      "unicorn/text-encoding-identifier-case": "off",
     },
   },
 );

packages/dashboard/src/components/mode-switcher.tsx

@@ -9,9 +9,9 @@ import {
 export function ModeSwitcher() {
   const { setTheme, theme } = useTheme();
 
-  const toggleTheme = () => {
+  function toggleTheme() {
     setTheme(theme === "dark" ? "light" : "dark");
-  };
+  }
 
   return (
     <Tooltip>

packages/dashboard/src/components/providers/theme-provider.tsx

@@ -4,23 +4,28 @@ import { useRouter } from "@tanstack/react-router";
 import type { PropsWithChildren } from "react";
 import { createContext, use } from "react";
 
-type ThemeContextVal = { theme: Theme; setTheme: (val: Theme) => void };
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
 type Props = PropsWithChildren<{ theme: Theme }>;
 
-const ThemeContext = createContext<ThemeContextVal | null>(null);
+const ThemeContext = createContext<ThemeContextValue | null>(null);
 
 export function ThemeProvider({ children, theme }: Props) {
   const router = useRouter();
 
-  function setTheme(val: Theme) {
-    setThemeServerFn({ data: val }).then(() => router.invalidate());
+  function setTheme(theme: Theme) {
+    void setThemeServerFn({ data: theme }).then(() => router.invalidate());
   }
 
   return <ThemeContext value={{ theme, setTheme }}>{children}</ThemeContext>;
 }
 
 export function useTheme() {
-  const val = use(ThemeContext);
-  if (!val) throw new Error("useTheme called outside of ThemeProvider!");
-  return val;
+  const themeContext = use(ThemeContext);
+  if (!themeContext)
+    throw new Error("useTheme called outside of ThemeProvider!");
+  return themeContext;
 }

packages/dashboard/src/components/run-list.tsx

@@ -2,7 +2,7 @@ import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
 import { STATUS_CONFIG } from "@/lib/status";
 import { computeDuration, formatRelativeTime } from "@/utils";
-import { CaretRight } from "@phosphor-icons/react";
+import { CaretRightIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import type { WorkflowRun } from "openworkflow/internal";
 
@@ -78,20 +78,7 @@ export function RunList({ runs, title = "Workflow Runs" }: RunListProps) {
                       <div className="text-muted-foreground flex items-center gap-4 text-xs">
                         <Badge
                           variant="outline"
-                          className={`border-border text-xs capitalize ${
-                            run.status === "completed" ||
-                            run.status === "succeeded"
-                              ? "border-green-500/20 bg-green-500/10 text-green-500"
-                              : run.status === "running"
-                                ? "border-blue-500/20 bg-blue-500/10 text-blue-500"
-                                : run.status === "failed"
-                                  ? "border-red-500/20 bg-red-500/10 text-red-500"
-                                  : run.status === "sleeping"
-                                    ? "border-purple-500/20 bg-purple-500/10 text-purple-500"
-                                    : run.status === "canceled"
-                                      ? "border-gray-500/20 bg-gray-500/10 text-gray-500"
-                                      : "border-yellow-500/20 bg-yellow-500/10 text-yellow-500"
-                          }`}
+                          className={`text-xs capitalize ${config.badgeClass}`}
                         >
                           {config.label}
                         </Badge>
@@ -111,7 +98,7 @@ export function RunList({ runs, title = "Workflow Runs" }: RunListProps) {
                     </div>
                   </div>
 
-                  <CaretRight className="text-muted-foreground ml-4 size-5" />
+                  <CaretRightIcon className="text-muted-foreground ml-4 size-5" />
                 </div>
               </Link>
             );

packages/dashboard/src/components/ui/field.tsx

@@ -176,8 +176,9 @@ function FieldError({
   errors,
   ...props
 }: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>;
+  errors?: ({ message?: string } | undefined)[];
 }) {
+  // eslint-disable-next-line sonarjs/function-return-type
   const content = useMemo(() => {
     if (children) {
       return children;
@@ -191,7 +192,7 @@ function FieldError({
       ...new Map(errors.map((error) => [error?.message, error])).values(),
     ];
 
-    if (uniqueErrors?.length == 1) {
+    if (uniqueErrors.length == 1) {
       return uniqueErrors[0]?.message;
     }
 

packages/dashboard/src/components/ui/slider.tsx

@@ -12,9 +12,11 @@ function Slider({
 }: SliderPrimitive.Root.Props) {
   const _values = React.useMemo(
     () =>
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
       Array.isArray(value)
         ? value
-        : Array.isArray(defaultValue)
+        : // eslint-disable-next-line sonarjs/no-nested-conditional
+          Array.isArray(defaultValue)
           ? defaultValue
           : [min, max],
     [value, defaultValue, min, max],

packages/dashboard/src/components/workflow-stats.tsx

@@ -1,10 +1,10 @@
 import { Card } from "@/components/ui/card";
 import {
-  CheckCircle,
-  Clock,
-  Hourglass,
-  Pulse,
-  XCircle,
+  CheckCircleIcon,
+  ClockIcon,
+  HourglassIcon,
+  PulseIcon,
+  XCircleIcon,
 } from "@phosphor-icons/react";
 import type { WorkflowRun } from "openworkflow/internal";
 
@@ -28,22 +28,22 @@ export function WorkflowStats({ runs }: WorkflowStatsProps) {
     {
       label: "Total Runs",
       value: runs.length.toLocaleString(),
-      icon: Pulse,
+      icon: PulseIcon,
     },
     {
       label: "Completed",
       value: completed.toLocaleString(),
-      icon: CheckCircle,
+      icon: CheckCircleIcon,
     },
     {
       label: "Running",
       value: running.toLocaleString(),
-      icon: Clock,
+      icon: ClockIcon,
     },
     {
       label: "Failed",
       value: failed.toLocaleString(),
-      icon: XCircle,
+      icon: XCircleIcon,
     },
   ];
 
@@ -52,21 +52,21 @@ export function WorkflowStats({ runs }: WorkflowStatsProps) {
     additionalStats.push({
       label: "Sleeping",
       value: sleeping.toLocaleString(),
-      icon: Hourglass,
+      icon: HourglassIcon,
     });
   }
   if (pending > 0) {
     additionalStats.push({
       label: "Pending",
       value: pending.toLocaleString(),
-      icon: Clock,
+      icon: ClockIcon,
     });
   }
   if (canceled > 0) {
     additionalStats.push({
       label: "Canceled",
       value: canceled.toLocaleString(),
-      icon: XCircle,
+      icon: XCircleIcon,
     });
   }
 

packages/dashboard/src/lib/status.ts

@@ -1,10 +1,10 @@
 import {
-  CheckCircle,
-  CircleNotch,
-  Clock,
-  Hourglass,
-  Prohibit,
-  XCircle,
+  CheckCircleIcon,
+  CircleNotchIcon,
+  ClockIcon,
+  HourglassIcon,
+  ProhibitIcon,
+  XCircleIcon,
 } from "@phosphor-icons/react";
 import type {
   WorkflowRunStatus,
@@ -14,51 +14,51 @@ import type {
 export const STATUS_CONFIG: Record<
   WorkflowRunStatus,
   {
-    icon: typeof CheckCircle;
+    icon: typeof CheckCircleIcon;
     color: string;
     label: string;
     badgeClass: string;
   }
 > = {
   completed: {
-    icon: CheckCircle,
+    icon: CheckCircleIcon,
     color: "text-green-500",
     label: "Completed",
     badgeClass: "bg-green-500/10 text-green-500 border-green-500/20",
   },
   succeeded: {
-    icon: CheckCircle,
+    icon: CheckCircleIcon,
     color: "text-green-500",
     label: "Completed",
     badgeClass: "bg-green-500/10 text-green-500 border-green-500/20",
   },
   running: {
     // use the spinning notch for running states to match existing UI patterns
-    icon: CircleNotch,
+    icon: CircleNotchIcon,
     color: "text-blue-500",
     label: "Running",
     badgeClass: "bg-blue-500/10 text-blue-500 border-blue-500/20",
   },
   failed: {
-    icon: XCircle,
+    icon: XCircleIcon,
     color: "text-red-500",
     label: "Failed",
     badgeClass: "bg-red-500/10 text-red-500 border-red-500/20",
   },
   pending: {
-    icon: Clock,
+    icon: ClockIcon,
     color: "text-yellow-500",
     label: "Pending",
     badgeClass: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
   },
   sleeping: {
-    icon: Hourglass,
+    icon: HourglassIcon,
     color: "text-purple-500",
     label: "Sleeping",
     badgeClass: "bg-purple-500/10 text-purple-500 border-purple-500/20",
   },
   canceled: {
-    icon: Prohibit,
+    icon: ProhibitIcon,
     color: "text-gray-500",
     label: "Canceled",
     badgeClass: "bg-gray-500/10 text-gray-500 border-gray-500/20",
@@ -67,7 +67,7 @@ export const STATUS_CONFIG: Record<
 
 export const STEP_STATUS_CONFIG: Record<
   StepAttemptStatus,
-  { icon: typeof CheckCircle; color: string }
+  { icon: typeof CheckCircleIcon; color: string }
 > = {
   completed: {
     icon: STATUS_CONFIG.completed.icon,
@@ -87,15 +87,22 @@ export const STEP_STATUS_CONFIG: Record<
   },
 };
 
+const fallbackStatusColor = "text-yellow-500";
+const fallbackStatusBadgeClass =
+  "bg-yellow-500/10 text-yellow-500 border-yellow-500/20";
+
+function getStatusConfig(status: string) {
+  if (!(status in STATUS_CONFIG)) {
+    return;
+  }
+
+  return STATUS_CONFIG[status as WorkflowRunStatus];
+}
+
 export function getStatusColor(status: string): string {
-  return (
-    (STATUS_CONFIG as Record<string, any>)[status]?.color ?? "text-yellow-500"
-  );
+  return getStatusConfig(status)?.color ?? fallbackStatusColor;
 }
 
 export function getStatusBadgeClass(status: string): string {
-  return (
-    (STATUS_CONFIG as Record<string, any>)[status]?.badgeClass ??
-    "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
-  );
+  return getStatusConfig(status)?.badgeClass ?? fallbackStatusBadgeClass;
 }

packages/dashboard/src/lib/theme.ts

@@ -7,9 +7,11 @@ export type T = z.infer<typeof postThemeValidator>;
 const storageKey = "_preferred-theme";
 
 export const getThemeServerFn = createServerFn().handler(
-  () => (getCookie(storageKey) || "light") as T,
+  () => (getCookie(storageKey) ?? "light") as T,
 );
 
 export const setThemeServerFn = createServerFn({ method: "POST" })
   .inputValidator(postThemeValidator)
-  .handler(({ data }) => setCookie(storageKey, data));
+  .handler(({ data }) => {
+    setCookie(storageKey, data);
+  });