From d5f8987e1c931cdfb2c6bb0a7cecbc41b006f1c3 Mon Sep 17 00:00:00 2001
From: corpulent <artemgolub@gmail.com>
Date: Thu, 4 Aug 2022 14:32:56 +0300
Subject: [PATCH] fix: random form fixes

---
 services/frontend/src/App.tsx                 | 10 +++-
 .../src/components/Auth/Login/index.tsx       |  2 +-
 .../src/components/Auth/Signup/index.tsx      |  2 +-
 .../src/components/Modal/service/General.tsx  |  5 +-
 .../components/Modal/service/form-utils.ts    | 26 +++++-----
 .../frontend/src/components/Project/index.tsx | 21 +++++---
 .../src/components/global/SideBar.tsx         | 48 +++++++++++--------
 services/frontend/src/types/index.ts          |  1 +
 8 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx
index 6e152d7..e9a2176 100644
--- a/services/frontend/src/App.tsx
+++ b/services/frontend/src/App.tsx
@@ -87,9 +87,15 @@ export default function App() {
           <Toaster />
           <SideBar isAuthenticated={isAuthenticated} state={state} />
           <Routes>
-            <Route path="/projects/:uuid" element={<Project />} />
+            <Route
+              path="/projects/:uuid"
+              element={<Project isAuthenticated={isAuthenticated} />}
+            />
 
-            <Route path="/projects/new" element={<Project />} />
+            <Route
+              path="/projects/new"
+              element={<Project isAuthenticated={isAuthenticated} />}
+            />
 
             <Route
               path="/"
diff --git a/services/frontend/src/components/Auth/Login/index.tsx b/services/frontend/src/components/Auth/Login/index.tsx
index 79ef7bb..171c615 100644
--- a/services/frontend/src/components/Auth/Login/index.tsx
+++ b/services/frontend/src/components/Auth/Login/index.tsx
@@ -58,7 +58,7 @@ const Login = (props: IProfileProps) => {
   return (
     <>
       <div className="flex flex-col">
-        <main className="py-6 md:w-2/3 lg:w-1/4 mx-auto">
+        <main className="py-6 md:w-1/3 lg:w-1/4 mx-auto">
           <h2 className="mb-4 px-4 sm:px-6 md:flex-row md:px-8 text-xl font-extrabold dark:text-white text-gray-900">
             Sign in
           </h2>
diff --git a/services/frontend/src/components/Auth/Signup/index.tsx b/services/frontend/src/components/Auth/Signup/index.tsx
index ec85521..a2a36aa 100644
--- a/services/frontend/src/components/Auth/Signup/index.tsx
+++ b/services/frontend/src/components/Auth/Signup/index.tsx
@@ -62,7 +62,7 @@ const Signup = (props: IProfileProps) => {
   return (
     <>
       <div className="flex flex-col">
-        <main className="py-6 md:w-2/3 lg:w-1/4 mx-auto">
+        <main className="py-6 md:w-1/3 lg:w-1/4 mx-auto">
           <h2 className="mb-4 px-4 sm:px-6 md:flex-row md:px-8 text-xl font-extrabold dark:text-white text-gray-900">
             Create account
           </h2>
diff --git a/services/frontend/src/components/Modal/service/General.tsx b/services/frontend/src/components/Modal/service/General.tsx
index 0a144db..4f556fd 100644
--- a/services/frontend/src/components/Modal/service/General.tsx
+++ b/services/frontend/src/components/Modal/service/General.tsx
@@ -25,13 +25,14 @@ const General = () => {
       <TextField label="Service name" name="serviceName" required={true} />
 
       <Group>
-        <TextField label="Image name" name="imageName" required={true} />
+        <TextField label="Image name" name="imageName" required={false} />
         <TextField label="Image tag" name="imageTag" />
       </Group>
 
-      <TextField label="Container name" name="containerName" required={true} />
+      <TextField label="Container name" name="containerName" required={false} />
       <TextField label="Command" name="command" required={false} />
       <TextField label="Entrypoint" name="entrypoint" required={false} />
+      <TextField label="Env file" name="envFile" required={false} />
       <TextField label="Working directory" name="workingDir" required={false} />
 
       <Toggle
diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 7e18b06..27cfc4a 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -105,6 +105,7 @@ const initialValues: IEditServiceForm = {
   },
   dependsOn: [],
   entrypoint: "",
+  envFile: "",
   imageName: "",
   imageTag: "",
   serviceName: "",
@@ -236,13 +237,11 @@ export const validationSchema = yup.object({
     .required("Service name is required"),
   imageName: yup
     .string()
-    .max(256, "Image name should be 256 characters or less")
-    .required("Image name is required"),
+    .max(256, "Image name should be 256 characters or less"),
   imageTag: yup.string().max(256, "Image tag should be 256 characters or less"),
   containerName: yup
     .string()
-    .max(256, "Container name should be 256 characters or less")
-    .required("Container name is required"),
+    .max(256, "Container name should be 256 characters or less"),
   profiles: yup.array(
     yup
       .string()
@@ -297,6 +296,7 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
     deploy,
     depends_on,
     entrypoint,
+    env_file,
     image,
     container_name = "",
     environment,
@@ -459,6 +459,7 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
     dependsOn:
       (depends_on as string[]) ?? (initialValues.dependsOn as string[]),
     entrypoint: (entrypoint as string) ?? (initialValues.entrypoint as string),
+    envFile: (env_file as string) ?? (initialValues.envFile as string),
     imageName,
     imageTag,
     serviceName: node_name,
@@ -478,9 +479,10 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => {
     ports: ports0.map((port) => {
       const slashIndex = port.lastIndexOf("/");
       const protocol = slashIndex >= 0 ? port.substring(slashIndex + 1) : "";
-      const [hostPort, containerPort] = port
-        .substring(0, slashIndex)
-        .split(":");
+      const [hostPort, containerPort] =
+        slashIndex >= 0
+          ? port.substring(0, slashIndex).split(":")
+          : port.split(":");
 
       if (!["", "tcp", "udp"].includes(protocol)) {
         throw new Error(
@@ -508,6 +510,7 @@ export const getFinalValues = (
     deploy,
     dependsOn,
     entrypoint,
+    envFile,
     environmentVariables,
     volumes,
     networks,
@@ -605,10 +608,11 @@ export const getFinalValues = (
       }),
       depends_on: pruneArray(dependsOn),
       entrypoint: pruneString(entrypoint),
-      image: `${values.imageName}${
-        values.imageTag ? `:${values.imageTag}` : ""
-      }`,
-      container_name: values.containerName,
+      env_file: pruneString(envFile),
+      image: pruneString(
+        `${values.imageName}${values.imageTag ? `:${values.imageTag}` : ""}`
+      ),
+      container_name: pruneString(values.containerName),
       environment: packArrayAsObject(environmentVariables, "key", "value"),
       volumes: pruneArray(
         volumes.map(
diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx
index 80f9233..4126f81 100644
--- a/services/frontend/src/components/Project/index.tsx
+++ b/services/frontend/src/components/Project/index.tsx
@@ -42,7 +42,12 @@ import CodeEditor from "../CodeEditor";
 import { useTitle } from "../../hooks";
 import VisibilitySwitch from "../global/VisibilitySwitch";
 
-export default function Project() {
+interface IProjectProps {
+  isAuthenticated: boolean;
+}
+
+export default function Project(props: IProjectProps) {
+  const { isAuthenticated } = props;
   const { uuid } = useParams<{ uuid: string }>();
   const { height } = useWindowDimensions();
   const { data, error, isFetching } = useProject(uuid);
@@ -467,12 +472,14 @@ export default function Project() {
                 />
 
                 <div className="flex flex-col space-y-2 w-full justify-end mb-4  md:flex-row md:space-y-0 md:space-x-2 md:mb-0">
-                  <VisibilitySwitch
-                    isVisible={isVisible}
-                    onToggle={() => {
-                      setIsVisible(!isVisible);
-                    }}
-                  />
+                  {isAuthenticated && (
+                    <VisibilitySwitch
+                      isVisible={isVisible}
+                      onToggle={() => {
+                        setIsVisible(!isVisible);
+                      }}
+                    />
+                  )}
 
                   <button
                     onClick={() => onSave()}
diff --git a/services/frontend/src/components/global/SideBar.tsx b/services/frontend/src/components/global/SideBar.tsx
index 1c34b40..1c5c684 100644
--- a/services/frontend/src/components/global/SideBar.tsx
+++ b/services/frontend/src/components/global/SideBar.tsx
@@ -19,13 +19,15 @@ export default function SideBar(props: ISideBarProps) {
       name: "Projects",
       href: "/projects",
       icon: BookOpenIcon,
-      current: pathname.match(projRegex) ? true : false
+      current: pathname.match(projRegex) ? true : false,
+      visible: isAuthenticated
     },
     {
       name: "New project",
       href: "/projects/new",
       icon: PlusIcon,
-      current: false
+      current: false,
+      visible: true
     }
   ];
 
@@ -36,31 +38,35 @@ export default function SideBar(props: ISideBarProps) {
       <div className="md:flex md:w-16 md:flex-col md:fixed md:inset-y-0">
         <div className="flex justify-between flex-col sm:flex-row md:flex-col md:flex-grow md:pt-5 bg-blue-700 overflow-y-auto">
           <div className="flex items-center flex-shrink-0 mx-auto p-2 ">
-            <Link to={isAuthenticated ? "/" : "projects/new"}>
+            <Link to={isAuthenticated ? "/" : "login"}>
               <Logo />
             </Link>
           </div>
 
           <div className="md:mt-5 flex-1 flex flex-col items-center sm:flex-row md:flex-col justify-end">
             <nav className="flex md:flex-1 md:flex-col items-center md:space-y-1">
-              {navigation.map((item) => (
-                <a
-                  key={item.name}
-                  href={item.href}
-                  className={classNames(
-                    item.current
-                      ? "bg-blue-800 text-white"
-                      : "text-blue-100 hover:bg-blue-600",
-                    "group flex items-center justify-center p-2 text-sm font-medium rounded-md"
-                  )}
-                >
-                  <item.icon
-                    className="mr-3 sm:mr-0 flex-shrink-0 h-5 w-5"
-                    aria-hidden="true"
-                  />
-                  <span className="sm:hidden">{item.name}</span>
-                </a>
-              ))}
+              {navigation.map((item) => {
+                if (item.visible) {
+                  return (
+                    <a
+                      key={item.name}
+                      href={item.href}
+                      className={classNames(
+                        item.current
+                          ? "bg-blue-800 text-white"
+                          : "text-blue-100 hover:bg-blue-600",
+                        "group flex items-center justify-center p-2 text-sm font-medium rounded-md"
+                      )}
+                    >
+                      <item.icon
+                        className="mr-3 sm:mr-0 flex-shrink-0 h-5 w-5"
+                        aria-hidden="true"
+                      />
+                      <span className="sm:hidden">{item.name}</span>
+                    </a>
+                  );
+                }
+              })}
             </nav>
 
             <UserMenu
diff --git a/services/frontend/src/types/index.ts b/services/frontend/src/types/index.ts
index f906528..abc49aa 100644
--- a/services/frontend/src/types/index.ts
+++ b/services/frontend/src/types/index.ts
@@ -454,6 +454,7 @@ export interface IEditServiceForm {
     }[];
   };
   entrypoint: string;
+  envFile: string;
   serviceName: string;
   imageName: string;
   imageTag: string;