From 631145d09073505a0ba9b2ba7b70b324d463d28e Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Thu, 23 Nov 2023 18:46:25 +0530
Subject: [PATCH] chore(ui): add `initialOptions` prop in tag suggestion
 component (#14085)

* chore(ui): add initialData prop in tag suggestion component

* address comment
---
 .../components/AsyncSelectList/AsyncSelectList.interface.ts | 2 +-
 .../ui/src/components/AsyncSelectList/AsyncSelectList.tsx   | 6 +++---
 .../Tag/TagsSelectForm/TagsSelectForm.component.tsx         | 2 +-
 .../ui/src/pages/TasksPage/shared/TagSuggestion.tsx         | 4 ++++
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.interface.ts
index b81456b4db3d..be6ec2bdfa93 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.interface.ts
@@ -28,7 +28,7 @@ export interface AsyncSelectListProps {
   placeholder?: string;
   debounceTimeout?: number;
   defaultValue?: string[];
-  initialData?: SelectOption[];
+  initialOptions?: SelectOption[];
   onChange?: (option: DefaultOptionType | DefaultOptionType[]) => void;
   fetchOptions: (
     search: string,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.tsx
index 22d4b55f2c82..2b5ff83332ab 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.tsx
@@ -42,7 +42,7 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
   onChange,
   fetchOptions,
   debounceTimeout = 800,
-  initialData,
+  initialOptions,
   className,
   ...props
 }) => {
@@ -52,7 +52,7 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
   const [searchValue, setSearchValue] = useState<string>('');
   const [paging, setPaging] = useState<Paging>({} as Paging);
   const [currentPage, setCurrentPage] = useState(1);
-  const selectedTagsRef = useRef<SelectOption[]>(initialData ?? []);
+  const selectedTagsRef = useRef<SelectOption[]>(initialOptions ?? []);
 
   const loadOptions = useCallback(
     async (value: string) => {
@@ -204,7 +204,7 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
         data ?? {
           value,
           label: value,
-          data: initialData?.find((item) => item.value === value)?.data,
+          data: initialOptions?.find((item) => item.value === value)?.data,
         }
       );
     });
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsSelectForm/TagsSelectForm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsSelectForm/TagsSelectForm.component.tsx
index b808554185f1..f3127bf9fd0c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsSelectForm/TagsSelectForm.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsSelectForm/TagsSelectForm.component.tsx
@@ -66,7 +66,7 @@ const TagSelectForm = ({
             <AsyncSelectList
               className="tag-select-box"
               fetchOptions={fetchApi}
-              initialData={tagData}
+              initialOptions={tagData}
               mode="multiple"
               placeholder={placeholder}
             />
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx
index ad8541c8bd0b..9dc8ab831310 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagSuggestion.tsx
@@ -17,6 +17,7 @@ import { isArray, isEmpty } from 'lodash';
 import { EntityTags } from 'Models';
 import React, { useMemo } from 'react';
 import AsyncSelectList from '../../../components/AsyncSelectList/AsyncSelectList';
+import { SelectOption } from '../../../components/AsyncSelectList/AsyncSelectList.interface';
 import { TagSource } from '../../../generated/entity/data/container';
 import { TagLabel } from '../../../generated/type/tagLabel';
 import {
@@ -28,6 +29,7 @@ export interface TagSuggestionProps {
   placeholder?: string;
   tagType?: TagSource;
   value?: TagLabel[];
+  initialOptions?: SelectOption[];
   onChange?: (newTags: TagLabel[]) => void;
 }
 
@@ -35,6 +37,7 @@ const TagSuggestion: React.FC<TagSuggestionProps> = ({
   onChange,
   value,
   placeholder,
+  initialOptions,
   tagType = TagSource.Classification,
 }) => {
   const isGlossaryType = useMemo(
@@ -82,6 +85,7 @@ const TagSuggestion: React.FC<TagSuggestionProps> = ({
     <AsyncSelectList
       defaultValue={value?.map((item) => item.tagFQN) || []}
       fetchOptions={isGlossaryType ? fetchGlossaryList : fetchTagsElasticSearch}
+      initialOptions={initialOptions}
       mode="multiple"
       placeholder={
         placeholder ??