Skip to content

[CMG-92] #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 6, 2024
Merged

[CMG-92] #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7af1553
reafctor:UI upload
AishDani May 6, 2024
c8354f1
Merge branch 'dev' of github.com:contentstack/migration-v2-node-serve…
AishDani May 6, 2024
f4ad95f
refactor:PR comments resolved
AishDani May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 72 additions & 69 deletions ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -34,6 +33,7 @@ interface LoadSelectCmsProps {
}

const LoadSelectCms = (props: LoadSelectCmsProps) => {

/**** ALL HOOKS HERE ****/
const { migrationData, newMigrationData, updateNewMigrationData, selectedOrganisation } =
useContext(AppContext);
Expand All @@ -45,38 +45,33 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
const [searchText, setSearchText] = useState<string>('');
const [cmsFilterStatus, setCmsFilterStatus] = useState<IFilterStatusType>({});
const [cmsFilter, setCmsFilter] = useState<string[]>([]);
const [cmsType, setCmsType] = useState<string | null>(newMigrationData?.legacy_cms?.selectedCms?.title?.toLowerCase());

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
Expand All @@ -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

Expand All @@ -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);

// Determine if a new card should be selected
const newSelectedCard =
filteredCmsData?.find((cms) => cms?.cms_id === selectedCard?.cms_id) ||
filteredCmsData[0] ||
null;
//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)
)
: [];

if (newSelectedCard?.cms_id !== selectedCard?.cms_id) {
setCmsData(_filterCmsData);




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 = {
Expand All @@ -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
});
}

}
};

Expand All @@ -158,9 +155,17 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
filterCMSData(searchText);
}, [cmsFilter]);

return (
<div className="row bg-white action-content-wrapper p-3">
{/* <div className="col-12">
useEffect(()=>{
handleDirectSelection(selectedCard)
},[cmsType,selectedCard])


return (
<div>

{(cmsType === 'sitecore' || cmsType === 'drupal') && (
<div className="row bg-white action-content-wrapper p-3">
<div className="col-12">
<div className="service_list_search">
<Search
className="service_list_search_bar"
Expand All @@ -171,41 +176,29 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
version="v2"
type="secondary"
onChange={(text: string) => {
setSearchText(text.toLowerCase());
filterCMSData(text.toLowerCase());
}}
setSearchText(text?.toLowerCase());
filterCMSData(text?.toLowerCase());
}}
/>

<div className="service_list_search_button">
<FilterModal
title="CMS"
list={migrationData?.legacyCMSData?.cmsFilterList}
status={cmsFilterStatus}
applyFilter={applyCMSFilter}
isMulti={true}
canSearch={true}
searchPlaceholder="Search CMS"
iconSize="small"
/>
</div>
</div>
<Line type="solid" />
</div> */}
<div className="col-12">
<Line type="solid" />
</div>

<div className="col-12">
{cmsData && validateArray(cmsData) ? (
<div className="service_list">
{cmsData?.map((data: ICMSType) => (
<Card
key={data?.title}
data={data}
onCardClick={handleCardClick}
onCardClick={()=>{return}}
selectedCard={selectedCard}
idField="cms_id"
/>
))}
</div>
) : (
<div className="action-search-not-found-container" style={{ maxHeight: '32rem' }}>
<div className="action-search-not-found-container" style={{ maxHeight: '32rem' }}>
<EmptyState
heading={<div className="empty_search_heading">No matching CMS found!</div>}
img={SEARCH_ICON}
Expand All @@ -216,9 +209,19 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
}
/>
</div>
)}
)}
</div>
</div>)}

{isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.title) &&
(<div className="col-12 bg-white p-3">
<span className="summary-title">Please enter the correct CMS</span>
</div>)
}

</div>


);
};

Expand Down
16 changes: 10 additions & 6 deletions ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,16 @@ interface Props {
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>
{fileDetails?.isLocalPath ?
(<div>
<p className="summary-title">Local Path: {fileDetails?.localPath}</p>
</div>) :
(<div>
<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>)}


</div>
);
};
Expand Down
24 changes: 12 additions & 12 deletions ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down Expand Up @@ -164,21 +164,21 @@ const AutoVerticalStepper = React.forwardRef<
return (
<div className={`migration-vertical-stepper StepperWrapper ${className}`}>
<ol className="Vertical">
{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;
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 (
<li
id={step.step_id}
id={step?.step_id}
className={`${stepClassName} ${getGridientClass}`}
key={step.step_id}
key={step?.step_id}
style={{ paddingBottom: '40px' }}
>
<div className={`step__title ${stepTitleClassName}`}>
Expand All @@ -193,9 +193,9 @@ const AutoVerticalStepper = React.forwardRef<
<div className="action-content step-content">
<div
className={
step.step_id === 'Step1' ||
step.step_id === 'Step2' ||
step.step_id === 'Step3'
step?.step_id === 'Step1' ||
step?.step_id === 'Step2' ||
step?.step_id === 'Step3'
? ''
: 'StepperWrapper__step'
}
Expand Down