Skip to content

Commit 435c754

Browse files
RohitKiniRohitKini
authored
Merge pull request #363 from contentstack/feature/dropdown-field-choices
Feature/dropdown field choices
2 parents 59c920f + 3759674 commit 435c754

File tree

5 files changed

+160
-17
lines changed

5 files changed

+160
-17
lines changed

‎ui/src/components/ContentMapper/index.tsx‎

Lines changed: 64 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -445,18 +445,52 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
445445
// maaped fields
446446
useEffect(() => {
447447
if (existingField) {
448+
const matchedKeys = new Set<string>();
449+
448450
contentTypeSchema?.forEach((item) => {
449451
for (const [key, value] of Object.entries(existingField)) {
450-
if (value?.label === item?.display_name) {
452+
if (value?.value?.uid === item?.uid) {
453+
matchedKeys.add(key);
451454

452455
setExistingField((prevOptions: ExistingFieldType) => ({
453456
...prevOptions,
454-
[key]: { label: value?.label, value: item },
457+
[key]: { label: item?.display_name, value: item },
455458
}));
456-
459+
}
460+
if (item?.data_type === "group" && Array.isArray(item?.schema)) {
461+
item.schema.forEach((schemaItem) => {
462+
if (value?.value?.uid === schemaItem?.uid) {
463+
matchedKeys.add(key);
464+
setExistingField((prevOptions: ExistingFieldType) => ({
465+
...prevOptions,
466+
[key]: { label: schemaItem?.display_name, value: schemaItem },
467+
}));
468+
}
469+
});
457470
}
458471
}
459-
})
472+
});
473+
474+
if(newMigrationData?.content_mapping?.content_type_mapping?.[otherCmsTitle] !== otherContentType?.label){
475+
setSelectedOptions([]);
476+
}
477+
// Remove unmatched keys from existingField
478+
setExistingField((prevOptions: ExistingFieldType) => {
479+
const updatedOptions:any = { ...prevOptions };
480+
Object.keys(prevOptions).forEach((key) => {
481+
if (matchedKeys.has(key)) {
482+
483+
const index = selectedOptions?.indexOf(updatedOptions?.[key]?.label);
484+
485+
if ( index > -1) {
486+
selectedOptions.splice(index, 1);
487+
}
488+
delete updatedOptions[key];
489+
}
490+
});
491+
return updatedOptions;
492+
});
493+
460494
}
461495
},[contentTypeSchema]);
462496

