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

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;
+}

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

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)
       }}
     />
   )

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())
   }
 

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>
   )
 }

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 (
     <>

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
 }

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]
 }