Merge pull request #367 from huwshimi/set-up-ci

WD-13742 - ci: set up CI for UI

.github/workflows/ui.yaml

@@ -0,0 +1,77 @@
+name: UI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+          cache-dependency-path: ui/yarn.lock
+      - name: Install
+        run: yarn --cwd ui install --immutable
+      - run: yarn --cwd ui lint-js
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+          cache-dependency-path: ui/yarn.lock
+      - name: Install
+        run: yarn --cwd ui install --immutable
+      - run: yarn --cwd ui test-js
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+          cache-dependency-path: ui/yarn.lock
+      - name: Install
+        run: yarn --cwd ui install --immutable
+      - run: yarn --cwd ui build
+  dotrun:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install dotrun
+        run: sudo pip3 install dotrun requests==2.31.0 # requests version is pinned to avoid breaking changes, can be removed once issue is resolved: https://github.com/docker/docker-py/issues/3256
+      - name: Install dependencies
+        run: |
+          cd ui
+          sudo chmod -R 777 .
+          dotrun install
+      - name: Build assets
+        run: cd ui && dotrun build
+      - name: Run dotrun
+        run: |
+          cd ui && dotrun &
+          curl --head --fail --retry-delay 1 --retry 30 --retry-connrefused http://localhost:3000

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "references": [{ "path": "./ui" }]
+}

ui/.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "react"],
+  plugins: ["@typescript-eslint", "react", "prettier"],
   globals: {},
   env: {
     node: true,
@@ -25,6 +25,7 @@ module.exports = {
   parserOptions: {
     project: "./tsconfig.json",
     sourceType: "module",
+    tsconfigRootDir: __dirname,
     ecmaFeatures: {
       jsx: true,
     },

ui/.prettierrc

@@ -0,0 +1 @@
+{}

ui/package.json

@@ -7,12 +7,12 @@
   "scripts": {
     "clean": "rm -rf node_modules yarn-error.log *.log build/ .bundle",
     "build": "npx vite build",
-    "format-js-eslint": "eslint 'src/**/*.{json,jsx,tsx,ts}' 'tests/**/*.ts' --fix",
-    "format-js-prettier": "prettier 'src/**/*.{json,jsx,tsx,ts}' 'tests/**/*.ts' --write",
+    "format-js-eslint": "eslint 'src/**/*.{json,jsx,tsx,ts}' --fix",
+    "format-js-prettier": "prettier 'src/**/*.{json,jsx,tsx,ts}' --write",
     "format-js": "yarn format-js-eslint && yarn format-js-prettier",
     "lint-scss": "stylelint 'src/**/*.scss'",
-    "lint-js-eslint": "eslint 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts' .eslintrc.cjs babel.config.js",
-    "lint-js-prettier": "prettier 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts' .eslintrc.cjs babel.config.js --check",
+    "lint-js-eslint": "eslint 'src/**/*.{json,tsx,ts}' .eslintrc.cjs babel.config.js",
+    "lint-js-prettier": "prettier 'src/**/*.{json,tsx,ts}' .eslintrc.cjs babel.config.js --check",
     "lint-js": "yarn lint-js-eslint && yarn lint-js-prettier",
     "hooks-add": "husky install",
     "hooks-remove": "husky uninstall",

ui/renovate.json

@@ -1,5 +1,5 @@
 {
   "extends": [
-    "github>canonical-web-and-design/renovate-websites"
+    "github>canonical/renovate-apps"
   ]
 }

ui/src/App.tsx

@@ -3,7 +3,6 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { ApplicationLayout } from "@canonical/react-components";
 import { ReBACAdmin } from "@canonical/rebac-admin";
 import Loader from "components/Loader";
-import Login from "components/Login";
 import Logo from "components/Logo";
 import Navigation from "components/Navigation";
 import ClientList from "pages/clients/ClientList";
@@ -40,25 +39,25 @@ const App: FC = () => {
     >
       <Suspense fallback={<Loader />}>
         <Routes>
-            <Route
-              path="/"
-              element={<Navigate to="/provider" replace={true} />}
-            />
-            <Route path="/provider" element={<ProviderList />} />
-            <Route path="/client" element={<ClientList />} />
-            <Route path="/identity" element={<IdentityList />} />
-            <Route path="/schema" element={<SchemaList />} />
-            <Route
-              path="/*"
-              element={
-                <ReBACAdmin
-                  apiURL={apiBasePath}
-                  asidePanelId="app-layout"
-                  authToken={authUser?.token}
-                />
-              }
-            />
-            <Route path="*" element={<NoMatch />} />
+          <Route
+            path="/"
+            element={<Navigate to="/provider" replace={true} />}
+          />
+          <Route path="/provider" element={<ProviderList />} />
+          <Route path="/client" element={<ClientList />} />
+          <Route path="/identity" element={<IdentityList />} />
+          <Route path="/schema" element={<SchemaList />} />
+          <Route
+            path="/*"
+            element={
+              <ReBACAdmin
+                apiURL={apiBasePath}
+                asidePanelId="app-layout"
+                authToken={authUser?.token}
+              />
+            }
+          />
+          <Route path="*" element={<NoMatch />} />
         </Routes>
       </Suspense>
     </ApplicationLayout>

ui/src/index.tsx

@@ -18,5 +18,5 @@ root.render(
         <App />
       </NotificationProvider>
     </QueryClientProvider>
-  </Router>
+  </Router>,
 );

ui/src/pages/identities/DeleteIdentityBtn.tsx

@@ -46,7 +46,8 @@ const DeleteIdentityBtn: FC<Props> = ({ identity }) => {
         title: "Confirm delete",
         children: (
           <p>
-            This will permanently delete identity <b>{identity.traits?.email}</b>.
+            This will permanently delete identity{" "}
+            <b>{identity.traits?.email}</b>.
           </p>
         ),
         confirmButtonLabel: "Delete identity",

ui/src/util/useLocalStorage.ts

@@ -9,7 +9,7 @@ function useLocalStorage<V>(
   const [storedValue, setStoredValue] = useState<V>(() => {
     try {
       const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
+      return item ? (JSON.parse(item) as V) : initialValue;
     } catch (error) {
       // Not shown in UI. Logged for debugging purposes.
       console.error("Unable to parse local storage:", error);

ui/tsconfig.json

@@ -1,14 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "./public/js/dist",
-    "baseUrl": ".",
-    "paths": {
-      "api/*": ["src/api/*"],
-      "components/*": ["src/components/*"],
-      "pages/*": ["src/pages/*"],
-      "types/*": ["src/types/*"],
-      "util/*": ["src/util/*"]
-    },
+    "baseUrl": "src",
     "target": "ES2020",
     "module": "esnext",
     "jsx": "react-jsx",

ui/vitest.config.ts

@@ -1,13 +1,15 @@
 import { mergeConfig, defineConfig } from "vitest/config";
 import viteConfig from "./vite.config";
 
-export default mergeConfig(
-  viteConfig({ mode: "development" }),
-  defineConfig({
-    test: {
-      environment: "jsdom",
-      globals: true,
-      include: ["./src/**/*.spec.{ts,tsx}"],
-    },
-  }),
+export default defineConfig((configEnv) =>
+  mergeConfig(
+    viteConfig({ ...configEnv, mode: "development" }),
+    defineConfig({
+      test: {
+        environment: "jsdom",
+        globals: true,
+        include: ["./src/**/*.{test,spec}.{ts,tsx}"],
+      },
+    }),
+  ),
 );