feat:updated validation code and UI components related to upload

ui/.prettierrc

@@ -1,8 +1,8 @@
 {
-  "semi": true,
-  "tabWidth": 2,
-  "printWidth": 100,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "jsxBracketSameLine": true
-}
+    "semi": true,
+    "tabWidth": 2,
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "jsxBracketSameLine": true
+}

ui/src/cmsData/legacyCms.json

@@ -269,4 +269,4 @@
   "restricted_keyword_checkbox_text": "Please acknowledge that you have referred to the Contentstack restricted keywords",
   "affix_cta": "Continue",
   "file_format_cta": "Continue"
-}
+}

ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router';
 
 // Service
 import { updateLegacyCMSData } from '../../../services/api/migration.service';
+import { fileValidation } from '../../../services/api/upload.service';
 
 // Utilities
 import { isEmptyString, validateArray } from '../../../utilities/functions';
@@ -88,43 +89,58 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
     updateCMSFilters(cmsFilter);
   };
 
+  const getCmsType = async() => {
+    const res:any = await fileValidation();
+    const cmsType = res?.data?.file_details?.cmsType;
+    return cmsType;
+  }
   // Filter CMS Data
-  const filterCMSData = (searchText: string) => {
-    const { all_cms = [] } = migrationData.legacyCMSData;
-
-    //Default set to all CMS if Filter and search text is empty
-    if (isEmptyString(searchText) && !validateArray(cmsFilter)) {
-      setCmsData(all_cms);
-      return;
+  const filterCMSData = async (searchText: string) => {
+    const { all_cms = [] } = migrationData?.legacyCMSData || {};
+    const cmsType = await getCmsType(); // Fetch the specific CMS type 
+
+    let filteredCmsData: ICMSType[] = [];
+    if (isEmptyString(searchText) && !validateArray(cmsFilter) && !cmsType) {
+      filteredCmsData = all_cms;
+    } else {
+      if (cmsType) {
+        filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.cms_id === cmsType);
+      }
+
+      if (validateArray(cmsFilter) || !isEmptyString(searchText)) {
+        const searchTextLower = searchText?.toLowerCase();
+        filteredCmsData = all_cms
+          .filter(({ parent }: ICMSType) => !cmsFilter?.length || cmsFilter?.includes(parent))
+          .filter(({ title, cms_id }: ICMSType) =>
+            title?.toLowerCase()?.includes(searchTextLower) ||
+            cms_id?.toLowerCase()?.includes(searchTextLower)
+          );
+      }
     }
+
+    setCmsData(filteredCmsData); // Set filtered CMS data
+
+    // Determine if a new card should be selected
+    const newSelectedCard = filteredCmsData?.find(cms => cms?.cms_id === selectedCard?.cms_id) || filteredCmsData[0] || null;
+
+    if (newSelectedCard?.cms_id !== selectedCard?.cms_id) {
+      setSelectedCard(newSelectedCard); 
 
-    //search base on filter applied
-    if (validateArray(cmsFilter)) {
-      const _filterCmsData = validateArray(all_cms)
-        ? all_cms
-            ?.filter(({ parent }: ICMSType) => cmsFilter?.includes(parent))
-            .filter(
-              ({ title, cms_id }: ICMSType) =>
-                //Filtering Criteria base on SearchText
-                title?.toLowerCase()?.includes(searchText) ||
-                cms_id?.toLowerCase().includes(searchText)
-            )
-        : [];
-      setCmsData(_filterCmsData);
-
-      return;
+      const newMigrationDataObj: INewMigration = {
+        ...newMigrationData,
+        legacy_cms: {
+          ...newMigrationData?.legacy_cms,
+          selectedCms: newSelectedCard
+        }
+      };
+
+      updateNewMigrationData(newMigrationDataObj); 
+
+      // API call for saving selected CMS, if a new card is selected
+      if (newSelectedCard) {
+        updateLegacyCMSData(selectedOrganisation?.value, projectId, { legacy_cms: newSelectedCard?.cms_id });
+      }
     }
-
-    //Normal Search
-    const _filterCmsData = validateArray(all_cms)
-      ? all_cms?.filter(
-          ({ title, cms_id }: ICMSType) =>
-            //Filtering Criteria base on SearchText
-            title?.toLowerCase()?.includes(searchText) || cms_id?.toLowerCase().includes(searchText)
-        )
-      : [];
-
-    setCmsData(_filterCmsData);
   };
 
   /****  ALL USEEffects  HERE  ****/
@@ -138,7 +154,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
 
   return (
     <div className="row bg-white action-content-wrapper p-3">
-      <div className="col-12">
+      {/* <div className="col-12">
         <div className="service_list_search">
           <Search
             className="service_list_search_bar"
@@ -168,9 +184,9 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
           </div>
         </div>
         <Line type="solid" />
-      </div>
-      <div className="col-12 mt-2">
-        {validateArray(cmsData) ? (
+      </div> */}
+      <div className="col-12">
+        {cmsData && validateArray(cmsData) ? (
           <div className="service_list">
             {cmsData?.map((data: ICMSType) => (
               <Card

ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx

@@ -4,7 +4,7 @@ import { AppContext } from '../../../context/app/app.context';
 import { DEFAULT_FILE, IFile, INewMigration } from '../../../context/app/app.interface';
 import { validateArray } from '../../../utilities/functions';
 import { useParams } from 'react-router';
-
+import { fileValidation } from '../../../services/api/upload.service';
 interface LoadUploadFileProps {
   stepComponentProps: any;
   currentStep: number;
@@ -18,28 +18,45 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
   const { projectId = '' } = useParams();
 
   //Handle further action on file is uploaded to server
-  const handleOnFileUploadCompletion = (files: IFile[]) => {
-    const file = validateArray(files) ? files?.[0] : DEFAULT_FILE;
+  const handleOnFileUploadCompletion = async() => {
+
+    const res : any  = await fileValidation();
 
     const newMigrationDataObj: INewMigration = {
       ...newMigrationData,
       legacy_cms: {
         ...newMigrationData.legacy_cms,
-        uploadedFile: { ...file }
+        uploadedFile: {
+          name: res?.data?.file_details?.localPath,
+          url : res?.data?.file_details?.localPath,
+          validation: res?.data?.message,
+          isValidated: res?.data?.status== 200 ? true : false,
+          file_details: {
+            isLocalPath:res?.data?.file_details?.isLocalPath,
+            cmsType: res?.data?.file_details?.cmsType,
+            localPath: res?.data?.file_details?.localPath,
+            awsData: {
+              awsRegion: res?.data?.file_details?.awsData?.awsRegion,
+              bucketName:res?.data?.file_details?.awsData?.bucketName,
+              buketKey:res?.data?.file_details?.awsData?.buketKey,
+            }
+          }},
+        } 
       }
-    };
-
     updateNewMigrationData(newMigrationDataObj);
+
+
+     props.handleStepChange(props.currentStep, true);
 
-    props.handleStepChange(props.currentStep, true);
+
   };
 
   const allowedFileExtentions = `.${
     newMigrationData?.legacy_cms?.selectedFileFormat?.title || 'zip'
   }`;
   useEffect(() => {
-    handleOnFileUploadCompletion([]);
-  });
+    handleOnFileUploadCompletion();
+  },[newMigrationData]);
 
   return (
     <div className="row">

ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx

@@ -1,8 +1,6 @@
 import { useContext } from 'react';
 import { AppContext } from '../../../context/app/app.context';
-import { Icon } from '@contentstack/venus-components';
 import './summary.scss';
-import { TRASH } from '../../../common/assets';
 import { isEmptyString } from '../../../utilities/functions';
 import { IStep } from '../../../context/app/app.interface';
 
@@ -11,31 +9,60 @@ interface UploadFileSummaryProps {
   stepData: IStep;
 }
 
+import { FileDetails } from '../../../context/app/app.interface';
+
+interface Props {
+  fileDetails: FileDetails;
+}
+
+const FileComponent : React.FC<Props>= ({fileDetails}) => {
+  return (
+    <div className='col-11'>
+      <p className="summary-title">Is Local Path: {fileDetails?.isLocalPath ? 'Yes' : 'No'}</p>
+      <p className="summary-title">CMS Type: {fileDetails?.cmsType}</p>
+      <p className="summary-title">Local Path: {fileDetails?.localPath}</p>
+      <p className="summary-title">AWS Region: {fileDetails?.awsData?.awsRegion}</p>
+      <p className="summary-title">Bucket Name: {fileDetails?.awsData?.bucketName}</p>
+      <p className="summary-title">Bucket Key: {fileDetails?.awsData?.buketKey}</p>
+    </div>
+  );
+
+
+}
+
 const UploadFileSummary = ({
   stepComponentProps,
   stepData
 }: UploadFileSummaryProps): JSX.Element => {
   const { newMigrationData } = useContext(AppContext);
+
 
   return (
     <div className="row bg-white">
-      {!isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.name) ? (
-        <>
+      {!isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.name) 
+      ? (       
           <div className="col-11 ">
-            <Icon icon="File" size="medium" className="configure_action_logo" />
-            <span className="summary-title">
-              {newMigrationData?.legacy_cms?.uploadedFile?.name || ''}
-            </span>
-          </div>
-          <div className="col-1 ">
-            <button className="btn p-0" onClick={stepComponentProps?.handleDeleteFile}>
-              {TRASH}
-            </button>
+            <FileComponent fileDetails={newMigrationData?.legacy_cms?.uploadedFile?.file_details}/>
+            <br></br> 
+            <span className="summary-title">{newMigrationData?.legacy_cms?.uploadedFile?.validation}</span>
+
+            {!newMigrationData?.legacy_cms?.uploadedFile?.isValidated 
+            ? 
+            (<p className=' ValidationMessage__v2'>Please upload the correct file</p>) : 
+            (<></>)
+          }
+
           </div>
-        </>
+
+
       ) : (
         <div className="col-12 bg-white">
           <span className="summary-title">{stepData?.empty_step_placeholder}</span>
+          {!newMigrationData?.legacy_cms?.uploadedFile?.isValidated 
+            ? 
+            (<p className=' ValidationMessage__v2'>Please upload the correct file</p>) : 
+            (<></>)
+          }
         </div>
       )}
     </div>

ui/src/components/LegacyCms/index.tsx

@@ -42,6 +42,9 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   const [internalActiveStepIndex, setInternalActiveStepIndex] = useState<number>(-1);
   const [stepperKey, setStepperKey] = useState<string>('v-mig-step');
   const { projectId = '' } = useParams();
+  const [isValidated,setisValidated] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false);
+
+
 
   const navigate = useNavigate();
   const autoVerticalStepper = useRef<any>(null);
@@ -179,6 +182,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
 
   useEffect(() => {
     setStepperKey('legacy-Vertical-stepper');
+    setisValidated(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false);
   }, []);
 
   useEffect(() => {
@@ -218,7 +222,9 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
         {isCompleted && !isMigrationLocked ? (
           <div className="col-12">
             <div className="pl-40">
-              <Button version="v2" onClick={handleOnClick}>
+              <Button version="v2"
+               disabled={! newMigrationData?.legacy_cms?.uploadedFile?.isValidated} 
+               onClick={handleOnClick}>
                 {migrationData?.legacyCMSData?.cta}
               </Button>
             </div>

ui/src/context/app/app.interface.ts

@@ -32,13 +32,25 @@ export interface User {
   country_code: string;
   organizations: Organization[];
 }
-
+export interface FileDetails {
+  isLocalPath:boolean;
+  cmsType: string;
+  localPath: string;
+  awsData: {
+  awsRegion: string;
+  bucketName:string
+  buketKey:string
+  }
+}
 export interface IFile {
   id?: string;
   name: string;
   size?: number;
   type?: string;
   url?: string;
+  validation?: string;
+  file_details: FileDetails;
+  isValidated?: boolean;
 }
 
 export interface ICMSType extends ICardType {
@@ -215,7 +227,18 @@ export const DEFAULT_FILE: IFile = {
   id: '',
   name: '',
   size: 0,
-  type: ''
+  type: '',
+  file_details:{
+    isLocalPath:false,
+    cmsType: '',
+    localPath: '',
+    awsData: {
+    awsRegion: '',
+    bucketName:'',
+    buketKey:'',
+  },
+  },
+  isValidated:false
 };
 
 export const DEFAULT_CMS_TYPE: ICMSType = {

ui/src/services/api/upload.service.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { UPLOAD_FILE_RELATIVE_URL } from '../../utilities/constants';
 import { User, SmsToken } from '../../pages/Login/login.interface';
+import { API_VERSION } from '../../utilities/constants';
 
 //Axios Calls for Upload server
 export const getCall = async (url: string, options?: any) => {
@@ -34,3 +35,14 @@ export const putCall = async (url: string, data: User, options?: any) => {
 export const uploadFilePath = () => {
   return `${UPLOAD_FILE_RELATIVE_URL}upload`;
 };
+
+
+export const fileValidation = () => {
+  try {
+    return getCall(`${UPLOAD_FILE_RELATIVE_URL}validator`)
+
+  } catch (error) {
+    return error;
+
+  }
+}