From c6a61a4b7bfb0ee802d20e6e0d200f0359c56921 Mon Sep 17 00:00:00 2001
From: Nkeiruka <nkeiruka.whenu@canonical.com>
Date: Thu, 20 Jun 2024 17:59:29 +0100
Subject: [PATCH] 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 <nkeiruka.whenu@canonical.com>
---
 src/components/RenameHeader.tsx              | 16 +++--
 src/pages/instances/InstanceDetail.tsx       |  1 +
 src/pages/instances/InstanceDetailHeader.tsx | 68 ++++++++++++--------
 src/sass/_rename_header.scss                 |  2 +-
 src/sass/styles.scss                         | 17 +++++
 5 files changed, 69 insertions(+), 35 deletions(-)

diff --git a/src/components/RenameHeader.tsx b/src/components/RenameHeader.tsx
index e497e37c9c..4883b2db06 100644
--- a/src/components/RenameHeader.tsx
+++ b/src/components/RenameHeader.tsx
@@ -48,7 +48,7 @@ const RenameHeader: FC<Props> = ({
   return (
     <div className="p-panel__header rename-header">
       <h1 className="u-off-screen">{name}</h1>
-      {isLoaded ? (
+      {/* {isLoaded ? ( */}
         <div className={classnames("p-panel__title", titleClassName)}>
           <nav
             key="breadcrumbs"
@@ -57,7 +57,10 @@ const RenameHeader: FC<Props> = ({
           >
             <ol className="p-breadcrumbs__items">
               {parentItems.map((item, key) => (
-                <li className="p-breadcrumbs__item" key={key}>
+                <li
+                  className="p-heading--4 u-no-margin--bottom continuous-breadcrumb"
+                  key={key}
+                >
                   {item}
                 </li>
               ))}
@@ -99,7 +102,7 @@ const RenameHeader: FC<Props> = ({
                 </li>
               ) : (
                 <li
-                  className="p-breadcrumbs__item name u-truncate"
+                  className="p-heading--4 u-no-margin--bottom name continuous-breadcrumb"
                   onClick={enableRename}
                   title={`Rename ${name}`}
                 >
@@ -115,9 +118,10 @@ const RenameHeader: FC<Props> = ({
           </nav>
           {!formik?.values.isRenaming && centerControls}
         </div>
-      ) : (
-        <h4 className="p-panel__title">{name}</h4>
-      )}
+      {/* // )
+      //  : (
+      //   <h4 className="p-panel__title">{name}</h4>
+      // )} */}
       {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
index 154e79fe7f..5625710786 100644
--- 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
index c8481e5d88..c6e6bd7d9d 100644
--- 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={
+          !Boolean(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
index b277662424..e1798fa29c 100644
--- 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
index caf8d324e0..5238cdf31a 100644
--- 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: "";
+  }
+
   .p-breadcrumbs__item:first-of-type {
     margin-right: $sph--x-small;
   }