solved functional bugs on dest stack

ui/src/cmsData/add_stack.json

@@ -8,11 +8,11 @@
   "primary_cta": { "title": "Create" },
   "secondary_cta": { "title": "Cancel" },
   "stack_description": "Description",
-  "stack_description_placeholder": "Description",
-  "stack_locale_description": "Master Locale",
-  "stack_locales": "Master Locale",
-  "stack_name": "Stack Name",
-  "stack_name_placeholder": "Stack Name",
+  "stack_description_placeholder": "Enter a description",
+  "stack_locale_description": "Select a Language",
+  "stack_locales": "Set Master Language",
+  "stack_name": "Name",
+  "stack_name_placeholder": "Enter stack Name",
   "tags": [],
   "title": "Create New Stack",
   "updated_at": "2024-02-13T04:44:57.846Z",

ui/src/cmsData/destinationStack.json

@@ -22,6 +22,7 @@
       "step_id": "Step2",
       "_metadata": { "uid": "cs1979790a8619e118" },
       "title": "Stack",
+      "isRequired": true,
       "description": "",
       "lock": false,
       "active": true,

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

@@ -19,7 +19,6 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
   const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
-  // const organisationsList = useSelector((state:RootState)=>state?.authentication?.organisationsList);
 
   const dispatch = useDispatch();
 
@@ -32,24 +31,6 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
   };
 
 
