fix: Fix going back to previous page on resource deletion success (#24)

Jira: EPMDEDP-12482 Resolves: #24 Change-Id: Ib28b58b50affda37c4b0587b180e417b61562428
epam · Aug 21, 2023 · be0f77e · be0f77e
1 parent 346dc29
commit be0f77e
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 53 deletions.
diff --git a/src/pages/edp-cdpipeline-details/components/CDPipelineActions/index.tsx b/src/pages/edp-cdpipeline-details/components/CDPipelineActions/index.tsx
@@ -7,7 +7,10 @@ import { useResourceActionListContext } from '../../../../providers/ResourceActi
 import { CDPipelineActionsMenu } from '../../../../widgets/CDPipelineActionsMenu';
 import { CDPipelineActionsProps } from './types';
 
-export const CDPipelineActions = ({ CDPipeline }: CDPipelineActionsProps) => {
+export const CDPipelineActions = ({
+    CDPipeline,
+    isDetailsPage = false,
+}: CDPipelineActionsProps) => {
     const { handleOpenResourceActionListMenu } =
         useResourceActionListContext<EDPCDPipelineKubeObjectInterface>();
     const buttonRef = React.createRef<HTMLButtonElement>();
@@ -18,14 +21,12 @@ export const CDPipelineActions = ({ CDPipeline }: CDPipelineActionsProps) => {
                 <IconButton
                     aria-label={'Actions'}
                     ref={buttonRef}
-                    onClick={() =>
-                        handleOpenResourceActionListMenu(buttonRef.current, CDPipeline, true)
-                    }
+                    onClick={() => handleOpenResourceActionListMenu(buttonRef.current, CDPipeline)}
                 >
                     <Icon icon={ICONS.THREE_DOTS} color={'grey'} width="20" />
                 </IconButton>
             </Tooltip>
-            <CDPipelineActionsMenu />
+            <CDPipelineActionsMenu isDetailsPage={isDetailsPage} />
         </>
     );
 };
diff --git a/src/pages/edp-cdpipeline-details/components/CDPipelineActions/types.ts b/src/pages/edp-cdpipeline-details/components/CDPipelineActions/types.ts
@@ -2,4 +2,5 @@ import { EDPCDPipelineKubeObjectInterface } from '../../../../k8s/EDPCDPipeline/
 
 export interface CDPipelineActionsProps {
     CDPipeline: EDPCDPipelineKubeObjectInterface;
+    isDetailsPage?: boolean;
 }
diff --git a/src/pages/edp-cdpipeline-details/view.tsx b/src/pages/edp-cdpipeline-details/view.tsx
@@ -73,7 +73,7 @@ export const PageView = () => {
                                 <CDPipelineMetadataTable CDPipelineData={CDPipeline} />
                             </Grid>
                             <Grid item>
-                                <CDPipelineActions CDPipeline={CDPipeline} />
+                                <CDPipelineActions CDPipeline={CDPipeline} isDetailsPage />
                             </Grid>
                         </>
                     </Render>

diff --git a/src/pages/edp-component-details/components/CodebaseActions/index.tsx b/src/pages/edp-component-details/components/CodebaseActions/index.tsx
@@ -7,7 +7,7 @@ import { useResourceActionListContext } from '../../../../providers/ResourceActi
 import { CodebaseActionsMenu } from '../../../../widgets/CodebaseActionsMenu';
 import { CodebaseActionsProps } from './types';
 
-export const CodebaseActions = ({ codebase }: CodebaseActionsProps) => {
+export const CodebaseActions = ({ codebase, isDetailsPage = false }: CodebaseActionsProps) => {
     const { handleOpenResourceActionListMenu } =
         useResourceActionListContext<EDPCodebaseKubeObjectInterface>();
     const buttonRef = React.createRef<HTMLButtonElement>();
@@ -18,14 +18,12 @@ export const CodebaseActions = ({ codebase }: CodebaseActionsProps) => {
                 <IconButton
                     aria-label={'Actions'}
                     ref={buttonRef}
-                    onClick={() =>
-                        handleOpenResourceActionListMenu(buttonRef.current, codebase, true)
-                    }
+                    onClick={() => handleOpenResourceActionListMenu(buttonRef.current, codebase)}
                 >
                     <Icon icon={ICONS.THREE_DOTS} color={'grey'} width="20" />
                 </IconButton>
             </Tooltip>
-            <CodebaseActionsMenu />
+            <CodebaseActionsMenu isDetailsPage={isDetailsPage} />
         </>
     );
 };
diff --git a/src/pages/edp-component-details/components/CodebaseActions/types.ts b/src/pages/edp-component-details/components/CodebaseActions/types.ts
@@ -2,4 +2,5 @@ import { EDPCodebaseKubeObjectInterface } from '../../../../k8s/EDPCodebase/type
 
 export interface CodebaseActionsProps {
     codebase: EDPCodebaseKubeObjectInterface;
+    isDetailsPage?: boolean;
 }
diff --git a/src/pages/edp-component-details/view.tsx b/src/pages/edp-component-details/view.tsx
@@ -89,7 +89,7 @@ export const PageView = () => {
                             </Grid>
                             <Grid item>
                                 <ResourceActionListContextProvider>
-                                    <CodebaseActions codebase={component} />
+                                    <CodebaseActions codebase={component} isDetailsPage />
                                 </ResourceActionListContextProvider>
                             </Grid>
                         </Grid>

diff --git a/src/pages/edp-stage-details/components/StageActions/index.tsx b/src/pages/edp-stage-details/components/StageActions/index.tsx
@@ -24,7 +24,7 @@ export const StageActions = ({ stage }: StageActionsProps) => {
                 <IconButton
                     aria-label={'Actions'}
                     ref={buttonRef}
-                    onClick={() => handleOpenResourceActionListMenu(buttonRef.current, stage, true)}
+                    onClick={() => handleOpenResourceActionListMenu(buttonRef.current, stage)}
                 >
                     <Icon icon={ICONS.THREE_DOTS} color={'grey'} width="20" />
                 </IconButton>

diff --git a/src/providers/ResourceActionList/context.ts b/src/providers/ResourceActionList/context.ts
@@ -6,7 +6,6 @@ export const ResourceActionListContext = React.createContext<
 >({
     anchorEl: null,
     data: null,
-    isDetailsPage: false,
     handleOpenResourceActionListMenu: () => {},
     handleCloseResourceActionListMenu: () => {},
 });
diff --git a/src/providers/ResourceActionList/index.tsx b/src/providers/ResourceActionList/index.tsx
@@ -5,17 +5,12 @@ import { ResourceActionListContextProviderValue } from './types';
 export const ResourceActionListContextProvider: React.FC = ({ children }) => {
     const [data, setData] = React.useState<unknown>(null);
     const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-    const [isDetailsPage, setIsDetailsPage] = React.useState<boolean>(false);
 
     const handleOpenResourceActionListMenu: ResourceActionListContextProviderValue['handleOpenResourceActionListMenu'] =
         React.useCallback(
-            (anchorEl, kubeObject, isDetailsPage) => {
+            (anchorEl, kubeObject) => {
                 setAnchorEl(anchorEl);
                 setData(kubeObject);
-
-                if (isDetailsPage) {
-                    setIsDetailsPage(true);
-                }
             },
             [setAnchorEl]
         );
@@ -29,7 +24,6 @@ export const ResourceActionListContextProvider: React.FC = ({ children }) => {
             value={{
                 anchorEl,
                 data,
-                isDetailsPage,
                 handleCloseResourceActionListMenu,
                 handleOpenResourceActionListMenu,
             }}

diff --git a/src/providers/ResourceActionList/types.ts b/src/providers/ResourceActionList/types.ts
@@ -1,11 +1,9 @@
 export interface ResourceActionListContextProviderValue<DataType = unknown> {
     anchorEl: HTMLElement | null;
     data: DataType;
-    isDetailsPage?: boolean;
     handleOpenResourceActionListMenu: (
         anchorEl: ResourceActionListContextProviderValue['anchorEl'],
-        data: ResourceActionListContextProviderValue['data'],
-        isDetailsPage?: ResourceActionListContextProviderValue['isDetailsPage']
+        data: ResourceActionListContextProviderValue['data']
     ) => void;
     handleCloseResourceActionListMenu: () => void;
 }
diff --git a/src/widgets/CDPipelineActionsMenu/index.tsx b/src/widgets/CDPipelineActionsMenu/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
 import { KubeObjectActions } from '../../components/KubeObjectActions';
 import { RESOURCE_ACTIONS } from '../../constants/resourceActions';
 import { ICONS } from '../../icons/iconify-icons-mapping';
@@ -14,22 +13,14 @@ import { CREATE_EDIT_CD_PIPELINE_DIALOG_NAME } from '../CreateEditCDPipeline/con
 import { CreateEditCDPipelineDialogForwardedProps } from '../CreateEditCDPipeline/types';
 import { DELETE_KUBE_OBJECT_DIALOG_NAME } from '../DeleteKubeObject/constants';
 import { DeleteKubeObjectDialogForwardedProps } from '../DeleteKubeObject/types';
+import { CDPipelineActionsMenuProps } from './types';
 
-export const CDPipelineActionsMenu = () => {
-    const history = useHistory();
+export const CDPipelineActionsMenu = ({ isDetailsPage }: CDPipelineActionsMenuProps) => {
     const { setDialog } = useDialogContext();
 
-    const { data, anchorEl, isDetailsPage, handleCloseResourceActionListMenu } =
+    const { data, anchorEl, handleCloseResourceActionListMenu } =
         useResourceActionListContext<EDPCDPipelineKubeObjectInterface>();
 
-    const onSuccess = React.useCallback(() => {
-        if (!isDetailsPage) {
-            return;
-        }
-
-        history.goBack();
-    }, [history, isDetailsPage]);
-
     const actions: KubeObjectAction[] = React.useMemo(() => {
         const createEditCDPipelineDialogForwardedProps: CreateEditCDPipelineDialogForwardedProps = {
             CDPipelineData: data,
@@ -41,7 +32,7 @@ export const CDPipelineActionsMenu = () => {
             kubeObject: EDPCDPipelineKubeObject,
             kubeObjectData: data,
             description: `Confirm the deletion of the CD Pipeline with all its components`,
-            onSuccess,
+            isDetailsPage,
         };
 
         return [
@@ -68,7 +59,7 @@ export const CDPipelineActionsMenu = () => {
                 },
             }),
         ];
-    }, [data, onSuccess, handleCloseResourceActionListMenu, setDialog]);
+    }, [data, isDetailsPage, handleCloseResourceActionListMenu, setDialog]);
 
     return (
         <KubeObjectActions

diff --git a/src/widgets/CDPipelineActionsMenu/types.ts b/src/widgets/CDPipelineActionsMenu/types.ts
@@ -0,0 +1,3 @@
+export interface CDPipelineActionsMenuProps {
+    isDetailsPage?: boolean;
+}
diff --git a/src/widgets/CodebaseActionsMenu/index.tsx b/src/widgets/CodebaseActionsMenu/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
 import { KubeObjectActions } from '../../components/KubeObjectActions';
 import { RESOURCE_ACTIONS } from '../../constants/resourceActions';
 import { ICONS } from '../../icons/iconify-icons-mapping';
@@ -16,12 +15,12 @@ import { DELETE_KUBE_OBJECT_DIALOG_NAME } from '../DeleteKubeObject/constants';
 import { DeleteKubeObjectDialogForwardedProps } from '../DeleteKubeObject/types';
 import { CodebaseCDPipelineConflictError } from './components/CodebaseCDPipelineConflictError';
 import { useConflictedCDPipeline } from './hooks/useConflictedCDPipeline';
+import { CodebaseActionsMenuProps } from './types';
 
-export const CodebaseActionsMenu = () => {
-    const history = useHistory();
+export const CodebaseActionsMenu = ({ isDetailsPage }: CodebaseActionsMenuProps) => {
     const { setDialog } = useDialogContext();
 
-    const { data, anchorEl, isDetailsPage, handleCloseResourceActionListMenu } =
+    const { data, anchorEl, handleCloseResourceActionListMenu } =
         useResourceActionListContext<EDPCodebaseKubeObjectInterface>();
 
     const conflictedCDPipeline = useConflictedCDPipeline(data);
@@ -45,14 +44,6 @@ export const CodebaseActionsMenu = () => {
         [conflictedCDPipeline, data]
     );
 
-    const onSuccess = React.useCallback(() => {
-        if (!isDetailsPage) {
-            return;
-        }
-
-        history.goBack();
-    }, [history, isDetailsPage]);
-
     const actions: KubeObjectAction[] = React.useMemo(() => {
         const createEditCodebaseDialogForwardedProps: CreateEditCodebaseDialogForwardedProps = {
             codebaseData: data,
@@ -65,7 +56,7 @@ export const CodebaseActionsMenu = () => {
             kubeObjectData: data,
             description: `Confirm the deletion of the codebase with all its components`,
             onBeforeSubmit,
-            onSuccess,
+            isDetailsPage,
         };
 
         return [
@@ -92,7 +83,7 @@ export const CodebaseActionsMenu = () => {
                 },
             }),
         ];
-    }, [data, handleCloseResourceActionListMenu, onBeforeSubmit, onSuccess, setDialog]);
+    }, [data, handleCloseResourceActionListMenu, isDetailsPage, onBeforeSubmit, setDialog]);
 
     return (
         <KubeObjectActions

diff --git a/src/widgets/CodebaseActionsMenu/types.ts b/src/widgets/CodebaseActionsMenu/types.ts
@@ -0,0 +1,3 @@
+export interface CodebaseActionsMenuProps {
+    isDetailsPage?: boolean;
+}
diff --git a/src/widgets/DeleteKubeObject/index.tsx b/src/widgets/DeleteKubeObject/index.tsx
@@ -11,6 +11,7 @@ import {
 } from '@material-ui/core';
 import React from 'react';
 import { useForm } from 'react-hook-form';
+import { useHistory } from 'react-router-dom';
 import { Render } from '../../components/Render';
 import { useSpecificDialogContext } from '../../providers/Dialog/hooks';
 import { DELETE_KUBE_OBJECT_DIALOG_NAME } from './constants';
@@ -27,6 +28,7 @@ const getDialogTitle = (errorTemplate: React.ReactNode, objectName: string): str
         : `Cannot start deleting "${objectName}"`;
 
 export const DeleteKubeObject = () => {
+    const history = useHistory();
     const {
         open,
         forwardedProps: {
@@ -36,13 +38,16 @@ export const DeleteKubeObject = () => {
             kubeObject,
             onBeforeSubmit,
             description,
+            isDetailsPage,
         },
         closeDialog,
         openDialog,
     } = useSpecificDialogContext<DeleteKubeObjectDialogForwardedProps>(
         DELETE_KUBE_OBJECT_DIALOG_NAME
     );
 
+    console.log(isDetailsPage);
+
     const [errorTemplate, setErrorTemplate] = React.useState<React.ReactNode | string>(null);
     const [loadingActive, setLoadingActive] = React.useState<boolean>(false);
     const { register, handleSubmit, watch, reset } = useForm();
@@ -74,6 +79,12 @@ export const DeleteKubeObject = () => {
                 kubeObjectData,
             });
             reset();
+
+            console.log(isDetailsPage);
+
+            if (isDetailsPage) {
+                history.goBack();
+            }
         },
         [
             errorTemplate,
@@ -83,6 +94,8 @@ export const DeleteKubeObject = () => {
             kubeObject,
             kubeObjectData,
             reset,
+            isDetailsPage,
+            history,
         ]
     );
 

diff --git a/src/widgets/DeleteKubeObject/types.ts b/src/widgets/DeleteKubeObject/types.ts
@@ -3,7 +3,6 @@ import React from 'react';
 import { EDPKubeObjectInterface } from '../../types/k8s';
 
 export interface DeleteKubeObjectDialogForwardedProps {
-    onSuccess?: () => void;
     description: string;
     objectName: string;
     kubeObject: KubeObject;
@@ -12,4 +11,6 @@ export interface DeleteKubeObjectDialogForwardedProps {
         setErrorTemplate: React.Dispatch<React.SetStateAction<React.ReactNode>>,
         setLoadingActive: React.Dispatch<React.SetStateAction<boolean>>
     ): Promise<void>;
+    isDetailsPage?: boolean;
+    onSuccess?: () => void;
 }