chore: Adjusted detail page titles for better ux consistency

- Addressed "lag" in loading time by only rendering the title when the instance has loaded. - Added breadcrumb header to invalid instance page. - Minor logic alterations to provide reasoning as to why invalid instances cannot be renamed. Signed-off-by: Nkeiruka <[email protected]>
canonical · Jun 25, 2024 · 6cf0ebe · 6cf0ebe
1 parent 3d03cab
commit 6cf0ebe
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 97 deletions.
diff --git a/src/components/RenameHeader.tsx b/src/components/RenameHeader.tsx
@@ -36,6 +36,7 @@ const RenameHeader: FC<Props> = ({
 }) => {
   const canRename = renameDisabledReason === undefined;
   const enableRename = () => {
+    window.dispatchEvent(new Event("resize"));
     if (!canRename || !formik) {
       return;
     }
@@ -48,76 +49,73 @@ const RenameHeader: FC<Props> = ({
   return (
     <div className="p-panel__header rename-header">
       <h1 className="u-off-screen">{name}</h1>
-      {isLoaded ? (
-        <div className={classnames("p-panel__title", titleClassName)}>
-          <nav
-            key="breadcrumbs"
-            className="p-breadcrumbs p-breadcrumbs--large"
-            aria-label="Breadcrumbs"
-          >
-            <ol className="p-breadcrumbs__items">
-              {parentItems.map((item, key) => (
-                <li className="p-breadcrumbs__item" key={key}>
-                  {item}
-                </li>
-              ))}
-              {formik?.values.isRenaming ? (
-                <li className="p-breadcrumbs__item rename">
-                  <Input
-                    autoFocus
-                    id="name"
-                    name="name"
-                    className="name-input"
-                    onBlur={formik.handleBlur}
-                    onChange={formik.handleChange}
-                    value={formik.values.name}
-                    error={formik.touched.name ? formik.errors.name : null}
-                    onKeyUp={(e) =>
-                      e.key === "Enter" && void formik.submitForm()
+      <div className={classnames("p-panel__title", titleClassName)}>
+        <nav
+          key="breadcrumbs"
+          className="p-breadcrumbs p-breadcrumbs--large"
+          aria-label="Breadcrumbs"
+        >
+          <ol className="p-breadcrumbs__items">
+            {parentItems.map((item, key) => (
+              <li
+                className="p-heading--4 u-no-margin--bottom continuous-breadcrumb"
+                key={key}
+              >
+                {item}
+              </li>
+            ))}
+            {formik?.values.isRenaming ? (
+              <li className="p-breadcrumbs__item rename">
+                <Input
+                  autoFocus
+                  id="name"
+                  name="name"
+                  className="name-input"
+                  onBlur={formik.handleBlur}
+                  onChange={formik.handleChange}
+                  value={formik.values.name}
+                  error={formik.touched.name ? formik.errors.name : null}
+                  onKeyUp={(e) => e.key === "Enter" && void formik.submitForm()}
+                  type="text"
+                />
+                <div>
+                  <Button
+                    appearance="base"
+                    className="cancel"
+                    onClick={() =>
+                      void formik.setFieldValue("isRenaming", false)
                     }
-                    type="text"
-                  />
-                  <div>
-                    <Button
-                      appearance="base"
-                      className="cancel"
-                      onClick={() =>
-                        void formik.setFieldValue("isRenaming", false)
-                      }
-                    >
-                      Cancel
-                    </Button>
-                    <ActionButton
-                      appearance="positive"
-                      loading={formik.isSubmitting}
-                      disabled={!formik.isValid || name === formik.values.name}
-                      onClick={() => void formik.submitForm()}
-                    >
-                      Save
-                    </ActionButton>
-                  </div>
-                </li>
-              ) : (
-                <li
-                  className="p-breadcrumbs__item name u-truncate"
-                  onClick={enableRename}
-                  title={`Rename ${name}`}
-                >
-                  <Tooltip
-                    message={!canRename && renameDisabledReason}
-                    position="btm-left"
                   >
-                    {name}
-                  </Tooltip>
-                </li>
-              )}
-            </ol>
-          </nav>
-          {!formik?.values.isRenaming && centerControls}
-        </div>
-      ) : (
-        <h4 className="p-panel__title">{name}</h4>
-      )}
+                    Cancel
+                  </Button>
+                  <ActionButton
+                    appearance="positive"
+                    loading={formik.isSubmitting}
+                    disabled={!formik.isValid || name === formik.values.name}
+                    onClick={() => void formik.submitForm()}
+                  >
+                    Save
+                  </ActionButton>
+                </div>
+              </li>
+            ) : (
+              <li
+                className="p-heading--4 u-no-margin--bottom name continuous-breadcrumb"
+                onClick={enableRename}
+                title={`Rename ${name}`}
+              >
+                <Tooltip
+                  message={!canRename && renameDisabledReason}
+                  position="btm-left"
+                >
+                  {name}
+                </Tooltip>
+              </li>
+            )}
+          </ol>
+        </nav>
+        {!formik?.values.isRenaming && centerControls}
+      </div>
       {isLoaded && !formik?.values.isRenaming && (
         <div className="p-panel__controls">{controls}</div>
       )}

diff --git a/src/pages/instances/InstanceDetail.tsx b/src/pages/instances/InstanceDetail.tsx
@@ -54,6 +54,7 @@ const InstanceDetail: FC = () => {
           name={name}
           instance={instance}
           project={project}
+          isLoading={isLoading}
         />
       }
       contentClassName="detail-page"

diff --git a/src/pages/instances/InstanceDetailHeader.tsx b/src/pages/instances/InstanceDetailHeader.tsx
@@ -21,9 +21,15 @@ interface Props {
   name: string;
   instance?: LxdInstance;
   project: string;
+  isLoading: boolean;
 }
 
-const InstanceDetailHeader: FC<Props> = ({ name, instance, project }) => {
+const InstanceDetailHeader: FC<Props> = ({
+  name,
+  instance,
+  project,
+  isLoading,
+}) => {
   const eventQueue = useEventQueue();
   const navigate = useNavigate();
   const toastNotify = useToastNotification();
@@ -87,33 +93,39 @@ const InstanceDetailHeader: FC<Props> = ({ name, instance, project }) => {
   });
 
   return (
-    <RenameHeader
-      name={name}
-      titleClassName="instance-detail-title"
-      parentItems={[
-        <Link to={`/ui/project/${project}/instances`} key={1}>
-          Instances
-        </Link>,
-      ]}
-      renameDisabledReason={
-        instance?.status !== "Stopped"
-          ? "Stop the instance to rename"
-          : undefined
-      }
-      centerControls={
-        instance ? (
-          <div>
-            <i className="status u-text--muted">{instance.status}</i>
-            <InstanceStateActions key="state" instance={instance} />
-          </div>
-        ) : null
-      }
-      controls={
-        instance ? <DeleteInstanceBtn key="delete" instance={instance} /> : null
-      }
-      isLoaded={Boolean(instance)}
-      formik={formik}
-    />
+    !isLoading && (
+      <RenameHeader
+        name={name}
+        titleClassName="instance-detail-title"
+        parentItems={[
+          <Link to={`/ui/project/${project}/instances`} key={1}>
+            Instances
+          </Link>,
+        ]}
+        renameDisabledReason={
+          !instance
+            ? "Invalid Instance: Cannot be renamed"
+            : instance?.status !== "Stopped"
+              ? "Stop the instance to rename"
+              : undefined
+        }
+        centerControls={
+          instance ? (
+            <div>
+              <i className="status u-text--muted">{instance.status}</i>
+              <InstanceStateActions key="state" instance={instance} />
+            </div>
+          ) : null
+        }
+        controls={
+          instance ? (
+            <DeleteInstanceBtn key="delete" instance={instance} />
+          ) : null
+        }
+        isLoaded={Boolean(instance)}
+        formik={formik}
+      />
+    )
   );
 };
 

diff --git a/src/sass/_rename_header.scss b/src/sass/_rename_header.scss
@@ -24,7 +24,7 @@
             $colors--light-theme--background-hover,
             $colors--light-theme--background-hover
           )
-          no-repeat 1rem;
+          no-repeat;
       }
     }
 

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -202,6 +202,10 @@ body {
 
   .p-breadcrumbs__items {
     margin-bottom: 0;
+
+    .continuous-breadcrumb {
+      display: inline;
+    }
   }
 
   .p-breadcrumbs__item {
@@ -213,6 +217,19 @@ body {
     padding-top: 0;
   }
 
+  .continuous-breadcrumb::after {
+    content: "/";
+    padding: 0 5px; // Adjust spacing as needed
+  }
+
+  .continuous-breadcrumb:last-child::after {
+    content: ""; // Remove the slash from the last item
+  }
+
+  .p-breadcrumbs__item::before {
+    content: none;
+  }
+
   .p-breadcrumbs__item:first-of-type {
     margin-right: $sph--x-small;
   }