Dev

ui/src/components/Common/ProgressBar/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import './progressBar.scss'
+import cn from 'classnames'
+
+
+type ProgressBarProps = {
+  percentage: number
+  color?: string
+  /**
+   * Height of the Progress bar in pixel
+   */
+  height?: number
+  /**
+   * Border radius in pixel
+   */
+  borderRadius?: number
+  type?: 'bar' | 'circle',
+  stroke?: number
+  radius?: number | undefined
+  bgColor?: string
+}
+
+type IStyle = {
+  [key: string]: string
+}
+
+const ProgressBar = (props: ProgressBarProps) => {
+  const { percentage, color, height, borderRadius, type, radius, stroke, bgColor } = props
+
+  const containerStyle: IStyle = {}
+  const barStyle: IStyle = {
+    width: '0%',
+  };
+
+  if (height) {
+    containerStyle.height = `${height}px`
+  }
+
+  if (borderRadius) {
+    containerStyle.borderRadius = `${borderRadius}px`
+  }
+
+  if (percentage) {
+    barStyle.width = `${percentage}%`
+  }
+
+  if (color) {
+    barStyle.backgroundColor = color
+  }
+  if (type === 'circle') {
+    const normalizedRadius: any = (radius || 0 - (stroke || 0))  * 2;
+    const circumference: any = normalizedRadius * 2 * Math.PI;
+    const strokeDashoffset: any = circumference - percentage / 100 * circumference;
+    return (
+      <>
+        <svg
+          height={radius || 0 * 2}
+          width={radius || 0 * 2}
+        >
+          <circle
+            className="ProgressBar__circle"
+            stroke={bgColor}
+            fill="transparent"
+            r={normalizedRadius}
+            cx={radius}
+            cy={radius}
+          />
+          <circle
+            className="ProgressBar__circle"
+            stroke={color}
+            fill="transparent"
+            strokeWidth={stroke}
+            strokeDasharray={circumference + ' ' + circumference}
+            style={{ strokeDashoffset }}
+            r={normalizedRadius}
+            cx={radius}
+            cy={radius}
+          />
+        </svg>
+      </>
+    );
+  }
+  return (
+    <div className="ProgressBar" style={containerStyle}>
+      <div className={cn('ProgressBar__bar')} style={barStyle} />
+    </div>
+  )
+}
+
+ProgressBar.defaultProps = {
+  color: '#52c0ff',
+  borderRadius: 4, 
+  height: 5, 
+  type: "bar",
+  stroke: 4,
+  radius: 20,
+  bgColor: "white"
+} as Partial<ProgressBarProps>
+
+export default ProgressBar

ui/src/components/Common/ProgressBar/progressBar.scss

@@ -0,0 +1,19 @@
+@import '../../../scss//variables';
+
+.ProgressBar {
+	border-radius: $space-4;
+
+	overflow: hidden;
+	&__bar {
+
+		border-radius: inherit;
+		height: inherit;
+		transition: width 100ms linear;
+	}
+	&__circle{
+		stroke-width: 5%;
+		transform: rotate(-90deg);
+		transform-origin: 50% 50%;
+		transition: stroke-dashoffset 1s;
+	}
+}

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

@@ -58,9 +58,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
         }
       }));
 
