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

feat: [AH-944]: redesign artifact details page header (#3411) 

* feat: [AH-944]: redesign artifact details page header
pull/3616/head
Shivanand Sonnad 2025-02-11 16:50:25 +00:00 committed by Harness
parent 1e619e8219
commit 9af8f072b5
5 changed files with 31 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/ar/components/PageTitle/CreatedAndModifiedAt.tsx
View File

@ -24,8 +24,8 @@ import { useStrings } from '@ar/frameworks/strings'
import css from './PageTitle.module.scss'
interface CreatedAndModifiedAtProps {
createdAt: number | undefined
modifiedAt: number | undefined
createdAt?: number
modifiedAt?: number
}
export default function CreatedAndModifiedAt(props: CreatedAndModifiedAtProps): JSX.Element {
@ -33,14 +33,22 @@ export default function CreatedAndModifiedAt(props: CreatedAndModifiedAtProps):
const { createdAt, modifiedAt } = props
return (
<Container className={css.modificationContainer}>
<Text font={{ variation: FontVariation.SMALL_BOLD }}>{getString('createdAt')}:</Text>
<Text font={{ variation: FontVariation.SMALL }}>
{createdAt ? getReadableDateTime(Number(createdAt), DEFAULT_DATE_TIME_FORMAT) : getString('na')}
</Text>
<Text font={{ variation: FontVariation.SMALL_BOLD }}>{getString('modifiedAt')}:</Text>
<Text font={{ variation: FontVariation.SMALL }}>
{modifiedAt ? getReadableDateTime(Number(modifiedAt), DEFAULT_DATE_TIME_FORMAT) : getString('na')}
</Text>
{createdAt && (
<>
<Text font={{ variation: FontVariation.SMALL_BOLD }}>{getString('createdAt')}:</Text>
<Text font={{ variation: FontVariation.SMALL }}>
{createdAt ? getReadableDateTime(Number(createdAt), DEFAULT_DATE_TIME_FORMAT) : getString('na')}
</Text>
</>
)}
{modifiedAt && (
<>
<Text font={{ variation: FontVariation.SMALL_BOLD }}>{getString('modifiedAt')}:</Text>
<Text font={{ variation: FontVariation.SMALL }}>
{modifiedAt ? getReadableDateTime(Number(modifiedAt), DEFAULT_DATE_TIME_FORMAT) : getString('na')}
</Text>
</>
)}
</Container>
)
}

22
web/src/ar/components/PageTitle/WeeklyDownloads.tsx
View File

@ -15,11 +15,8 @@
*/
import React from 'react'
import { FontVariation } from '@harnessio/design-system'
import { Container, Layout, Text } from '@harnessio/uicore'
import { Icon } from '@harnessio/icons'
import css from './PageTitle.module.scss'
import { Layout, Text } from '@harnessio/uicore'
import { Color, FontVariation } from '@harnessio/design-system'
interface WeeklyDownloadsProps {
downloads: number | undefined
@ -28,13 +25,14 @@ interface WeeklyDownloadsProps {
function WeeklyDownloads(props: WeeklyDownloadsProps): JSX.Element {
return (
<Container flex={{ alignItems: 'flex-end' }}>
<Icon name="bar-chart" size={40} />
<Layout.Vertical className={css.weeklyDownloadContent}>
<Text font={{ variation: FontVariation.H5 }}>{props.downloads || 0}</Text>
<Text font={{ variation: FontVariation.SMALL }}>{props.label}</Text>
</Layout.Vertical>
</Container>
<Layout.Horizontal spacing="small">
<Text font={{ variation: FontVariation.BODY, weight: 'semi-bold' }} color={Color.GREY_500}>
{props.label}
</Text>
<Text font={{ variation: FontVariation.BODY, weight: 'semi-bold' }} color={Color.GREY_900}>
{props.downloads || 0}
</Text>
</Layout.Horizontal>
)
}

9
web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeader.module.scss
View File

@ -17,7 +17,6 @@
.header {
align-items: flex-start !important;
height: auto !important;
max-height: 200px !important;
& > div {
width: 100% !important;
}
@ -26,14 +25,6 @@
cursor: pointer;
}
.headerContainer {
height: 138px;
}
.horizontalContainer {
height: 100%;
}
.nameAndDescriptionContainer {
max-width: 50%;
}

2
web/src/ar/pages/artifact-details/components/ArtifactDetailsHeader/ArtifactDetailsHeader.module.scss.d.ts vendored
View File

@ -19,6 +19,4 @@
export declare const actionContainer: string
export declare const cursor: string
export declare const header: string
export declare const headerContainer: string
export declare const horizontalContainer: string
export declare const nameAndDescriptionContainer: string

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

@ -44,11 +44,11 @@ function ArtifactDetailsHeaderContent(props: ArtifactDetailsHeaderContentProps):
const pathParams = useDecodedParams<ArtifactDetailsPathParams>()
const { repositoryIdentifier, artifactIdentifier } = pathParams
const { packageType, imageName, modifiedAt, createdAt, downloadsCount } = data as ArtifactSummary
const { packageType, imageName, modifiedAt, downloadsCount, createdAt } = data as ArtifactSummary
return (
<Layout.Vertical spacing="small" className={css.headerContainer}>
<Layout.Horizontal spacing="small" className={css.horizontalContainer}>
<Layout.Vertical spacing="small">
<Layout.Horizontal spacing="small">
<RepositoryIcon packageType={packageType as RepositoryPackageType} iconProps={{ size: iconSize }} />
<Layout.Vertical
className={css.nameAndDescriptionContainer}