mirror of
				https://github.com/open-metadata/OpenMetadata.git
				synced 2025-11-04 12:36:23 +00:00 
			
		
		
		
	chore(ui): add initialOptions prop in tag suggestion component (#14085)
				
					
				
			* chore(ui): add initialData prop in tag suggestion component * address comment
This commit is contained in:
		
							parent
							
								
									c95de19a09
								
							
						
					
					
						commit
						631145d090
					
				@ -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,
 | 
			
		||||
 | 
			
		||||
@ -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,
 | 
			
		||||
        }
 | 
			
		||||
      );
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
@ -66,7 +66,7 @@ const TagSelectForm = ({
 | 
			
		||||
            <AsyncSelectList
 | 
			
		||||
              className="tag-select-box"
 | 
			
		||||
              fetchOptions={fetchApi}
 | 
			
		||||
              initialData={tagData}
 | 
			
		||||
              initialOptions={tagData}
 | 
			
		||||
              mode="multiple"
 | 
			
		||||
              placeholder={placeholder}
 | 
			
		||||
            />
 | 
			
		||||
 | 
			
		||||
@ -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 ??
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user