From 3608b26ef3bdef85dc31bd7f7d1c71d7f8c7e433 Mon Sep 17 00:00:00 2001
From: Roman Zabaluev <gpg@haarolean.dev>
Date: Fri, 1 Mar 2024 22:27:08 +0700
Subject: [PATCH 1/3] FE: UX: Update color palette (#158)

---
 frontend/index.html                           |   3 +-
 frontend/public/favicon/favicon.ico           | Bin 4286 -> 0 bytes
 .../public/favicon/{icon.svg => favicon.svg}  |  10 ++--
 frontend/src/components/App.tsx               |   2 +-
 .../src/components/NavBar/NavBar.styled.ts    |   6 ++-
 frontend/src/components/NavBar/NavBar.tsx     |   2 +-
 .../NavBar/__tests__/NavBar.spec.tsx          |   2 +-
 .../src/components/common/Logo/Logo.styled.ts |   5 ++
 frontend/src/components/common/Logo/Logo.tsx  |  11 ++---
 .../common/PageLoader/PageLoader.styled.ts    |   9 +++-
 .../common/PageLoader/PageLoader.tsx          |   5 +-
 frontend/src/theme/theme.ts                   |  44 ++++++++++--------
 12 files changed, 59 insertions(+), 40 deletions(-)
 delete mode 100644 frontend/public/favicon/favicon.ico
 rename frontend/public/favicon/{icon.svg => favicon.svg} (77%)
 create mode 100644 frontend/src/components/common/Logo/Logo.styled.ts

diff --git a/frontend/index.html b/frontend/index.html
index 693664306..0041f6efa 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Favicons -->
-    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.ico" sizes="any" />
-    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/icon.svg" type="image/svg+xml" />
+    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="<%= PUBLIC_PATH %>/favicon/apple-touch-icon.png" />
     <link rel="manifest" href="<%= PUBLIC_PATH %>/manifest.json" />
 
diff --git a/frontend/public/favicon/favicon.ico b/frontend/public/favicon/favicon.ico
deleted file mode 100644
index 2774ebccf9b845f5d4202e5afe8677310e38b91b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4286
zcmc(jTT4|@5XX1lpr@XLUV7>?^Z_cnXIMx|7cbRAb}zb6LJ~>z(ghU+QzCj$ico|g
zDd?qwzz{3K?xo!?cKdgJO@sUFv-UnmBN|z*wbxoR|Cw1cvzA8DwA|0knGwIEuIW)U
zBZ{Kgxt5!X=H?pnzbUsiYmPOWh$2mvK7W>;J(KR<m2Td&#+W(Q{soPX8(wFpw12;}
zVS}`KwX|}jHO9=b#-71J37)^D@86}{x22{gsiHz!ut1tO&w9qmHh;cEWABk8(yd$4
zw{KI^;`M8(t<7Y)T=2@uiZ}MT9<8ksvL-{19!Uod7!GolEt9rwlUA)Vxuxj99`_ID
zGBQ${29F<0J9if196BUjy(%3(EG=15xSpjGHtg6TAv=rSzLmgXe^TDUh0^KM=F7{M
zrJ5SsSL&G{6WL&d=*JJKqeB8GiS53`?u!?V`{6^2vBitc&mo@V9J0@zmB308Ib2zp
zEejiJYo+JUjr-$A>B0re#gNaE`1lG8u;N6Xoj4Kpdt3(mD^^H%?o4oF%Z(dSU0rd0
zWT7WmU^?N;HEXhMcV6lYwJu4+!xm%3{D2KrRT7v^moA0RJZ`&>$;JMD=gjYk?|u7<
z+kq@FA^g|eY<0~svU=*@$&<z#`b}(*?^$_)3^2id_s(idF~6Y`d#L%>uZNH)=AJwW
z*ATZ0In*<-IZMtoOJDZW)~%Czd-G#w0yTeh@19g&AC5_|JdUV~S+PfcuU{{<v{=mi
z{F#rF^+jG#vy-;*O$<`!Y1P$*d)!y2PMMEFH6sg~`}fNis}I=V^60?_lX!jcB0YEU
z`SIhW`P+5*@Ie|FkQy5;#)gJ$j4aoIG4<l*OX<@mY0sW;{G%sl9?Eye^B!BTU6c0i
zm6k3wdEji`Y<FqAt`q-Yf(_wg=3Kvck1WnHiyl0XjvbShFE5NYbV!~*Slne!+^fkm
zavk73f8KZI_g}wCeSH?6Asm;H?77D{Bd1rd(sKn}sn^N4fAdB<bH?5#N&Av`@o)6p
zxKRQ#PF-Dveu5ADg9r29lTV*oOtC&0Y~K%7l8CWQo5JU}b*sc(3z4t8cNgx9+n6@S
zb}-W7`N|c$U*k48&-?e5ue)|l4I7!<-C(2<Z{_xOY0;tyzk*L4y?@{Gi0?G}(&oWN
zCbEmY$MG}y=sLi=cCEcT)8uE(J2rQwpJAH)K2KfXEy!Jmz339JA6a<uHF(R*O;)Mc
zt^<DJo^5C_Z1MnG;_^dd_JE7N@KO_t`P?x>{n(h)(<5!)Zt;U`bfJ$opCiV|m+o$9
zbTlM!YIDRte+!;FCmlU%Ik;tuL?a)WV~st$EB+;M7jvG}KpNx8-p_yZ^Zx_<ul^T(
CXyioz

diff --git a/frontend/public/favicon/icon.svg b/frontend/public/favicon/favicon.svg
similarity index 77%
rename from frontend/public/favicon/icon.svg
rename to frontend/public/favicon/favicon.svg
index d31960515..fc31bcf4a 100644
--- a/frontend/public/favicon/icon.svg
+++ b/frontend/public/favicon/favicon.svg
@@ -2,14 +2,16 @@
   <style>
     @media (prefers-color-scheme: dark) {
       #faviconCircle {
-        fill: white;
+        fill: #FDFDFD;
       }
       #faviconLogo {
-        fill: #4F4FFF;
+        fill: #171A1C;
       }
     }
   </style>
 
-  <circle id="faviconCircle" cx="8" cy="8.57983" r="8" fill="#4F4FFF"/>
-  <path id="faviconLogo" d="M4.75773 2.62842C4.75773 2.62842 7.29142 6.23837 11.7986 7.97159C11.7986 7.97159 14.8056 5.45572 11.8981 9.07271C8.99049 12.6897 4.5637 14.8803 4.75773 14.6111C5.33474 13.8107 7.23785 12.2813 6.26513 11.338C8.17454 9.48627 3.87891 8.26547 3.87891 8.26547C4.99205 5.85605 4.75773 2.62842 4.75773 2.62842Z" fill="white"/>
+  <circle id="faviconCircle" cx="8" cy="8.57983" r="8" fill="#171A1C"/>
+  <path id="faviconLogo" d="M4.75773 2.62842C4.75773 2.62842 7.29142 6.23837 11.7986 7.97159C11.7986 7.97159 14.8056 5.45572 11.8981 9.07271C8.99049 12.6897 4.5637 14.8803 4.75773 14.6111C5.33474 13.8107 7.23785 12.2813 6.26513 11.338C8.17454 9.48627 3.87891 8.26547 3.87891 8.26547C4.99205 5.85605 4.75773 2.62842 4.75773 2.62842Z"
+        fill="#FDFDFD"
+  />
 </svg>
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 43abc60bd..f3d6d88cd 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -50,7 +50,7 @@ const App: React.FC = () => {
     <QueryClientProvider client={queryClient}>
       <GlobalSettingsProvider>
         <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
-          <Suspense fallback={<PageLoader />}>
+          <Suspense fallback={<PageLoader fullSize />}>
             <UserInfoRolesAccessProvider>
               <ConfirmContextProvider>
                 <GlobalCSS />
diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts
index 8c4dd6f5b..d9013dcdd 100644
--- a/frontend/src/components/NavBar/NavBar.styled.ts
+++ b/frontend/src/components/NavBar/NavBar.styled.ts
@@ -130,18 +130,20 @@ export const Hyperlink = styled(Link)(
     align-items: center;
     gap: 8px;
 
-    margin: 0;
+    margin: 0 0 0 8px;
     padding: 0.5rem 0.75rem;
 
     font-family: Inter, sans-serif;
     font-style: normal;
     font-weight: bold;
-    font-size: 12px;
+    font-size: 22px;
     line-height: 16px;
     color: ${theme.default.color.normal};
+
     &:hover {
       color: ${theme.default.color.normal};
     }
+
     text-decoration: none;
     word-break: break-word;
     cursor: pointer;
diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
index e025c892c..1a58c7e7b 100644
--- a/frontend/src/components/NavBar/NavBar.tsx
+++ b/frontend/src/components/NavBar/NavBar.tsx
@@ -69,7 +69,7 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
 
           <S.Hyperlink to="/">
             <Logo />
-            Kafbat UI
+            kafbat UI
           </S.Hyperlink>
 
           <S.NavbarItem>
diff --git a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
index 9b3e4528f..a94d941e5 100644
--- a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
+++ b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
@@ -26,7 +26,7 @@ describe('NavBar', () => {
   it('correctly renders header', () => {
     const header = screen.getByLabelText('Page Header');
     expect(header).toBeInTheDocument();
-    expect(within(header).getByText('Kafbat UI')).toBeInTheDocument();
+    expect(within(header).getByText('kafbat UI')).toBeInTheDocument();
     expect(within(header).getAllByRole('separator').length).toEqual(3);
     expect(
       within(header).getByRole('button', burgerButtonOptions)
diff --git a/frontend/src/components/common/Logo/Logo.styled.ts b/frontend/src/components/common/Logo/Logo.styled.ts
new file mode 100644
index 000000000..51d649c62
--- /dev/null
+++ b/frontend/src/components/common/Logo/Logo.styled.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Logo = styled.svg`
+  fill: ${({ theme }) => theme.logo.color};
+`;
diff --git a/frontend/src/components/common/Logo/Logo.tsx b/frontend/src/components/common/Logo/Logo.tsx
index b209f32b2..d149d6511 100644
--- a/frontend/src/components/common/Logo/Logo.tsx
+++ b/frontend/src/components/common/Logo/Logo.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 
+import * as S from './Logo.styled';
+
 const Logo: React.FC = () => {
   return (
-    <svg
+    <S.Logo
       width="23"
       height="30"
       viewBox="0 0 23 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M2.17668 0C2.17668 0 8.45218 9.02115 19.6155 13.3524C19.6155 13.3524 27.0635 7.06532 19.862 16.1041C12.6605 25.1428 1.6961 30.617 2.17668 29.9444C3.60584 27.9442 8.31948 24.1222 5.91024 21.7649C10.6395 17.1375 0 14.0868 0 14.0868C2.75705 8.06572 2.17668 0 2.17668 0Z"
-        fill="#4F4FFF"
-      />
-    </svg>
+      <path d="M1.9874 0.5C1.9874 0.5 7.7172 8.91974 17.9098 12.9622C17.9098 12.9622 24.7102 7.0943 18.1349 15.5305C11.5596 23.9666 1.54861 29.0758 1.9874 28.4481C3.29229 26.5813 7.59605 23.014 5.3963 20.8139C9.71432 16.495 0 13.6477 0 13.6477C2.51731 8.02801 1.9874 0.5 1.9874 0.5Z" />
+    </S.Logo>
   );
 };
 
diff --git a/frontend/src/components/common/PageLoader/PageLoader.styled.ts b/frontend/src/components/common/PageLoader/PageLoader.styled.ts
index f38f21c0b..36c5848e0 100644
--- a/frontend/src/components/common/PageLoader/PageLoader.styled.ts
+++ b/frontend/src/components/common/PageLoader/PageLoader.styled.ts
@@ -1,10 +1,15 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div`
+export interface PageLoaderProps {
+  fullSize?: boolean;
+}
+
+export const Wrapper = styled.div<PageLoaderProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 15%;
   height: 100%;
   width: 100%;
+  background-color: ${({ theme }) => theme.default.backgroundColor};
+  ${({ fullSize }) => (fullSize ? `min-height: 100vh;` : 'padding-top: 15%;')}
 `;
diff --git a/frontend/src/components/common/PageLoader/PageLoader.tsx b/frontend/src/components/common/PageLoader/PageLoader.tsx
index 674ab0f0c..b568357dd 100644
--- a/frontend/src/components/common/PageLoader/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader/PageLoader.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import Spinner from 'components/common/Spinner/Spinner';
 
 import * as S from './PageLoader.styled';
+import { PageLoaderProps } from './PageLoader.styled';
 
-const PageLoader: React.FC = () => (
-  <S.Wrapper>
+const PageLoader: React.FC<PageLoaderProps> = ({ fullSize }) => (
+  <S.Wrapper fullSize={fullSize}>
     <Spinner />
   </S.Wrapper>
 );
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 8426d3c2f..44e19eb5b 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -35,15 +35,15 @@ const Colors = {
     '60': '#29A352',
   },
   brand: {
-    '5': '#E8E8FC',
-    '10': '#D1D1FA',
-    '15': '#B8BEF9',
-    '20': '#A3A3F5',
-    '30': '#7E7EF1',
-    '40': '#6666FF',
-    '50': '#4C4CFF',
-    '60': '#1717CF',
-    '70': '#1414B8',
+    '5': '#F1F2F3',
+    '10': '#E3E6E8',
+    '15': '#D5DADD',
+    '20': '#C7CED1',
+    '30': '#ABB5BA',
+    '40': '#8F9CA3',
+    '50': '#2F3639',
+    '60': '#22282A',
+    '70': '#171A1C',
   },
   red: {
     '10': '#FAD1D1',
@@ -313,6 +313,9 @@ const baseTheme = {
 
 export const theme = {
   ...baseTheme,
+  logo: {
+    color: Colors.brand[70],
+  },
   version: {
     currentVersion: {
       color: Colors.neutral[30],
@@ -389,8 +392,8 @@ export const theme = {
     primary: {
       backgroundColor: {
         normal: Colors.brand[50],
-        hover: Colors.brand[60],
-        active: Colors.brand[70],
+        hover: Colors.brand[70],
+        active: Colors.brand[60],
         disabled: Colors.neutral[5],
       },
       color: {
@@ -756,6 +759,9 @@ export type ThemeType = typeof theme;
 
 export const darkTheme: ThemeType = {
   ...baseTheme,
+  logo: {
+    color: '#FDFDFD',
+  },
   version: {
     currentVersion: {
       color: Colors.neutral[50],
@@ -831,13 +837,13 @@ export const darkTheme: ThemeType = {
   button: {
     primary: {
       backgroundColor: {
-        normal: Colors.brand[30],
-        hover: Colors.brand[20],
-        active: Colors.brand[10],
-        disabled: Colors.neutral[75],
+        normal: Colors.brand[10],
+        hover: Colors.brand[5],
+        active: Colors.brand[20],
+        disabled: Colors.brand[60],
       },
       color: {
-        normal: Colors.neutral[0],
+        normal: Colors.neutral[70],
         disabled: Colors.neutral[60],
       },
       invertedColors: {
@@ -848,9 +854,9 @@ export const darkTheme: ThemeType = {
     },
     secondary: {
       backgroundColor: {
-        normal: Colors.blue[80],
-        hover: Colors.blue[70],
-        active: Colors.blue[60],
+        normal: Colors.brand[50],
+        hover: Colors.brand[70],
+        active: Colors.brand[60],
         disabled: Colors.neutral[75],
       },
       color: {

From b0cf76b0d737c41ac3922a903353eb5d89b3a9e9 Mon Sep 17 00:00:00 2001
From: Roman Zabaluev <gpg@haarolean.dev>
Date: Fri, 1 Mar 2024 23:23:19 +0700
Subject: [PATCH 2/3] FE: Add tsc & gen:sources for the build phase (#177)

---
 frontend/.prettierrc                          |   3 +-
 frontend/package.json                         |   6 +-
 frontend/pnpm-lock.yaml                       | 114 +++++++++++++++++-
 .../common/NewTable/__test__/Table.spec.tsx   |   2 +-
 frontend/vite.config.ts                       |  67 ++++++----
 5 files changed, 160 insertions(+), 32 deletions(-)

diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index e88e08a44..2c6ddbf69 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -6,5 +6,6 @@
   "jsxSingleQuote": false,
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "endOfLine": "lf"
 }
diff --git a/frontend/package.json b/frontend/package.json
index cb7919927..540c85a88 100644
--- a/frontend/package.json
+++ b/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": {
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 757bbc622..427aeadf1 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -264,6 +264,9 @@ devDependencies:
   typescript:
     specifier: ^4.7.4
     version: 4.7.4
+  vite-plugin-checker:
+    specifier: ^0.6.4
+    version: 0.6.4(eslint@8.48.0)(typescript@4.7.4)(vite@4.5.2)
   vite-plugin-ejs:
     specifier: ^1.6.4
     version: 1.6.4
@@ -333,7 +336,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.18.6
+      '@babel/code-frame': 7.23.5
       '@babel/generator': 7.18.9
       '@babel/helper-compilation-targets': 7.18.9(@babel/core@7.18.9)
       '@babel/helper-module-transforms': 7.18.9
@@ -443,7 +446,7 @@ packages:
       '@babel/helper-module-imports': 7.18.6
       '@babel/helper-simple-access': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/helper-validator-identifier': 7.18.6
+      '@babel/helper-validator-identifier': 7.22.20
       '@babel/template': 7.18.6
       '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@babel/types': 7.18.9
@@ -680,7 +683,7 @@ packages:
     resolution: {integrity: sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.18.6
+      '@babel/code-frame': 7.23.5
       '@babel/parser': 7.18.9
       '@babel/types': 7.18.9
     dev: false
@@ -3792,6 +3795,15 @@ packages:
       universalify: 2.0.0
     dev: true
 
+  /fs-extra@11.2.0:
+    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -5295,7 +5307,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       path-key: 3.1.1
-    dev: false
 
   /nwsapi@2.2.0:
     resolution: {integrity: sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==}
@@ -6397,6 +6408,10 @@ packages:
     resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==}
     dev: false
 
+  /tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+    dev: true
+
   /tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -6706,6 +6721,57 @@ packages:
       convert-source-map: 1.7.0
     dev: false
 
+  /vite-plugin-checker@0.6.4(eslint@8.48.0)(typescript@4.7.4)(vite@4.5.2):
+    resolution: {integrity: sha512-2zKHH5oxr+ye43nReRbC2fny1nyARwhxdm0uNYp/ERy4YvU9iZpNOsueoi/luXw5gnpqRSvjcEPxXbS153O2wA==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      eslint: '>=7'
+      meow: ^9.0.0
+      optionator: ^0.9.1
+      stylelint: '>=13'
+      typescript: '*'
+      vite: '>=2.0.0'
+      vls: '*'
+      vti: '*'
+      vue-tsc: '>=1.3.9'
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      meow:
+        optional: true
+      optionator:
+        optional: true
+      stylelint:
+        optional: true
+      typescript:
+        optional: true
+      vls:
+        optional: true
+      vti:
+        optional: true
+      vue-tsc:
+        optional: true
+    dependencies:
+      '@babel/code-frame': 7.23.5
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      chokidar: 3.5.2
+      commander: 8.3.0
+      eslint: 8.48.0
+      fast-glob: 3.3.2
+      fs-extra: 11.2.0
+      npm-run-path: 4.0.1
+      semver: 7.5.4
+      strip-ansi: 6.0.1
+      tiny-invariant: 1.3.3
+      typescript: 4.7.4
+      vite: 4.5.2(@types/node@20.11.17)(sass@1.66.1)
+      vscode-languageclient: 7.0.0
+      vscode-languageserver: 7.0.0
+      vscode-languageserver-textdocument: 1.0.11
+      vscode-uri: 3.0.8
+    dev: true
+
   /vite-plugin-ejs@1.6.4:
     resolution: {integrity: sha512-23p1RS4PiA0veXY5/gHZ60pl3pPvd8NEqdBsDgxNK8nM1rjFFDcVb0paNmuipzCgNP/Y0f/Id22M7Il4kvZ2jA==}
     dependencies:
@@ -6765,6 +6831,46 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /vscode-jsonrpc@6.0.0:
+    resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==}
+    engines: {node: '>=8.0.0 || >=10.0.0'}
+    dev: true
+
+  /vscode-languageclient@7.0.0:
+    resolution: {integrity: sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==}
+    engines: {vscode: ^1.52.0}
+    dependencies:
+      minimatch: 3.1.2
+      semver: 7.5.4
+      vscode-languageserver-protocol: 3.16.0
+    dev: true
+
+  /vscode-languageserver-protocol@3.16.0:
+    resolution: {integrity: sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==}
+    dependencies:
+      vscode-jsonrpc: 6.0.0
+      vscode-languageserver-types: 3.16.0
+    dev: true
+
+  /vscode-languageserver-textdocument@1.0.11:
+    resolution: {integrity: sha512-X+8T3GoiwTVlJbicx/sIAF+yuJAqz8VvwJyoMVhwEMoEKE/fkDmrqUgDMyBECcM2A2frVZIUj5HI/ErRXCfOeA==}
+    dev: true
+
+  /vscode-languageserver-types@3.16.0:
+    resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==}
+    dev: true
+
+  /vscode-languageserver@7.0.0:
+    resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==}
+    hasBin: true
+    dependencies:
+      vscode-languageserver-protocol: 3.16.0
+    dev: true
+
+  /vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+    dev: true
+
   /w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.
diff --git a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx b/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
index e31a88846..b22e7c0ec 100644
--- a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
+++ b/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;
 }
 
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index b4cdd022a..63856bd6d 100644
--- a/frontend/vite.config.ts
+++ b/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,
       },
     };
   }

From 81f73a51dd64ff3633d5ddceb5e39f48efac4c43 Mon Sep 17 00:00:00 2001
From: Renat Kalimulin <103274228+Nilumilak@users.noreply.github.com>
Date: Fri, 1 Mar 2024 19:26:44 +0300
Subject: [PATCH 3/3] FE: Escape cluster name in API (#113)

Co-authored-by: Roman Zabaluev <gpg@haarolean.dev>
---
 frontend/src/lib/hooks/useAppParams.tsx | 14 +++++++++++++-
 frontend/src/lib/paths.ts               |  7 ++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/hooks/useAppParams.tsx b/frontend/src/lib/hooks/useAppParams.tsx
index 8cd1ebfff..773b6ccb6 100644
--- a/frontend/src/lib/hooks/useAppParams.tsx
+++ b/frontend/src/lib/hooks/useAppParams.tsx
@@ -1,7 +1,19 @@
 import { Params, useParams } from 'react-router-dom';
+import { ClusterNameRoute } from 'lib/paths';
 
 export default function useAppParams<
   T extends { [K in keyof Params]?: string }
 >() {
-  return useParams<T>() as T;
+  const params = useParams<T>() as T;
+
+  const hasClusterName = (
+    checkingParams: T
+  ): checkingParams is T & ClusterNameRoute =>
+    typeof checkingParams.clusterName !== 'undefined';
+
+  if (hasClusterName(params)) {
+    params.clusterName = decodeURIComponent(params.clusterName);
+  }
+
+  return params;
 }
diff --git a/frontend/src/lib/paths.ts b/frontend/src/lib/paths.ts
index 9cee7ca28..62b19568c 100644
--- a/frontend/src/lib/paths.ts
+++ b/frontend/src/lib/paths.ts
@@ -24,7 +24,12 @@ export const accessErrorPage = '/403';
 
 export const clusterPath = (
   clusterName: ClusterName = RouteParams.clusterName
-) => `/ui/clusters/${clusterName}`;
+) =>
+  `/ui/clusters/${
+    clusterName === RouteParams.clusterName
+      ? clusterName
+      : encodeURIComponent(clusterName)
+  }`;
 
 export type ClusterNameRoute = { clusterName: ClusterName };