feat: [AH-944]: refactor setup client button (#3389)

* [AH-944]: refactor setup client button

web/src/ar/components/SetupClientButton/SetupClientButton.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+import { Button, ButtonVariation } from '@harnessio/uicore'
+
+import { useStrings } from '@ar/frameworks/strings'
+import type { RepositoryPackageType } from '@ar/common/types'
+import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
+
+interface SetupClientButtonProps {
+  repositoryIdentifier: string
+  packageType: RepositoryPackageType
+  artifactIdentifier?: string
+  versionIdentifier?: string
+}
+
+export default function SetupClientButton(props: SetupClientButtonProps): JSX.Element {
+  const { packageType } = props
+  const { getString } = useStrings()
+  const [showSetupClientModal] = useSetupClientModal({
+    repoKey: props.repositoryIdentifier,
+    artifactKey: props.artifactIdentifier,
+    versionKey: props.versionIdentifier,
+    packageType: packageType
+  })
+
+  return (
+    <Button
+      variation={ButtonVariation.SECONDARY}
+      text={getString('actions.setupClient')}
+      onClick={() => {
+        showSetupClientModal()
+      }}
+      icon="setting"
+    />
+  )
+}

web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeaderContent.tsx

@@ -16,7 +16,7 @@
 
 import React, { useContext } from 'react'
 import { Expander } from '@blueprintjs/core'
-import { Button, ButtonVariation, Layout } from '@harnessio/uicore'
+import { Layout } from '@harnessio/uicore'
 import type { ArtifactSummary } from '@harnessio/react-har-service-client'
 
 import { useDecodedParams } from '@ar/hooks'
@@ -26,7 +26,7 @@ import type { ArtifactDetailsPathParams } from '@ar/routes/types'
 import WeeklyDownloads from '@ar/components/PageTitle/WeeklyDownloads'
 import CreatedAndModifiedAt from '@ar/components/PageTitle/CreatedAndModifiedAt'
 import NameAndDescription from '@ar/components/PageTitle/NameAndDescription'
-import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
+import SetupClientButton from '@ar/components/SetupClientButton/SetupClientButton'
 
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
 import { ArtifactProviderContext } from '../../context/ArtifactProvider'
@@ -46,12 +46,6 @@ function ArtifactDetailsHeaderContent(props: ArtifactDetailsHeaderContentProps):
   const { repositoryIdentifier, artifactIdentifier } = pathParams
   const { packageType, imageName, modifiedAt, createdAt, downloadsCount } = data as ArtifactSummary
 
-  const [showSetupClientModal] = useSetupClientModal({
-    repoKey: repositoryIdentifier,
-    artifactKey: artifactIdentifier,
-    packageType: packageType as RepositoryPackageType
-  })
-
   return (
     <Layout.Vertical spacing="small" className={css.headerContainer}>
       <Layout.Horizontal spacing="small" className={css.horizontalContainer}>
@@ -70,13 +64,10 @@ function ArtifactDetailsHeaderContent(props: ArtifactDetailsHeaderContentProps):
           flex={{ justifyContent: 'space-between', alignItems: 'flex-end' }}>
           <Layout.Horizontal spacing="large">
             <CreatedAndModifiedAt createdAt={Number(createdAt)} modifiedAt={Number(modifiedAt)} />
-            <Button
-              variation={ButtonVariation.PRIMARY}
-              text={getString('actions.setupClient')}
-              onClick={() => {
-                showSetupClientModal()
-              }}
-              icon="setting"
+            <SetupClientButton
+              repositoryIdentifier={repositoryIdentifier}
+              artifactIdentifier={artifactIdentifier}
+              packageType={packageType as RepositoryPackageType}
             />
           </Layout.Horizontal>
         </Layout.Vertical>

web/src/ar/pages/repository-details/components/RepositoryDetailsHeader/RepositoryDetailsHeaderContent.tsx

@@ -17,7 +17,7 @@
 import React from 'react'
 import { defaultTo, isEmpty } from 'lodash-es'
 import { Color } from '@harnessio/design-system'
-import { Button, ButtonVariation, Container, Layout, Text } from '@harnessio/uicore'
+import { Container, Layout, Text } from '@harnessio/uicore'
 import { Expander, Position } from '@blueprintjs/core'
 
 import { useStrings } from '@ar/frameworks/strings'
@@ -26,8 +26,8 @@ import HeaderTitle from '@ar/components/Header/Title'
 import { DEFAULT_DATE_TIME_FORMAT } from '@ar/constants'
 import { getReadableDateTime } from '@ar/common/dateUtils'
 import LabelsPopover from '@ar/components/LabelsPopover/LabelsPopover'
+import SetupClientButton from '@ar/components/SetupClientButton/SetupClientButton'
 import RepositoryLocationBadge from '@ar/components/Badge/RepositoryLocationBadge'
-import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
 import RepositoryActionsWidget from '@ar/frameworks/RepositoryStep/RepositoryActionsWidget'
 import type { Repository } from '@ar/pages/repository-details/types'
@@ -43,10 +43,6 @@ export default function RepositoryDetailsHeaderContent(props: RepositoryDetailsH
   const { data, iconSize = 40 } = props
   const { identifier, labels, description, modifiedAt, packageType } = data || {}
   const { getString } = useStrings()
-  const [showSetupClientModal] = useSetupClientModal({
-    repoKey: identifier,
-    packageType: packageType as RepositoryPackageType
-  })
   return (
     <Container>
       <Layout.Horizontal data-testid="registry-header-container" spacing="medium" flex={{ alignItems: 'center' }}>
@@ -86,14 +82,7 @@ export default function RepositoryDetailsHeaderContent(props: RepositoryDetailsH
         </Layout.Vertical>
         <Expander />
         <Layout.Horizontal>
-          <Button
-            variation={ButtonVariation.SECONDARY}
-            text={getString('actions.setupClient')}
-            onClick={() => {
-              showSetupClientModal()
-            }}
-            icon="setting"
-          />
+          <SetupClientButton repositoryIdentifier={identifier} packageType={packageType as RepositoryPackageType} />
           <RepositoryActionsWidget
             type={RepositoryConfigType.VIRTUAL}
             packageType={data.packageType as RepositoryPackageType}

web/src/ar/pages/version-details/DockerVersion/DockerVersionHeader.tsx

@@ -17,19 +17,17 @@
 import React from 'react'
 import { Expander } from '@blueprintjs/core'
 import { useHistory } from 'react-router-dom'
-import { Button, ButtonVariation, Layout } from '@harnessio/uicore'
+import { Layout } from '@harnessio/uicore'
 import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client'
 
-import { useStrings } from '@ar/frameworks/strings'
-import { RepositoryPackageType } from '@ar/common/types'
+import type { RepositoryPackageType } from '@ar/common/types'
 import type { VersionDetailsPathParams } from '@ar/routes/types'
 import { useDecodedParams, useParentHooks, useRoutes } from '@ar/hooks'
-import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
+import SetupClientButton from '@ar/components/SetupClientButton/SetupClientButton'
 
 import DockerVersionName from './components/DockerVersionName/DockerVersionName'
 import type { DockerVersionDetailsQueryParams } from './types'
-import css from './DockerVersion.module.scss'
 
 interface DockerVersionHeaderProps {
   data: ArtifactVersionSummary
@@ -43,17 +41,9 @@ export default function DockerVersionHeader(props: DockerVersionHeaderProps): JS
   const { useUpdateQueryParams, useQueryParams } = useParentHooks()
   const { updateQueryParams } = useUpdateQueryParams()
   const { digest } = useQueryParams<DockerVersionDetailsQueryParams>()
-  const { getString } = useStrings()
   const history = useHistory()
   const routes = useRoutes()
 
-  const [showSetupClientModal] = useSetupClientModal({
-    repoKey: pathParams.repositoryIdentifier,
-    artifactKey: pathParams.artifactIdentifier,
-    versionKey: pathParams.versionIdentifier,
-    packageType: RepositoryPackageType.DOCKER
-  })
-
   const handleChangeVersion = (newVersion: string) => {
     history.push(
       routes.toARVersionDetails({
@@ -82,14 +72,11 @@ export default function DockerVersionHeader(props: DockerVersionHeaderProps): JS
         isLatestVersion={isLatestVersion}
       />
       <Expander />
-      <Button
-        className={css.setupClientBtn}
-        variation={ButtonVariation.PRIMARY}
-        text={getString('actions.setupClient')}
-        icon="setting"
-        onClick={() => {
-          showSetupClientModal()
-        }}
+      <SetupClientButton
+        repositoryIdentifier={pathParams.repositoryIdentifier}
+        artifactIdentifier={pathParams.artifactIdentifier}
+        versionIdentifier={pathParams.versionIdentifier}
+        packageType={packageType as RepositoryPackageType}
       />
     </Layout.Horizontal>
   )

web/src/ar/pages/version-details/GenericVersion/GenericVersionHeader.tsx

@@ -17,15 +17,14 @@
 import React from 'react'
 import { Expander } from '@blueprintjs/core'
 import { useHistory } from 'react-router-dom'
-import { Button, ButtonVariation, Layout } from '@harnessio/uicore'
+import { Layout } from '@harnessio/uicore'
 import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client'
 
-import { useStrings } from '@ar/frameworks/strings'
 import { useDecodedParams, useRoutes } from '@ar/hooks'
 import type { RepositoryPackageType } from '@ar/common/types'
 import type { VersionDetailsPathParams } from '@ar/routes/types'
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
-import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
+import SetupClientButton from '@ar/components/SetupClientButton/SetupClientButton'
 import GenericVersionName from './components/GenericVersionName/GenericVersionName'
 
 interface GenericVersionHeaderProps {
@@ -37,17 +36,9 @@ export default function GenericVersionHeader(props: GenericVersionHeaderProps):
   const { iconSize = 40, data } = props
   const { imageName, version, isLatestVersion = false, packageType } = data
   const pathParams = useDecodedParams<VersionDetailsPathParams>()
-  const { getString } = useStrings()
   const history = useHistory()
   const routes = useRoutes()
 
-  const [showSetupClientModal] = useSetupClientModal({
-    repoKey: pathParams.repositoryIdentifier,
-    artifactKey: pathParams.artifactIdentifier,
-    versionKey: pathParams.versionIdentifier,
-    packageType: packageType as RepositoryPackageType
-  })
-
   const handleChangeVersion = (newVersion: string) => {
     history.push(
       routes.toARVersionDetails({
@@ -68,13 +59,11 @@ export default function GenericVersionHeader(props: GenericVersionHeaderProps):
         isLatestVersion={isLatestVersion}
       />
       <Expander />
-      <Button
-        variation={ButtonVariation.PRIMARY}
-        text={getString('actions.setupClient')}
-        icon="setting"
-        onClick={() => {
-          showSetupClientModal()
-        }}
+      <SetupClientButton
+        repositoryIdentifier={pathParams.repositoryIdentifier}
+        artifactIdentifier={pathParams.artifactIdentifier}
+        versionIdentifier={pathParams.versionIdentifier}
+        packageType={packageType as RepositoryPackageType}
       />
     </Layout.Horizontal>
   )

web/src/ar/pages/version-details/HelmVersion/HelmVersionHeader.tsx

@@ -17,15 +17,14 @@
 import React from 'react'
 import { Expander } from '@blueprintjs/core'
 import { useHistory } from 'react-router-dom'
-import { Button, ButtonVariation, Layout } from '@harnessio/uicore'
+import { Layout } from '@harnessio/uicore'
 import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client'
 
-import { useStrings } from '@ar/frameworks/strings'
 import type { RepositoryPackageType } from '@ar/common/types'
 import { useDecodedParams, useRoutes } from '@ar/hooks'
 import type { VersionDetailsPathParams } from '@ar/routes/types'
-import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
+import SetupClientButton from '@ar/components/SetupClientButton/SetupClientButton'
 import HelmVersionName from './components/HelmVersionName/HelmVersionName'
 
 interface HelmVersionHeaderProps {
@@ -37,17 +36,9 @@ export default function HelmVersionHeader(props: HelmVersionHeaderProps): JSX.El
   const { iconSize = 40, data } = props
   const { imageName, version, isLatestVersion = false, packageType } = data
   const pathParams = useDecodedParams<VersionDetailsPathParams>()
-  const { getString } = useStrings()
   const history = useHistory()
   const routes = useRoutes()
 
-  const [showSetupClientModal] = useSetupClientModal({
-    repoKey: pathParams.repositoryIdentifier,
-    artifactKey: pathParams.artifactIdentifier,
-    versionKey: pathParams.versionIdentifier,
-    packageType: packageType as RepositoryPackageType
-  })
-
   const handleChangeVersion = (newVersion: string) => {
     history.push(
       routes.toARVersionDetails({
@@ -68,13 +59,11 @@ export default function HelmVersionHeader(props: HelmVersionHeaderProps): JSX.El
         isLatestVersion={isLatestVersion}
       />
       <Expander />
-      <Button
-        variation={ButtonVariation.PRIMARY}
-        text={getString('actions.setupClient')}
-        icon="setting"
-        onClick={() => {
-          showSetupClientModal()
-        }}
+      <SetupClientButton
+        repositoryIdentifier={pathParams.repositoryIdentifier}
+        artifactIdentifier={pathParams.artifactIdentifier}
+        versionIdentifier={pathParams.versionIdentifier}
+        packageType={packageType as RepositoryPackageType}
       />
     </Layout.Horizontal>
   )

web/src/ar/pages/version-details/components/VersionDetailsHeaderContent/VersionDetailsHeaderContent.tsx

@@ -17,15 +17,14 @@
 import React from 'react'
 import { Expander } from '@blueprintjs/core'
 import { useHistory } from 'react-router-dom'
-import { Button, ButtonVariation, Layout } from '@harnessio/uicore'
+import { Layout } from '@harnessio/uicore'
 import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client'
 
-import { useStrings } from '@ar/frameworks/strings'
 import { useDecodedParams, useRoutes } from '@ar/hooks'
 import type { RepositoryPackageType } from '@ar/common/types'
 import type { VersionDetailsPathParams } from '@ar/routes/types'
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
-import { useSetupClientModal } from '@ar/pages/repository-details/hooks/useSetupClientModal/useSetupClientModal'
+import SetupClientButton from '@ar/components/SetupClientButton/SetupClientButton'
 
 import VersionNameContent from './VersionNameContent'
 
@@ -38,17 +37,9 @@ export default function VersionDetailsHeaderContent(props: VersionDetailsHeaderC
   const { iconSize = 40, data } = props
   const { imageName, version, isLatestVersion = false, packageType } = data
   const pathParams = useDecodedParams<VersionDetailsPathParams>()
-  const { getString } = useStrings()
   const history = useHistory()
   const routes = useRoutes()
 
-  const [showSetupClientModal] = useSetupClientModal({
-    repoKey: pathParams.repositoryIdentifier,
-    artifactKey: pathParams.artifactIdentifier,
-    versionKey: pathParams.versionIdentifier,
-    packageType: packageType as RepositoryPackageType
-  })
-
   const handleChangeVersion = (newVersion: string) => {
     history.push(
       routes.toARVersionDetails({
@@ -69,13 +60,11 @@ export default function VersionDetailsHeaderContent(props: VersionDetailsHeaderC
         isLatestVersion={isLatestVersion}
       />
       <Expander />
-      <Button
-        variation={ButtonVariation.PRIMARY}
-        text={getString('actions.setupClient')}
-        icon="setting"
-        onClick={() => {
-          showSetupClientModal()
-        }}
+      <SetupClientButton
+        repositoryIdentifier={pathParams.repositoryIdentifier}
+        artifactIdentifier={pathParams.artifactIdentifier}
+        versionIdentifier={pathParams.versionIdentifier}
+        packageType={packageType as RepositoryPackageType}
       />
     </Layout.Horizontal>
   )