frontend: Introduce react-query

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
headlamp-k8s · Aug 8, 2024 · 227bede · 227bede
1 parent 9b67e21
commit 227bede
Show file tree

Hide file tree

Showing 111 changed files with 1,828 additions and 1,195 deletions.
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import themesConf from '../src/lib/themes';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { rest } from 'msw';
 
 // https://github.com/mswjs/msw-storybook-addon
@@ -10,16 +11,27 @@ initialize();
 const darkTheme = themesConf['dark'];
 const lightTheme = themesConf['light'];
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 3 * 60_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 const withThemeProvider = (Story, context) => {
   const backgroundColor = context.globals.backgrounds ? context.globals.backgrounds.value : 'light';
   const theme = backgroundColor !== 'dark' ? lightTheme : darkTheme;
 
   const ourThemeProvider = (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <Story {...context} />
-      </ThemeProvider>
-    </StyledEngineProvider>
+    <QueryClientProvider client={queryClient}>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Story {...context} />
+        </ThemeProvider>
+      </StyledEngineProvider>
+    </QueryClientProvider>
   );
   return ourThemeProvider;
 };

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,6 +23,8 @@
     "@mui/system": "^5.15.14",
     "@mui/x-tree-view": "^6.17.0",
     "@reduxjs/toolkit": "^1.9.3",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "@testing-library/react": "^12.1.2",
     "@types/glob": "^8.1.0",
     "@types/humanize-duration": "^3.27.1",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,7 @@
 import './i18n/config';
 import './components/App/icons';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
@@ -29,13 +31,27 @@ function AppWithRedux(props: React.PropsWithChildren<{}>) {
   );
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 3 * 60_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+const queryDevtoolsEnabled = false;
+
 function App() {
   return (
     <ErrorBoundary fallback={<ErrorComponent />}>
       <Provider store={store}>
-        <AppWithRedux>
-          <AppContainer />
-        </AppWithRedux>
+        <QueryClientProvider client={queryClient}>
+          {queryDevtoolsEnabled && <ReactQueryDevtools initialIsOpen={false} />}
+
+          <AppWithRedux>
+            <AppContainer />
+          </AppWithRedux>
+        </QueryClientProvider>
       </Provider>
     </ErrorBoundary>
   );

diff --git a/frontend/src/components/Sidebar/VersionButton.tsx b/frontend/src/components/Sidebar/VersionButton.tsx
@@ -6,6 +6,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { styled, useTheme } from '@mui/system';
+import { useQuery } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +28,6 @@ const VersionIcon = styled(Icon)({
 export default function VersionButton() {
   const isSidebarOpen = useTypedSelector(state => state.sidebar.isSidebarOpen);
   const { enqueueSnackbar } = useSnackbar();
-  const [clusterVersion, setClusterVersion] = React.useState<StringDict | null>(null);
   const cluster = useCluster();
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
@@ -62,68 +62,43 @@ export default function VersionButton() {
     ];
   }
 
-  React.useEffect(
-    () => {
-      let stillAlive = true;
-      function fetchVersion() {
-        getVersion()
-          .then((results: StringDict) => {
-            if (!stillAlive) {
-              return;
-            }
-
-            setClusterVersion(results);
-            let versionChange = 0;
-            if (clusterVersion && results && results.gitVersion) {
-              versionChange = semver.compare(results.gitVersion, clusterVersion.gitVersion);
+  const { data: clusterVersion } = useQuery({
+    placeholderData: null,
+    queryKey: ['version', cluster ?? ''],
+    queryFn: () => {
+      return getVersion()
+        .then((results: StringDict) => {
+          let versionChange = 0;
+          if (clusterVersion && results && results.gitVersion) {
+            versionChange = semver.compare(results.gitVersion, clusterVersion.gitVersion);
 
-              let msg = '';
-              if (versionChange > 0) {
-                msg = t('translation|Cluster version upgraded to {{ gitVersion }}', {
-                  gitVersion: results.gitVersion,
-                });
-              } else if (versionChange < 0) {
-                msg = t('translation|Cluster version downgraded to {{ gitVersion }}', {
-                  gitVersion: results.gitVersion,
-                });
-              }
-
-              if (msg) {
-                enqueueSnackbar(msg, {
-                  key: 'version',
-                  preventDuplicate: true,
-                  autoHideDuration: versionSnackbarHideTimeout,
-                  variant: 'info',
-                });
-              }
+            let msg = '';
+            if (versionChange > 0) {
+              msg = t('translation|Cluster version upgraded to {{ gitVersion }}', {
+                gitVersion: results.gitVersion,
+              });
+            } else if (versionChange < 0) {
+              msg = t('translation|Cluster version downgraded to {{ gitVersion }}', {
+                gitVersion: results.gitVersion,
+              });
             }
-          })
-          .catch((error: Error) => console.error('Getting the cluster version:', error));
-      }
-
-      if (!clusterVersion) {
-        fetchVersion();
-      }
 
-      const intervalHandler = setInterval(() => {
-        fetchVersion();
-      }, versionFetchInterval);
+            if (msg) {
+              enqueueSnackbar(msg, {
+                key: 'version',
+                preventDuplicate: true,
+                autoHideDuration: versionSnackbarHideTimeout,
+                variant: 'info',
+              });
+            }
+          }
 
-      return function cleanup() {
-        stillAlive = false;
-        clearInterval(intervalHandler);
-      };
+          return results;
+        })
+        .catch((error: Error) => console.error('Getting the cluster version:', error));
     },
-    // eslint-disable-next-line
-    [clusterVersion]
-  );
-
-  // Use the location to make sure the version is changed, as it depends on the cluster
-  // (defined in the URL ATM).
-  // @todo: Update this if the active cluster management is changed.
-  React.useEffect(() => {
-    setClusterVersion(null);
-  }, [cluster]);
+    refetchInterval: versionFetchInterval,
+  });
 
   function handleClose() {
     setOpen(false);

diff --git a/frontend/src/components/cluster/Overview.stories.tsx b/frontend/src/components/cluster/Overview.stories.tsx
@@ -1,11 +1,12 @@
 import Container from '@mui/material/Container';
 import { Meta, StoryFn } from '@storybook/react';
+import { useMockListQuery } from '../../helpers/testHelpers';
 import Event from '../../lib/k8s/event';
 import { TestContext } from '../../test';
 import Overview from './Overview';
 
-Event.useList = () => {
-  const objList = [
+Event.useListQuery = useMockListQuery.data(
+  [
     {
       apiVersion: 'v1',
       count: 1,
@@ -130,9 +131,8 @@ Event.useList = () => {
       reportingComponent: '',
       reportingInstance: '',
     },
-  ].map((data: any) => new Event(data));
-  return [objList, null, () => {}, () => {}] as any;
-};
+  ].map((data: any) => new Event(data))
+);
 
 export default {
   title: 'cluster/Overview',