Dev

ui/src/components/DestinationStack/Actions/LoadStacks.tsx

@@ -1,5 +1,5 @@
-import { useContext, useEffect, useState } from 'react';
-import { Icon, Select, cbModal } from '@contentstack/venus-components';
+import { useContext, useState } from 'react';
+import { AsyncSelect, Icon, cbModal } from '@contentstack/venus-components';
 
 import { AppContext } from '../../../context/app/app.context';
 import { DEFAULT_DROPDOWN, IDropDown, INewMigration } from '../../../context/app/app.interface';
@@ -43,10 +43,11 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       created_at: ''
     }
   ];
-  const [allStack, setAllStack] = useState<IDropDown[]>(loadingOption);
+  const [allStack, setAllStack] = useState<IDropDown[]>([]);
   const [allLocales, setAllLocales] = useState<IDropDown[]>([]);
 
   const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [isLoading, setisLoading] = useState<boolean>(false);
 
   const { projectId = '' }: Params<string> = useParams();
 
@@ -113,31 +114,31 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   //Handle Legacy cms selection
   const handleDropdownChange = (name: string) => (data: IDropDown) => {
     const stackChanged = selectedStack?.value !== data?.value;
-    const stackCleared = data?.value === '';
+    const stackCleared = data?.value === '' || data?.value === null || data === null;
+
     if (name === 'stacks') {
-      if (stackChanged || stackCleared) {
-        setSelectedStack(() => ({ ...data }));
+      setSelectedStack(() => ({ ...data }));
 
-        const newMigrationDataObj: INewMigration = {
-          ...newMigrationData,
-          destination_stack: {
-            ...newMigrationData.destination_stack,
-            selectedStack: stackCleared ? DEFAULT_DROPDOWN : { ...data }
-          }
-        };
+      const newMigrationDataObj: INewMigration = {
+        ...newMigrationData,
+        destination_stack: {
+          ...newMigrationData?.destination_stack,
+          selectedStack: stackCleared ? DEFAULT_DROPDOWN : { ...data }
+        }
+      };
 
-        updateNewMigrationData(newMigrationDataObj);
+      updateNewMigrationData(newMigrationDataObj);
 
-        //call for Step Change
+      if (!stackCleared) {
         if (props?.handleStepChange) {
-          props.handleStepChange(props?.currentStep, true);
+          props?.handleStepChange(props?.currentStep, true);
         }
-        //.handleStepChange(props?.currentStep, true);
       }
     }
   };
 
   const fetchData = async () => {
+    setisLoading(true);
     const stackData = await getAllStacksInOrg(
       newMigrationData?.destination_stack?.selectedOrg?.value
     ); //org id will always be there
@@ -179,12 +180,13 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     };
 
     updateNewMigrationData(newMigrationDataObj);
+    setisLoading(false);
   };
 
   /****  ALL USEEffects  HERE  ****/
-  useEffect(() => {
-    fetchData();
-  }, []);
+  // useEffect(() => {
+  //   fetchData();
+  // }, []);
   const handleCreateNewStack = () => {
     cbModal({
       component: (props: LoadFileFormatProps) => (
@@ -209,25 +211,88 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       }
     });
   };
