FE: Add tsc & gen:sources for a build phase. Refactor vite config

frontend/.prettierrc

@@ -6,5 +6,6 @@
   "jsxSingleQuote": false,
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "endOfLine": "lf"
 }

frontend/package.json

@@ -50,8 +50,9 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "gen:sources": "rimraf src/generated-sources && openapi-generator-cli generate",
-    "build": "vite build",
+    "clean": "rimraf ./src/generated-sources",
+    "gen:sources": "pnpm clean && openapi-generator-cli generate",
+    "build": "pnpm gen:sources && tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .tsx,.ts src/",
     "lint:fix": "eslint --ext .tsx,.ts src/ --fix",
@@ -103,6 +104,7 @@
     "ts-node": "^10.9.1",
     "ts-prune": "^0.10.3",
     "typescript": "^4.7.4",
+    "vite-plugin-checker": "^0.6.4",
     "vite-plugin-ejs": "^1.6.4"
   },
   "engines": {

frontend/src/components/NavBar/__tests__/NavBar.spec.tsx

@@ -20,7 +20,7 @@ describe('NavBar', () => {
       })),
     });
 
-    render(<NavBar onBurgerClick={jest.fn()} setDarkMode={jest.fn()} />);
+    render(<NavBar onBurgerClick={jest.fn()} />);
   });
 
   it('correctly renders header', () => {

frontend/src/components/PageContainer/__tests__/PageContainer.spec.tsx

@@ -30,7 +30,7 @@ describe('Page Container', () => {
       })),
     });
     render(
-      <PageContainer setDarkMode={jest.fn()}>
+      <PageContainer>
         <div>child</div>
       </PageContainer>,
       {

frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx

@@ -152,7 +152,7 @@ const Filters: React.FC<FiltersProps> = ({
 
   const [queryType, setQueryType] = React.useState<MessageFilterType>(
     activeFilter.name
-      ? MessageFilterType.GROOVY_SCRIPT
+      ? MessageFilterType.CEL_SCRIPT
       : MessageFilterType.STRING_CONTAINS
   );
   const [query, setQuery] = React.useState<string>(searchParams.get('q') || '');
@@ -206,7 +206,7 @@ const Filters: React.FC<FiltersProps> = ({
     const nextAttempt = Number(searchParams.get('attempt') || 0) + 1;
     const props: Query = {
       q:
-        queryType === MessageFilterType.GROOVY_SCRIPT
+        queryType === MessageFilterType.CEL_SCRIPT
           ? activeFilter.code
           : query,
       filterQueryType: queryType,
@@ -309,7 +309,7 @@ const Filters: React.FC<FiltersProps> = ({
       JSON.stringify({ index, ...newActiveFilter })
     );
     setActiveFilter({ index, ...newActiveFilter });
-    setQueryType(MessageFilterType.GROOVY_SCRIPT);
+    setQueryType(MessageFilterType.CEL_SCRIPT);
   };
 
   const composeMessageFilter = (filter: FilterEdit): ActiveMessageFilter => ({

frontend/src/components/common/NewTable/__test__/Table.spec.tsx

@@ -94,7 +94,7 @@ const columns: ColumnDef<Datum>[] = [
 
 const ExpandedRow: React.FC = () => <div>I am expanded row</div>;
 
-interface Props extends TableProps<Datum> {
+interface Props extends TableProps<Datum, Datum> {
   path?: string;
 }
 

frontend/src/lib/hooks/api/__tests__/topics.spec.ts

@@ -77,7 +77,6 @@ describe('Topics hooks', () => {
         minInSyncReplicas: 0,
         cleanupPolicy: '',
         retentionMs: 0,
-        retentionBytes: 0,
         maxMessageBytes: 0,
         customParams: [],
       };

frontend/vite.config.ts

@@ -7,19 +7,34 @@ import {
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';
+import checker from 'vite-plugin-checker';
 
 export default defineConfig(({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
+  const isDevMode = mode === 'development';
+  const isProxy = process.env.VITE_DEV_PROXY;
+
+  const defaultPlugins = [
+    react(),
+    tsconfigPaths(),
+    ViteEjsPlugin({
+      PUBLIC_PATH: !isDevMode ? 'PUBLIC-PATH-VARIABLE' : '',
+    }),
+  ];
+
+  const prodPlugins = [...defaultPlugins, splitVendorChunkPlugin()];
+
+  const devPlugins = [
+    ...defaultPlugins,
+    checker({
+      overlay: { initialIsOpen: false },
+      typescript: true,
+      eslint: { lintCommand: 'eslint --ext .tsx,.ts src/' },
+    }),
+  ];
 
   const defaultConfig: UserConfigExport = {
-    plugins: [
-      react(),
-      tsconfigPaths(),
-      splitVendorChunkPlugin(),
-      ViteEjsPlugin({
-        PUBLIC_PATH: mode !== 'development' ? 'PUBLIC-PATH-VARIABLE' : '',
-      }),
-    ],
+    plugins: isDevMode ? devPlugins : prodPlugins,
     server: {
       port: 3000,
     },
@@ -59,25 +74,29 @@ export default defineConfig(({ mode }) => {
       'process.env.VITE_COMMIT': `"${process.env.VITE_COMMIT}"`,
     },
   };
-  const proxy = process.env.VITE_DEV_PROXY;
-  if (mode === 'development' && proxy) {
+
+  const proxyDevServerConfig = {
+    ...defaultConfig.server,
+    open: true,
+    proxy: {
+      '/api': {
+        target: isProxy,
+        changeOrigin: true,
+        secure: false,
+      },
+      '/actuator/info': {
+        target: isProxy,
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  };
+
+  if (isDevMode && isProxy) {
     return {
       ...defaultConfig,
       server: {
-        ...defaultConfig.server,
-        open: true,
-        proxy: {
-          '/api': {
-            target: proxy,
-            changeOrigin: true,
-            secure: false,
-          },
-          '/actuator/info': {
-            target: proxy,
-            changeOrigin: true,
-            secure: false,
-          },
-        },
+        ...proxyDevServerConfig,
       },
     };
   }