feat: [CDE-528]: Enhancing UI changes for Gitspace listing and detail screen (#3049)

* Svg changes * Reverted hasFilter changes * UI changes for Gitspace listing and detail screen
2025-05-20 19:09:59 +08:00 · 2024-11-28 11:07:41 +00:00 · 2024-11-28 11:07:41 +00:00 · da92c1e708
commit da92c1e708
parent a89041e57e
6 changed files with 77 additions and 23 deletions
--- a/web/src/cde-gitness/components/DetailsCard/DetailsCard.tsx
+++ b/web/src/cde-gitness/components/DetailsCard/DetailsCard.tsx
@ -36,7 +36,7 @@ export const DetailsCard = ({
  loading?: boolean
 }) => {
  const { getString } = useStrings()
-  const { branch, state, name, branch_url, code_repo_type, instance, resource } = data || {}
+  const { branch, state, name, branch_url, code_repo_url, code_repo_type, instance, resource } = data || {}
  const { has_git_changes } = instance || {}
  const gitChanges = getGitspaceChanges(has_git_changes, getString, '--')
  const color = getStatusColor(state)
@ -83,7 +83,7 @@ export const DetailsCard = ({
              margin={{ left: 'small' }}
              style={{ cursor: 'pointer' }}
              font={{ align: 'left', size: 'normal' }}
-              onClick={() => window.open(branch_url, '_blank')}>
+              onClick={() => window.open(code_repo_url, '_blank')}>
              {name}
            </Text>
          </Layout.Horizontal>
--- a/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx
+++ b/web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx
@ -164,7 +164,7 @@ export const OwnerAndCreatedAt: Renderer<CellProps<TypesGitspaceConfig>> = ({ ro

 export const RenderRepository: Renderer<CellProps<TypesGitspaceConfig>> = ({ row }) => {
  const details = row.original
-  const { name, branch, branch_url, code_repo_type, instance } = details || {}
+  const { name, branch, branch_url, code_repo_type, code_repo_url, instance } = details || {}
  const { has_git_changes } = instance || {}

  const { getString } = useStrings()
@ -172,18 +172,16 @@ export const RenderRepository: Renderer<CellProps<TypesGitspaceConfig>> = ({ row

  return (
    <Layout.Vertical spacing="small">
-      <Layout.Horizontal
-        spacing={'small'}
-        flex={{ alignItems: 'center', justifyContent: 'start' }}
-        onClick={e => {
-          e.preventDefault()
-          e.stopPropagation()
-          window.open(branch_url, '_blank')
-        }}>
+      <Layout.Horizontal spacing={'small'} flex={{ alignItems: 'center', justifyContent: 'start' }}>
        <Layout.Horizontal
          className={css.repositoryCell}
          spacing={'small'}
-          flex={{ alignItems: 'center', justifyContent: 'start' }}>
+          flex={{ alignItems: 'center', justifyContent: 'start' }}
+          onClick={e => {
+            e.preventDefault()
+            e.stopPropagation()
+            window.open(code_repo_url, '_blank')
+          }}>
          <Container height={24} width={24}>
            {getIconByRepoType({ repoType: code_repo_type, height: 24 })}
          </Container>
@ -194,7 +192,12 @@ export const RenderRepository: Renderer<CellProps<TypesGitspaceConfig>> = ({ row
        <Layout.Horizontal
          className={css.branchCell}
          spacing={'small'}
-          flex={{ alignItems: 'center', justifyContent: 'start' }}>
+          flex={{ alignItems: 'center', justifyContent: 'start' }}
+          onClick={e => {
+            e.preventDefault()
+            e.stopPropagation()
+            window.open(branch_url, '_blank')
+          }}>
          <Text color={Color.PRIMARY_7}>:</Text>
          <Text
            lineClamp={1}
--- a/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx
+++ b/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx
@ -25,7 +25,7 @@ import {
  Layout,
  Text
 } from '@harnessio/uicore'
-import { FontVariation } from '@harnessio/design-system'
+import { Color, FontVariation } from '@harnessio/design-system'
 import { useHistory } from 'react-router-dom'
 import { useAppContext } from 'AppContext'
 import { useStrings } from 'framework/strings'
@ -40,11 +40,12 @@ import UsageMetrics from 'cde-gitness/components/UsageMetrics/UsageMetrics'

 import StatusDropdown from 'cde-gitness/components/StatusDropdown/StatusDropdown'
 import GitspaceOwnerDropdown from 'cde-gitness/components/GitspaceOwnerDropdown/GitspaceOwnerDropdown'
-import { GitspaceOwnerType, GitspaceStatus } from 'cde-gitness/constants'
+import { docLink, GitspaceOwnerType, GitspaceStatus, SortByType } from 'cde-gitness/constants'

 import SortByDropdown from 'cde-gitness/components/SortByDropdown/SortByDropdown'
 import type { EnumGitspaceSort } from 'services/cde'
 import { useLisitngApi } from '../../hooks/useLisitngApi'
+import GraduationHat from '../../../images/graduation-hat.svg?url'
 import zeroDayCss from 'cde-gitness/components/CDEHomePage/CDEHomePage.module.scss'
 import css from './GitspacesListing.module.scss'

@ -91,11 +92,11 @@ const GitspaceListing = () => {
  }
  const [pageConfig, setPageConfig] = useState(pageInit)
  const [filter, setFilter] = useState(filterInit)
-
-  const sortInit: sortProps = { sort: (pageBrowser.sort as EnumGitspaceSort) ?? '', order: 'desc' }
-  const [sortConfig, setSortConfig] = useState(sortInit)
  const [hasFilter, setHasFilter] = useState(!!(pageBrowser.gitspace_states || pageBrowser.gitspace_owner))

+  const sortInit: sortProps = { sort: (pageBrowser.sort as EnumGitspaceSort) ?? SortByType.LAST_USED, order: 'desc' }
+  const [sortConfig, setSortConfig] = useState(sortInit)
+
  const {
    data = '',
    loading = false,
@ -151,14 +152,36 @@ const GitspaceListing = () => {
      {((data && data?.length !== 0) || hasFilter) && (
        <>
          <Page.Header
+            className={standalone ? '' : css.pageHeaderStyles}
            title={
-              <div className="ng-tooltip-native">
-                <h2> {getString('cde.manageGitspaces')}</h2>
-                <HarnessDocTooltip tooltipId="GitSpaceListPageHeading" useStandAlone={true} />
-              </div>
+              <Layout.Vertical spacing="none">
+                <div className="ng-tooltip-native">
+                  <h2> {getString('cde.manageGitspaces')}</h2>
+                  <HarnessDocTooltip tooltipId="GitSpaceListPageHeading" useStandAlone={true} />
+                </div>
+                {!standalone ? (
+                  <Text
+                    font="small"
+                    icon={<img src={GraduationHat} height={16} width={16} className={css.svgStyle} />}
+                    color={Color.PRIMARY_7}
+                    onClick={e => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      window.open(docLink, '_blank')
+                    }}
+                    className={css.linkButton}>
+                    {getString('cde.homePage.learnMoreAboutGitspaces')}
+                  </Text>
+                ) : (
+                  <></>
+                )}
+              </Layout.Vertical>
            }
            breadcrumbs={
-              <Breadcrumbs links={[{ url: routes.toCDEGitspaces({ space }), label: getString('cde.gitspaces') }]} />
+              <Breadcrumbs
+                className={standalone ? '' : css.breadcrumbs}
+                links={[{ url: routes.toCDEGitspaces({ space }), label: getString('cde.gitspaces') }]}
+              />
            }
            toolbar={
              standalone ? (
--- a/web/src/cde-gitness/pages/GitspaceListing/GitspacesListing.module.scss
+++ b/web/src/cde-gitness/pages/GitspaceListing/GitspacesListing.module.scss
@ -27,3 +27,24 @@
  font-weight: bold !important;
  color: black !important;
 }
+
+.linkButton {
+  cursor: pointer;
+  font-size: var(--font-size-small) !important;
+  padding-top: var(--spacing-xsmall) !important;
+  font-family: var(--font-family) !important;
+  font-weight: 500 !important;
+  line-height: var(--font-size-medium) !important;
+}
+
+.svgStyle {
+  margin-right: var(--spacing-xsmall) !important;
+}
+
+.pageHeaderStyles {
+  height: 104px !important;
+}
+
+.breadcrumbs {
+  margin-bottom: var(--spacing-xsmall) !important;
+}
--- a/web/src/cde-gitness/pages/GitspaceListing/GitspacesListing.module.scss.d.ts
+++ b/web/src/cde-gitness/pages/GitspaceListing/GitspacesListing.module.scss.d.ts
@ -16,6 +16,10 @@

 /* eslint-disable */
 // This is an auto-generated file
+export declare const breadcrumbs: string
+export declare const linkButton: string
 export declare const main: string
+export declare const pageHeaderStyles: string
 export declare const sortOrder: string
+export declare const svgStyle: string
 export declare const totalItems: string
--- a/web/src/images/graduation-hat.svg
+++ b/web/src/images/graduation-hat.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33301 6.66655V10.674C3.33301 10.9133 3.33301 11.0329 3.36944 11.1386C3.40167 11.232 3.45425 11.3171 3.5234 11.3877C3.60158 11.4675 3.70861 11.521 3.92265 11.628L7.52265 13.428C7.69755 13.5155 7.78501 13.5592 7.87674 13.5764C7.95799 13.5917 8.04136 13.5917 8.12261 13.5764C8.21434 13.5592 8.3018 13.5155 8.4767 13.428L12.0767 11.628C12.2907 11.521 12.3978 11.4675 12.476 11.3877C12.5451 11.3171 12.5977 11.232 12.6299 11.1386C12.6663 11.0329 12.6663 10.9133 12.6663 10.674V6.66655M1.33301 5.66655L7.76116 2.45247C7.84862 2.40874 7.89234 2.38688 7.93821 2.37827C7.97883 2.37065 8.02052 2.37065 8.06114 2.37827C8.10701 2.38688 8.15073 2.40874 8.23819 2.45247L14.6663 5.66655L8.23819 8.88062C8.15073 8.92435 8.10701 8.94621 8.06114 8.95482C8.02052 8.96244 7.97883 8.96244 7.93821 8.95482C7.89234 8.94621 7.84862 8.92435 7.76116 8.88062L1.33301 5.66655Z" stroke="#0278D5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>