USEFULL/drone
1
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-02 05:30:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Shivanand Sonnad 2025-01-28 04:59:14 +00:00 committed by Harness
parent cbd889881b
commit c8a1e128b8
12 changed files with 301 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

@ -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",

66
web/src/ar/pages/repository-details/components/SetupClientContent/InlineSectionContent.tsx Normal file
View File

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

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

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

1
web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientContent.module.scss.d.ts vendored
View File

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

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

@ -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 { PackageType, useGetClientSetupDetailsQuery } from '@harnessio/react-har-service-client'
import { Button, ButtonVariation, Layout, Page, Text } from '@harnessio/uicore'
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 { ClientSetupStepTypeEnum } from './types'
import SetupClientSectionContent from './SetupClientSectionContent'
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}>
<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>
<SetupClientSectionContent key={index} section={section} />
))}
</Layout.Vertical>
<Layout.Horizontal

65
web/src/ar/pages/repository-details/components/SetupClientContent/SetupClientSectionContent.tsx Normal file
View File

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

141
web/src/ar/pages/repository-details/components/SetupClientContent/mockData.ts Normal file
View File

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

2
web/src/ar/pages/version-details/MavenVersion/MavenVersion.tsx
View File

@ -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,

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

@ -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,

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

@ -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,
artifact: pathParams.artifactIdentifier,
artifact: encodeRef(pathParams.artifactIdentifier),
version: pathParams.versionIdentifier,
queryParams: {}
},
{
enabled: false
}
)
})
const response = data?.content?.data as ArtifactDetail

2
web/src/ar/pages/version-details/VersionFactory.tsx
View File

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

8
web/yarn.lock
View File

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