fix(semiotics) enhance usage of chips and add context to notifications (

#960)

src/components/ResourceIcon.tsx

@@ -21,7 +21,8 @@ export type ResourceIconType =
   | "certificate"
   | "auth-group"
   | "idp-group"
-  | "device";
+  | "device"
+  | "setting";
 
 const resourceIcons: Record<ResourceIconType, string> = {
   container: "pods",
@@ -42,6 +43,7 @@ const resourceIcons: Record<ResourceIconType, string> = {
   "auth-group": "user-group",
   "idp-group": "user-group",
   device: "units",
+  setting: "settings",
 };
 
 interface Props {

src/pages/instances/actions/snapshots/InstanceSnapshotActions.tsx

@@ -16,6 +16,7 @@ import CreateImageFromInstanceSnapshotBtn from "pages/instances/actions/snapshot
 import CreateInstanceFromSnapshotBtn from "./CreateInstanceFromSnapshotBtn";
 import ResourceLabel from "components/ResourceLabel";
 import InstanceSnapshotLinkChip from "pages/instances/InstanceSnapshotLinkChip";
+import InstanceLinkChip from "pages/instances/InstanceLinkChip";
 
 interface Props {
   instance: LxdInstance;
@@ -47,7 +48,7 @@ const InstanceSnapshotActions: FC<Props> = ({
               <>
                 Snapshot{" "}
                 <ResourceLabel bold type="snapshot" value={snapshot.name} />{" "}
-                deleted.
+                deleted for instance <InstanceLinkChip instance={instance} />.
               </>,
             ),
           (msg) => onFailure("Snapshot deletion failed", new Error(msg)),
@@ -79,7 +80,7 @@ const InstanceSnapshotActions: FC<Props> = ({
                   name={snapshot.name}
                   instance={instance}
                 />{" "}
-                restored.
+                restored for instance <InstanceLinkChip instance={instance} />.
               </>,
             ),
           (msg) => onFailure("Snapshot restore failed", new Error(msg)),

src/pages/instances/forms/CreateImageFromInstanceForm.tsx

@@ -73,7 +73,9 @@ const CreateImageFromInstanceForm: FC<Props> = ({ instance, close }) => {
 
       createImage(getInstanceToImageBody(instance, values.isPublic), instance)
         .then((operation) => {
-          toastNotify.info(<>Creation of image from {instanceLink} started.</>);
+          toastNotify.info(
+            <>Creation of image from instance {instanceLink} started.</>,
+          );
           close();
           eventQueue.set(
             operation.metadata.id,

src/pages/instances/forms/CreateImageFromInstanceSnapshotForm.tsx

@@ -84,7 +84,9 @@ const CreateImageFromInstanceSnapshotForm: FC<Props> = ({
         instance,
       )
         .then((operation) => {
-          toastNotify.info(<>Creation of image from {snapshotLink} started.</>);
+          toastNotify.info(
+            <>Creation of image from snapshot {snapshotLink} started.</>,
+          );
           close();
           eventQueue.set(
             operation.metadata.id,

src/pages/settings/SettingForm.tsx

@@ -9,6 +9,7 @@ import SettingFormCheckbox from "./SettingFormCheckbox";
 import SettingFormInput from "./SettingFormInput";
 import SettingFormPassword from "./SettingFormPassword";
 import { useToastNotification } from "context/toastNotificationProvider";
+import ResourceLabel from "components/ResourceLabel";
 
 export const getConfigId = (key: string) => {
   return key.replace(".", "___");
@@ -34,17 +35,21 @@ const SettingForm: FC<Props> = ({ configField, value, isLast }) => {
   const isLokiAuthPassword = configField.key === "loki.auth.password";
   const isSecret = isTrustPassword || isLokiAuthPassword;
 
+  const settingLabel = (
+    <ResourceLabel bold type="setting" value={configField.key} />
+  );
+
   const onSubmit = (newValue: string | boolean) => {
     const config = {
       [configField.key]: String(newValue),
     };
     updateSettings(config)
       .then(() => {
-        toastNotify.success(`Setting ${configField.key} updated.`);
+        toastNotify.success(<>Setting {settingLabel} updated.</>);
         setEditMode(false);
       })
       .catch((e) => {
-        notify.failure("Setting update failed", e);
+        notify.failure("Setting update failed", e, settingLabel);
       })
       .finally(() => {
         void queryClient.invalidateQueries({

src/pages/storage/actions/snapshots/VolumeSnapshotActions.tsx

@@ -19,6 +19,7 @@ import VolumeEditSnapshotBtn from "./VolumeEditSnapshotBtn";
 import { useToastNotification } from "context/toastNotificationProvider";
 import ResourceLabel from "components/ResourceLabel";
 import VolumeSnapshotLinkChip from "pages/storage/VolumeSnapshotLinkChip";
+import ResourceLink from "components/ResourceLink";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -33,6 +34,14 @@ const VolumeSnapshotActions: FC<Props> = ({ volume, snapshot }) => {
   const [isRestoring, setRestoring] = useState(false);
   const queryClient = useQueryClient();
 
+  const volumeLink = (
+    <ResourceLink
+      type="volume"
+      value={volume.name}
+      to={`/ui/project/${volume.project}/storage/pool/${volume.pool}/volumes/custom/${volume.name}`}
+    />
+  );
+
   const handleDelete = () => {
     setDeleting(true);
     const snapshotLink = (
@@ -47,7 +56,7 @@ const VolumeSnapshotActions: FC<Props> = ({ volume, snapshot }) => {
               <>
                 Snapshot{" "}
                 <ResourceLabel bold type="snapshot" value={snapshot.name} />{" "}
-                deleted.
+                deleted for volume {volumeLink}.
               </>,
             ),
           (msg) =>
@@ -80,7 +89,7 @@ const VolumeSnapshotActions: FC<Props> = ({ volume, snapshot }) => {
           <>
             Snapshot{" "}
             <VolumeSnapshotLinkChip name={snapshot.name} volume={volume} />{" "}
-            restored.
+            restored for volume {volumeLink}.
           </>,
         );
       })

src/pages/storage/forms/CreateVolumeSnapshotForm.tsx

@@ -14,6 +14,7 @@ import { getVolumeSnapshotSchema } from "util/storageVolumeSnapshots";
 import { useToastNotification } from "context/toastNotificationProvider";
 import { getVolumeSnapshotName } from "util/operations";
 import VolumeSnapshotLinkChip from "../VolumeSnapshotLinkChip";
+import ResourceLink from "components/ResourceLink";
 
 interface Props {
   close: () => void;
@@ -64,7 +65,13 @@ const CreateVolumeSnapshotForm: FC<Props> = ({ close, volume }) => {
                     name={getVolumeSnapshotName(operation.metadata)}
                     volume={volume}
                   />{" "}
-                  created.
+                  created for volume{" "}
+                  <ResourceLink
+                    type="volume"
+                    value={volume.name}
+                    to={`/ui/project/${volume.project}/storage/pool/${volume.pool}/volumes/custom/${volume.name}`}
+                  />
+                  .
                 </>,
               );
               close();

tests/helpers/snapshots.ts

@@ -33,7 +33,11 @@ export const createInstanceSnapshot = async (
   );
 };
 
-export const restoreInstanceSnapshot = async (page: Page, snapshot: string) => {
+export const restoreInstanceSnapshot = async (
+  page: Page,
+  instance: string,
+  snapshot: string,
+) => {
   await page
     .getByRole("row", { name: "Name" })
     .filter({ hasText: snapshot })
@@ -48,7 +52,9 @@ export const restoreInstanceSnapshot = async (page: Page, snapshot: string) => {
     .getByRole("button", { name: "Restore" })
     .click();
 
-  await page.waitForSelector(`text=Snapshot ${snapshot} restored.`);
+  await page.waitForSelector(
+    `text=Snapshot ${snapshot} restored for instance ${instance}.`,
+  );
 };
 
 export const editInstanceSnapshot = async (
@@ -79,7 +85,11 @@ export const editInstanceSnapshot = async (
   await page.getByText("Apr 28, 2093, 12:23 PM").click();
 };
 
-export const deleteInstanceSnapshot = async (page: Page, snapshot: string) => {
+export const deleteInstanceSnapshot = async (
+  page: Page,
+  instance: string,
+  snapshot: string,
+) => {
   await page
     .getByRole("row", { name: "Name" })
     .filter({ hasText: snapshot })
@@ -94,7 +104,9 @@ export const deleteInstanceSnapshot = async (page: Page, snapshot: string) => {
     .getByRole("button", { name: "Delete snapshot" })
     .click();
 
-  await page.waitForSelector(`text=Snapshot ${snapshot} deleted.`);
+  await page.waitForSelector(
+    `text=Snapshot ${snapshot} deleted for instance ${instance}.`,
+  );
 };
 
 export const createStorageVolumeSnapshot = async (
@@ -109,11 +121,14 @@ export const createStorageVolumeSnapshot = async (
   await page.getByLabel("Snapshot name").click();
   await page.getByLabel("Snapshot name").fill(snapshot);
   await page.getByRole("button", { name: "Create snapshot" }).last().click();
-  await page.waitForSelector(`text=Snapshot ${snapshot} created.`);
+  await page.waitForSelector(
+    `text=Snapshot ${snapshot} created for volume ${volume}.`,
+  );
 };
 
 export const restoreStorageVolumeSnapshot = async (
   page: Page,
+  volume: string,
   snapshot: string,
 ) => {
   await page
@@ -125,7 +140,9 @@ export const restoreStorageVolumeSnapshot = async (
     .getByRole("dialog", { name: "Confirm restore" })
     .getByRole("button", { name: "Restore" })
     .click();
-  await page.waitForSelector(`text=Snapshot ${snapshot} restored`);
+  await page.waitForSelector(
+    `text=Snapshot ${snapshot} restored for volume ${volume}.`,
+  );
 };
 
 export const editStorageVolumeSnapshot = async (
@@ -156,6 +173,7 @@ export const editStorageVolumeSnapshot = async (
 
 export const deleteStorageVolumeSnapshot = async (
   page: Page,
+  volume: string,
   snapshot: string,
 ) => {
   await page
@@ -172,7 +190,9 @@ export const deleteStorageVolumeSnapshot = async (
     .getByRole("button", { name: "Delete snapshot" })
     .click();
 
-  await page.waitForSelector(`text=Snapshot ${snapshot} deleted`);
+  await page.waitForSelector(
+    `text=Snapshot ${snapshot} deleted for volume ${volume}.`,
+  );
 };
 
 export const createImageFromSnapshot = async (page: Page, snapshot: string) => {

tests/snapshots.spec.ts

@@ -34,12 +34,12 @@ test("instance snapshot create, restore, edit and remove", async ({ page }) => {
 
   const snapshot = randomSnapshotName();
   await createInstanceSnapshot(page, instance, snapshot);
-  await restoreInstanceSnapshot(page, snapshot);
+  await restoreInstanceSnapshot(page, instance, snapshot);
 
   const newName = `${snapshot}-rename`;
   await editInstanceSnapshot(page, snapshot, newName, instance);
 
-  await deleteInstanceSnapshot(page, newName);
+  await deleteInstanceSnapshot(page, instance, newName);
 
   await deleteInstance(page, instance);
 });
@@ -52,12 +52,12 @@ test("custom storage volume snapshot create, restore, edit and remove", async ({
 
   const snapshot = randomSnapshotName();
   await createStorageVolumeSnapshot(page, volume, snapshot);
-  await restoreStorageVolumeSnapshot(page, snapshot);
+  await restoreStorageVolumeSnapshot(page, volume, snapshot);
 
   const newName = `${snapshot}-rename`;
   await editStorageVolumeSnapshot(page, snapshot, newName);
 
-  await deleteStorageVolumeSnapshot(page, newName);
+  await deleteStorageVolumeSnapshot(page, volume, newName);
 
   await deleteVolume(page, volume);
 });

tests/storage.spec.ts

@@ -123,7 +123,9 @@ test("custom storage volume add snapshot from CTA", async ({ page }) => {
   await page
     .getByRole("button", { name: "Create snapshot", exact: true })
     .click();
-  await page.waitForSelector(`text=Snapshot ${snapshot} created.`);
+  await page.waitForSelector(
+    `text=Snapshot ${snapshot} created for volume ${volume}.`,
+  );
 
   await deleteVolume(page, volume);
 });