+
+  const loadMoreOptions: any = async ({
+    search,
+    skip,
+    limit
+  }: {
+    search: string;
+    skip: number;
+    limit: number;
+  }) => {
+    const stackData = await getAllStacksInOrg(
+      newMigrationData?.destination_stack?.selectedOrg?.value
+    ); //org id will always be there
+
+    const stackArray = validateArray(stackData?.data?.stacks)
+      ? stackData?.data?.stacks?.map((stack: StackResponse) => ({
+          label: stack?.name,
+          value: stack?.api_key,
+          uid: stack?.api_key,
+          master_locale: stack?.master_locale,
+          locales: stack?.locales,
+          created_at: stack?.created_at
+        }))
+      : [];
+
+    stackArray.sort((a: IDropDown, b: IDropDown) => {
+      new Date(b?.created_at)?.getTime() - new Date(a?.created_at)?.getTime();
+    });
+
+    setAllStack(stackArray);
+
+    //Set selected Stack
+    const selectedStackData = validateArray(stackArray)
+      ? stackArray.find(
+          (stack: IDropDown) =>
+            stack?.value === newMigrationData?.destination_stack?.selectedStack?.value
+        )
+      : DEFAULT_DROPDOWN;
+
+    setSelectedStack(selectedStackData);
+
+    const newMigrationDataObj: INewMigration = {
+      ...newMigrationData,
+      destination_stack: {
+        ...newMigrationData?.destination_stack,
+        selectedStack: selectedStackData
+      }
+    };
+
+    updateNewMigrationData(newMigrationDataObj);
+
+    return { options: stackArray };
+  };
+  const onBlurDropdown = () => {
+    if (!isEmptyString(selectedStack?.value)) {
+      if (props?.handleStepChange) {
+        props?.handleStepChange(props?.currentStep, true);
+      }
+    }
+  };
+
   return (
     <div className="">
       <div className="action-summary-wrapper ">
         <div className="service_list ">
           <div className="row">
             <div className="col-12 pb-3 ">
-              <div className="Dropdown-wrapper p-0 active ">
-                <Select
-                  className="stackselect"
-                  version={'v2'}
-                  options={allStack}
-                  onChange={handleDropdownChange('stacks')}
-                  value={selectedStack}
-                  isSearchable={true}
-                  isClearable={true}
-                  isDisabled={props?.stepComponentProps?.isSummary || false}
-                  placeholder={'Stacks'}
-                />
-              </div>
+                <div className="Dropdown-wrapper p-0 active ">
+                  <AsyncSelect
+                    version={'v2'}
+                    loadMoreOptions={loadMoreOptions}
+                    onChange={handleDropdownChange('stacks')}
+                    onBlur={onBlurDropdown}
+                    value={selectedStack}
+                    isSearchable={true}
+                    isClearable={true}
+                    width="440px"
+                    isDisabled={props?.stepComponentProps?.isSummary || false}
+                    placeholder={'Stacks'}
+                    limit={10}
+                  />
+                </div>
             </div>
             <div className="col-12 pb-2">
               <label className="title">Master Locale</label>
@@ -239,6 +304,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
             </div>
           </div>
         </div>
+
         <div className="stackselect pb-3 text-end">
           <a className={`link`} onClick={handleCreateNewStack}>
             <span className="small">

ui/src/components/Modal/index.tsx

@@ -47,11 +47,10 @@ const Modal = (props: ProjectModalProps) => {
   };
 
   const nameValidation = (value: string) => {
-    if(!value){ 
+    if (!value) {
       setInputValue(false);
-      return ;
-    }    
-    else if (!/^[^\s].+[^\s]$/.test(value)) {
+      return;
+    } else if (!/^[^\s].+[^\s]$/.test(value)) {
       setInputValue(false);
       return 'Please enter project name.';
     } else if (value && value?.length > 200) {
@@ -128,10 +127,10 @@ const Modal = (props: ProjectModalProps) => {
                             placeholder={namePlaceholder}
                             data-testid="title-input"
                             name="name"
-                            maxLength='200'
+                            maxLength="200"
                             error={(meta?.error || meta?.submitError) && meta?.touched}
                           />
-                            {meta?.error  && (
+                          {meta?.error && (
                             <ValidationMessage
                               testId="cs-description-error"
                               className="mt-2"
@@ -140,7 +139,6 @@ const Modal = (props: ProjectModalProps) => {
                               {meta?.error}
                             </ValidationMessage>
                           )}
-
                         </>
                       );
                     }}
@@ -149,7 +147,6 @@ const Modal = (props: ProjectModalProps) => {
                 <Field className="mb-30">
                   <FinalField name="description" validate={descValidation}>
                     {({ input, meta }): JSX.Element => {
-
                       return (
                         <>
                           <FieldLabel htmlFor="description" version="v2">
@@ -170,7 +167,7 @@ const Modal = (props: ProjectModalProps) => {
                             data-testid="description-input"
                             error={(meta?.error || meta?.submitError) && meta?.touched}
                           />
-                          {meta?.error  && (
+                          {meta?.error && (
                             <ValidationMessage
                               testId="cs-description-error"
                               className="mt-2"