feat: apply resource link and label components to notifications [WD-1…

…5624] (#946) ## Done - Apply `ResourceLink` and `ResourceLabel` component to notifications. - Updated icons for side navigation - Updated icons for empty states
canonical · Oct 18, 2024 · 4cc6607 · 4cc6607
2 parents ca5752d + ade66e6
commit 4cc6607
Show file tree

Hide file tree

Showing 90 changed files with 994 additions and 312 deletions.
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -195,7 +195,7 @@ const Navigation: FC = () => {
                         >
                           <Icon
                             className="is-light p-side-navigation__icon"
-                            name="containers"
+                            name="pods"
                           />{" "}
                           Instances
                         </NavLink>
@@ -208,7 +208,7 @@ const Navigation: FC = () => {
                         >
                           <Icon
                             className="is-light p-side-navigation__icon"
-                            name="units"
+                            name="repository"
                           />{" "}
                           Profiles
                         </NavLink>
@@ -222,7 +222,7 @@ const Navigation: FC = () => {
                         >
                           <Icon
                             className="is-light p-side-navigation__icon"
-                            name="connected"
+                            name="exposed"
                           />{" "}
                           Networks
                         </NavLink>
@@ -231,7 +231,7 @@ const Navigation: FC = () => {
                         <NavAccordion
                           baseUrl={`/ui/project/${projectName}/storage`}
                           title={`Storage (${projectName})`}
-                          iconName="pods"
+                          iconName="switcher-dashboard"
                           label="Storage"
                           onOpen={() => toggleAccordionNav("storage")}
                           open={openNavMenus.includes("storage")}
@@ -290,7 +290,7 @@ const Navigation: FC = () => {
                         >
                           <Icon
                             className="is-light p-side-navigation__icon"
-                            name="applications"
+                            name="image"
                           />{" "}
                           Images
                         </NavLink>
@@ -317,7 +317,7 @@ const Navigation: FC = () => {
                         >
                           <Icon
                             className="is-light p-side-navigation__icon"
-                            name="machines"
+                            name="cluster-host"
                           />{" "}
                           Cluster
                         </NavLink>
@@ -471,10 +471,7 @@ const Navigation: FC = () => {
                       rel="noopener noreferrer"
                       title="Documentation"
                     >
-                      <Icon
-                        className="p-side-navigation__icon"
-                        name="information"
-                      />
+                      <Icon className="p-side-navigation__icon" name="book" />
                       Documentation
                     </a>
                   </SideNavigationItem>
@@ -503,7 +500,7 @@ const Navigation: FC = () => {
                     >
                       <Icon
                         className="is-light p-side-navigation__icon"
-                        name="code"
+                        name="submit-bug"
                       />
                       Report a bug
                     </a>

diff --git a/src/components/ResourceIcon.tsx b/src/components/ResourceIcon.tsx
@@ -1,12 +1,16 @@
 import { Icon } from "@canonical/react-components";
 import { FC } from "react";
 
+export type InstanceIconType = "container" | "virtual-machine" | "instance";
+
 export type ResourceIconType =
   | "container"
   | "virtual-machine"
+  | "instance"
   | "snapshot"
   | "profile"
   | "project"
+  | "cluster-group"
   | "cluster-member"
   | "network"
   | "pool"
@@ -16,14 +20,17 @@ export type ResourceIconType =
   | "oidc-identity"
   | "certificate"
   | "auth-group"
+  | "idp-group"
   | "device";
 
 const resourceIcons: Record<ResourceIconType, string> = {
   container: "pods",
   "virtual-machine": "pods",
+  instance: "pods",
   snapshot: "snapshot",
   profile: "repository",
   project: "folder",
+  "cluster-group": "cluster-host",
   "cluster-member": "single-host",
   network: "exposed",
   pool: "status-queued-small",
@@ -33,6 +40,7 @@ const resourceIcons: Record<ResourceIconType, string> = {
   "oidc-identity": "user",
   certificate: "certificate",
   "auth-group": "user-group",
+  "idp-group": "user-group",
   device: "units",
 };
 

diff --git a/src/pages/cluster/ClusterGroupForm.tsx b/src/pages/cluster/ClusterGroupForm.tsx
@@ -28,6 +28,7 @@ import NotificationRow from "components/NotificationRow";
 import BaseLayout from "components/BaseLayout";
 import AutoExpandingTextArea from "components/AutoExpandingTextArea";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLink from "components/ResourceLink";
 
 export interface ClusterGroupFormValues {
   description: string;
@@ -85,7 +86,17 @@ const ClusterGroupForm: FC<Props> = ({ group }) => {
         .then(() => {
           const verb = group ? "saved" : "created";
           navigate(`/ui/cluster/group/${values.name}`);
-          toastNotify.success(`Cluster group ${values.name} ${verb}.`);
+          toastNotify.success(
+            <>
+              Cluster group{" "}
+              <ResourceLink
+                type="cluster-group"
+                value={values.name}
+                to={`/ui/cluster/group/${values.name}`}
+              />{" "}
+              {verb}.
+            </>,
+          );
         })
         .catch((e: Error) => {
           formik.setSubmitting(false);

diff --git a/src/pages/cluster/ClusterList.tsx b/src/pages/cluster/ClusterList.tsx
@@ -116,7 +116,7 @@ const ClusterList: FC = () => {
           filteredMembers.length < 1 && (
             <EmptyState
               className="empty-state"
-              image={<Icon name="machines" className="empty-state-icon" />}
+              image={<Icon name="cluster-host" className="empty-state-icon" />}
               title="Cluster group empty"
             >
               <p>Add cluster members to this group.</p>
@@ -136,7 +136,7 @@ const ClusterList: FC = () => {
         {!isClustered && (
           <EmptyState
             className="empty-state"
-            image={<Icon name="machines" className="empty-state-icon" />}
+            image={<Icon name="cluster-host" className="empty-state-icon" />}
             title="This server is not clustered"
           >
             <p>

diff --git a/src/pages/cluster/actions/DeleteClusterGroupBtn.tsx b/src/pages/cluster/actions/DeleteClusterGroupBtn.tsx
@@ -6,6 +6,7 @@ import { queryKeys } from "util/queryKeys";
 import { useQueryClient } from "@tanstack/react-query";
 import { ConfirmationButton, useNotify } from "@canonical/react-components";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLink from "components/ResourceLink";
 
 interface Props {
   group: string;
@@ -23,7 +24,17 @@ const DeleteClusterGroupBtn: FC<Props> = ({ group }) => {
     deleteClusterGroup(group)
       .then(() => {
         navigate(`/ui/cluster`);
-        toastNotify.success(`Cluster group ${group} deleted.`);
+        toastNotify.success(
+          <>
+            Cluster group{" "}
+            <ResourceLink
+              type="cluster-group"
+              value={group}
+              to={`/ui/cluster`}
+            />{" "}
+            deleted.
+          </>,
+        );
       })
       .catch((e) => {
         setLoading(false);

diff --git a/src/pages/cluster/actions/EvacuateClusterMemberBtn.tsx b/src/pages/cluster/actions/EvacuateClusterMemberBtn.tsx
@@ -6,6 +6,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { LxdClusterMember } from "types/cluster";
 import { ConfirmationButton, useNotify } from "@canonical/react-components";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLink from "components/ResourceLink";
 
 interface Props {
   member: LxdClusterMember;
@@ -22,7 +23,15 @@ const EvacuateClusterMemberBtn: FC<Props> = ({ member }) => {
     postClusterMemberState(member, "evacuate")
       .then(() => {
         toastNotify.success(
-          `Cluster member ${member.server_name} evacuation started.`,
+          <>
+            Cluster member{" "}
+            <ResourceLink
+              type="cluster-member"
+              value={member.server_name}
+              to="/ui/cluster"
+            />{" "}
+            evacuation started.
+          </>,
         );
       })
       .catch((e) => notify.failure("Cluster member evacuation failed", e))

diff --git a/src/pages/cluster/actions/RestoreClusterMemberBtn.tsx b/src/pages/cluster/actions/RestoreClusterMemberBtn.tsx
@@ -6,6 +6,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { LxdClusterMember } from "types/cluster";
 import { ConfirmationButton, useNotify } from "@canonical/react-components";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLink from "components/ResourceLink";
 
 interface Props {
   member: LxdClusterMember;
@@ -22,7 +23,15 @@ const RestoreClusterMemberBtn: FC<Props> = ({ member }) => {
     postClusterMemberState(member, "restore")
       .then(() => {
         toastNotify.success(
-          `Cluster member ${member.server_name} restore started.`,
+          <>
+            Cluster member{" "}
+            <ResourceLink
+              to="/ui/cluster"
+              type="cluster-member"
+              value={member.server_name}
+            />{" "}
+            restore started.
+          </>,
         );
       })
       .catch((e) => notify.failure("Cluster member restore failed", e))

diff --git a/src/pages/images/ImageList.tsx b/src/pages/images/ImageList.tsx
@@ -241,7 +241,7 @@ const ImageList: FC = () => {
         {images.length === 0 && (
           <EmptyState
             className="empty-state"
-            image={<Icon name="mount" className="empty-state-icon" />}
+            image={<Icon name="image" className="empty-state-icon" />}
             title="No images found in this project"
           >
             <p>

diff --git a/src/pages/images/actions/DeleteImageBtn.tsx b/src/pages/images/actions/DeleteImageBtn.tsx
@@ -6,6 +6,7 @@ import { queryKeys } from "util/queryKeys";
 import { ConfirmationButton, Icon } from "@canonical/react-components";
 import { useEventQueue } from "context/eventQueue";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLabel from "components/ResourceLabel";
 
 interface Props {
   image: LxdImage;
@@ -22,6 +23,7 @@ const DeleteImageBtn: FC<Props> = ({ image, project }) => {
 
   const handleDelete = () => {
     setLoading(true);
+    const imageLabel = <ResourceLabel bold type="image" value={description} />;
     void deleteImage(image, project)
       .then((operation) =>
         eventQueue.set(
@@ -33,18 +35,23 @@ const DeleteImageBtn: FC<Props> = ({ image, project }) => {
             void queryClient.invalidateQueries({
               queryKey: [queryKeys.projects, project],
             });
-            toastNotify.success(`Image ${description} deleted.`);
+            toastNotify.success(<>Image {imageLabel} deleted.</>);
           },
           (msg) =>
             toastNotify.failure(
               `Image ${description} deletion failed`,
               new Error(msg),
+              imageLabel,
             ),
           () => setLoading(false),
         ),
       )
       .catch((e) => {
-        toastNotify.failure(`Image ${description} deletion failed`, e);
+        toastNotify.failure(
+          `Image ${description} deletion failed`,
+          e,
+          imageLabel,
+        );
         setLoading(false);
       });
   };

diff --git a/src/pages/images/actions/DownloadImageBtn.tsx b/src/pages/images/actions/DownloadImageBtn.tsx
@@ -2,6 +2,7 @@ import { FC, useState } from "react";
 import { LxdImage } from "types/image";
 import { ActionButton, Icon } from "@canonical/react-components";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLink from "components/ResourceLink";
 
 interface Props {
   image: LxdImage;
@@ -17,6 +18,13 @@ const DownloadImageBtn: FC<Props> = ({ image, project }) => {
 
   const handleExport = () => {
     setLoading(true);
+    const imageLink = (
+      <ResourceLink
+        to={`/ui/project/${project}/images`}
+        type="image"
+        value={description}
+      />
+    );
 
     try {
       const a = document.createElement("a");
@@ -26,10 +34,17 @@ const DownloadImageBtn: FC<Props> = ({ image, project }) => {
       window.URL.revokeObjectURL(url);
 
       toastNotify.success(
-        `Image ${description} download started. Please check your downloads folder.`,
+        <>
+          Image {imageLink} download started. Please check your downloads
+          folder.
+        </>,
       );
     } catch (e) {
-      toastNotify.failure(`Image ${description} was unable to download.`, e);
+      toastNotify.failure(
+        `Image ${description} was unable to download.`,
+        e,
+        imageLink,
+      );
     } finally {
       setLoading(false);
     }

diff --git a/src/pages/images/actions/UploadCustomIsoBtn.tsx b/src/pages/images/actions/UploadCustomIsoBtn.tsx
@@ -5,12 +5,14 @@ import usePortal from "react-useportal";
 import { useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLink from "components/ResourceLink";
 
 interface Props {
   className?: string;
+  project: string;
 }
 
-const UploadCustomIsoBtn: FC<Props> = ({ className }) => {
+const UploadCustomIsoBtn: FC<Props> = ({ className, project }) => {
   const toastNotify = useToastNotification();
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
   const queryClient = useQueryClient();
@@ -20,7 +22,13 @@ const UploadCustomIsoBtn: FC<Props> = ({ className }) => {
   const handleFinish = (name: string) => {
     toastNotify.success(
       <>
-        Image <b>{name}</b> uploaded successfully
+        Custom ISO{" "}
+        <ResourceLink
+          to={`/ui/project/${project}/storage/custom-isos`}
+          type="iso-volume"
+          value={name}
+        />{" "}
+        uploaded successfully.
       </>,
     );
     void queryClient.invalidateQueries({ queryKey: [queryKeys.isoVolumes] });