Skip to content

Bugfixes #229

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 4 commits into from
Aug 6, 2024
Merged

Bugfixes #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c0f9228
SNYK errors resolved
sayalijoshi27 Aug 6, 2024
a569671
[CMG-281] - Content Mapper | When an existing stack is chosen or a ne…
sayalijoshi27 Aug 6, 2024
be71509
[CMG-282] - Content Mapper | LHS | On hover of Content type and Globa…
sayalijoshi27 Aug 6, 2024
b82bfa5
[CMG-283], [CMG-284]
sayalijoshi27 Aug 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
1 change: 1 addition & 0 deletions ui/src/components/ContentMapper/contentMapper.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,5 +138,6 @@ export interface ContentTypeMap {
export interface ContentTypeSaveHandles {
handleSaveContentType: () => void;
}
export type MouseOrKeyboardEvent = React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>;


76 changes: 41 additions & 35 deletions ui/src/components/ContentMapper/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,43 +63,47 @@
list-style-type: none;
padding: 15px 0 15px 0;
li {
align-items: center;
cursor: pointer;
display: flex;
font-size: $size-font-xl;
justify-content: space-between;
line-height: normal;
min-height: 42px;
padding: $px-8 $px-10 $px-8 $px-12;
&:hover, &.active-ct {
background-color: $color-brand-white-base;
.list-button {
align-items: center;
display: flex;
font-size: $size-font-xl;
justify-content: space-between;
line-height: normal;
min-height: 42px;
padding: $px-8 $px-10 $px-8 $px-12;

.cms-title {
align-items: center;
display: flex;
margin-right: $px-12;
max-height: 24px;
white-space: nowrap;
width: 70%;
.tippy-wrapper {
display: flex;
}
span {
color: $color-brand-primary-base;
color: $color-font-base;
margin-left: $px-10;
overflow: hidden;
text-overflow: ellipsis;
}
}
.ct-options {
justify-content: flex-end;
}
}
.cms-title {
align-items: center;
display: flex;
margin-right: $px-12;
max-height: 24px;
white-space: nowrap;
width: 80%;
.tippy-wrapper {
display: flex;
&:hover, &.active-ct {
button {
background-color: $color-brand-white-base;
}
span {
color: $color-font-base;
margin-left: $px-10;
overflow: hidden;
text-overflow: ellipsis;
.cms-title {
span {
color: $color-brand-primary-base;
}
}
}
.ct-options {
justify-content: flex-end;
}
}
}
}
.mapped-icon {
circle {
Expand Down Expand Up @@ -243,12 +247,14 @@ div .table-row {
top: $px-50;
z-index: 1;
li {
align-items: center;
cursor: pointer;
display: flex;
font-size: $size-font-medium;
justify-content: space-between;
padding: $px-8 $px-12;
button {
align-items: center;
display: flex;
justify-content: space-between;
font-size: $size-font-medium;
padding: $px-8 $px-12;
}

&:hover {
background-color: $color-base-white-10;
color: $color-brand-primary-base;
Expand Down
134 changes: 77 additions & 57 deletions ui/src/components/ContentMapper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ import {
UidMap,
ContentTypeMap,
Advanced,
ContentTypeSaveHandles
ContentTypeSaveHandles,
MouseOrKeyboardEvent
} from './contentMapper.interface';
import { ItemStatusMapProp } from '@contentstack/venus-components/build/components/Table/types';
import { ModalObj } from '../Modal/modal.interface';
Expand Down Expand Up @@ -296,10 +297,16 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
.catch((err) => {
console.error(err);
});
stackStatus();

fetchExistingContentTypes();
}, []);

useEffect(() => {
if (newMigrationData?.destination_stack?.selectedStack?.value || projectData?.destination_stack_id) {
stackStatus();
}
}, [newMigrationData?.destination_stack?.selectedStack?.value || projectData?.destination_stack_id])

// Make title and url field non editable
useEffect(() => {
tableData?.forEach((field) => {
Expand Down Expand Up @@ -390,7 +397,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
const stackStatus = async () => {
const contentTypeCount = await getStackStatus(
projectData?.org_id || selectedOrganisation?.value,
projectData?.destination_stack_id || newMigrationData?.destination_stack?.selectedStack?.value
newMigrationData?.destination_stack?.selectedStack?.value || projectData?.destination_stack_id
);

if (contentTypeCount?.data?.contenttype_count > 0) {
Expand Down Expand Up @@ -1142,21 +1149,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
);
};


useEffect(() => {
if (isUpdated) {
setTableData(updatedRows as FieldMapType[]);
setexsitingField(updatedExstingField);
setSelectedOptions(updatedSelectedOptions);
setIsUpdated(false);
}
else{
setexsitingField({});
setSelectedOptions([]);

}
}, [isUpdated, OtherContentType]);

const handleSaveContentType = async () => {
const orgId = selectedOrganisation?.uid;
const projectID = projectId;
Expand Down Expand Up @@ -1219,9 +1211,12 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
setisContentTypeMapped(true);
setisContentTypeSaved(true);

setFilteredContentTypes(filteredContentTypes?.map(ct =>
const savedCT = filteredContentTypes?.map(ct =>
ct?.id === data?.updatedContentType?.id ? { ...ct, status: data?.updatedContentType?.status } : ct
));
);

setFilteredContentTypes(savedCT);
setContentTypes(savedCT);
} else {
Notification({
notificationContent: { text: data?.error?.message },
Expand Down Expand Up @@ -1364,7 +1359,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
}

// Function to filter content types as per the status
const handleContentTypeFilter = (value: string, e: React.MouseEvent<HTMLElement>) => {
const handleContentTypeFilter = (value: string, e: MouseOrKeyboardEvent) => {
const li_list = document.querySelectorAll('.filter-wrapper li');
if(li_list) {
li_list.forEach((ele) => {
Expand All @@ -1373,8 +1368,8 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
}

(e?.target as HTMLElement)?.closest('li')?.classList?.add('active-filter');
const filteredCT = contentTypes?.filter((ct) => {return CONTENT_MAPPING_STATUS[ct?.status] === value});

const filteredCT = contentTypes?.filter((ct) => {return CONTENT_MAPPING_STATUS[ct?.status] === value});
if (value !== 'All') {
setFilteredContentTypes(filteredCT);
setCount(filteredCT?.length);
Expand Down Expand Up @@ -1434,12 +1429,20 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
<div className='filter-wrapper' ref={filterRef}>
<ul>
{Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
<>
<li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(CONTENT_MAPPING_STATUS[key], e)}>
{CONTENT_MAPPING_STATUS[key] && <span className='filter-status'>{CONTENT_MAPPING_STATUS[key]}</span> }
{STATUS_ICON_Mapping[key] && <Icon size="small" icon={STATUS_ICON_Mapping[key]} className={STATUS_ICON_Mapping[key] === 'CheckedCircle' ? 'mapped-icon' : ''} />}
</li>
</>
<li key={`${keyInd?.toString()}`}>
<button
className='list-button'
onClick={(e) => handleContentTypeFilter(CONTENT_MAPPING_STATUS[key], e)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleContentTypeFilter(CONTENT_MAPPING_STATUS[key], e);
}
}}
>
{CONTENT_MAPPING_STATUS[key] && <span className='filter-status'>{CONTENT_MAPPING_STATUS[key]}</span> }
{STATUS_ICON_Mapping[key] && <Icon size="small" icon={STATUS_ICON_Mapping[key]} className={STATUS_ICON_Mapping[key] === 'CheckedCircle' ? 'mapped-icon' : ''} />}
</button>
</li>
))}
</ul>
</div>
Expand All @@ -1452,38 +1455,51 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
<ul className="ct-list">
{filteredContentTypes?.map((content: ContentType, index: number) => {
const icon = STATUS_ICON_Mapping[content?.status] || '';


const format = (str: string) => {
const frags = str.split('_');
for (let i = 0; i < frags?.length; i++) {
frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
}
return frags.join(' ');
}
return (
<li
key={`${index.toString()}`}
className={`${active == index ? 'active-ct' : ''}`}
onClick={() => handleOpenContentType(index)}
onKeyDown={() => handleOpenContentType(index)}
>
<div className='cms-title'>
<Tooltip content={content?.type} position="bottom">
{content?.type === "content_type"
? <Icon icon={active == index ? "ContentModelsMediumActive" : "ContentModelsMedium"} size="small" />
: <Icon icon={active == index ? "GlobalFieldsMediumActive" : "GlobalFieldsMedium"} size="small" />
<li key={`${index.toString()}`} className={`${active == index ? 'active-ct' : ''}`}>
<button
type='button'
className='list-button'
onClick={() => handleOpenContentType(index)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleOpenContentType(index);
}
</Tooltip>
{content?.otherCmsTitle && <span>{content?.otherCmsTitle}</span> }
</div>
}}
>
<div className='cms-title'>
<Tooltip content={format(content?.type)} position="bottom">
{content?.type === "content_type"
? <Icon icon={active == index ? "ContentModelsMediumActive" : "ContentModelsMedium"} size="small" />
: <Icon icon={active == index ? "GlobalFieldsMediumActive" : "GlobalFieldsMedium"} size="small" />
}
</Tooltip>
{content?.otherCmsTitle && <span title={content?.otherCmsTitle}>{content?.otherCmsTitle}</span> }
</div>

<div className='d-flex align-items-center ct-options'>
<span>
{icon && (
<Tooltip content={CONTENT_MAPPING_STATUS[content?.status]} position="bottom">
<Icon size="small" icon={icon} className={icon === 'CheckedCircle' ? 'mapped-icon' : ''} />
<div className='d-flex align-items-center ct-options'>
<span>
{icon && (
<Tooltip content={CONTENT_MAPPING_STATUS[content?.status]} position="bottom">
<Icon size="small" icon={icon} className={icon === 'CheckedCircle' ? 'mapped-icon' : ''} />
</Tooltip>
)}
</span>
<span className='ml-10'>
<Tooltip content="Schema Preview" position="bottom">
<Icon icon="LivePreview" version="v2" onClick={() => handleSchemaPreview(content?.otherCmsTitle)} />
</Tooltip>
)}
</span>
<span className='ml-10'>
<Tooltip content="Schema Preview" position="bottom">
<Icon icon="LivePreview" version="v2" onClick={() => handleSchemaPreview(content?.otherCmsTitle)} />
</Tooltip>
</span>
</div>
</span>
</div>
</button>
</li>
)
})}
Expand All @@ -1501,7 +1517,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
canSearch={true}
data={tableData?.length ? [...tableData] : []}
columns={columns}
uniqueKey={'id' || ''}
uniqueKey={'id'}
isRowSelect
// fullRowSelect
itemStatusMap={itemStatusMap}
Expand Down Expand Up @@ -1553,6 +1569,10 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
}}
getSelectedRow={handleSelectedEntries}
rowSelectCheckboxProp={{ key: '_canSelect', value: true }}
name={{
singular: '',
plural: `${totalCounts === 0 ? `Count` : ''}`
}}
/>
<div className='text-end my-3 mx-3 px-1'>
<Button
Expand Down
10 changes: 6 additions & 4 deletions ui/src/components/DestinationStack/Actions/LoadStacks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,12 @@ const LoadStacks = (props: LoadFileFormatProps) => {

//Handle new stack details
const handleOnSave = async (data: Stack) => {
if (isSaving) return false;
// if (isSaving) return false;
setIsSaving(true);

if (isEmptyString(data?.name) || isEmptyString(data?.locale)) {
setIsSaving(false);
return false;
// return false;
}

// Post data to backend
Expand Down Expand Up @@ -129,8 +129,10 @@ const LoadStacks = (props: LoadFileFormatProps) => {
props.handleStepChange(props?.currentStep, true);

return true;
}
return false;
}
// else {
// return false;
// }
};

/**** ALL METHODS HERE ****/
Expand Down
5 changes: 4 additions & 1 deletion ui/src/components/Modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,14 @@ const Modal = (props: ProjectModalProps) => {
// const payload = {name: values?.name, description: values?.description || ''}

const res = await createProject(selectedOrg?.uid || '', values);
if (res?.error) {
return res?.error;
}
if (res?.status === 201) {
const projectId = res?.data?.project?.id
window.location.href = `/projects/${projectId}/migration/steps/1`;
}
return res?.error ? false : res;
return res;
};

const nameValidation = (value: string) => {
Expand Down
Loading