feat: [AH-849]: support maven in setup client setup (#3325)

* feat: [AH-849]: encode artifact name and enable artifact details api call
* feat: [AH-849]: add maven version in factory
* feat: [AH-849]: remove circular dependancy
* feat: [AH-849]: update zindex of modal header
* feat: [AH-849]: support maven in setup client setup

web/package.json

@@ -51,7 +51,7 @@
     "@codemirror/view": "^6.9.6",
     "@harnessio/design-system": "^2.1.1",
     "@harnessio/icons": "^2.1.9",
-    "@harnessio/react-har-service-client": "^0.7.0",
+    "@harnessio/react-har-service-client": "^0.8.0",
     "@harnessio/react-ssca-manager-client": "^0.65.0",
     "@harnessio/uicore": "^4.1.2",
     "@tanstack/react-query": "4.20.4",

web/src/ar/pages/repository-details/components/SetupClientContent/InlineSectionContent.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { Color, FontVariation } from '@harnessio/design-system'
+import { Container, Layout, Text } from '@harnessio/uicore'
+import type { ClientSetupSection, ClientSetupStepConfig } from '@harnessio/react-har-service-client'
+
+import { useStrings } from '@ar/frameworks/strings'
+import CommandBlock from '@ar/components/CommandBlock/CommandBlock'
+
+import { ClientSetupStepTypeEnum } from './types'
+import GenerateTokenStep from './GenerateTokenStep'
+
+import css from './SetupClientContent.module.scss'
+
+interface InlineSectionContentProps {
+  section: ClientSetupSection & ClientSetupStepConfig
+}
+
+export default function InlineSectionContent(props: InlineSectionContentProps) {
+  const { section } = props
+  const { getString } = useStrings()
+  return (
+    <Layout.Vertical spacing="medium">
+      <Layout.Vertical>
+        <Text font={{ variation: FontVariation.CARD_TITLE }}>{section.header}</Text>
+        <Text font={{ variation: FontVariation.SMALL }} color={Color.GREY_600}>
+          {section.secHeader}
+        </Text>
+      </Layout.Vertical>
+      {section.steps?.map((step, stepIndex) => {
+        if (step.type === ClientSetupStepTypeEnum.GenerateToken) {
+          return <GenerateTokenStep key={stepIndex} step={step} stepIndex={stepIndex} />
+        }
+        return (
+          <Container className={css.stepGridContainer} key={stepIndex}>
+            <Text className={css.label} font={{ variation: FontVariation.SMALL_BOLD }}>
+              {getString('repositoryDetails.clientSetup.step', { stepIndex: stepIndex + 1 })}
+            </Text>
+            <Text font={{ variation: FontVariation.SMALL }}>{step.header}</Text>
+            {step.commands && (
+              <>
+                <div />
+                <CommandBlock ignoreWhiteSpaces={false} commandSnippet={step.commands} allowCopy={true} />
+              </>
+            )}
+          </Container>
+        )
+      })}
+    </Layout.Vertical>
+  )
+}

web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.module.scss

@@ -37,6 +37,7 @@
 .titleContainer {
   position: sticky;
   top: 0px;
+  z-index: 10;
   background-color: var(--grey-0) !important;
   padding-left: var(--spacing-xxlarge) !important;
   padding-right: var(--spacing-xxlarge) !important;
@@ -51,3 +52,9 @@
   padding-top: 0px !important;
   padding-bottom: var(--spacing-xxlarge) !important;
 }
+
+.tabsContainer {
+  & > :global(.bp3-tabs > .bp3-tab-list) {
+    border-bottom: 1px solid var(--grey-200);
+  }
+}

web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.module.scss.d.ts

@@ -21,4 +21,5 @@ export declare const generateTokenBtn: string
 export declare const label: string
 export declare const pageBody: string
 export declare const stepGridContainer: string
+export declare const tabsContainer: string
 export declare const titleContainer: string

web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.tsx

@@ -16,17 +16,15 @@
 
 import React from 'react'
 import { FontVariation } from '@harnessio/design-system'
-import { Button, ButtonVariation, Container, Layout, Page, Text } from '@harnessio/uicore'
+import { Button, ButtonVariation, Layout, Page, Text } from '@harnessio/uicore'
-import { PackageType, useGetClientSetupDetailsQuery } from '@harnessio/react-har-service-client'
+import { type PackageType, useGetClientSetupDetailsQuery } from '@harnessio/react-har-service-client'
 
 import { useGetSpaceRef } from '@ar/hooks'
 import { useStrings } from '@ar/frameworks/strings'
 import type { RepositoryPackageType } from '@ar/common/types'
 import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
-import CommandBlock from '@ar/components/CommandBlock/CommandBlock'
 
-import GenerateTokenStep from './GenerateTokenStep'
+import SetupClientSectionContent from './SetupClientSectionContent'
-import { ClientSetupStepTypeEnum } from './types'
 
 import css from './SetupClientContent.module.scss'
 
@@ -69,28 +67,7 @@ export default function SetupClientContent(props: SetupClientContentProps): JSX.
           <Layout.Vertical data-testid="setup-client-body" className={css.contentContainer} spacing="medium">
             <Text font={{ variation: FontVariation.SMALL }}>{responseData.secHeader}</Text>
             {responseData.sections.map((section, index) => (
-              <Layout.Vertical spacing="medium" key={index}>
+              <SetupClientSectionContent key={index} section={section} />
-                <Text font={{ variation: FontVariation.CARD_TITLE }}>{section.header}</Text>
-                {section.steps?.map((step, stepIndex) => {
-                  if (step.type === ClientSetupStepTypeEnum.GenerateToken) {
-                    return <GenerateTokenStep key={index} step={step} stepIndex={stepIndex} />
-                  }
-                  return (
-                    <Container className={css.stepGridContainer} key={index}>
-                      <Text className={css.label} font={{ variation: FontVariation.SMALL_BOLD }}>
-                        {getString('repositoryDetails.clientSetup.step', { stepIndex: stepIndex + 1 })}
-                      </Text>
-                      <Text font={{ variation: FontVariation.SMALL }}>{step.header}</Text>
-                      {step.commands && (
-                        <>
-                          <div />
-                          <CommandBlock ignoreWhiteSpaces={false} commandSnippet={step.commands} allowCopy={true} />
-                        </>
-                      )}
-                    </Container>
-                  )
-                })}
-              </Layout.Vertical>
             ))}
           </Layout.Vertical>
           <Layout.Horizontal

web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientSectionContent.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 { Container, Tab, Tabs } from '@harnessio/uicore'
+import type { ClientSetupSection, TabSetupStepConfig } from '@harnessio/react-har-service-client'
+
+import InlineSectionContent from './InlineSectionContent'
+import css from './SetupClientContent.module.scss'
+
+interface SetupClientSectionContentProps {
+  section: ClientSetupSection
+}
+
+export default function SetupClientSectionContent(props: SetupClientSectionContentProps) {
+  const { section } = props
+  switch (section.type) {
+    case 'TABS':
+      return <TabsSectionContent section={section} />
+    case 'INLINE':
+    default:
+      return <InlineSectionContent section={section} />
+  }
+}
+
+interface TabsSectionContentProps {
+  section: ClientSetupSection & TabSetupStepConfig
+}
+
+function TabsSectionContent(props: TabsSectionContentProps): JSX.Element {
+  const { section } = props
+  return (
+    <Container className={css.tabsContainer}>
+      <Tabs id="setup-client-tabs" defaultSelectedTabId={section.tabs && section.tabs[0].header}>
+        {section.tabs?.map((tab, index) => (
+          <Tab
+            key={index}
+            id={tab.header}
+            title={tab.header}
+            panel={
+              <Container>
+                {tab.sections?.map((each, idx) => (
+                  <SetupClientSectionContent key={idx} section={each} />
+                ))}
+              </Container>
+            }
+          />
+        ))}
+      </Tabs>
+    </Container>
+  )
+}

web/src/ar/pages/repository-details/components/SetupClientContent/mockData.ts

@@ -0,0 +1,141 @@
+/*
+ * 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 type { ClientSetupDetails } from '@harnessio/react-har-service-client'
+
+export const MOCK_SETUP_CLIENT_RESPONSE: ClientSetupDetails = {
+  mainHeader: 'Docker Client Setup',
+  secHeader: 'Follow these instructions to install/use Docker artifacts or compatible packages.',
+  sections: [
+    {
+      header: 'Login to Docker',
+      secHeader: 'Run this Docker command in your terminal to login to Docker.',
+      type: 'INLINE',
+      steps: [
+        {
+          header: 'For the Password field above, generate an identity token',
+          type: 'GenerateToken'
+        }
+      ]
+    },
+    {
+      header: 'Retag and Push the image',
+      type: 'TABS',
+      tabs: [
+        {
+          header: 'Maven',
+          sections: [
+            {
+              header: 'Login to Maven',
+              secHeader: 'Run this Docker command in your terminal to login to Docker.',
+              type: 'INLINE',
+              steps: [
+                {
+                  commands: [
+                    {
+                      label: '',
+                      value:
+                        'docker tag \u003cIMAGE_NAME\u003e:\u003cTAG\u003e host.docker.internal:3000/artifact-registry/docker-repo/\u003cIMAGE_NAME\u003e:\u003cTAG\u003e'
+                    }
+                  ],
+                  header: 'Run this Docker command in your terminal to tag the image.',
+                  type: 'Static'
+                },
+                {
+                  commands: [
+                    {
+                      label: '',
+                      value:
+                        'docker push host.docker.internal:3000/artifact-registry/docker-repo/\u003cIMAGE_NAME\u003e:\u003cTAG\u003e'
+                    }
+                  ],
+                  header: 'Run this Docker command in your terminal to push the image.',
+                  type: 'Static'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          header: 'Gradle',
+          sections: [
+            {
+              header: 'Login to Gradle',
+              type: 'INLINE',
+              steps: [
+                {
+                  commands: [
+                    {
+                      label: '',
+                      value:
+                        'docker tag \u003cIMAGE_NAME\u003e:\u003cTAG\u003e host.docker.internal:3000/artifact-registry/docker-repo/\u003cIMAGE_NAME\u003e:\u003cTAG\u003e'
+                    }
+                  ],
+                  header: 'Run this Docker command in your terminal to tag the image.',
+                  type: 'Static'
+                },
+                {
+                  commands: [
+                    {
+                      label: '',
+                      value:
+                        'docker push host.docker.internal:3000/artifact-registry/docker-repo/\u003cIMAGE_NAME\u003e:\u003cTAG\u003e'
+                    }
+                  ],
+                  header: 'Run this Docker command in your terminal to push the image.',
+                  type: 'Static'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          header: 'Scala',
+          sections: [
+            {
+              header: 'Login to Scala',
+              type: 'INLINE',
+              steps: [
+                {
+                  commands: [
+                    {
+                      label: '',
+                      value:
+                        'docker tag \u003cIMAGE_NAME\u003e:\u003cTAG\u003e host.docker.internal:3000/artifact-registry/docker-repo/\u003cIMAGE_NAME\u003e:\u003cTAG\u003e'
+                    }
+                  ],
+                  header: 'Run this Docker command in your terminal to tag the image.',
+                  type: 'Static'
+                },
+                {
+                  commands: [
+                    {
+                      label: '',
+                      value:
+                        'docker push host.docker.internal:3000/artifact-registry/docker-repo/\u003cIMAGE_NAME\u003e:\u003cTAG\u003e'
+                    }
+                  ],
+                  header: 'Run this Docker command in your terminal to push the image.',
+                  type: 'Static'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

web/src/ar/pages/version-details/MavenVersion/MavenVersion.tsx

@@ -33,7 +33,7 @@ import MavenArtifactDetailsPage from './pages/artifact-details/MavenArtifactDeta
 import VersionDetailsHeaderContent from '../components/VersionDetailsHeaderContent/VersionDetailsHeaderContent'
 import OSSContentPage from './pages/oss-details/OSSContentPage'
 
-export class GenericVersionType extends VersionStep<ArtifactVersionSummary> {
+export class MavenVersionType extends VersionStep<ArtifactVersionSummary> {
   protected packageType = RepositoryPackageType.MAVEN
   protected allowedVersionDetailsTabs: VersionDetailsTab[] = [
     VersionDetailsTab.OVERVIEW,

web/src/ar/pages/version-details/MavenVersion/pages/artifact-details/MavenArtifactDetailsPage.tsx

@@ -19,6 +19,7 @@ import { Page } from '@harnessio/uicore'
 import { useGetArtifactFilesQuery } from '@harnessio/react-har-service-client'
 
 import { DEFAULT_PAGE_INDEX } from '@ar/constants'
+import { encodeRef } from '@ar/hooks/useGetSpaceRef'
 import type { VersionDetailsPathParams } from '@ar/routes/types'
 import { useDecodedParams, useGetSpaceRef, useParentHooks } from '@ar/hooks'
 import {
@@ -47,7 +48,7 @@ export default function MavenArtifactDetailsPage() {
     refetch
   } = useGetArtifactFilesQuery({
     registry_ref: registryRef,
-    artifact: pathParams.artifactIdentifier,
+    artifact: encodeRef(pathParams.artifactIdentifier),
     version: pathParams.versionIdentifier,
     queryParams: {
       searchTerm,

web/src/ar/pages/version-details/MavenVersion/pages/oss-details/OSSGeneralInfoContent.tsx

@@ -18,6 +18,7 @@ import React from 'react'
 import { Page } from '@harnessio/uicore'
 import { ArtifactDetail, useGetArtifactDetailsQuery } from '@harnessio/react-har-service-client'
 
+import { encodeRef } from '@ar/hooks/useGetSpaceRef'
 import { useDecodedParams, useGetSpaceRef } from '@ar/hooks'
 import type { VersionDetailsPathParams } from '@ar/routes/types'
 
@@ -33,17 +34,12 @@ export default function OSSGeneralInfoContent() {
     isFetching: loading,
     error,
     refetch
-  } = useGetArtifactDetailsQuery(
+  } = useGetArtifactDetailsQuery({
-    {
+    registry_ref: spaceRef,
-      registry_ref: spaceRef,
+    artifact: encodeRef(pathParams.artifactIdentifier),
-      artifact: pathParams.artifactIdentifier,
+    version: pathParams.versionIdentifier,
-      version: pathParams.versionIdentifier,
+    queryParams: {}
-      queryParams: {}
+  })
-    },
-    {
-      enabled: false
-    }
-  )
 
   const response = data?.content?.data as ArtifactDetail
 

web/src/ar/pages/version-details/VersionFactory.tsx

@@ -18,7 +18,9 @@ import versionFactory from '@ar/frameworks/Version/VersionFactory'
 import { DockerVersionType } from './DockerVersion/DockerVersionType'
 import { HelmVersionType } from './HelmVersion/HelmVersionType'
 import { GenericVersionType } from './GenericVersion/GenericVersionType'
+import { MavenVersionType } from './MavenVersion/MavenVersion'
 
 versionFactory.registerStep(new DockerVersionType())
 versionFactory.registerStep(new HelmVersionType())
 versionFactory.registerStep(new GenericVersionType())
+versionFactory.registerStep(new MavenVersionType())

web/yarn.lock

@@ -1945,10 +1945,10 @@
     yargs "^17.6.2"
     zod "^3.19.1"
 
-"@harnessio/react-har-service-client@^0.7.0":
+"@harnessio/react-har-service-client@^0.8.0":
-  version "0.7.0"
+  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@harnessio/react-har-service-client/-/react-har-service-client-0.7.0.tgz#e78e1b1e770586ed3f5215b0bc7277b8b12dcd8f"
+  resolved "https://registry.yarnpkg.com/@harnessio/react-har-service-client/-/react-har-service-client-0.8.0.tgz#fcb4e3fbd3a7c766cf1461a6508b0fe5d3d8b325"
-  integrity sha512-810Z3OLEcPxul/PQdb92S8/DKG8tA83hbMgGdA0v+7+e4cCnIigSYP9lvUa2i7I8Bm8LtP4kiipg8aky90m70w==
+  integrity sha512-3DtVMW+pWwZ/5UtI5pj4RIxae4Oo7xmeM0bpihAEIahv6kbvkxctXCtjDpz0e2rWiieJA3llm8tgJXuFVLk+Bw==
   dependencies:
     "@harnessio/oats-cli" "^3.0.0"