chore(ci): frontend eslint and prettier

.gitignore

@@ -364,4 +364,7 @@ pyrightconfig.json
 .idea
 *.key
 *.pem
-*.pub
+*.pub
+
+# IDE
+.codebuddy

frontend/.eslintrc.yml

@@ -17,7 +17,6 @@ parserOptions:
     jsx: true
   ecmaVersion: 12
   sourceType: module
-  project: './frontend/tsconfig.json'
 
 plugins:
   - 'react'
@@ -38,18 +37,20 @@ rules:
   'no-empty': ['error', { allowEmptyCatch: true }]
   'no-undef': 'off'
   'no-use-before-define': 'off'
-  'no-restricted-imports': [
-    'error',
-    {
-      paths: [
-        {
-          name: 'react',
-          importNames: ['default'],
-          message: "Please import from 'react/jsx-runtime' instead.",
-        },
-      ],
-    },
-  ]
+  'no-restricted-imports':
+    [
+      'error',
+      {
+        paths:
+          [
+            {
+              name: 'react',
+              importNames: ['default'],
+              message: "Please import from 'react/jsx-runtime' instead.",
+            },
+          ],
+      },
+    ]
 
   # React rules
   'react/jsx-uses-react': 'off'
@@ -69,7 +70,5 @@ rules:
   '@typescript-eslint/no-use-before-define': ['error', { functions: false }]
   '@typescript-eslint/no-var-requires': 'off'
   '@typescript-eslint/explicit-function-return-type': 'off'
-  '@typescript-eslint/consistent-type-imports': [
-    'error',
-    { prefer: 'type-imports' },
-  ]
+  '@typescript-eslint/consistent-type-imports':
+    ['error', { prefer: 'type-imports' }]

frontend/.prettierrc.yml

@@ -19,4 +19,4 @@ semi: false
 proseWrap: 'always'
 
 # Format files with Unix-style line endings
-endOfLine: 'lf'
+endOfLine: 'lf'

frontend/e2e/pages/dashboard.ts

@@ -1,22 +1,26 @@
-import { expect } from '@playwright/test';
-import { baseURL } from '../utils';
-import { Page } from 'playwright';
+import { expect } from '@playwright/test'
+import { baseURL } from '../utils'
+import type { Page } from 'playwright'
 
 export const dashboard_page = async (page: Page) => {
-  await page.goto(baseURL);
-  await expect(page.getByRole('link', { name: 'Government of British Columbia' })).toBeVisible();
+  await page.goto(baseURL)
+  await expect(
+    page.getByRole('link', { name: 'Government of British Columbia' }),
+  ).toBeVisible()
   await expect(page.getByText('QuickStart OpenShift')).toBeVisible()
-  await expect(page.getByText('Employee ID')).toBeVisible();
-  await expect(page.getByText('Employee Name')).toBeVisible();
-  await expect(page.getByText('Employee Email')).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Home' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'About gov.bc.ca' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Disclaimer' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Privacy' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Accessibility' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Copyright' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Contact us' })).toBeVisible();
-  await page.getByPlaceholder('Search…').click();
-  await page.getByPlaceholder('Search…').fill('john');
-  await expect(page.locator('#root')).toContainText('1–1 of 1');
-};
+  await expect(page.getByText('Employee ID')).toBeVisible()
+  await expect(page.getByText('Employee Name')).toBeVisible()
+  await expect(page.getByText('Employee Email')).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Home' })).toBeVisible()
+  await expect(
+    page.getByRole('link', { name: 'About gov.bc.ca' }),
+  ).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Disclaimer' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Privacy' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Accessibility' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Copyright' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Contact us' })).toBeVisible()
+  await page.getByPlaceholder('Search…').click()
+  await page.getByPlaceholder('Search…').fill('john')
+  await expect(page.locator('#root')).toContainText('1–1 of 1')
+}

frontend/e2e/qsos.spec.ts

@@ -1,9 +1,8 @@
-import { test } from '@playwright/test';
-import { dashboard_page } from './pages/dashboard';
+import { test } from '@playwright/test'
+import { dashboard_page } from './pages/dashboard'
 
 test.describe.parallel('QSOS', () => {
   test('Dashboard Page', async ({ page }) => {
-    await dashboard_page(page);
-  });
-
-});
+    await dashboard_page(page)
+  })
+})

