From b10db6db04102a8082bf2a1c1580af8f1bc07654 Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Thu, 2 May 2024 16:28:40 +0530 Subject: [PATCH 1/2] ui fixes and search locale --- ui/src/components/Card/index.tsx | 7 ----- .../DestinationStack/Actions/LoadStacks.tsx | 31 +++++++++---------- .../LegacyCms/Actions/LoadFileFormat.tsx | 8 ++--- .../LegacyCms/Actions/LoadPrefix.tsx | 4 +-- .../LegacyCms/Summary/PreFixSummary.tsx | 2 +- .../components/LegacyCms/Summary/summary.scss | 11 +++++-- 6 files changed, 30 insertions(+), 33 deletions(-) diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx index 7ff8700f5..cdff3b0c7 100644 --- a/ui/src/components/Card/index.tsx +++ b/ui/src/components/Card/index.tsx @@ -32,7 +32,6 @@ const CardList = ({ project }: ProjectType) => { }; fetchProject(); }, [projectDetails]); - return (
onClickProject(project?.id || '')}> @@ -46,12 +45,6 @@ const CardList = ({ project }: ProjectType) => { Project Status {project?.status}
-
- Current Status - - Validation Failed - -
diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx index 69e5831f4..1f8573402 100644 --- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx +++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx @@ -3,7 +3,7 @@ import { Icon, Select, cbModal } from '@contentstack/venus-components'; import { AppContext } from '../../../context/app/app.context'; import { DEFAULT_DROPDOWN, IDropDown, INewMigration } from '../../../context/app/app.interface'; -import { isEmptyString, validateArray } from '../../../utilities/functions'; +import { isEmptyString, validateArray, validateObject } from '../../../utilities/functions'; import { createStacksInOrg, getAllStacksInOrg } from '../../../services/api/stacks.service'; import { getAllLocales } from '../../../services/api/user.service'; import { StackResponse } from '../../../services/api/service.interface'; @@ -44,7 +44,7 @@ const LoadStacks = (props: LoadFileFormatProps) => { } ]; const [allStack, setAllStack] = useState(loadingOption); - const [allLocales] = useState([]); + const [allLocales, setAllLocales] = useState([]); const [isSaving, setIsSaving] = useState(false); @@ -143,19 +143,18 @@ const LoadStacks = (props: LoadFileFormatProps) => { //fetch all locales const response = await getAllLocales(newMigrationData?.destination_stack?.selectedOrg?.value); //org id will always be there - - // const rawMappedLocalesMapped = - // validateObject(response?.data) && response?.data?.locales - // ? Object.keys(data?.locales)?.map((key) => ({ - // uid: key, - // label: data?.locales[key], - // value: key, - // locale: key, - // created_at: key - // })) - // : []; - - // setAllLocales(rawMappedLocalesMapped); + const rawMappedLocalesMapped = + validateObject(response?.data) && response?.data?.locales + ? Object?.keys(response?.data?.locales)?.map((key) => ({ + uid: key, + label: response?.data?.locales[key], + value: key, + locale: key, + created_at: key + })) + : []; + + setAllLocales(rawMappedLocalesMapped); const stackArray = validateArray(stackData?.data?.stacks) ? stackData?.data?.stacks?.map((stack: StackResponse) => ({ @@ -194,7 +193,6 @@ const LoadStacks = (props: LoadFileFormatProps) => { updateNewMigrationData(newMigrationDataObj); }; - const handleCreateNewStack = () => { cbModal({ component: (props: LoadFileFormatProps) => ( @@ -218,7 +216,6 @@ const LoadStacks = (props: LoadFileFormatProps) => { } }); }; - /**** ALL USEEffects HERE ****/ useEffect(() => { diff --git a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx index 7a863c849..176f6b056 100644 --- a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx @@ -48,7 +48,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => { const handleBtnClick = (e: MouseEvent) => { e.preventDefault(); - if (!isEmptyString(selectedCard.fileformat_id) && isCheckedBoxChecked) { + if (!isEmptyString(selectedCard?.fileformat_id) && isCheckedBoxChecked) { updateNewMigrationData({ ...newMigrationData, legacy_cms: { @@ -64,7 +64,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => { }); //call for Step Change - props.handleStepChange(props.currentStep); + props.handleStepChange(props?.currentStep); } }; @@ -116,7 +116,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => { {validateArray(allowed_file_formats) ? ( allowed_file_formats?.map((data: ICardType, index: number) => ( { )}
-
+
diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx index 56fe4fa56..a639a4a77 100644 --- a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx @@ -60,7 +60,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => { setIsError(false); //API call for saving Affix - updateAffixData(selectedOrganisation.value, projectId, { affix: prefix }); + updateAffixData(selectedOrganisation?.value, projectId, { affix: prefix }); affixConfirmation(selectedOrganisation?.value, projectId, { affix_confirmation: isCheckedBoxChecked }); @@ -131,7 +131,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => { error={isError} />
-
+
diff --git a/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx b/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx index b4ba67693..3cef529d2 100644 --- a/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx +++ b/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx @@ -27,7 +27,7 @@ const PreFixSummary = (props: PreFixSummaryProps): JSX.Element => { {!isEmptyString(newMigrationData?.legacy_cms?.affix) ? (
- {newMigrationData?.legacy_cms?.affix || ''} + {newMigrationData?.legacy_cms?.affix || ''}
) : ( diff --git a/ui/src/components/LegacyCms/Summary/summary.scss b/ui/src/components/LegacyCms/Summary/summary.scss index 7146ae1a3..20a1bbe4c 100644 --- a/ui/src/components/LegacyCms/Summary/summary.scss +++ b/ui/src/components/LegacyCms/Summary/summary.scss @@ -13,12 +13,19 @@ .Checkbox input:disabled ~ .Checkbox__label { opacity: 1; } - +.Checkbox.Checkbox--state-checked { + display: flex; +} +.Checkbox .Checkbox__tick svg { + display: block; +} .Checkbox.Checkbox--state-checked.Checkbox--state-disabled { color: #212121; opacity: 1; } - +.Checkbox-wrapper .Checkbox { + display: flex; +} .Checkbox input:disabled:checked ~ .Checkbox__label, .Checkbox input:disabled:indeterminate ~ .Checkbox__label { color: #212121; From 67e1f227b26f628bb2a726132f985fd2ef0b29fb Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Thu, 2 May 2024 16:33:15 +0530 Subject: [PATCH 2/2] ui fixes and search locale --- ui/.prettierrc | 14 +-- ui/packaga-lock.json | 8 +- ui/src/cmsData/legacyCms.json | 2 +- ui/src/components/Card/card.scss | 4 +- .../components/Common/Settings/Settings.scss | 2 +- ui/src/components/ContentMapper/index.tsx | 18 ++- .../LegacyCms/Actions/LoadPrefix.tsx | 2 - .../LegacyCms/Actions/LoadSelectCms.tsx | 42 ++++--- .../LegacyCms/Actions/LoadUploadFile.tsx | 27 ++-- .../LegacyCms/Summary/UploadFileSummary.tsx | 47 ++++--- ui/src/components/LegacyCms/index.tsx | 83 ++++++------- .../NewMigration/NewMigrationWrapper.scss | 5 +- ui/src/components/Modal/index.tsx | 5 +- ui/src/components/SchemaModal/index.tsx | 6 +- ui/src/context/app/app.interface.ts | 24 ++-- ui/src/pages/Login/index.tsx | 67 +++++----- ui/src/pages/Projects/index.tsx | 117 ++++++++---------- ui/src/pages/RegionalLogin/index.tsx | 6 +- ui/src/scss/App.scss | 4 +- ui/src/services/api/upload.service.ts | 7 +- uplaode-api/src/config/index.ts | 2 +- 21 files changed, 231 insertions(+), 261 deletions(-) diff --git a/ui/.prettierrc b/ui/.prettierrc index ae60a8e98..f829f0a09 100644 --- a/ui/.prettierrc +++ b/ui/.prettierrc @@ -1,8 +1,8 @@ { - "semi": true, - "tabWidth": 2, - "printWidth": 100, - "singleQuote": true, - "trailingComma": "none", - "jsxBracketSameLine": true -} \ No newline at end of file + "semi": true, + "tabWidth": 2, + "printWidth": 100, + "singleQuote": true, + "trailingComma": "none", + "jsxBracketSameLine": true +} diff --git a/ui/packaga-lock.json b/ui/packaga-lock.json index 402152c46..ba1efe929 100644 --- a/ui/packaga-lock.json +++ b/ui/packaga-lock.json @@ -6905,9 +6905,7 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==", - "engines": [ - "node >= 0.8.0" - ], + "engines": ["node >= 0.8.0"], "bin": { "ansi-html": "bin/ansi-html" } @@ -11330,9 +11328,7 @@ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "hasInstallScript": true, "optional": true, - "os": [ - "darwin" - ], + "os": ["darwin"], "engines": { "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } diff --git a/ui/src/cmsData/legacyCms.json b/ui/src/cmsData/legacyCms.json index 85f1c00e9..ad07c4b3c 100644 --- a/ui/src/cmsData/legacyCms.json +++ b/ui/src/cmsData/legacyCms.json @@ -269,4 +269,4 @@ "restricted_keyword_checkbox_text": "Please acknowledge that you have referred to the Contentstack restricted keywords", "affix_cta": "Continue", "file_format_cta": "Continue" -} \ No newline at end of file +} diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss index 39baf969b..a1f21cbe2 100644 --- a/ui/src/components/Card/card.scss +++ b/ui/src/components/Card/card.scss @@ -68,8 +68,8 @@ } .ProjectCard__modified-date { color: $color-font-base; - display:block; - font-size:$size-font-small; + display: block; + font-size: $size-font-small; font-weight: $font-weight-regular; line-height: $line-height-reset; padding-left: 8px; diff --git a/ui/src/components/Common/Settings/Settings.scss b/ui/src/components/Common/Settings/Settings.scss index dda7f602d..cfb8d60e0 100644 --- a/ui/src/components/Common/Settings/Settings.scss +++ b/ui/src/components/Common/Settings/Settings.scss @@ -13,7 +13,7 @@ .PageLayout { width: 100%; } - .PageLayout__head { + .PageLayout__head { border-left: 0 none; } } diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 554d2fcd7..c0415a0f5 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -313,13 +313,14 @@ const ContentMapper = () => { const accessorCall = (data: FieldMapType) => { return (
-
{data?.otherCmsField}
+
{data?.otherCmsField}
- Other CMS Type: {data?.otherCmsType}
- UID: {data?.uid} + Other CMS Type: {data?.otherCmsType} +
+ UID: {data?.uid}
- ) + ); }; interface UidMap { [key: string]: boolean; @@ -344,7 +345,6 @@ const ContentMapper = () => { const handleDropDownChange = (value: FieldTypes) => { setOtherContentType(value); // fetchFields(contentTypes?.[i]?.id, searchText); - }; const handleAdvancedSetting = (fieldtype: string) => { @@ -647,9 +647,7 @@ const ContentMapper = () => { } else { columns?.push({ disableSortBy: true, - Header: `Contentstack: ${ - IsEmptyStack ? otherCmsTitle : OtherContentType?.label ?? '' - }`, + Header: `Contentstack: ${IsEmptyStack ? otherCmsTitle : OtherContentType?.label ?? ''}`, accessor: SelectAccessor, id: 'contentstack_cms_field', default: false @@ -672,10 +670,10 @@ const ContentMapper = () => { { label: 'Log selected Items', cb: (data: any) => { - updateResetRowSelection(true) + updateResetRowSelection(true); } } - ] + ]; return (
diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx index a639a4a77..2d1addbec 100644 --- a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx @@ -103,8 +103,6 @@ const LoadPreFix = (props: LoadSelectCmsProps) => { setIsCheckedBoxChecked(checked); }; - - /**** ALL USEEffects HERE ****/ const { restricted_keyword_link = DEFAULT_URL_TYPE, restricted_keyword_checkbox_text = '' } = diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx index 48fa0877d..98a702337 100644 --- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx @@ -89,16 +89,16 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { updateCMSFilters(cmsFilter); }; - const getCmsType = async() => { - const res:any = await fileValidation(); + const getCmsType = async () => { + const res: any = await fileValidation(); const cmsType = res?.data?.file_details?.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 - + const cmsType = await getCmsType(); // Fetch the specific CMS type + let filteredCmsData: ICMSType[] = []; if (isEmptyString(searchText) && !validateArray(cmsFilter) && !cmsType) { filteredCmsData = all_cms; @@ -106,25 +106,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) + .filter( + ({ title, cms_id }: ICMSType) => + title?.toLowerCase()?.includes(searchTextLower) || + cms_id?.toLowerCase()?.includes(searchTextLower) ); } } - + setCmsData(filteredCmsData); // Set filtered CMS data - + // Determine if a new card should be selected - const newSelectedCard = filteredCmsData?.find(cms => cms?.cms_id === selectedCard?.cms_id) || filteredCmsData[0] || null; - + const newSelectedCard = + filteredCmsData?.find((cms) => cms?.cms_id === selectedCard?.cms_id) || + filteredCmsData[0] || + null; + if (newSelectedCard?.cms_id !== selectedCard?.cms_id) { - setSelectedCard(newSelectedCard); + setSelectedCard(newSelectedCard); const newMigrationDataObj: INewMigration = { ...newMigrationData, @@ -133,12 +137,14 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => { selectedCms: newSelectedCard } }; - - updateNewMigrationData(newMigrationDataObj); - + + updateNewMigrationData(newMigrationDataObj); + // API call for saving selected CMS, if a new card is selected if (newSelectedCard) { - updateLegacyCMSData(selectedOrganisation?.value, projectId, { legacy_cms: newSelectedCard?.cms_id }); + updateLegacyCMSData(selectedOrganisation?.value, projectId, { + legacy_cms: newSelectedCard?.cms_id + }); } } }; diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx index 1f34a3257..ae244d4e8 100644 --- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx +++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx @@ -18,9 +18,8 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { const { projectId = '' } = useParams(); //Handle further action on file is uploaded to server - const handleOnFileUploadCompletion = async() => { - - const res : any = await fileValidation(); + const handleOnFileUploadCompletion = async () => { + const res: any = await fileValidation(); const newMigrationDataObj: INewMigration = { ...newMigrationData, @@ -28,27 +27,25 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { ...newMigrationData.legacy_cms, uploadedFile: { name: res?.data?.file_details?.localPath, - url : res?.data?.file_details?.localPath, + url: res?.data?.file_details?.localPath, validation: res?.data?.message, - isValidated: res?.data?.status== 200 ? true : false, + isValidated: res?.data?.status == 200 ? true : false, file_details: { - isLocalPath:res?.data?.file_details?.isLocalPath, + isLocalPath: res?.data?.file_details?.isLocalPath, cmsType: res?.data?.file_details?.cmsType, localPath: res?.data?.file_details?.localPath, awsData: { awsRegion: res?.data?.file_details?.awsData?.awsRegion, - bucketName:res?.data?.file_details?.awsData?.bucketName, - buketKey:res?.data?.file_details?.awsData?.buketKey, + bucketName: res?.data?.file_details?.awsData?.bucketName, + buketKey: res?.data?.file_details?.awsData?.buketKey } - }}, - } + } + } } + }; updateNewMigrationData(newMigrationDataObj); - - - props.handleStepChange(props.currentStep, true); - + props.handleStepChange(props.currentStep, true); }; const allowedFileExtentions = `.${ @@ -56,7 +53,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => { }`; useEffect(() => { handleOnFileUploadCompletion(); - },[newMigrationData]); + }, [newMigrationData]); return (
diff --git a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx index c044935ee..4a74d00d7 100644 --- a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx +++ b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx @@ -15,9 +15,9 @@ interface Props { fileDetails: FileDetails; } -const FileComponent : React.FC= ({fileDetails}) => { +const FileComponent: React.FC = ({ fileDetails }) => { return ( -
+

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

CMS Type: {fileDetails?.cmsType}

Local Path: {fileDetails?.localPath}

@@ -26,43 +26,38 @@ const FileComponent : React.FC= ({fileDetails}) => {

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

); - - -} +}; const UploadFileSummary = ({ stepComponentProps, stepData }: UploadFileSummaryProps): JSX.Element => { const { newMigrationData } = useContext(AppContext); - return (
- {!isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.name) - ? ( -
- -

- {newMigrationData?.legacy_cms?.uploadedFile?.validation} + {!isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.name) ? ( +
+ +

+ + {newMigrationData?.legacy_cms?.uploadedFile?.validation} + - {!newMigrationData?.legacy_cms?.uploadedFile?.isValidated - ? - (

Please upload the correct file

) : - (<>) - } - -
- - + {!newMigrationData?.legacy_cms?.uploadedFile?.isValidated ? ( +

Please upload the correct file

+ ) : ( + <> + )} +
) : (
{stepData?.empty_step_placeholder} - {!newMigrationData?.legacy_cms?.uploadedFile?.isValidated - ? - (

Please upload the correct file

) : - (<>) - } + {!newMigrationData?.legacy_cms?.uploadedFile?.isValidated ? ( +

Please upload the correct file

+ ) : ( + <> + )}
)}
diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx index 5a95d995b..4e78bf144 100644 --- a/ui/src/components/LegacyCms/index.tsx +++ b/ui/src/components/LegacyCms/index.tsx @@ -43,9 +43,9 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr const [internalActiveStepIndex, setInternalActiveStepIndex] = useState(-1); const [stepperKey, setStepperKey] = useState('v-mig-step'); const { projectId = '' } = useParams(); - const [isValidated,setisValidated] = useState(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false); - - + const [isValidated, setisValidated] = useState( + newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false + ); const navigate = useNavigate(); const autoVerticalStepper = useRef(null); @@ -208,50 +208,49 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr return ( <> - {isLoading - ? ( + {isLoading ? ( +
+
+ +
+
+ ) : ( +
-
- +
+
-
- ) - : ( -
-
+ {isCompleted && !isMigrationLocked ? (
- -
- {isCompleted && !isMigrationLocked ? ( -
-
- -
+
+
- ) : ( - <> - )} -
+
+ ) : ( + <> + )}
- ) - } +
+ )} ); }; diff --git a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss b/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss index 11f38d647..db2d19a22 100644 --- a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss +++ b/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss @@ -72,7 +72,6 @@ position: relative; padding: 0; width: auto; - height: calc(100vh - 7.25rem)!important; + height: calc(100vh - 7.25rem) !important; } -} - +} diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx index a10b78ae7..7a064c133 100644 --- a/ui/src/components/Modal/index.tsx +++ b/ui/src/components/Modal/index.tsx @@ -141,10 +141,7 @@ const Modal = (props: ProjectModalProps) => { {({ input, meta }): JSX.Element => { return ( <> - + {description}