Merge pull request #43 from kloudlite/features/design

Features/design
kloudlite · Dec 20, 2023 · f305de5 · f305de5
2 parents 675c09c + b230890
commit f305de5
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 81 deletions.
diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
@@ -120,7 +120,7 @@ interface IUpdateMeta {
 }
 
 // Component for Status parsing
-type IStatus = 'deleting' | 'none';
+export type IStatus = 'deleting' | 'notready' | 'none';
 
 interface IStatusMeta {
   markedForDeletion?: boolean;
@@ -141,7 +141,9 @@ type ICommonMeta = IUpdateMeta & IStatusMeta;
 const parseStatusComponent = ({ status }: { status: IStatus }) => {
   switch (status) {
     case 'deleting':
-      return <div className="bodySm text-text-soft">Deleting...</div>;
+      return <div className="bodySm text-text-soft pulsable">Deleting...</div>;
+    case 'notready':
+      return <div className="bodySm text-text-soft pulsable">Not Ready</div>;
     default:
       return null;
   }
@@ -152,6 +154,8 @@ export const parseStatus = (item: IStatusMeta) => {
 
   if (item.markedForDeletion) {
     status = 'deleting';
+  } else if (!item.status?.isReady) {
+    status = 'notready';
   }
 
   return { status, component: parseStatusComponent({ status }) };
@@ -183,6 +187,7 @@ export const listRender = ({
         key: generateKey(keyPrefix, 'status'),
         className,
         render: () => parseStatus(resource).component,
+        status: parseStatus(resource).status,
       };
     },
   };

diff --git a/src/apps/console/routes/_.$account.$cluster.nodepools/handle-nodepool.tsx b/src/apps/console/routes/_.$account.$cluster.nodepools/handle-nodepool.tsx
@@ -19,6 +19,7 @@ import { awsRegions } from '~/console/dummy/consts';
 import { mapper } from '~/components/utils';
 import { IDialogBase } from '~/console/components/types.d';
 import { Checkbox } from '~/components/atoms/checkbox';
+import { Switch } from '~/components/atoms/switch';
 import { findNodePlan, nodePlans, provisionTypes } from './nodepool-utils';
 import { IClusterContext } from '../_.$account.$cluster';
 
@@ -191,6 +192,13 @@ const Root = (props: IDialog) => {
     <Popup.Form onSubmit={handleSubmit}>
       <Popup.Content>
         <div className="flex flex-col gap-2xl">
+          <TextInput
+            label="Name"
+            value={values.displayName}
+            onChange={handleChange('displayName')}
+            error={!!errors.displayName}
+            message={errors.displayName}
+          />
           {isUpdate && (
             <Chips.Chip
               {...{
@@ -202,13 +210,6 @@ const Root = (props: IDialog) => {
               }}
             />
           )}
-          <TextInput
-            label="Name"
-            value={values.displayName}
-            onChange={handleChange('displayName')}
-            error={!!errors.displayName}
-            message={errors.displayName}
-          />
 
           {!isUpdate && (
             <IdSelector
@@ -275,46 +276,47 @@ const Root = (props: IDialog) => {
               />
             </>
           )}
-          <div className="flex flex-row gap-xl items-end">
-            <div className="flex-1">
-              <div>AutoScale</div>
-            </div>
-            <div className="flex-1">
-              <Checkbox
-                onChange={(v) => handleChange('autoScale')(dummyEvent(v))}
-                label={values.autoScale ? 'Enabled' : 'Disabled'}
-              />
-            </div>
-          </div>
 
           <div className="flex flex-row gap-xl items-end">
-            <div className="flex-1">
-              <NumberInput
-                label={values.autoScale ? 'Min Node Count' : `Node Count`}
-                placeholder="Minimum"
-                value={values.minimum}
-                error={!!errors.minimum}
-                message={errors.minimum}
-                onChange={(e) => {
-                  handleChange('minimum')(e);
-                  if (!values.autoScale) {
-                    handleChange('maximum')(e);
-                  }
-                }}
-              />
-            </div>
-            {values.autoScale && (
+            <div className="flex flex-row gap-xl items-end flex-1 ">
               <div className="flex-1">
                 <NumberInput
-                  error={!!errors.maximum}
-                  message={errors.maximum}
-                  label="Max Node Count"
-                  placeholder="Maximum"
-                  value={values.maximum}
-                  onChange={handleChange('maximum')}
+                  label={values.autoScale ? 'Min Node Count' : `Node Count`}
+                  placeholder="Minimum"
+                  value={values.minimum}
+                  error={!!errors.minimum}
+                  message={errors.minimum}
+                  onChange={(e) => {
+                    handleChange('minimum')(e);
+                    if (!values.autoScale) {
+                      handleChange('maximum')(e);
+                    }
+                  }}
+                />
+              </div>
+              {values.autoScale && (
+                <div className="flex-1">
+                  <NumberInput
+                    error={!!errors.maximum}
+                    message={errors.maximum}
+                    label="Max Node Count"
+                    placeholder="Maximum"
+                    value={values.maximum}
+                    onChange={handleChange('maximum')}
+                  />
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col gap-md min-w-[115px]">
+              <div className="bodyMd-medium text-text-default">AutoScale</div>
+              <div className="flex items-center h-form-text-field-height">
+                <Switch
+                  label={values.autoScale ? 'Enabled' : 'Disabled'}
+                  checked={values.autoScale}
+                  onChange={(v) => handleChange('autoScale')(dummyEvent(v))}
                 />
               </div>
-            )}
+            </div>
           </div>
 
           {/* {show?.type === DIALOG_TYPE.ADD && ( */}
@@ -353,7 +355,7 @@ const HandleNodePool = (props: IDialog) => {
 
   return (
     <Popup.Root show={visible} onOpenChange={(v) => setVisible(v)}>
-      <Popup.Header>{isUpdate ? 'Add nodepool' : 'Edit nodepool'}</Popup.Header>
+      <Popup.Header>{isUpdate ? 'Edit nodepool' : 'Add nodepool'}</Popup.Header>
       {(!isUpdate || (isUpdate && props.data)) && <Root {...props} />}
     </Popup.Root>
   );

diff --git a/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx b/src/apps/console/routes/_.$account.$cluster.nodepools/nodepool-resources.tsx
@@ -1,10 +1,4 @@
-import {
-  CodeSimple,
-  PencilLine,
-  Trash,
-  Cpu,
-  ChevronDown,
-} from '@jengaicons/react';
+import { PencilLine, Trash, Cpu } from '@jengaicons/react';
 import { generateKey, titleCase } from '~/components/utils';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
@@ -32,10 +26,10 @@ import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { Link } from '@remix-run/react';
-import { listRender } from '~/console/components/commons';
+import { IStatus, listRender } from '~/console/components/commons';
 import AnimateHide from '~/components/atoms/animate-hide';
 import HandleNodePool from './handle-nodepool';
-import { findNodePlan, findNodePlanWithCategory } from './nodepool-utils';
+import { findNodePlanWithCategory } from './nodepool-utils';
 
 const RESOURCE_NAME = 'nodepool';
 type BaseType = ExtractNodeType<INodepools>;
@@ -54,9 +48,11 @@ const parseItem = (item: BaseType) => {
 const ExtraButton = ({
   onDelete,
   onEdit,
+  status: _,
 }: {
   onDelete: () => void;
   onEdit: () => void;
+  status: IStatus;
 }) => {
   return (
     <ResourceExtraAction
@@ -107,7 +103,7 @@ const ListDetail = (
 ) => {
   const { item, open, onDelete, onEdit } = props;
   const { name, id } = parseItem(item);
-  const { minCount, maxCount, targetCount, cloudProvider, aws } = item.spec;
+  const { minCount, maxCount, cloudProvider, aws } = item.spec;
   const keyPrefix = `${RESOURCE_NAME}-${id}`;
   const lR = listRender({ keyPrefix, resource: item });
 
@@ -157,6 +153,9 @@ const ListDetail = (
         return null;
     }
   };
+
+  const statusRender = lR.statusRender({ className: 'w-[180px]' });
+
   return (
     <div className="w-full flex flex-col">
       <div className="flex flex-row items-center">
@@ -175,7 +174,7 @@ const ListDetail = (
           <ListItem data={parseProviderInfo()} />
         </div>
         <div className="flex-grow flex items-center justify-center">
-          {lR.statusRender({ className: 'w-[180px]' }).render()}
+          {statusRender.render()}
         </div>
         {/* <div className="flex flex-row gap-2xl items-center pl-3xl pr-xl mr-3xl border-border-disabled border-r w-[160px] min-w-[160px]">
           <div className="flex flex-col gap-sm">
@@ -199,10 +198,11 @@ const ListDetail = (
         <ExtraButton
           onDelete={() => onDelete(item)}
           onEdit={() => onEdit(item)}
+          status={statusRender.status}
         />
       </div>
 
-      <AnimateHide show={open}>hello</AnimateHide>
+      {/* <AnimateHide show={open}>hello</AnimateHide> */}
     </div>
   );
 };

diff --git a/src/apps/console/routes/_.$account.$cluster.nodepools/route.tsx b/src/apps/console/routes/_.$account.$cluster.nodepools/route.tsx
@@ -12,8 +12,6 @@ import {
 } from '~/console/server/utils/auth-utils';
 import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
-import { parseName } from '~/console/server/r-utils/common';
-import { SubHeaderTitle } from '~/console/components/commons';
 import HandleNodePool from './handle-nodepool';
 import Tools from './tools';
 import NodepoolResources from './nodepool-resources';
@@ -39,12 +37,10 @@ export const loader = async (ctx: IRemixCtx) => {
   return defer({ promise });
 };
 
-const ClusterDetail = () => {
+const Nodepools = () => {
   const [visible, setVisible] = useState(false);
   const { promise } = useLoaderData<typeof loader>();
 
-  const { cluster, account } = useOutletContext<IClusterContext>();
-
   return (
     <>
       <LoadingComp
@@ -60,6 +56,9 @@ const ClusterDetail = () => {
             return null;
           }
           const { pageInfo, totalCount } = nodePoolData;
+
+          console.log(nodepools);
+
           return (
             <Wrapper
               header={{
@@ -115,4 +114,4 @@ const ClusterDetail = () => {
   );
 };
 
-export default ClusterDetail;
+export default Nodepools;
diff --git a/src/apps/console/routes/_.$account.$cluster.settings.general/route.tsx b/src/apps/console/routes/_.$account.$cluster.settings.general/route.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import { CopySimple } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
-import { useLoaderData, useOutletContext } from '@remix-run/react';
+import { useLoaderData, useNavigate, useOutletContext } from '@remix-run/react';
 import { useEffect, useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import { TextInput } from '~/components/atoms/input';
@@ -15,16 +15,12 @@ import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import SubNavAction from '~/console/components/sub-nav-action';
 import { awsRegions } from '~/console/dummy/consts';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import {
-  ICluster,
-  IClusters,
-} from '~/console/server/gql/queries/cluster-queries';
+import { ICluster } from '~/console/server/gql/queries/cluster-queries';
 import {
   ConsoleApiType,
   GQLServerHandler,
 } from '~/console/server/gql/saved-queries';
 import {
-  ExtractNodeType,
   ensureResource,
   parseName,
   parseNodes,
@@ -95,6 +91,7 @@ const SettingGeneral = () => {
   const { setHasChanges, resetAndReload } = useUnsavedChanges();
   const reload = useReload();
   const api = useConsoleApi();
+  const navigate = useNavigate();
 
   const { copy } = useClipboard({
     onSuccess() {
@@ -277,6 +274,7 @@ const SettingGeneral = () => {
             reload();
             toast.success(`Cluster deleted successfully`);
             setDeleteCluster(false);
+            navigate(`/${account}/clusters`);
           } catch (err) {
             handleError(err);
           }

diff --git a/src/apps/console/routes/_.$account.clusters._index/cluster-resources.tsx b/src/apps/console/routes/_.$account.clusters._index/cluster-resources.tsx
@@ -1,6 +1,6 @@
 import { GearSix } from '@jengaicons/react';
 import { Link, useParams } from '@remix-run/react';
-import { generateKey, titleCase } from '~/components/utils';
+import { cn, generateKey, titleCase } from '~/components/utils';
 import { listRender } from '~/console/components/commons';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
@@ -87,6 +87,7 @@ const GridView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
       {items.map((item, index) => {
         const { name, id, provider, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+        const lR = listRender({ keyPrefix, resource: item });
         return (
           <Grid.Column
             key={id}
@@ -111,6 +112,7 @@ const GridView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
                   </div>
                 ),
               },
+              lR.statusRender({ className: '' }),
               {
                 key: generateKey(keyPrefix, updateInfo.author),
                 render: () => (
@@ -136,11 +138,23 @@ const ListView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
         const { name, id, provider } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         const lR = listRender({ keyPrefix, resource: item });
+        const statusRender = lR.statusRender({
+          className: 'w-[180px] mr-[50px]',
+        });
+
         return (
           <List.Row
             key={id}
-            className="!p-3xl"
-            to={`/${account}/${id}/overview`}
+            className={cn(
+              '!p-3xl',
+              statusRender.status === 'notready'
+                ? '!cursor-default hover:!bg-surface-basic-default'
+                : ''
+            )}
+            // to={`/${account}/${id}/overview`}
+            {...(statusRender.status !== 'notready'
+              ? { to: `/${account}/${id}/overview` }
+              : {})}
             columns={[
               {
                 key: generateKey(keyPrefix, name + id),
@@ -153,7 +167,7 @@ const ListView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
                   />
                 ),
               },
-              lR.statusRender({ className: 'w-[180px] mr-[50px]' }),
+              statusRender,
               {
                 key: generateKey(keyPrefix, `${provider}`),
                 className: 'w-[150px] text-start',

diff --git a/src/apps/console/routes/_.$account.clusters._index/route.tsx b/src/apps/console/routes/_.$account.clusters._index/route.tsx
@@ -121,6 +121,7 @@ const Clusters = () => {
     >
       {({ clustersData, secretsCount }) => {
         const clusters = parseNodes(clustersData);
+        console.log(clusters);
 
         if (!clusters) {
           return null;

diff --git a/src/design-system/components/atoms/chips.tsx b/src/design-system/components/atoms/chips.tsx
@@ -129,6 +129,7 @@ const ChipBase = React.forwardRef<HTMLButtonElement, IChipBase>(
         {compType === 'REMOVABLE' && (
           <RovingFocusGroup.Item asChild focusable>
             <button
+              aria-label="close"
               type="button"
               disabled={disabled}
               onClick={(_e) => {