diff --git a/ui/src/components/Common/SaveChangesModal/index.tsx b/ui/src/components/Common/SaveChangesModal/index.tsx index 25fb5b09e..dad9a503a 100644 --- a/ui/src/components/Common/SaveChangesModal/index.tsx +++ b/ui/src/components/Common/SaveChangesModal/index.tsx @@ -29,7 +29,7 @@ const SaveChangesModal = (props: Props) => { className="text-capitalize" /> - You have unsaved changes on content type {props?.otherCmsTitle || ''}. Save your changes if you don't want to lose them. + You have unsaved changes on content type {props?.otherCmsTitle ?? ''}. Save your changes if you don't want to lose them. diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 82c9af4bd..dbe038206 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -790,8 +790,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re if (field?.ContentstackFieldType === 'group') { groupId = field?.uid; data?.push({ ...field, child: [] }); - } else { - if (field?.uid?.startsWith(groupId + '.')) { + } else if (field?.uid?.startsWith(groupId + '.')) { const obj = data[data?.length - 1]; if (Object.hasOwn(obj, 'child')) { obj?.child?.push(field); @@ -801,7 +800,6 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re } else { data.push({ ...field, child: [] }); } - } }); setNestedList(data); } @@ -821,7 +819,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re data?.uid !== 'title') && (value?.uid !== 'url' && data?.uid !== 'url') && - !fieldTypes.has(value?.data_type || '') && + !fieldTypes.has(value?.data_type ?? '') && !value?.field_metadata?.multiline && !value?.enum && !value?.field_metadata?.allow_rich_text && @@ -1085,36 +1083,43 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re option = [{ label: OptionsForEachRow, value: OptionsForEachRow }]; } - const OptionValue: FieldTypes = - OptionsForRow.length === 1 && (existingField[data?.uid] || updatedExstingField[data?.uid] ) && - (OptionsForRow[0]?.value?.uid === 'url' || OptionsForRow[0]?.value?.uid === 'title' || OptionsForRow[0]?.value?.data_type === 'group' || OptionsForRow[0]?.value?.data_type === 'reference') - ? { - label: OptionsForRow[0]?.value?.display_name, - value: OptionsForRow[0]?.value, - isDisabled: true - } - : (OptionsForRow.length === 0 || (OptionsForRow.length > 0 && OptionsForRow.every((item)=>item.isDisabled) - && (!existingField[data?.uid] || ! updatedExstingField[data?.uid] ) )) - ? { - label: dummy_obj[data?.ContentstackFieldType]?.label, - value: dummy_obj[data?.ContentstackFieldType]?.label, - isDisabled: data?.ContentstackFieldType === 'text' || - data?.ContentstackFieldType === 'group' || - data?.ContentstackFieldType === 'url' || - data?.otherCmsType === "reference" - } - : { - label: `${selectedOption} matches`, - value: `${selectedOption} matches`, - isDisabled: false - }; - - const adjustedOptions = (OptionsForRow.length === 0 && !contentTypeSchema) ? option : - (OptionsForRow.length > 0 && OptionsForRow.every((item)=>item.isDisabled) && OptionValue.label === dummy_obj[data?.ContentstackFieldType]?.label) ? [] - : OptionsForRow.map((option: OptionsType) => ({ + let OptionValue: FieldTypes; + if (OptionsForRow.length === 1 && (existingField[data?.uid] || updatedExstingField[data?.uid] ) && + (OptionsForRow[0]?.value?.uid === 'url' || OptionsForRow[0]?.value?.uid === 'title' || OptionsForRow[0]?.value?.data_type === 'group' || OptionsForRow[0]?.value?.data_type === 'reference')) { + OptionValue = { + label: OptionsForRow[0]?.value?.display_name, + value: OptionsForRow[0]?.value, + isDisabled: true + } + } else if ((OptionsForRow.length === 0 || (OptionsForRow.length > 0 && OptionsForRow.every((item)=>item.isDisabled) && (!existingField[data?.uid] || ! updatedExstingField[data?.uid] ) ))) { + OptionValue = { + label: dummy_obj[data?.ContentstackFieldType]?.label, + value: dummy_obj[data?.ContentstackFieldType]?.label, + isDisabled: data?.ContentstackFieldType === 'text' || + data?.ContentstackFieldType === 'group' || + data?.ContentstackFieldType === 'url' || + data?.otherCmsType === "reference" + } + } else { + OptionValue = { + label: `${selectedOption} matches`, + value: `${selectedOption} matches`, + isDisabled: false + }; + } + + let optionResult: OptionsType[]; + + if (OptionsForRow.length > 0 && OptionsForRow.every((item)=>item.isDisabled) && OptionValue.label === dummy_obj[data?.ContentstackFieldType]?.label) { + optionResult = [] + } else { + optionResult = OptionsForRow.map((option: OptionsType) => ({ ...option, isDisabled: selectedOptions.includes(option?.label ?? '') })); + } + + const adjustedOptions = (OptionsForRow.length === 0 && !contentTypeSchema) ? option : optionResult; return (
@@ -1153,7 +1158,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re useEffect(() => { if (isUpdated) { - setTableData(updatedRows as FieldMapType[]); + setTableData(updatedRows); setExistingField(updatedExstingField); setSelectedOptions(updatedSelectedOptions); setSelectedEntries(updatedRows); @@ -1284,10 +1289,9 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re const { status } = await resetToInitialMapping( orgId, projectID, - selectedContentType?.id || '', + selectedContentType?.id ?? '', dataCs ); - //setOtherContentType(); setExistingField({}); setContentTypeSchema([]); setContentTypeMapped({}); @@ -1316,14 +1320,17 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re type: 'error' }); } else { - const { data } = await fetchExistingContentType(projectId, otherContentType?.id || ''); + const { data } = await fetchExistingContentType(projectId, otherContentType?.id ?? ''); const index = contentTypesList.findIndex(ct => ct?.uid === data?.uid); - if(index != -1){ - contentTypesList[index] = data; + + const contentTypesArr: ContentTypeList[] = contentTypesList; + + if(index != -1) { + contentTypesArr[index] = data; } - setContentTypesList(contentTypesList) + setContentTypesList(contentTypesArr); setContentTypeSchema(data?.schema) } } @@ -1590,7 +1597,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re rowSelectCheckboxProp={{ key: '_canSelect', value: true }} name={{ singular: '', - plural: `${totalCounts === 0 ? `Count` : ''}` + plural: `${totalCounts === 0 ? 'Count' : ''}` }} />
diff --git a/ui/src/components/SchemaModal/index.scss b/ui/src/components/SchemaModal/index.scss index 8065e9dd7..996280089 100644 --- a/ui/src/components/SchemaModal/index.scss +++ b/ui/src/components/SchemaModal/index.scss @@ -22,8 +22,9 @@ display: flex; justify-content: flex-start; padding: 0; + text-align: left; &:hover { - .title { + .field-title { color: $color-brand-primary-base; } .icons { @@ -63,7 +64,7 @@ } } } - & > .title { + & > .field-title { color: $color-brand-primary-base; font-weight: $font-weight-semi-bold; } @@ -75,12 +76,9 @@ font-weight: $font-weight-regular; line-height: $line-height-reset !important; opacity: 1; - overflow: hidden; padding: 0.625rem 0; - text-overflow: ellipsis; text-transform: capitalize; transition: opacity 0.5s linear, width 300ms linear; - white-space: nowrap; width: 12.5rem; } .icons { @@ -103,7 +101,7 @@ } } & > ul { - padding-left: 0.125rem; + padding-left: 1.125rem; & > li { & > ul { padding-left: 1.5625rem; diff --git a/ui/src/components/SchemaModal/index.tsx b/ui/src/components/SchemaModal/index.tsx index 27bf9b88f..d55236a96 100644 --- a/ui/src/components/SchemaModal/index.tsx +++ b/ui/src/components/SchemaModal/index.tsx @@ -34,11 +34,11 @@ const getTopLevelIcons = (field: FieldMapType) => { experience_container: 'PersonalizationLogoGreySmall' }; - if (field?.ContentstackFieldType === 'Single Line Textbox') { + if (field?.ContentstackFieldType === 'Single Line Textbox' || field?.ContentstackFieldType === 'single_line_text') { return icons['title']; } - if (field?.ContentstackFieldType === 'URL' || field?.ContentstackFieldType === 'single_line_text') { + if (field?.ContentstackFieldType === 'URL' || field?.ContentstackFieldType === 'url') { return icons['text']; } @@ -54,11 +54,11 @@ const getTopLevelIcons = (field: FieldMapType) => { return icons['isodate']; } - if (field?.ContentstackFieldType === 'Multi Line Textbox') { + if (field?.ContentstackFieldType === 'Multi Line Textbox' || field?.ContentstackFieldType === 'multi_line_text') { return icons['multitext']; } - if (field?.ContentstackFieldType === 'HTML Rich text Editor') { + if (field?.ContentstackFieldType === 'HTML Rich text Editor' || field?.ContentstackFieldType === 'html') { return icons['rte']; } @@ -77,7 +77,7 @@ const getTopLevelIcons = (field: FieldMapType) => { return icons['boolean']; } - if (field?.ContentstackFieldType === 'Reference') { + if (field?.ContentstackFieldType === 'Reference' || field?.ContentstackFieldType === 'refernce') { return icons['reference']; } @@ -98,10 +98,9 @@ const TreeView = ({ schema = [] }: schemaType) => { if (field?.ContentstackFieldType === 'group') { groupId = field?.uid; data?.push({ ...field, child: [] }); - } else { - if (field?.uid?.startsWith(groupId + '.')) { + } else if (field?.uid?.startsWith(groupId + '.')) { const obj = data[data?.length - 1]; - if (Object.prototype.hasOwnProperty.call(obj, 'child')) { + if (Object.hasOwn(obj, 'child')) { obj?.child?.push(field); } else { obj.child = [field]; @@ -109,13 +108,12 @@ const TreeView = ({ schema = [] }: schemaType) => { } else { data.push({ ...field, child: [] }); } - } }); setNestedList(data); }, [schema]); // Check if schema is nested - const hasNestedValue = (field: FieldMapType) => field && field?.child && field?.child?.length > 0; + const hasNestedValue = (field: FieldMapType) => field?.child && field?.child?.length > 0; // Remove Group name from its child const getChildFieldName = (text?: string, groupName?: string) => { @@ -147,7 +145,7 @@ const TreeView = ({ schema = [] }: schemaType) => { const generateNestedOutline = (item: FieldMapType, index: number) => { return ( -
    0 ? '' : 'close'}> +
      0 ? '' : 'close'}> {item?.child?.map((field: FieldMapType, nestedIndex: number) => { let fieldname = ''; if (field?.uid) { @@ -155,14 +153,14 @@ const TreeView = ({ schema = [] }: schemaType) => { } return (
    • -
      ) => { e.preventDefault(); e.stopPropagation(); handleClick(e); }} - className={`iconsholder`} + className={`iconsholder list-button`} > {hasNestedValue(field) && ( @@ -173,7 +171,7 @@ const TreeView = ({ schema = [] }: schemaType) => { {getChildFieldName(field?.otherCmsField, item?.otherCmsField)} -
      + {hasNestedValue(field) && generateNestedOutline(field, nestedIndex)}
      • @@ -200,28 +198,21 @@ const TreeView = ({ schema = [] }: schemaType) => { key={`${item?.otherCmsField}${item?.ContentstackFieldType}`} className={`${hasNested ? 'nested-child' : ''}`} > -
      ) => { e.preventDefault(); e.stopPropagation(); handleClick(e); }} > - { - document - ?.querySelector('.PageLayout__leftSidebar') - ?.classList.add('hovered'); - }} - > + {hasNested && } {item?.otherCmsField} -
      + {hasNested && generateNestedOutline(item, index)} ); diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx index 1b2eedad0..b06e09c8f 100644 --- a/ui/src/pages/Login/index.tsx +++ b/ui/src/pages/Login/index.tsx @@ -1,5 +1,5 @@ // Libraries -import { FC,useEffect, useRef, useState } from 'react'; +import { FC,useEffect, useState } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { useDispatch } from 'react-redux'; @@ -116,7 +116,7 @@ const Login: FC = () => { ...prevState, user: { ...prevState.user, - tfa_token: values?.tfa_token || '' + tfa_token: values?.tfa_token ?? '' } }; }); @@ -165,7 +165,8 @@ const Login: FC = () => { //functions for email and password validation const emailValidation = (value: string): string | undefined => { - const emailRegex = /^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})$/i; + const emailRegex = /^([a-z0-9._%+-]+@[a-z.-]+\.[a-z]{2,6})$/i; + return emailRegex.test(value) ? undefined : 'Please enter a valid email address'; }; @@ -195,26 +196,50 @@ const Login: FC = () => { } }; + const onEmailChange = (event: React.ChangeEvent): void => { + setLoginStates(prevState => updateUserEmail(prevState, event.target.value)); + } + + const updateUserEmail = (prevState: IStates, email: string): IStates => { + return { + ...prevState, + user: { + ...prevState?.user, + email: email + } + }; + }; + + const onPasswordChange = (event: React.ChangeEvent): void => { + setLoginStates(prevState => updateUserPassword(prevState, event.target.value)); + } + + const updateUserPassword = (prevState: IStates, password: string): IStates => { + return { + ...prevState, + user: { + ...prevState.user, + password: password + } + }; + }; - useEffect(()=>{ + useEffect(() => { const handlePopState = (event: PopStateEvent) => { event.preventDefault(); window.history.pushState(null, '', window.location.href); - }; if(isBlock){ window.history.pushState(null, '', window.location.href); - } window.history.pushState(null, '', window.location.href); window.addEventListener('popstate',handlePopState); - return () => { window.removeEventListener('popstate', handlePopState); }; - },[isBlock]); + return ( {loginStates?.tfa ? ( @@ -329,13 +354,7 @@ const Login: FC = () => { {...input} onChange={(event: React.ChangeEvent): void => { input?.onChange(event); - setLoginStates((prevState: IStates) => ({ - ...prevState, - user: { - ...prevState?.user, - email: event?.target?.value - } - })); + onEmailChange(event); }} name={login?.email} width="large" @@ -382,13 +401,7 @@ const Login: FC = () => { {...input} onChange={(event: React.ChangeEvent): void => { input?.onChange(event); - setLoginStates((prevState: IStates) => ({ - ...prevState, - user: { - ...prevState?.user, - password: event?.target?.value - } - })); + onPasswordChange(event); }} width="large" canShowPassword={true}