Merge branch 'main' into bugfix/create_connector

kafbat · Mar 7, 2024 · 26e05ec · 26e05ec
2 parents ea3c2d4 + 81f73a5
commit 26e05ec
Show file tree

Hide file tree

Showing 19 changed files with 238 additions and 74 deletions.
diff --git 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/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/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
diff --git a/frontend/public/favicon/favicon.ico b/frontend/public/favicon/favicon.ico
diff --git a/frontend/public/favicon/icon.svg → frontend/public/favicon/favicon.svg b/frontend/public/favicon/icon.svg → frontend/public/favicon/favicon.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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/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
@@ -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/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
@@ -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 };