Merge pull request #89 from kloudlite/features/frontend

Features/frontend
kloudlite · Feb 14, 2024 · 195dd99 · 195dd99
2 parents 70dc024 + 828df53
commit 195dd99
Show file tree

Hide file tree

Showing 24 changed files with 541 additions and 816 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,7 @@ public/**
 
 out
 .firebase
+.firebaseConfig.js
 
 storybook-dist
 

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
 		"@codemirror/legacy-modes": "^6.3.3",
 		"@jengaicons/react": "^1.3.0",
 		"@mdx-js/react": "^2.3.0",
-		"@oshq/react-select": "^1.3.0",
+		"@oshq/react-select": "^1.3.2",
 		"@radix-ui/primitive": "^1.0.1",
 		"@radix-ui/react-alert-dialog": "1.0.4",
 		"@radix-ui/react-checkbox": "^1.0.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apps/console/components/multi-step-progress.tsx b/src/apps/console/components/multi-step-progress.tsx
@@ -1,41 +1,42 @@
 import { Check } from '@jengaicons/react';
-import React, {
-  Children,
-  ReactElement,
-  ReactNode,
-  useRef,
-  useState,
-} from 'react';
+import React, { Children, ReactElement, ReactNode, useState } from 'react';
 import { cn } from '~/components/utils';
 
 interface IUseMultiStepProgress {
   defaultStep: number;
   totalSteps: number;
+  onChange?: (step: number) => void;
 }
 export const useMultiStepProgress = ({
   defaultStep = 1,
   totalSteps = 1,
+  onChange,
 }: IUseMultiStepProgress) => {
   const [currentIndex, setCurrentIndex] = useState(defaultStep);
 
   const nextStep = () => {
     if (currentIndex < totalSteps) {
+      onChange?.(currentIndex + 1);
       setCurrentIndex((prev) => prev + 1);
     }
   };
   const prevStep = () => {
     if (currentIndex > 1) {
+      onChange?.(currentIndex - 1);
       setCurrentIndex((prev) => prev - 1);
     }
   };
 
   const jumpStep = (step: number) => {
+    onChange?.(step);
     setCurrentIndex(step);
   };
 
   const reset = () => {
+    onChange?.(1);
     setCurrentIndex(1);
   };
+
   return { currentStep: currentIndex, nextStep, prevStep, reset, jumpStep };
 };
 
@@ -45,9 +46,10 @@ type IProgressTrackerItem = {
   label: ReactNode;
   children?: ReactNode;
   onClick?: () => void;
-  hasBorder: boolean;
   index: number;
-  noJump?: boolean;
+  noJump?: (step: number) => boolean;
+  editable?: boolean;
+  step: number;
 };
 
 function ProgressTrackerItem(
@@ -59,17 +61,19 @@ function ProgressTrackerItem(
     completed = false,
     label,
     onClick,
-    hasBorder,
     index,
     noJump,
+    editable,
+    step,
   } = props;
-
   return (
     <div
       className={cn(
-        'pl-3xl  border-dashed flex flex-col -mt-[10px]',
-        { 'border-l': hasBorder || active },
-        completed ? 'border-l-border-primary' : 'border-l-icon-disabled'
+        'pl-5xl  border-dashed flex flex-col -mt-[10px] border-l-icon-disabled',
+        {
+          '[&:not(:last-child)]:border-l': !active,
+          'border-l': active,
+        }
       )}
     >
       <div>
@@ -78,21 +82,29 @@ function ProgressTrackerItem(
           aria-label={`step-${index}`}
           onClick={onClick}
           className={cn(
-            'border-2 border-surface-basic-default headingXs box-content w-3xl h-3xl rounded-full flex items-center justify-center absolute left-0 -ml-[12px]',
-            completed
-              ? 'bg-surface-primary-default text-text-on-primary'
-              : 'bg-surface-primary-selected',
-            active && !completed ? 'text-text-primary' : 'text-text-disabled',
-            onClick && !noJump ? 'cursor-pointer' : 'cursor-default'
+            'border-2 border-surface-basic-default headingXs box-content w-3xl h-3xl rounded-full flex items-center justify-center absolute left-0 ',
+            onClick && !noJump?.(step) ? 'cursor-pointer' : 'cursor-default',
+            {
+              'bg-surface-primary-default text-text-on-primary':
+                !!completed && !!editable,
+              'bg-icon-disabled text-text-on-primary': !!completed && !editable,
+              'bg-surface-basic-active text-text-disabled':
+                !completed && !active,
+              'bg-surface-primary-selected text-text-default':
+                active && !completed,
+            }
           )}
         >
           {completed ? <Check size={12} /> : index}
         </button>
         <span
           className={cn(
             '-mt-[14px] headingMd',
-            !noJump ? 'cursor-pointer select-none' : '',
-            !active || completed ? 'text-text-disabled' : 'text-text-default'
+            !noJump?.(step) ? 'cursor-pointer select-none' : 'cursor-default',
+            {
+              'text-text-default': !completed || (!!completed && !!editable),
+              'text-text-disabled': !!completed && !editable,
+            }
           )}
           onClick={onClick}
         >
@@ -109,8 +121,15 @@ interface IStep {
   label: ReactNode;
   step: number;
   className?: string;
+  completed?: boolean;
 }
-const Step = ({ children, step, className, label: _label }: IStep) => {
+const Step = ({
+  children,
+  step,
+  className,
+  label: _label,
+  completed: _completed,
+}: IStep) => {
   return (
     <div className={className} data-step={step}>
       {children}
@@ -122,13 +141,15 @@ interface IMultiStepProgress {
   children: ReactElement<IStep> | ReactElement<IStep>[];
   currentStep: number;
   jumpStep: (step: number) => void;
-  noJump?: boolean;
+  noJump?: (step: number) => boolean;
+  editable?: boolean;
 }
 const Root = ({
   children,
   currentStep,
   jumpStep,
   noJump,
+  editable = true,
 }: IMultiStepProgress) => {
   let child = children;
   // @ts-ignore
@@ -138,26 +159,26 @@ const Root = ({
   }
 
   return (
-    <div className="flex flex-col relative [counter-reset:steps]">
+    <div className="pl-[12px] flex flex-col relative [counter-reset:steps]">
       {Children.map(child, (ch, index) => {
         return (
           <ProgressTrackerItem
             {...ch}
             index={index + 1}
             label={ch.props.label}
-            hasBorder={ch.props.step <= currentStep}
+            step={ch.props.step}
             active={currentStep === ch.props.step}
-            noJump={noJump}
+            noJump={noJump || (() => !(index + 1 < currentStep))}
+            editable={editable}
+            completed={currentStep > ch.props.step}
             onClick={() => {
-              if (index + 1 < currentStep) {
-                if (!noJump) {
-                  jumpStep(index + 1);
-                }
+              if (noJump ? !noJump?.(ch.props.step) : index + 1 < currentStep) {
+                jumpStep(index + 1);
               }
             }}
           >
             {currentStep === ch.props.step ? (
-              <div className="py-3xl">{ch.props.children}</div>
+              <div className="pt-3xl pb-5xl">{ch.props.children}</div>
             ) : null}
           </ProgressTrackerItem>
         );

diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
@@ -28,14 +28,6 @@ type ISetContainer<T = any> = (fn: ((val: T) => T) | T, index?: number) => void;
 
 const CreateAppContext = createContext<any>(null);
 
-export type createAppTabs =
-  | 'Environment'
-  | 'Application details'
-  | 'Compute'
-  | 'Network'
-  | 'Review'
-  | NonNullableString;
-
 export type createAppEnvPage =
   | 'environment_variables'
   | 'config_mounts'
@@ -47,7 +39,7 @@ interface IappState {
   };
   activeContIndex: number;
   envPage: createAppEnvPage;
-  page: createAppTabs;
+  page: number;
   app: AppIn;
 }
 
@@ -99,7 +91,7 @@ export const useAppState = () => {
     });
   };
 
-  const setPage: ISetState<createAppTabs> = (fn) => {
+  const setPage: ISetState<number> = (fn) => {
     if (typeof fn === 'function') {
       setState((s) => ({ ...s, page: fn(s.page) }));
     } else {
@@ -117,7 +109,7 @@ export const useAppState = () => {
 
   useEffect(() => {
     if (!page) {
-      setPage('Application details');
+      setPage(1);
     }
     if (!envPage) {
       setEnvPage('environment_variables');
@@ -159,7 +151,7 @@ export const useAppState = () => {
     }
   };
 
-  const isPageComplete = (page: createAppTabs) => {
+  const isPageComplete = (page: number) => {
     if (completePages) return completePages[page];
 
     setState((s) => {
@@ -171,7 +163,7 @@ export const useAppState = () => {
     return false;
   };
 
-  const markPageAsCompleted = (page: createAppTabs) => {
+  const markPageAsCompleted = (page: number) => {
     setState((s) => {
       return {
         ...s,
@@ -185,7 +177,7 @@ export const useAppState = () => {
 
   const resetState = (iApp?: AppIn) => {
     setState({
-      page: 'Application details',
+      page: 1,
       app: iApp || defaultApp,
       completePages: {},
       envPage: 'environment_variables',

diff --git a/src/apps/console/page-components/new-cluster.tsx b/src/apps/console/page-components/new-cluster.tsx
@@ -65,6 +65,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
   }));
 
   const { a: accountName } = useParams();
+  const rootUrl = `/${accountName}/infra/clusters`;
 
   const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
     defaultStep: isOnboarding ? 4 : 1,
@@ -151,7 +152,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
             throw e[0];
           }
           toast.success('Cluster created successfully');
-          navigate(`/${accountName}/infra/clusters`);
+          navigate(rootUrl);
         } catch (err) {
           handleError(err);
         }
@@ -173,7 +174,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
 
   const getView = () => {
     return (
-      <div className="flex flex-col gap-3xl py-3xl">
+      <div className="flex flex-col gap-3xl">
         <TitleBox
           subtitle="A cluster is a group of interconnected elements working together as a
           single unit."
@@ -307,14 +308,15 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
           : {
               backButton: {
                 content: 'Back to clusters',
-                to: `/${accountName}/infra/clusters`,
+                to: rootUrl,
               },
             })}
       >
         <MultiStepProgress.Root
-          noJump={isOnboarding}
+          noJump={(step) => isOnboarding || !(step < currentStep)}
           currentStep={currentStep}
           jumpStep={jumpStep}
+          editable={!isOnboarding}
         >
           {!isOnboarding ? (
             <>
@@ -328,7 +330,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
                     jumpStep(1);
                   }}
                 >
-                  <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
+                  <div className="flex flex-col p-xl gap-lg rounded border border-border-default flex-1 overflow-hidden">
                     <div className="flex flex-col gap-md  pb-lg  border-b border-border-default">
                       <div className="bodyMd-semibold text-text-default">
                         Cluster name

diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx
@@ -28,6 +28,7 @@ const NewProject = () => {
 
   const params = useParams();
   const { a: accountName } = params;
+  const rootUrl = `/${accountName}/projects`;
 
   const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
     defaultStep: 1,
@@ -68,7 +69,7 @@ const NewProject = () => {
             throw e[0];
           }
           toast.success('project created successfully');
-          navigate(`/${accountName}/projects`);
+          navigate(rootUrl);
         } catch (err) {
           handleError(err);
         }
@@ -102,7 +103,7 @@ const NewProject = () => {
         subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite teams"
         backButton={{
           content: 'Back to projects',
-          to: `/${accountName}/projects`,
+          to: rootUrl,
         }}
       >
         <MultiStepProgress.Root currentStep={currentStep} jumpStep={jumpStep}>

diff --git a/src/apps/console/routes/_a+/$a+/new-project.tsx b/src/apps/console/routes/_a+/$a+/new-project.tsx
@@ -5,7 +5,6 @@ import { getPagination, getSearch } from '~/console/server/utils/common';
 import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
 
-
 const _NewProject = () => {
   return <NewProject />;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ public/** @@
     out
     .firebase
+    .firebaseConfig.js
     storybook-dist
@@ Expand Down @@