feat: [AH-1247]: Support RPM in artifact list, version list and version details page (#3714)

* feat: [AH-1247]: show build time in readable format
* feat: [AH-1247]: add mapping for version details page
* feat: [AH-1247]: Support RPM in artifact list, version list and version details page

web/src/ar/pages/version-details/RPMVersion/RPMVersion.module.scss

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.cardContainer {
+  width: 60% !important;
+  min-width: 1040px;
+  padding: var(--spacing-7) !important;
+  background-color: var(--white);
+  margin: var(--spacing-large);
+}

web/src/ar/pages/version-details/RPMVersion/RPMVersion.module.scss.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2023 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.
+ */
+
+/* eslint-disable */
+// This is an auto-generated file
+export declare const cardContainer: string

web/src/ar/pages/version-details/RPMVersion/RPMVersionType.tsx

@@ -0,0 +1,134 @@
+/*
+ * 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 { Layout } from '@harnessio/uicore'
+import type { ArtifactVersionSummary } from '@harnessio/react-har-service-client'
+
+import { String } from '@ar/frameworks/strings'
+import { PageType, RepositoryPackageType } from '@ar/common/types'
+import { VersionListColumnEnum } from '@ar/pages/version-list/components/VersionListTable/types'
+import ArtifactActions from '@ar/pages/artifact-details/components/ArtifactActions/ArtifactActions'
+import VersionListTable, {
+  type CommonVersionListTableProps
+} from '@ar/pages/version-list/components/VersionListTable/VersionListTable'
+import {
+  type ArtifactActionProps,
+  ArtifactRowSubComponentProps,
+  type VersionActionProps,
+  type VersionDetailsHeaderProps,
+  type VersionDetailsTabProps,
+  type VersionListTableProps,
+  VersionStep
+} from '@ar/frameworks/Version/Version'
+
+import VersionFilesProvider from '../context/VersionFilesProvider'
+import { VersionAction } from '../components/VersionActions/types'
+import VersionActions from '../components/VersionActions/VersionActions'
+import VersionOverviewProvider from '../context/VersionOverviewProvider'
+import RPMVersionOverviewPage from './pages/overview/RPMVersionOverviewPage'
+import { VersionDetailsTab } from '../components/VersionDetailsTabs/constants'
+import ArtifactFilesContent from '../components/ArtifactFileListTable/ArtifactFilesContent'
+import RPMVersionArtifactDetailsPage from './pages/artifact-dertails/RPMVersionArtifactDetailsPage'
+import VersionDetailsHeaderContent from '../components/VersionDetailsHeaderContent/VersionDetailsHeaderContent'
+
+export class RPMVersionType extends VersionStep<ArtifactVersionSummary> {
+  protected packageType = RepositoryPackageType.RPM
+  protected hasArtifactRowSubComponent = true
+  protected allowedVersionDetailsTabs: VersionDetailsTab[] = [
+    VersionDetailsTab.OVERVIEW,
+    VersionDetailsTab.ARTIFACT_DETAILS,
+    VersionDetailsTab.CODE
+  ]
+
+  versionListTableColumnConfig: CommonVersionListTableProps['columnConfigs'] = {
+    [VersionListColumnEnum.Name]: { width: '150%' },
+    [VersionListColumnEnum.Size]: { width: '100%' },
+    [VersionListColumnEnum.FileCount]: { width: '100%' },
+    [VersionListColumnEnum.DownloadCount]: { width: '100%' },
+    [VersionListColumnEnum.LastModified]: { width: '100%' },
+    [VersionListColumnEnum.Actions]: { width: '30%' }
+  }
+
+  protected allowedActionsOnVersion = [
+    VersionAction.Delete,
+    VersionAction.SetupClient,
+    VersionAction.ViewVersionDetails
+  ]
+
+  protected allowedActionsOnVersionDetailsPage = [VersionAction.Delete]
+
+  renderVersionListTable(props: VersionListTableProps): JSX.Element {
+    return <VersionListTable {...props} columnConfigs={this.versionListTableColumnConfig} />
+  }
+
+  renderVersionDetailsHeader(props: VersionDetailsHeaderProps<ArtifactVersionSummary>): JSX.Element {
+    return <VersionDetailsHeaderContent {...props} />
+  }
+
+  renderVersionDetailsTab(props: VersionDetailsTabProps): JSX.Element {
+    switch (props.tab) {
+      case VersionDetailsTab.OVERVIEW:
+        return (
+          <VersionOverviewProvider>
+            <RPMVersionOverviewPage />
+          </VersionOverviewProvider>
+        )
+      case VersionDetailsTab.ARTIFACT_DETAILS:
+        return (
+          <VersionOverviewProvider>
+            <RPMVersionArtifactDetailsPage />
+          </VersionOverviewProvider>
+        )
+      case VersionDetailsTab.OSS:
+        return (
+          <VersionOverviewProvider>
+            <Layout.Vertical spacing="xlarge">
+              <RPMVersionOverviewPage />
+              <RPMVersionArtifactDetailsPage />
+            </Layout.Vertical>
+          </VersionOverviewProvider>
+        )
+      default:
+        return <String stringID="tabNotFound" />
+    }
+  }
+
+  renderArtifactActions(props: ArtifactActionProps): JSX.Element {
+    return <ArtifactActions {...props} />
+  }
+
+  renderVersionActions(props: VersionActionProps): JSX.Element {
+    switch (props.pageType) {
+      case PageType.Details:
+        return <VersionActions {...props} allowedActions={this.allowedActionsOnVersionDetailsPage} />
+      default:
+        return <VersionActions {...props} allowedActions={this.allowedActionsOnVersion} />
+    }
+  }
+
+  renderArtifactRowSubComponent(props: ArtifactRowSubComponentProps): JSX.Element {
+    return (
+      <VersionFilesProvider
+        repositoryIdentifier={props.data.registryIdentifier}
+        artifactIdentifier={props.data.name}
+        versionIdentifier={props.data.version}
+        shouldUseLocalParams>
+        <ArtifactFilesContent minimal />
+      </VersionFilesProvider>
+    )
+  }
+}

web/src/ar/pages/version-details/RPMVersion/pages/artifact-dertails/RPMVersionArtifactDetailsPage.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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, { useCallback } from 'react'
+import { Container, Layout } from '@harnessio/uicore'
+
+import { useParentHooks } from '@ar/hooks'
+import { useStrings } from '@ar/frameworks/strings'
+import { ButtonTab, ButtonTabs } from '@ar/components/ButtonTabs/ButtonTabs'
+import VersionFilesProvider from '@ar/pages/version-details/context/VersionFilesProvider'
+import ReadmeFileContent from '@ar/pages/version-details/components/ReadmeFileContent/ReadmeFileContent'
+import { useVersionOverview } from '@ar/pages/version-details/context/VersionOverviewProvider'
+import ArtifactFilesContent from '@ar/pages/version-details/components/ArtifactFileListTable/ArtifactFilesContent'
+
+import RPMVersionDependencyContent from './RPMVersionDependencyContent'
+import { RPMArtifactDetails, RPMArtifactDetailsTabEnum, type RPMVersionDetailsQueryParams } from '../../types'
+
+export default function RPMVersionArtifactDetailsPage() {
+  const { getString } = useStrings()
+  const { useUpdateQueryParams, useQueryParams } = useParentHooks()
+  const { updateQueryParams } = useUpdateQueryParams()
+  const { detailsTab = RPMArtifactDetailsTabEnum.ReadMe } = useQueryParams<RPMVersionDetailsQueryParams>()
+
+  const { data } = useVersionOverview<RPMArtifactDetails>()
+  const { metadata } = data
+
+  const handleTabChange = useCallback(
+    (nextTab: RPMArtifactDetailsTabEnum): void => {
+      updateQueryParams({ detailsTab: nextTab })
+    },
+    [updateQueryParams]
+  )
+
+  return (
+    <Layout.Vertical padding="large" spacing="large">
+      <ButtonTabs small bold selectedTabId={detailsTab} onChange={handleTabChange}>
+        <ButtonTab
+          id={RPMArtifactDetailsTabEnum.ReadMe}
+          icon="document"
+          iconProps={{ size: 12 }}
+          panel={
+            <Container>
+              <ReadmeFileContent source={metadata?.version_metadata?.description || getString('noReadme')} />
+            </Container>
+          }
+          title={getString('versionDetails.artifactDetails.tabs.readme')}
+        />
+        <ButtonTab
+          id={RPMArtifactDetailsTabEnum.Files}
+          icon="document"
+          iconProps={{ size: 12 }}
+          panel={
+            <VersionFilesProvider>
+              <ArtifactFilesContent />
+            </VersionFilesProvider>
+          }
+          title={getString('versionDetails.artifactDetails.tabs.files')}
+        />
+        <ButtonTab
+          id={RPMArtifactDetailsTabEnum.Dependencies}
+          icon="layers"
+          iconProps={{ size: 12 }}
+          panel={<RPMVersionDependencyContent />}
+          title={getString('versionDetails.artifactDetails.tabs.dependencies')}
+        />
+      </ButtonTabs>
+    </Layout.Vertical>
+  )
+}

web/src/ar/pages/version-details/RPMVersion/pages/artifact-dertails/RPMVersionDependencyContent.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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, { useMemo } from 'react'
+
+import { useStrings } from '@ar/frameworks/strings'
+import { useVersionOverview } from '@ar/pages/version-details/context/VersionOverviewProvider'
+import type { IDependencyList } from '@ar/pages/version-details/components/ArtifactDependencyListTable/types'
+import ArtifactDependencyListTable from '@ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable'
+
+import type { RPMArtifactDetails } from '../../types'
+
+export default function RPMVersionDependencyContent() {
+  const { data } = useVersionOverview<RPMArtifactDetails>()
+  const { metadata } = data
+  const { getString } = useStrings()
+
+  const dependencies = useMemo(() => {
+    const _dependencies = metadata?.file_metadata?.require || []
+    return _dependencies.reduce((acc: IDependencyList, dep: { name: string; version?: string; release?: string }) => {
+      const { name, version, release } = dep
+      const depName = release
+        ? getString('versionDetails.dependencyList.dependencyNameWithRelease', { name, release })
+        : name
+      if (acc.find(d => d.name === depName)) {
+        return acc
+      }
+      return [...acc, { name: depName, version }]
+    }, [])
+  }, [metadata, getString])
+
+  return <ArtifactDependencyListTable data={dependencies} />
+}

web/src/ar/pages/version-details/RPMVersion/pages/overview/RPMVersionGeneralInfo.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 { defaultTo } from 'lodash-es'
+import { FontVariation } from '@harnessio/design-system'
+import { Card, Container, Layout, Text } from '@harnessio/uicore'
+
+import { useStrings } from '@ar/frameworks/strings'
+import { DEFAULT_DATE_TIME_FORMAT } from '@ar/constants'
+import { getReadableDateTime } from '@ar/common/dateUtils'
+import { LabelValueTypeEnum } from '@ar/pages/version-details/components/LabelValueContent/type'
+import { useVersionOverview } from '@ar/pages/version-details/context/VersionOverviewProvider'
+import { LabelValueContent } from '@ar/pages/version-details/components/LabelValueContent/LabelValueContent'
+
+import type { RPMArtifactDetails } from '../../types'
+import css from './overview.module.scss'
+
+interface RPMVersionGeneralInfoProps {
+  className?: string
+}
+
+export default function RPMVersionGeneralInfo(props: RPMVersionGeneralInfoProps) {
+  const { className } = props
+  const { data } = useVersionOverview<RPMArtifactDetails>()
+  const { getString } = useStrings()
+  return (
+    <Card
+      data-testid="general-information-card"
+      className={className}
+      title={getString('versionDetails.overview.generalInformation.title')}>
+      <Layout.Vertical spacing="medium">
+        <Text font={{ variation: FontVariation.CARD_TITLE }}>
+          {getString('versionDetails.overview.generalInformation.title')}
+        </Text>
+        <Layout.Horizontal
+          margin={{ top: 'medium' }}
+          spacing="xlarge"
+          flex={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
+          <Container className={css.gridContainer}>
+            <LabelValueContent
+              label={getString('versionDetails.overview.generalInformation.packageType')}
+              value={getString('packageTypes.rpmPackage')}
+              type={LabelValueTypeEnum.PackageType}
+              icon="red-hat-logo"
+            />
+            <LabelValueContent
+              label={getString('versionDetails.overview.generalInformation.size')}
+              value={data.size}
+              type={LabelValueTypeEnum.Text}
+            />
+            <LabelValueContent
+              label={getString('versionDetails.overview.generalInformation.downloads')}
+              value={defaultTo(data.downloadCount?.toLocaleString(), 0)}
+              type={LabelValueTypeEnum.Text}
+            />
+            {data.metadata?.version_metadata?.project_url && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.homepage')}
+                value={data.metadata.version_metadata.project_url}
+                type={LabelValueTypeEnum.Link}
+              />
+            )}
+            {data.metadata?.version_metadata?.license && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.license')}
+                value={data.metadata.version_metadata.license}
+                type={LabelValueTypeEnum.Text}
+              />
+            )}
+            <LabelValueContent
+              label={getString('versionDetails.overview.generalInformation.uploadedBy')}
+              value={getReadableDateTime(Number(data.modifiedAt), DEFAULT_DATE_TIME_FORMAT)}
+              type={LabelValueTypeEnum.Text}
+            />
+            {data.metadata?.version_metadata?.summary && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.description')}
+                value={data.metadata.version_metadata.summary}
+                type={LabelValueTypeEnum.Text}
+                lineClamp={3}
+              />
+            )}
+          </Container>
+          <Container className={css.gridContainer}>
+            {data.metadata?.file_metadata?.build_host && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.buildHost')}
+                value={data.metadata.file_metadata.build_host}
+                type={LabelValueTypeEnum.Text}
+              />
+            )}
+            {data.metadata?.file_metadata?.build_time && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.buildTime')}
+                value={getReadableDateTime(data.metadata.file_metadata.build_time * 1000, DEFAULT_DATE_TIME_FORMAT)} // seconds to milliseconds
+                type={LabelValueTypeEnum.Text}
+              />
+            )}
+            {data.metadata?.file_metadata?.packager && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.packager')}
+                value={data.metadata.file_metadata.packager}
+                type={LabelValueTypeEnum.Text}
+              />
+            )}
+            {data.metadata?.file_metadata?.architecture && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.platform')}
+                value={data.metadata.file_metadata.architecture}
+                type={LabelValueTypeEnum.Text}
+              />
+            )}
+            {data.metadata?.file_metadata?.source_rpm && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.sourceRpm')}
+                value={data.metadata.file_metadata.source_rpm}
+                type={LabelValueTypeEnum.Text}
+              />
+            )}
+            {data.metadata?.file_metadata?.vendor && (
+              <LabelValueContent
+                label={getString('versionDetails.overview.generalInformation.vendor')}
+                value={data.metadata.file_metadata.vendor}
+                type={LabelValueTypeEnum.Text}
+              />
+            )}
+          </Container>
+        </Layout.Horizontal>
+      </Layout.Vertical>
+    </Card>
+  )
+}

web/src/ar/pages/version-details/RPMVersion/pages/overview/RPMVersionOverviewPage.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 RPMVersionGeneralInfo from './RPMVersionGeneralInfo'
+
+import genericStyles from '../../RPMVersion.module.scss'
+
+export default function RPMVersionOverviewPage() {
+  return <RPMVersionGeneralInfo className={genericStyles.cardContainer} />
+}

web/src/ar/pages/version-details/RPMVersion/pages/overview/overview.module.scss

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+.gridContainer {
+  align-items: center;
+  display: grid;
+  grid-template-columns: max-content auto;
+  row-gap: var(--spacing-medium);
+  column-gap: 30px;
+  flex: 1;
+}

web/src/ar/pages/version-details/RPMVersion/pages/overview/overview.module.scss.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2023 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.
+ */
+
+/* eslint-disable */
+// This is an auto-generated file
+export declare const gridContainer: string

web/src/ar/pages/version-details/RPMVersion/types.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { ArtifactDetail, RpmArtifactDetailConfig } from '@harnessio/react-har-service-client'
+import type { VersionDetailsQueryParams } from '../types'
+
+export enum RPMArtifactDetailsTabEnum {
+  ReadMe = 'readme',
+  Files = 'files',
+  Dependencies = 'dependencies'
+}
+export interface RPMVersionDetailsQueryParams extends VersionDetailsQueryParams {
+  detailsTab: RPMArtifactDetailsTabEnum
+}
+
+export type RPMArtifactDetails = ArtifactDetail & RpmArtifactDetailConfig

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

@@ -22,6 +22,7 @@ import { MavenVersionType } from './MavenVersion/MavenVersion'
 import { NpmVersionType } from './NpmVersion/NpmVersionType'
 import { PythonVersionType } from './PythonVersion/PythonVersionType'
 import { NuGetVersionType } from './NuGetVersion/NuGetVersionType'
+import { RPMVersionType } from './RPMVersion/RPMVersionType'
 
 versionFactory.registerStep(new DockerVersionType())
 versionFactory.registerStep(new HelmVersionType())
@@ -30,3 +31,4 @@ versionFactory.registerStep(new MavenVersionType())
 versionFactory.registerStep(new NpmVersionType())
 versionFactory.registerStep(new PythonVersionType())
 versionFactory.registerStep(new NuGetVersionType())
+versionFactory.registerStep(new RPMVersionType())

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

@@ -45,10 +45,11 @@ interface LabelValueProps {
   value: string | number | undefined
   type: LabelValueTypeEnum
   icon?: IconName
+  lineClamp?: number
 }
 
 export function LabelValueContent(props: LabelValueProps): JSX.Element {
-  const { label, value, type, icon } = props
+  const { label, value, type, icon, lineClamp = 1 } = props
   const { getString } = useStrings()
   const transformedValue = defaultTo(value, getString('na'))
   const renderValue = () => {
@@ -58,7 +59,7 @@ export function LabelValueContent(props: LabelValueProps): JSX.Element {
       case LabelValueTypeEnum.CopyText:
         return (
           <CopyText
-            lineClamp={1}
+            lineClamp={lineClamp}
             value={transformedValue.toString()}
             font={{ variation: FontVariation.BODY2, weight: 'light' }}
           />
@@ -73,21 +74,24 @@ export function LabelValueContent(props: LabelValueProps): JSX.Element {
         if (value) {
           return (
             <Link target="_blank" rel="noreferrer" to={value as string}>
-              <Text lineClamp={1} font={{ variation: FontVariation.BODY2, weight: 'light' }} color={Color.PRIMARY_7}>
+              <Text
+                lineClamp={lineClamp}
+                font={{ variation: FontVariation.BODY2, weight: 'light' }}
+                color={Color.PRIMARY_7}>
                 {value}
               </Text>
             </Link>
           )
         } else {
           return (
-            <Text lineClamp={1} font={{ variation: FontVariation.BODY2, weight: 'light' }}>
+            <Text lineClamp={lineClamp} font={{ variation: FontVariation.BODY2, weight: 'light' }}>
               {transformedValue}
             </Text>
           )
         }
       default:
         return (
-          <Text lineClamp={1} font={{ variation: FontVariation.BODY2, weight: 'light' }}>
+          <Text lineClamp={lineClamp} font={{ variation: FontVariation.BODY2, weight: 'light' }}>
             {transformedValue}
           </Text>
         )

web/src/ar/pages/version-details/strings/strings.en.yaml

@@ -55,6 +55,12 @@ overview:
     repository: Repository
     homepage: Homepage
     license: License
+    buildHost: Build Host
+    buildTime: Build Time
+    packager: Packager
+    platform: Platform
+    sourceRpm: Source RPM
+    vendor: Vendor
 artifactDetails:
   tabs:
     layers: Layers
@@ -88,6 +94,7 @@ artifactFiles:
       downloadCommand: Download Command
       created: Created
 dependencyList:
+  dependencyNameWithRelease: '{{ name }} (release: {{ release }})'
   table:
     columns:
       name: Dependency Name

web/src/ar/strings/strings.en.yaml

@@ -83,6 +83,7 @@ packageTypes:
   npmPackage: npm
   pythonPackage: Python Package
   nugetPackage: NuGet Package
+  rpmPackage: RPM Package
 repositoryTypes:
   docker: Docker
   helm: Helm

web/src/ar/strings/types.ts

@@ -205,6 +205,7 @@ export interface StringsMap {
   'versionDetails.cards.supplyChain.totalComponents': string
   'versionDetails.deleteVersionModal.contentText': string
   'versionDetails.deleteVersionModal.title': string
+  'versionDetails.dependencyList.dependencyNameWithRelease': string
   'versionDetails.dependencyList.table.columns.name': string
   'versionDetails.dependencyList.table.columns.version': string
   'versionDetails.deploymentsTable.columns.deploymentPipeline': string
@@ -215,6 +216,8 @@ export interface StringsMap {
   'versionDetails.deploymentsTable.columns.triggeredBy': string
   'versionDetails.deploymentsTable.columns.type': string
   'versionDetails.deploymentsTable.noDeploymentsTitle': string
+  'versionDetails.overview.generalInformation.buildHost': string
+  'versionDetails.overview.generalInformation.buildTime': string
   'versionDetails.overview.generalInformation.createdAndLastModifiedAt': string
   'versionDetails.overview.generalInformation.description': string
   'versionDetails.overview.generalInformation.digest': string
@@ -223,13 +226,17 @@ export interface StringsMap {
   'versionDetails.overview.generalInformation.license': string
   'versionDetails.overview.generalInformation.name': string
   'versionDetails.overview.generalInformation.packageType': string
+  'versionDetails.overview.generalInformation.packager': string
+  'versionDetails.overview.generalInformation.platform': string
   'versionDetails.overview.generalInformation.pullCommand': string
   'versionDetails.overview.generalInformation.repository': string
   'versionDetails.overview.generalInformation.repositoryPath': string
   'versionDetails.overview.generalInformation.size': string
+  'versionDetails.overview.generalInformation.sourceRpm': string
   'versionDetails.overview.generalInformation.title': string
   'versionDetails.overview.generalInformation.uploadedBy': string
   'versionDetails.overview.generalInformation.url': string
+  'versionDetails.overview.generalInformation.vendor': string
   'versionDetails.overview.generalInformation.version': string
   'versionDetails.page': string
   'versionDetails.selectDigestPlaceholder': string
@@ -364,6 +371,7 @@ export interface StringsMap {
   'packageTypes.npmPackage': string
   'packageTypes.nugetPackage': string
   'packageTypes.pythonPackage': string
+  'packageTypes.rpmPackage': string
   plaintext: string
   plusNewName: string
   prod: string