From a98a69563484b991e5eefcd8ae2cbb7a0a252e6d Mon Sep 17 00:00:00 2001
From: Shivanand Sonnad <shivanand.sonnad@harness.io>
Date: Mon, 14 Oct 2024 07:59:08 +0000
Subject: [PATCH] fix: [AH-483]: delete and Setup Client Popup is not going
 even after the user clicks on delete/Set Up Client button (#2802)

*



fix: [AH-483]: delete and Setup Client Popup is not going even after the user clicks on delete/Set Up Client button
---
 .../ActionButton/ActionButton.module.scss     | 19 ++++++++
 .../ActionButton.module.scss.d.ts             | 19 ++++++++
 .../ActionButton/ActionButton.tsx}            | 19 ++++----
 .../components/Actions/DeleteRepository.tsx   |  3 +-
 .../components/Actions/RepositoryActions.tsx  | 19 +++++---
 .../components/Actions/SetupClient.tsx        |  5 ++-
 .../components/Actions/types.ts               |  1 +
 .../useSetupClientModal.tsx                   | 44 +++++++++++++------
 8 files changed, 98 insertions(+), 31 deletions(-)
 create mode 100644 web/src/ar/components/ActionButton/ActionButton.module.scss
 create mode 100644 web/src/ar/components/ActionButton/ActionButton.module.scss.d.ts
 rename web/src/ar/{pages/repository-details/components/Actions/RepositoryActionsWrapper.tsx => components/ActionButton/ActionButton.tsx} (74%)

diff --git a/web/src/ar/components/ActionButton/ActionButton.module.scss b/web/src/ar/components/ActionButton/ActionButton.module.scss
new file mode 100644
index 000000000..8f3fe057c
--- /dev/null
+++ b/web/src/ar/components/ActionButton/ActionButton.module.scss
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2024 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.optionsMenu {
+  min-width: unset;
+}
diff --git a/web/src/ar/components/ActionButton/ActionButton.module.scss.d.ts b/web/src/ar/components/ActionButton/ActionButton.module.scss.d.ts
new file mode 100644
index 000000000..851246897
--- /dev/null
+++ b/web/src/ar/components/ActionButton/ActionButton.module.scss.d.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2023 Harness, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+// This is an auto-generated file
+export declare const optionsMenu: string
diff --git a/web/src/ar/pages/repository-details/components/Actions/RepositoryActionsWrapper.tsx b/web/src/ar/components/ActionButton/ActionButton.tsx
similarity index 74%
rename from web/src/ar/pages/repository-details/components/Actions/RepositoryActionsWrapper.tsx
rename to web/src/ar/components/ActionButton/ActionButton.tsx
index 2433baac4..abd112c37 100644
--- a/web/src/ar/pages/repository-details/components/Actions/RepositoryActionsWrapper.tsx
+++ b/web/src/ar/components/ActionButton/ActionButton.tsx
@@ -14,15 +14,18 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren, useState } from 'react'
+import React, { PropsWithChildren } from 'react'
 import { Button, ButtonVariation } from '@harnessio/uicore'
 import { Menu, Position } from '@blueprintjs/core'
 
-import type { RepositoryActionsProps } from './types'
-import css from './Actions.module.scss'
+import css from './ActionButton.module.scss'
 
