diff --git a/web/src/ar/pages/artifact-list/components/RepositorySelector/RepositorySelector.tsx b/web/src/ar/pages/artifact-list/components/RepositorySelector/RepositorySelector.tsx index fbb8eccd3..034918935 100644 --- a/web/src/ar/pages/artifact-list/components/RepositorySelector/RepositorySelector.tsx +++ b/web/src/ar/pages/artifact-list/components/RepositorySelector/RepositorySelector.tsx @@ -14,17 +14,17 @@ * limitations under the License. */ -import React from 'react' +import React, { useMemo } from 'react' import type { SelectOption } from '@harnessio/uicore' -import { DropDown } from '@harnessio/uicore' +import { MultiSelectDropDown } from '@harnessio/uicore' import { getAllRegistries } from '@harnessio/react-har-service-client' import { useStrings } from '@ar/frameworks/strings' import { useGetSpaceRef } from '@ar/hooks' export interface RepositorySelectorProps { - value?: string - onChange(id: string): void + value?: string[] + onChange(ids: string[]): void } export default function RepositorySelector(props: RepositorySelectorProps): JSX.Element { @@ -52,18 +52,32 @@ export default function RepositorySelector(props: RepositorySelectorProps): JSX. }) } + const selectedValues = useMemo(() => { + if (Array.isArray(props.value)) { + return props.value.map(each => ({ + label: each, + value: each + })) + } + return [] + }, [props.value]) + return ( - { - props.onChange(option.value as string) + onChange={options => { + if (!Array.isArray(options)) { + props.onChange([]) + return + } + props.onChange(options.map(each => each.value as string)) }} - value={props.value} + value={selectedValues} items={queryRepositories} usePortal={true} - addClearBtn={true} query={query} + allowSearch onQueryChange={setQuery} placeholder={getString('artifactList.table.allRepositories')} /> diff --git a/web/src/ar/pages/artifact-list/utils.ts b/web/src/ar/pages/artifact-list/utils.ts index f6cdd0afa..c8368409c 100644 --- a/web/src/ar/pages/artifact-list/utils.ts +++ b/web/src/ar/pages/artifact-list/utils.ts @@ -30,7 +30,7 @@ export type ArtifactListPageQueryParams = { latestVersion: boolean isDeployedArtifacts: boolean searchTerm?: string - repositoryKey?: string + repositoryKey?: string[] } export const useArtifactListQueryParamOptions = (): UseQueryParamsOptions => { @@ -43,7 +43,8 @@ export const useArtifactListQueryParamOptions = (): UseQueryParamsOptions