frontend/e2e/utils/index.ts

@@ -1 +1,3 @@
-export const baseURL = process.env.E2E_BASE_URL || 'https://quickstart-openshift-test-frontend.apps.silver.devops.gov.bc.ca/';
+export const baseURL =
+  process.env.E2E_BASE_URL ||
+  'https://quickstart-openshift-test-frontend.apps.silver.devops.gov.bc.ca/'

frontend/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

frontend/playwright.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig, devices } from '@playwright/test';
-import { baseURL } from './e2e/utils';
+import { defineConfig, devices } from '@playwright/test'
+import { baseURL } from './e2e/utils'
 
 /**
  * Read environment variables from file.
@@ -23,15 +23,15 @@ export default defineConfig({
   reporter: [
     ['line'],
     ['list', { printSteps: true }],
-    ['html', { open: 'always' }]
+    ['html', { open: 'always' }],
   ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: baseURL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry'
+    trace: 'on-first-retry',
   },
 
   /* Configure projects for major browsers */
@@ -41,39 +41,39 @@ export default defineConfig({
       use: {
         ...devices['Desktop Chrome'],
         baseURL: baseURL,
-      }
+      },
     },
     {
       name: 'Google Chrome',
       use: {
         ...devices['Desktop Chrome'],
         channel: 'chrome',
-        baseURL: baseURL
-      }
+        baseURL: baseURL,
+      },
     },
 
     {
       name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
         baseURL: baseURL,
-      }
+      },
     },
 
     {
       name: 'safari',
       use: {
         ...devices['Desktop Safari'],
-        baseURL: baseURL
-      }
+        baseURL: baseURL,
+      },
     },
     {
       name: 'Microsoft Edge',
       use: {
         ...devices['Desktop Edge'],
         channel: 'msedge',
-        baseURL: baseURL
-      }
-    }
-  ]
-});
+        baseURL: baseURL,
+      },
+    },
+  ],
+})

frontend/src/main.tsx

@@ -1,16 +1,16 @@
 import '@bcgov/bc-sans/css/BC_Sans.css'
-import * as React from 'react'
+import { StrictMode } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { ThemeProvider } from '@emotion/react'
 import CssBaseline from '@mui/material/CssBaseline'
 import theme from './theme'
 import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  <StrictMode>
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <App />
     </ThemeProvider>
-  </React.StrictMode>,
+  </StrictMode>,
 )

frontend/src/theme.tsx

@@ -1,5 +1,4 @@
 import { createTheme } from '@mui/material/styles'
-import { red } from '@mui/material/colors'
 
 // A custom theme for this app
 const theme = createTheme({

frontend/tsconfig.json

@@ -16,7 +16,13 @@
     "strictNullChecks": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vitest/globals","cypress", "node", "cypress-file-upload","@testing-library/cypress"],
+    "types": [
+      "vitest/globals",
+      "cypress",
+      "node",
+      "cypress-file-upload",
+      "@testing-library/cypress"
+    ],
     "baseUrl": "./",
     "paths": {
       "@": ["src"],
@@ -26,6 +32,6 @@
       "~/*": ["node_modules/*"]
     }
   },
-  "include": ["src","src/**/*", "src/**/*.tsx"],
+  "include": ["src", "src/**/*", "src/**/*.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

frontend/vite.config.ts

@@ -48,7 +48,12 @@ export default defineConfig({
             '@emotion/react',
             '@emotion/styled',
           ],
-          mui: ['@mui/material', '@mui/icons-material', '@mui/system', '@mui/x-data-grid'],
+          mui: [
+            '@mui/material',
+            '@mui/icons-material',
+            '@mui/system',
+            '@mui/x-data-grid',
+          ],
           axios: ['axios'],
         },
       },

frontend/vitest.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     // since parsing CSS is slow
     css: false,
     coverage: {
-      reporter: ['lcov', 'text-summary','text', 'json', 'html'],
+      reporter: ['lcov', 'text-summary', 'text', 'json', 'html'],
     },
   },
 })