@@ -1336,15 +1370,17 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
13361370
isDisabled: true
13371371
}
13381372
: (OptionsForRow.length === 0 || (OptionsForRow.length > 0 && OptionsForRow.every((item)=>item.isDisabled)
1339-
&& (!existingField[data?.uid] || ! updatedExstingField[data?.uid] ) ))
1373+
&& (!existingField[data?.uid] || ! updatedExstingField[data?.uid] ) ) || (OptionsForRow.length > 0 && data?.contentstackFieldType === "dropdown"))
13401374
? {
13411375
label: Fields[data?.contentstackFieldType]?.label,
13421376
value: Fields[data?.contentstackFieldType]?.label,
13431377
isDisabled: data?.contentstackFieldType === 'text' ||
13441378
data?.contentstackFieldType === 'group' ||
13451379
data?.contentstackFieldType === 'url' ||
13461380
data?.otherCmsType === "reference" ||
1347-
data?.contentstackFieldType === "global_field"
1381+
data?.contentstackFieldType === "global_field" ||
1382+
data?.contentstackFieldType === "dropdown"
1383+
13481384
}
13491385
: {
13501386
label: `${selectedOption} matches`,
@@ -1624,12 +1660,21 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
16241660
try {
16251661
const { data , status} = await getExistingContentTypes(projectId, otherContentType?.id ?? '');
16261662
if (status == 201 && data?.contentTypes?.length > 0) {
1627-
setOtherContentType({
1663+
otherContentType?.id && setOtherContentType({
16281664
label: data?.selectedContentType?.title,
16291665
value: data?.selectedContentType?.title,
16301666
id:data?.selectedContentType?.uid
16311667
})
16321668
setContentModels(data?.contentTypes);
1669+
const newMigrationDataObj : INewMigration = {
1670+
...newMigrationData,
1671+
content_mapping:{
1672+
...newMigrationData?.content_mapping,
1673+
existingCT : data?.contentTypes
1674+
}
1675+
1676+
}
1677+
dispatch(updateNewMigrationData(newMigrationDataObj));
16331678
Notification({
16341679
notificationContent: { text: 'Content Types fetched successfully' },
16351680
notificationProps: {
@@ -1660,12 +1705,23 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
16601705
const { data, status } = await getExistingGlobalFields(projectId, otherContentType?.id ?? '');
16611706

16621707
if (status == 201 && data?.globalFields?.length > 0) {
1663-
setOtherContentType({
1708+
otherContentType?.id && setOtherContentType({
16641709
label: data?.selectedGlobalField?.title,
16651710
value:data?.selectedGlobalField?.title,
16661711
id:data?.selectedGlobalField?.uid
16671712
})
16681713
setContentModels(data?.globalFields);
1714+
1715+
const newMigrationDataObj : INewMigration = {
1716+
...newMigrationData,
1717+
content_mapping:{
1718+
...newMigrationData?.content_mapping,
1719+
existingGlobal : data?.globalFields
1720+
}
1721+
1722+
}
1723+
dispatch(updateNewMigrationData(newMigrationDataObj));
1724+
16691725
Notification({
16701726
notificationContent: { text: 'Global Fields fetched successfully' },
16711727
notificationProps: {

‎ui/src/components/LogScreen/index.tsx‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,30 +15,38 @@ import { INewMigration } from '../../context/app/app.interface';
1515
import './index.scss';
1616

1717
import { MAGNIFY,DEMAGNIFY } from '../../common/assets';
18+
import { saveStateToLocalStorage } from '../TestMigration';
1819

20+
// Define log styles for different levels
1921
const logStyles: { [key: string]: React.CSSProperties } = {
2022
info: { backgroundColor: '#f1f1f1' },
2123
warn: { backgroundColor: '#ffeeba', color: '#856404' },
2224
error: { backgroundColor: '#f8d7da', color: '#721c24' },
2325
success: { backgroundColor: '#d4edda', color: '#155724' },
2426
};
2527

28+
// Define the props for the component
2629
type LogsType = {
2730
serverPath: string;
2831
sendDataToParent?: (isMigrationStarted: boolean) => void | undefined;
32+
projectId: string
2933
}
3034

3135
/**
3236
* TestMigrationLogViewer component displays logs received from the server.
3337
* @param {string} serverPath - The path of the server to connect to.
38+
* @param {function} sendDataToParent - Callback to inform the parent about migration status.
39+
* @param {string} projectId - The project ID for saving state to local storage.
3440
*/
35-
const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
41+
const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: LogsType) => {
3642
const [logs, setLogs] = useState<string[]>([JSON.stringify({ message: "Migration logs will appear here once the process begins.", level: ''})]);
3743

3844
const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
3945

46+
// Redux dispatcher
4047
const dispatch = useDispatch();
4148

49+
// Set up WebSocket connection
4250
useEffect(() => {
4351
const socket = io(serverPath || ''); // Connect to the server
4452

@@ -125,6 +133,25 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
125133
const message = logObject.message;
126134

127135
if (message === "Test Migration Process Completed") {
136+
137+
138+
// push test migration completion in redux
139+
const newMigrationDataObj : INewMigration = {
140+
...newMigrationData,
141+
test_migration:{
142+
...newMigrationData?.test_migration,
143+
isMigrationComplete:true,
144+
isMigrationStarted: false,
145+
}
146+
}
147+
dispatch(updateNewMigrationData(newMigrationDataObj));
148+
149+
// Save test migration state to local storage
150+
saveStateToLocalStorage({
151+
isTestMigrationCompleted : true,
152+
isTestMigrationStarted : false,
153+
}, projectId);
154+
128155
Notification({
129156
notificationContent: { text: message },
130157
notificationProps: {
@@ -135,6 +162,7 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
135162
});
136163
sendDataToParent?.(false);
137164

165+
// Update testStacks data in Redux
138166
const newMigrationObj: INewMigration = {
139167
...newMigrationData,
140168
testStacks: [...newMigrationData?.testStacks ?? [], {stackUid: newMigrationData?.test_migration?.stack_api_key, stackName: newMigrationData?.test_migration?.stack_name, isMigrated: true}]
@@ -150,6 +178,7 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
150178

151179
return (
152180
<div className='logs-wrapper'>
181+
{/* Logs container */}
153182
<div className="logs-container" style={{ height: '400px', overflowY: 'auto' }} ref={logsContainerRef}>
154183
{migratedTestStack?.isMigrated
155184
? <div className="log-entry text-center">
@@ -190,6 +219,7 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
190219
}
191220
</div>
192221

222+
{/* Action buttons for scrolling and zooming */}
193223
{!migratedTestStack?.isMigrated && !logs?.some((log) => log === "Migration logs will appear here once the process begins.") && (
194224
<div className='action-items'>
195225
<Icon icon="ArrowUp" version='v2' onClick={handleScrollToTop} />

‎ui/src/components/TestMigration/index.tsx‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { getAllStacksInOrg } from '../../services/api/stacks.service';
1818
import { CS_ENTRIES } from '../../utilities/constants';
1919

2020
// Interface
21-
import { MigrationType } from './testMigration.interface';
21+
import { MigrationType, TestMigrationValues } from './testMigration.interface';
2222
import { INewMigration } from '../../context/app/app.interface';
2323

2424

@@ -28,21 +28,36 @@ import TestMigrationLogViewer from '../LogScreen';
2828
// CSS
2929
import './index.scss';
3030

31+
// utility function to save state to sessionStorage
32+
export const saveStateToLocalStorage = (state:TestMigrationValues, projectId : string) => {
33+
sessionStorage.setItem(`testmigration_${projectId}`, JSON.stringify(state));
34+
};
35+
36+
// utitlity function to retrieve state from sessionStorage
37+
const getStateFromLocalStorage = (projectId : string) => {
38+
const state = sessionStorage.getItem(`testmigration_${projectId}`);
39+
return state ? JSON.parse(state) : null;
40+
};
41+
3142
const TestMigration = () => {
43+
44+
// Access Redux state for migration data and selected organization
3245
const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
3346
const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
3447

3548
const [data, setData] = useState<MigrationType>({});
3649
const [isLoading, setIsLoading] = useState(newMigrationData?.isprojectMapped);
3750
const [isStackLoading, setIsStackLoading] = useState<boolean>(false);
38-
const [disableTestMigration, setdisableTestMigration] = useState<boolean>(false);
51+
const [disableTestMigration, setdisableTestMigration] = useState<boolean>(newMigrationData?.test_migration?.isMigrationStarted);
3952

40-
const [disableCreateStack, setDisableCreateStack] = useState<boolean>(false);
53+
const [disableCreateStack, setDisableCreateStack] = useState<boolean>(newMigrationData?.test_migration?.isMigrationStarted);
4154
const [stackLimitReached, setStackLimitReached] = useState<boolean>(false);
4255

56+
// Extract project ID from URL parameters
4357
const { projectId = '' } = useParams();
4458
const dispatch = useDispatch();
4559

60+
// Destructure CMS data for button labels and subtitles
4661
const { create_stack_cta: createStackCta, subtitle, start_migration_cta: startMigrationCta } = data
4762

4863
/********** ALL USEEFFECT HERE *************/
@@ -63,7 +78,8 @@ const TestMigration = () => {
6378
* to disable Create Test Stack and Start Test Migration buttons as per isMigrated state
6479
*/
6580
useEffect(() => {
66-
if (!newMigrationData?.testStacks?.find((stack) => stack?.stackUid === newMigrationData?.test_migration?.stack_api_key)?.isMigrated) {
81+
if (!newMigrationData?.testStacks?.find((stack) => stack?.stackUid === newMigrationData?.test_migration?.stack_api_key)?.isMigrated && !disableTestMigration) {
82+
6783
setDisableCreateStack(false);
6884
}
6985

@@ -72,6 +88,18 @@ const TestMigration = () => {
7288
}
7389
}, [newMigrationData?.testStacks]);
7490

91+
useEffect(() => {
92+
93+
// Retrieve and apply saved state from sessionStorage
94+
const savedState = getStateFromLocalStorage(projectId);
95+
if (savedState) {
96+
setdisableTestMigration(savedState?.isTestMigrationStarted);
97+
setDisableCreateStack(savedState?.isTestMigrationStarted);
98+
}
99+
100+
},[]);
101+
102+
75103

76104
/**
77105
* Handles create test stack function
@@ -81,15 +109,19 @@ const TestMigration = () => {
81109

82110
//get org plan details
83111
try {
112+
113+
// Fetch organization details to determine stack limit
84114
const orgDetails = await getOrgDetails(selectedOrganisation?.value);
85115
const stacks_details_key = Object.keys(orgDetails?.data?.organization?.plan?.features)?.find(key => orgDetails?.data?.organization?.plan?.features[key].uid === 'stacks') ?? '';
86116

87117
const max_stack_limit = orgDetails?.data?.organization?.plan?.features[stacks_details_key]?.max_limit;
88118

119+
// Check the current stack count
89120
const stackData = await getAllStacksInOrg(selectedOrganisation?.value, ''); // org id will always be there
90121

91122
const stack_count = stackData?.data?.stacks?.length;
92123

124+
// Handle stack limit reached
93125
if (stack_count >= max_stack_limit) {
94126
setIsLoading(false);
95127
setDisableCreateStack(true);
@@ -104,6 +136,7 @@ const TestMigration = () => {
104136
console.log(error);
105137
}
106138

139+
// Prepare data for stack creation
107140
const data = {
108141
name: newMigrationData?.destination_stack?.selectedStack?.label,
109142
description: 'test migration stack',
@@ -130,7 +163,7 @@ const TestMigration = () => {
130163
type: 'success'
131164
});
132165

133-
166+
// Update migration data in Redux
134167
const newMigrationDataObj: INewMigration = {
135168
...newMigrationData,
136169
test_migration: { ...newMigrationData?.test_migration, stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key, stack_name: res?.data?.data?.data?.stack?.name }
@@ -154,7 +187,26 @@ const TestMigration = () => {
154187

155188
if (testRes?.status === 200) {
156189
setdisableTestMigration(true);
190+
191+
//dispatch test migration started flag in redux
192+
const newMigrationDataObj : INewMigration = {
193+
...newMigrationData,
194+
test_migration:{
195+
...newMigrationData?.test_migration,
196+
isMigrationStarted:true,
197+
}
198+
}
199+
dispatch(updateNewMigrationData(newMigrationDataObj));
200+
201+
//update test migration started flag in localstorage
202+
saveStateToLocalStorage({
203+
isTestMigrationCompleted : false,
204+
isTestMigrationStarted : true,
205+
}, projectId);
206+
157207
handleMigrationState(true);
208+
209+
158210
Notification({
159211
notificationContent: { text: 'Test Migration started' },
160212
notificationProps: {
@@ -250,7 +302,7 @@ const TestMigration = () => {
250302
<div className='content-block'>
251303
<div className='content-header'>Execution Logs</div>
252304
<div>
253-
<TestMigrationLogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} sendDataToParent={handleMigrationState} />
305+
<TestMigrationLogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} sendDataToParent={handleMigrationState} projectId={projectId} />
254306
</div>
255307
</div>
256308
</div>

‎ui/src/components/TestMigration/testMigration.interface.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,8 @@ export interface CTA {
88
title?: string;
99
url?: string;
1010
}
11+
12+
export interface TestMigrationValues {
13+
isTestMigrationStarted: boolean,
14+
isTestMigrationCompleted: boolean,
15+
}

‎ui/src/pages/Migration/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,8 +257,8 @@ const Migration = () => {
257257
test_migration: {
258258
stack_link: stackLink,
259259
stack_api_key: projectData?.current_test_stack_id,
260-
isMigrationStarted: false,
261-
isMigrationComplete: false
260+
isMigrationStarted: newMigrationData?.test_migration?.isMigrationStarted || false,
261+
isMigrationComplete: newMigrationData?.test_migration?.isMigrationStarted || false
262262
},
263263
migration_execution: {
264264
migrationStarted: projectData?.isMigrationStarted

0 commit comments

Comments
 (0)