minor name refactoring inside infra (#316)

kloudlite · Oct 9, 2024 · b967bf1 · b967bf1
1 parent 288045c
commit b967bf1
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 91 deletions.
diff --git a/src/apps/console/routes/_main+/$account+/infra+/_layout.tsx b/src/apps/console/routes/_main+/$account+/infra+/_layout.tsx
@@ -13,7 +13,7 @@ const Infra = () => {
   return (
     <SidebarLayout
       navItems={[
-        { label: 'Attached Computes', value: 'clusters' },
+        { label: 'Attached Clusters', value: 'clusters' },
         // { label: 'Helm Repos', value: 'helm-repos' },
         // { label: 'Bring your own Kubernetes', value: 'byok-cluster' },
         { label: 'Wireguard Devices', value: 'vpn-devices' },

diff --git a/src/apps/console/routes/_main+/$account+/infra+/byok-cluster/handle-byok-cluster.tsx b/src/apps/console/routes/_main+/$account+/infra+/byok-cluster/handle-byok-cluster.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react/destructuring-assignment */
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { Button } from '~/components/atoms/button';
 import { Checkbox } from '~/components/atoms/checkbox';
@@ -13,6 +14,7 @@ import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
+import { LocalDeviceClusterInstructions } from '../clusters/handle-cluster-resource';
 
 type IDialog = IDialogBase<ExtractNodeType<IByocClusters>>;
 
@@ -21,22 +23,23 @@ const Root = (props: IDialog) => {
 
   const api = useConsoleApi();
   const reloadPage = useReload();
+  const [show, setShow] = useState(false);
 
   const { values, errors, handleChange, handleSubmit, resetValues, isLoading } =
     useForm({
       initialValues: isUpdate
         ? {
-          displayName: props.data.displayName,
-          name: parseName(props.data),
-          visibilityMode: false,
-          isNameError: false,
-        }
+            displayName: props.data.displayName,
+            name: parseName(props.data),
+            visibilityMode: false,
+            isNameError: false,
+          }
         : {
-          name: '',
-          displayName: '',
-          visibilityMode: false,
-          isNameError: false,
-        },
+            name: '',
+            displayName: '',
+            visibilityMode: false,
+            isNameError: false,
+          },
       validationSchema: Yup.object({
         name: Yup.string().required('id is required'),
         displayName: Yup.string().required('name is required'),
@@ -70,7 +73,7 @@ const Root = (props: IDialog) => {
           reloadPage();
           resetValues();
           toast.success(
-            `compute ${isUpdate ? 'updated' : 'created'} successfully`
+            `cluster ${isUpdate ? 'updated' : 'created'} successfully`
           );
           setVisible(false);
         } catch (err) {
@@ -80,78 +83,89 @@ const Root = (props: IDialog) => {
     });
 
   return (
-    <Popup.Form
-      onSubmit={(e) => {
-        if (!values.isNameError) {
-          handleSubmit(e);
-        } else {
-          e.preventDefault();
-        }
-      }}
-    >
-      <Popup.Content>
-        <div className="flex flex-col gap-2xl">
-          <NameIdView
-            resType="cluster"
-            displayName={values.displayName}
-            name={values.name}
-            label="Cluster name"
-            placeholder="Enter cluster name"
-            errors={errors.name}
-            handleChange={handleChange}
-            nameErrorLabel="isNameError"
-            isUpdate={isUpdate}
-          />
-          {!isUpdate && (
-            <>
-              <Checkbox
-                label="Private Cluster"
-                checked={values.visibilityMode}
-                onChange={(val) => {
-                  handleChange('visibilityMode')(dummyEvent(val));
-                }}
-              />
-              <Banner
-                type="info"
-                body={
-                  <div className="flex flex-col">
-                    <span className="bodyMd-medium">
-                      Private clusters are those who are hosted behind a NAT.
-                    </span>
-                    <span className="bodyMd">
-                      Ex: Cluster running on your local machine
+    <>
+      <Popup.Form
+        onSubmit={(e) => {
+          if (!values.isNameError) {
+            handleSubmit(e);
+          } else {
+            e.preventDefault();
+          }
+        }}
+      >
+        <Popup.Content>
+          <div className="flex flex-col gap-2xl">
+            <NameIdView
+              resType="cluster"
+              displayName={values.displayName}
+              name={values.name}
+              label="Cluster name"
+              placeholder="Enter cluster name"
+              errors={errors.name}
+              handleChange={handleChange}
+              nameErrorLabel="isNameError"
+              isUpdate={isUpdate}
+            />
+            {!isUpdate && (
+              <>
+                <Checkbox
+                  label="Private Cluster"
+                  checked={values.visibilityMode}
+                  onChange={(val) => {
+                    handleChange('visibilityMode')(dummyEvent(val));
+                  }}
+                />
+                <Banner
+                  type="info"
+                  body={
+                    <div className="flex flex-col">
+                      <span className="bodyMd-medium">
+                        Private clusters are those who are hosted behind a NAT.
+                      </span>
+                      <span className="bodyMd">
+                        Ex: Cluster running on your local machine
+                      </span>
+                    </div>
+                  }
+                />
+                <Button
+                  target="_blank"
+                  size="sm"
+                  content={
+                    <span className="truncate text-left">
+                      Attach your local cluster
                     </span>
-                  </div>
-                }
-              />
-              <Button
-                target="_blank"
-                size="sm"
-                content={
-                  <span className="truncate text-left">
-                    Attach your local device
-                  </span>
-                }
-                variant="primary-plain"
-                className="truncate justify-center"
-                onClick={() => {
-                  window.location.href = 'https://github.com/kloudlite/kl';
-                }}
-              />
-            </>
-          )}
-        </div>
-      </Popup.Content>
-      <Popup.Footer>
-        <Popup.Button closable content="Cancel" variant="basic" />
-        <Popup.Button
-          loading={isLoading}
-          type="submit"
-          content={isUpdate ? 'Update' : 'Create'}
-          variant="primary"
-        />
-      </Popup.Footer>
-    </Popup.Form>
+                  }
+                  variant="primary-plain"
+                  className="truncate justify-center"
+                  onClick={() => {
+                    setShow(true);
+                  }}
+                />
+              </>
+            )}
+          </div>
+        </Popup.Content>
+        <Popup.Footer>
+          <Popup.Button closable content="Cancel" variant="basic" />
+          <Popup.Button
+            loading={isLoading}
+            type="submit"
+            content={isUpdate ? 'Update' : 'Create'}
+            variant="primary"
+          />
+        </Popup.Footer>
+      </Popup.Form>
+      <LocalDeviceClusterInstructions
+        {...{
+          show,
+          onClose: () => {
+            setShow(false);
+            setVisible(false);
+          },
+        }}
+      />
+    </>
   );
 };
 

diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
@@ -45,7 +45,7 @@ const CreateClusterButton = () => {
   return (
     <>
       <Button
-        content="Attach compute"
+        content="Attach cluster"
         variant="primary"
         prefix={<Plus />}
         onClick={() => {
@@ -90,7 +90,7 @@ const ClusterComponent = ({
       return {
         image: <EmptyClusterImage />,
         is: true,
-        title: 'This is where you’ll manage your compute.',
+        title: 'This is where you’ll manage your cluster.',
         content: (
           <div className=" flex flex-col items-center gap-lg">
             You can attach any kubernetes cluster.
@@ -110,7 +110,7 @@ const ClusterComponent = ({
               >
                 Instructions{' '}
               </span>
-              to attach your local device.
+              to attach your local cluster.
             </div>
             <LocalDeviceClusterInstructions
               {...{ show: visible, onClose: () => setVisible(false) }}
@@ -124,7 +124,7 @@ const ClusterComponent = ({
       is: false,
       title: 'This is where you’ll manage your cluster.',
       content: (
-        <p>You can create a new compute and manage the listed compute.</p>
+        <p>You can create a new cluster and manage the listed cluster.</p>
       ),
       action: <CreateClusterButton />,
     };
@@ -136,7 +136,7 @@ const ClusterComponent = ({
   return (
     <Wrapper
       secondaryHeader={{
-        title: 'Attached Computes',
+        title: 'Attached clusters',
         action: byokClusters.length > 0 && <CreateClusterButton />,
       }}
       empty={getEmptyState({

diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
@@ -4,11 +4,10 @@ import Popup from '~/components/molecule/popup';
 import { toast } from '~/components/molecule/toast';
 import CommonPopupHandle from '~/console/components/common-popup-handle';
 import { IDialogBase } from '~/console/components/types.d';
-import {
-  IMemberType
-} from '~/console/routes/_main+/$account+/settings+/user-management/user-access-resource';
+import { IMemberType } from '~/console/routes/_main+/$account+/settings+/user-management/user-access-resource';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { parseName } from '~/console/server/r-utils/common';
+import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
@@ -31,6 +30,7 @@ const validRoles = (role: string): Role => {
 const Root = (props: IDialog) => {
   const { setVisible, isUpdate } = props;
   const api = useConsoleApi();
+  const reloadPage = useReload();
 
   const { account } = useOutletContext<IAccountContext>();
 
@@ -71,6 +71,7 @@ const Root = (props: IDialog) => {
             throw e[0];
           }
         }
+        reloadPage();
         toast.success(`user ${isUpdate ? 'role updated' : 'invited'}`);
         setVisible(false);
       } catch (err) {