USEFULL
/
drone
mirror of https://github.com/harness/drone.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: [AH-944]: Improve view for version and arch selector on version details page (#3391) 

* feat: [AH-944]: Improve view for version and arch selector on version details page
pull/3616/head
Shivanand Sonnad 2025-02-10 05:39:46 +00:00 committed by Harness
parent ab8b28691b
commit 824f72479c
4 changed files with 9 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/ar/pages/version-details/DockerVersion/components/ArchitectureSelector/ArchitectureSelector.tsx
View File

@ -16,13 +16,13 @@
import React, { useEffect, useMemo } from 'react'
import { debounce } from 'lodash-es'
import { DropDown, SelectOption } from '@harnessio/uicore'
import { FontVariation } from '@harnessio/design-system'
import { DropDown, SelectOption, Text } from '@harnessio/uicore'
import { useGetDockerArtifactManifestsQuery } from '@harnessio/react-har-service-client'
import { encodeRef } from '@ar/hooks/useGetSpaceRef'
import { useDecodedParams, useGetSpaceRef } from '@ar/hooks'
import { useStrings } from '@ar/frameworks/strings'
import HeaderTitle from '@ar/components/Header/Title'
import type { VersionDetailsPathParams } from '@ar/routes/types'
import css from './ArchitectureSelector.module.scss'
@ -91,12 +91,7 @@ export default function ArchitectureSelector(props: ArchitectureSelectorProps):
addClearBtn={false}
itemDisabled={item => !item.value}
placeholder={loading ? getString('loading') : getString('versionDetails.selectDigestPlaceholder')}
isLabel
getCustomLabel={option => (
<HeaderTitle tag="span" className={css.primaryColor}>
{option.label}
</HeaderTitle>
)}
getCustomLabel={option => <Text font={{ variation: FontVariation.BODY }}>{option.label}</Text>}
/>
)
}

6
web/src/ar/pages/version-details/DockerVersion/components/DockerVersionName/DockerVersionName.tsx
View File

@ -16,7 +16,6 @@
import React from 'react'
import { Layout } from '@harnessio/uicore'
import { Icon } from '@harnessio/icons'
import Tag from '@ar/components/Tag/Tag'
import { useStrings } from '@ar/frameworks/strings'
@ -40,10 +39,9 @@ export default function DockerVersionName(props: DockerVersionNameProps): JSX.El
const { getString } = useStrings()
return (
<Layout.Horizontal spacing="small" className={css.headerWrapper}>
<HeaderTitle>{name}:</HeaderTitle>
<Layout.Horizontal spacing="medium" className={css.headerWrapper}>
<HeaderTitle>{name}</HeaderTitle>
<VersionSelector value={version} onChange={onChangeVersion} />
<Icon name="chevron-right" size={18} />
<ArchitectureSelector version={version} value={digest} onChange={onChangeDigest} shouldSelectFirstByDefault />
{isLatestVersion && <Tag isVersionTag>{getString('tags.latestVersion')}</Tag>}
</Layout.Horizontal>

2
web/src/ar/pages/version-details/components/VersionDetailsHeaderContent/VersionNameContent.tsx
View File

@ -35,7 +35,7 @@ export default function VersionNameContent(props: VersionNameContentProps): JSX.
return (
<Layout.Horizontal spacing="small" flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
<HeaderTitle>{name}:</HeaderTitle>
<HeaderTitle>{name}</HeaderTitle>
<VersionSelector value={version} onChange={onChangeVersion} />
{isLatestVersion && <Tag isVersionTag>{getString('tags.latestVersion')}</Tag>}
</Layout.Horizontal>

11
web/src/ar/pages/version-details/components/VersionSelector/VersionSelector.tsx
View File

@ -15,13 +15,13 @@
*/
import React, { useState } from 'react'
import { DropDown, SelectOption } from '@harnessio/uicore'
import { FontVariation } from '@harnessio/design-system'
import { DropDown, SelectOption, Text } from '@harnessio/uicore'
import { GetAllArtifactVersionsOkResponse, getAllArtifactVersions } from '@harnessio/react-har-service-client'
import { useDecodedParams, useGetSpaceRef } from '@ar/hooks'
import { useStrings } from '@ar/frameworks/strings'
import { encodeRef } from '@ar/hooks/useGetSpaceRef'
import HeaderTitle from '@ar/components/Header/Title'
import type { VersionDetailsPathParams } from '@ar/routes/types'
import css from './VersionSelector.module.scss'
@ -83,12 +83,7 @@ export default function VersionSelector(props: VersionSelectorProps): JSX.Elemen
query={query}
onQueryChange={setQuery}
placeholder={getString('artifactList.table.allRepositories')}
isLabel
getCustomLabel={option => (
<HeaderTitle tag="span" className={css.primaryColor}>
{option.label}
</HeaderTitle>
)}
getCustomLabel={option => <Text font={{ variation: FontVariation.BODY }}>{option.label}</Text>}
/>
)
}