feat(operations) auto refresh ops on visiting the ops list and add a …

…refresh button

Signed-off-by: David Edler <david.edler@canonical.com>

src/context/operationsProvider.tsx

@@ -17,6 +17,7 @@ type OperationsContextType = {
   runningOperations: LxdOperation[];
   error: Error | null;
   isLoading: boolean;
+  isFetching: boolean;
   refetchOperations: (options?: RefetchOptions) => void;
 };
 
@@ -29,6 +30,7 @@ const OperationsContext = createContext<OperationsContextType>({
   runningOperations: [],
   error: null,
   isLoading: false,
+  isFetching: false,
   refetchOperations: () => null,
 });
 
@@ -39,6 +41,7 @@ const OperationsProvider: FC<Props> = ({ children }) => {
     data: operationList,
     error,
     isLoading,
+    isFetching,
     refetch,
   } = useQuery({
     queryKey: [queryKeys.operations],
@@ -78,6 +81,7 @@ const OperationsProvider: FC<Props> = ({ children }) => {
     runningOperations: running,
     error,
     isLoading,
+    isFetching,
     refetchOperations: debouncedRefetch,
   };
 

src/pages/operations/OperationList.tsx

@@ -15,6 +15,7 @@ import OperationInstanceName from "pages/operations/OperationInstanceName";
 import NotificationRow from "components/NotificationRow";
 import { getProjectName } from "util/operations";
 import { useOperations } from "context/operationsProvider";
+import RefreshOperationsBtn from "pages/operations/actions/RefreshOperationsBtn";
 
 const OperationList: FC = () => {
   const notify = useNotify();
@@ -122,7 +123,10 @@ const OperationList: FC = () => {
 
   return (
     <>
-      <BaseLayout title="Ongoing operations">
+      <BaseLayout
+        title="Ongoing operations"
+        controls={<RefreshOperationsBtn />}
+      >
         <NotificationRow />
         <Row>
           {operations.length > 0 && (

src/pages/operations/actions/RefreshOperationsBtn.tsx

@@ -0,0 +1,30 @@
+import React, { FC, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { queryKeys } from "util/queryKeys";
+import { ActionButton, Icon } from "@canonical/react-components";
+import { useOperations } from "context/operationsProvider";
+
+const RefreshOperationsBtn: FC = () => {
+  const { isFetching } = useOperations();
+  const queryClient = useQueryClient();
+
+  const handleRefresh = () => {
+    void queryClient.invalidateQueries({ queryKey: [queryKeys.operations] });
+  };
+
+  // force a refresh on first render
+  useEffect(handleRefresh, []);
+
+  return (
+    <ActionButton
+      className="u-no-margin--bottom has-icon"
+      onClick={handleRefresh}
+      loading={isFetching}
+    >
+      <Icon name="restart" />
+      <span>Refresh</span>
+    </ActionButton>
+  );
+};
+
+export default RefreshOperationsBtn;