Removes deprecated hook and replaces it with the current hook

Author: AlexSCorey

framework/PageDialogs/BulkActionDialog.tsx

@@ -19,7 +19,7 @@ import { usePaged } from '../PageTable/useTableItems';
 import { pfDanger, pfInfo, pfSuccess } from '../components/pfcolors';
 import { useAbortController } from '../hooks/useAbortController';
 import { useFrameworkTranslations } from '../useFrameworkTranslations';
-import { usePageDialog } from './PageDialog';
+import { usePageDialogs } from './PageDialog';
 
 export interface BulkActionDialogProps<T extends object> {
   /** The title of the model.
@@ -99,7 +99,7 @@ export function BulkActionDialog<T extends object>(props: BulkActionDialogProps<
   const [error, setError] = useState('');
   const [statuses, setStatuses] = useState<Record<string | number, string | null | undefined>>();
   const abortController = useAbortController();
-  const [_, setDialog] = usePageDialog();
+  const { popDialog } = usePageDialogs();
 
   const onCancelClicked = useCallback(() => {
     setCanceled(true);
@@ -118,9 +118,9 @@ export function BulkActionDialog<T extends object>(props: BulkActionDialogProps<
   }, [abortController, items, keyFn, t]);
 
   const onCloseClicked = useCallback(() => {
-    setDialog(undefined);
+    popDialog();
     onClose?.();
-  }, [onClose, setDialog]);
+  }, [onClose, popDialog]);
 
   useEffect(() => {
     async function process() {
@@ -260,7 +260,6 @@ export function BulkActionDialog<T extends object>(props: BulkActionDialogProps<
               },
             ]}
             keyFn={keyFn}
-            // pagination={pagination}
             compact
             errorStateTitle=""
             emptyStateTitle={t('No items')}
@@ -310,24 +309,24 @@ export function BulkActionDialog<T extends object>(props: BulkActionDialogProps<
 export function useBulkActionDialog<T extends object>(
   defaultErrorAdapter: ErrorAdapter = genericErrorAdapter
 ) {
-  const [_, setDialog] = usePageDialog();
+  const { pushDialog, popDialog } = usePageDialogs();
   const [props, setProps] = useState<BulkActionDialogProps<T>>();
   useEffect(() => {
     if (props) {
       const onCloseHandler = () => {
         setProps(undefined);
         props.onClose?.();
       };
-      setDialog(
+      pushDialog(
         <BulkActionDialog<T>
           {...props}
           errorAdapter={props.errorAdapter ?? defaultErrorAdapter}
           onClose={onCloseHandler}
         />
       );
     } else {
-      setDialog(undefined);
+      popDialog();
     }
-  }, [props, setDialog, defaultErrorAdapter]);
+  }, [props, popDialog, pushDialog, defaultErrorAdapter]);
   return setProps;
 }

framework/PageDialogs/BulkConfirmationDialog.tsx

@@ -19,7 +19,7 @@ import { usePaged } from '../PageTable/useTableItems';
 import { useFrameworkTranslations } from '../useFrameworkTranslations';
 import { compareStrings } from '../utils/compare';
 import { BulkActionDialogProps, useBulkActionDialog } from './BulkActionDialog';
-import { usePageDialog } from './PageDialog';
+import { usePageDialogs } from './PageDialog';
 
 const ModalBodyDiv = styled.div`
   display: flex;
@@ -95,12 +95,12 @@ function BulkConfirmationDialog<T extends object>(props: BulkConfirmationDialog<
     actionButtonText,
     isDanger,
   } = props;
-  const [_, setDialog] = usePageDialog();
+  const { popDialog } = usePageDialogs();
   const [translations] = useFrameworkTranslations();
   const onCloseClicked = useCallback(() => {
-    setDialog(undefined);
+    popDialog();
     onClose?.();
-  }, [onClose, setDialog]);
+  }, [onClose, popDialog]);
 
   // Non-actionable rows appear first
   const sortedItems = useMemo<T[]>(() => {
@@ -198,7 +198,6 @@ function BulkConfirmationDialog<T extends object>(props: BulkConfirmationDialog<
               itemCount={items.length}
               tableColumns={modalColumns}
               keyFn={keyFn}
-              // pagination={pagination}
               compact
               errorStateTitle="Error"
               emptyStateTitle="No items"
@@ -225,19 +224,19 @@ function BulkConfirmationDialog<T extends object>(props: BulkConfirmationDialog<
 }
 
 function useBulkConfirmationDialog<T extends object>() {
-  const [_, setDialog] = usePageDialog();
+  const { popDialog, pushDialog } = usePageDialogs();
   const [props, setProps] = useState<BulkConfirmationDialog<T>>();
   useEffect(() => {
     if (props) {
       const onCloseHandler = () => {
         setProps(undefined);
         props.onClose?.();
       };
-      setDialog(<BulkConfirmationDialog<T> {...props} onClose={onCloseHandler} />);
+      pushDialog(<BulkConfirmationDialog<T> {...props} onClose={onCloseHandler} />);
     } else {
-      setDialog(undefined);
+      popDialog();
     }
-  }, [props, setDialog]);
+  }, [props, popDialog, pushDialog]);
   return setProps;
 }
 

framework/PageDialogs/MultiSelectDialog.tsx

@@ -5,7 +5,7 @@ import { ISelected } from '../PageTable/useTableItems';
 import { IToolbarFilter } from '../PageToolbar/PageToolbarFilter';
 import { useFrameworkTranslations } from '../useFrameworkTranslations';
 import { IView } from '../useView';
-import { usePageDialog } from './PageDialog';
+import { usePageDialogs } from './PageDialog';
 import { PageMultiSelectList } from '../PageTable/PageMultiSelectList';
 
 export type MultiSelectDialogProps<T extends object> = {
@@ -40,8 +40,8 @@ export function MultiSelectDialog<T extends object>(props: MultiSelectDialogProp
     maxSelections,
     allowZeroSelections,
   } = props;
-  const [_, setDialog] = usePageDialog();
-  let onClose = useCallback(() => setDialog(undefined), [setDialog]);
+  const { popDialog } = usePageDialogs();
+  let onClose = useCallback(() => popDialog(), [popDialog]);
   if (props.onClose) {
     onClose = props.onClose;
   }

framework/PageDialogs/PageDialog.tsx

@@ -34,26 +34,26 @@ export function usePageDialogs() {
   return useContext(PageDialogContext);
 }
 
-/*
- * @deprecated Use usePageDialogs instead
- */
-export function usePageDialog(): [
-  dialog: ReactNode | undefined,
-  setDialog: (dialog: ReactNode | undefined) => void,
-] {
-  const { dialogs, clearDialogs, pushDialog } = usePageDialogs();
-  const dialog = useMemo(
-    () => (dialogs.length > 0 ? dialogs[dialogs.length - 1] : undefined),
-    [dialogs]
-  );
-  const setDialog = useCallback(
-    (dialog: ReactNode | undefined) => {
-      clearDialogs();
-      if (dialog !== undefined) {
-        pushDialog(dialog);
-      }
-    },
-    [clearDialogs, pushDialog]
-  );
-  return useMemo(() => [dialog, setDialog] as const, [dialog, setDialog]);
-}
+// /*
+//  * @deprecated Use usePageDialogs instead
+//  */
+// export function usePageDialog(): [
+//   dialog: ReactNode | undefined,
+//   setDialog: (dialog: ReactNode | undefined) => void,
+// ] {
+//   const { dialogs, clearDialogs, pushDialog } = usePageDialogs();
+//   const dialog = useMemo(
+//     () => (dialogs.length > 0 ? dialogs[dialogs.length - 1] : undefined),
+//     [dialogs]
+//   );
+//   const setDialog = useCallback(
+//     (dialog: ReactNode | undefined) => {
+//       clearDialogs();
+//       if (dialog !== undefined) {
+//         pushDialog(dialog);
+//       }
+//     },
+//     [clearDialogs, pushDialog]
+//   );
+//   return useMemo(() => [dialog, setDialog] as const, [dialog, setDialog]);
+// }

framework/PageDialogs/SingleSelectDialog.tsx

@@ -6,8 +6,7 @@ import { ISelected } from '../PageTable/useTableItems';
 import { IToolbarFilter } from '../PageToolbar/PageToolbarFilter';
 import { useFrameworkTranslations } from '../useFrameworkTranslations';
 import { IView } from '../useView';
-import { usePageDialog } from './PageDialog';
-
+import { usePageDialogs } from './PageDialog';
 export type SingleSelectDialogProps<T extends object> = {
   title: string;
   view: IView & ISelected<T> & { itemCount?: number; pageItems: T[] | undefined };
@@ -23,8 +22,8 @@ export type SingleSelectDialogProps<T extends object> = {
 
 export function SingleSelectDialog<T extends object>(props: SingleSelectDialogProps<T>) {
   const { title, view, tableColumns, toolbarFilters, confirmText, cancelText, onSelect } = props;
-  const [_, setDialog] = usePageDialog();
-  let onClose = useCallback(() => setDialog(undefined), [setDialog]);
+  const { popDialog } = usePageDialogs();
+  let onClose = useCallback(() => popDialog(), [popDialog]);
   if (props.onClose) {
     onClose = props.onClose;
   }

framework/PageDialogs/useSelectDialog.tsx

@@ -17,7 +17,7 @@ import { ISelected } from '../PageTable/useTableItems';
 import { IToolbarFilter } from '../PageToolbar/PageToolbarFilter';
 import { Collapse } from '../components/Collapse';
 import { IView } from '../useView';
-import { usePageDialog } from './PageDialog';
+import { usePageDialogs } from './PageDialog';
 
 /**
  * @deprecated use SingleSelectDialog
@@ -47,10 +47,10 @@ export function useSelectDialog<
     setTitle(title ?? '');
     setOnSelect(() => onSelect);
   }, []);
-  const [_, setDialog] = usePageDialog();
+  const { pushDialog, popDialog } = usePageDialogs();
   useEffect(() => {
     if (onSelect !== undefined) {
-      setDialog(
+      pushDialog(
         <SelectDialog<T, TMultiple>
           title={title}
           open
@@ -67,15 +67,16 @@ export function useSelectDialog<
         />
       );
     } else {
-      setDialog(undefined);
+      popDialog();
       view.unselectAll();
     }
   }, [
     cancel,
     confirm,
     onSelect,
     selected,
-    setDialog,
+    popDialog,
+    pushDialog,
     tableColumns,
     title,
     toolbarFilters,

framework/components/useManagedItems.tsx

@@ -1,9 +1,9 @@
 import { Button, Divider, Modal, ModalBoxBody, ModalVariant } from '@patternfly/react-core';
 import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { usePageDialog } from '../PageDialogs/PageDialog';
 import { useSelected } from '../PageTable/useTableItems';
 import { ReorderItems } from './ReorderItems';
+import { usePageDialogs } from '../PageDialogs/PageDialog';
 
 interface IManageItemColumn<ItemT extends object> {
   header: string;
@@ -61,7 +61,7 @@ export interface ManageItemsProps<ItemT extends object> {
  * - Display type
  */
 export function useManageItems<ItemT extends object>(options: ManageItemsProps<ItemT>) {
-  const [_, setDialog] = usePageDialog();
+  const { pushDialog } = usePageDialogs();
   const [keyFn] = useState(() => options.keyFn);
   const [saveFn] = useState(() => options.saveFn);
   const [loadFn] = useState(() => options.loadFn);
@@ -137,7 +137,7 @@ export function useManageItems<ItemT extends object>(options: ManageItemsProps<I
   );
 
   const openManageItems = () =>
-    setDialog(
+    pushDialog(
       <ManageItemsModal
         {...options}
         keyFn={keyFn}
@@ -159,8 +159,8 @@ export function ManageItemsModal<ItemT extends object>(
   const { t } = useTranslation();
   const { title, description, columns, onApplyChanges } = props;
   const [keyFn] = useState(() => props.keyFn);
-  const [_, setDialog] = usePageDialog();
-  const onClose = () => setDialog(undefined);
+  const { popDialog } = usePageDialogs();
+  const onClose = () => popDialog();
   const [items, setItems] = useState<ItemT[]>(() => props.items);
   const {
     selectedItems,
@@ -174,7 +174,7 @@ export function ManageItemsModal<ItemT extends object>(
 
   const onApply = () => {
     onApplyChanges(items, selectedItems);
-    setDialog(undefined);
+    popDialog();
   };
 
   return (

frontend/awx/access/common/DeleteRoleConfirmation.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal, ModalVariant } from '@patternfly/react-core';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { usePageDialog } from '../../../../framework';
+import { usePageDialogs } from '../../../../framework';
 import { AccessRole, AwxUser } from '../../interfaces/User';
 
 export interface DeleteRoleConfirmationProps {
@@ -20,13 +20,13 @@ export interface DeleteRoleConfirmationProps {
 
 export function DeleteRoleConfirmation(props: DeleteRoleConfirmationProps) {
   const { title, role, user, onConfirm, onClose } = props;
-  const [_, setDialog] = usePageDialog();
+  const { popDialog } = usePageDialogs();
   const { t } = useTranslation();
   const sourceOfRole = () => (typeof role.team_id !== 'undefined' ? t(`team`) : t(`user`));
   const onCloseClicked = useCallback(() => {
-    setDialog(undefined);
+    popDialog();
     onClose?.();
-  }, [onClose, setDialog]);
+  }, [onClose, popDialog]);
 
   return (
     <Modal
@@ -100,18 +100,18 @@ export function DeleteRoleConfirmation(props: DeleteRoleConfirmationProps) {
  * openDeleteRoleConfirmationDialog(...) // Pass DeleteRoleConfirmationProps
  */
 export function useDeleteRoleConfirmationDialog() {
-  const [_, setDialog] = usePageDialog();
+  const { popDialog, pushDialog } = usePageDialogs();
   const [props, setProps] = useState<DeleteRoleConfirmationProps>();
   useEffect(() => {
     if (props) {
       const onCloseHandler = () => {
         setProps(undefined);
         props.onClose?.();
       };
-      setDialog(<DeleteRoleConfirmation {...props} onClose={onCloseHandler} />);
+      pushDialog(<DeleteRoleConfirmation {...props} onClose={onCloseHandler} />);
     } else {
-      setDialog(undefined);
+      popDialog();
     }
-  }, [props, setDialog]);
+  }, [props, pushDialog, popDialog]);
   return setProps;
 }

frontend/awx/access/credentials/hooks/useSelectCredential.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IToolbarFilter, usePageDialog, useSelectDialog } from '../../../../../framework';
+import { IToolbarFilter, usePageDialogs, useSelectDialog } from '../../../../../framework';
 import { SingleSelectDialog } from '../../../../../framework/PageDialogs/SingleSelectDialog';
 import { awxAPI } from '../../../common/api/awx-utils';
 import {
@@ -83,11 +83,11 @@ export function useSingleSelectCredential(
   title?: string,
   sourceType?: string
 ) {
-  const [_, setDialog] = usePageDialog();
+  const { pushDialog } = usePageDialogs();
   const { t } = useTranslation();
   const openSelectCredential = useCallback(
     (onSelect: (credential: Credential) => void) => {
-      setDialog(
+      pushDialog(
         <SelectCredential
           title={title ? title : t('Select credential')}
           onSelect={onSelect}
@@ -96,7 +96,7 @@ export function useSingleSelectCredential(
         />
       );
     },
-    [credentialType, setDialog, t, title, sourceType]
+    [credentialType, pushDialog, t, title, sourceType]
   );
   return openSelectCredential;
 }