From 40117a54fa7350dd20d2ad44ce8a9036759147f2 Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Thu, 11 Apr 2024 13:56:25 +0200
Subject: [PATCH] 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            |  4 +++
 src/pages/operations/OperationList.tsx        |  6 +++-
 .../actions/RefreshOperationsBtn.tsx          | 30 +++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/operations/actions/RefreshOperationsBtn.tsx

diff --git a/src/context/operationsProvider.tsx b/src/context/operationsProvider.tsx
index 28c4f149a..2fd450629 100644
--- a/src/context/operationsProvider.tsx
+++ b/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,
   };
 
diff --git a/src/pages/operations/OperationList.tsx b/src/pages/operations/OperationList.tsx
index 091365c65..14822b735 100644
--- a/src/pages/operations/OperationList.tsx
+++ b/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 && (
diff --git a/src/pages/operations/actions/RefreshOperationsBtn.tsx b/src/pages/operations/actions/RefreshOperationsBtn.tsx
new file mode 100644
index 000000000..b80272d40
--- /dev/null
+++ b/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;