From 6577e7ee2de20f74c09302321c5d218535cda866 Mon Sep 17 00:00:00 2001
From: Pascal Euhus <pascal.euhus@gmx.de>
Date: Fri, 20 Oct 2023 22:08:20 +0200
Subject: [PATCH] FORMAT

---
 src/main/webui/src/components/AppRouter.tsx   | 12 ++---
 .../src/components/context/UserContext.tsx    | 48 +++++++++++--------
 .../webui/src/components/layout/Header.tsx    | 12 ++---
 .../src/components/nav/NavigationDrawer.tsx   | 32 ++++++-------
 src/main/webui/src/index.tsx                  | 26 +++++-----
 src/main/webui/src/types/index.ts             |  2 +-
 src/main/webui/src/util/DateUtil.test.ts      | 35 +++++++-------
 src/main/webui/src/util/DateUtil.ts           | 14 +++---
 src/main/webui/src/views/404.tsx              | 27 ++++++-----
 src/main/webui/src/views/ManagementView.tsx   | 28 ++++++-----
 src/main/webui/src/views/ModuleDetails.tsx    |  6 +--
 src/main/webui/src/views/ProviderDetails.tsx  |  6 +--
 12 files changed, 128 insertions(+), 120 deletions(-)

diff --git a/src/main/webui/src/components/AppRouter.tsx b/src/main/webui/src/components/AppRouter.tsx
index 89085e90..62922da3 100644
--- a/src/main/webui/src/components/AppRouter.tsx
+++ b/src/main/webui/src/components/AppRouter.tsx
@@ -5,18 +5,19 @@ import ModuleDetails from "../views/ModuleDetails";
 import ProviderOverview from "../views/ProviderOverview";
 import ProviderDetails from "../views/ProviderDetails";
 import ManagementView from "../views/ManagementView";
