Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix issue where tabs are lost when the user enters an invalid tabs value (#569)

Browse Source
This commit is contained in:
Abhinav Jha 2020-09-18 10:52:54 +05:30 committed by GitHub
parent 19bd7d272a
commit 0b87c7431b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/src/constants/FieldExpectedValue.ts
View File

@ -46,7 +46,8 @@ const FIELD_VALUES: Record<
// onSelectionChange: "Function Call",
},
TABS_WIDGET: {
tabs: "Array<{ label: string, id: string }>",
tabs:
"Array<{ label: string, id: string(unique), widgetId: string(unique) }>",
selectedTab: "string",
isVisible: "boolean",
},

31
app/client/src/utils/WidgetPropsUtils.tsx
View File

@ -21,6 +21,7 @@ import { generateReactKey } from "./generators";
import { ChartDataPoint } from "widgets/ChartWidget";
import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
import { isString } from "lodash";
import log from "loglevel";
export type WidgetOperationParams = {
operation: WidgetOperation;
@ -200,18 +201,23 @@ const tabsWidgetTabsPropertyMigration = (
?.filter(Boolean)
.map((child: WidgetProps) => {
if (child.type === WidgetTypes.TABS_WIDGET) {
const tabs = isString(child.tabs) ? JSON.parse(child.tabs) : child.tabs;
const newTabs = tabs.map((tab: any) => {
const childForTab = child.children
?.filter(Boolean)
.find((tabChild: WidgetProps) => tabChild.tabId === tab.id);
if (childForTab) {
tab.widgetId = childForTab.widgetId;
}
return tab;
});
child.tabs = JSON.stringify(newTabs);
try {
const tabs = isString(child.tabs)
? JSON.parse(child.tabs)
: child.tabs;
const newTabs = tabs.map((tab: any) => {
const childForTab = child.children
?.filter(Boolean)
.find((tabChild: WidgetProps) => tabChild.tabId === tab.id);
if (childForTab) {
tab.widgetId = childForTab.widgetId;
}
return tab;
});
child.tabs = JSON.stringify(newTabs);
} catch (migrationError) {
log.debug({ migrationError });
}
}
if (child.children && child.children.length) {
child = tabsWidgetTabsPropertyMigration(child);
@ -266,6 +272,7 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
}
if (currentDSL.version === 5) {
currentDSL = tabsWidgetTabsPropertyMigration(currentDSL);
currentDSL.version = 6;
}
return currentDSL;

41
app/client/src/widgets/TabsWidget.tsx
View File

@ -143,26 +143,29 @@ class TabsWidget extends BaseWidget<
.map(child => child.widgetId);
// If the tabs and children are different,
// add and/or remove tab container widgets
if (_.xor(childWidgetIds, tabWidgetIds).length > 0) {
const widgetIdsToRemove: string[] = _.without(
childWidgetIds,
...tabWidgetIds,
);
const widgetIdsToCreate: string[] = _.without(
tabWidgetIds,
...childWidgetIds,
);
this.addTabContainer(widgetIdsToCreate);
this.removeTabContainer(widgetIdsToRemove);
}
// If all tabs were removed.
if (tabWidgetIds.length === 0) {
const newTabContainerWidgetId = generateReactKey();
const tabs = [
{ id: "tab1", widgetId: newTabContainerWidgetId, label: "Tab 1" },
];
this.updateWidgetProperty("tabs", JSON.stringify(tabs));
if (!this.props.invalidProps?.tabs) {
if (_.xor(childWidgetIds, tabWidgetIds).length > 0) {
const widgetIdsToRemove: string[] = _.without(
childWidgetIds,
...tabWidgetIds,
);
const widgetIdsToCreate: string[] = _.without(
tabWidgetIds,
...childWidgetIds,
);
this.addTabContainer(widgetIdsToCreate);
this.removeTabContainer(widgetIdsToRemove);
}
// If all tabs were removed.
if (tabWidgetIds.length === 0) {
const newTabContainerWidgetId = generateReactKey();
const tabs = [
{ id: "tab1", widgetId: newTabContainerWidgetId, label: "Tab 1" },
];
this.updateWidgetProperty("tabs", JSON.stringify(tabs));
}
}
}
if (this.props.defaultTab) {