From be0f77e2584441cac17cdb6a4040df38b1012742 Mon Sep 17 00:00:00 2001
From: Vladyslav Palyvoda <vladyslav_palyvoda@epam.com>
Date: Mon, 21 Aug 2023 12:34:41 +0300
Subject: [PATCH] fix: Fix going back to previous page on resource deletion
 success (#24)

Jira: EPMDEDP-12482
Resolves: #24
Change-Id: Ib28b58b50affda37c4b0587b180e417b61562428
---
 .../components/CDPipelineActions/index.tsx    | 11 ++++++-----
 .../components/CDPipelineActions/types.ts     |  1 +
 src/pages/edp-cdpipeline-details/view.tsx     |  2 +-
 .../components/CodebaseActions/index.tsx      |  8 +++-----
 .../components/CodebaseActions/types.ts       |  1 +
 src/pages/edp-component-details/view.tsx      |  2 +-
 .../components/StageActions/index.tsx         |  2 +-
 src/providers/ResourceActionList/context.ts   |  1 -
 src/providers/ResourceActionList/index.tsx    |  8 +-------
 src/providers/ResourceActionList/types.ts     |  4 +---
 src/widgets/CDPipelineActionsMenu/index.tsx   | 19 +++++--------------
 src/widgets/CDPipelineActionsMenu/types.ts    |  3 +++
 src/widgets/CodebaseActionsMenu/index.tsx     | 19 +++++--------------
 src/widgets/CodebaseActionsMenu/types.ts      |  3 +++
 src/widgets/DeleteKubeObject/index.tsx        | 13 +++++++++++++
 src/widgets/DeleteKubeObject/types.ts         |  3 ++-
 16 files changed, 47 insertions(+), 53 deletions(-)
 create mode 100644 src/widgets/CDPipelineActionsMenu/types.ts
 create mode 100644 src/widgets/CodebaseActionsMenu/types.ts

diff --git a/src/pages/edp-cdpipeline-details/components/CDPipelineActions/index.tsx b/src/pages/edp-cdpipeline-details/components/CDPipelineActions/index.tsx
index 344de875..7797f488 100644
--- 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
index ab8324fe..5072388a 100644
--- 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
index 951db751..1bc5c3d0 100644
--- 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
index 7596cf38..4a94f3df 100644
--- 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
index a325cca8..7e17f454 100644
--- 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
index 3a5b57e1..14da9591 100644
--- 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
index 5f171f21..516e8957 100644
--- 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
index 14d3e038..1a46bce3 100644
--- 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
index ba286c75..7ac15186 100644
--- 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
index f82ca92f..7824ab06 100644
--- 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
index c7b25f6e..2bd392a7 100644
--- 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
new file mode 100644
index 00000000..4434c72b
--- /dev/null
+++ 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
index 3805eea3..f0a62a56 100644
--- 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
new file mode 100644
index 00000000..2f9e444a
--- /dev/null
+++ 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
index 4876743d..7a218257 100644
--- 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,6 +38,7 @@ export const DeleteKubeObject = () => {
             kubeObject,
             onBeforeSubmit,
             description,
+            isDetailsPage,
         },
         closeDialog,
         openDialog,
@@ -43,6 +46,8 @@ export const DeleteKubeObject = () => {
         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
index b57c2fbb..af87ada1 100644
--- 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;
 }