-      await updateFileFormatData(selectedOrganisation?.value, projectId, {
-        file_format: selectedCard?.fileformat_id
-      });
+
 
       await fileformatConfirmation(selectedOrganisation?.value, projectId, {
         fileformat_confirmation: true

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

@@ -1,14 +1,17 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FileDetails, INewMigration } from '../../../context/app/app.interface';
-
-import { useParams } from 'react-router';
 import { fileValidation, getConfig } from '../../../services/api/upload.service';
 import { RootState } from '../../../store';
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
 import { Button, Paragraph } from '@contentstack/venus-components';
 import { isEmptyString } from '../../../utilities/functions';
+import { updateFileFormatData } from '../../../services/api/migration.service';
+import { useParams } from 'react-router';
+import { ICardType , defaultCardType} from '../../../components/Common/Card/card.interface';
 
+//import progressbar
+import ProgressBar from '../../../components/Common/ProgressBar';
 interface LoadUploadFileProps {
   stepComponentProps: any;
   currentStep: number;
@@ -43,26 +46,38 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
   /****  ALL HOOKS HERE  ****/
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
+  const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation); 
+
 
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isValidated, setIsValidated] = useState<boolean>(false);
-  const [showMessage, setShowMessage] = useState<boolean>(false);
+  const [isValidated, setIsValidated] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false);
+  const [showMessage, setShowMessage] = useState<boolean>(!!newMigrationData?.legacy_cms?.uploadedFile?.isValidated);
   const [validationMessgae, setValidationMessage] = useState<string>('');
   const [isValidationAttempted, setIsValidationAttempted] = useState<boolean>(false);
   const [isDasabled, setIsDisabled] = useState<boolean>(false);
   const [isConfigLoading, setIsConfigLoading] = useState<boolean>(true);
   const [cmsType, setCmsType]= useState('');
-  const [fileDetails, setFileDetails] = useState<FileDetails>();
+  const [fileDetails, setFileDetails] = useState<FileDetails>(newMigrationData?.legacy_cms?.uploadedFile?.file_details || {});
   const [fileExtension, setFileExtension] = useState<string>('');
+  const [progressPercentage, setProgressPercentage] = useState<number>(0);
+  const [showProgress, setShowProgress]= useState<boolean>(false);
+
+  const { projectId = '' } = useParams();
+
 
+  const [selectedCard, setSelectedCard] = useState<ICardType>(
+    newMigrationData?.legacy_cms?.selectedFileFormat ?? defaultCardType
+  );
 
   //Handle further action on file is uploaded to server
   const handleOnFileUploadCompletion = async () => {
     setIsLoading(true);
+    setProgressPercentage(30);
+    setShowProgress(true);
 
     const res: any = await fileValidation();
-  
+
     if(res?.status === 200){ 
       setIsValidated(true);
       setValidationMessage('Validated');
@@ -89,7 +104,21 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
           }
         }
       };
+
+      await updateFileFormatData(selectedOrganisation?.value, projectId, {
+        file_format: newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id?.toString(),
+        file_path: res?.data?.file_details?.localPath,
+        is_fileValid: res?.status == 200 ? true : false,
+        awsDetails:{
+          awsRegion: res?.data?.file_details?.awsData?.awsRegion,
+          bucketName: res?.data?.file_details?.awsData?.bucketName,
+          buketKey: res?.data?.file_details?.awsData?.buketKey
+        }
+      });
+
       dispatch(updateNewMigrationData(newMigrationDataObj));
+
+
 
       props.handleStepChange(props?.currentStep, true);
 
@@ -98,12 +127,52 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
     else{
       setIsValidated(false);
       setValidationMessage('Validation Falied');
-      setIsValidationAttempted(true)
+      setIsValidationAttempted(true);
+      setProgressPercentage(100);
+      await updateFileFormatData(selectedOrganisation?.value, projectId, {
+        file_format: newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id?.toString(),
+        file_path: res?.data?.file_details?.localPath,
+        is_fileValid: res?.status == 200 ? true : false,
+        awsDetails:{
+          awsRegion: res?.data?.file_details?.awsData?.awsRegion,
+          bucketName: res?.data?.file_details?.awsData?.bucketName,
+          buketKey: res?.data?.file_details?.awsData?.buketKey
+        }
+      });
+      const newMigrationDataObj: INewMigration = {
+        ...newMigrationData,
+        legacy_cms: {
+          ...newMigrationData?.legacy_cms,
+          uploadedFile: {
+            name: res?.data?.localPath,
+            url: res?.data?.localPath,
+            validation: res?.data?.message,
+            isValidated: res?.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
+              }
+            }
+
+          }
+        }
+      };
+
+      dispatch(updateNewMigrationData(newMigrationDataObj));
 
     }
 
     setShowMessage(true);
     setIsLoading(false);
