Tanstack: React Query (dev)

.eslintrc

@@ -5,7 +5,8 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:@tanstack/query/recommended"
   ],
   "root": true,
   "ignorePatterns": ["vite.config.mts"],
@@ -50,6 +51,7 @@
     }
   },
   "rules": {
+    "@tanstack/query/exhaustive-deps": "warn",
     "@typescript-eslint/ban-types": "warn",
     "@typescript-eslint/no-base-to-string": "warn",
     "@typescript-eslint/consistent-type-imports": "warn",

package.json

@@ -22,6 +22,9 @@
     "@mui/styles": "^5.11.9",
     "@mui/x-date-pickers": "^5.0.18",
     "@mui/x-tree-view": "^7.6.2",
+    "@tanstack/query-sync-storage-persister": "^5.59.0",
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-persist-client": "^5.59.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autosuggest-highlight": "^3.3.4",
@@ -41,6 +44,7 @@
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
     "lodash": "^4.17.21",
+    "lz-string": "^1.5.0",
     "md5": "^2.3.0",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.40",
@@ -101,6 +105,8 @@
     "@iconify/icons-simple-icons": "^1.2.56",
     "@iconify/react": "^4.1.1",
     "@jest/globals": "^29.6.4",
+    "@tanstack/eslint-plugin-query": "^5.58.1",
+    "@tanstack/react-query-devtools": "^5.56.2",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",

pipelines/azure-test.yaml

@@ -33,6 +33,11 @@ jobs:
           yarn install
         displayName: Install assemblyline-ui-frontend
 
+      - script: |
+          set -xv  # Echo commands before they are run
+          npm run tsc
+        displayName: TypeScript
+
       - script: |
           set -xv  # Echo commands before they are run
           npm run ci-test
@@ -43,11 +48,6 @@ jobs:
           npm run ci-lint
         displayName: ESLint
 
-      - script: |
-          set -xv  # Echo commands before they are run
-          npm run tsc
-        displayName: TypeScript
-
       - task: PublishCodeCoverageResults@2
         inputs:
           codeCoverageTool: Cobertura

src/commons/components/pages/PageFullScreen.tsx

@@ -1,11 +1,12 @@
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import { IconButton, Tooltip, useTheme } from '@mui/material';
+import browser from 'browser-detect';
 import useAppBar from 'commons/components/app/hooks/useAppBar';
 import useAppBarHeight from 'commons/components/app/hooks/useAppBarHeight';
 import useAppLayout from 'commons/components/app/hooks/useAppLayout';
 import useFullscreenStatus from 'commons/components/utils/hooks/useFullscreenStatus';
-import { memo, useCallback, useRef } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import PageContent from './PageContent';
 
@@ -31,6 +32,8 @@ const PageFullscreen = ({ children, margin = null, mb = 2, ml = 2, mr = 2, mt =
 
   const barWillHide = layout.current !== 'top' && appbar.autoHide;
 
+  const isFirefox = useMemo(() => browser().name === 'firefox', []);
+
   try {
     [isFullscreen, setIsFullscreen] = useFullscreenStatus(maximizableElement);
   } catch (e) {
@@ -63,7 +66,20 @@ const PageFullscreen = ({ children, margin = null, mb = 2, ml = 2, mr = 2, mt =
             paddingTop: theme.spacing(2),
             right: theme.spacing(2),
             zIndex: theme.zIndex.appBar + 1,
-            top: barWillHide || isFullscreen ? 0 : appBarHeight
+            top: barWillHide || isFullscreen ? 0 : appBarHeight,
+            ...(!isFirefox
+              ? null
+              : !isFullscreen
+              ? {
+                  position: 'fixed',
+                  top: '96px',
+                  right: '32px'
+                }
+              : {
+                  position: 'fixed',
+                  top: '32px',
+                  right: '32px'
+                })
           }}
         >
           {fullscreenSupported ? null : (

src/components/app/app.tsx

@@ -24,6 +24,7 @@ import Routes from 'components/routes/routes';
 import Tos from 'components/routes/tos';
 import setMomentFRLocale from 'helpers/moment-fr-locale';
 import { getProvider } from 'helpers/utils';
+import { APIProvider } from 'lib/api/APIProvider';
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
@@ -102,13 +103,15 @@ export const MyApp: React.FC<any> = () => {
   const myUser: CustomAppUserService = useMyUser();
   return (
     <BrowserRouter basename="/">
-      <SafeResultsProvider>
-        <QuotaProvider>
-          <AppProvider user={myUser} preferences={myPreferences} theme={myTheme} sitemap={mySitemap}>
-            <MyAppMain />
-          </AppProvider>
-        </QuotaProvider>
-      </SafeResultsProvider>
+      <APIProvider>
+        <SafeResultsProvider>
+          <QuotaProvider>
+            <AppProvider user={myUser} preferences={myPreferences} theme={myTheme} sitemap={mySitemap}>
+              <MyAppMain />
+            </AppProvider>
+          </QuotaProvider>
+        </SafeResultsProvider>
+      </APIProvider>
     </BrowserRouter>
   );
 };

src/components/hooks/useMyAPI.tsx

@@ -217,7 +217,7 @@ const useMyAPI = (): UseMyAPIReturn => {
         'Content-Type': contentType,
         'X-XSRF-TOKEN': getXSRFCookie()
       },
-      body: (!body ? null : contentType === 'application/json' ? JSON.stringify(body) : body) as BodyInit
+      body: (body !== null ? (contentType === 'application/json' ? JSON.stringify(body) : body) : null) as BodyInit
     };
 
     // Run enter callback

src/components/models/base/signature.ts

@@ -38,7 +38,7 @@ export type Signature = {
   source: string;
 
   /**  */
-  state_change_date?: string | Date;
+  state_change_date?: string;
 
   /**  */
   state_change_user?: string;

src/components/routes/admin/service_detail/general.tsx

@@ -373,7 +373,7 @@ const ServiceGeneral = ({
                 isOptionEqualToValue={(option, value) => option.toUpperCase() === value.toUpperCase()}
                 onChange={(_e, values) => {
                   setModified(true);
-                  setService(s => ({ ...s, recursion_prevention: values.toSorted() }));
+                  setService(s => ({ ...s, recursion_prevention: [...values].sort() }));
                 }}
                 renderInput={params => <TextField size="small" margin="dense" {...params} variant="outlined" />}
                 renderOption={(props, option, state) => (

src/components/routes/admin/services.tsx

@@ -74,7 +74,7 @@ export default function Services() {
     () =>
       (serviceFeeds || [])
         .reduce((prev: string[], item) => (item?.summary ? [...prev, item.summary] : prev), [])
-        .toSorted(),
+        .sort(),
     [serviceFeeds]
   );
 

src/components/routes/alerts.tsx

@@ -164,7 +164,7 @@ const WrappedAlertsContent = () => {
     const q = search.get('q');
     const fq = search.get('fq');
 
-    const values = (!q && !fq.length ? ['*'] : q ? [q] : []).concat(fq);
+    const values = (!q && !fq.length ? [''] : q ? [q] : []).concat(fq);
     const query = values
       .map(v => ([' or ', ' and '].some(a => v.toLowerCase().includes(a)) ? `(${v})` : v))
       .join(' AND ');

src/components/routes/alerts/components/Filters.tsx

@@ -91,7 +91,8 @@ export const SORT_OPTIONS: Option[] = [
   { value: 'reporting_ts', label: 'alerted_ts' },
   { value: 'owner', label: 'owner' },
   { value: 'priority', label: 'priority' },
-  { value: 'status', label: 'status' }
+  { value: 'status', label: 'status' },
+  { value: 'al.score', label: 'al.score' }
 ];
 
 export const TC_OPTIONS: Option[] = [

src/components/routes/alerts/utils/SearchParams.tsx

@@ -230,7 +230,7 @@ export class ArrayParam<T extends Params> extends BaseParam<T> {
 
   private append(prev: URLSearchParams, values: string[][]): void {
     values
-      .toSorted((a, b) => a.at(-1).localeCompare(b.at(-1)))
+      .sort((a, b) => a.at(-1).localeCompare(b.at(-1)))
       .map(value => this.fromPrefix(value))
       .forEach(v => {
         prev.append(this.key, v);

src/components/routes/dashboard.tsx

@@ -400,9 +400,9 @@ const WrappedDispatcherCard = ({ dispatcher, up, down, handleStatusChange, statu
           {dispatcher.initialized ? (
             <div>
               {up.length === 0 && down.length === 0 && <span className={classes.muted}>{t('no_services')}</span>}
-              {up.length !== 0 && <span>{up.join(' | ')}</span>}
+              {up.length !== 0 && <span>{up.sort().join(' | ')}</span>}
               {up.length !== 0 && down.length !== 0 && <span> :: </span>}
-              {down.length !== 0 && <span>{down.join(' | ')}</span>}
+              {down.length !== 0 && <span>{down.sort().join(' | ')}</span>}
             </div>
           ) : (
             <div>