-export default function RepositoryActionsWrapper({ children }: PropsWithChildren<RepositoryActionsProps>): JSX.Element {
-  const [menuOpen, setMenuOpen] = useState(false)
+interface ActionButtonProps {
+  isOpen: boolean
+  setOpen: (val: boolean) => void
+}
+
+export default function ActionButton({ children, isOpen, setOpen }: PropsWithChildren<ActionButtonProps>): JSX.Element {
   return (
     <Button
       variation={ButtonVariation.ICON}
@@ -39,14 +42,14 @@ export default function RepositoryActionsWrapper({ children }: PropsWithChildren
       tooltipProps={{
         interactionKind: 'click',
         onInteraction: nextOpenState => {
-          setMenuOpen(nextOpenState)
+          setOpen(nextOpenState)
         },
-        isOpen: menuOpen,
+        isOpen: isOpen,
         position: Position.BOTTOM
       }}
       onClick={e => {
         e.stopPropagation()
-        setMenuOpen(true)
+        setOpen(true)
       }}
     />
   )
diff --git a/web/src/ar/pages/repository-details/components/Actions/DeleteRepository.tsx b/web/src/ar/pages/repository-details/components/Actions/DeleteRepository.tsx
index 0c0343e85..8efdaec0e 100644
--- a/web/src/ar/pages/repository-details/components/Actions/DeleteRepository.tsx
+++ b/web/src/ar/pages/repository-details/components/Actions/DeleteRepository.tsx
@@ -26,7 +26,7 @@ import { queryClient } from '@ar/utils/queryClient'
 import useDeleteRepositoryModal from '@ar/pages/repository-details/hooks/useDeleteRepositoryModal/useDeleteRepositoryModal'
 import type { RepositoryActionsProps } from './types'
 
-export default function DeleteRepositoryMenuItem({ data }: RepositoryActionsProps): JSX.Element {
+export default function DeleteRepositoryMenuItem({ data, onClose }: RepositoryActionsProps): JSX.Element {
   const { getString } = useStrings()
   const { RbacMenuItem } = useParentComponents()
   const history = useHistory()
@@ -34,6 +34,7 @@ export default function DeleteRepositoryMenuItem({ data }: RepositoryActionsProp
 
   const handleAfterDeleteRepository = (): void => {
     queryClient.invalidateQueries(['GetAllRegistries'])
+    onClose?.()
     history.push(routes.toARRepositories())
   }
 
diff --git a/web/src/ar/pages/repository-details/components/Actions/RepositoryActions.tsx b/web/src/ar/pages/repository-details/components/Actions/RepositoryActions.tsx
index 998258d62..b5e26ae15 100644
--- a/web/src/ar/pages/repository-details/components/Actions/RepositoryActions.tsx
+++ b/web/src/ar/pages/repository-details/components/Actions/RepositoryActions.tsx
@@ -14,18 +14,23 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React, { useState } from 'react'
+
 import { PageType } from '@ar/common/types'
-import RepositoryActionsWrapper from './RepositoryActionsWrapper'
-import DeleteRepositoryMenuItem from './DeleteRepository'
+import ActionButton from '@ar/components/ActionButton/ActionButton'
+
 import SetupClientMenuItem from './SetupClient'
 import type { RepositoryActionsProps } from './types'
+import DeleteRepositoryMenuItem from './DeleteRepository'
 
 export default function RepositoryActions({ data, readonly, pageType }: RepositoryActionsProps): JSX.Element {
+  const [open, setOpen] = useState(false)
   return (
-    <RepositoryActionsWrapper data={data} readonly={readonly} pageType={pageType}>
-      <DeleteRepositoryMenuItem data={data} readonly={readonly} pageType={pageType} />
-      {pageType === PageType.Table && <SetupClientMenuItem data={data} readonly={readonly} pageType={pageType} />}
-    </RepositoryActionsWrapper>
+    <ActionButton isOpen={open} setOpen={setOpen}>
+      <DeleteRepositoryMenuItem data={data} readonly={readonly} pageType={pageType} onClose={() => setOpen(false)} />
+      {pageType === PageType.Table && (
+        <SetupClientMenuItem data={data} readonly={readonly} pageType={pageType} onClose={() => setOpen(false)} />
+      )}
+    </ActionButton>
   )
 }
diff --git a/web/src/ar/pages/repository-details/components/Actions/SetupClient.tsx b/web/src/ar/pages/repository-details/components/Actions/SetupClient.tsx
index 18e90c14b..0abeddd74 100644
--- a/web/src/ar/pages/repository-details/components/Actions/SetupClient.tsx
+++ b/web/src/ar/pages/repository-details/components/Actions/SetupClient.tsx
@@ -24,12 +24,13 @@ import { PermissionIdentifier, ResourceType } from '@ar/common/permissionTypes'
 import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
 import type { RepositoryActionsProps } from './types'
 
-export default function SetupClientMenuItem({ data }: RepositoryActionsProps): JSX.Element {
+export default function SetupClientMenuItem({ data, onClose }: RepositoryActionsProps): JSX.Element {
   const { getString } = useStrings()
   const { RbacMenuItem } = useParentComponents()
   const [showSetupClientModal] = useSetupClientModal({
     repoKey: data.identifier,
-    packageType: data.packageType as RepositoryPackageType
+    packageType: data.packageType as RepositoryPackageType,
+    onClose
   })
   return (
     <>
diff --git a/web/src/ar/pages/repository-details/components/Actions/types.ts b/web/src/ar/pages/repository-details/components/Actions/types.ts
index 14c376e08..4a130e69b 100644
--- a/web/src/ar/pages/repository-details/components/Actions/types.ts
+++ b/web/src/ar/pages/repository-details/components/Actions/types.ts
@@ -21,4 +21,5 @@ export interface RepositoryActionsProps {
   data: VirtualRegistry
   readonly: boolean
   pageType: PageType
+  onClose?: () => void
 }
diff --git a/web/src/ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal.tsx b/web/src/ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal.tsx
index b872fdf5f..c20d05eee 100644
--- a/web/src/ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal.tsx
+++ b/web/src/ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal.tsx
@@ -26,24 +26,42 @@ import css from './useSetupClientModal.module.scss'
 
 export interface useSetupClientModalProps extends Omit<RepositoySetupClientProps, 'onClose'> {
   packageType: RepositoryPackageType
+  onClose?: () => void
 }
 
 export function useSetupClientModal(props: useSetupClientModalProps) {
-  const { packageType, repoKey, artifactKey, versionKey } = props
+  const { packageType, repoKey, artifactKey, versionKey, onClose } = props
   const { useModalHook } = useParentHooks()
 
-  const [showModal, hideModal] = useModalHook(() => (
-    <Drawer position={Position.RIGHT} isOpen={true} isCloseButtonShown={false} size={'50%'} onClose={hideModal}>
-      <Button minimal className={css.almostFullScreenCloseBtn} icon="cross" withoutBoxShadow onClick={hideModal} />
-      <RepositorySetupClientWidget
-        repoKey={repoKey}
-        artifactKey={artifactKey}
-        versionKey={versionKey}
-        onClose={hideModal}
-        type={packageType as RepositoryPackageType}
-      />
-    </Drawer>
-  ))
+  const [showModal, hideModal] = useModalHook(() => {
+    const handleCloseModal = () => {
+      onClose?.()
+      hideModal()
+    }
+    return (
+      <Drawer
+        position={Position.RIGHT}
+        isOpen={true}
+        isCloseButtonShown={false}
+        size={'50%'}
+        onClose={handleCloseModal}>
+        <Button
+          minimal
+          className={css.almostFullScreenCloseBtn}
+          icon="cross"
+          withoutBoxShadow
+          onClick={handleCloseModal}
+        />
+        <RepositorySetupClientWidget
+          repoKey={repoKey}
+          artifactKey={artifactKey}
+          versionKey={versionKey}
+          onClose={handleCloseModal}
+          type={packageType as RepositoryPackageType}
+        />
+      </Drawer>
+    )
+  })
 
   return [showModal, hideModal]
 }