+    setProgressPercentage(100);
+    setTimeout(() => {
+      setShowProgress(false); 
+    }, 1000);
 
 
   };
@@ -132,6 +201,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
           uploadedFile: {
             name: res?.data?.localPath,
             url: res?.data?.localPath,
+            isValidated: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
             file_details: {
               isLocalPath: res?.data?.isLocalPath,
               cmsType: res?.data?.cmsType,
@@ -147,7 +217,27 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
       };
 
       dispatch(updateNewMigrationData(newMigrationDataObj));
-
+      if(selectedCard?.fileformat_id && res?.data?.awsData ){
+        await updateFileFormatData(selectedOrganisation?.value, projectId, {
+          file_format: selectedCard?.fileformat_id?.toString(),
+          file_path: '',
+          is_fileValid: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
+          awsDetails:{
+            awsRegion: res?.data?.awsData?.awsRegion,
+            bucketName: res?.data?.awsData?.bucketName,
+            buketKey: res?.data?.awsData?.buketKey
+          }
+        });
+
+      }
+
+
+    if (res?.data?.localPath !== newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath) {
+      setIsDisabled(false); 
+      setShowMessage(true);
+      setValidationMessage('');
+    }
+
   }
   else if(! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) && 
     newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !== res?.data?.cmsType.toLowerCase()
@@ -178,7 +268,13 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
     if(newMigrationData?.legacy_cms?.uploadedFile?.isValidated){
       setIsValidated(true);
       setValidationMessage('Validated');
-      props.handleStepChange(props?.currentStep, true);  
+      setIsDisabled(true);
+      props.handleStepChange(props?.currentStep, true);
+
+    }
+    else{
+      setIsValidated(false);
+      setValidationMessage('Validation Falied');
     }
 
   },[isValidated,newMigrationData])
@@ -201,12 +297,20 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
             }
 
           </div>
+          {showProgress && 
+            <div className='bar-container'>
+              <ProgressBar percentage={progressPercentage} type='bar' color='#6c5ce7'/>
+          </div>
+          }
+
            <Button className="validation-cta" buttonType="secondary"
            onClick={handleOnFileUploadCompletion}
            isLoading={isLoading}
            version={"v2"}
            disabled={isDasabled}>Validate</Button>
+
         </div>
+
       </div>
     </div>
   );

ui/src/components/LegacyCms/index.tsx

@@ -167,13 +167,18 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
       ) {
         setInternalActiveStepIndex(2);
       }
-
       dispatch(updateNewMigrationData({
         ...newMigrationData,
         legacy_cms: {
           selectedCms: selectedCmsData,
           selectedFileFormat: selectedFileFormatData || defaultCardType,
-          uploadedFile: newMigrationData?.legacy_cms?.uploadedFile, //need to add backend data once endpoint exposed.
+          uploadedFile: {
+            file_details:{
+              localPath: legacyCMSData?.file_path,
+              awsData: legacyCMSData?.awsDetails
+            },
+            isValidated: legacyCMSData?.is_fileValid
+          }, //need to add backend data once endpoint exposed.
           affix: legacyCMSData?.affix || newMigrationData?.legacy_cms?.affix || '',
           isFileFormatCheckboxChecked: true, //need to add backend data once endpoint exposed.
           isRestictedKeywordCheckboxChecked: true //need to add backend data once endpoint exposed.

ui/src/components/LegacyCms/legacyCms.scss

@@ -120,4 +120,11 @@
   line-height: 185%;
   color: $color-base-gray-20;
   margin-bottom: $space-10;
+}
+.bar-container{ 
+  height: 10px;
+  width: 592px;
+  align-items: center;
+  margin-left: 20px !important;
+  margin-top: 10px;
 }

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

@@ -54,7 +54,7 @@ export interface IFile {
   url?: string;
   validation?: string;
   file_details?: FileDetails;
-  isValidated?: boolean;
+  isValidated: boolean;
 }
 
 export interface ICMSType extends ICardType {