refactor: [M3-5181] - React Query for Events (#9949)

* events landing * add linode events support with filter * clean up * add poller * add event handlers and cache updater * hook up toasts * fix bug by removing early return and start refactoring * refactor event consumers * finish general refactor * optimize * fixes and clean up * fix cache updater bug * make the query updater update all queries * poc: use cursor based pagination * remove old code * use `id` for cusour based pagination and clean up * move things around to minimize re-renders * handle accounts with no events and fix queryKey bug * fix incorrect query key causing `useInProgressEvents` not to work * add comments * comment and test filtering * explain pagination approach * clean up and test `EventsLanding` * remove `src/__data__/events.ts` * remove more unused helper functions * reorganize helper functions * move `generatePollingFilter` to `event.helpers.ts` * extract helper into `getExistingEventDataForPollingFilterGenerator` and unit test * handle and test in-progress event edge case * remove outdated comment * don't pass an empty object if we don't have a `pageParam` * improve interval defaults * disable query that is for reading data only * make polling backoff match existing backoff * clean up interval hooks * simplify polling interval * fixing duplicate pull due to rules of hooks * clean up new polling interval * add changesets * clean up mount timestamp * clean up query key for poller * rename `resetEventsPolling` to `checkForNewEvents` * Apply suggestions from @jdamore-linode Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com> * Update packages/manager/src/queries/events/events.ts --------- Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
linode · Jan 26, 2024 · e4911df · e4911df
1 parent a8e51e7
commit e4911df
Show file tree

Hide file tree

Showing 111 changed files with 1,333 additions and 3,109 deletions.
diff --git a/packages/api-v4/.changeset/pr-9949-fixed-1706018014628.md b/packages/api-v4/.changeset/pr-9949-fixed-1706018014628.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Fixed
+---
+
+Removed incorrect `_initial` property on `Event` type ([#9949](https://github.com/linode/manager/pull/9949))
diff --git a/packages/api-v4/src/account/types.ts b/packages/api-v4/src/account/types.ts
@@ -410,7 +410,6 @@ export interface Event {
   time_remaining: null | string;
   username: string | null;
   secondary_entity: Entity | null;
-  _initial?: boolean;
   message: string | null;
 }
 /**

diff --git a/packages/manager/.changeset/pr-9949-tech-stories-1706017963330.md b/packages/manager/.changeset/pr-9949-tech-stories-1706017963330.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+React Query for Events ([#9949](https://github.com/linode/manager/pull/9949))
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -68,7 +68,6 @@
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "rxjs": "^5.5.6",
     "sanitize-html": "^2.11.0",
     "search-string": "^3.1.0",
     "throttle-debounce": "^2.0.0",

diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx
@@ -14,11 +14,9 @@ import { GoTo } from './GoTo';
 import { MainContent } from './MainContent';
 import { SplashScreen } from './components/SplashScreen';
 import { useAdobeAnalytics } from './hooks/useAdobeAnalytics';
-import { useEventHandlers } from './hooks/useEventHandlers';
-import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
 import { useInitialRequests } from './hooks/useInitialRequests';
 import { useNewRelic } from './hooks/useNewRelic';
-import { useToastNotifications } from './hooks/useToastNotifications';
+import { useEventsPoller } from './queries/events/events';
 import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 
 // Ensure component's display name is 'App'
@@ -31,14 +29,6 @@ const BaseApp = withDocumentTitleProvider(
 
       const { areFeatureFlagsLoading } = useSetupFeatureFlags();
 
-      const { goToOpen, setGoToOpen } = useGlobalKeyboardListener();
-
-      useEventHandlers();
-      useToastNotifications();
-
-      useAdobeAnalytics();
-      useNewRelic();
-
       if (isLoading || areFeatureFlagsLoading) {
         return <SplashScreen />;
       }
@@ -56,11 +46,19 @@ const BaseApp = withDocumentTitleProvider(
               Opens an external site in a new window
             </span>
           </div>
-          <GoTo onClose={() => setGoToOpen(false)} open={goToOpen} />
+          <GoTo />
           <DocumentTitleSegment segment="Akamai Cloud Manager" />
           <MainContent />
+          <GlobalListeners />
         </ErrorBoundary>
       );
     })
   )
 );
+
+const GlobalListeners = () => {
+  useEventsPoller();
+  useAdobeAnalytics();
+  useNewRelic();
+  return null;
+};
diff --git a/packages/manager/src/GoTo.tsx b/packages/manager/src/GoTo.tsx
@@ -1,13 +1,14 @@
 import Dialog from '@mui/material/Dialog';
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
+import { makeStyles } from 'tss-react/mui';
 
 import EnhancedSelect, { Item } from 'src/components/EnhancedSelect/Select';
 
 import { useAccountManagement } from './hooks/useAccountManagement';
 import { useFlags } from './hooks/useFlags';
+import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   input: {
@@ -53,20 +54,21 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
 }));
 
-interface Props {
-  onClose: () => void;
-  open: boolean;
-}
-
-export const GoTo = React.memo((props: Props) => {
+export const GoTo = React.memo(() => {
   const { classes } = useStyles();
   const routerHistory = useHistory();
   const { _hasAccountAccess, _isManagedAccount } = useAccountManagement();
   const flags = useFlags();
 
+  const { goToOpen, setGoToOpen } = useGlobalKeyboardListener();
+
+  const onClose = () => {
+    setGoToOpen(false);
+  };
+
   const onSelect = (item: Item<string>) => {
     routerHistory.push(item.value);
-    props.onClose();
+    onClose();
   };
 
   const links = React.useMemo(
@@ -169,8 +171,8 @@ export const GoTo = React.memo((props: Props) => {
   return (
     <Dialog
       classes={dialogClasses}
-      onClose={props.onClose}
-      open={props.open}
+      onClose={onClose}
+      open={goToOpen}
       title="Go To..."
     >
       {/* I was about to put a "@todo" item for mobile display, but realized

diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
@@ -159,8 +159,10 @@ const Help = React.lazy(() =>
 const SearchLanding = React.lazy(
   () => import('src/features/Search/SearchLanding')
 );
-const EventsLanding = React.lazy(
-  () => import('src/features/Events/EventsLanding')
+const EventsLanding = React.lazy(() =>
+  import('src/features/Events/EventsLanding').then((module) => ({
+    default: module.EventsLanding,
+  }))
 );
 const AccountActivationLanding = React.lazy(
   () => import('src/components/AccountActivation/AccountActivationLanding')