From 7af15532155404d57f9455d16c00f023bc960901 Mon Sep 17 00:00:00 2001 From: AishDani Date: Mon, 6 May 2024 12:29:33 +0530 Subject: [PATCH 1/2] reafctor:UI upload --- .../LegacyCms/Actions/LoadSelectCms.tsx | 144 +++++++++--------- .../LegacyCms/Summary/UploadFileSummary.tsx | 16 +- .../VerticalStepper/AutoVerticalStepper.tsx | 4 +- 3 files changed, 86 insertions(+), 78 deletions(-) diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx index 98a702337..d2dd92bd9 100644 --- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx @@ -14,12 +14,11 @@ import { AppContext } from '../../../context/app/app.context'; // Interface import { defaultCardType } from '../../../components/Common/Card/card.interface'; -import { ICMSType, INewMigration } from '../../../context/app/app.interface'; +import { DEFAULT_CMS_TYPE, ICMSType, INewMigration } from '../../../context/app/app.interface'; // Components import Card from '../../../components/Common/Card/card'; import { EmptyState, Line, Search } from '@contentstack/venus-components'; -import { FilterModal } from '../../../components/Common/Modal/FilterModal/FilterModal'; // Style import '../legacyCms.scss'; @@ -34,6 +33,7 @@ interface LoadSelectCmsProps { } const LoadSelectCms = (props: LoadSelectCmsProps) => { + /**** ALL HOOKS HERE ****/ const { migrationData, newMigrationData, updateNewMigrationData, selectedOrganisation } = useContext(AppContext); @@ -45,38 +45,33 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { const [searchText, setSearchText] = useState(''); const [cmsFilterStatus, setCmsFilterStatus] = useState({}); const [cmsFilter, setCmsFilter] = useState([]); + const [cmsType, setCmsType] = useState(null); const { projectId = '' } = useParams(); /**** ALL METHODS HERE ****/ //Handle Legacy cms selection - const handleCardClick = (data: ICMSType) => { - if (selectedCard?.cms_id !== data?.cms_id) { - setSelectedCard((prevState) => ({ ...data })); - - const newMigrationDataObj: INewMigration = { - ...newMigrationData, - legacy_cms: { - ...newMigrationData.legacy_cms, - selectedCms: { ...data } - } - }; - - updateNewMigrationData(newMigrationDataObj); + const handleDirectSelection = (cms:any) => { + + setSelectedCard(cms); + updateNewMigrationData({ + ...newMigrationData?.legacy_cms, + legacy_cms: { + ...newMigrationData?.legacy_cms, + selectedCms: cms } + }); + updateLegacyCMSData(selectedOrganisation?.value, projectId, { legacy_cms: cms?.cms_id }); + if(selectedCard?.title){ + props?.handleStepChange(props?.currentStep); } - //API call for saving selected CMS - updateLegacyCMSData(selectedOrganisation.value, projectId, { legacy_cms: data?.cms_id }); - - //call for Step Change - props.handleStepChange(props.currentStep); }; - //Handle CMS Filter Updation in local storage. + //Handle CMS Filter Updation in local storage. const updateCMSFilters = (cmsFilter: IFilterStatusType) => { //Get Applied CMS Parent Filters const cmsParentFilter: string[] = cmsFilter - ? Object.keys(cmsFilter).filter((key) => cmsFilter[key]) + ? Object.keys(cmsFilter)?.filter((key) => cmsFilter?.[key]) : []; //Update state @@ -91,11 +86,13 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { const getCmsType = async () => { const res: any = await fileValidation(); - const cmsType = res?.data?.file_details?.cmsType; + const cmsType = res?.data?.file_details?.cmsType?.toLowerCase(); + setCmsType(cmsType); return cmsType; }; // Filter CMS Data const filterCMSData = async (searchText: string) => { + const { all_cms = [] } = migrationData?.legacyCMSData || {}; const cmsType = await getCmsType(); // Fetch the specific CMS type @@ -106,28 +103,29 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { 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 + setCmsData(filteredCmsData); + + //Normal Search + const _filterCmsData = validateArray(all_cms) + ? filteredCmsData?.filter( + ({ title, cms_id }: ICMSType) => + //Filtering Criteria base on SearchText + title?.toLowerCase()?.includes(searchText) || cms_id?.toLowerCase()?.includes(searchText) + ) + : []; + + setCmsData(_filterCmsData); - // 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) { + + + const newSelectedCard = filteredCmsData?.some((cms) => cms?.cms_id === cmsType) ? filteredCmsData?.[0] : DEFAULT_CMS_TYPE + + setSelectedCard(newSelectedCard); + + if (newSelectedCard && selectedCard?.cms_id) { setSelectedCard(newSelectedCard); const newMigrationDataObj: INewMigration = { @@ -140,12 +138,11 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { updateNewMigrationData(newMigrationDataObj); - // API call for saving selected CMS, if a new card is selected - if (newSelectedCard) { + // API call for saving selected CMS, if a new card is selected updateLegacyCMSData(selectedOrganisation?.value, projectId, { legacy_cms: newSelectedCard?.cms_id }); - } + } }; @@ -158,9 +155,19 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { filterCMSData(searchText); }, [cmsFilter]); - return ( -
- {/*
+ useEffect(()=>{ + handleDirectSelection(selectedCard) + },[cmsType,selectedCard]) + + console.log("selected card : ", newMigrationData?.legacy_cms?.selectedCms?.title); + + + return ( +
+ + {(cmsType === 'sitecore' || cmsType === 'drupal') && ( +
+
{ version="v2" type="secondary" onChange={(text: string) => { - setSearchText(text.toLowerCase()); - filterCMSData(text.toLowerCase()); - }} + setSearchText(text?.toLowerCase()); + filterCMSData(text?.toLowerCase()); + }} /> - -
- -
- -
*/} -
+ +
+ +
{cmsData && validateArray(cmsData) ? (
{cmsData?.map((data: ICMSType) => ( {return}} selectedCard={selectedCard} idField="cms_id" /> ))}
) : ( -
+
No matching CMS found!
} img={SEARCH_ICON} @@ -216,8 +211,17 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { } />
- )} -
+ )} + {isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.title) && +
+ Please enter the correct CMS +
+ } +
+
) + } + +
); }; diff --git a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx index e671c98d0..04f3a3b21 100644 --- a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx +++ b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx @@ -18,12 +18,16 @@ interface Props { const FileComponent: React.FC = ({ fileDetails }) => { return (
-

Is Local Path: {fileDetails?.isLocalPath ? 'Yes' : 'No'}

-

CMS Type: {fileDetails?.cmsType}

-

Local Path: {fileDetails?.localPath}

-

AWS Region: {fileDetails?.awsData?.awsRegion}

-

Bucket Name: {fileDetails?.awsData?.bucketName}

-

Bucket Key: {fileDetails?.awsData?.buketKey}

+ {fileDetails?.isLocalPath ? + (
+

Local Path: {fileDetails?.localPath}

+
) : + (
+

AWS Region: {fileDetails?.awsData?.awsRegion}

+

Bucket Name: {fileDetails?.awsData?.bucketName}

+

Bucket Key: {fileDetails?.awsData?.buketKey}

)} + +
); }; diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx index d7fa3238e..cb6c5dc88 100644 --- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx +++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx @@ -164,8 +164,8 @@ const AutoVerticalStepper = React.forwardRef< return (
    - {steps.map((step: any, index: number) => { - const shouldShowIcon = step?.title !== 'Select Stack' ? !step?.lock : false; + {steps.map((step: any, index: number) => { + const shouldShowIcon = (step?.title !== 'Select Stack' && step?.title !== 'Upload File' ) ? !step?.lock : false; const DataComponent = step.data as React.ElementType; const SummeryComponent = step.summery as React.ElementType; From f4ad95f9aade2a48b2f89036ae4ab3037450fb7b Mon Sep 17 00:00:00 2001 From: AishDani Date: Mon, 6 May 2024 13:25:36 +0530 Subject: [PATCH 2/2] refactor:PR comments resolved --- .../LegacyCms/Actions/LoadSelectCms.tsx | 2 +- .../VerticalStepper/AutoVerticalStepper.tsx | 22 +++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx index 412558866..6907cf7d1 100644 --- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx @@ -45,7 +45,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { const [searchText, setSearchText] = useState(''); const [cmsFilterStatus, setCmsFilterStatus] = useState({}); const [cmsFilter, setCmsFilter] = useState([]); - const [cmsType, setCmsType] = useState(null); + const [cmsType, setCmsType] = useState(newMigrationData?.legacy_cms?.selectedCms?.title?.toLowerCase()); const { projectId = '' } = useParams(); diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx index cb6c5dc88..9831397d0 100644 --- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx +++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx @@ -46,11 +46,11 @@ const AutoVerticalStepper = React.forwardRef< } } = props; - const [stepStatus, setStepStatus] = useState(steps.map((s: any) => s.status)); + const [stepStatus, setStepStatus] = useState(steps?.map((s: any) => s.status)); useEffect(() => { if (!stepComponentProps?.step?.step_id && !stepComponentProps?.connector?.group_name) { - setStepStatus(steps.map((s: any) => s.status)); + setStepStatus(steps?.map((s: any) => s.status)); } }, [stepComponentProps?.step?.step_id, stepComponentProps?.connector?.group_name]); @@ -164,21 +164,21 @@ const AutoVerticalStepper = React.forwardRef< return (
      - {steps.map((step: any, index: number) => { + {steps?.map((step: any, index: number) => { const shouldShowIcon = (step?.title !== 'Select Stack' && step?.title !== 'Upload File' ) ? !step?.lock : false; - const DataComponent = step.data as React.ElementType; - const SummeryComponent = step.summery as React.ElementType; + const DataComponent = step?.data as React.ElementType; + const SummeryComponent = step?.summery as React.ElementType; let stepClassName = stepClassNameObject[getStepStatus(index)]; - if (step.lock) stepClassName = 'completed'; + if (step?.lock) stepClassName = 'completed'; const getGridientClass = stepClassNameObject[`${getStepStatus(index)}__${getStepStatus(index + 1)}`]; return (
    1. @@ -193,9 +193,9 @@ const AutoVerticalStepper = React.forwardRef<