Test

Andrewgdewar · Jul 11, 2024 · 73eca19 · 73eca19
1 parent a227c57
commit 73eca19
Show file tree

Hide file tree

Showing 16 changed files with 84 additions and 39 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,11 +12,14 @@ import { ContentOrigin, FilterData } from './services/Content/ContentApi';
 import { useContentListQuery } from './services/Content/ContentQueries';
 import { perPageKey } from './Pages/Repositories/ContentListTable/ContentListTable';
 import { REPOSITORIES_ROUTE } from './Routes/constants';
+import usePageSafe from 'Hooks/usePageSafe';
 
 export default function App() {
   const { rbac, isFetchingFeatures, zeroState, setZeroState } = useAppContext();
   const storedPerPage = Number(localStorage.getItem(perPageKey)) || 20;
   const { pathname } = useLocation();
+  const pageSafe = usePageSafe();
+
   const isDefaultRoute = useMemo(
     () => last(pathname.split('/')) === REPOSITORIES_ROUTE,
     [pathname],
@@ -50,13 +53,15 @@ export default function App() {
   if (!rbac || isFetchingFeatures || isLoading) {
     return (
       <Bullseye>
+        <div data-ouia-app-safe={false} />
         <Spinner size='xl' />
       </Bullseye>
     );
   }
 
   return (
     <>
+      <div data-ouia-app-safe={pageSafe} />
       <NotificationsPortal />
       <Routes />
     </>

diff --git a/src/Hooks/usePageSafe.tsx b/src/Hooks/usePageSafe.tsx
@@ -0,0 +1,16 @@
+import { useIsFetching, useIsMutating } from 'react-query';
+import useDebounce from './useDebounce';
+
+function usePageSafe(): boolean {
+  const isFetching = !!useIsFetching();
+  const isMutating = !!useIsMutating();
+  const isSafe = !isFetching && !isMutating;
+
+  const debouncedSafety = useDebounce(isSafe, 150);
+
+  // if unsafe, we want to immediately return the value
+  // if safe, we want to wait a small smount of time for cascading calls to occur
+  return isSafe ? debouncedSafety : isSafe;
+}
+
+export default usePageSafe;
diff --git a/src/Pages/Repositories/AdminTaskTable/AdminTaskTable.tsx b/src/Pages/Repositories/AdminTaskTable/AdminTaskTable.tsx
@@ -30,6 +30,7 @@ import { useAdminTaskListQuery } from 'services/AdminTasks/AdminTaskQueries';
 import { AdminTaskFilterData, AdminTask } from 'services/AdminTasks/AdminTaskApi';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { formatDateDDMMMYYYY } from 'helpers';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   mainContainer: {
@@ -60,6 +61,7 @@ const perPageKey = 'adminTaskPerPage';
 const AdminTaskTable = () => {
   const classes = useStyles();
   const navigate = useNavigate();
+  const pageSafe = usePageSafe();
   const storedPerPage = Number(localStorage.getItem(perPageKey)) || 20;
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(storedPerPage);
@@ -73,10 +75,14 @@ const AdminTaskTable = () => {
     typenames: [],
   });
 
-  const clearFilters = () => setFilterData({ statuses: [], accountId: '', orgId: '' , typenames: []});
+  const clearFilters = () =>
+    setFilterData({ statuses: [], accountId: '', orgId: '', typenames: [] });
 
   const notFiltered =
-      filterData.typenames?.length === 0 && filterData.statuses?.length === 0 && filterData.accountId === '' && filterData.orgId === '';
+    filterData.typenames?.length === 0 &&
+    filterData.statuses?.length === 0 &&
+    filterData.accountId === '' &&
+    filterData.orgId === '';
 
   const columnSortAttributes = ['org_id', 'account_id', 'typename', 'queued_at', 'status'];
 
@@ -146,7 +152,7 @@ const AdminTaskTable = () => {
 
   return (
     <Grid
-      data-ouia-safe={!actionTakingPlace}
+      data-ouia-safe={pageSafe}
       data-ouia-component-id='admin_task_list_page'
       className={countIsZero ? classes.mainContainer100Height : classes.mainContainer}
     >

diff --git a/src/Pages/Repositories/AdminTaskTable/components/ViewPayloadModal/ViewPayloadModal.tsx b/src/Pages/Repositories/AdminTaskTable/components/ViewPayloadModal/ViewPayloadModal.tsx
@@ -18,6 +18,7 @@ import { useFetchAdminTaskQuery } from 'services/AdminTasks/AdminTaskQueries';
 import { useNavigate, useParams } from 'react-router-dom';
 import useRootPath from 'Hooks/useRootPath';
 import { ADMIN_TASKS_ROUTE } from 'Routes/constants';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   jsonView: {
@@ -36,6 +37,7 @@ const ViewPayloadModal = () => {
   const classes = useStyles();
   const navigate = useNavigate();
   const rootPath = useRootPath();
+  const pageSafe = usePageSafe();
 
   const onClose = () => navigate(`${rootPath}/${ADMIN_TASKS_ROUTE}`);
 
@@ -101,14 +103,13 @@ const ViewPayloadModal = () => {
     return tabs;
   }, [adminTask?.uuid, isFetching]);
 
-  const actionTakingPlace = isFetching && !!adminTask;
   const showLoading = isLoading || !adminTask;
   return (
     <Modal
       position='top'
       variant={ModalVariant.medium}
       ouiaId='task_details'
-      ouiaSafe={!actionTakingPlace}
+      ouiaSafe={pageSafe}
       aria-label='Task details'
       isOpen
       onClose={onClose}

diff --git a/src/Pages/Repositories/ContentListTable/ContentListTable.tsx b/src/Pages/Repositories/ContentListTable/ContentListTable.tsx
@@ -52,6 +52,7 @@ import dayjs from 'dayjs';
 import ChangedArrows from './components/SnapshotListModal/components/ChangedArrows';
 import { Outlet, useNavigate, useOutletContext, useSearchParams } from 'react-router-dom';
 import { ADD_ROUTE, DELETE_ROUTE, EDIT_ROUTE } from 'Routes/constants';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   mainContainer: {
@@ -107,6 +108,7 @@ const ContentListTable = () => {
   const [checkedRepositories, setCheckedRepositories] = useState<Set<string>>(new Set<string>());
   const [polling, setPolling] = useState(false);
   const [pollCount, setPollCount] = useState(0);
+  const pageSafe = usePageSafe();
 
   const isRedHatRepository = contentOrigin === ContentOrigin.REDHAT;
 
@@ -444,7 +446,7 @@ const ContentListTable = () => {
         }}
       />
       <Grid
-        data-ouia-safe={!actionTakingPlace}
+        data-ouia-safe={pageSafe}
         data-ouia-component-id='content_list_page'
         className={countIsZero ? classes.mainContainer100Height : classes.mainContainer}
       >
@@ -476,7 +478,7 @@ const ContentListTable = () => {
           </FlexItem>
         </Flex>
         {showLoader ? (
-          <Bullseye data-ouia-safe={!actionTakingPlace} data-ouia-component-id='content_list_page'>
+          <Bullseye data-ouia-safe={pageSafe} data-ouia-component-id='content_list_page'>
             <EmptyTableState
               notFiltered={notFiltered}
               clearFilters={clearFilters}

diff --git a/src/Pages/Repositories/ContentListTable/components/AddContent/AddContent.tsx b/src/Pages/Repositories/ContentListTable/components/AddContent/AddContent.tsx
@@ -58,6 +58,7 @@ import useRootPath from 'Hooks/useRootPath';
 import { useAppContext } from 'middleware/AppContext';
 import CustomHelperText from 'components/CustomHelperText/CustomHelperText';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   description: {
@@ -130,6 +131,7 @@ const defaultTouchedState = { name: false, url: false, gpgKey: false };
 const AddContent = () => {
   const navigate = useNavigate();
   const rootPath = useRootPath();
+  const pageSafe = usePageSafe();
   const [changeVerified, setChangeVerified] = useState(false);
   const [gpgKeyList, setGpgKeyList] = useState<Array<string>>(['']);
   const { features } = useAppContext();
@@ -412,7 +414,7 @@ const AddContent = () => {
       variant={ModalVariant.medium}
       title='Add custom repositories'
       ouiaId='add_custom_repository'
-      ouiaSafe={!actionTakingPlace}
+      ouiaSafe={pageSafe}
       help={
         <Popover
           headerContent={<div>Add a custom repository</div>}

diff --git a/src/Pages/Repositories/ContentListTable/components/DeleteContentModal/DeleteContentModal.tsx b/src/Pages/Repositories/ContentListTable/components/DeleteContentModal/DeleteContentModal.tsx
@@ -33,6 +33,7 @@ import { TEMPLATES_ROUTE } from 'Routes/constants';
 import { ContentItem, FilterData } from 'services/Content/ContentApi';
 import { isEmpty } from 'lodash';
 import useDeepCompareEffect from 'Hooks/useDeepCompareEffect';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   description: {
@@ -62,6 +63,7 @@ export default function DeleteContentModal() {
   const pathname = path.split('content')[0] + 'content';
   const navigate = useNavigate();
   const rootPath = useRootPath();
+  const pageSafe = usePageSafe();
   const queryClient = useQueryClient();
   const { search } = useLocation();
   const [isLoading, setIsLoading] = useState(true);
@@ -142,7 +144,7 @@ export default function DeleteContentModal() {
       variant={ModalVariant.large}
       title='Remove repositories?'
       ouiaId='delete_custom_repositories'
-      ouiaSafe={!actionTakingPlace}
+      ouiaSafe={pageSafe}
       description={
         <>
           <Hide hide={templates.data.length <= 0}>
@@ -227,7 +229,9 @@ export default function DeleteContentModal() {
                                 ? 'Show less'
                                 : `and ${templatesWithRepos.length - maxTemplatesToShow} more`
                             }
-                            onToggle={() => setExpandState((prev) => ({ ...prev, [index]: !prev[index] }))}
+                            onToggle={() =>
+                              setExpandState((prev) => ({ ...prev, [index]: !prev[index] }))
+                            }
                             isExpanded={!!expandState[index]}
                           >
                             {templatesWithRepos

diff --git a/src/Pages/Repositories/ContentListTable/components/EditContentModal/EditContentModal.tsx b/src/Pages/Repositories/ContentListTable/components/EditContentModal/EditContentModal.tsx
@@ -26,6 +26,7 @@ import { isEqual } from 'lodash';
 import { mapToContentItemsToEditContentRequest } from './helpers';
 import { useContentListOutletContext } from '../../ContentListTable';
 import useRootPath from 'Hooks/useRootPath';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   description: {
@@ -44,6 +45,7 @@ const EditContentModal = () => {
   const rootPath = useRootPath();
   const queryClient = useQueryClient();
   const { search } = useLocation();
+  const pageSafe = usePageSafe();
   const [initialLoad, setInitialLoad] = useState(true);
   const [updatedValues, setUpdatedValues] = useState<EditContentRequest>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -93,7 +95,7 @@ const EditContentModal = () => {
       variant={ModalVariant.medium}
       title='Edit custom repository'
       ouiaId='edit_custom_repository'
-      ouiaSafe={!actionTakingPlace}
+      ouiaSafe={pageSafe}
       help={
         <Popover
           headerContent={<div>Edit custom repository</div>}

diff --git a/src/Pages/Repositories/ContentListTable/components/PackageModal/PackageModal.tsx b/src/Pages/Repositories/ContentListTable/components/PackageModal/PackageModal.tsx
@@ -25,6 +25,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import useRootPath from 'Hooks/useRootPath';
 import { useAppContext } from 'middleware/AppContext';
 import PackagesTable from 'components/SharedTables/PackagesTable';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   description: {
@@ -54,6 +55,7 @@ const perPageKey = 'packagePerPage';
 export default function PackageModal() {
   const { contentOrigin } = useAppContext();
   const classes = useStyles();
+  const pageSafe = usePageSafe();
   const { repoUUID: uuid } = useParams();
   const rootPath = useRootPath();
   const navigate = useNavigate();
@@ -109,7 +111,7 @@ export default function PackageModal() {
       hasNoBodyWrapper
       aria-label='RPM package modal'
       ouiaId='rpm_package_modal'
-      ouiaSafe={fetchingOrLoading}
+      ouiaSafe={pageSafe}
       variant={ModalVariant.medium}
       title='Packages'
       description={<p className={classes.description}>View list of packages</p>}

diff --git a/...es/Repositories/ContentListTable/components/SnapshotDetailsModal/SnapshotDetailsModal.tsx b/...es/Repositories/ContentListTable/components/SnapshotDetailsModal/SnapshotDetailsModal.tsx
@@ -19,6 +19,7 @@ import { createUseStyles } from 'react-jss';
 import { SnapshotSelector } from './SnapshotSelector';
 import { REPOSITORIES_ROUTE } from 'Routes/constants';
 import { SnapshotErrataTab } from './Tabs/SnapshotErrataTab';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   modalBody: {
@@ -39,6 +40,7 @@ export enum SnapshotDetailTab {
 export default function SnapshotDetailsModal() {
   const { contentOrigin } = useAppContext();
   const classes = useStyles();
+  const pageSafe = usePageSafe();
   const { repoUUID, snapshotUUID } = useParams();
   const [urlSearchParams, setUrlSearchParams] = useSearchParams();
   const rootPath = useRootPath();
@@ -71,7 +73,7 @@ export default function SnapshotDetailsModal() {
       hasNoBodyWrapper
       aria-label='snapshot details modal'
       ouiaId='snapshot_details_modal'
-      //   ouiaSafe={fetchingOrLoading}
+      ouiaSafe={pageSafe}
       variant={ModalVariant.large}
       title='Snapshot detail'
       isOpen

diff --git a/src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx b/src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.tsx
@@ -41,6 +41,7 @@ import RepoConfig from './components/RepoConfig';
 import { REPOSITORIES_ROUTE } from 'Routes/constants';
 import { SnapshotDetailTab } from '../SnapshotDetailsModal/SnapshotDetailsModal';
 import { formatDateDDMMMYYYY } from 'helpers';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   description: {
@@ -73,6 +74,7 @@ export default function SnapshotListModal() {
   const { repoUUID: uuid = '' } = useParams();
   const { contentOrigin } = useAppContext();
   const navigate = useNavigate();
+  const pageSafe = usePageSafe();
   const storedPerPage = Number(localStorage.getItem(perPageKey)) || 20;
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(storedPerPage);
@@ -154,7 +156,7 @@ export default function SnapshotListModal() {
       hasNoBodyWrapper
       aria-label='Snapshot list modal'
       ouiaId='snapshot_list_modal'
-      ouiaSafe={!fetchingOrLoading}
+      ouiaSafe={pageSafe}
       variant={ModalVariant.medium}
       title='Snapshots'
       description={

diff --git a/src/Pages/Repositories/PopularRepositoriesTable/PopularRepositoriesTable.tsx b/src/Pages/Repositories/PopularRepositoriesTable/PopularRepositoriesTable.tsx
@@ -65,6 +65,7 @@ import {
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import { DELETE_ROUTE, REPOSITORIES_ROUTE } from 'Routes/constants';
 import { useHref, useNavigate } from 'react-router-dom';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   chipsContainer: {
@@ -147,6 +148,7 @@ const PopularRepositoriesTable = () => {
   const [perPage, setPerPage] = useState(storedPerPage);
   const [isActionOpen, setIsActionOpen] = useState(false);
   const { isProd } = useChrome();
+  const pageSafe = usePageSafe();
   const isInProd = useMemo(() => isProd() === true, []);
 
   const onDropdownToggle = (_, isActionOpen: boolean) => {
@@ -372,7 +374,7 @@ const PopularRepositoriesTable = () => {
 
   return (
     <Grid
-      data-ouia-safe={!actionTakingPlace}
+      data-ouia-safe={pageSafe}
       data-ouia-component-id='popular_repositories_page'
       className={classes.mainContainer}
     >

diff --git a/src/Pages/Templates/TemplatesTable/TemplatesTable.tsx b/src/Pages/Templates/TemplatesTable/TemplatesTable.tsx
@@ -38,6 +38,7 @@ import Header from 'components/Header/Header';
 import useRootPath from 'Hooks/useRootPath';
 import { DETAILS_ROUTE, TEMPLATES_ROUTE } from 'Routes/constants';
 import useArchVersion from 'Hooks/useArchVersion';
+import usePageSafe from 'Hooks/usePageSafe';
 
 const useStyles = createUseStyles({
   mainContainer: {
@@ -76,6 +77,7 @@ const TemplatesTable = () => {
   const classes = useStyles();
   const rootPath = useRootPath();
   const navigate = useNavigate();
+  const pageSafe = usePageSafe();
   const { rbac } = useAppContext();
   const queryClient = useQueryClient();
   const storedPerPage = Number(localStorage.getItem(perPageKey)) || 20;
@@ -172,10 +174,7 @@ const TemplatesTable = () => {
 
   if (countIsZero && notFiltered && !isLoading)
     return (
-      <Bullseye
-        data-ouia-safe={!actionTakingPlace}
-        data-ouia-component-id='content_template_list_page'
-      >
+      <Bullseye data-ouia-safe={pageSafe} data-ouia-component-id='content_template_list_page'>
         <EmptyTableState
           notFiltered={notFiltered}
           clearFilters={clearFilters}
@@ -211,7 +210,7 @@ const TemplatesTable = () => {
         paragraph='View all content templates within your organization.'
       />
       <Grid
-        data-ouia-safe={!actionTakingPlace}
+        data-ouia-safe={pageSafe}
         data-ouia-component-id='content_template_list_page'
         className={countIsZero ? classes.mainContainer100Height : classes.mainContainer}
       >