-  //Handle Organisation selection
-  // const handleDropdownChange = (data: ChangeEvent<HTMLInputElement>) =>  {
-  //   if (selectedOrg?.value !== data?.value) {
-  //     setSelectedOrg(() => ({ ...data }));
-
-  //     setNewMigrationData({
-  //       ...newMigrationData,
-  //       destination_stack: {
-  //         ...newMigrationData.destination_stack,
-  //         selectedOrg: { ...data }
-  //       }
-  //     });
-  //   }
-
-  //   call for Step Change
-  //   props.handleStepChange(props.currentStep);
-  // };
-
   /****  ALL USEEffects  HERE  ****/
 
   useEffect(() => {
@@ -70,19 +51,6 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
 
   return (
     <div className="action-content-wrapper p-3">
-      {/* <div className="Dropdown-wrapper p-0">
-        <Select
-          version={'v2'}
-          options={organisationsList}
-          onChange={handleDropdownChange}
-          value={selectedOrg}
-          width='600'
-          isSearchable={true}
-          isDisabled={true}
-          placeholder={'Organisation'}
-        />
-
-      </div> */}
       <TextInput 
         version={'v2'}
         value={selectedOrg?.label || 'Organisation'}

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AsyncSelect, cbModal, TextInput } from '@contentstack/venus-components';
 import { DEFAULT_DROPDOWN, IDropDown, INewMigration } from '../../../context/app/app.interface';
@@ -28,6 +28,7 @@ const defaultStack = {
 };
 
 const LoadStacks = (props: LoadFileFormatProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   /****  ALL HOOKS HERE  ****/
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
@@ -40,16 +41,19 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       : DEFAULT_DROPDOWN
   );  
 
+  /****  ALL METHODS HERE  ****/
+
   const [allStack, setAllStack] = useState<IDropDown[]>([]);
   const [allLocales, setAllLocales] = useState<IDropDown[]>([]);
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [isLoading, setisLoading] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
+  const [placeholder, setPlaceholder] = useState('Select a stack');
+  const [asyncMount, setAsyncMount] = useState(true)
 
 
   const { projectId = '' }: Params<string> = useParams();
-
   useEffect(()=>{
     if(!isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
       setSelectedStack(newMigrationData?.destination_stack?.selectedStack);
@@ -83,11 +87,8 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         created_at: resp?.data?.stack?.created_at,
         uid: resp?.data?.stack?.api_key
       };
-      // setAllStack((prevStacks) => [...prevStacks, newCreatedStack]);
       setSelectedStack(newCreatedStack);
       setisLoading(false)
-      // loadMoreOptions({search: ''})
-
       const newMigrationDataObj: INewMigration = {
         ...newMigrationData,
         destination_stack: {
@@ -113,15 +114,12 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     return false;
   };
 
-  /****  ALL METHODS HERE  ****/
-  const [placeholder, setPlaceholder] = useState('Select a stack');
-  const [asyncMount, setAsyncMount] = useState(true)
+
+
   //Handle Legacy cms selection
   const handleDropdownChange = (name: string) => (data: IDropDown) => {
     const stackCleared = data?.value === '' || data?.value === null || data === null;
-    if (data?.value == '+ Create a new Stack') {
-      handleCreateNewStack()
-    }
+
     if (stackCleared === true) {
       setPlaceholder('Select a stack');
     }
@@ -152,53 +150,17 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     }, 10);
   }
 
-  const handleCreateNewStack = () => {
-    cbModal({
-      component: (props: LoadFileFormatProps) => (
-        <AddStack
-          locales={allLocales}
-          closeModal={() => {
-            return;
-          }}
-          onSubmit={handleOnSave}
-          defaultValues={defaultStack}
-          selectedOrganisation={selectedOrganisation?.value}
-          {...props}
-        />
-      ),
-      modalProps: {
-        shouldCloseOnOverlayClick: true,
-        shouldCloseOnEscape: true,
-        onOpen: () => {
-          return;
-        },
-        onClose: () => {
-          resetAsyncSelect();
-          return;
-        }
-      }
-    });
-  };
 
+  const emptyStackValue = selectedStack?.value === undefined || selectedStack?.value === '' || selectedStack?.value === null
+
   const loadMoreOptions: any = async ({
     search,
   }: {
     search: string;
   }) => {
-    const addLabel = {
-      label: "+ Create a new Stack",
-      value: "+ Create a new Stack",
-      uid: '',
-      master_locale: '',
-      locales: '',
-      created_at: ''
-    };
-
     try {
       setisLoading(true);
-
       const stackData = await getAllStacksInOrg(selectedOrganisation?.value, search); // org id will always be there
-
       if (stackData?.status === 200) {
         const stackArray = validateArray(stackData?.data?.stacks)
           ? stackData?.data?.stacks?.map((stack: StackResponse) => ({
@@ -210,17 +172,17 @@ const LoadStacks = (props: LoadFileFormatProps) => {
               created_at: stack?.created_at,
             }))
           : [];
-  
-        if (stackData?.data?.stacks.length === 0) {
+
+        if (stackData?.data?.stacks?.length === 0 && (!stackData?.data?.stack)) {
           setIsError(true);
           setErrorMessage("Please create new stack there is no stack available");
         } else {
-          stackArray.sort((a: IDropDown, b: IDropDown) => {
-            return new Date(b?.created_at).getTime() - new Date(a?.created_at).getTime();
-          });
-
-          stackArray.push(addLabel);
+          setIsError(true)
+          setErrorMessage("Please select a stack")
         }
+        stackArray.sort((a: IDropDown, b: IDropDown) => {
+          return new Date(b?.created_at).getTime() - new Date(a?.created_at).getTime();
+        });
         return { options: stackArray };
       } else {
         setIsError(true);
@@ -234,55 +196,95 @@ const LoadStacks = (props: LoadFileFormatProps) => {
     }
   };
 
-  const emptyStackValue = selectedStack?.value === undefined || selectedStack?.value === '' || selectedStack?.value === null
+  const handleCreateNewStack = () => {
+    cbModal({
+      component: (props: LoadFileFormatProps) => (
+        <AddStack
+          locales={allLocales}
+          closeModal={() => {
+            return;
+          }}
+          onSubmit={handleOnSave}
+          defaultValues={defaultStack}
+          selectedOrganisation={selectedOrganisation?.value}
+          {...props}
+        />
+      ),
+      modalProps: {
+        shouldCloseOnOverlayClick: true,
+        shouldCloseOnEscape: true,
+        onOpen: () => {
+          return;
+        },
+        onClose: () => {
+          resetAsyncSelect();
+          return;
+        }
+      }
+    });
+  };
 
+  const [ isSelectOpen, setIsSelectOpen ] = useState<boolean>(false)
 
-  useEffect(()=>{
-    if(emptyStackValue) {
-      setIsError(true)
-      setErrorMessage("Please select a stack")
+  useEffect(() => {
+    // Fetch the select element using its class name or testId
+    const selectElement = document.querySelector('.selectElementlabel .Select__menu');
+    const selectElement1 = document.querySelector('.createStack');
+    if (selectElement && !selectElement1) {
+      const div = document.createElement('div')
+      div.textContent = "+ Create a new Stack"
+      div.className = 'createStack'
+      div.onclick = handleCreateNewStack
+      selectElement.appendChild(div)
     }
-  }) 
+  }, [asyncMount, isSelectOpen]);  
+
+  const handleDivClick = () => {
+    setIsSelectOpen(!isSelectOpen)
+  }
 
-
   return (
     <div className="">
       <div className="action-summary-wrapper ">
         <div className="service_list ">
           <div className="row">
             <div className="col-12">
-                <div className="Dropdown-wrapper p-0 active ">
+                <div  className="Dropdown-wrapper p-0 active selectElementlabel">
                   {asyncMount ? 
-                  <AsyncSelect
-                    version={'v2'}
-                    loadMoreOptions={loadMoreOptions}
-                    onChange={handleDropdownChange('stacks')}
-                    canEditOption={true}
-                    value={selectedStack}
-
-                    isSearchable={true}
-                    isClearable={!emptyStackValue ? true : false }
-                    width="600px"
-                    isDisabled={props?.stepComponentProps?.isSummary || false}
-                    hideSelectedOptions={true}
-                    placeholder={placeholder}
-                    limit={10}
-                    updateOption={()=> undefined}
-                    error={isLoading ? false : emptyStackValue ? true : false }
-                    defaultOptions={true}
-                    debounceTimeout={0}
-                  />: null
+                  <div onClick={handleDivClick}>
+                    <AsyncSelect
+                      version={'v2'}
+                      loadMoreOptions={loadMoreOptions}
+                      onChange={handleDropdownChange('stacks')}
+                      canEditOption={true}
+                      value={selectedStack}
+                      isSearchable={true}
+                      isClearable={!emptyStackValue ? true : false }
+                      width="600px"
+                      isDisabled={props?.stepComponentProps?.isSummary || false}
+                      hideSelectedOptions={true}
+                      placeholder={placeholder}
+                      limit={10}
+                      updateOption={()=> undefined}
+                      error={isLoading ? false : emptyStackValue ? true : false }
+                      defaultOptions={true}
+                      debounceTimeout={0}
+                      menuIsOpen={isSelectOpen}
+                    />
+                  </div>
+                    : null
                   }
                 </div>
                 {(emptyStackValue && !isLoading) && <div className='errorMessage'>{errorMessage}</div>}
             </div> 
             <div className="col-12">
-              <label className="title">Master Locale</label>
+              <label className="title">Master Locale <span className='asterisk_input'></span>
+              </label>
             </div>
             <div className="col-12 pb-2">
               <TextInput 
                 version={'v2'}
-                value={selectedStack?.master_locale || 'Locale'}
+                value={selectedStack?.master_locale || 'Selected Language'}
                 width="600px"
                 className="orgInput"
                 isReadOnly