chore(notify) update react-components and react-router-dom, fix notif…

…y.queue calls to not directly submit a notification, but to queue it for the next page Signed-off-by: David Edler <david.edler@canonical.com>
canonical · Jan 20, 2024 · 38cacc1 · 38cacc1
1 parent 46296dc
commit 38cacc1
Show file tree

Hide file tree

Showing 26 changed files with 136 additions and 165 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "serve": "./entrypoint",
     "test-js": "react-scripts test src/ --watchAll=false"},
   "dependencies": {
-    "@canonical/react-components": "0.47.1",
+    "@canonical/react-components": "0.47.3",
     "@monaco-editor/react": "4.6.0",
     "@tanstack/react-query": "5.17.15",
     "@use-it/event-listener": "0.1.7",
@@ -36,7 +36,7 @@
     "react": "18.2.0",
     "react-cytoscapejs": "2.0.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.17.0",
+    "react-router-dom": "6.21.3",
     "react-scripts": "5.0.1",
     "react-useportal": "1.0.19",
     "serve": "14.2.1",

diff --git a/src/Root.tsx b/src/Root.tsx
@@ -1,6 +1,9 @@
 import React, { FC } from "react";
 import Navigation from "components/Navigation";
-import { NotificationProvider } from "@canonical/react-components";
+import {
+  NotificationProvider,
+  QueuedNotification,
+} from "@canonical/react-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Panels from "components/Panels";
 import { AuthProvider } from "context/auth";
@@ -11,13 +14,16 @@ import Events from "pages/instances/Events";
 import App from "./App";
 import ErrorBoundary from "components/ErrorBoundary";
 import ErrorPage from "components/ErrorPage";
+import { useLocation } from "react-router-dom";
 
 const queryClient = new QueryClient();
 
 const Root: FC = () => {
+  const location = useLocation() as QueuedNotification;
+
   return (
     <ErrorBoundary fallback={ErrorPage}>
-      <NotificationProvider>
+      <NotificationProvider state={location.state} pathname={location.pathname}>
         <QueryClientProvider client={queryClient}>
           <AuthProvider>
             <ProjectProvider>

diff --git a/src/pages/cluster/ClusterGroupForm.tsx b/src/pages/cluster/ClusterGroupForm.tsx
@@ -5,6 +5,7 @@ import {
   Form,
   Input,
   Row,
+  success,
   useNotify,
 } from "@canonical/react-components";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -84,9 +85,7 @@ const ClusterGroupForm: FC<Props> = ({ group }) => {
           const verb = group ? "saved" : "created";
           navigate(
             `/ui/cluster/groups/detail/${values.name}`,
-            notify.queue(
-              notify.success(`Cluster group ${values.name} ${verb}.`),
-            ),
+            notify.queue(success(`Cluster group ${values.name} ${verb}.`)),
           );
         })
         .catch((e: Error) => {

diff --git a/src/pages/cluster/actions/DeleteClusterGroupBtn.tsx b/src/pages/cluster/actions/DeleteClusterGroupBtn.tsx
@@ -4,7 +4,11 @@ import ItemName from "components/ItemName";
 import { deleteClusterGroup } from "api/cluster";
 import { queryKeys } from "util/queryKeys";
 import { useQueryClient } from "@tanstack/react-query";
-import { ConfirmationButton, useNotify } from "@canonical/react-components";
+import {
+  ConfirmationButton,
+  success,
+  useNotify,
+} from "@canonical/react-components";
 
 interface Props {
   group: string;
@@ -22,7 +26,7 @@ const DeleteClusterGroupBtn: FC<Props> = ({ group }) => {
       .then(() => {
         navigate(
           `/ui/cluster`,
-          notify.queue(notify.success(`Cluster group ${group} deleted.`)),
+          notify.queue(success(`Cluster group ${group} deleted.`)),
         );
       })
       .catch((e) => {

diff --git a/src/pages/instances/InstanceDetailHeader.tsx b/src/pages/instances/InstanceDetailHeader.tsx
@@ -8,7 +8,7 @@ import InstanceStateActions from "pages/instances/actions/InstanceStateActions";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { checkDuplicateName } from "util/helpers";
-import { useNotify } from "@canonical/react-components";
+import { success, useNotify } from "@canonical/react-components";
 import { useEventQueue } from "context/eventQueue";
 
 interface Props {
@@ -59,7 +59,7 @@ const InstanceDetailHeader: FC<Props> = ({ name, instance, project }) => {
           () => {
             navigate(
               `/ui/project/${project}/instances/detail/${values.name}`,
-              notify.queue(notify.success("Instance renamed.")),
+              notify.queue(success("Instance renamed.")),
             );
             void formik.setFieldValue("isRenaming", false);
           },

diff --git a/src/pages/instances/actions/DeleteInstanceBtn.tsx b/src/pages/instances/actions/DeleteInstanceBtn.tsx
@@ -8,6 +8,7 @@ import { useDeleteIcon } from "context/useDeleteIcon";
 import {
   ConfirmationButton,
   Icon,
+  success,
   useNotify,
 } from "@canonical/react-components";
 import classnames from "classnames";
@@ -38,7 +39,7 @@ const DeleteInstanceBtn: FC<Props> = ({ instance }) => {
           });
           navigate(
             `/ui/project/${instance.project}/instances`,
-            notify.queue(notify.success(`Instance ${instance.name} deleted.`)),
+            notify.queue(success(`Instance ${instance.name} deleted.`)),
           );
         },
         (msg) =>

diff --git a/src/pages/networks/CreateNetwork.tsx b/src/pages/networks/CreateNetwork.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import { Button, useNotify } from "@canonical/react-components";
+import { Button, success, useNotify } from "@canonical/react-components";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -91,7 +91,7 @@ const CreateNetwork: FC = () => {
           });
           navigate(
             `/ui/project/${project}/networks`,
-            notify.queue(notify.success(`Network ${values.name} created.`)),
+            notify.queue(success(`Network ${values.name} created.`)),
           );
         })
         .catch((e) => {

diff --git a/src/pages/networks/NetworkDetailHeader.tsx b/src/pages/networks/NetworkDetailHeader.tsx
@@ -7,7 +7,7 @@ import { checkDuplicateName } from "util/helpers";
 import { LxdNetwork } from "types/network";
 import { renameNetwork } from "api/networks";
 import DeleteNetworkBtn from "pages/networks/actions/DeleteNetworkBtn";
-import { useNotify } from "@canonical/react-components";
+import { success, useNotify } from "@canonical/react-components";
 
 interface Props {
   name: string;
@@ -48,7 +48,7 @@ const NetworkDetailHeader: FC<Props> = ({ name, network, project }) => {
         .then(() => {
           navigate(
             `/ui/project/${project}/networks/detail/${values.name}`,
-            notify.queue(notify.success("Network renamed.")),
+            notify.queue(success("Network renamed.")),
           );
           void formik.setFieldValue("isRenaming", false);
         })

diff --git a/src/pages/networks/actions/DeleteNetworkBtn.tsx b/src/pages/networks/actions/DeleteNetworkBtn.tsx
@@ -5,7 +5,11 @@ import { LxdNetwork } from "types/network";
 import { deleteNetwork } from "api/networks";
 import { queryKeys } from "util/queryKeys";
 import { useQueryClient } from "@tanstack/react-query";
-import { ConfirmationButton, useNotify } from "@canonical/react-components";
+import {
+  ConfirmationButton,
+  success,
+  useNotify,
+} from "@canonical/react-components";
 
 interface Props {
   network: LxdNetwork;
@@ -30,7 +34,7 @@ const DeleteNetworkBtn: FC<Props> = ({ network, project }) => {
         });
         navigate(
           `/ui/project/${project}/networks`,
-          notify.queue(notify.success(`Network ${network.name} deleted.`)),
+          notify.queue(success(`Network ${network.name} deleted.`)),
         );
       })
       .catch((e) => {

diff --git a/src/pages/profiles/CreateProfile.tsx b/src/pages/profiles/CreateProfile.tsx
@@ -5,6 +5,7 @@ import {
   Form,
   Notification,
   Row,
+  success,
   useNotify,
 } from "@canonical/react-components";
 import { useFormik } from "formik";
@@ -110,7 +111,7 @@ const CreateProfile: FC = () => {
         .then(() => {
           navigate(
             `/ui/project/${project}/profiles`,
-            notify.queue(notify.success(`Profile ${values.name} created.`)),
+            notify.queue(success(`Profile ${values.name} created.`)),
           );
         })
         .catch((e: Error) => {

diff --git a/src/pages/profiles/ProfileDetailHeader.tsx b/src/pages/profiles/ProfileDetailHeader.tsx
@@ -7,7 +7,7 @@ import { renameProfile } from "api/profiles";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { checkDuplicateName } from "util/helpers";
-import { useNotify } from "@canonical/react-components";
+import { success, useNotify } from "@canonical/react-components";
 
 interface Props {
   name: string;
@@ -54,7 +54,7 @@ const ProfileDetailHeader: FC<Props> = ({
         .then(() => {
           navigate(
             `/ui/project/${project}/profiles/detail/${values.name}`,
-            notify.queue(notify.success("Profile renamed.")),
+            notify.queue(success("Profile renamed.")),
           );
           void formik.setFieldValue("isRenaming", false);
         })

diff --git a/src/pages/profiles/actions/DeleteProfileBtn.tsx b/src/pages/profiles/actions/DeleteProfileBtn.tsx
@@ -7,6 +7,7 @@ import { useDeleteIcon } from "context/useDeleteIcon";
 import {
   ConfirmationButton,
   Icon,
+  success,
   useNotify,
 } from "@canonical/react-components";
 import classnames from "classnames";
@@ -39,7 +40,7 @@ const DeleteProfileBtn: FC<Props> = ({
         });
         navigate(
           `/ui/project/${project}/profiles`,
-          notify.queue(notify.success(`Profile ${profile.name} deleted.`)),
+          notify.queue(success(`Profile ${profile.name} deleted.`)),
         );
       })
       .catch((e) => {

diff --git a/src/pages/projects/CreateProject.tsx b/src/pages/projects/CreateProject.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState } from "react";
-import { Button, useNotify } from "@canonical/react-components";
+import { Button, success, useNotify } from "@canonical/react-components";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useQueryClient } from "@tanstack/react-query";
@@ -99,7 +99,7 @@ const CreateProject: FC = () => {
         .then(() => {
           navigate(
             `/ui/project/${values.name}/instances`,
-            notify.queue(notify.success(`Project ${values.name} created.`)),
+            notify.queue(success(`Project ${values.name} created.`)),
           );
         })
         .catch((e: Error) => {

diff --git a/src/pages/projects/ProjectConfigurationHeader.tsx b/src/pages/projects/ProjectConfigurationHeader.tsx
@@ -7,7 +7,7 @@ import * as Yup from "yup";
 import { useFormik } from "formik";
 import { checkDuplicateName } from "util/helpers";
 import DeleteProjectBtn from "./actions/DeleteProjectBtn";
-import { useNotify } from "@canonical/react-components";
+import { success, useNotify } from "@canonical/react-components";
 import HelpLink from "components/HelpLink";
 import { useEventQueue } from "context/eventQueue";
 import { useDocs } from "context/useDocs";
@@ -53,7 +53,7 @@ const ProjectConfigurationHeader: FC<Props> = ({ project }) => {
           () => {
             navigate(
               `/ui/project/${values.name}/configuration`,
-              notify.queue(notify.success("Project renamed.")),
+              notify.queue(success("Project renamed.")),
             );
             void formik.setFieldValue("isRenaming", false);
           },

diff --git a/src/pages/projects/actions/DeleteProjectBtn.tsx b/src/pages/projects/actions/DeleteProjectBtn.tsx
@@ -10,6 +10,7 @@ import { useDeleteIcon } from "context/useDeleteIcon";
 import {
   ConfirmationButton,
   Icon,
+  success,
   useNotify,
 } from "@canonical/react-components";
 import classnames from "classnames";
@@ -43,7 +44,7 @@ const DeleteProjectBtn: FC<Props> = ({ project }) => {
       .then(() => {
         navigate(
           `/ui/project/default/instances`,
-          notify.queue(notify.success(`Project ${project.name} deleted.`)),
+          notify.queue(success(`Project ${project.name} deleted.`)),
         );
       })
       .catch((e) => {

diff --git a/src/pages/storage/StoragePoolHeader.tsx b/src/pages/storage/StoragePoolHeader.tsx
@@ -7,7 +7,7 @@ import { LxdStoragePool } from "types/storage";
 import { renameStoragePool } from "api/storage-pools";
 import DeleteStoragePoolBtn from "pages/storage/actions/DeleteStoragePoolBtn";
 import { testDuplicateStoragePoolName } from "util/storagePool";
-import { useNotify } from "@canonical/react-components";
+import { success, useNotify } from "@canonical/react-components";
 
 interface Props {
   name: string;
@@ -42,7 +42,7 @@ const StoragePoolHeader: FC<Props> = ({ name, pool, project }) => {
         .then(() => {
           navigate(
             `/ui/project/${project}/storage/detail/${values.name}`,
-            notify.queue(notify.success("Storage pool renamed.")),
+            notify.queue(success("Storage pool renamed.")),
           );
           void formik.setFieldValue("isRenaming", false);
         })

diff --git a/src/pages/storage/StorageVolumeHeader.tsx b/src/pages/storage/StorageVolumeHeader.tsx
@@ -6,7 +6,7 @@ import * as Yup from "yup";
 import { LxdStorageVolume } from "types/storage";
 import { renameStorageVolume } from "api/storage-pools";
 import { testDuplicateStorageVolumeName } from "util/storageVolume";
-import { useNotify } from "@canonical/react-components";
+import { success, useNotify } from "@canonical/react-components";
 import DeleteStorageVolumeBtn from "pages/storage/actions/DeleteStorageVolumeBtn";
 
 interface Props {
@@ -49,7 +49,7 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project }) => {
         .then(() => {
           navigate(
             `/ui/project/${project}/storage/detail/${volume.pool}/${volume.type}/${values.name}`,
-            notify.queue(notify.success("Storage volume renamed.")),
+            notify.queue(success("Storage volume renamed.")),
           );
           void formik.setFieldValue("isRenaming", false);
         })

diff --git a/src/pages/storage/StorageVolumeSnapshots.tsx b/src/pages/storage/StorageVolumeSnapshots.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import {
   EmptyState,
   Icon,
@@ -62,14 +62,6 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
       }),
   });
 
-  const onSuccess = (message: string) => {
-    notify.queue(notify.success(message));
-  };
-
-  const onFailure = (title: string, error: unknown, message?: ReactNode) => {
-    notify.failure(title, error, message);
-  };
-
   const snapshotsDisabled = isSnapshotsDisabled(project);
 
   useEffect(() => {
@@ -129,12 +121,7 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
 
   const rows = filteredSnapshots.map((snapshot) => {
     const actions = (
-      <VolumeSnapshotActions
-        volume={volume}
-        snapshot={snapshot}
-        onSuccess={onSuccess}
-        onFailure={onFailure}
-      />
+      <VolumeSnapshotActions volume={volume} snapshot={snapshot} />
     );
 
     return {
@@ -227,8 +214,6 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
               </div>
               <VolumeConfigureSnapshotBtn
                 volume={volume}
-                onSuccess={onSuccess}
-                onFailure={onFailure}
                 className="u-no-margin--right"
               />
               <VolumeAddSnapshotBtn
@@ -244,8 +229,6 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
                 snapshotNames={selectedNames}
                 onStart={() => setProcessingNames(selectedNames)}
                 onFinish={() => setProcessingNames([])}
-                onSuccess={onSuccess}
-                onFailure={onFailure}
               />
             </div>
           )}
@@ -323,8 +306,6 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
           </p>
           <VolumeConfigureSnapshotBtn
             volume={volume}
-            onSuccess={onSuccess}
-            onFailure={onFailure}
             isDisabled={snapshotsDisabled}
           />
           <VolumeAddSnapshotBtn

diff --git a/src/pages/storage/actions/DeleteStoragePoolBtn.tsx b/src/pages/storage/actions/DeleteStoragePoolBtn.tsx
@@ -2,6 +2,7 @@ import React, { FC, useState } from "react";
 import {
   ConfirmationButton,
   Icon,
+  success,
   useNotify,
 } from "@canonical/react-components";
 import { useQueryClient } from "@tanstack/react-query";
@@ -39,7 +40,7 @@ const DeleteStoragePoolBtn: FC<Props> = ({
         });
         navigate(
           `/ui/project/${project}/storage`,
-          notify.queue(notify.success(`Storage pool ${pool.name} deleted.`)),
+          notify.queue(success(`Storage pool ${pool.name} deleted.`)),
         );
       })
       .catch((e) => {