feat: [AH-799]: Support generic artifact version details page for OSS (#3198)

* feat: [AH-799]: Support generic artifact version for OSS

web/src/ar/pages/version-details/GenericVersion/GenericVersionType.tsx

@@ -27,6 +27,7 @@ import GenericVersionHeader from './GenericVersionHeader'
 import GenericOverviewPage from './pages/overview/OverviewPage'
 import GenericArtifactDetailsPage from './pages/artifact-details/GenericArtifactDetailsPage'
 import GenericArtifactDeploymentsPage from './pages/deployments/GenericArtifactDeploymentsPage'
+import OSSContentPage from './pages/oss-details/OSSContentPage'
 
 export class GenericVersionType extends VersionStep<ArtifactVersionSummary> {
   protected packageType = RepositoryPackageType.GENERIC
@@ -54,7 +55,7 @@ export class GenericVersionType extends VersionStep<ArtifactVersionSummary> {
       case VersionDetailsTab.DEPLOYMENTS:
         return <GenericArtifactDeploymentsPage />
       case VersionDetailsTab.OSS:
-        return <></>
+        return <OSSContentPage />
       default:
         return <String stringID="tabNotFound" />
     }

web/src/ar/pages/version-details/GenericVersion/pages/oss-details/OSSArtifactDetailsContent.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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, Text } from '@harnessio/uicore'
+import { FontVariation } from '@harnessio/design-system'
+
+import { useStrings } from '@ar/frameworks/strings'
+import GenericArtifactDetailsPage from '../artifact-details/GenericArtifactDetailsPage'
+
+export default function OSSArtifactDetailsContent() {
+  const { getString } = useStrings()
+  return (
+    <Container>
+      <Text padding="large" font={{ variation: FontVariation.CARD_TITLE }}>
+        {getString('versionDetails.tabs.artifactDetails')}
+      </Text>
+      <GenericArtifactDetailsPage />
+    </Container>
+  )
+}

web/src/ar/pages/version-details/GenericVersion/pages/oss-details/OSSContentPage.tsx

@@ -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 React from 'react'
+import { Layout } from '@harnessio/uicore'
+import OSSGeneralInfoContent from './OSSGeneralInfoContent'
+import OSSArtifactDetailsContent from './OSSArtifactDetailsContent'
+
+export default function OSSContentPage() {
+  return (
+    <Layout.Vertical spacing="large">
+      <OSSGeneralInfoContent />
+      <OSSArtifactDetailsContent />
+    </Layout.Vertical>
+  )
+}

web/src/ar/pages/version-details/GenericVersion/pages/oss-details/OSSGeneralInfoContent.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 { Page } from '@harnessio/uicore'
+import { useGetArtifactDetailsQuery } from '@harnessio/react-har-service-client'
+
+import { useDecodedParams, useGetSpaceRef } from '@ar/hooks'
+import type { VersionDetailsPathParams } from '@ar/routes/types'
+
+import type { GenericArtifactDetails } from '../../types'
+import GeneralInformationCard from '../overview/GeneralInformationCard'
+
+import css from './ossDetails.module.scss'
+
+export default function OSSGeneralInfoContent() {
+  const pathParams = useDecodedParams<VersionDetailsPathParams>()
+  const spaceRef = useGetSpaceRef()
+  const {
+    data,
+    isFetching: loading,
+    error,
+    refetch
+  } = useGetArtifactDetailsQuery(
+    {
+      registry_ref: spaceRef,
+      artifact: pathParams.artifactIdentifier,
+      version: pathParams.versionIdentifier,
+      queryParams: {}
+    },
+    {
+      enabled: false
+    }
+  )
+
+  const response = data?.content?.data as GenericArtifactDetails
+
+  return (
+    <Page.Body
+      className={css.pageBody}
+      loading={loading}
+      error={error?.message || error}
+      retryOnError={() => refetch()}>
+      {response && <GeneralInformationCard className={css.cardContainer} data={response} />}
+    </Page.Body>
+  )
+}

web/src/ar/pages/version-details/GenericVersion/pages/oss-details/ossDetails.module.scss

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+.pageBody {
+  height: auto;
+  min-height: 250px;
+  width: 100%;
+  padding: var(--spacing-large) !important;
+}
+
+.cardContainer {
+  width: 100% !important;
+  padding: var(--spacing-7) !important;
+  background-color: var(--white);
+}

web/src/ar/pages/version-details/GenericVersion/pages/oss-details/ossDetails.module.scss.d.ts

@@ -0,0 +1,20 @@
+/*
+ * 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
+export declare const pageBody: string

web/src/ar/pages/version-details/GenericVersion/pages/overview/GeneralInformationCard.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 { LabelValueContent } from '@ar/pages/version-details/components/LabelValueContent/LabelValueContent'
+
+import type { GenericArtifactDetails } from '../../types'
+
+import css from './styles.module.scss'
+
+interface GeneralInformationCardProps {
+  data: GenericArtifactDetails
+  className?: string
+}
+
+export default function GeneralInformationCard(props: GeneralInformationCardProps) {
+  const { data, className } = props
+  const { getString } = useStrings()
+  return (
+    <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>
+        <Container className={css.gridContainer}>
+          <LabelValueContent
+            label={getString('versionDetails.overview.generalInformation.name')}
+            value={data.name}
+            withCopyText
+          />
+          <LabelValueContent
+            label={getString('versionDetails.overview.generalInformation.version')}
+            value={data.version}
+            withCopyText
+          />
+          <Text font={{ variation: FontVariation.SMALL_BOLD }}>
+            {getString('versionDetails.overview.generalInformation.packageType')}
+          </Text>
+          <Text icon="generic-repository-type" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}>
+            {getString('packageTypes.genericPackage')}
+          </Text>
+          <LabelValueContent
+            label={getString('versionDetails.overview.generalInformation.uploadedBy')}
+            value={getReadableDateTime(Number(data.modifiedAt), DEFAULT_DATE_TIME_FORMAT)}
+          />
+          <LabelValueContent
+            label={getString('versionDetails.overview.generalInformation.description')}
+            value={defaultTo(data.description, getString('na'))}
+          />
+        </Container>
+      </Layout.Vertical>
+    </Card>
+  )
+}

web/src/ar/pages/version-details/GenericVersion/pages/overview/OverviewPage.tsx

@@ -15,27 +15,20 @@
  */
 
 import React from 'react'
-import { defaultTo } from 'lodash-es'
-import { FontVariation } from '@harnessio/design-system'
-import { Card, Container, Layout, Page, Text } from '@harnessio/uicore'
+import { Layout, Page } from '@harnessio/uicore'
 import { useGetArtifactDetailsQuery } 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 type { VersionDetailsPathParams } from '@ar/routes/types'
 import { useDecodedParams, useGetSpaceRef } from '@ar/hooks'
+import type { VersionDetailsPathParams } from '@ar/routes/types'
 import { VersionOverviewCard } from '@ar/pages/version-details/components/OverviewCards/types'
 import VersionOverviewCards from '@ar/pages/version-details/components/OverviewCards/OverviewCards'
-import { LabelValueContent } from '@ar/pages/version-details/components/LabelValueContent/LabelValueContent'
 
 import type { GenericArtifactDetails } from '../../types'
+import GeneralInformationCard from './GeneralInformationCard'
 
-import css from './styles.module.scss'
 import genericStyles from '../../styles.module.scss'
 
 export default function GenericOverviewPage() {
-  const { getString } = useStrings()
   const pathParams = useDecodedParams<VersionDetailsPathParams>()
   const spaceRef = useGetSpaceRef()
 
@@ -62,39 +55,7 @@ export default function GenericOverviewPage() {
       {response && (
         <Layout.Vertical className={genericStyles.cardContainer} spacing="medium">
           <VersionOverviewCards cards={[VersionOverviewCard.DEPLOYMENT, VersionOverviewCard.BUILD]} />
-          <Card title={getString('versionDetails.overview.generalInformation.title')}>
-            <Layout.Vertical spacing="medium">
-              <Text font={{ variation: FontVariation.CARD_TITLE }}>
-                {getString('versionDetails.overview.generalInformation.title')}
-              </Text>
-              <Container className={css.gridContainer}>
-                <LabelValueContent
-                  label={getString('versionDetails.overview.generalInformation.name')}
-                  value={response.name}
-                  withCopyText
-                />
-                <LabelValueContent
-                  label={getString('versionDetails.overview.generalInformation.version')}
-                  value={response.version}
-                  withCopyText
-                />
-                <Text font={{ variation: FontVariation.SMALL_BOLD }}>
-                  {getString('versionDetails.overview.generalInformation.packageType')}
-                </Text>
-                <Text icon="generic-repository-type" iconProps={{ size: 16 }} font={{ variation: FontVariation.SMALL }}>
-                  {getString('packageTypes.genericPackage')}
-                </Text>
-                <LabelValueContent
-                  label={getString('versionDetails.overview.generalInformation.uploadedBy')}
-                  value={getReadableDateTime(Number(response.modifiedAt), DEFAULT_DATE_TIME_FORMAT)}
-                />
-                <LabelValueContent
-                  label={getString('versionDetails.overview.generalInformation.description')}
-                  value={defaultTo(response.description, getString('na'))}
-                />
-              </Container>
-            </Layout.Vertical>
-          </Card>
+          <GeneralInformationCard data={response} />
         </Layout.Vertical>
       )}
     </Page.Body>