From f21ce94aeb3cb5d3ee6f11a5d57190347c51c9c1 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 10:32:09 +0000 Subject: [PATCH 01/15] feat(widgets): Add Kanban Board widget - Implement Kanban Board widget with drag-and-drop support - Add column and task configuration through property pane - Support styling options for columns and tasks - Match existing Appsmith widget visual styles Link to Devin run: https://app.devin.ai/sessions/73c67abb55d34ea6b68ab834e1446c1a Co-Authored-By: nikhil@appsmith.com --- app/client/package.json | 4 +- .../KanbanBoardWidget/component/index.tsx | 239 ++++++++++++++ .../widgets/KanbanBoardWidget/constants.ts | 12 + .../src/widgets/KanbanBoardWidget/icon.svg | 5 + .../src/widgets/KanbanBoardWidget/index.ts | 3 + .../KanbanBoardWidget/widget/index.tsx | 305 ++++++++++++++++++ app/client/src/widgets/index.ts | 2 + app/client/yarn.lock | 106 +++++- 8 files changed, 659 insertions(+), 17 deletions(-) create mode 100644 app/client/src/widgets/KanbanBoardWidget/component/index.tsx create mode 100644 app/client/src/widgets/KanbanBoardWidget/constants.ts create mode 100644 app/client/src/widgets/KanbanBoardWidget/icon.svg create mode 100644 app/client/src/widgets/KanbanBoardWidget/index.ts create mode 100644 app/client/src/widgets/KanbanBoardWidget/widget/index.tsx diff --git a/app/client/package.json b/app/client/package.json index 1a4652a73863..de405dfc8ff3 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -95,6 +95,7 @@ "@types/babel__standalone": "^7.1.7", "@types/d3-geo": "^3.1.0", "@types/google.maps": "^3.51.0", + "@types/react-beautiful-dnd": "^13.1.8", "@types/react-page-visibility": "^6.4.1", "@types/web": "^0.0.99", "@uppy/core": "^1.16.0", @@ -175,6 +176,7 @@ "rc-tree-select": "^5.4.0", "react": "^17.0.2", "react-append-to-body": "^2.0.26", + "react-beautiful-dnd": "^13.1.1", "react-custom-scrollbars": "^4.2.1", "react-device-detect": "^2.2.2", "react-dnd": "^9.3.4", @@ -227,7 +229,6 @@ "tinymce": "6.8.3", "toposort": "^2.0.2", "tslib": "^2.3.1", - "typescript": "^5.5.4", "unescape-js": "^1.1.4", "url-search-params-polyfill": "^8.0.0", "usehooks-ts": "^3.1.0", @@ -359,6 +360,7 @@ "ts-jest": "^29.1.0", "ts-jest-mock-import-meta": "^0.12.0", "ts-node": "^10.9.1", + "typescript": "5.2.2", "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz" }, "resolutions": { diff --git a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx new file mode 100644 index 000000000000..ee5f5f7fca32 --- /dev/null +++ b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx @@ -0,0 +1,239 @@ +import React from "react"; +import styled from "styled-components"; +import type { + DropResult, + DroppableProvided, + DroppableStateSnapshot, + DraggableProvided, + DraggableStateSnapshot, +} from "react-beautiful-dnd"; +import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; + +interface KanbanComponentProps { + columns: Array<{ + title: string; + tasks: Array<{ + title: string; + description: string; + style?: Record; + }>; + style?: Record; + }>; + backgroundColor?: string; + borderRadius?: string; + boxShadow?: string; + onTaskMove?: (columns: KanbanComponentProps["columns"]) => void; +} + +const Container = styled.div<{ + backgroundColor?: string; + borderRadius?: string; + boxShadow?: string; +}>` + display: flex; + height: 100%; + background-color: ${(props) => + props.backgroundColor || "var(--appsmith-color-black-0)"}; + border-radius: ${(props) => + props.borderRadius || "var(--appsmith-border-radius-1)"}; + box-shadow: ${(props) => props.boxShadow || "none"}; + padding: var(--appsmith-spaces-4); + gap: var(--appsmith-spaces-4); + overflow-x: auto; + font-family: var(--appsmith-font-family); +`; + +const Column = styled.div<{ + backgroundColor?: string; + textColor?: string; +}>` + background-color: ${(props) => + props.backgroundColor || "var(--appsmith-color-black-50)"}; + border-radius: var(--appsmith-border-radius-1); + width: 280px; + min-width: 280px; + display: flex; + flex-direction: column; + padding: var(--appsmith-spaces-4); +`; + +const ColumnTitle = styled.h3` + margin: 0; + padding: var(--appsmith-spaces-4); + font-size: var(--appsmith-font-size-4); + font-weight: var(--appsmith-font-weight-5); + color: ${(props) => props.color || "var(--appsmith-color-black-900)"}; +`; + +const TaskList = styled.div` + padding: var(--appsmith-spaces-4); + flex-grow: 1; + min-height: 100px; + transition: background-color 0.2s ease; + + &.dragging-over { + background-color: var(--appsmith-color-black-100); + border-radius: var(--appsmith-border-radius-1); + } +`; + +const Task = styled.div<{ + backgroundColor?: string; + textColor?: string; +}>` + background-color: ${(props) => + props.backgroundColor || "var(--appsmith-color-black-0)"}; + color: ${(props) => props.textColor || "var(--appsmith-color-black-800)"}; + border-radius: var(--appsmith-border-radius-1); + padding: var(--appsmith-spaces-4); + margin-bottom: var(--appsmith-spaces-3); + box-shadow: var(--appsmith-card-shadow); + cursor: grab; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: var(--appsmith-card-shadow-hover); + } + + &:active { + cursor: grabbing; + } +`; + +const TaskTitle = styled.div` + font-weight: var(--appsmith-font-weight-5); + margin-bottom: var(--appsmith-spaces-2); + color: inherit; +`; + +const TaskDescription = styled.div` + font-size: var(--appsmith-font-size-3); + color: inherit; + opacity: 0.8; +`; + +const KanbanComponent: React.FC = React.memo( + ({ + backgroundColor, + borderRadius, + boxShadow, + columns, + onTaskMove, + }: KanbanComponentProps) => { + const onDragEnd = React.useCallback( + (result: DropResult): void => { + const { destination, source } = result; + + if (!destination) return; + + if ( + destination.droppableId === source.droppableId && + destination.index === source.index + ) { + return; + } + + const sourceColumnIndex = parseInt(source.droppableId.split("-")[1]); + const destColumnIndex = parseInt(destination.droppableId.split("-")[1]); + + const newColumns = [...columns]; + const sourceColumn = newColumns[sourceColumnIndex]; + const destColumn = newColumns[destColumnIndex]; + + const [movedTask] = sourceColumn.tasks.splice(source.index, 1); + + destColumn.tasks.splice(destination.index, 0, movedTask); + + // Trigger widget property update + if (onTaskMove) { + onTaskMove(newColumns); + } + }, + [columns, onTaskMove], + ); + + return ( + + + {columns.map((column, columnIndex) => ( + + + {column.title} + + + {( + provided: DroppableProvided, + snapshot: DroppableStateSnapshot, + ) => ( + + {column.tasks.map((task, taskIndex) => ( + + {( + provided: DraggableProvided, + snapshot: DraggableStateSnapshot, + ) => ( + ({ + ...provided.draggableProps.style, + transform: snapshot.isDragging + ? provided.draggableProps.style?.transform + : "none", + ...(task.style as React.CSSProperties), + }), + [ + provided.draggableProps.style, + snapshot.isDragging, + task.style, + ], + )} + textColor={task.style?.textColor as string} + > + {task.title} + + {task.description} + + + )} + + ))} + {provided.placeholder} + + )} + + + ))} + + + ); + }, +); + +export default KanbanComponent; diff --git a/app/client/src/widgets/KanbanBoardWidget/constants.ts b/app/client/src/widgets/KanbanBoardWidget/constants.ts new file mode 100644 index 000000000000..09a55a20f0a1 --- /dev/null +++ b/app/client/src/widgets/KanbanBoardWidget/constants.ts @@ -0,0 +1,12 @@ +export const KANBAN_BOARD_WIDGET = "KANBAN_BOARD_WIDGET"; + +export const DefaultColumnStyles = { + backgroundColor: "#F4F4F4", + borderRadius: "4px", +}; + +export const DefaultTaskStyles = { + backgroundColor: "#FFFFFF", + borderRadius: "4px", + boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)", +}; diff --git a/app/client/src/widgets/KanbanBoardWidget/icon.svg b/app/client/src/widgets/KanbanBoardWidget/icon.svg new file mode 100644 index 000000000000..618b7dcec676 --- /dev/null +++ b/app/client/src/widgets/KanbanBoardWidget/icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/src/widgets/KanbanBoardWidget/index.ts b/app/client/src/widgets/KanbanBoardWidget/index.ts new file mode 100644 index 000000000000..b668e51d0683 --- /dev/null +++ b/app/client/src/widgets/KanbanBoardWidget/index.ts @@ -0,0 +1,3 @@ +import Widget from "./widget"; + +export default Widget; diff --git a/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx new file mode 100644 index 000000000000..89d5596535f7 --- /dev/null +++ b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx @@ -0,0 +1,305 @@ +import React from "react"; +import BaseWidget from "widgets/BaseWidget"; +import type { WidgetProps, WidgetState } from "widgets/BaseWidget"; +import { ValidationTypes } from "constants/WidgetValidation"; +import type { DerivedPropertiesMap } from "WidgetProvider/factory"; +import KanbanComponent from "../component"; + +export interface KanbanBoardWidgetProps extends WidgetProps { + columns: Array<{ + title: string; + tasks: Array<{ + title: string; + description: string; + style?: Record; + }>; + style?: Record; + }>; + backgroundColor?: string; + borderRadius?: string; + boxShadow?: string; + onTaskMove?: (columns: KanbanBoardWidgetProps["columns"]) => void; + sanitizedColumns: KanbanBoardWidgetProps["columns"]; + isValid: boolean; +} + +class KanbanBoardWidget extends BaseWidget< + KanbanBoardWidgetProps, + WidgetState +> { + static type = "KANBAN_BOARD_WIDGET"; + + static getConfig() { + return { + name: "Kanban Board", + iconSVG: "", // TODO: Add icon + needsMeta: true, + isCanvas: false, + defaults: { + rows: 40, + columnCount: 24, + widgetName: "KanbanBoard", + version: 1, + backgroundColor: "#FFFFFF", + borderRadius: "0px", + boxShadow: "none", + columns: [ + { + title: "To Do", + tasks: [ + { + title: "Task 1", + description: "Description 1", + }, + ], + }, + { + title: "In Progress", + tasks: [], + }, + { + title: "Done", + tasks: [], + }, + ], + }, + }; + } + + static getPropertyPaneConfig() { + return [ + { + sectionName: "Data", + children: [ + { + propertyName: "columns", + label: "Columns", + controlType: "ARRAY_FIELD", + placeholderText: '[{"title": "To Do", "tasks": []}]', + isBindProperty: true, + isTriggerProperty: false, + panelConfig: { + editableTitle: true, + titlePropertyName: "title", + panelIdPropertyName: "id", + updateHook: () => [], + children: [ + { + sectionName: "Column Settings", + children: [ + { + propertyName: "title", + label: "Title", + controlType: "INPUT_TEXT", + placeholderText: "Enter column title", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + required: true, + default: "", + }, + }, + }, + { + propertyName: "tasks", + label: "Tasks", + controlType: "ARRAY_FIELD", + isBindProperty: true, + isTriggerProperty: false, + panelConfig: { + editableTitle: true, + titlePropertyName: "title", + panelIdPropertyName: "id", + updateHook: () => [], + children: [ + { + sectionName: "Task Settings", + children: [ + { + propertyName: "title", + label: "Title", + controlType: "INPUT_TEXT", + placeholderText: "Enter task title", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + required: true, + default: "", + }, + }, + }, + { + propertyName: "description", + label: "Description", + controlType: "INPUT_TEXT", + placeholderText: "Enter task description", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + required: true, + default: "", + }, + }, + }, + { + propertyName: "backgroundColor", + label: "Background Color", + controlType: "COLOR_PICKER", + isBindProperty: false, + isTriggerProperty: false, + }, + { + propertyName: "textColor", + label: "Text Color", + controlType: "COLOR_PICKER", + isBindProperty: false, + isTriggerProperty: false, + }, + ], + }, + ], + }, + }, + { + propertyName: "backgroundColor", + label: "Background Color", + controlType: "COLOR_PICKER", + isBindProperty: false, + isTriggerProperty: false, + }, + { + propertyName: "textColor", + label: "Text Color", + controlType: "COLOR_PICKER", + isBindProperty: false, + isTriggerProperty: false, + }, + ], + }, + ], + }, + }, + ], + }, + { + sectionName: "General", + children: [ + { + propertyName: "isVisible", + label: "Visible", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.BOOLEAN, + }, + }, + { + propertyName: "animateLoading", + label: "Animate Loading", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.BOOLEAN, + }, + }, + ], + }, + { + sectionName: "Styles", + children: [ + { + propertyName: "backgroundColor", + label: "Background Color", + controlType: "COLOR_PICKER", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + }, + { + propertyName: "borderRadius", + label: "Border Radius", + controlType: "BORDER_RADIUS_OPTIONS", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + }, + { + propertyName: "boxShadow", + label: "Box Shadow", + controlType: "BOX_SHADOW_OPTIONS", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + }, + ], + }, + ]; + } + + static getDerivedPropertiesMap(): DerivedPropertiesMap { + return { + sanitizedColumns: `{{ this.columns?.map((column) => ({ + ...column, + tasks: column.tasks || [] + })) || [] }}`, + isValid: `{{ Array.isArray(this.columns) }}`, + }; + } + + static getDefaultPropertiesMap(): Record { + return {}; + } + + static getMetaPropertiesMap(): Record { + return {}; + } + + getPageView() { + const { + backgroundColor, + borderRadius, + boxShadow, + isValid, + sanitizedColumns, + } = this.props; + + if (!isValid) { + return null; + } + + return ( + { + this.props.updateWidgetMetaProperty( + "columns", + updatedColumns, + true, + ); + }, + [this.props.updateWidgetMetaProperty], + )} + /> + ); + } + + getWidgetView() { + return this.getPageView(); + } +} + +export default KanbanBoardWidget; diff --git a/app/client/src/widgets/index.ts b/app/client/src/widgets/index.ts index 40c11b294100..5e02f2e51abd 100644 --- a/app/client/src/widgets/index.ts +++ b/app/client/src/widgets/index.ts @@ -90,6 +90,7 @@ import { WDSSelectWidget } from "modules/ui-builder/ui/wds/WDSSelectWidget"; import { WDSCustomWidget } from "modules/ui-builder/ui/wds/WDSCustomWidget"; import { EEWDSWidgets } from "ee/modules/ui-builder/ui/wds"; import { WDSDatePickerWidget } from "modules/ui-builder/ui/wds/WDSDatePickerWidget"; +import KanbanBoardWidget from "./KanbanBoardWidget"; const LegacyWidgets = [ CanvasWidget, @@ -142,6 +143,7 @@ const LegacyWidgets = [ CodeScannerWidget, ListWidgetV2, ExternalWidget, + KanbanBoardWidget, ]; const DeprecatedWidgets = [ diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 6d3cf69e752f..37125043ccd5 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -2520,7 +2520,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.26.0 resolution: "@babel/runtime@npm:7.26.0" dependencies: @@ -11250,6 +11250,15 @@ __metadata: languageName: node linkType: hard +"@types/react-beautiful-dnd@npm:^13.1.8": + version: 13.1.8 + resolution: "@types/react-beautiful-dnd@npm:13.1.8" + dependencies: + "@types/react": "*" + checksum: f71c64ba7e2e1f8480e772b45268856d2bf99adf90d12dd5f31486075dfd3e33a0b0922969851c660f01aa9593aa38b38e17ee9038eb866af9ec4327be903cb9 + languageName: node + linkType: hard + "@types/react-custom-scrollbars@npm:^4.0.7": version: 4.0.7 resolution: "@types/react-custom-scrollbars@npm:4.0.7" @@ -11316,15 +11325,15 @@ __metadata: languageName: node linkType: hard -"@types/react-redux@npm:^7.0.1, @types/react-redux@npm:^7.1.16": - version: 7.1.18 - resolution: "@types/react-redux@npm:7.1.18" +"@types/react-redux@npm:^7.0.1, @types/react-redux@npm:^7.1.20": + version: 7.1.34 + resolution: "@types/react-redux@npm:7.1.34" dependencies: "@types/hoist-non-react-statics": ^3.3.0 "@types/react": "*" hoist-non-react-statics: ^3.3.0 redux: ^4.0.0 - checksum: 8aa24c15df711e2a20f903843f42491316094c3a49a90dcae86dcafa8fdb2318fdfaa983e23d67840986f11131b9b8856a5d6971288d68fa8aa592adc348a942 + checksum: ba0cc5f54b91bff162cc97cf5d82d0077944e2d744c276c3c8eb896a293aba00923b513f5cd6ad717a46bf0c128a099ad697c98672202acb25143602042c8e6c languageName: node linkType: hard @@ -13201,6 +13210,7 @@ __metadata: "@types/pluralize": ^0.0.33 "@types/prismjs": ^1.16.1 "@types/react": ^17.0.2 + "@types/react-beautiful-dnd": ^13.1.8 "@types/react-custom-scrollbars": ^4.0.7 "@types/react-dom": ^17.0.2 "@types/react-google-recaptcha": ^2.1.1 @@ -13357,6 +13367,7 @@ __metadata: rc-tree-select: ^5.4.0 react: ^17.0.2 react-append-to-body: ^2.0.26 + react-beautiful-dnd: ^13.1.1 react-custom-scrollbars: ^4.2.1 react-device-detect: ^2.2.2 react-dnd: ^9.3.4 @@ -13417,7 +13428,7 @@ __metadata: ts-jest-mock-import-meta: ^0.12.0 ts-node: ^10.9.1 tslib: ^2.3.1 - typescript: ^5.5.4 + typescript: 5.2.2 unescape-js: ^1.1.4 url-search-params-polyfill: ^8.0.0 usehooks-ts: ^3.1.0 @@ -16128,6 +16139,15 @@ __metadata: languageName: node linkType: hard +"css-box-model@npm:^1.2.0": + version: 1.2.1 + resolution: "css-box-model@npm:1.2.1" + dependencies: + tiny-invariant: ^1.0.6 + checksum: 4d113f26fed6b9150e2c314502d00dabe06f12ae43a01a7e9b6e57f3de49b4281dbb0dc46a1158a7349618f8f34d9250af57cb43d7337e9485e73e6b821e470e + languageName: node + linkType: hard + "css-color-keywords@npm:^1.0.0": version: 1.0.0 resolution: "css-color-keywords@npm:1.0.0" @@ -28544,6 +28564,13 @@ __metadata: languageName: node linkType: hard +"raf-schd@npm:^4.0.2": + version: 4.0.3 + resolution: "raf-schd@npm:4.0.3" + checksum: 45514041c5ad31fa96aef3bb3c572a843b92da2f2cd1cb4a47c9ad58e48761d3a4126e18daa32b2bfa0bc2551a42d8f324a0e40e536cb656969929602b4e8b58 + languageName: node + linkType: hard + "raf@npm:^3.1.0, raf@npm:^3.4.1": version: 3.4.1 resolution: "raf@npm:3.4.1" @@ -28975,6 +29002,24 @@ __metadata: languageName: node linkType: hard +"react-beautiful-dnd@npm:^13.1.1": + version: 13.1.1 + resolution: "react-beautiful-dnd@npm:13.1.1" + dependencies: + "@babel/runtime": ^7.9.2 + css-box-model: ^1.2.0 + memoize-one: ^5.1.1 + raf-schd: ^4.0.2 + react-redux: ^7.2.0 + redux: ^4.0.4 + use-memo-one: ^1.1.1 + peerDependencies: + react: ^16.8.5 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0 + checksum: 5f90f7c0ab77a14dfcd496cbd94bbde457612f380c6fc815f3bba7b52effd75132948fcaa661a902a184bb1e6ae5896dcf5b0c77c4ddf809a2c65288f3eed5a7 + languageName: node + linkType: hard + "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -29275,7 +29320,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1": +"react-is@npm:^17.0.1, react-is@npm:^17.0.2": version: 17.0.2 resolution: "react-is@npm:17.0.2" checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8 @@ -29448,24 +29493,24 @@ __metadata: languageName: node linkType: hard -"react-redux@npm:^7.2.4": - version: 7.2.4 - resolution: "react-redux@npm:7.2.4" +"react-redux@npm:^7.2.0, react-redux@npm:^7.2.4": + version: 7.2.9 + resolution: "react-redux@npm:7.2.9" dependencies: - "@babel/runtime": ^7.12.1 - "@types/react-redux": ^7.1.16 + "@babel/runtime": ^7.15.4 + "@types/react-redux": ^7.1.20 hoist-non-react-statics: ^3.3.2 loose-envify: ^1.4.0 prop-types: ^15.7.2 - react-is: ^16.13.1 + react-is: ^17.0.2 peerDependencies: - react: ^16.8.3 || ^17 + react: ^16.8.3 || ^17 || ^18 peerDependenciesMeta: react-dom: optional: true react-native: optional: true - checksum: 214fa1a4811f95090b77d96ec7114c322adf388b6d086ebebf50cdaf03549758037283f953d2b920cf6ee2f6ffad8f35e92f1ab959b3f2c957f5075d00e16d0a + checksum: 369a2bdcf87915659af9e5c55abfd9f52a84e43e0d12dcc108ed17dbe6933558b7b7fc12caa9c10c1a10a8be7df89454b6c96989d8573fedec1a772c94a1f145 languageName: node linkType: hard @@ -32874,7 +32919,7 @@ __metadata: languageName: node linkType: hard -"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": +"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": version: 1.3.3 resolution: "tiny-invariant@npm:1.3.3" checksum: 5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe @@ -33512,6 +33557,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:5.2.2": + version: 5.2.2 + resolution: "typescript@npm:5.2.2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 7912821dac4d962d315c36800fe387cdc0a6298dba7ec171b350b4a6e988b51d7b8f051317786db1094bd7431d526b648aba7da8236607febb26cf5b871d2d3c + languageName: node + linkType: hard + "typescript@npm:^5.5.4": version: 5.5.4 resolution: "typescript@npm:5.5.4" @@ -33522,6 +33577,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@5.2.2#~builtin": + version: 5.2.2 + resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin::version=5.2.2&hash=77c9e2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 07106822b4305de3f22835cbba949a2b35451cad50888759b6818421290ff95d522b38ef7919e70fb381c5fe9c1c643d7dea22c8b31652a717ddbd57b7f4d554 + languageName: node + linkType: hard + "typescript@patch:typescript@^5.5.4#~builtin": version: 5.5.4 resolution: "typescript@patch:typescript@npm%3A5.5.4#~builtin::version=5.5.4&hash=77c9e2" @@ -33944,6 +34009,15 @@ __metadata: languageName: node linkType: hard +"use-memo-one@npm:^1.1.1": + version: 1.1.3 + resolution: "use-memo-one@npm:1.1.3" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 8f08eba26d69406b61bb4b8dacdd5a92bd6aef5b53d346dfe87954f7330ee10ecabc937cc7854635155d46053828e85c10b5a5aff7a04720e6a97b9f42999bac + languageName: node + linkType: hard + "use-sidecar@npm:^1.1.2": version: 1.1.2 resolution: "use-sidecar@npm:1.1.2" From b8bb1cf8f8ced9d630b909cf6f6d8dfd26f0d4d8 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 10:59:59 +0000 Subject: [PATCH 02/15] fix: Add icon SVG to Kanban Board widget config Co-Authored-By: nikhil@appsmith.com --- app/client/src/widgets/KanbanBoardWidget/widget/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx index 89d5596535f7..1d9df246ea78 100644 --- a/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx @@ -32,7 +32,11 @@ class KanbanBoardWidget extends BaseWidget< static getConfig() { return { name: "Kanban Board", - iconSVG: "", // TODO: Add icon + iconSVG: ` + + + +`, needsMeta: true, isCanvas: false, defaults: { From 1bb567865acede6f621d6555f0c45d83acf75723 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:04:31 +0000 Subject: [PATCH 03/15] fix: Improve type safety in Kanban Board widget Co-Authored-By: nikhil@appsmith.com --- .../KanbanBoardWidget/component/index.tsx | 30 ++++-- .../KanbanBoardWidget/widget/index.tsx | 99 ++++++++++++++++--- 2 files changed, 108 insertions(+), 21 deletions(-) diff --git a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx index ee5f5f7fca32..756be246a83d 100644 --- a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx @@ -9,20 +9,30 @@ import type { } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; +export interface KanbanTask { + title: string; + description: string; + style?: { + backgroundColor?: string; + textColor?: string; + }; +} + +export interface KanbanColumn { + title: string; + tasks: KanbanTask[]; + style?: { + backgroundColor?: string; + textColor?: string; + }; +} + interface KanbanComponentProps { - columns: Array<{ - title: string; - tasks: Array<{ - title: string; - description: string; - style?: Record; - }>; - style?: Record; - }>; + columns: KanbanColumn[]; backgroundColor?: string; borderRadius?: string; boxShadow?: string; - onTaskMove?: (columns: KanbanComponentProps["columns"]) => void; + onTaskMove?: (columns: KanbanColumn[]) => void; } const Container = styled.div<{ diff --git a/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx index 1d9df246ea78..b26a2a4a55de 100644 --- a/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx @@ -5,21 +5,15 @@ import { ValidationTypes } from "constants/WidgetValidation"; import type { DerivedPropertiesMap } from "WidgetProvider/factory"; import KanbanComponent from "../component"; +import type { KanbanColumn } from "../component"; + export interface KanbanBoardWidgetProps extends WidgetProps { - columns: Array<{ - title: string; - tasks: Array<{ - title: string; - description: string; - style?: Record; - }>; - style?: Record; - }>; + columns: KanbanColumn[]; backgroundColor?: string; borderRadius?: string; boxShadow?: string; - onTaskMove?: (columns: KanbanBoardWidgetProps["columns"]) => void; - sanitizedColumns: KanbanBoardWidgetProps["columns"]; + onTaskMove?: (columns: KanbanColumn[]) => void; + sanitizedColumns: KanbanColumn[]; isValid: boolean; } @@ -79,9 +73,92 @@ class KanbanBoardWidget extends BaseWidget< propertyName: "columns", label: "Columns", controlType: "ARRAY_FIELD", + helpText: "Configure kanban board columns and their tasks", placeholderText: '[{"title": "To Do", "tasks": []}]', isBindProperty: true, isTriggerProperty: false, + validation: { + type: ValidationTypes.ARRAY, + params: { + unique: true, + children: { + type: ValidationTypes.OBJECT, + params: { + required: true, + allowedKeys: [ + { + name: "title", + type: ValidationTypes.TEXT, + params: { + required: true, + default: "", + }, + }, + { + name: "tasks", + type: ValidationTypes.ARRAY, + params: { + default: [], + children: { + type: ValidationTypes.OBJECT, + params: { + allowedKeys: [ + { + name: "title", + type: ValidationTypes.TEXT, + params: { + required: true, + }, + }, + { + name: "description", + type: ValidationTypes.TEXT, + params: { + required: true, + }, + }, + { + name: "style", + type: ValidationTypes.OBJECT, + params: { + allowedKeys: [ + { + name: "backgroundColor", + type: ValidationTypes.TEXT, + }, + { + name: "textColor", + type: ValidationTypes.TEXT, + }, + ], + }, + }, + ], + }, + }, + }, + }, + { + name: "style", + type: ValidationTypes.OBJECT, + params: { + allowedKeys: [ + { + name: "backgroundColor", + type: ValidationTypes.TEXT, + }, + { + name: "textColor", + type: ValidationTypes.TEXT, + }, + ], + }, + }, + ], + }, + }, + }, + }, panelConfig: { editableTitle: true, titlePropertyName: "title", From adaf26a027a2c1e65208f3941d834b0967367db6 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:10:07 +0000 Subject: [PATCH 04/15] fix: Revert TypeScript version change Co-Authored-By: nikhil@appsmith.com --- app/client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/package.json b/app/client/package.json index de405dfc8ff3..0d1b31640f4c 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -360,7 +360,7 @@ "ts-jest": "^29.1.0", "ts-jest-mock-import-meta": "^0.12.0", "ts-node": "^10.9.1", - "typescript": "5.2.2", + "typescript": "^5.5.4", "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz" }, "resolutions": { From 58af461f7e6f270c01c5acbd050dae832370c255 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:13:09 +0000 Subject: [PATCH 05/15] fix: Revert TypeScript version changes and lockfile Co-Authored-By: nikhil@appsmith.com --- app/client/package.json | 4 +- app/client/yarn.lock | 106 ++++++---------------------------------- 2 files changed, 17 insertions(+), 93 deletions(-) diff --git a/app/client/package.json b/app/client/package.json index 0d1b31640f4c..1a4652a73863 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -95,7 +95,6 @@ "@types/babel__standalone": "^7.1.7", "@types/d3-geo": "^3.1.0", "@types/google.maps": "^3.51.0", - "@types/react-beautiful-dnd": "^13.1.8", "@types/react-page-visibility": "^6.4.1", "@types/web": "^0.0.99", "@uppy/core": "^1.16.0", @@ -176,7 +175,6 @@ "rc-tree-select": "^5.4.0", "react": "^17.0.2", "react-append-to-body": "^2.0.26", - "react-beautiful-dnd": "^13.1.1", "react-custom-scrollbars": "^4.2.1", "react-device-detect": "^2.2.2", "react-dnd": "^9.3.4", @@ -229,6 +227,7 @@ "tinymce": "6.8.3", "toposort": "^2.0.2", "tslib": "^2.3.1", + "typescript": "^5.5.4", "unescape-js": "^1.1.4", "url-search-params-polyfill": "^8.0.0", "usehooks-ts": "^3.1.0", @@ -360,7 +359,6 @@ "ts-jest": "^29.1.0", "ts-jest-mock-import-meta": "^0.12.0", "ts-node": "^10.9.1", - "typescript": "^5.5.4", "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz" }, "resolutions": { diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 37125043ccd5..6d3cf69e752f 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -2520,7 +2520,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.26.0 resolution: "@babel/runtime@npm:7.26.0" dependencies: @@ -11250,15 +11250,6 @@ __metadata: languageName: node linkType: hard -"@types/react-beautiful-dnd@npm:^13.1.8": - version: 13.1.8 - resolution: "@types/react-beautiful-dnd@npm:13.1.8" - dependencies: - "@types/react": "*" - checksum: f71c64ba7e2e1f8480e772b45268856d2bf99adf90d12dd5f31486075dfd3e33a0b0922969851c660f01aa9593aa38b38e17ee9038eb866af9ec4327be903cb9 - languageName: node - linkType: hard - "@types/react-custom-scrollbars@npm:^4.0.7": version: 4.0.7 resolution: "@types/react-custom-scrollbars@npm:4.0.7" @@ -11325,15 +11316,15 @@ __metadata: languageName: node linkType: hard -"@types/react-redux@npm:^7.0.1, @types/react-redux@npm:^7.1.20": - version: 7.1.34 - resolution: "@types/react-redux@npm:7.1.34" +"@types/react-redux@npm:^7.0.1, @types/react-redux@npm:^7.1.16": + version: 7.1.18 + resolution: "@types/react-redux@npm:7.1.18" dependencies: "@types/hoist-non-react-statics": ^3.3.0 "@types/react": "*" hoist-non-react-statics: ^3.3.0 redux: ^4.0.0 - checksum: ba0cc5f54b91bff162cc97cf5d82d0077944e2d744c276c3c8eb896a293aba00923b513f5cd6ad717a46bf0c128a099ad697c98672202acb25143602042c8e6c + checksum: 8aa24c15df711e2a20f903843f42491316094c3a49a90dcae86dcafa8fdb2318fdfaa983e23d67840986f11131b9b8856a5d6971288d68fa8aa592adc348a942 languageName: node linkType: hard @@ -13210,7 +13201,6 @@ __metadata: "@types/pluralize": ^0.0.33 "@types/prismjs": ^1.16.1 "@types/react": ^17.0.2 - "@types/react-beautiful-dnd": ^13.1.8 "@types/react-custom-scrollbars": ^4.0.7 "@types/react-dom": ^17.0.2 "@types/react-google-recaptcha": ^2.1.1 @@ -13367,7 +13357,6 @@ __metadata: rc-tree-select: ^5.4.0 react: ^17.0.2 react-append-to-body: ^2.0.26 - react-beautiful-dnd: ^13.1.1 react-custom-scrollbars: ^4.2.1 react-device-detect: ^2.2.2 react-dnd: ^9.3.4 @@ -13428,7 +13417,7 @@ __metadata: ts-jest-mock-import-meta: ^0.12.0 ts-node: ^10.9.1 tslib: ^2.3.1 - typescript: 5.2.2 + typescript: ^5.5.4 unescape-js: ^1.1.4 url-search-params-polyfill: ^8.0.0 usehooks-ts: ^3.1.0 @@ -16139,15 +16128,6 @@ __metadata: languageName: node linkType: hard -"css-box-model@npm:^1.2.0": - version: 1.2.1 - resolution: "css-box-model@npm:1.2.1" - dependencies: - tiny-invariant: ^1.0.6 - checksum: 4d113f26fed6b9150e2c314502d00dabe06f12ae43a01a7e9b6e57f3de49b4281dbb0dc46a1158a7349618f8f34d9250af57cb43d7337e9485e73e6b821e470e - languageName: node - linkType: hard - "css-color-keywords@npm:^1.0.0": version: 1.0.0 resolution: "css-color-keywords@npm:1.0.0" @@ -28564,13 +28544,6 @@ __metadata: languageName: node linkType: hard -"raf-schd@npm:^4.0.2": - version: 4.0.3 - resolution: "raf-schd@npm:4.0.3" - checksum: 45514041c5ad31fa96aef3bb3c572a843b92da2f2cd1cb4a47c9ad58e48761d3a4126e18daa32b2bfa0bc2551a42d8f324a0e40e536cb656969929602b4e8b58 - languageName: node - linkType: hard - "raf@npm:^3.1.0, raf@npm:^3.4.1": version: 3.4.1 resolution: "raf@npm:3.4.1" @@ -29002,24 +28975,6 @@ __metadata: languageName: node linkType: hard -"react-beautiful-dnd@npm:^13.1.1": - version: 13.1.1 - resolution: "react-beautiful-dnd@npm:13.1.1" - dependencies: - "@babel/runtime": ^7.9.2 - css-box-model: ^1.2.0 - memoize-one: ^5.1.1 - raf-schd: ^4.0.2 - react-redux: ^7.2.0 - redux: ^4.0.4 - use-memo-one: ^1.1.1 - peerDependencies: - react: ^16.8.5 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0 - checksum: 5f90f7c0ab77a14dfcd496cbd94bbde457612f380c6fc815f3bba7b52effd75132948fcaa661a902a184bb1e6ae5896dcf5b0c77c4ddf809a2c65288f3eed5a7 - languageName: node - linkType: hard - "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -29320,7 +29275,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1, react-is@npm:^17.0.2": +"react-is@npm:^17.0.1": version: 17.0.2 resolution: "react-is@npm:17.0.2" checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8 @@ -29493,24 +29448,24 @@ __metadata: languageName: node linkType: hard -"react-redux@npm:^7.2.0, react-redux@npm:^7.2.4": - version: 7.2.9 - resolution: "react-redux@npm:7.2.9" +"react-redux@npm:^7.2.4": + version: 7.2.4 + resolution: "react-redux@npm:7.2.4" dependencies: - "@babel/runtime": ^7.15.4 - "@types/react-redux": ^7.1.20 + "@babel/runtime": ^7.12.1 + "@types/react-redux": ^7.1.16 hoist-non-react-statics: ^3.3.2 loose-envify: ^1.4.0 prop-types: ^15.7.2 - react-is: ^17.0.2 + react-is: ^16.13.1 peerDependencies: - react: ^16.8.3 || ^17 || ^18 + react: ^16.8.3 || ^17 peerDependenciesMeta: react-dom: optional: true react-native: optional: true - checksum: 369a2bdcf87915659af9e5c55abfd9f52a84e43e0d12dcc108ed17dbe6933558b7b7fc12caa9c10c1a10a8be7df89454b6c96989d8573fedec1a772c94a1f145 + checksum: 214fa1a4811f95090b77d96ec7114c322adf388b6d086ebebf50cdaf03549758037283f953d2b920cf6ee2f6ffad8f35e92f1ab959b3f2c957f5075d00e16d0a languageName: node linkType: hard @@ -32919,7 +32874,7 @@ __metadata: languageName: node linkType: hard -"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": +"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": version: 1.3.3 resolution: "tiny-invariant@npm:1.3.3" checksum: 5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe @@ -33557,16 +33512,6 @@ __metadata: languageName: node linkType: hard -"typescript@npm:5.2.2": - version: 5.2.2 - resolution: "typescript@npm:5.2.2" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: 7912821dac4d962d315c36800fe387cdc0a6298dba7ec171b350b4a6e988b51d7b8f051317786db1094bd7431d526b648aba7da8236607febb26cf5b871d2d3c - languageName: node - linkType: hard - "typescript@npm:^5.5.4": version: 5.5.4 resolution: "typescript@npm:5.5.4" @@ -33577,16 +33522,6 @@ __metadata: languageName: node linkType: hard -"typescript@patch:typescript@5.2.2#~builtin": - version: 5.2.2 - resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin::version=5.2.2&hash=77c9e2" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: 07106822b4305de3f22835cbba949a2b35451cad50888759b6818421290ff95d522b38ef7919e70fb381c5fe9c1c643d7dea22c8b31652a717ddbd57b7f4d554 - languageName: node - linkType: hard - "typescript@patch:typescript@^5.5.4#~builtin": version: 5.5.4 resolution: "typescript@patch:typescript@npm%3A5.5.4#~builtin::version=5.5.4&hash=77c9e2" @@ -34009,15 +33944,6 @@ __metadata: languageName: node linkType: hard -"use-memo-one@npm:^1.1.1": - version: 1.1.3 - resolution: "use-memo-one@npm:1.1.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 8f08eba26d69406b61bb4b8dacdd5a92bd6aef5b53d346dfe87954f7330ee10ecabc937cc7854635155d46053828e85c10b5a5aff7a04720e6a97b9f42999bac - languageName: node - linkType: hard - "use-sidecar@npm:^1.1.2": version: 1.1.2 resolution: "use-sidecar@npm:1.1.2" From f9b1a5dfce289461fbf528a758ca9c93baf0ef2d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:20:43 +0000 Subject: [PATCH 06/15] fix: Improve type safety and formatting in Kanban Board widget Co-Authored-By: nikhil@appsmith.com --- .../src/widgets/KanbanBoardWidget/component/index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx index 756be246a83d..e194392f47e8 100644 --- a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx @@ -174,11 +174,11 @@ const KanbanComponent: React.FC = React.memo( {columns.map((column, columnIndex) => ( - + {column.title} @@ -207,7 +207,7 @@ const KanbanComponent: React.FC = React.memo( {...provided.draggableProps} {...provided.dragHandleProps} backgroundColor={ - task.style?.backgroundColor as string + task.style?.backgroundColor ?? undefined } data-testid="t--kanban-task" style={React.useMemo( @@ -216,7 +216,8 @@ const KanbanComponent: React.FC = React.memo( transform: snapshot.isDragging ? provided.draggableProps.style?.transform : "none", - ...(task.style as React.CSSProperties), + backgroundColor: task.style?.backgroundColor, + color: task.style?.textColor, }), [ provided.draggableProps.style, From b3903e4cec6bd04bddb9ffb9b05bfee7d16476de Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:22:17 +0000 Subject: [PATCH 07/15] fix: Lock TypeScript version to 5.2.2 for compatibility Co-Authored-By: nikhil@appsmith.com --- app/client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/package.json b/app/client/package.json index 1a4652a73863..cfbf0eda4f68 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -227,7 +227,7 @@ "tinymce": "6.8.3", "toposort": "^2.0.2", "tslib": "^2.3.1", - "typescript": "^5.5.4", + "typescript": "5.2.2", "unescape-js": "^1.1.4", "url-search-params-polyfill": "^8.0.0", "usehooks-ts": "^3.1.0", From 5b9a0a576ef202ea70f11e67ffe345e00c896bc8 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:23:40 +0000 Subject: [PATCH 08/15] fix: Add react-beautiful-dnd dependencies Co-Authored-By: nikhil@appsmith.com --- app/client/package.json | 2 + app/client/yarn.lock | 106 ++++++++++++++++++++++++++++++++++------ 2 files changed, 92 insertions(+), 16 deletions(-) diff --git a/app/client/package.json b/app/client/package.json index cfbf0eda4f68..6bd539dfc341 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -95,6 +95,7 @@ "@types/babel__standalone": "^7.1.7", "@types/d3-geo": "^3.1.0", "@types/google.maps": "^3.51.0", + "@types/react-beautiful-dnd": "^13.1.8", "@types/react-page-visibility": "^6.4.1", "@types/web": "^0.0.99", "@uppy/core": "^1.16.0", @@ -175,6 +176,7 @@ "rc-tree-select": "^5.4.0", "react": "^17.0.2", "react-append-to-body": "^2.0.26", + "react-beautiful-dnd": "^13.1.1", "react-custom-scrollbars": "^4.2.1", "react-device-detect": "^2.2.2", "react-dnd": "^9.3.4", diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 6d3cf69e752f..37125043ccd5 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -2520,7 +2520,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.26.0 resolution: "@babel/runtime@npm:7.26.0" dependencies: @@ -11250,6 +11250,15 @@ __metadata: languageName: node linkType: hard +"@types/react-beautiful-dnd@npm:^13.1.8": + version: 13.1.8 + resolution: "@types/react-beautiful-dnd@npm:13.1.8" + dependencies: + "@types/react": "*" + checksum: f71c64ba7e2e1f8480e772b45268856d2bf99adf90d12dd5f31486075dfd3e33a0b0922969851c660f01aa9593aa38b38e17ee9038eb866af9ec4327be903cb9 + languageName: node + linkType: hard + "@types/react-custom-scrollbars@npm:^4.0.7": version: 4.0.7 resolution: "@types/react-custom-scrollbars@npm:4.0.7" @@ -11316,15 +11325,15 @@ __metadata: languageName: node linkType: hard -"@types/react-redux@npm:^7.0.1, @types/react-redux@npm:^7.1.16": - version: 7.1.18 - resolution: "@types/react-redux@npm:7.1.18" +"@types/react-redux@npm:^7.0.1, @types/react-redux@npm:^7.1.20": + version: 7.1.34 + resolution: "@types/react-redux@npm:7.1.34" dependencies: "@types/hoist-non-react-statics": ^3.3.0 "@types/react": "*" hoist-non-react-statics: ^3.3.0 redux: ^4.0.0 - checksum: 8aa24c15df711e2a20f903843f42491316094c3a49a90dcae86dcafa8fdb2318fdfaa983e23d67840986f11131b9b8856a5d6971288d68fa8aa592adc348a942 + checksum: ba0cc5f54b91bff162cc97cf5d82d0077944e2d744c276c3c8eb896a293aba00923b513f5cd6ad717a46bf0c128a099ad697c98672202acb25143602042c8e6c languageName: node linkType: hard @@ -13201,6 +13210,7 @@ __metadata: "@types/pluralize": ^0.0.33 "@types/prismjs": ^1.16.1 "@types/react": ^17.0.2 + "@types/react-beautiful-dnd": ^13.1.8 "@types/react-custom-scrollbars": ^4.0.7 "@types/react-dom": ^17.0.2 "@types/react-google-recaptcha": ^2.1.1 @@ -13357,6 +13367,7 @@ __metadata: rc-tree-select: ^5.4.0 react: ^17.0.2 react-append-to-body: ^2.0.26 + react-beautiful-dnd: ^13.1.1 react-custom-scrollbars: ^4.2.1 react-device-detect: ^2.2.2 react-dnd: ^9.3.4 @@ -13417,7 +13428,7 @@ __metadata: ts-jest-mock-import-meta: ^0.12.0 ts-node: ^10.9.1 tslib: ^2.3.1 - typescript: ^5.5.4 + typescript: 5.2.2 unescape-js: ^1.1.4 url-search-params-polyfill: ^8.0.0 usehooks-ts: ^3.1.0 @@ -16128,6 +16139,15 @@ __metadata: languageName: node linkType: hard +"css-box-model@npm:^1.2.0": + version: 1.2.1 + resolution: "css-box-model@npm:1.2.1" + dependencies: + tiny-invariant: ^1.0.6 + checksum: 4d113f26fed6b9150e2c314502d00dabe06f12ae43a01a7e9b6e57f3de49b4281dbb0dc46a1158a7349618f8f34d9250af57cb43d7337e9485e73e6b821e470e + languageName: node + linkType: hard + "css-color-keywords@npm:^1.0.0": version: 1.0.0 resolution: "css-color-keywords@npm:1.0.0" @@ -28544,6 +28564,13 @@ __metadata: languageName: node linkType: hard +"raf-schd@npm:^4.0.2": + version: 4.0.3 + resolution: "raf-schd@npm:4.0.3" + checksum: 45514041c5ad31fa96aef3bb3c572a843b92da2f2cd1cb4a47c9ad58e48761d3a4126e18daa32b2bfa0bc2551a42d8f324a0e40e536cb656969929602b4e8b58 + languageName: node + linkType: hard + "raf@npm:^3.1.0, raf@npm:^3.4.1": version: 3.4.1 resolution: "raf@npm:3.4.1" @@ -28975,6 +29002,24 @@ __metadata: languageName: node linkType: hard +"react-beautiful-dnd@npm:^13.1.1": + version: 13.1.1 + resolution: "react-beautiful-dnd@npm:13.1.1" + dependencies: + "@babel/runtime": ^7.9.2 + css-box-model: ^1.2.0 + memoize-one: ^5.1.1 + raf-schd: ^4.0.2 + react-redux: ^7.2.0 + redux: ^4.0.4 + use-memo-one: ^1.1.1 + peerDependencies: + react: ^16.8.5 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0 + checksum: 5f90f7c0ab77a14dfcd496cbd94bbde457612f380c6fc815f3bba7b52effd75132948fcaa661a902a184bb1e6ae5896dcf5b0c77c4ddf809a2c65288f3eed5a7 + languageName: node + linkType: hard + "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -29275,7 +29320,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1": +"react-is@npm:^17.0.1, react-is@npm:^17.0.2": version: 17.0.2 resolution: "react-is@npm:17.0.2" checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8 @@ -29448,24 +29493,24 @@ __metadata: languageName: node linkType: hard -"react-redux@npm:^7.2.4": - version: 7.2.4 - resolution: "react-redux@npm:7.2.4" +"react-redux@npm:^7.2.0, react-redux@npm:^7.2.4": + version: 7.2.9 + resolution: "react-redux@npm:7.2.9" dependencies: - "@babel/runtime": ^7.12.1 - "@types/react-redux": ^7.1.16 + "@babel/runtime": ^7.15.4 + "@types/react-redux": ^7.1.20 hoist-non-react-statics: ^3.3.2 loose-envify: ^1.4.0 prop-types: ^15.7.2 - react-is: ^16.13.1 + react-is: ^17.0.2 peerDependencies: - react: ^16.8.3 || ^17 + react: ^16.8.3 || ^17 || ^18 peerDependenciesMeta: react-dom: optional: true react-native: optional: true - checksum: 214fa1a4811f95090b77d96ec7114c322adf388b6d086ebebf50cdaf03549758037283f953d2b920cf6ee2f6ffad8f35e92f1ab959b3f2c957f5075d00e16d0a + checksum: 369a2bdcf87915659af9e5c55abfd9f52a84e43e0d12dcc108ed17dbe6933558b7b7fc12caa9c10c1a10a8be7df89454b6c96989d8573fedec1a772c94a1f145 languageName: node linkType: hard @@ -32874,7 +32919,7 @@ __metadata: languageName: node linkType: hard -"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": +"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": version: 1.3.3 resolution: "tiny-invariant@npm:1.3.3" checksum: 5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe @@ -33512,6 +33557,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:5.2.2": + version: 5.2.2 + resolution: "typescript@npm:5.2.2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 7912821dac4d962d315c36800fe387cdc0a6298dba7ec171b350b4a6e988b51d7b8f051317786db1094bd7431d526b648aba7da8236607febb26cf5b871d2d3c + languageName: node + linkType: hard + "typescript@npm:^5.5.4": version: 5.5.4 resolution: "typescript@npm:5.5.4" @@ -33522,6 +33577,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@5.2.2#~builtin": + version: 5.2.2 + resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin::version=5.2.2&hash=77c9e2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 07106822b4305de3f22835cbba949a2b35451cad50888759b6818421290ff95d522b38ef7919e70fb381c5fe9c1c643d7dea22c8b31652a717ddbd57b7f4d554 + languageName: node + linkType: hard + "typescript@patch:typescript@^5.5.4#~builtin": version: 5.5.4 resolution: "typescript@patch:typescript@npm%3A5.5.4#~builtin::version=5.5.4&hash=77c9e2" @@ -33944,6 +34009,15 @@ __metadata: languageName: node linkType: hard +"use-memo-one@npm:^1.1.1": + version: 1.1.3 + resolution: "use-memo-one@npm:1.1.3" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 8f08eba26d69406b61bb4b8dacdd5a92bd6aef5b53d346dfe87954f7330ee10ecabc937cc7854635155d46053828e85c10b5a5aff7a04720e6a97b9f42999bac + languageName: node + linkType: hard + "use-sidecar@npm:^1.1.2": version: 1.1.2 resolution: "use-sidecar@npm:1.1.2" From 1e7d8469b110159a30079464826e74e43202af5f Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:26:29 +0000 Subject: [PATCH 09/15] fix: Replace type assertion with nullish coalescing for better type safety Co-Authored-By: nikhil@appsmith.com --- app/client/src/widgets/KanbanBoardWidget/component/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx index e194392f47e8..1aa3ac0aed0b 100644 --- a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx @@ -225,7 +225,7 @@ const KanbanComponent: React.FC = React.memo( task.style, ], )} - textColor={task.style?.textColor as string} + textColor={task.style?.textColor ?? undefined} > {task.title} From 8a62c5f8c77a0cf34d90a9eaded42a3c62f25237 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:33:12 +0000 Subject: [PATCH 10/15] fix: Improve type safety in Kanban Board widget Co-Authored-By: nikhil@appsmith.com --- .../src/widgets/KanbanBoardWidget/component/index.tsx | 4 ++-- app/client/src/widgets/KanbanBoardWidget/widget/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx index 1aa3ac0aed0b..262006ae410a 100644 --- a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx @@ -213,8 +213,8 @@ const KanbanComponent: React.FC = React.memo( style={React.useMemo( () => ({ ...provided.draggableProps.style, - transform: snapshot.isDragging - ? provided.draggableProps.style?.transform + transform: snapshot.isDragging && provided.draggableProps.style + ? provided.draggableProps.style.transform ?? "none" : "none", backgroundColor: task.style?.backgroundColor, color: task.style?.textColor, diff --git a/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx index b26a2a4a55de..be8cdeee07ea 100644 --- a/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/widget/index.tsx @@ -329,10 +329,10 @@ class KanbanBoardWidget extends BaseWidget< static getDerivedPropertiesMap(): DerivedPropertiesMap { return { - sanitizedColumns: `{{ this.columns?.map((column) => ({ + sanitizedColumns: `{{ Array.isArray(this.columns) ? this.columns.map((column) => ({ ...column, - tasks: column.tasks || [] - })) || [] }}`, + tasks: Array.isArray(column.tasks) ? column.tasks : [] + })) : [] }}`, isValid: `{{ Array.isArray(this.columns) }}`, }; } From fd032a0a3d9895293741e8fbf8e8636866ab09ae Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:42:33 +0000 Subject: [PATCH 11/15] fix: Format Kanban Board component with prettier Co-Authored-By: nikhil@appsmith.com --- .../src/widgets/KanbanBoardWidget/component/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx index 262006ae410a..84b9e5bf3eaa 100644 --- a/app/client/src/widgets/KanbanBoardWidget/component/index.tsx +++ b/app/client/src/widgets/KanbanBoardWidget/component/index.tsx @@ -213,9 +213,12 @@ const KanbanComponent: React.FC = React.memo( style={React.useMemo( () => ({ ...provided.draggableProps.style, - transform: snapshot.isDragging && provided.draggableProps.style - ? provided.draggableProps.style.transform ?? "none" - : "none", + transform: + snapshot.isDragging && + provided.draggableProps.style + ? provided.draggableProps.style.transform ?? + "none" + : "none", backgroundColor: task.style?.backgroundColor, color: task.style?.textColor, }), From 486df3e9d263dbf3bcd4e8ae310074a5e775862f Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 8 Jan 2025 11:55:10 +0000 Subject: [PATCH 12/15] fix: Move TypeScript to devDependencies and update browserslist Co-Authored-By: nikhil@appsmith.com --- app/client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/package.json b/app/client/package.json index 6bd539dfc341..de405dfc8ff3 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -229,7 +229,6 @@ "tinymce": "6.8.3", "toposort": "^2.0.2", "tslib": "^2.3.1", - "typescript": "5.2.2", "unescape-js": "^1.1.4", "url-search-params-polyfill": "^8.0.0", "usehooks-ts": "^3.1.0", @@ -361,6 +360,7 @@ "ts-jest": "^29.1.0", "ts-jest-mock-import-meta": "^0.12.0", "ts-node": "^10.9.1", + "typescript": "5.2.2", "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz" }, "resolutions": { From 07404be2ff71f37cb84d01c5eca08a4be4e9153c Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 10 Jan 2025 10:08:19 +0000 Subject: [PATCH 13/15] fix: Add missing onSubmit props to integration forms Co-Authored-By: nikhil@appsmith.com --- app/client/package.json | 1 + .../PremiumDatasources/index.tsx | 1 + .../RequestNewIntegration/index.tsx | 2 +- app/client/yarn.lock | 64 +++++++++++++------ 4 files changed, 47 insertions(+), 21 deletions(-) diff --git a/app/client/package.json b/app/client/package.json index de405dfc8ff3..b1f23c959f57 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -330,6 +330,7 @@ "eslint-plugin-sort-destructure-keys": "^1.5.0", "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-testing-library": "^6.2.0", + "eslint-webpack-plugin": "^4.2.0", "factory.ts": "^0.5.1", "husky": "^8.0.0", "jest": "^29.6.1", diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx index d585771198b1..b2c8f53bf44f 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx @@ -75,6 +75,7 @@ export default function PremiumDatasources(props: { setSelectedIntegration("")} integrationName={selectedIntegration} + onSubmit={() => {}} /> diff --git a/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/index.tsx b/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/index.tsx index 8d432635c267..08a723828965 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/index.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/index.tsx @@ -35,7 +35,7 @@ function RequestModal({ children }: { children: ReactNode }) { {createMessage(REQUEST_NEW_INTEGRATIONS.REQUEST_MODAL_HEADING)} -
setOpen(false)} /> + setOpen(false)} onSubmit={() => {}} /> ); diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 37125043ccd5..6aca56bc0ebd 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -10720,13 +10720,13 @@ __metadata: languageName: node linkType: hard -"@types/eslint@npm:*": - version: 8.4.2 - resolution: "@types/eslint@npm:8.4.2" +"@types/eslint@npm:*, @types/eslint@npm:^8.56.10": + version: 8.56.12 + resolution: "@types/eslint@npm:8.56.12" dependencies: "@types/estree": "*" "@types/json-schema": "*" - checksum: e81268cdeb8d64d84af649344df88f064ece0f05db62072657c976b6162ffe16f94b6480a5367d627c629272c2d86d0ee8c24f7095e98f8e743b16f98500673b + checksum: 0f7710ee02a256c499514251f527f84de964bb29487db840408e4cde79283124a38935597636d2265756c34dd1d902e1b00ae78930d4a0b55111909cb7b80d84 languageName: node linkType: hard @@ -12910,7 +12910,7 @@ __metadata: languageName: node linkType: hard -"ajv-keywords@npm:^5.0.0": +"ajv-keywords@npm:^5.1.0": version: 5.1.0 resolution: "ajv-keywords@npm:5.1.0" dependencies: @@ -12933,15 +12933,15 @@ __metadata: languageName: node linkType: hard -"ajv@npm:^8.0.0, ajv@npm:^8.6.0, ajv@npm:^8.8.0": - version: 8.11.0 - resolution: "ajv@npm:8.11.0" +"ajv@npm:^8.0.0, ajv@npm:^8.6.0, ajv@npm:^8.9.0": + version: 8.17.1 + resolution: "ajv@npm:8.17.1" dependencies: - fast-deep-equal: ^3.1.1 + fast-deep-equal: ^3.1.3 + fast-uri: ^3.0.1 json-schema-traverse: ^1.0.0 require-from-string: ^2.0.2 - uri-js: ^4.2.2 - checksum: 5e0ff226806763be73e93dd7805b634f6f5921e3e90ca04acdf8db81eed9d8d3f0d4c5f1213047f45ebbf8047ffe0c840fa1ef2ec42c3a644899f69aa72b5bef + checksum: 1797bf242cfffbaf3b870d13565bd1716b73f214bb7ada9a497063aada210200da36e3ed40237285f3255acc4feeae91b1fb183625331bad27da95973f7253d9 languageName: node linkType: hard @@ -13302,6 +13302,7 @@ __metadata: eslint-plugin-sort-destructure-keys: ^1.5.0 eslint-plugin-storybook: ^0.6.15 eslint-plugin-testing-library: ^6.2.0 + eslint-webpack-plugin: ^4.2.0 factory.ts: ^0.5.1 fast-deep-equal: ^3.1.3 fast-sort: ^3.4.0 @@ -14960,9 +14961,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001426": - version: 1.0.30001462 - resolution: "caniuse-lite@npm:1.0.30001462" - checksum: e4a57d7851eec65e7c9b6c11c4bbcecdc49d87b1b01bff3c15ea27efb05f959891b4c70ac169842067c134d6fa126d9ad5a91d0f85c7387c5bd912eaf41ea647 + version: 1.0.30001690 + resolution: "caniuse-lite@npm:1.0.30001690" + checksum: f2c1b595f15d8de4d9ccd155d61ac9f00ac62f1515870505a0186266fd52aef169fcddc90d8a4814e52b77107244806466fadc2c216662f23f1022a430e735ee languageName: node linkType: hard @@ -18619,6 +18620,22 @@ __metadata: languageName: node linkType: hard +"eslint-webpack-plugin@npm:^4.2.0": + version: 4.2.0 + resolution: "eslint-webpack-plugin@npm:4.2.0" + dependencies: + "@types/eslint": ^8.56.10 + jest-worker: ^29.7.0 + micromatch: ^4.0.5 + normalize-path: ^3.0.0 + schema-utils: ^4.2.0 + peerDependencies: + eslint: ^8.0.0 || ^9.0.0 + webpack: ^5.0.0 + checksum: 51538d60d0d0f3dd5774a4291af4620884a45a40270e2878c2f7c8dbff3584ef8588ffded8de696a4bbcee45bee219eba442eb503f5eddcc79aefeb4845985ae + languageName: node + linkType: hard + "eslint@npm:^8.3.0, eslint@npm:^8.51.0": version: 8.51.0 resolution: "eslint@npm:8.51.0" @@ -19108,6 +19125,13 @@ __metadata: languageName: node linkType: hard +"fast-uri@npm:^3.0.1": + version: 3.0.5 + resolution: "fast-uri@npm:3.0.5" + checksum: b56cda8e7355bad9adcc3c2eacd94cb592eaa9536497a4779a9527784f4f95a3755f30525c63583bd85807c493b396ac89926c970f19a60905ed875121ca78fd + languageName: node + linkType: hard + "fast-xml-parser@npm:4.4.1": version: 4.4.1 resolution: "fast-xml-parser@npm:4.4.1" @@ -31124,15 +31148,15 @@ __metadata: languageName: node linkType: hard -"schema-utils@npm:^4.0.0": - version: 4.0.0 - resolution: "schema-utils@npm:4.0.0" +"schema-utils@npm:^4.0.0, schema-utils@npm:^4.2.0": + version: 4.3.0 + resolution: "schema-utils@npm:4.3.0" dependencies: "@types/json-schema": ^7.0.9 - ajv: ^8.8.0 + ajv: ^8.9.0 ajv-formats: ^2.1.1 - ajv-keywords: ^5.0.0 - checksum: c843e92fdd1a5c145dbb6ffdae33e501867f9703afac67bdf35a685e49f85b1dcc10ea250033175a64bd9d31f0555bc6785b8359da0c90bcea30cf6dfbb55a8f + ajv-keywords: ^5.1.0 + checksum: 3dbd9056727c871818eaf3cabeeb5c9e173ae2b17bbf2a9c7a2e49c220fa1a580e44df651c876aea3b4926cecf080730a39e28202cb63f2b68d99872b49cd37a languageName: node linkType: hard From f138e370fa3d8c71e056a12c9e727e49e9ddaa3d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 10 Jan 2025 10:13:50 +0000 Subject: [PATCH 14/15] fix: Add proper typing for onSubmit props in integration forms Co-Authored-By: nikhil@appsmith.com --- .../Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx | 2 ++ .../Editor/IntegrationEditor/RequestNewIntegration/form.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx index 4989bb154107..63d1d386fdf9 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx @@ -130,12 +130,14 @@ type PremiumDatasourceContactFormProps = PremiumDatasourceContactFormValues & { formSyncErrors?: FormErrors; closeModal: () => void; integrationName: string; + onSubmit?: () => void; } & InjectedFormProps< PremiumDatasourceContactFormValues, { formSyncErrors?: FormErrors; closeModal: () => void; integrationName: string; + onSubmit?: () => void; } >; diff --git a/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx b/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx index 13e144775cd3..6205e0ee9fa2 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx @@ -102,11 +102,13 @@ interface RequestIntegrationFormValues { type RequestIntegrationFormProps = RequestIntegrationFormValues & { formSyncErrors?: FormErrors; closeModal: () => void; + onSubmit?: () => void; } & InjectedFormProps< RequestIntegrationFormValues, { formSyncErrors?: FormErrors; closeModal: () => void; + onSubmit?: () => void; } >; From e46ccc5ba419c64a9e608158e1ad3e48b5c14744 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 10 Jan 2025 10:19:19 +0000 Subject: [PATCH 15/15] fix: Update TypeScript types to fix build errors Co-Authored-By: nikhil@appsmith.com --- .../IntegrationEditor/PremiumDatasources/ContactForm.tsx | 1 + .../IntegrationEditor/RequestNewIntegration/form.tsx | 1 + app/client/src/pages/setup/UserWelcomeScreen.tsx | 2 +- .../src/plugins/Linting/utils/groupDifferencesByType.ts | 8 ++++---- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx index 63d1d386fdf9..b30f68131049 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx @@ -168,6 +168,7 @@ export default connect((state: AppState) => { formSyncErrors?: FormErrors; closeModal: () => void; integrationName: string; + onSubmit?: () => void; } >({ validate, diff --git a/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx b/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx index 6205e0ee9fa2..2f39d1532c99 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/RequestNewIntegration/form.tsx @@ -148,6 +148,7 @@ export default connect((state: AppState) => { { formSyncErrors?: FormErrors; closeModal: () => void; + onSubmit?: () => void; } >({ validate, diff --git a/app/client/src/pages/setup/UserWelcomeScreen.tsx b/app/client/src/pages/setup/UserWelcomeScreen.tsx index 9d9d283b6ad7..ab9f4c6b8b21 100644 --- a/app/client/src/pages/setup/UserWelcomeScreen.tsx +++ b/app/client/src/pages/setup/UserWelcomeScreen.tsx @@ -64,7 +64,7 @@ const ActionContainer = styled.div` interface LandingPageProps { // To have a get started button click function for non super user form - onGetStarted?: (proficiency?: string, useCase?: string) => void; + onGetStarted?: ((proficiency?: string | undefined, useCase?: string | undefined) => void) | undefined; // Property to determine whether the user is super admin or not isSuperUser: boolean; } diff --git a/app/client/src/plugins/Linting/utils/groupDifferencesByType.ts b/app/client/src/plugins/Linting/utils/groupDifferencesByType.ts index 44881ddbbd96..0fe0a7a8e8fe 100644 --- a/app/client/src/plugins/Linting/utils/groupDifferencesByType.ts +++ b/app/client/src/plugins/Linting/utils/groupDifferencesByType.ts @@ -7,10 +7,10 @@ import type { } from "deep-diff"; import { isEmpty, partition } from "lodash"; -export function groupDifferencesByType(differences: Diff[]): { - edits: DiffEdit[]; - additions: DiffNew[]; - deletions: DiffDeleted[]; +export function groupDifferencesByType(differences: Array>): { + edits: Array>; + additions: Array>; + deletions: Array>; } { if (isEmpty(differences)) return { edits: [], additions: [], deletions: [] };