-import {useUserContext} from "./context/UserContext";
+import { useUserContext } from "./context/UserContext";
 import NotFoundPage from "../views/404";
 
 const AppRouter = () => {
-
   const { isAdmin } = useUserContext();
   return (
     <Router>
       <Routes>
         <Route path="/" element={<ModuleOverview />} />
         <Route path="/providers" element={<ProviderOverview />} />
-        { isAdmin ? <Route path="/management" element={<ManagementView />} /> : null }
+        {isAdmin ? (
+          <Route path="/management" element={<ManagementView />} />
+        ) : null}
         <Route
           path="/module/:namespace/:name/:provider"
           loader={({ params }) => {
@@ -35,10 +36,7 @@ const AppRouter = () => {
           }}
           element={<ProviderDetails />}
         />
-          <Route
-              path={"*"}
-                element={<NotFoundPage/>}
-          />
+        <Route path={"*"} element={<NotFoundPage />} />
       </Routes>
     </Router>
   );
diff --git a/src/main/webui/src/components/context/UserContext.tsx b/src/main/webui/src/components/context/UserContext.tsx
index 9443165f..28e8881f 100644
--- a/src/main/webui/src/components/context/UserContext.tsx
+++ b/src/main/webui/src/components/context/UserContext.tsx
@@ -1,32 +1,38 @@
-import React, {useContext, useState} from "react";
-import {User} from "../../types";
+import React, { useContext, useState } from "react";
+import { User } from "../../types";
 
 interface IUserContext {
-    user: User,
-    isAdmin: boolean,
+  user: User;
+  isAdmin: boolean;
 }
 
 const defaultContext: IUserContext = {
-    user: {} as User,
-    isAdmin: false,
-}
+  user: {} as User,
+  isAdmin: false,
+};
 
 const UserContext = React.createContext<IUserContext>(defaultContext);
 
-export const UserProvider = ({ fetchedUser, children }: {fetchedUser: User, children: any}) => {
-    const [user, setUser] = useState(fetchedUser);
-    const [isAdmin, setIsAdmin] = useState(fetchedUser.roles.includes("admin"));
+export const UserProvider = ({
+  fetchedUser,
+  children,
+}: {
+  fetchedUser: User;
+  children: any;
+}) => {
+  const [user, setUser] = useState(fetchedUser);
+  const [isAdmin, setIsAdmin] = useState(fetchedUser.roles.includes("admin"));
 
-    return (
-        <UserContext.Provider
-            value={{
-                user,
-                isAdmin
-            }}
-        >
-            {children}
-        </UserContext.Provider>
-    );
+  return (
+    <UserContext.Provider
+      value={{
+        user,
+        isAdmin,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
 };
 
-export const useUserContext = () =>  useContext(UserContext);
\ No newline at end of file
+export const useUserContext = () => useContext(UserContext);
diff --git a/src/main/webui/src/components/layout/Header.tsx b/src/main/webui/src/components/layout/Header.tsx
index 606f1c92..fd3256d2 100644
--- a/src/main/webui/src/components/layout/Header.tsx
+++ b/src/main/webui/src/components/layout/Header.tsx
@@ -3,13 +3,13 @@ import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
-import {useUserContext} from "../context/UserContext";
-import {Avatar} from "@mui/material";
-import {deepOrange} from "@mui/material/colors";
+import { useUserContext } from "../context/UserContext";
+import { Avatar } from "@mui/material";
+import { deepOrange } from "@mui/material/colors";
 
 const Header = () => {
-    const { user} = useUserContext();
-    return (
+  const { user } = useUserContext();
+  return (
     <AppBar position="static" sx={{ backgroundColor: "#474747" }}>
       <Box alignSelf={"center"}>
         <Toolbar disableGutters>
@@ -41,4 +41,4 @@ export default Header;
 <Avatar
               sx={{ bgcolor: deepOrange[500] }}
           >{user.name ? user.name.charAt(0).toUpperCase() : undefined}</Avatar>
- */
\ No newline at end of file
+ */
diff --git a/src/main/webui/src/components/nav/NavigationDrawer.tsx b/src/main/webui/src/components/nav/NavigationDrawer.tsx
index 11fa47f2..af4985e4 100644
--- a/src/main/webui/src/components/nav/NavigationDrawer.tsx
+++ b/src/main/webui/src/components/nav/NavigationDrawer.tsx
@@ -12,7 +12,7 @@ import {
 import ViewModuleIcon from "@mui/icons-material/ViewModule";
 import AppsIcon from "@mui/icons-material/Apps";
 import KeyIcon from "@mui/icons-material/Key";
-import {useUserContext} from "../context/UserContext";
+import { useUserContext } from "../context/UserContext";
 
 const NavigationDrawer = () => {
   const { isAdmin } = useUserContext();
@@ -63,21 +63,21 @@ const NavigationDrawer = () => {
             <ListItemText primary={"Providers"} />
           </ListItemButton>
         </ListItem>
-        { isAdmin ?
-            <ListItem
-                key={"MenuItemManagement"}
-                component={"a"}
-                href={"/management"}
-                disablePadding
-            >
-              <ListItemButton>
-                <ListItemIcon>
-                  <KeyIcon />
-                </ListItemIcon>
-                <ListItemText primary={"Management"} />
-              </ListItemButton>
-            </ListItem> : null
-        }
+        {isAdmin ? (
+          <ListItem
+            key={"MenuItemManagement"}
+            component={"a"}
+            href={"/management"}
+            disablePadding
+          >
+            <ListItemButton>
+              <ListItemIcon>
+                <KeyIcon />
+              </ListItemIcon>
+              <ListItemText primary={"Management"} />
+            </ListItemButton>
+          </ListItem>
+        ) : null}
       </List>
     </Drawer>
   );
diff --git a/src/main/webui/src/index.tsx b/src/main/webui/src/index.tsx
index b947db17..b103ef1f 100644
--- a/src/main/webui/src/index.tsx
+++ b/src/main/webui/src/index.tsx
@@ -11,11 +11,11 @@ import AppRouter from "./components/AppRouter";
 import CssBaseline from "@mui/material/CssBaseline";
 import { Box, Stack } from "@mui/material";
 import NavigationDrawer from "./components/nav/NavigationDrawer";
-import {UserProvider} from "./components/context/UserContext";
+import { UserProvider } from "./components/context/UserContext";
 
 const fetchUser = async () => {
-    const response = await fetch('/tapir/user');
-    return await response.json();
+  const response = await fetch("/tapir/user");
+  return await response.json();
 };
 
 const user = await fetchUser();
@@ -26,15 +26,15 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <CssBaseline />
-      <UserProvider fetchedUser={user}>
-    <Header />
-    <Box sx={{ display: "flex" }}>
-      <NavigationDrawer />
-      <Stack spacing={2} m={"auto"} mt={"5vh"} sx={{ width: "75%" }}>
-        <AppRouter />
-      </Stack>
-    </Box>
-    <Footer />
-        </UserProvider>
+    <UserProvider fetchedUser={user}>
+      <Header />
+      <Box sx={{ display: "flex" }}>
+        <NavigationDrawer />
+        <Stack spacing={2} m={"auto"} mt={"5vh"} sx={{ width: "75%" }}>
+          <AppRouter />
+        </Stack>
+      </Box>
+      <Footer />
+    </UserProvider>
   </React.StrictMode>,
 );
diff --git a/src/main/webui/src/types/index.ts b/src/main/webui/src/types/index.ts
index 890c6e0f..51273cc5 100644
--- a/src/main/webui/src/types/index.ts
+++ b/src/main/webui/src/types/index.ts
@@ -103,4 +103,4 @@ export type User = {
   familyName?: string;
   email?: string;
   preferredUsername?: string;
-}
+};
diff --git a/src/main/webui/src/util/DateUtil.test.ts b/src/main/webui/src/util/DateUtil.test.ts
index f8fa9de2..69e2fdaa 100644
--- a/src/main/webui/src/util/DateUtil.test.ts
+++ b/src/main/webui/src/util/DateUtil.test.ts
@@ -1,22 +1,21 @@
-import {formatDate, formatDateTime} from "./DateUtil";
+import { formatDate, formatDateTime } from "./DateUtil";
 
-describe('DateUtil', () => {
+describe("DateUtil", () => {
+  const dateString = "2023-01-01T15:11:54.000Z";
 
-    const dateString = '2023-01-01T15:11:54.000Z'
+  it("should format date and time with trailing zeros", () => {
+    const dateString = "2023-01-01T01:01:54.000Z";
+    const formattedDateTime = formatDateTime(dateString);
+    expect(formattedDateTime).toStrictEqual("01-01-2023 02:01");
+  });
 
-    it('should format date and time with trailing zeros', () => {
-        const dateString = '2023-01-01T01:01:54.000Z';
-        const formattedDateTime = formatDateTime(dateString);
-        expect(formattedDateTime).toStrictEqual('01-01-2023 02:01')
-    });
+  it("should format date", () => {
+    const formattedDate = formatDate(dateString);
+    expect(formattedDate).toStrictEqual("01-01-2023");
+  });
 
-    it('should format date', () => {
-        const formattedDate = formatDate(dateString);
-        expect(formattedDate).toStrictEqual('01-01-2023');
-    });
-
-    it('should format date and time', () => {
-        const formattedDateTime = formatDateTime(dateString);
-        expect(formattedDateTime).toStrictEqual('01-01-2023 16:11')
-    });
-});
\ No newline at end of file
+  it("should format date and time", () => {
+    const formattedDateTime = formatDateTime(dateString);
+    expect(formattedDateTime).toStrictEqual("01-01-2023 16:11");
+  });
+});
diff --git a/src/main/webui/src/util/DateUtil.ts b/src/main/webui/src/util/DateUtil.ts
index 9c714fea..2b413b02 100644
--- a/src/main/webui/src/util/DateUtil.ts
+++ b/src/main/webui/src/util/DateUtil.ts
@@ -5,13 +5,15 @@ export const formatDate = (dateString: string) => {
 
 export const formatDateTime = (dateString: string) => {
   const date = new Date(dateString);
-  return `${formatSimpleDate(date)} ${padToString(date.getHours())}:${padToString(date.getMinutes())}`;
+  return `${formatSimpleDate(date)} ${padToString(
+    date.getHours(),
+  )}:${padToString(date.getMinutes())}`;
 };
 
-const padToString = (number: number) => String(
-    number,
-).padStart(2, "0");
+const padToString = (number: number) => String(number).padStart(2, "0");
 
 const formatSimpleDate = (date: Date) => {
-  return `${padToString(date.getDate())}-${padToString(date.getMonth() + 1)}-${date.getFullYear()}`;
-}
\ No newline at end of file
+  return `${padToString(date.getDate())}-${padToString(
+    date.getMonth() + 1,
+  )}-${date.getFullYear()}`;
+};
diff --git a/src/main/webui/src/views/404.tsx b/src/main/webui/src/views/404.tsx
index 722c4064..562b4efc 100644
--- a/src/main/webui/src/views/404.tsx
+++ b/src/main/webui/src/views/404.tsx
@@ -1,18 +1,19 @@
-import {useLocation} from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import tapirLogo from "../assets/tapir.png";
-import {Box, Typography} from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import React from "react";
 
 const NotFoundPage = () => {
-    return (
-        <Box sx={{ margin: "auto" }}>
+  return (
+    <Box sx={{ margin: "auto" }}>
+      <Typography variant={"h2"} textAlign={"center"}>
+        404 - Page not found
+      </Typography>
+      <center>
+        <img alt={"Tapir logo"} src={tapirLogo} />
+      </center>
+    </Box>
+  );
+};
 
-            <Typography variant={"h2"} textAlign={"center"}>
-                404 - Page not found
-            </Typography>
-            <center><img alt={"Tapir logo"} src={tapirLogo} /></center>
-        </Box>
-    )
-}
-
-export default NotFoundPage
\ No newline at end of file
+export default NotFoundPage;
diff --git a/src/main/webui/src/views/ManagementView.tsx b/src/main/webui/src/views/ManagementView.tsx
index 2832af3c..d09ef9f1 100644
--- a/src/main/webui/src/views/ManagementView.tsx
+++ b/src/main/webui/src/views/ManagementView.tsx
@@ -69,8 +69,8 @@ const ManagementView = () => {
       let bottom =
         // @ts-ignore
         deployKeysTable.current.scrollHeight -
-          // @ts-ignore
-          deployKeysTable.current.clientHeight;
+        // @ts-ignore
+        deployKeysTable.current.clientHeight;
 
       if (!distanceBottom) {
         setDistanceBottom(Math.round(bottom * 0.2));
@@ -273,17 +273,19 @@ const ManagementView = () => {
                 // @ts-ignore
                 ref={deployKeysTable}
               >
-                {deployKeys && deployKeys.length > 0
-                  ? deployKeys.map((deployKey) => (
-                      <DeployKeyElement
-                        key={deployKey.id}
-                        deployKey={deployKey}
-                        onCopy={copyToClipBoard}
-                        onDelete={deleteDeployKey}
-                        onRegenerate={regenerateDeployKey}
-                      />
-                    ))
-                  : <NotFoundInfo entity={"keys"} />}
+                {deployKeys && deployKeys.length > 0 ? (
+                  deployKeys.map((deployKey) => (
+                    <DeployKeyElement
+                      key={deployKey.id}
+                      deployKey={deployKey}
+                      onCopy={copyToClipBoard}
+                      onDelete={deleteDeployKey}
+                      onRegenerate={regenerateDeployKey}
+                    />
+                  ))
+                ) : (
+                  <NotFoundInfo entity={"keys"} />
+                )}
                 {renderLastItem()}
               </List>
             </TabPanel>
diff --git a/src/main/webui/src/views/ModuleDetails.tsx b/src/main/webui/src/views/ModuleDetails.tsx
index 5cf72b55..e346f2e6 100644
--- a/src/main/webui/src/views/ModuleDetails.tsx
+++ b/src/main/webui/src/views/ModuleDetails.tsx
@@ -15,7 +15,7 @@ import DownloadIcon from "@mui/icons-material/Download";
 import InfoIcon from "@mui/icons-material/Info";
 import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
 import { formatDate } from "../util/DateUtil";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import ModuleAnalysisTab from "../components/tab/ModuleAnalysisTab";
 
 const ModuleDetails = () => {
@@ -40,8 +40,8 @@ const ModuleDetails = () => {
     const response = await fetch(
       `${baseUrl}/terraform/modules/v1/${routeParams.namespace}/${routeParams.name}/${routeParams.provider}`,
     );
-    if(response.status === 404) {
-      navigate("/404")
+    if (response.status === 404) {
+      navigate("/404");
     } else {
       const module = await response.json();
       setModule(module);
diff --git a/src/main/webui/src/views/ProviderDetails.tsx b/src/main/webui/src/views/ProviderDetails.tsx
index e265d169..40a32704 100644
--- a/src/main/webui/src/views/ProviderDetails.tsx
+++ b/src/main/webui/src/views/ProviderDetails.tsx
@@ -18,7 +18,7 @@ import {
 import InfoIcon from "@mui/icons-material/Info";
 import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
 import { formatDate } from "../util/DateUtil";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import BuildCircle from "@mui/icons-material/BuildCircle";
 import { ghcolors as theme } from "react-syntax-highlighter/dist/esm/styles/prism";
 import SyntaxHighlighter from "react-syntax-highlighter/dist/cjs/light";
@@ -36,8 +36,8 @@ const ProviderDetails = () => {
     const response = await fetch(
       `${baseUrl}/terraform/providers/v1/${routeParams.namespace}/${routeParams.type}`,
     );
-    if(response.status === 404) {
-      navigate("/404")
+    if (response.status === 404) {
+      navigate("/404");
     } else {
       const provider = await response.json();
       setProvider(provider);