feat: [AH-538]: support registry type selector in registry list table (#2901)

* feat: [AH-538]: support registry type selector in registry list table

web/src/ar/common/constants.ts

@@ -16,7 +16,7 @@
 
 import type { IconName } from '@harnessio/icons'
 import type { StringsMap } from '@ar/frameworks/strings'
-import { EnvironmentType, RepositoryPackageType } from './types'
+import { EnvironmentType, RepositoryConfigType, RepositoryPackageType } from './types'
 
 export interface RepositoryTypeListItem {
   label: keyof StringsMap
@@ -97,3 +97,21 @@ export const EnvironmentTypeList: EnvironmentTypeListItem[] = [
     value: EnvironmentType.NonProd
   }
 ]
+
+interface RepositoryConfigTypesListItem {
+  label: keyof StringsMap
+  value: RepositoryConfigType
+  disabled?: boolean
+  tooltip?: string
+}
+
+export const RepositoryConfigTypes: RepositoryConfigTypesListItem[] = [
+  {
+    label: 'repositoryList.artifactRegistry.label',
+    value: RepositoryConfigType.VIRTUAL
+  },
+  {
+    label: 'repositoryList.upstreamProxy.label',
+    value: RepositoryConfigType.UPSTREAM
+  }
+]

web/src/ar/pages/repository-list/RepositoryListPage.tsx

@@ -30,6 +30,7 @@ import { CreateRepository } from './components/CreateRepository/CreateRepository
 import { RepositoryListTable } from './components/RepositoryListTable'
 import { useArtifactRepositoriesQueryParamOptions } from './utils'
 import type { ArtifactRepositoryListPageQueryParams } from './utils'
+import RepositoryTypeSelector from './components/RepositoryTypeSelector/RepositoryTypeSelector'
 
 import css from './RepositoryListPage.module.scss'
 
@@ -43,7 +44,7 @@ function RepositoryListPage(): JSX.Element {
   const spaceRef = useGetSpaceRef()
   const queryParamOptions = useArtifactRepositoriesQueryParamOptions()
   const queryParams = useQueryParams<ArtifactRepositoryListPageQueryParams>(queryParamOptions)
-  const { searchTerm, page, size, repositoryTypes } = queryParams
+  const { searchTerm, page, size, repositoryTypes, configType } = queryParams
 
   const { preference: sortingPreference, setPreference: setSortingPreference } = usePreferenceStore<string | undefined>(
     PreferenceScope.USER,
@@ -69,7 +70,8 @@ function RepositoryListPage(): JSX.Element {
       sort_field: sortField,
       sort_order: sortOrder,
       package_type: repositoryTypes,
-      search_term: searchTerm
+      search_term: searchTerm,
+      type: configType
     },
     stringifyQueryParamsOptions: {
       arrayFormat: 'repeat'
@@ -104,6 +106,12 @@ function RepositoryListPage(): JSX.Element {
       <Page.SubHeader className={css.subHeader}>
         <div className={css.subHeaderItems}>
           <CreateRepository />
+          <RepositoryTypeSelector
+            value={configType}
+            onChange={val => {
+              updateQueryParams({ configType: val, page: DEFAULT_PAGE_INDEX })
+            }}
+          />
           <PackageTypeSelector
             value={repositoryTypes}
             onChange={val => {

web/src/ar/pages/repository-list/components/RepositoryTypeSelector/RepositoryTypeSelector.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { DropDown } from '@harnessio/uicore'
+
+import { useStrings } from '@ar/frameworks/strings'
+import { RepositoryConfigTypes } from '@ar/common/constants'
+import type { RepositoryConfigType } from '@ar/common/types'
+
+interface RepositoryTypeSelectorProps {
+  value?: RepositoryConfigType
+  onChange: (val: RepositoryConfigType) => void
+}
+export default function RepositoryTypeSelector(props: RepositoryTypeSelectorProps): JSX.Element {
+  const { value, onChange } = props
+  const { getString } = useStrings()
+  return (
+    <DropDown
+      width={180}
+      buttonTestId="registry-type-select"
+      items={RepositoryConfigTypes.filter(each => !each.disabled).map(each => ({
+        ...each,
+        label: getString(each.label)
+      }))}
+      value={value}
+      onChange={option => {
+        onChange(option.value as RepositoryConfigType)
+      }}
+      placeholder={getString('repositoryList.selectRegistryType')}
+      addClearBtn
+    />
+  )
+}

web/src/ar/pages/repository-list/strings/strings.en.yaml

@@ -9,6 +9,7 @@ upstreamProxy:
   subLabel: Connect to an external registry to access additional packages and dependencies.
 selectEnvironments: Environments
 selectPackageTypes: Package Types
+selectRegistryType: Registry Type
 selectLabels: '{{ $.artifactList.table.columns.tags }}'
 deleteModal:
   title: '{{ $.artifactList.table.actions.deleteRepository }}'

web/src/ar/pages/repository-list/utils.ts

@@ -18,7 +18,7 @@ import { useMemo } from 'react'
 
 import { useParentHooks } from '@ar/hooks'
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, DEFAULT_PIPELINE_LIST_TABLE_SORT } from '@ar/constants'
-import type { RepositoryPackageType } from '@ar/common/types'
+import type { RepositoryConfigType, RepositoryPackageType } from '@ar/common/types'
 import type { UseQueryParamsOptions } from '@ar/__mocks__/hooks'
 
 type GetArtifactRepositoryQueryParams = {
@@ -30,6 +30,7 @@ type GetArtifactRepositoryQueryParams = {
   sort: string[]
   searchTerm?: string
   repositoryTypes: RepositoryPackageType[]
+  configType?: RepositoryConfigType
 }
 
 export type ArtifactRepositoryListPageQueryParams = Omit<

web/src/ar/strings/types.ts

@@ -104,6 +104,7 @@ export interface StringsMap {
   'repositoryList.selectEnvironments': string
   'repositoryList.selectLabels': string
   'repositoryList.selectPackageTypes': string
+  'repositoryList.selectRegistryType': string
   'repositoryList.table.columns.artifacts': string
   'repositoryList.table.columns.downloads': string
   'repositoryList.table.columns.lastModified': string