From 62e682b51062fdc435e6b8ce4d1039e1e05fe06b Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 12:10:51 +0530 Subject: [PATCH 1/9] [CMG-147] - Search | When search entering space multiple times, it doesnt show message ' No result found' --- ui/src/components/ProjectsHeader/index.tsx | 39 ++++++++---- ui/src/pages/Projects/index.tsx | 70 +++++++++++----------- 2 files changed, 62 insertions(+), 47 deletions(-) diff --git a/ui/src/components/ProjectsHeader/index.tsx b/ui/src/components/ProjectsHeader/index.tsx index 868cf0fd..31393ceb 100644 --- a/ui/src/components/ProjectsHeader/index.tsx +++ b/ui/src/components/ProjectsHeader/index.tsx @@ -13,6 +13,7 @@ const ProjectsHeader = ({ allProject, handleModal }: ProjectsHeaderType) => { + let interval: ReturnType; function setFocus() { clearTimeout(interval); @@ -22,18 +23,32 @@ const ProjectsHeader = ({ } const SearchProject = ( <> - {allProject && allProject?.length > 0 && ( -
- setSearchText(search)} - onClear={true} - value={searchText} - debounceSearch={true} - id="search-project-input" - /> -
- )} + {allProject && allProject?.length > 0 + ?
+ setSearchText(search)} + onClear={true} + onClick={setFocus} + value={searchText} + debounceSearch={true} + id="search-project-input" + /> +
+ : searchText?.length > 0 && ( +
+ setSearchText(search)} + onClear={true} + onClick={setFocus} + value={searchText} + debounceSearch={true} + id="search-project-input" + /> +
+ ) + } ); diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index af100a14..5a0e7557 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -16,6 +16,7 @@ import { validateObject } from '../../utilities/functions'; // Interfaces import { ProjectsType, ProjectsObj } from './projects.interface'; import { ModalObj } from '../../components/Modal/modal.interface'; +import { CTA } from '../Home/home.interface'; // Context import { AppContext } from '../../context/app/app.context'; @@ -30,7 +31,6 @@ import { NO_PROJECTS, NO_PROJECTS_SEARCH } from '../../common/assets'; // styles import './index.scss'; -import { CTA } from '../Home/home.interface'; const Projects = () => { const [data, setData] = useState({}); @@ -44,7 +44,6 @@ const Projects = () => { const outputIntro = HTMLReactParser(jsonToHtml(emptystate?.description ?? {})); - // const history = useHistory(); const location = useLocation(); const queryParams = new URLSearchParams(location.search); const search = (queryParams.get('search') ?? '').trim(); @@ -85,9 +84,6 @@ const Projects = () => { }, []); useEffect(() => { - // navigate({ - // search: searchText ? `?region=${newParam}?search=${searchText}` : `?region=${newParam}` - // }); setLoadStatus(true); if (searchText) { setProjects( @@ -139,50 +135,37 @@ const Projects = () => { const header = { component: ( - <> - - + ) }; const content = { component: (
- {loadStatus ? ( + {loadStatus + ? (
{[...Array(20)].map((e, i) => ( ))}
- ) : projects && projects?.length > 0 ? ( - projects?.map((e) => ( + ) + : projects?.map((e) => (
)) - ) : projects && projects?.length > 0 && !searchText ? ( - {emptystate?.empty_search_heading}
} - img={NO_PROJECTS_SEARCH} - description={ -
- {HTMLReactParser(jsonToHtml(emptystate?.empty_search_description ?? {}))} -
- } - version="v2" - className="no_results_found_page" - testId="no-results-found-page" - /> - ) : ( + } + + {projects && projects?.length === 0 && !searchText && ( { )} {cta?.title} - ))} + )) + } )} + + {projects && projects?.length === 0 && searchText && ( + {emptystate?.empty_search_heading}} + img={NO_PROJECTS_SEARCH} + description={ +
+ {HTMLReactParser(jsonToHtml(emptystate?.empty_search_description ?? {}))} +
+ } + version="v2" + className="no_results_found_page" + testId="no-results-found-page" + /> + )} ) }; From 5a5c9756d0cf9b792007f28412d7bc76cbd5cdb7 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 15:26:32 +0530 Subject: [PATCH 2/9] [CMG-151] - Resolution specific UI Issues --- ui/src/components/Card/card.scss | 16 +++++++++++----- ui/src/scss/_variables.scss | 1 + 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss index a1f21cbe..9c596df7 100644 --- a/ui/src/components/Card/card.scss +++ b/ui/src/components/Card/card.scss @@ -12,11 +12,17 @@ padding: 1.75rem 2rem 0.688rem; } .ProjectCard__title { - color: $color-font-black; - font-size: $size-font-2-xl; - font-weight: $font-weight-extra-bold; - height: 1.563rem; - line-height: $line-height-reset; + color: $color-font-base; + display: -webkit-box; + font-size: $size-font-xl; + font-weight: $font-weight-semi-bold; + height: $px-48; + line-height: $line-height-default; + overflow: hidden; + padding: 0; + white-space: normal; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } .ProjectCard__footer { display: flex; diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index 1d8442b8..f11bf564 100644 --- a/ui/src/scss/_variables.scss +++ b/ui/src/scss/_variables.scss @@ -93,6 +93,7 @@ $px-32: 2rem; // 32px $px-35: 2.188rem; // 36px $px-36: 2.25rem; // 36px $px-40: 2.5rem; // 40px +$px-48: 3rem; $px-50: 3.125rem; // 50px $px-60: 3.75rem; // 60px $px-70: 4.375rem; // 70px From d53d0224f1b32739274b2a5177b757df06ebfc91 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 17:35:51 +0530 Subject: [PATCH 3/9] [CMG-146], [CMG-149], [CMG-150] --- ui/src/components/Modal/index.tsx | 9 ++++----- ui/src/components/ProjectsHeader/index.tsx | 3 ++- ui/src/scss/App.scss | 22 ++++++++++++++++++---- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx index eeb3d587..9e3c0e26 100644 --- a/ui/src/components/Modal/index.tsx +++ b/ui/src/components/Modal/index.tsx @@ -47,16 +47,14 @@ const Modal = (props: ProjectModalProps) => { }; const nameValidation = (value: string) => { - - if (value === '') { + if (!value || !/^[^\s].+[^\s]$/.test(value)) { setInputValue(false); - return 'Please enter project name.'; - } else if (value && value?.length > 200) { + return 'Please enter project name.' + } else if(value && value?.length > 200) { setInputValue(false); return 'Project Name should not be more than 200 chars'; } else { setInputValue(true); - return ''; } }; @@ -68,6 +66,7 @@ const Modal = (props: ProjectModalProps) => { return ''; } }; + return ( <> {allProject && allProject?.length > 0 ?
setSearchText(search)} + onChange={(search: string) => search.replace(/\s/g, '').length ? setSearchText(search?.trim()) : setSearchText(search)} onClear={true} onClick={setFocus} value={searchText} diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 1e24a7b4..52bfa47d 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -337,12 +337,26 @@ h2 { .PageLayout__head__hamburger { display: none; } + .PageLayout__head{ + &>.PageHeader { + padding-right: $px-20; + } + } } } -.ReactModal__Overlay .ReactModal__Content .ReactModal__Content__header h3 { - color: $color-black-2121; - font-weight: bold; -} +.ReactModal__Overlay { + .ReactModal__Content { + .TextInput--negative { + .TextInput__v2 { + ::-webkit-input-placeholder{color:black!important} + } + } + .ReactModal__Content__header h3 { + color: $color-black-2121; + font-weight: bold; + } + } +} .ReactModal__Content__footer .Button{ font-size: 1rem; line-height: 100%; From e602115e1f2bf28a4e64caa75766c075208f8981 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 17:56:04 +0530 Subject: [PATCH 4/9] [CMG-141] --- ui/src/scss/App.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 52bfa47d..6d336c86 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -346,11 +346,6 @@ h2 { } .ReactModal__Overlay { .ReactModal__Content { - .TextInput--negative { - .TextInput__v2 { - ::-webkit-input-placeholder{color:black!important} - } - } .ReactModal__Content__header h3 { color: $color-black-2121; font-weight: bold; @@ -360,4 +355,8 @@ h2 { .ReactModal__Content__footer .Button{ font-size: 1rem; line-height: 100%; -} \ No newline at end of file +} + +::-webkit-input-placeholder{color:$color-black-2121!important} +::-ms-input-placeholder{color:$color-black-2121!important} +::placeholder{color:$color-black-2121!important} \ No newline at end of file From 52c7c10136857dc5286b977b6e06643f7d7919aa Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Tue, 14 May 2024 18:23:53 +0530 Subject: [PATCH 5/9] solved bugs --- ui/src/components/MainHeader/index.scss | 2 +- ui/src/components/ProjectsHeader/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index c4903139..6cb65bb1 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -49,7 +49,7 @@ color: #475161; max-width: 11.1875rem; width: auto; - overflow: hidden; + // overflow: hidden; } .Dropdown__menu--primary .Dropdown__menu__list__item, .Dropdown__menu--secondary .Dropdown__menu__list__item, .Dropdown__menu--tertiary .Dropdown__menu__list__item { max-width: 14.5rem; diff --git a/ui/src/components/ProjectsHeader/index.tsx b/ui/src/components/ProjectsHeader/index.tsx index 1a7ca84a..cc399357 100644 --- a/ui/src/components/ProjectsHeader/index.tsx +++ b/ui/src/components/ProjectsHeader/index.tsx @@ -27,6 +27,7 @@ const ProjectsHeader = ({ {allProject && allProject?.length > 0 ?
search.replace(/\s/g, '').length ? setSearchText(search?.trim()) : setSearchText(search)} onClear={true} From f5b1d231e407865e9a30a5146b1b56737638c693 Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Tue, 14 May 2024 18:45:22 +0530 Subject: [PATCH 6/9] precommit changes and bugs --- ui/public/index.html | 2 +- ui/src/components/AccountPage/index.scss | 5 +- ui/src/components/AccountPage/index.tsx | 2 +- ui/src/components/AdvancePropertise/index.tsx | 75 ++++--- ui/src/components/Card/index.tsx | 4 +- .../components/Common/AddStack/addStack.scss | 1 - .../components/Common/AddStack/addStack.tsx | 28 +-- .../ContentMapper/contentMapper.interface.ts | 12 +- ui/src/components/ContentMapper/index.scss | 2 +- ui/src/components/ContentMapper/index.tsx | 207 +++++++++--------- .../DestinationStack/Actions/LoadStacks.tsx | 18 +- .../Summary/StacksSummary.tsx | 24 +- ui/src/components/DestinationStack/index.tsx | 12 +- .../LegacyCms/Actions/LoadFileFormat.tsx | 4 +- .../LegacyCms/Actions/LoadPrefix.tsx | 4 +- .../LegacyCms/Actions/LoadSelectCms.tsx | 177 +++++++-------- .../LegacyCms/Summary/UploadFileSummary.tsx | 21 +- ui/src/components/LegacyCms/index.tsx | 5 +- ui/src/components/LegacyCms/legacyCms.scss | 2 +- ui/src/components/MainHeader/index.scss | 12 +- ui/src/components/MainHeader/index.tsx | 4 +- ui/src/components/Modal/index.tsx | 4 +- ui/src/components/ProjectsHeader/index.tsx | 43 ++-- .../projectsHeader.interface.ts | 2 +- ui/src/components/SchemaModal/index.scss | 6 +- ui/src/components/SchemaModal/index.tsx | 122 +++++------ .../Stepper/FlowStepper/FlowBlockItem.tsx | 11 +- .../Stepper/FlowStepper/FlowStepper.scss | 4 +- .../Stepper/FlowStepper/FlowStepper.tsx | 31 ++- .../Stepper/FlowStepper/flowStep.interface.ts | 4 +- .../VerticalStepper/AutoVerticalStepper.tsx | 7 +- ui/src/context/app/app.interface.ts | 8 +- ui/src/pages/Home/index.tsx | 4 +- ui/src/pages/Login/index.scss | 2 +- ui/src/pages/Login/index.tsx | 35 ++- ui/src/pages/Projects/index.tsx | 14 +- ui/src/pages/RegionalLogin/index.tsx | 4 +- ui/src/scss/App.scss | 31 ++- ui/src/scss/_variables.scss | 1 - ui/src/services/api/service.interface.ts | 2 +- ui/src/utilities/constants.interface.ts | 2 +- ui/src/utilities/constants.ts | 5 +- 42 files changed, 482 insertions(+), 481 deletions(-) diff --git a/ui/public/index.html b/ui/public/index.html index ff2a7cd3..9eb09bff 100644 --- a/ui/public/index.html +++ b/ui/public/index.html @@ -65,7 +65,7 @@ - Skip to main content + Skip to main content
diff --git a/ui/src/components/AccountPage/index.scss b/ui/src/components/AccountPage/index.scss index 71296841..830efa2a 100644 --- a/ui/src/components/AccountPage/index.scss +++ b/ui/src/components/AccountPage/index.scss @@ -143,9 +143,8 @@ .copyright_text { bottom: 1.5rem; color: $color-font-base; - font-size: .75rem; - letter-spacing: .02em; + font-size: 0.75rem; + letter-spacing: 0.02em; left: 2.5rem; position: absolute; } - diff --git a/ui/src/components/AccountPage/index.tsx b/ui/src/components/AccountPage/index.tsx index 5cb8a746..655113ec 100644 --- a/ui/src/components/AccountPage/index.tsx +++ b/ui/src/components/AccountPage/index.tsx @@ -36,7 +36,7 @@ const AccountPage = (props: AccountObj): JSX.Element => {
{props?.children}
-

{`© ${previousYear}-${currentYear} ${copyrightText}`}

+

{`© ${previousYear}-${currentYear} ${copyrightText}`}

); diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx index 6248e3e6..58b52f25 100644 --- a/ui/src/components/AdvancePropertise/index.tsx +++ b/ui/src/components/AdvancePropertise/index.tsx @@ -11,19 +11,16 @@ import { import './index.scss'; - export interface SchemaProps { fieldtype: string; value: any; rowId: string; - updateFieldSettings:(rowId:string, value:any, checkBoxChanged:boolean)=> void; - isLocalised:boolean; + updateFieldSettings: (rowId: string, value: any, checkBoxChanged: boolean) => void; + isLocalised: boolean; closeModal: () => void; - data:any + data: any; } -const AdvancePropertise = (props: SchemaProps) => { - - +const AdvancePropertise = (props: SchemaProps) => { const [toggleStates, setToggleStates] = useState({ validationRegex: props?.value?.ValidationRegex, mandatory: props?.value?.Mandatory, @@ -33,26 +30,31 @@ const AdvancePropertise = (props: SchemaProps) => { }); const handleToggleChange = (field: string, value: boolean, checkBoxChanged: boolean) => { - - setToggleStates(prevStates => ({ + setToggleStates((prevStates) => ({ ...prevStates, [field]: value - })); - - props?.updateFieldSettings(props?.rowId, {[field?.charAt(0)?.toUpperCase() + field?.slice(1)]: value}, checkBoxChanged); -}; + })); - const handleOnChange = ( field: string, event: any, checkBoxChanged: boolean) => { - setToggleStates(prevStates => ({ + props?.updateFieldSettings( + props?.rowId, + { [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: value }, + checkBoxChanged + ); + }; + + const handleOnChange = (field: string, event: any, checkBoxChanged: boolean) => { + setToggleStates((prevStates) => ({ ...prevStates, [field]: event?.target?.value - })); - - props?.updateFieldSettings(props?.rowId, {[field?.charAt(0)?.toUpperCase() + field?.slice(1)]: event?.target?.value}, checkBoxChanged); + })); - } + props?.updateFieldSettings( + props?.rowId, + { [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: event?.target?.value }, + checkBoxChanged + ); + }; - return ( <> @@ -66,7 +68,7 @@ const AdvancePropertise = (props: SchemaProps) => { value={toggleStates?.validationRegex} placeholder="Enter value" version="v2" - onChange={(e:any)=> handleOnChange("validationRegex",e, true)} + onChange={(e: any) => handleOnChange('validationRegex', e, true)} /> Options @@ -77,33 +79,36 @@ const AdvancePropertise = (props: SchemaProps) => { labelColor="primary" labelPosition="right" checked={toggleStates?.mandatory} - onChange={(e:any) => handleToggleChange("mandatory" , e?.target?.checked, true)} + onChange={(e: any) => handleToggleChange('mandatory', e?.target?.checked, true)} /> handleToggleChange("multiple" ,e?.target?.checked, true)} + onChange={(e: any) => handleToggleChange('multiple', e?.target?.checked, true)} /> handleToggleChange("unique" , e?.target?.checked,true)} + onChange={(e: any) => handleToggleChange('unique', e?.target?.checked, true)} /> - - handleToggleChange("nonLocalizable" , e?.target?.checked,true)} - /> - + + handleToggleChange('nonLocalizable', e?.target?.checked, true)} + />

If enabled, editing this field is restricted in localized entries. The field will use diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx index 9657208c..43d1e28b 100644 --- a/ui/src/components/Card/index.tsx +++ b/ui/src/components/Card/index.tsx @@ -43,7 +43,9 @@ const CardList = ({ project }: ProjectType) => {

Project Status - {PROJECT_STATUS?.[project?.status !== undefined ? project?.status : 0]} + + {PROJECT_STATUS?.[project?.status !== undefined ? project?.status : 0]} +
diff --git a/ui/src/components/Common/AddStack/addStack.scss b/ui/src/components/Common/AddStack/addStack.scss index 5eba8107..5a6647c8 100644 --- a/ui/src/components/Common/AddStack/addStack.scss +++ b/ui/src/components/Common/AddStack/addStack.scss @@ -9,4 +9,3 @@ .ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody { overflow: visible; } - diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx index 9d948f47..86a8f94d 100644 --- a/ui/src/components/Common/AddStack/addStack.tsx +++ b/ui/src/components/Common/AddStack/addStack.tsx @@ -81,24 +81,26 @@ const AddStack = (props: any): JSX.Element => { setIsLoading(false); }); - //fetch all locales - getAllLocales(props?.selectedOrganisation).then((response:any) => { - const rawMappedLocalesMapped = validateObject(response?.data) && response?.data?.locales - ? Object?.keys(response?.data?.locales)?.map((key) => ({ - uid: key, - label: response?.data?.locales[key], - value: key, - master_locale: key, - locales:[], - created_at: key - })) - : []; + //fetch all locales + getAllLocales(props?.selectedOrganisation) + .then((response: any) => { + const rawMappedLocalesMapped = + validateObject(response?.data) && response?.data?.locales + ? Object?.keys(response?.data?.locales)?.map((key) => ({ + uid: key, + label: response?.data?.locales[key], + value: key, + master_locale: key, + locales: [], + created_at: key + })) + : []; setAllLocales(rawMappedLocalesMapped); }) .catch((err: any) => { console.error(err); }); - //org id will always be there + //org id will always be there }, []); return ( <> diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts index dbdabf86..80a7662c 100644 --- a/ui/src/components/ContentMapper/contentMapper.interface.ts +++ b/ui/src/components/ContentMapper/contentMapper.interface.ts @@ -10,11 +10,11 @@ interface mapDataType { projectId: string; } interface Advanced { - ValidationRegex: string, - mandatory:boolean, - multiple:boolean, - unique:boolean, - nonLocalizable:boolean + ValidationRegex: string; + mandatory: boolean; + multiple: boolean; + unique: boolean; + nonLocalizable: boolean; } export interface ContentMapperType { content_types_heading?: string; @@ -64,7 +64,7 @@ export interface FieldMapType { uid: string; id: string; _canSelect?: boolean; - advanced:Advanced + advanced: Advanced; } export interface ItemStatus { diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index fc9d30f3..05a8e229 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -75,7 +75,7 @@ } } .disabled-field { - color: $color-font-disabled; + color: $color-font-disabled; } .action-btn-wrapper { background-color: $color-brand-white-base; diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 3259d768..e1f96e42 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -87,8 +87,8 @@ const Fields: Mapping = { }; interface ModalProps { - e:React.MouseEvent; - newIndex:number; + e: React.MouseEvent; + newIndex: number; closeModal: () => void; } const ContentMapper = () => { @@ -142,24 +142,23 @@ const ContentMapper = () => { const [isContentTypeMapped, setisContentTypeMapped] = useState(false); const [isContentTypeSaved, setisContentTypeSaved] = useState(false); const [advancePropertise, setadvancePropertise] = useState({ - validationRegex:'', + validationRegex: '', Mandatory: false, Multiple: false, Unique: false, NonLocalizable: false }); - const [isLocalised, setisLocalised] = useState(newMigrationData?.destination_stack?.selectedStack?.locales?.length > 1 ? true : false); - - + const [isLocalised, setisLocalised] = useState( + newMigrationData?.destination_stack?.selectedStack?.locales?.length > 1 ? true : false + ); const [active, setActive] = useState(null ?? 0); const [searchContentType, setSearchContentType] = useState(''); - const [rowIds, setRowIds] = useState({}) + const [rowIds, setRowIds] = useState({}); const [selectedEntries, setSelectedEntries] = useState([]); - /** ALL HOOKS Here */ const { projectId = '' } = useParams(); const navigate = useNavigate(); @@ -191,7 +190,7 @@ const ContentMapper = () => { field._canSelect = true; } }); - }) + }); useEffect(() => { if (contentTypeMapped && otherCmsTitle) { @@ -223,8 +222,8 @@ const ContentMapper = () => { acc[item?.id] = true; return acc; }, {}); - setRowIds(selectedId) - }, [tableData]) + setRowIds(selectedId); + }, [tableData]); // Method to fetch content types const fetchContentTypes = async (searchText: string) => { @@ -255,10 +254,10 @@ const ContentMapper = () => { // Method to search content types const handleSearch = async (searchCT: string) => { - setSearchContentType(searchCT) - + setSearchContentType(searchCT); + const { data } = await getContentTypes(projectId, 0, 5, searchCT || ''); //org id will always present - + setContentTypes(data?.contentTypes); setSelectedContentType(data?.contentTypes?.[0]); setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length); @@ -350,19 +349,17 @@ const ContentMapper = () => { //function to handle previous content type navigation const handlePrevClick = (e: React.MouseEvent) => { const newIndex = currentIndex > 0 ? currentIndex - 1 : 0; - if(isDropDownChanged){ - handleSaveContentTypeModal(e, newIndex) - - }else{ + if (isDropDownChanged) { + handleSaveContentTypeModal(e, newIndex); + } else { setCurrentIndex(newIndex); openContentType(e, newIndex); document.querySelectorAll('.ct-list li').forEach((ctLi, ind) => { if (newIndex === ind) { ctLi?.classList?.add('active-ct'); } - }) - - } + }); + } }; // function to handle next content type navigation @@ -370,24 +367,20 @@ const ContentMapper = () => { if (currentIndex < contentTypes?.length - 1) { const newIndex = currentIndex + 1; - if(isDropDownChanged){ - handleSaveContentTypeModal(e, newIndex) - - }else{ + if (isDropDownChanged) { + handleSaveContentTypeModal(e, newIndex); + } else { setCurrentIndex(newIndex); openContentType(e, newIndex); document.querySelectorAll('.ct-list li').forEach((ctLi, ind) => { if (newIndex === ind) { ctLi?.classList?.add('active-ct'); } - }) - - } - + }); + } } }; - const SaveContentType = (props:ModalProps) => { - + const SaveContentType = (props: ModalProps) => { return ( <> @@ -395,44 +388,48 @@ const ContentMapper = () => {

Hey there! You have unsaved changes on this page.

- - - - - + + + ); - } - const handleSaveContentTypeModal = (e:any, newIndex:number) => { + }; + const handleSaveContentTypeModal = (e: any, newIndex: number) => { return cbModal({ - component: (props: ModalObj) => ( - - ), + component: (props: ModalObj) => , modalProps: { shouldCloseOnOverlayClick: true, size: 'small' } }); - } + }; // Function to get exisiting content types list const fetchExistingContentTypes = async () => { @@ -441,26 +438,23 @@ const ContentMapper = () => { setContentTypesList(data?.contentTypes); } }; - - const updateFieldSettings = (rowId:string, updatedSettings:any, checkBoxChanged:boolean) => { + + const updateFieldSettings = (rowId: string, updatedSettings: any, checkBoxChanged: boolean) => { setisDropDownCHanged(checkBoxChanged); //setadvancePropertise(...updatedSettings); - - const newTableData = tableData?.map(row => { + + const newTableData = tableData?.map((row) => { if (row?.uid === rowId) { - setadvancePropertise({...row?.advanced, ...updatedSettings}); - - return { ...row, advanced: { ...row?.advanced, ...updatedSettings } }; + setadvancePropertise({ ...row?.advanced, ...updatedSettings }); + + return { ...row, advanced: { ...row?.advanced, ...updatedSettings } }; } return row; - }); - - + }); + setTableData(newTableData); }; - - const handleOnClick = (title: string) => { return cbModal({ component: (props: ModalObj) => ( @@ -491,16 +485,16 @@ const ContentMapper = () => { ); }; - + // Function to handle selected fields const handleSelectedEntries = (singleSelectedRowIds: any, selectedData: any) => { - const selectedObj: any = {} + const selectedObj: any = {}; singleSelectedRowIds.forEach((uid: any) => { selectedObj[uid] = true; - }) - setRowIds(selectedObj) - setSelectedEntries(selectedData) - } + }); + setRowIds(selectedObj); + setSelectedEntries(selectedData); + }; // Method for change select value const handleValueChange = (value: FieldTypes, rowIndex: string) => { @@ -520,13 +514,7 @@ const ContentMapper = () => { // fetchFields(contentTypes?.[i]?.id, searchText); }; - const handleAdvancedSetting = ( - fieldtype: string, - fieldvalue: any, - rowId: string, - data: any - ) => { - + const handleAdvancedSetting = (fieldtype: string, fieldvalue: any, rowId: string, data: any) => { return cbModal({ component: (props: ModalObj) => ( { maxWidth="290px" isClearable={false} options={option} - isDisabled={data?.ContentstackFieldType === "group" || data?.otherCmsField === 'title' || data?.otherCmsField === 'url'} + isDisabled={ + data?.ContentstackFieldType === 'group' || + data?.otherCmsField === 'title' || + data?.otherCmsField === 'url' + } /> - + { } /> - ); }; - const handleFieldChange = (selectedValue: FieldTypes, rowIndex: string) => { + const handleFieldChange = (selectedValue: FieldTypes, rowIndex: string) => { setisDropDownCHanged(true); setexsitingField((prevOptions) => ({ ...prevOptions, [rowIndex]: { label: selectedValue?.label, value: selectedValue?.value } })); setadvancePropertise({ - validationRegex: selectedValue?.value?.format, - Mandatory: selectedValue?.value?.mandatory, - Multiple: selectedValue?.value?.multiple, - Unique: selectedValue?.value?.unique, - NonLocalizable: selectedValue?.value?.non_localizable - }); + validationRegex: selectedValue?.value?.format, + Mandatory: selectedValue?.value?.mandatory, + Multiple: selectedValue?.value?.multiple, + Unique: selectedValue?.value?.unique, + NonLocalizable: selectedValue?.value?.non_localizable + }); if (isDropDownChanged && isContentTypeSaved) { setSelectedOptions((prevSelected) => { @@ -630,22 +621,21 @@ const ContentMapper = () => { const updatedRows = tableData.map((row) => { if (row?.uid === rowIndex) { - - return { - ...row, + return { + ...row, contentstackField: selectedValue?.label, - advanced:{ + advanced: { validationRegex: selectedValue?.value?.format, Mandatory: selectedValue?.value?.mandatory, Multiple: selectedValue?.value?.multiple, Unique: selectedValue?.value?.unique, NonLocalizable: selectedValue?.value?.non_localizable } - }; + }; } return row; }); - + setTableData(updatedRows as FieldMapType[]); }; @@ -752,7 +742,7 @@ const ContentMapper = () => { const adjustedOptions = OptionsForRow.map((option: optionsType) => ({ ...option, isDisabled: selectedOptions?.includes(option?.label ?? '') - })); + })); return (
@@ -770,16 +760,16 @@ const ContentMapper = () => { version="v2" icon="Setting" size="small" - onClick={() =>{ - const value ={ + onClick={() => { + const value = { ValidationRegex: data?.advanced?.ValidationRegex, Mandatory: data?.advanced?.mandatory, - Multiple: data?.advanced?.multiple, + Multiple: data?.advanced?.multiple, Unique: data?.advanced?.unique, - NonLocalizable: data?.advanced?.nonLocalizable - } - handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data)} - } + NonLocalizable: data?.advanced?.nonLocalizable + }; + handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data); + }} />
); @@ -795,7 +785,6 @@ const ContentMapper = () => { selectedContentType?.otherCmsUid && OtherContentType?.label ) { - setcontentTypeMapped((prevSelected) => ({ ...prevSelected, [otherCmsTitle]: OtherContentType?.label @@ -941,7 +930,7 @@ const ContentMapper = () => { const adjustedOption = options.map((option: any) => ({ ...option, isDisabled: contentTypeMapped && Object.values(contentTypeMapped).includes(option?.label) - })); + })); return (
diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx index 661e866c..53803041 100644 --- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx @@ -38,8 +38,8 @@ const LoadStacks = (props: LoadFileFormatProps) => { label: 'Loading stacks...', value: 'loading', default: false, - master_locale:'', - locales:[], + master_locale: '', + locales: [], created_at: '' } ]; @@ -162,12 +162,12 @@ const LoadStacks = (props: LoadFileFormatProps) => { //Set selected Stack const selectedStackData = validateArray(stackArray) - ? stackArray.find( - (stack: IDropDown) => - stack?.value === newMigrationData?.destination_stack?.selectedStack?.value - ) - : DEFAULT_DROPDOWN; - + ? stackArray.find( + (stack: IDropDown) => + stack?.value === newMigrationData?.destination_stack?.selectedStack?.value + ) + : DEFAULT_DROPDOWN; + setSelectedStack(selectedStackData); const newMigrationDataObj: INewMigration = { @@ -195,7 +195,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { }} onSubmit={handleOnSave} defaultValues={defaultStack} - selectedOrganisation= {selectedOrganisation?.value} + selectedOrganisation={selectedOrganisation?.value} {...props} /> ), diff --git a/ui/src/components/DestinationStack/Summary/StacksSummary.tsx b/ui/src/components/DestinationStack/Summary/StacksSummary.tsx index ebb20d70..b6c3bac5 100644 --- a/ui/src/components/DestinationStack/Summary/StacksSummary.tsx +++ b/ui/src/components/DestinationStack/Summary/StacksSummary.tsx @@ -2,8 +2,12 @@ import { useContext, useState } from 'react'; import StepIcon from '../../../components/Stepper/FlowStepper/StepIcon'; import { AppContext } from '../../../context/app/app.context'; import { isEmptyString } from '../../../utilities/functions'; -import { DEFAULT_DROPDOWN, IDropDown, INewMigration, IStep } from '../../../context/app/app.interface'; - +import { + DEFAULT_DROPDOWN, + IDropDown, + INewMigration, + IStep +} from '../../../context/app/app.interface'; import './summary.scss'; import { Icon, Select } from '@contentstack/venus-components'; @@ -11,7 +15,6 @@ interface StacksSummaryProps { stepData: IStep; } - const StacksSummary = (props: StacksSummaryProps): JSX.Element => { const { newMigrationData } = useContext(AppContext); const [selectedStack, setSelectedStack] = useState( @@ -26,7 +29,7 @@ const StacksSummary = (props: StacksSummaryProps): JSX.Element => { value: 'loading', default: false, master_locale: '', - locales:[], + locales: [], created_at: '' } ]; @@ -36,7 +39,7 @@ const StacksSummary = (props: StacksSummaryProps): JSX.Element => {
{/* {!isEmptyString(newMigrationData?.destination_stack?.selectedStack?.label) && !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value) && ( */} -
+
@@ -45,7 +48,9 @@ const StacksSummary = (props: StacksSummaryProps): JSX.Element => { className="stackselect" version={'v2'} options={allStack} - onChange={()=>{return}} + onChange={() => { + return; + }} value={selectedStack} isSearchable={true} isClearable={true} @@ -64,7 +69,12 @@ const StacksSummary = (props: StacksSummaryProps): JSX.Element => {
- {return}}> + { + return; + }} + > Create New Stack diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx index f08cae35..866eca49 100644 --- a/ui/src/components/DestinationStack/index.tsx +++ b/ui/src/components/DestinationStack/index.tsx @@ -84,7 +84,7 @@ const DestinationStackComponent = ({ value: destination_stack, label: '', master_locale: '', - locales:[], + locales: [], created_at: '' }; @@ -164,10 +164,7 @@ const DestinationStackComponent = ({ //Check for migration Status and lock. // Status where Migration is to be Locked: - setIsMigrationLocked( - projectData?.status === 2 || - projectData?.status === 5 - ); + setIsMigrationLocked(projectData?.status === 2 || projectData?.status === 5); }; fetchCMSData(); }, []); @@ -190,7 +187,10 @@ const DestinationStackComponent = ({ internalActiveStepIndex > -1 && internalActiveStepIndex === migrationData?.destinationStackData?.all_steps?.length - 1 ) { - autoVerticalStepperComponent?.current?.handleDynamicStepChange(internalActiveStepIndex, true); + autoVerticalStepperComponent?.current?.handleDynamicStepChange( + internalActiveStepIndex, + true + ); } } }, [internalActiveStepIndex]); diff --git a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx index 3c1dec75..3a9f6252 100644 --- a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx @@ -46,7 +46,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => { /**** ALL METHODS HERE ****/ - const handleBtnClick = async(e: MouseEvent) => { + const handleBtnClick = async (e: MouseEvent) => { e.preventDefault(); if (!isEmptyString(selectedCard?.fileformat_id) && isCheckedBoxChecked) { updateNewMigrationData({ @@ -59,7 +59,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => { await updateFileFormatData(selectedOrganisation?.value, projectId, { file_format: selectedCard?.fileformat_id }); - + await fileformatConfirmation(selectedOrganisation?.value, projectId, { fileformat_confirmation: isCheckedBoxChecked }); diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx index 4e5fb541..b43f73ed 100644 --- a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx @@ -43,7 +43,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => { /**** ALL METHODS HERE ****/ //Handle Prefix Change - const handleOnBlur = async(e: MouseEvent) => { + const handleOnBlur = async (e: MouseEvent) => { e.preventDefault(); if (!isEmptyString(prefix) && !isError && isCheckedBoxChecked) { const newMigrationDataObj: INewMigration = { @@ -128,7 +128,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => { version="v2" error={isError} /> - {isError &&

Affix should not be more than 5 chars

} + {isError &&

Affix should not be more than 5 chars

}
- - ); }; diff --git a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx index 04f3a3b2..55d3caf0 100644 --- a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx +++ b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx @@ -18,16 +18,17 @@ interface Props { const FileComponent: React.FC = ({ fileDetails }) => { return (
- {fileDetails?.isLocalPath ? - (
-

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/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx index 856a9720..13db987a 100644 --- a/ui/src/components/LegacyCms/index.tsx +++ b/ui/src/components/LegacyCms/index.tsx @@ -177,10 +177,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr //Check for migration Status and lock. // Status where Migration is to be Locked: - setIsMigrationLocked( - projectData?.status === 2 || - projectData?.status === 5 - ); + setIsMigrationLocked(projectData?.status === 2 || projectData?.status === 5); }; fetchCMSData(); diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss index 8d1cc71c..c3918f41 100644 --- a/ui/src/components/LegacyCms/legacyCms.scss +++ b/ui/src/components/LegacyCms/legacyCms.scss @@ -1,4 +1,4 @@ -@import '../../scss/variables'; +@import '../../scss/variables'; .service_list { text-align: center; display: flex; diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index 6cb65bb1..20aea498 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -23,8 +23,8 @@ display: flex; height: 2.5rem; justify-content: center; - padding: .5rem; - text-decoration: none; + padding: 0.5rem; + text-decoration: none; } a:focus { border-radius: 5px; @@ -51,7 +51,9 @@ width: auto; // overflow: hidden; } - .Dropdown__menu--primary .Dropdown__menu__list__item, .Dropdown__menu--secondary .Dropdown__menu__list__item, .Dropdown__menu--tertiary .Dropdown__menu__list__item { + .Dropdown__menu--primary .Dropdown__menu__list__item, + .Dropdown__menu--secondary .Dropdown__menu__list__item, + .Dropdown__menu--tertiary .Dropdown__menu__list__item { max-width: 14.5rem; } } @@ -60,6 +62,6 @@ line-height: $line-height-reset; } .Dropdown__header__value { - color: $color-black-222!important; + color: $color-black-222 !important; line-height: $line-height-reset; -} \ No newline at end of file +} diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index c3e6077a..edbd57c6 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -102,7 +102,7 @@ const MainHeader = () => {
- Contentstack Logo + Contentstack Logo
@@ -110,7 +110,7 @@ const MainHeader = () => { '' )} -
+
{ const nameValidation = (value: string) => { if (!value || !/^[^\s].+[^\s]$/.test(value)) { setInputValue(false); - return 'Please enter project name.' - } else if(value && value?.length > 200) { + return 'Please enter project name.'; + } else if (value && value?.length > 200) { setInputValue(false); return 'Project Name should not be more than 200 chars'; } else { diff --git a/ui/src/components/ProjectsHeader/index.tsx b/ui/src/components/ProjectsHeader/index.tsx index cc399357..3283bd28 100644 --- a/ui/src/components/ProjectsHeader/index.tsx +++ b/ui/src/components/ProjectsHeader/index.tsx @@ -13,7 +13,6 @@ const ProjectsHeader = ({ allProject, handleModal }: ProjectsHeaderType) => { - let interval: ReturnType; function setFocus() { clearTimeout(interval); @@ -24,33 +23,38 @@ const ProjectsHeader = ({ const SearchProject = ( <> - {allProject && allProject?.length > 0 - ?
- search.replace(/\s/g, '').length ? setSearchText(search?.trim()) : setSearchText(search)} - onClear={true} - onClick={setFocus} - value={searchText} - debounceSearch={true} - id="search-project-input" - /> + {allProject && allProject?.length > 0 ? ( +
+ + search.replace(/\s/g, '').length + ? setSearchText(search?.trim()) + : setSearchText(search) + } + onClear={true} + onClick={setFocus} + value={searchText} + debounceSearch={true} + id="search-project-input" + />
- : searchText?.length > 0 && ( + ) : ( + searchText?.length > 0 && (
setSearchText(search)} onClear={true} - onClick={setFocus} + onClick={setFocus} value={searchText} debounceSearch={true} id="search-project-input" /> -
+
) - } + )} ); @@ -77,7 +81,10 @@ const ProjectsHeader = ({ return ( <> - 0 && pageActions} /> + 0 && pageActions} + /> ); }; diff --git a/ui/src/components/ProjectsHeader/projectsHeader.interface.ts b/ui/src/components/ProjectsHeader/projectsHeader.interface.ts index 8341fa11..0a075a7a 100644 --- a/ui/src/components/ProjectsHeader/projectsHeader.interface.ts +++ b/ui/src/components/ProjectsHeader/projectsHeader.interface.ts @@ -1,5 +1,5 @@ import { CTA } from '../../types/common.interface'; -import { ProjectsObj } from '../../pages/Projects/projects.interface' +import { ProjectsObj } from '../../pages/Projects/projects.interface'; export interface ProjectsHeaderType { cta?: CTA; diff --git a/ui/src/components/SchemaModal/index.scss b/ui/src/components/SchemaModal/index.scss index 27d53d8e..6cbf7e62 100644 --- a/ui/src/components/SchemaModal/index.scss +++ b/ui/src/components/SchemaModal/index.scss @@ -48,7 +48,7 @@ &.nested { margin-left: -0.9375rem; } - } + } &.active { .icons { svg { @@ -73,7 +73,7 @@ color: $color-font-base; font-size: $size-font-large; font-weight: $font-weight-regular; - line-height: $line-height-reset!important; + line-height: $line-height-reset !important; opacity: 1; overflow: hidden; padding: 0.625rem 0; @@ -100,7 +100,7 @@ transition: all 0.3s linear; &.close { transform: rotate(-90deg); - } + } } & > ul { padding-left: 0.125rem; diff --git a/ui/src/components/SchemaModal/index.tsx b/ui/src/components/SchemaModal/index.tsx index bfc28be9..120f657f 100644 --- a/ui/src/components/SchemaModal/index.tsx +++ b/ui/src/components/SchemaModal/index.tsx @@ -62,7 +62,10 @@ const getTopLevelIcons = (field: FieldMapType) => { return icons['rte']; } - if (field?.ContentstackFieldType === 'JSON Rich Text Editor' || field?.ContentstackFieldType === 'json') { + if ( + field?.ContentstackFieldType === 'JSON Rich Text Editor' || + field?.ContentstackFieldType === 'json' + ) { return icons['jsonRte']; } @@ -89,25 +92,22 @@ const TreeView = ({ schema = [] }: schemaType) => { const [nestedList, setNestedList] = useState([]); useEffect(() => { - let groupId = '' - const data: FieldMapType[] = [] + let groupId = ''; + const data: FieldMapType[] = []; schema?.forEach((field) => { - if (field?.ContentstackFieldType === "group") { - groupId = field?.uid - data?.push({...field, child: []}) - } - else{ - if(field?.uid?.startsWith(groupId+'.')){ - const obj = data[data?.length - 1] - if(Object.prototype.hasOwnProperty.call(obj, 'child')){ - obj?.child?.push(field) - } - else{ - obj.child = [field] + if (field?.ContentstackFieldType === 'group') { + groupId = field?.uid; + data?.push({ ...field, child: [] }); + } else { + if (field?.uid?.startsWith(groupId + '.')) { + const obj = data[data?.length - 1]; + if (Object.prototype.hasOwnProperty.call(obj, 'child')) { + obj?.child?.push(field); + } else { + obj.child = [field]; } - } - else{ - data.push({...field, child: []}) + } else { + data.push({ ...field, child: [] }); } } }); @@ -119,15 +119,14 @@ const TreeView = ({ schema = [] }: schemaType) => { // Remove Group name from its child const getChildFieldName = (text?: string, groupName?: string) => { - if (text?.startsWith(groupName+' > ')) { - return text?.replace(groupName+' > ', '') + if (text?.startsWith(groupName + ' > ')) { + return text?.replace(groupName + ' > ', ''); } }; const handleClick = (event: React.MouseEvent) => { if (document?.querySelector('.iconsholder.active')) { - document?.querySelector('.iconsholder.active') - ?.classList.remove('active'); + document?.querySelector('.iconsholder.active')?.classList.remove('active'); } if (event?.target instanceof HTMLElement) { if (event?.target?.classList.contains('icons')) { @@ -145,12 +144,10 @@ const TreeView = ({ schema = [] }: schemaType) => { event?.target?.parentElement?.classList.add('active'); } }; - + const generateNestedOutline = (item: FieldMapType, index: number) => { return ( -
    0 ? '' : 'close'} - > +
      0 ? '' : 'close'}> {item?.child?.map((field: FieldMapType, nestedIndex: number) => { let fieldname = ''; if (field?.uid) { @@ -169,22 +166,18 @@ const TreeView = ({ schema = [] }: schemaType) => { > {hasNestedValue(field) && ( - + )} - + {getChildFieldName(field?.otherCmsField, item?.otherCmsField)}
- {hasNestedValue(field) && - generateNestedOutline(field, nestedIndex)} + {hasNestedValue(field) && generateNestedOutline(field, nestedIndex)} - ) + ); })} ); @@ -196,44 +189,43 @@ const TreeView = ({ schema = [] }: schemaType) => { {nestedList?.length > 0 && (
    {nestedList?.map((item: FieldMapType, index: number) => { - let outlineName = ""; + let outlineName = ''; if (item?.uid) { - outlineName = item?.uid?.replace(/\.+/g, "_"); + outlineName = item?.uid?.replace(/\.+/g, '_'); } const hasNested = hasNestedValue(item); - + return ( -
  • -
    ) => { - e.preventDefault(); - e.stopPropagation(); - handleClick(e); - }} +
  • - { - document - ?.querySelector('.PageLayout__leftSidebar') - ?.classList.add('hovered'); +
    ) => { + e.preventDefault(); + e.stopPropagation(); + handleClick(e); }} > - {hasNested && ( - - )} - - - {item?.otherCmsField} -
    - {hasNested && generateNestedOutline(item, index)} -
    • - )})} + { + document + ?.querySelector('.PageLayout__leftSidebar') + ?.classList.add('hovered'); + }} + > + {hasNested && } + + + {item?.otherCmsField} +
+ {hasNested && generateNestedOutline(item, index)} + + ); + })} )}
diff --git a/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx b/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx index 01482e1a..f2e480ca 100644 --- a/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx +++ b/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx @@ -16,19 +16,18 @@ interface FlowBlockItemProps { isActive?: boolean; isCompleted?: boolean; step: IFlowStep; - onStepClick: (step: IFlowStep, isCompleted:boolean) => () => void; + onStepClick: (step: IFlowStep, isCompleted: boolean) => () => void; } const FlowBlockItem: FC = (props: FlowBlockItemProps) => { //console.log("isComeplted : ", props?.isCompleted, props?.step); - + const [isHovered, setIsHovered] = useState(false); const handleHoveredToggle = (flag: boolean) => () => { setIsHovered(flag); }; - return (
@@ -43,7 +42,7 @@ const FlowBlockItem: FC = (props: FlowBlockItemProps) => { className="step_tested_check" icon={props?.isCompleted ? 'CheckCircle' : 'WarningBold'} version="v2" - stroke={props?.isCompleted ? 'none' : '#475161'} + stroke={props?.isCompleted ? 'none' : '#475161'} >
@@ -52,7 +51,9 @@ const FlowBlockItem: FC = (props: FlowBlockItemProps) => {
{ const navigate = useNavigate(); const { migrationData, updateMigrationData, selectedOrganisation } = useContext(AppContext); - const onStepClick = (step: IFlowStep, isCompleted: boolean) => async() => { - if (params?.stepId === `${step?.name}`) return; - + const onStepClick = (step: IFlowStep, isCompleted: boolean) => async () => { + if (params?.stepId === `${step?.name}`) return; + updateMigrationData({ currentFlowStep: step }); - + const url = `/projects/${params?.projectId}/migration/steps/${step?.name}`; - navigate(url, { replace: true }); - + navigate(url, { replace: true }); }; return ( {validateArray(migrationData?.allFlowSteps) ? ( migrationData?.allFlowSteps?.map((step: IFlowStep) => { - return( - +step?.name} - /> - )}) + return ( + +step?.name} + /> + ); + }) ) : ( <> )} diff --git a/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts b/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts index 4546e33b..15122194 100644 --- a/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts +++ b/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts @@ -4,7 +4,7 @@ export interface IFlowStep { description: string; name: string; flow_id: string; - isCompleted: boolean + isCompleted: boolean; } export const DEFAULT_IFLOWSTEP: IFlowStep = { @@ -13,5 +13,5 @@ export const DEFAULT_IFLOWSTEP: IFlowStep = { name: '1', flow_id: '', group_name: '', - isCompleted:false + isCompleted: false }; diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx index 9831397d..8a16d5f8 100644 --- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx +++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx @@ -164,8 +164,11 @@ const AutoVerticalStepper = React.forwardRef< return (
    - {steps?.map((step: any, index: number) => { - const shouldShowIcon = (step?.title !== 'Select Stack' && step?.title !== 'Upload File' ) ? !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; diff --git a/ui/src/context/app/app.interface.ts b/ui/src/context/app/app.interface.ts index d17692ba..8d4ca95d 100644 --- a/ui/src/context/app/app.interface.ts +++ b/ui/src/context/app/app.interface.ts @@ -137,8 +137,8 @@ interface FieldTypes { value: string; } interface locales { - code:string; - name:string + code: string; + name: string; } export interface ILegacyCms { selectedCms: ICMSType; @@ -181,7 +181,7 @@ export interface IDropDown { value: string; default?: boolean; master_locale: string; - locales:locales[]; + locales: locales[]; created_at: string; } export interface ITestMigration { @@ -210,7 +210,7 @@ export const DEFAULT_DROPDOWN: IDropDown = { default: false, uid: '', master_locale: '', - locales:[], + locales: [], created_at: '' }; diff --git a/ui/src/pages/Home/index.tsx b/ui/src/pages/Home/index.tsx index 0eda36e7..03a7d1e0 100644 --- a/ui/src/pages/Home/index.tsx +++ b/ui/src/pages/Home/index.tsx @@ -40,7 +40,9 @@ const Home = () => { {cta?.title && ( - + )}
diff --git a/ui/src/pages/Login/index.scss b/ui/src/pages/Login/index.scss index 72346803..2c93376f 100644 --- a/ui/src/pages/Login/index.scss +++ b/ui/src/pages/Login/index.scss @@ -184,6 +184,6 @@ } .send-sms { span { - line-height: 1!important; + line-height: 1 !important; } } diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx index 0e0ca279..15061ad4 100644 --- a/ui/src/pages/Login/index.tsx +++ b/ui/src/pages/Login/index.tsx @@ -19,10 +19,7 @@ import { TFA_VIA_SMS_MESSAGE, CS_ENTRIES } from '../../utilities/constants'; -import { - failtureNotification, - setDataInLocalStorage -} from '../../utilities/functions'; +import { failtureNotification, setDataInLocalStorage } from '../../utilities/functions'; // API Service import { getCMSDataFromFile } from '../../cmsData/cmsSelector'; @@ -59,7 +56,11 @@ const Login: FC = () => { const { login, two_factor_authentication: twoFactorAuthentication } = data; - const accountData = { heading: data?.heading, subtitle: data?.subtitle, copyrightText: data?.copyrightText }; + const accountData = { + heading: data?.heading, + subtitle: data?.subtitle, + copyrightText: data?.copyrightText + }; // ************* Context Here ************ const { setAuthToken, setIsAuthenticated } = useContext(AppContext); @@ -73,7 +74,6 @@ const Login: FC = () => { // Get the region const urlParams = new URLSearchParams(location?.search); const region = urlParams?.get?.('region'); - // ************* send SMS token ************ const sendSMS = async () => { @@ -186,7 +186,9 @@ const Login: FC = () => { {loginStates?.tfa ? (
- {twoFactorAuthentication?.title &&

{twoFactorAuthentication?.title}

} + {twoFactorAuthentication?.title && ( +

{twoFactorAuthentication?.title}

+ )} = () => { className="mb-2" version="v2" htmlFor="tfa_token" - aria-label="tfa_token" - + aria-label="tfa_token" > {twoFactorAuthentication?.security_code?.title} @@ -231,9 +232,11 @@ const Login: FC = () => {
- {twoFactorAuthentication?.send_sms?.pre_link_text && -

{twoFactorAuthentication?.send_sms?.pre_link_text}

- } + {twoFactorAuthentication?.send_sms?.pre_link_text && ( +

+ {twoFactorAuthentication?.send_sms?.pre_link_text} +

+ )} {twoFactorAuthentication?.send_sms?.link_text && ( = () => {
) : (
- {login?.title && ( -

{login?.title}

- )} -
+ {login?.title &&

{login?.title}

} +
{ diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index 5a0e7557..6e101780 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -150,20 +150,19 @@ const Projects = () => { const content = { component: (
- {loadStatus - ? ( + {loadStatus ? (
{[...Array(20)].map((e, i) => ( ))}
- ) - : projects?.map((e) => ( + ) : ( + projects?.map((e) => (
)) - } + )} {projects && projects?.length === 0 && !searchText && ( { )} {cta?.title} - )) - } + ))} )} - {projects && projects?.length === 0 && searchText && ( + {projects && projects?.length === 0 && searchText && ( {emptystate?.empty_search_heading}
} diff --git a/ui/src/pages/RegionalLogin/index.tsx b/ui/src/pages/RegionalLogin/index.tsx index 3bf266e6..2af72a93 100644 --- a/ui/src/pages/RegionalLogin/index.tsx +++ b/ui/src/pages/RegionalLogin/index.tsx @@ -87,9 +87,7 @@ const RegionalLogin = () => {

{region?.service_title}

)}
- {region?.region_title && ( -

{region?.region_title}

- )} + {region?.region_title &&

{region?.region_title}

}
{region?.cta?.title && (
diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 6d336c86..dd608e09 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -282,8 +282,9 @@ body { color: $color-font-base; font-family: $font-family-primary; line-height: 1.3rem; - span, p { - line-height: $line-height-default!important; + span, + p { + line-height: $line-height-default !important; } } h1, @@ -296,7 +297,7 @@ h6 { } p { color: $color-font-gray; - line-height: $line-height-default!important; + line-height: $line-height-default !important; margin: 0; } h1 { @@ -337,11 +338,11 @@ h2 { .PageLayout__head__hamburger { display: none; } - .PageLayout__head{ - &>.PageHeader { + .PageLayout__head { + & > .PageHeader { padding-right: $px-20; } - } + } } } .ReactModal__Overlay { @@ -350,13 +351,19 @@ h2 { color: $color-black-2121; font-weight: bold; } - } -} -.ReactModal__Content__footer .Button{ + } +} +.ReactModal__Content__footer .Button { font-size: 1rem; line-height: 100%; } -::-webkit-input-placeholder{color:$color-black-2121!important} -::-ms-input-placeholder{color:$color-black-2121!important} -::placeholder{color:$color-black-2121!important} \ No newline at end of file +::-webkit-input-placeholder { + color: $color-black-2121 !important; +} +::-ms-input-placeholder { + color: $color-black-2121 !important; +} +::placeholder { + color: $color-black-2121 !important; +} diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index f11bf564..e8e0e4ab 100644 --- a/ui/src/scss/_variables.scss +++ b/ui/src/scss/_variables.scss @@ -29,7 +29,6 @@ $color-font-gray: #637392; $color-black-2121: #212121; $color-black-222: #222222; - $font-family-primary: 'Inter', sans-serif; $font-family-secondary: 'Montserrat', sans-serif; diff --git a/ui/src/services/api/service.interface.ts b/ui/src/services/api/service.interface.ts index 3a3fa636..f52ef611 100644 --- a/ui/src/services/api/service.interface.ts +++ b/ui/src/services/api/service.interface.ts @@ -12,7 +12,7 @@ export interface StackResponse { name: string; api_key: string; master_locale: string; - locales:[]; + locales: []; created_at: string; } diff --git a/ui/src/utilities/constants.interface.ts b/ui/src/utilities/constants.interface.ts index c10759fd..0089b499 100644 --- a/ui/src/utilities/constants.interface.ts +++ b/ui/src/utilities/constants.interface.ts @@ -1,3 +1,3 @@ export interface ObjectType { [key: string]: string; -} \ No newline at end of file +} diff --git a/ui/src/utilities/constants.ts b/ui/src/utilities/constants.ts index 0a80ff56..a019a540 100644 --- a/ui/src/utilities/constants.ts +++ b/ui/src/utilities/constants.ts @@ -1,4 +1,4 @@ -import { ObjectType } from './constants.interface' +import { ObjectType } from './constants.interface'; export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL; export const assetsRelativeUrl = 'v3/assets'; export const WEBSITE_BASE_URL = process.env.REACT_APP_WEBSITE_BASE_URL; @@ -63,8 +63,7 @@ export const UPLOAD_FILE_RELATIVE_URL = process.env.REACT_APP_UPLOAD_SERVER; export const UPLOAD_FILE_URL = `${UPLOAD_FILE_RELATIVE_URL}upload`; - -export const PROJECT_STATUS:ObjectType = { +export const PROJECT_STATUS: ObjectType = { '0': 'Draft', '1': 'Ready to test', '2': 'Testing inprogress', From f3c3126df909b05ac4c60707ace9dbf3f9324b7c Mon Sep 17 00:00:00 2001 From: AishDani Date: Wed, 15 May 2024 13:14:58 +0530 Subject: [PATCH 7/9] refactor:[CMG-143],[CMG-142] --- ui/src/components/Modal/index.tsx | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx index eeb3d587..7dfd3c66 100644 --- a/ui/src/components/Modal/index.tsx +++ b/ui/src/components/Modal/index.tsx @@ -46,8 +46,7 @@ const Modal = (props: ProjectModalProps) => { return res?.error ? false : res; }; - const nameValidation = (value: string) => { - + const nameValidation = (value: string) => { if (value === '') { setInputValue(false); return 'Please enter project name.'; @@ -61,7 +60,7 @@ const Modal = (props: ProjectModalProps) => { }; const descValidation = (value: string) => { - if (value && value?.length > 255) { + if (value?.length >= 255) { setInputValue(false); return 'Description should not be more than 255 chars'; } else { @@ -117,7 +116,7 @@ const Modal = (props: ProjectModalProps) => { ): void => { + onChange={(event: any): any => { input.onChange(event); }} version="v2" @@ -125,13 +124,19 @@ const Modal = (props: ProjectModalProps) => { placeholder={namePlaceholder} data-testid="title-input" name="name" + maxLength='200' error={(meta?.error || meta?.submitError) && meta?.touched} /> - {meta?.error && meta?.touched && ( - + {meta?.error && ( + {meta?.error} )} + ); }} @@ -140,6 +145,7 @@ const Modal = (props: ProjectModalProps) => { {({ input, meta }): JSX.Element => { + return ( <> @@ -148,16 +154,19 @@ const Modal = (props: ProjectModalProps) => {