feat(ui): fix eslint config and add prettier

.github/workflows/ci.yaml

@@ -58,8 +58,8 @@ jobs:
         run: |
           git diff --exit-code ./manifests
 
-  lint:
-    name: Lint
+  lint-go:
+    name: Lint Go
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -73,5 +73,29 @@ jobs:
           version: v1.55
           args: --timeout=5m
 
+  lint-ts:
+    name: Lint TS
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Run install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install
+          dir: ui
+      - name: Run eslint
+        uses: borales/actions-yarn@v5
+        with:
+          cmd: lint
+          dir: ui
+      - name: Run prettier
+        uses: borales/actions-yarn@v5
+        with:
+          cmd: format-check
+          dir: ui
+
   build-and-push:
-    uses: ./.github/workflows/build-and-push.yaml
+    uses: ./.github/workflows/build-and-push.yaml

ui/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "semi": true,
+    "trailingComma": "none",
+    "singleQuote": true,
+    "printWidth": 80
+}

ui/eslint.config.mjs

@@ -0,0 +1,31 @@
+import reactPlugin from 'eslint-plugin-react';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import tseslint from 'typescript-eslint';
+import eslint from '@eslint/js';
+
+export default [
+  {
+    plugins: {
+      react: reactPlugin,
+    },
+    rules: {
+      ...reactPlugin.configs['jsx-runtime'].rules,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    plugins: {
+      'react-hooks': hooksPlugin,
+    },
+    rules: hooksPlugin.configs.recommended.rules,
+  },
+    eslint.configs.recommended,
+    ...tseslint.configs.recommended,
+  {
+    ignores: ['**/dist'],
+  },
+];

ui/package.json

@@ -6,8 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "lint": "eslint -c eslint.config.mjs ./src/**/*.{ts,tsx} --report-unused-disable-directives --max-warnings 0 .",
+    "preview": "vite preview",
+    "format": "prettier --config .prettierrc 'src/**/*.{ts,tsx}' --write",
+    "format-check": "prettier --config .prettierrc 'src/**/*.{ts,tsx}' --check"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.9",
@@ -22,18 +24,24 @@
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.1",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.13",
     "postcss": "^8.4.38",
+    "prettier": "3.3.3",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.3.3",
+    "typescript-eslint": "^8.11.0",
     "vite": "^5.4.9"
   }
 }

ui/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    autoprefixer: {}
+  }
+};

ui/src/App.tsx

@@ -1,50 +1,50 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   createBrowserRouter,
   RouterProvider,
-  Navigate,
-} from "react-router-dom";
+  Navigate
+} from 'react-router-dom';
 
-import ThemeProvider from "@/contexts/ThemeContext";
+import ThemeProvider from '@/contexts/ThemeContext';
 
-import Layout from "@/layout/Layout";
-import Layers from "@/pages/Layers";
-import Pulls from "@/pages/Pulls";
-import Logs from "@/pages/Logs";
-import Login from "@/pages/Login";
+import Layout from '@/layout/Layout';
+import Layers from '@/pages/Layers';
+import Pulls from '@/pages/Pulls';
+import Logs from '@/pages/Logs';
+import Login from '@/pages/Login';
 
 const queryClient = new QueryClient();
 const router = createBrowserRouter([
   {
-    path: "/",
+    path: '/',
     element: <Layout />,
     children: [
       {
         index: true,
-        element: <Navigate to="/layers" />,
+        element: <Navigate to="/layers" />
       },
       {
-        path: "layers",
-        element: <Layers />,
+        path: 'layers',
+        element: <Layers />
       },
       {
-        path: "pulls",
-        element: <Pulls />,
+        path: 'pulls',
+        element: <Pulls />
       },
       {
-        path: "logs/:namespace?/:layerId?/:runId?",
-        element: <Logs />,
-      },
-    ],
+        path: 'logs/:namespace?/:layerId?/:runId?',
+        element: <Logs />
+      }
+    ]
   },
   {
-    path: "/login",
-    element: <Login />,
+    path: '/login',
+    element: <Login />
   },
   {
-    path: "*",
-    element: <Navigate to="/" />,
-  },
+    path: '*',
+    element: <Navigate to="/" />
+  }
 ]);
 
 function App() {

ui/src/assets/avocado/AvocadoOff.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const AvocadoOff = (props: SVGProps<SVGSVGElement>) => (
   <svg

ui/src/assets/avocado/AvocadoOn.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const AvocadoOn = (props: SVGProps<SVGSVGElement>) => (
   <svg

ui/src/assets/avocado/AvocadoSeed.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const AvocadoSeed = (props: SVGProps<SVGSVGElement>) => (
   <svg

ui/src/assets/icons/AngleDownIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const AngleDownIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/AppsIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const AppsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/ArrowLeftIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const ArrowLeftIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/ArrowResizeDiagonalIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const ArrowResizeDiagonalIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/ArrowRightIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const ArrowRightIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/BarsIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const BarsIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/CheckIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/CodeBranchIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const CodeBranchIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/CopyIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const CopyIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/DownloadAltIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const DownloadAltIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/ExclamationTriangleIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const ExclamationTriangleIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/EyeIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const EyeIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/EyeSlashIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const EyeSlashIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/GithubIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/GitlabIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const GitlabIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg

ui/src/assets/icons/LayerGroupIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const LayerGroupIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/LoaderIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const LoaderIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/MinusIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const MinusIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/MultiplyIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const MultiplyIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/SearchIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const SearchIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/SyncIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const SyncIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/TimesIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const TimesIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/icons/WindowIcon.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const WindowIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg height={24} width={24} viewBox="0 0 24 24" {...props}>

ui/src/assets/illustrations/Burrito.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 
 const Burrito = (props: SVGProps<SVGSVGElement>) => (
   <svg