diff --git a/web/src/ar/components/TableCells/TableCells.tsx b/web/src/ar/components/TableCells/TableCells.tsx index 208db32f7..131869b43 100644 --- a/web/src/ar/components/TableCells/TableCells.tsx +++ b/web/src/ar/components/TableCells/TableCells.tsx @@ -20,7 +20,7 @@ import { defaultTo } from 'lodash-es' import copy from 'clipboard-copy' import { Link } from 'react-router-dom' import type { TableExpandedToggleProps } from 'react-table' -import { Button, ButtonProps, ButtonVariation, Layout, Text } from '@harnessio/uicore' +import { Button, ButtonProps, ButtonVariation, Layout, Text, TextProps } from '@harnessio/uicore' import type { IconName, IconProps } from '@harnessio/icons' import { Color, FontVariation } from '@harnessio/design-system' @@ -151,14 +151,14 @@ export const CountCell = ({ value, icon, iconProps }: CountCellProps): JSX.Eleme ) } -interface TextCellProps { +interface TextCellProps extends TextProps { value: string | undefined } -export const TextCell = ({ value }: TextCellProps): JSX.Element => { +export const TextCell = ({ value, ...rest }: TextCellProps): JSX.Element => { const { getString } = useStrings() return ( - + {defaultTo(value, getString('na'))} ) diff --git a/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionArtifactDetailsPage.tsx b/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionArtifactDetailsPage.tsx index ba776a299..b63940845 100644 --- a/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionArtifactDetailsPage.tsx +++ b/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionArtifactDetailsPage.tsx @@ -21,7 +21,7 @@ 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 VersionDependencyListProvider from '@ar/pages/version-details/context/VersionDependencyListProvider' +import VersionOverviewProvider from '@ar/pages/version-details/context/VersionOverviewProvider' import NpmVersionFilesContent from './NpmVersionFilesContent' import NpmVersionReadmeContent from './NpmVersionReadmeContent' @@ -42,38 +42,36 @@ export default function NpmVersionArtifactDetailsPage() { ) return ( - - - } - title={getString('versionDetails.artifactDetails.tabs.readme')} - /> - - - - } - title={getString('versionDetails.artifactDetails.tabs.files')} - /> - - - - } - title={getString('versionDetails.artifactDetails.tabs.dependencies')} - /> - - + + + + } + title={getString('versionDetails.artifactDetails.tabs.readme')} + /> + + + + } + title={getString('versionDetails.artifactDetails.tabs.files')} + /> + } + title={getString('versionDetails.artifactDetails.tabs.dependencies')} + /> + + + ) } diff --git a/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionDependencyContent.tsx b/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionDependencyContent.tsx index 931d0c89a..0c34e3746 100644 --- a/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionDependencyContent.tsx +++ b/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionDependencyContent.tsx @@ -14,22 +14,23 @@ * limitations under the License. */ -import React, { useContext } from 'react' +import React from 'react' -import { DEFAULT_PAGE_INDEX } from '@ar/constants' -import { VersionDependencyListContext } from '@ar/pages/version-details/context/VersionDependencyListProvider' +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 { NpmVersionDetailsConfig } from '../../types' + export default function NpmVersionDependencyContent() { - const { data, updateQueryParams, sort } = useContext(VersionDependencyListContext) - return ( - updateQueryParams({ page: pageNumber })} - setSortBy={sortArr => { - updateQueryParams({ sort: sortArr, page: DEFAULT_PAGE_INDEX }) - }} - sortBy={sort} - /> - ) + const { data } = useVersionOverview() + const versionMetatdata = data.metadata?.versions?.[data.version] + const dependencies = versionMetatdata?.dependencies || {} + + const dependencyList: IDependencyList = Object.entries(dependencies).map(([key, value]) => ({ + name: key, + version: value as string + })) + + return } diff --git a/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionReadmeContent.tsx b/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionReadmeContent.tsx index 1e2cf5d95..5b71616ac 100644 --- a/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionReadmeContent.tsx +++ b/web/src/ar/pages/version-details/NpmVersion/pages/artifact-dertails/NpmVersionReadmeContent.tsx @@ -16,13 +16,21 @@ import React from 'react' import { Container } from '@harnessio/uicore' + +import { useStrings } from '@ar/frameworks/strings' +import { useVersionOverview } from '@ar/pages/version-details/context/VersionOverviewProvider' import ReadmeFileContent from '@ar/pages/version-details/components/ReadmeFileContent/ReadmeFileContent' -import { MOCK_README_CONTENT } from './mockData' + +import type { NpmVersionDetailsConfig } from '../../types' export default function NpmVersionReadmeContent() { + const { data } = useVersionOverview() + const versionMetatdata = data.metadata?.versions?.[data.version] + + const { getString } = useStrings() return ( - + ) } diff --git a/web/src/ar/pages/version-details/NpmVersion/pages/overview/NpmVersionGeneralInfo.tsx b/web/src/ar/pages/version-details/NpmVersion/pages/overview/NpmVersionGeneralInfo.tsx index b061a2822..439f31731 100644 --- a/web/src/ar/pages/version-details/NpmVersion/pages/overview/NpmVersionGeneralInfo.tsx +++ b/web/src/ar/pages/version-details/NpmVersion/pages/overview/NpmVersionGeneralInfo.tsx @@ -14,19 +14,19 @@ * limitations under the License. */ -import React, { useContext } from 'react' +import React from 'react' import { defaultTo } from 'lodash-es' import { FontVariation } from '@harnessio/design-system' import { Card, Container, Layout, Text } from '@harnessio/uicore' -import type { ArtifactDetail, NpmArtifactDetailConfig } from '@harnessio/react-har-service-client' 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 { VersionOverviewContext } from '@ar/pages/version-details/context/VersionOverviewProvider' +import { useVersionOverview } from '@ar/pages/version-details/context/VersionOverviewProvider' import { LabelValueContent } from '@ar/pages/version-details/components/LabelValueContent/LabelValueContent' +import type { NpmVersionDetailsConfig } from '../../types' import css from './overview.module.scss' interface NpmVersionGeneralInfoProps { @@ -35,8 +35,8 @@ interface NpmVersionGeneralInfoProps { export default function NpmVersionGeneralInfo(props: NpmVersionGeneralInfoProps) { const { className } = props - const contextValue = useContext(VersionOverviewContext) - const data = contextValue.data as ArtifactDetail & NpmArtifactDetailConfig + const { data } = useVersionOverview() + const versionMetatdata = data.metadata?.versions?.[data.version] const { getString } = useStrings() return ( - - - + {versionMetatdata?.repository && ( + + )} + {versionMetatdata?.homepage && ( + + )} + {versionMetatdata?.license && ( + + )} - + {data.metadata?.pullCommand && ( + + )} diff --git a/web/src/ar/pages/version-details/NpmVersion/types.ts b/web/src/ar/pages/version-details/NpmVersion/types.ts index 7af99b070..02b2dacf9 100644 --- a/web/src/ar/pages/version-details/NpmVersion/types.ts +++ b/web/src/ar/pages/version-details/NpmVersion/types.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import type { ArtifactDetail, NpmArtifactDetailConfig } from '@harnessio/react-har-service-client' import type { VersionDetailsQueryParams } from '../types' export enum NpmArtifactDetailsTabEnum { @@ -21,7 +22,10 @@ export enum NpmArtifactDetailsTabEnum { Files = 'files', Dependencies = 'dependencies' } + export interface NpmVersionDetailsQueryParams extends VersionDetailsQueryParams { detailsTab: NpmArtifactDetailsTabEnum digest: string } + +export type NpmVersionDetailsConfig = ArtifactDetail & NpmArtifactDetailConfig diff --git a/web/src/ar/pages/version-details/NuGetVersion/pages/artifact-dertails/NuGetVersionDependencyContent.tsx b/web/src/ar/pages/version-details/NuGetVersion/pages/artifact-dertails/NuGetVersionDependencyContent.tsx index 041b1cb6e..690785fb5 100644 --- a/web/src/ar/pages/version-details/NuGetVersion/pages/artifact-dertails/NuGetVersionDependencyContent.tsx +++ b/web/src/ar/pages/version-details/NuGetVersion/pages/artifact-dertails/NuGetVersionDependencyContent.tsx @@ -14,22 +14,11 @@ * limitations under the License. */ -import React, { useContext } from 'react' +import React from 'react' -import { DEFAULT_PAGE_INDEX } from '@ar/constants' -import { VersionDependencyListContext } from '@ar/pages/version-details/context/VersionDependencyListProvider' import ArtifactDependencyListTable from '@ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable' export default function NuGetVersionDependencyContent() { - const { data, updateQueryParams, sort } = useContext(VersionDependencyListContext) - return ( - updateQueryParams({ page: pageNumber })} - setSortBy={sortArr => { - updateQueryParams({ sort: sortArr, page: DEFAULT_PAGE_INDEX }) - }} - sortBy={sort} - /> - ) + // TODO: Implement NuGetVersionDependencyContent + return } diff --git a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.module.scss b/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.module.scss deleted file mode 100644 index 358850db9..000000000 --- a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -/* - * 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. - */ - -.table { - --typography-size: 12px; - --typography-weight: 400; - --line-height: 20px; - padding: var(--spacing-large); - - [role='cell'], - [role='columnheader'] { - width: auto !important; - padding-right: var(--spacing-large); - } - - div[class*='TableV2--cells'], - div[class*='TableV2--header'] { - display: grid !important; - width: 100%; /* Ensure the container doesn't exceed 100% width */ - grid-template-columns: 1fr max-content; - } -} diff --git a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.tsx b/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.tsx index 6f2512330..5a6b2b1b2 100644 --- a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.tsx +++ b/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.tsx @@ -15,82 +15,40 @@ */ import React from 'react' -import classNames from 'classnames' import type { Column } from 'react-table' -import { type PaginationProps, TableV2 } from '@harnessio/uicore' -import type { FileDetail, FileDetailResponseResponse } from '@harnessio/react-har-service-client' +import { TableV2 } from '@harnessio/uicore' -import { useParentHooks } from '@ar/hooks' import { useStrings } from '@ar/frameworks/strings' + +import type { IDependencyItem, IDependencyList } from './types' import { DependencyNameCell, DependencyVersionCell } from './ArtifactDependencyListTableCells' -import css from './ArtifactDependencyListTable.module.scss' - -export interface DependencyListSortBy { - sort: 'name' | 'size' | 'created' -} - interface ArtifactDependencyListTableProps { - data: FileDetailResponseResponse - gotoPage: (pageNumber: number) => void - onPageSizeChange?: PaginationProps['onPageSizeChange'] - setSortBy: (sortBy: string[]) => void - sortBy: string[] + data: IDependencyList minimal?: boolean className?: string } export default function ArtifactDependencyListTable(props: ArtifactDependencyListTableProps): JSX.Element { - const { data, gotoPage, onPageSizeChange, sortBy, setSortBy, className } = props - const { useDefaultPaginationProps } = useParentHooks() + const { data, className } = props const { getString } = useStrings() - const { files, itemCount = 0, pageCount = 0, pageIndex, pageSize = 0 } = data - const paginationProps = useDefaultPaginationProps({ - itemCount, - pageSize, - pageCount, - pageIndex, - gotoPage, - onPageSizeChange - }) - - const [currentSort, currentOrder] = sortBy - - const columns: Column[] = React.useMemo(() => { - const getServerSortProps = (id: string) => { - return { - enableServerSort: true, - isServerSorted: currentSort === id, - isServerSortedDesc: currentOrder === 'DESC', - getSortedColumn: ({ sort }: DependencyListSortBy) => { - setSortBy([sort, currentOrder === 'DESC' ? 'ASC' : 'DESC']) - } - } - } + const columns: Column[] = React.useMemo(() => { return [ { Header: getString('versionDetails.dependencyList.table.columns.name'), accessor: 'name', Cell: DependencyNameCell, - serverSortProps: getServerSortProps('name') + width: '100%' }, { Header: getString('versionDetails.dependencyList.table.columns.version'), accessor: 'version', Cell: DependencyVersionCell, - serverSortProps: getServerSortProps('version') + width: '20%' } - ].filter(Boolean) as unknown as Column[] - }, [currentOrder, currentSort, getString]) + ].filter(Boolean) as unknown as Column[] + }, [getString]) - return ( - - ) + return } diff --git a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTableCells.tsx b/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTableCells.tsx index c537a2230..1cdd255c4 100644 --- a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTableCells.tsx +++ b/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTableCells.tsx @@ -15,6 +15,7 @@ */ import React from 'react' +import { FontVariation } from '@harnessio/design-system' import type { FileDetail } from '@harnessio/react-har-service-client' import type { Cell, CellValue, ColumnInstance, Renderer, Row, TableInstance } from 'react-table' @@ -30,9 +31,9 @@ type CellTypeWithActions, V = any> = TableInstance type CellType = Renderer> export const DependencyNameCell: CellType = ({ value }) => { - return + return } export const DependencyVersionCell: CellType = ({ value }) => { - return + return } diff --git a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.module.scss.d.ts b/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/types.ts similarity index 72% rename from web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.module.scss.d.ts rename to web/src/ar/pages/version-details/components/ArtifactDependencyListTable/types.ts index 0099ad648..b133c594e 100644 --- a/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/ArtifactDependencyListTable.module.scss.d.ts +++ b/web/src/ar/pages/version-details/components/ArtifactDependencyListTable/types.ts @@ -1,11 +1,11 @@ /* - * Copyright 2023 Harness, Inc. + * 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 + * 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, @@ -14,6 +14,8 @@ * limitations under the License. */ -/* eslint-disable */ -// This is an auto-generated file -export declare const table: string +export type IDependencyItem = { + name: string + version: string +} +export type IDependencyList = IDependencyItem[] diff --git a/web/src/ar/strings/strings.en.yaml b/web/src/ar/strings/strings.en.yaml index f6d5466d5..4409b746b 100644 --- a/web/src/ar/strings/strings.en.yaml +++ b/web/src/ar/strings/strings.en.yaml @@ -40,6 +40,7 @@ plusNewName: + New {{name}} enterPlaceholder: Enter {{name}} descriptionPlaceholder: Enter Description noDescription: No Description +noReadme: No Readme lastUpdated: Last Updated createdAt: Created At modifiedAt: Modified At diff --git a/web/src/ar/strings/types.ts b/web/src/ar/strings/types.ts index bfe8dc88c..6dc2b3100 100644 --- a/web/src/ar/strings/types.ts +++ b/web/src/ar/strings/types.ts @@ -348,6 +348,7 @@ export interface StringsMap { new: string noDescription: string noMatchingFilterData: string + noReadme: string noResultsFound: string nonProd: string nonProdCount: string