From a7dd0921e9467e535ca0d4abbb57fd4872a144e1 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 5 Jun 2024 10:16:35 +0530 Subject: [PATCH] chore: Create a new datasource for WDS table (#33928) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #33388 /ok-to-test tags="@tag.IDE, @tag.Widget, @tag.Table" > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 06384344db582e56d6b873d7bbf41d1e6bb6b634 > Cypress dashboard url: Click here! --------- Co-authored-by: Pawan Kumar --- .../editorComponents/CodeEditor/index.tsx | 3 + .../CodeEditor/styledComponents.ts | 2 + .../propertyControls/CodeEditorControl.tsx | 3 + .../WDSTableWidget/config/defaultsConfig.ts | 37 ++++- .../propertyPaneConfig/contentConfig.ts | 1 + .../wds/WDSTableWidget/constants/data.ts | 130 ++++++++++++++++++ 6 files changed, 174 insertions(+), 2 deletions(-) create mode 100644 app/client/src/widgets/wds/WDSTableWidget/constants/data.ts diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx index 6f734dd677..27996c09b3 100644 --- a/app/client/src/components/editorComponents/CodeEditor/index.tsx +++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx @@ -241,6 +241,7 @@ export type EditorProps = EditorStyleProps & ignoreSlashCommand?: boolean; ignoreBinding?: boolean; ignoreAutoComplete?: boolean; + maxHeight?: string | number; // Custom gutter customGutter?: CodeEditorGutter; @@ -1571,6 +1572,7 @@ class CodeEditor extends Component { height, hideEvaluatedValue, hoverInteraction, + maxHeight, showLightningMenu, size, theme, @@ -1703,6 +1705,7 @@ class CodeEditor extends Component { isNotHover={this.state.isFocused || this.state.isOpened} isRawView={this.props.isRawView} isReadOnly={this.props.isReadOnly} + maxHeight={maxHeight} mode={this.props.mode} onMouseMove={this.handleLintTooltip} onMouseOver={this.handleMouseMove} diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts index 898dddc453..f303dc4d24 100644 --- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts +++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts @@ -50,6 +50,7 @@ export const EditorWrapper = styled.div<{ removeHoverAndFocusStyle?: boolean; AIEnabled?: boolean; mode: string; + maxHeight?: string | number; }>` // Bottom border was getting clipped .CodeMirror.cm-s-duotone-light.CodeMirror-wrap { @@ -68,6 +69,7 @@ export const EditorWrapper = styled.div<{ ` : `position: relative;`} min-height: 36px; + max-height: ${(props) => props.maxHeight || "auto"}; height: ${(props) => props.height || "auto"}; background-color: ${(props) => props.disabled ? "var(--ads-v2-color-bg-muted)" : "var(--ads-v2-color-bg)"}; diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx index b743ff8ed7..f7bfb9132d 100644 --- a/app/client/src/components/propertyControls/CodeEditorControl.tsx +++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx @@ -11,10 +11,12 @@ import { import LazyCodeEditor from "components/editorComponents/LazyCodeEditor"; import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers"; import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper"; +import type { EditorProps } from "components/editorComponents/CodeEditor"; class CodeEditorControl extends BaseControl { render() { const { + controlConfig, dataTreePath, evaluatedValue, expected, @@ -33,6 +35,7 @@ class CodeEditorControl extends BaseControl { additionalDynamicData={this.props.additionalAutoComplete} hinting={[bindingHintHelper, slashCommandHintHelper]} input={{ value: propertyValue, onChange: this.onChange }} + maxHeight={controlConfig?.maxHeight as EditorProps["maxHeight"]} mode={EditorModes.TEXT_WITH_BINDING} positionCursorInsideBinding size={EditorSize.EXTENDED} diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts index 02087e463c..1467514b07 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts @@ -1,6 +1,13 @@ import { InlineEditingSaveOptions } from "../constants"; -import type { WidgetDefaultProps } from "WidgetProvider/constants"; +import { + BlueprintOperationTypes, + type WidgetDefaultProps, +} from "WidgetProvider/constants"; import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; +import { DEFAULT_DATA } from "../constants/data"; +import type { WidgetProps } from "widgets/BaseWidget"; +import type { DynamicPath } from "utils/DynamicBindingUtils"; +import get from "lodash/get"; export const defaultsConfig = { responsiveBehavior: ResponsiveBehavior.Fill, @@ -19,7 +26,7 @@ export const defaultsConfig = { dynamicPropertyPathList: [], dynamicBindingPathList: [], primaryColumns: {}, - tableData: "", + tableData: DEFAULT_DATA, columnWidthMap: {}, columnOrder: [], enableClientSideSearch: true, @@ -35,4 +42,30 @@ export const defaultsConfig = { buttonLabel: "Action", buttonColor: "accent", buttonVariant: "filled", + blueprint: { + operations: [ + { + type: BlueprintOperationTypes.MODIFY_PROPS, + fn: (widget: WidgetProps & { children?: WidgetProps[] }) => { + const dynamicPropertyPathList: DynamicPath[] = [ + ...get(widget, "dynamicPropertyPathList", []), + ]; + + dynamicPropertyPathList.push({ + key: "tableData", + }); + + const updatePropertyMap = [ + { + widgetId: widget.widgetId, + propertyName: "dynamicPropertyPathList", + propertyValue: dynamicPropertyPathList, + }, + ]; + + return updatePropertyMap; + }, + }, + ], + }, } as unknown as WidgetDefaultProps; diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts index 1dc4496c36..1eb617f995 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/contentConfig.ts @@ -27,6 +27,7 @@ export const contentConfig = [ controlType: "ONE_CLICK_BINDING_CONTROL", controlConfig: { searchableColumn: true, + maxHeight: "300px", }, placeholderText: '[{ "name": "John" }]', inputType: "ARRAY", diff --git a/app/client/src/widgets/wds/WDSTableWidget/constants/data.ts b/app/client/src/widgets/wds/WDSTableWidget/constants/data.ts new file mode 100644 index 0000000000..fc57b5d2e3 --- /dev/null +++ b/app/client/src/widgets/wds/WDSTableWidget/constants/data.ts @@ -0,0 +1,130 @@ +export const DEFAULT_DATA = [ + { + Name: "John Doe", + Company: "TechCorp", + Title: "Software Engineer", + "Phone number": "(555) 123-4567", + Email: "john.doe@techcorp.com", + "Registration date": "2023-01-15", + }, + { + Name: "Jane Smith", + Company: "Innovate Ltd", + Title: "Project Manager", + "Phone number": "(555) 234-5678", + Email: "jane.smith@innovatelt.com", + "Registration date": "2023-02-20", + }, + { + Name: "Alice Johnson", + Company: "Web Solutions", + Title: "UX Designer", + "Phone number": "(555) 345-6789", + Email: "alice.johnson@websolutions.com", + "Registration date": "2023-03-10", + }, + { + Name: "Bob Brown", + Company: "BuildIt", + Title: "Construction Manager", + "Phone number": "(555) 456-7890", + Email: "bob.brown@buildit.com", + "Registration date": "2023-04-05", + }, + { + Name: "Charlie Davis", + Company: "FinTech Inc", + Title: "Financial Analyst", + "Phone number": "(555) 567-8901", + Email: "charlie.davis@fintechinc.com", + "Registration date": "2023-05-12", + }, + { + Name: "Dana Lee", + Company: "HealthFirst", + Title: "Nurse Practitioner", + "Phone number": "(555) 678-9012", + Email: "dana.lee@healthfirst.com", + "Registration date": "2023-06-01", + }, + { + Name: "Evan Martinez", + Company: "AutoPro", + Title: "Mechanical Engineer", + "Phone number": "(555) 789-0123", + Email: "evan.martinez@autopro.com", + "Registration date": "2023-07-19", + }, + { + Name: "Fiona Green", + Company: "EduFuture", + Title: "Curriculum Developer", + "Phone number": "(555) 890-1234", + Email: "fiona.green@edufuture.com", + "Registration date": "2023-08-23", + }, + { + Name: "George Harris", + Company: "MarketMasters", + Title: "Marketing Director", + "Phone number": "(555) 901-2345", + Email: "george.harris@marketmasters.com", + "Registration date": "2023-09-07", + }, + { + Name: "Hannah Wright", + Company: "LegalEagle", + Title: "Attorney", + "Phone number": "(555) 012-3456", + Email: "hannah.wright@legaleagle.com", + "Registration date": "2023-10-15", + }, + { + Name: "Ian Walker", + Company: "HomeGoods", + Title: "Retail Manager", + "Phone number": "(555) 123-4567", + Email: "ian.walker@homegoods.com", + "Registration date": "2023-11-22", + }, + { + Name: "Julia King", + Company: "TravelWise", + Title: "Travel Agent", + "Phone number": "(555) 234-5678", + Email: "julia.king@travelwise.com", + "Registration date": "2023-12-30", + }, + { + Name: "Kevin Scott", + Company: "CleanEnergy", + Title: "Environmental Scientist", + "Phone number": "(555) 345-6789", + Email: "kevin.scott@cleanenergy.com", + "Registration date": "2024-01-08", + }, + { + Name: "Laura Baker", + Company: "MediaMinds", + Title: "Content Strategist", + "Phone number": "(555) 456-7890", + Email: "laura.baker@mediaminds.com", + "Registration date": "2024-02-18", + }, + { + Name: "Michael Young", + Company: "CyberSecure", + Title: "Cybersecurity Specialist", + "Phone number": "(555) 567-8901", + Email: "michael.young@cybersecure.com", + "Registration date": "2024-03-29", + }, + { + Name: "Nina Patel", + Company: "AgriTech", + Title: "Agricultural Engineer", + "Phone number": "(555) 678-9012", + Email: "nina.patel@agritech.com", + "Registration date": "2024-04-10", + }, +];