Repository: harness/canary
Pull request #1458: feat: [pipe-26591]: add connector details ref list page
Author: login: cjlee01
Created: 2025-04-11T00:07:04Z | Merged: 2025-04-12T07:17:45Z

add connector details ref list page
https://github.com/harness/canary/pull/1458/files


Diff:
diff --git a/apps/design-system/src/subjects/views/connectors/connector-details.tsx b/apps/design-system/src/subjects/views/connectors/connector-details.tsx
index 26ed12491a..980df34caf 100644
--- a/apps/design-system/src/subjects/views/connectors/connector-details.tsx
+++ b/apps/design-system/src/subjects/views/connectors/connector-details.tsx
@@ -19,6 +19,7 @@ import {
 } from '@harnessio/ui/views'
 
 import mockConnectorDetails from './mock-connector-details.json'
+import { mockConnectorRefList } from './mock-connector-ref-list'
 
 const inputComponentFactory = new InputFactory()
 inputComponentFactory.registerComponent(new TextInput())
@@ -34,6 +35,15 @@ inputComponentFactory.registerComponent(new RadialInput())
 
 const ConnectorsDetailsPageWrapper = (): JSX.Element => (
   <ConnectorDetailsPage
+    searchQuery=""
+    toEntity={noop}
+    toScope={noop}
+    entities={mockConnectorRefList}
+    isConnectorReferencesLoading={false}
+    setIsConnectorRefSearchQuery={noop}
+    currentPage={1}
+    totalPages={1}
+    goToPage={noop}
     connectorDetails={
       {
         name: mockConnectorDetails.connector.name,
diff --git a/apps/design-system/src/subjects/views/connectors/mock-connector-ref-list.ts b/apps/design-system/src/subjects/views/connectors/mock-connector-ref-list.ts
new file mode 100644
index 0000000000..1bd06e4d9e
--- /dev/null
+++ b/apps/design-system/src/subjects/views/connectors/mock-connector-ref-list.ts
@@ -0,0 +1,339 @@
+import { ConnectorReferenceList } from '@harnessio/ui/views'
+
+export const mockConnectorRefList = {
+  content: [
+    {
+      accountIdentifier: 'account123456789',
+      referredEntity: {
+        type: 'Connectors',
+        entityRef: {
+          scope: 'org',
+          identifier: 'connector-id-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: null,
+          parentUniqueId: 'parent-unique-id-1',
+          metadata: {
+            fqn: 'pipeline.stages.test.spec.execution.steps.Run_1.spec.connectorRef'
+          },
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default'
+        },
+        name: '',
+        entityGitMetadata: null
+      },
+      referredByEntity: {
+        type: 'Pipelines',
+        entityRef: {
+          scope: 'project',
+          identifier: 'project-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: 'project-demo-1',
+          parentUniqueId: 'parent-pipeline-id-1',
+          metadata: {},
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default/project-demo-1'
+        },
+        name: 'project-1',
+        entityGitMetadata: null
+      },
+      detail: {
+        type: 'EntityReferredByPipelineSetupUsageDetail',
+        identifier: 'test',
+        referenceType: 'STAGE_IDENTIFIER'
+      },
+      createdAt: 1600000000000
+    },
+    {
+      accountIdentifier: 'account123456789',
+      referredEntity: {
+        type: 'Connectors',
+        entityRef: {
+          scope: 'org',
+          identifier: 'connector-id-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: null,
+          parentUniqueId: 'parent-unique-id-1',
+          metadata: {
+            fqn: 'pipeline.stages.CustomCDK.spec.execution.steps.Cdk_Step_Group.steps.Background_1.spec.connectorRef'
+          },
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default'
+        },
+        name: '',
+        entityGitMetadata: null
+      },
+      referredByEntity: {
+        type: 'Pipelines',
+        entityRef: {
+          scope: 'project',
+          identifier: 'project-2',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: 'project-demo-2',
+          parentUniqueId: 'parent-pipeline-id-2',
+          metadata: {},
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default/project-demo-2'
+        },
+        name: 'project-pipeline-2',
+        entityGitMetadata: null
+      },
+      detail: {
+        type: 'EntityReferredByPipelineSetupUsageDetail',
+        identifier: 'CustomCDK',
+        referenceType: 'STAGE_IDENTIFIER'
+      },
+      createdAt: 1600100000000
+    },
+    {
+      accountIdentifier: 'account123456789',
+      referredEntity: {
+        type: 'Connectors',
+        entityRef: {
+          scope: 'org',
+          identifier: 'connector-id-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: null,
+          parentUniqueId: 'parent-unique-id-1',
+          metadata: {
+            fqn: 'service.serviceDefinition.spec.artifacts.primary.sources.harness_idp_ui_gar.spec.connectorRef'
+          },
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default'
+        },
+        name: '',
+        entityGitMetadata: null
+      },
+      referredByEntity: {
+        type: 'Service',
+        entityRef: {
+          scope: 'project',
+          identifier: 'service-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: 'project-demo-3',
+          parentUniqueId: 'parent-service-id-1',
+          metadata: {},
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default/project-demo-3'
+        },
+        name: 'service-app',
+        entityGitMetadata: null
+      },
+      detail: null,
+      createdAt: 1600200000000
+    },
+    {
+      accountIdentifier: 'account123456789',
+      referredEntity: {
+        type: 'Connectors',
+        entityRef: {
+          scope: 'org',
+          identifier: 'connector-id-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: null,
+          parentUniqueId: 'parent-unique-id-1',
+          metadata: {
+            fqn: 'service.serviceDefinition.spec.artifacts.primary.sources.artifactId.spec.connectorRef'
+          },
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default'
+        },
+        name: '',
+        entityGitMetadata: null
+      },
+      referredByEntity: {
+        type: 'Service',
+        entityRef: {
+          scope: 'project',
+          identifier: 'service-2',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: 'project-demo-2',
+          parentUniqueId: 'parent-pipeline-id-2',
+          metadata: {},
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default/project-demo-2'
+        },
+        name: 'service-2',
+        entityGitMetadata: null
+      },
+      detail: null,
+      createdAt: 1600300000000
+    },
+    {
+      accountIdentifier: 'account123456789',
+      referredEntity: {
+        type: 'Connectors',
+        entityRef: {
+          scope: 'org',
+          identifier: 'connector-id-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: null,
+          parentUniqueId: 'parent-unique-id-1',
+          metadata: {
+            fqn: 'pipeline.stages.buildStg.spec.execution.steps.Run_1.spec.connectorRef'
+          },
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default'
+        },
+        name: '',
+        entityGitMetadata: null
+      },
+      referredByEntity: {
+        type: 'Pipelines',
+        entityRef: {
+          scope: 'project',
+          identifier: 'project-3',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: 'project-demo-2',
+          parentUniqueId: 'parent-pipeline-id-2',
+          metadata: {},
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default/project-demo-2'
+        },
+        name: 'test-nested-template',
+        entityGitMetadata: null
+      },
+      detail: {
+        type: 'EntityReferredByPipelineSetupUsageDetail',
+        identifier: 'buildStg',
+        referenceType: 'STAGE_IDENTIFIER'
+      },
+      createdAt: 1600400000000
+    },
+    {
+      accountIdentifier: 'account123456789',
+      referredEntity: {
+        type: 'Connectors',
+        entityRef: {
+          scope: 'org',
+          identifier: 'connector-id-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: null,
+          parentUniqueId: 'parent-unique-id-1',
+          metadata: {
+            fqn: 'templateInputs.spec.execution.steps.BuildAndPushGAR_1.spec.connectorRef'
+          },
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default'
+        },
+        name: '',
+        entityGitMetadata: null
+      },
+      referredByEntity: {
+        type: 'Template',
+        entityRef: {
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: 'project-demo-4',
+          parentUniqueId: 'parent-template-id-1',
+          identifier: 'template-1',
+          versionLabel: '1.0',
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          scope: 'project',
+          default: true,
+          metadata: {
+            versionLabel: '1.0'
+          }
+        },
+        name: 'build-machine-image',
+        entityGitMetadata: null
+      },
+      detail: null,
+      createdAt: 1600500000000
+    },
+    {
+      accountIdentifier: 'account123456789',
+      referredEntity: {
+        type: 'Connectors',
+        entityRef: {
+          scope: 'org',
+          identifier: 'connector-id-1',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: null,
+          parentUniqueId: 'parent-unique-id-1',
+          metadata: {
+            fqn: 'pipeline.stages.BuildLinuxx64.spec.execution.steps.BuildAndPushGAR_1.spec.connectorRef'
+          },
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default'
+        },
+        name: '',
+        entityGitMetadata: null
+      },
+      referredByEntity: {
+        type: 'Pipelines',
+        entityRef: {
+          scope: 'project',
+          identifier: 'project-4',
+          accountIdentifier: 'account123456789',
+          orgIdentifier: 'default',
+          projectIdentifier: 'project-demo-4',
+          parentUniqueId: 'parent-template-id-1',
+          metadata: {},
+          repoIdentifier: null,
+          branch: null,
+          isDefault: true,
+          default: true,
+          fullyQualifiedScopeIdentifier: 'account123456789/default/project-demo-4'
+        },
+        name: 'build-machines',
+        entityGitMetadata: null
+      },
+      detail: {
+        type: 'EntityReferredByPipelineSetupUsageDetail',
+        identifier: 'BuildLinux',
+        referenceType: 'STAGE_IDENTIFIER'
+      },
+      createdAt: 1600600000000
+    }
+  ]
+} as ConnectorReferenceList
diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
index b75f507e4b..4e941b8f0a 100644
--- a/packages/ui/locales/en/views.json
+++ b/packages/ui/locales/en/views.json
@@ -218,6 +218,8 @@
   },
   "noData": {
     "noResults": "No search results",
+    "noEntities": "No entities yet",
+    "noEntitiesDescription": "There are no entities yet. ",
     "errorApiTitle": "Failed to load {{type}}",
     "errorApiDescription": "An error occurred while loading the data. Please try again and reload the page.",
     "noConnectors": "No connectors yet",
@@ -260,8 +262,6 @@
     "createSecret": "Create new secret.",
     "noUsers": "No Users Found",
     "noUsersDescription": "There are no users in this scope. Click on the button below to start adding them.",
-    "noEntities": "No entities yet",
-    "noEntitiesDescription": "There are no entities yet. ",
     "noConnectorsProject": "There are no connectors in this project yet.",
     "noSecretsProject": "There are no secrets in this project yet.",
     "noTagsDescription": "Your tags will appear here once they're created. Start creating tags to see your work organized.",
diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
index 9433ca342c..869eb1ce52 100644
--- a/packages/ui/locales/fr/views.json
+++ b/packages/ui/locales/fr/views.json
@@ -194,6 +194,8 @@
   },
   "noData": {
     "noResults": "Aucun résultat de recherche",
+    "noEntities": "Aucune entité disponible",
+    "noEntitiesDescription": "Il n'y a pas d'entités disponibles.",
     "errorApiTitle": "Échec du chargement de {{type}}",
     "errorApiDescription": "Une erreur s'est produite lors du chargement des données. Veuillez réessayer et recharger la page.",
     "noConnectors": "Aucun connecteur pour le moment",
diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-header.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-header.tsx
index f8a256a1c6..221fad64f9 100644
--- a/packages/ui/src/views/connectors/connector-details/connector-details-header.tsx
+++ b/packages/ui/src/views/connectors/connector-details/connector-details-header.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 
 import { Badge, Button, MoreActionsTooltip } from '@/components'
-import { Logo } from '@components/logo'
+import { Logo, LogoName } from '@components/logo'
 import { Spacer } from '@components/spacer'
 import { timeAgo } from '@utils/utils'
 
@@ -19,7 +19,7 @@ const ConnectorDetailsHeader: FC<ConnectorDetailsHeaderProps> = ({
     <div className="px-8 py-5">
       <div className="flex size-full cursor-pointer flex-row gap-2 p-2">
         <div className="pt-1">
-          <Logo name={connectorDetails.icon} />
+          <Logo name={connectorDetails.type.toLowerCase() as LogoName} />
         </div>
         <h1 className="text-24 font-medium leading-snug tracking-tight text-cn-foreground-1">
           {connectorDetails.name}
diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-page.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-page.tsx
index c071f4e2ce..02e4c26c2a 100644
--- a/packages/ui/src/views/connectors/connector-details/connector-details-page.tsx
+++ b/packages/ui/src/views/connectors/connector-details/connector-details-page.tsx
@@ -7,6 +7,7 @@ import { cn } from '@utils/cn'
 
 import { ConnectorDetailsConfiguration } from './connector-details-configuration'
 import { ConnectorDetailsHeader } from './connector-details-header'
+import { ConnectorDetailsReferencePage } from './connector-details-references-page'
 import { ConnectorDetailsPageProps, ConnectorDetailsTabsKeys } from './types'
 
 const ConnectorDetailsPage: FC<ConnectorDetailsPageProps> = ({
@@ -17,7 +18,17 @@ const ConnectorDetailsPage: FC<ConnectorDetailsPageProps> = ({
   getConnectorDefinition,
   inputComponentFactory,
   onSave,
-  apiError
+  apiError,
+  apiConnectorRefError,
+  isConnectorReferencesLoading,
+  setIsConnectorRefSearchQuery,
+  currentPage,
+  totalPages,
+  goToPage,
+  entities,
+  toEntity,
+  toScope,
+  searchQuery
 }) => {
   const { t } = useTranslationStore()
   const { isInset } = useTheme()
@@ -81,7 +92,19 @@ const ConnectorDetailsPage: FC<ConnectorDetailsPageProps> = ({
             />
           </Tabs.Content>
           <Tabs.Content className="pt-7" value={ConnectorDetailsTabsKeys.REFERENCES}>
-            <div>References</div>
+            <ConnectorDetailsReferencePage
+              toEntity={toEntity}
+              toScope={toScope}
+              entities={entities}
+              searchQuery={searchQuery}
+              apiConnectorRefError={apiConnectorRefError}
+              useTranslationStore={useTranslationStore}
+              isLoading={isConnectorReferencesLoading}
+              setSearchQuery={setIsConnectorRefSearchQuery}
+              currentPage={currentPage}
+              totalPages={totalPages}
+              goToPage={goToPage}
+            />
           </Tabs.Content>
           <Tabs.Content className="pt-7" value={ConnectorDetailsTabsKeys.ACTIVITY}>
             <div>Activity History</div>
diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-references-list.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-references-list.tsx
new file mode 100644
index 0000000000..042f567d5c
--- /dev/null
+++ b/packages/ui/src/views/connectors/connector-details/connector-details-references-list.tsx
@@ -0,0 +1,92 @@
+import { NoData, SkeletonList, SkeletonTable, Table } from '@/components'
+import { timeAgo } from '@utils/utils'
+
+import { ConnectorReferenceItem, ConnectorReferenceListProps } from './types'
+
+const Title = ({ title }: { title: string }): JSX.Element => (
+  <span className="text-cn-foreground-1 max-w-full truncate text-sm font-medium leading-tight tracking-tight">
+    {title}
+  </span>
+)
+const Description = ({ description }: { description: string }): JSX.Element => (
+  <span className="text-12 text-cn-foreground-4 max-w-full truncate font-normal leading-none tracking-tight">
+    {description}
+  </span>
+)
+
+const ConnectorDetailsReferenceList = ({
+  entities,
+  useTranslationStore,
+  isLoading,
+  toEntity,
+  toScope
+}: ConnectorReferenceListProps): JSX.Element => {
+  const { t } = useTranslationStore()
+  const content = entities?.content
+  if (isLoading) {
+    return <SkeletonList />
+  }
+
+  if (!content.length) {
+    return (
+      <NoData
+        withBorder
+        className="min-h-[65vh]"
+        textWrapperClassName="max-w-[350px]"
+        iconName="no-data-cog"
+        title={t('views:noData.noEntities', 'No entities yet')}
+        description={[t('views:noData.noEntitiesDescription', 'There are no entities yet.')]}
+      />
+    )
+  }
+
+  return (
+    <Table.Root
+      className={isLoading ? '[mask-image:linear-gradient(to_bottom,black_30%,transparent_100%)]' : ''}
+      variant="asStackedList"
+    >
+      <Table.Header>
+        <Table.Row>
+          <Table.Head className="text-cn-foreground-4 w-96">Entity</Table.Head>
+          <Table.Head className="text-cn-foreground-4 w-96">Scope</Table.Head>
+          <Table.Head className="text-cn-foreground-4 w-44 text-right">Created</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      {isLoading ? (
+        <SkeletonTable countRows={12} countColumns={5} />
+      ) : (
+        <Table.Body>
+          {content.map(({ referredByEntity, createdAt }: ConnectorReferenceItem) => {
+            const { name, type, entityRef } = referredByEntity
+            const { scope } = entityRef
+            const identifier = entityRef?.identifier || name
+            return (
+              <Table.Row key={identifier} className="cursor-pointer">
+                <Table.Cell onClick={() => toEntity?.(identifier)} className="max-w-80 self-start truncate">
+                  <div className="flex flex-col gap-2.5">
+                    <Title title={identifier} />
+                    <Description description={`Type: ${type}`} />
+                  </div>
+                </Table.Cell>
+                <Table.Cell
+                  onClick={() => toScope?.(scope)}
+                  className="text-cn-foreground-accent max-w-80 content-center truncate font-medium"
+                >
+                  {scope}
+                </Table.Cell>
+
+                <Table.Cell
+                  onClick={() => toEntity?.(identifier)}
+                  className="text-cn-foreground-4 max-w-full content-center truncate text-right text-sm font-normal leading-tight tracking-tight"
+                >
+                  {createdAt ? timeAgo(createdAt) : null}
+                </Table.Cell>
+              </Table.Row>
+            )
+          })}
+        </Table.Body>
+      )}
+    </Table.Root>
+  )
+}
+export default ConnectorDetailsReferenceList
diff --git a/packages/ui/src/views/connectors/connector-details/connector-details-references-page.tsx b/packages/ui/src/views/connectors/connector-details/connector-details-references-page.tsx
new file mode 100644
index 0000000000..8b3108b21f
--- /dev/null
+++ b/packages/ui/src/views/connectors/connector-details/connector-details-references-page.tsx
@@ -0,0 +1,87 @@
+import { FC } from 'react'
+
+import { useRouterContext } from '@/context'
+import { ListActions, NoData, Pagination, SearchBox } from '@components/index'
+import { Spacer } from '@components/spacer'
+import { useDebounceSearch } from '@hooks/use-debounce-search'
+
+import ConnectorDetailsReferenceList from './connector-details-references-list'
+import { ConnectorDetailsReferencePageProps } from './types'
+
+const ConnectorDetailsReferencePage: FC<ConnectorDetailsReferencePageProps> = ({
+  searchQuery,
+  setSearchQuery,
+  apiConnectorRefError,
+  useTranslationStore,
+  currentPage,
+  totalPages,
+  goToPage,
+  isLoading,
+  entities,
+  toEntity,
+  toScope,
+  ...props
+}) => {
+  const { t } = useTranslationStore()
+  const { navigate } = useRouterContext()
+
+  const { search: searchInput, handleSearchChange: handleInputChange } = useDebounceSearch({
+    handleChangeSearchValue: (val: string) => setSearchQuery(val.length ? val : undefined),
+    searchValue: searchQuery || ''
+  })
+
+  if (apiConnectorRefError) {
+    return (
+      <NoData
+        textWrapperClassName="max-w-[350px]"
+        iconName="no-data-error"
+        title={t('views:noData.errorApiTitle', 'Failed to load', {
+          type: 'entities'
+        })}
+        description={[
+          apiConnectorRefError ||
+            t(
+              'views:noData.errorApiDescription',
+              'An error occurred while loading the data. Please try again and reload the page.'
+            )
+        ]}
+        primaryButton={{
+          label: t('views:notFound.button', 'Reload page'),
+          onClick: () => {
+            navigate(0) // Reload the page
+          }
+        }}
+      />
+    )
+  }
+
+  return (
+    <div>
+      <Spacer size={6} />
+      <ListActions.Root>
+        <ListActions.Left>
+          <SearchBox.Root
+            width="full"
+            className="max-w-96"
+            value={searchInput}
+            handleChange={handleInputChange}
+            placeholder={t('views:search', 'Search')}
+          />
+        </ListActions.Left>
+      </ListActions.Root>
+      <Spacer size={4} />
+      <ConnectorDetailsReferenceList
+        entities={entities}
+        useTranslationStore={useTranslationStore}
+        isLoading={isLoading}
+        toEntity={toEntity}
+        toScope={toScope}
+        {...props}
+      />
+      <Spacer size={8} />
+      <Pagination totalPages={totalPages} currentPage={currentPage} goToPage={goToPage} t={t} />
+    </div>
+  )
+}
+
+export { ConnectorDetailsReferencePage }
diff --git a/packages/ui/src/views/connectors/connector-details/types.ts b/packages/ui/src/views/connectors/connector-details/types.ts
index ae3953f93a..ae50ae762d 100644
--- a/packages/ui/src/views/connectors/connector-details/types.ts
+++ b/packages/ui/src/views/connectors/connector-details/types.ts
@@ -6,6 +6,58 @@ import { InputFactory } from '@harnessio/forms'
 
 import { AnyConnectorDefinition, ConnectorConfigType, onSubmitConnectorProps } from '../types'
 
+export interface EntityRef {
+  scope: string
+  identifier: string
+  accountIdentifier: string
+  orgIdentifier: string
+  projectIdentifier: string | null
+  parentUniqueId: string
+  metadata: Record<string, any>
+  repoIdentifier: string | null
+  branch: string | null
+  isDefault: boolean
+  default: boolean
+  fullyQualifiedScopeIdentifier: string
+}
+
+export interface ReferredEntity {
+  type: string
+  entityRef: EntityRef
+  name: string
+  scope?: string
+  identifier?: string
+  entityGitMetadata: Record<string, any> | null
+}
+
+export interface EntityDetail {
+  type: string
+  identifier: string
+  referenceType: string
+}
+
+export interface ConnectorReferenceItem {
+  accountIdentifier: string
+  referredEntity: ReferredEntity
+  referredByEntity: ReferredEntity
+  detail: EntityDetail | null
+  createdAt: number
+}
+
+export interface ConnectorReferenceList {
+  content: ConnectorReferenceItem[]
+}
+
+export interface ConnectorReferenceListProps {
+  entities: ConnectorReferenceList
+  useTranslationStore: () => TranslationStore
+  isLoading: boolean
+  toEntity: (entity: string) => void
+  toScope: (scope: string) => void
+}
+
+export interface ConnectorDetailsReferenceListProps {}
+
 export interface ConnectorDetailsItem {
   identifier: string
   type: ConnectorConfigType
@@ -22,7 +74,6 @@ export interface ConnectorDetailsItem {
     branch?: string
     objectId?: string
   }
-  icon: keyof typeof LogoNameMap
   createdAt: number
   lastConnectedAt: number
 }
@@ -36,6 +87,30 @@ export interface ConnectorDetailsPageProps {
   getConnectorDefinition: (type: string) => AnyConnectorDefinition | undefined
   inputComponentFactory: InputFactory
   apiError?: string
+  isConnectorReferencesLoading: boolean
+  setIsConnectorRefSearchQuery: (query?: string) => void
+  currentPage: number
+  totalPages: number
+  goToPage: (page: number) => void
+  entities: ConnectorReferenceList
+  toEntity: (entity: string) => void
+  toScope: (scope: string) => void
+  searchQuery: string
+  apiConnectorRefError?: string
+}
+
+export interface ConnectorDetailsReferencePageProps {
+  searchQuery: string
+  setSearchQuery: (query?: string) => void
+  apiConnectorRefError?: string
+  useTranslationStore: () => TranslationStore
+  currentPage: number
+  totalPages: number
+  goToPage: (page: number) => void
+  isLoading: boolean
+  entities: ConnectorReferenceList
+  toEntity: (entity: string) => void
+  toScope: (scope: string) => void
 }
 
 export interface ConnectorDetailsHeaderProps {
diff --git a/packages/ui/src/views/connectors/connector-test-connection/connector-test-connection-dialog.tsx b/packages/ui/src/views/connectors/connector-test-connection/connector-test-connection-dialog.tsx
index 117cd3df12..5041132751 100644
--- a/packages/ui/src/views/connectors/connector-test-connection/connector-test-connection-dialog.tsx
+++ b/packages/ui/src/views/connectors/connector-test-connection/connector-test-connection-dialog.tsx
@@ -7,7 +7,6 @@ import { Layout } from '@components/layout'
 import { MarkdownViewer } from '@components/markdown-viewer'
 import { Progress } from '@components/progress'
 import { cn } from '@utils/cn'
-import { ExecutionStatus } from '@views/execution/execution-status'
 import { TranslationStore } from '@views/repo'
 import { ExecutionState } from '@views/repo/pull-request'
 


Reviews:
user: login: vardanbansal-harness
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-11T18:22:48Z
user: login: vardanbansal-harness
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-11T18:23:21Z
user: login: vardanbansal-harness
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-11T18:24:04Z
user: login: cjlee01
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T19:06:42Z
user: login: cjlee01
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T19:06:50Z
user: login: vardanbansal-harness
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-11T21:16:51Z

Review comments:
diff_hunk: @@ -34,6 +35,17 @@ inputComponentFactory.registerComponent(new RadialInput())
 
 const ConnectorsDetailsPageWrapper = (): JSX.Element => (
   <ConnectorDetailsPage
+    searchQuery=""
+    toEntity={noop}
+    toScope={noop}
+    entities={mockConnectorRefList}
+    isConnectorReferencesLoading={false}
+    setIsConnectorRefSearchQuery={noop}
+    currentPage={1}
+    totalPages={1}
+    goToPage={noop}
+    apiError={''}
+    apiConnectorRefError={''}
path: apps/design-system/src/subjects/views/connectors/connector-details.tsx
user: login: vardanbansal-harness
body: to keep it cleaner, drop the optional arguments here
created_at: 2025-04-11T18:22:48Z
author_association: COLLABORATOR
diff_hunk: @@ -194,6 +194,8 @@
   },
   "noData": {
     "noResults": "Aucun résultat de recherche",
+    "noEntities": "No entities yet",
+    "noEntitiesDescription": "There are no entities yet.",
path: packages/ui/locales/fr/views.json
user: login: vardanbansal-harness
body: add proper `fr` translations
created_at: 2025-04-11T18:23:21Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,92 @@
+import { NoData, SkeletonList, SkeletonTable, Table } from '@/components'
+import { timeAgo } from '@utils/utils'
+
+import { ConnectorReferenceItem, ConnectorReferenceListProps } from './types'
+
+const Title = ({ title }: { title: string }): JSX.Element => (
+  <span className="text-cn-foreground-1 max-w-full truncate text-sm font-medium leading-tight tracking-tight">
+    {title}
+  </span>
+)
+const Description = ({ description }: { description: string }): JSX.Element => (
+  <span className="text-12 text-cn-foreground-4 max-w-full truncate font-normal leading-none tracking-tight">
+    {description}
+  </span>
+)
+
+const ConnectorDetailsReferenceList = ({
+  entities,
+  useTranslationStore,
+  isLoading,
+  toEntity,
+  toScope
+}: ConnectorReferenceListProps): JSX.Element => {
+  const { t } = useTranslationStore()
+  const content = entities?.content
+  if (isLoading) {
+    return <SkeletonList />
+  }
+
+  if (!content.length) {
+    return (
+      <NoData
+        withBorder
+        className="min-h-[65vh]"
+        textWrapperClassName="max-w-[350px]"
path: packages/ui/src/views/connectors/connector-details/connector-details-references-list.tsx
user: login: vardanbansal-harness
body: This height and width is as per mocks?
created_at: 2025-04-11T18:24:04Z
author_association: COLLABORATOR
diff_hunk: @@ -194,6 +194,8 @@
   },
   "noData": {
     "noResults": "Aucun résultat de recherche",
+    "noEntities": "No entities yet",
+    "noEntitiesDescription": "There are no entities yet.",
path: packages/ui/locales/fr/views.json
user: login: cjlee01
body: dome
created_at: 2025-04-11T19:06:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -34,6 +35,17 @@ inputComponentFactory.registerComponent(new RadialInput())
 
 const ConnectorsDetailsPageWrapper = (): JSX.Element => (
   <ConnectorDetailsPage
+    searchQuery=""
+    toEntity={noop}
+    toScope={noop}
+    entities={mockConnectorRefList}
+    isConnectorReferencesLoading={false}
+    setIsConnectorRefSearchQuery={noop}
+    currentPage={1}
+    totalPages={1}
+    goToPage={noop}
+    apiError={''}
+    apiConnectorRefError={''}
path: apps/design-system/src/subjects/views/connectors/connector-details.tsx
user: login: cjlee01
body: done
created_at: 2025-04-11T19:06:50Z
author_association: CONTRIBUTOR

PR comments:
user: login: netlify[bot]
created_at: 2025-04-11T00:07:22Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *harness-design* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 8f0838f0cf7c84d1bb692191aa5075bf2f381911 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/harness-design/deploys/67fa05a38c40d800083fc96c |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-1458--harness-design.netlify.app](https://deploy-preview-1458--harness-design.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE0NTgtLWhhcm5lc3MtZGVzaWduLm5ldGxpZnkuYXBwIn0.fBF9OYQfKazUz2H8J3ah9zH1GrL3d7ZeBwBScoVP_rw)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [harness-design Preview](https://deploy-preview-1458--harness-design.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/harness-design/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: netlify[bot]
created_at: 2025-04-11T00:07:24Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *harness-xd-review* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 8f0838f0cf7c84d1bb692191aa5075bf2f381911 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/harness-xd-review/deploys/67fa05a32e9bac00081c42da |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-1458--harness-xd-review.netlify.app](https://deploy-preview-1458--harness-xd-review.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE0NTgtLWhhcm5lc3MteGQtcmV2aWV3Lm5ldGxpZnkuYXBwIn0.6d9aLlMuTIOJbVpXb8Qp2ZdHsq8nIQ6iq_7QZxoBYwI)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [harness-xd-review Preview](https://deploy-preview-1458--harness-xd-review.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/harness-xd-review/configuration/notifications#deploy-webhooks)._
author_association: NONE