PromucFlow_constructor/app/client/src/actions/widgetActions.tsx

133 lines
2.8 KiB
TypeScript
Raw Normal View History

chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> ## Description This PR upgrades Prettier to v2 + enforces TypeScript’s [`import type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) syntax where applicable. It’s submitted as a separate PR so we can merge it easily. As a part of this PR, we reformat the codebase heavily: - add `import type` everywhere where it’s required, and - re-format the code to account for Prettier 2’s breaking changes: https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes This PR is submitted against `release` to make sure all new code by team members will adhere to new formatting standards, and we’ll have fewer conflicts when merging `bundle-optimizations` into `release`. (I’ll merge `release` back into `bundle-optimizations` once this PR is merged.) ### Why is this needed? This PR is needed because, for the Lodash optimization from https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3, we need to use `import type`. Otherwise, `babel-plugin-lodash` complains that `LoDashStatic` is not a lodash function. However, just using `import type` in the current codebase will give you this: <img width="962" alt="Screenshot 2023-03-08 at 17 45 59" src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png"> That’s because Prettier 1 can’t parse `import type` at all. To parse it, we need to upgrade to Prettier 2. ### Why enforce `import type`? Apart from just enabling `import type` support, this PR enforces specifying `import type` everywhere it’s needed. (Developers will get immediate TypeScript and ESLint errors when they forget to do so.) I’m doing this because I believe `import type` improves DX and makes refactorings easier. Let’s say you had a few imports like below. Can you tell which of these imports will increase the bundle size? (Tip: it’s not all of them!) ```ts // app/client/src/workers/Linting/utils.ts import { Position } from "codemirror"; import { LintError as JSHintError, LintOptions } from "jshint"; import { get, isEmpty, isNumber, keys, last, set } from "lodash"; ``` It’s pretty hard, right? What about now? ```ts // app/client/src/workers/Linting/utils.ts import type { Position } from "codemirror"; import type { LintError as JSHintError, LintOptions } from "jshint"; import { get, isEmpty, isNumber, keys, last, set } from "lodash"; ``` Now, it’s clear that only `lodash` will be bundled. This helps developers to see which imports are problematic, but it _also_ helps with refactorings. Now, if you want to see where `codemirror` is bundled, you can just grep for `import \{.*\} from "codemirror"` – and you won’t get any type-only imports. This also helps (some) bundlers. Upon transpiling, TypeScript erases type-only imports completely. In some environment (not ours), this makes the bundle smaller, as the bundler doesn’t need to bundle type-only imports anymore. ## Type of change - Chore (housekeeping or task changes that don't impact user perception) ## How Has This Been Tested? This was tested to not break the build. ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --------- Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
import type { ReduxAction } from "@appsmith/constants/ReduxActionConstants";
2020-01-30 13:23:04 +00:00
import {
ReduxActionTypes,
WidgetReduxActionTypes,
} from "@appsmith/constants/ReduxActionConstants";
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> ## Description This PR upgrades Prettier to v2 + enforces TypeScript’s [`import type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) syntax where applicable. It’s submitted as a separate PR so we can merge it easily. As a part of this PR, we reformat the codebase heavily: - add `import type` everywhere where it’s required, and - re-format the code to account for Prettier 2’s breaking changes: https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes This PR is submitted against `release` to make sure all new code by team members will adhere to new formatting standards, and we’ll have fewer conflicts when merging `bundle-optimizations` into `release`. (I’ll merge `release` back into `bundle-optimizations` once this PR is merged.) ### Why is this needed? This PR is needed because, for the Lodash optimization from https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3, we need to use `import type`. Otherwise, `babel-plugin-lodash` complains that `LoDashStatic` is not a lodash function. However, just using `import type` in the current codebase will give you this: <img width="962" alt="Screenshot 2023-03-08 at 17 45 59" src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png"> That’s because Prettier 1 can’t parse `import type` at all. To parse it, we need to upgrade to Prettier 2. ### Why enforce `import type`? Apart from just enabling `import type` support, this PR enforces specifying `import type` everywhere it’s needed. (Developers will get immediate TypeScript and ESLint errors when they forget to do so.) I’m doing this because I believe `import type` improves DX and makes refactorings easier. Let’s say you had a few imports like below. Can you tell which of these imports will increase the bundle size? (Tip: it’s not all of them!) ```ts // app/client/src/workers/Linting/utils.ts import { Position } from "codemirror"; import { LintError as JSHintError, LintOptions } from "jshint"; import { get, isEmpty, isNumber, keys, last, set } from "lodash"; ``` It’s pretty hard, right? What about now? ```ts // app/client/src/workers/Linting/utils.ts import type { Position } from "codemirror"; import type { LintError as JSHintError, LintOptions } from "jshint"; import { get, isEmpty, isNumber, keys, last, set } from "lodash"; ``` Now, it’s clear that only `lodash` will be bundled. This helps developers to see which imports are problematic, but it _also_ helps with refactorings. Now, if you want to see where `codemirror` is bundled, you can just grep for `import \{.*\} from "codemirror"` – and you won’t get any type-only imports. This also helps (some) bundlers. Upon transpiling, TypeScript erases type-only imports completely. In some environment (not ours), this makes the bundle smaller, as the bundler doesn’t need to bundle type-only imports anymore. ## Type of change - Chore (housekeeping or task changes that don't impact user perception) ## How Has This Been Tested? This was tested to not break the build. ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --------- Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
import type { ExecuteTriggerPayload } from "constants/AppsmithActionConstants/ActionConstants";
import type { BatchAction } from "actions/batchActions";
import { batchAction } from "actions/batchActions";
import type { WidgetProps } from "widgets/BaseWidget";
export const executeTrigger = (
payload: ExecuteTriggerPayload,
): BatchAction<ExecuteTriggerPayload> =>
2020-04-17 16:15:09 +00:00
batchAction({
type: ReduxActionTypes.EXECUTE_TRIGGER_REQUEST,
2020-02-18 10:41:52 +00:00
payload,
2020-04-17 16:15:09 +00:00
});
2019-11-20 08:10:01 +00:00
export const disableDragAction = (
2020-05-07 10:51:37 +00:00
isDraggingDisabled: boolean,
): ReduxAction<{ isDraggingDisabled: boolean }> => {
return {
type: ReduxActionTypes.DISABLE_WIDGET_DRAG,
payload: {
2020-05-07 10:51:37 +00:00
isDraggingDisabled,
},
};
};
2020-04-03 09:32:13 +00:00
export const createModalAction = (
modalName: string,
): ReduxAction<{ modalName: string }> => {
return {
type: ReduxActionTypes.CREATE_MODAL_INIT,
2020-04-03 09:32:13 +00:00
payload: {
modalName,
},
};
};
2020-04-13 08:24:13 +00:00
export const focusWidget = (
widgetId?: string,
2020-04-13 14:00:50 +00:00
): ReduxAction<{ widgetId?: string }> => ({
type: ReduxActionTypes.FOCUS_WIDGET,
payload: { widgetId },
});
export const showModal = (id: string, shouldSelectModal = true) => {
return {
type: ReduxActionTypes.SHOW_MODAL,
payload: {
modalId: id,
shouldSelectModal,
},
};
};
export const closePropertyPane = () => {
return {
type: ReduxActionTypes.HIDE_PROPERTY_PANE,
payload: {
force: false,
},
};
};
export const closeTableFilterPane = () => {
return {
type: ReduxActionTypes.HIDE_TABLE_FILTER_PANE,
payload: {
force: false,
},
};
};
export const copyWidget = (isShortcut: boolean) => {
return {
type: ReduxActionTypes.COPY_SELECTED_WIDGET_INIT,
payload: {
isShortcut: !!isShortcut,
},
};
};
export const pasteWidget = (
groupWidgets = false,
mouseLocation: { x: number; y: number },
) => {
return {
type: ReduxActionTypes.PASTE_COPIED_WIDGET_INIT,
Grouping widgets into container (#5704) * Cut copy paste first cut * removed different parent groups logic * mouseup on the outer canvas removes selections. * bug fix * remove unwanted dead code. * Adding tests * build fix * min height fixes * fixing specs. * fixing specs. * fix merge conflcits * fix border positioning * fix canvas widgets incorrect bouding box * fix bounding box position issue * fix bounding box position issue * fix * border issue fix * update test case * add colors in theme * use layers + use click capture on actions * add icon for grouping * fix overflow issue in contextmenu in containers * fix context menu display issue * update position of context menu * fix container box-shadow issue * fix container box-shadow issue * revert container box shadow * stop opening of property pane on shift clicking a widget * remove console.log * fix multiselect box issue * add container on copy * add analytics middleware * refactor paste widget saga * change flash element to accept array + revert refactor * add logic to create containers from selected widgets * update positions of grouped widgets * fix comments + remove console * update flashElementbyId to flashElementsById * remove analytics middleware + remove unecessary imports * add shorcut for grouping * fix position issue when pasting * allow grouping only when multi widgets are selected * fix ux issues with widget grouping * fix help text for grouping actions * filter out the modal widget when calculting next row * fix delete issue when grouping * persist positin when grouping if there is no collision * fix typo for new position * changes for review comments * changes for review comments * fix position issue when pasting * fix new container position issue * move utils function to utils * fix import issue * fix the composite widget grouping issue * fix table name bug * remove repeated code * move copied groups existence check; * fix copied group check Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain> Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
2021-08-25 05:00:31 +00:00
payload: {
groupWidgets: groupWidgets,
mouseLocation,
Grouping widgets into container (#5704) * Cut copy paste first cut * removed different parent groups logic * mouseup on the outer canvas removes selections. * bug fix * remove unwanted dead code. * Adding tests * build fix * min height fixes * fixing specs. * fixing specs. * fix merge conflcits * fix border positioning * fix canvas widgets incorrect bouding box * fix bounding box position issue * fix bounding box position issue * fix * border issue fix * update test case * add colors in theme * use layers + use click capture on actions * add icon for grouping * fix overflow issue in contextmenu in containers * fix context menu display issue * update position of context menu * fix container box-shadow issue * fix container box-shadow issue * revert container box shadow * stop opening of property pane on shift clicking a widget * remove console.log * fix multiselect box issue * add container on copy * add analytics middleware * refactor paste widget saga * change flash element to accept array + revert refactor * add logic to create containers from selected widgets * update positions of grouped widgets * fix comments + remove console * update flashElementbyId to flashElementsById * remove analytics middleware + remove unecessary imports * add shorcut for grouping * fix position issue when pasting * allow grouping only when multi widgets are selected * fix ux issues with widget grouping * fix help text for grouping actions * filter out the modal widget when calculting next row * fix delete issue when grouping * persist positin when grouping if there is no collision * fix typo for new position * changes for review comments * changes for review comments * fix position issue when pasting * fix new container position issue * move utils function to utils * fix import issue * fix the composite widget grouping issue * fix table name bug * remove repeated code * move copied groups existence check; * fix copied group check Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain> Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
2021-08-25 05:00:31 +00:00
},
};
};
export const deleteSelectedWidget = (
isShortcut: boolean,
disallowUndo = false,
) => {
return {
type: WidgetReduxActionTypes.WIDGET_DELETE,
payload: {
isShortcut,
disallowUndo,
},
};
};
export const cutWidget = () => {
return {
type: ReduxActionTypes.CUT_SELECTED_WIDGET,
};
};
2020-10-15 07:21:00 +00:00
[Feature] new nav sniping mode (#5746) * added sniping mode toggle option to header * added cover to components on hover in sniping mode * fixed the transition time * using filled icon * Show dependencies in action pane * Added a wrapper to make a widget snipeable * removed older parts of sniping from Positioned Container * removed onclick action from snipeable wrapper * Showing widget name in different color * Added a mechanism to send user to sniping mode from successful API screen * created new property pane saga to bind the data * Fix datasource list width issue * Fix sidebar going out of view when the response is a table * Minor refactor * Show add widgets section on the sidebar * Stop showing autocomplete option after adding a widget * fetching pageId, appId from store * Get suggested widget from response * Fix table data not getting evaluated after adding binding * Fix property pane going below the entity explorer while navigating from query/api pane * Fix width of sidepane shifting for apis * Fix vertical margins of connections * Fix api pane suggested widget showing up for errors * Fix margins * can show select in canvas btn in sidebar * can get the action object at the end to bind the data * updated saga and action names * can bind data to table * Use themes * Use new image url for Table widget * Added conditional mapping for sniping mode binding. * updated the widget name tags and seq of calls to open property pane * pushed all sniping mode decoration to header * moved setting sniping mode logic to editor reducer * Added keyboard short cut to get out of sniping mode * updated reset sniping mechanism * removed a divider line * if there are no relationships, will not show the complete section * Connect Data will automatically show relevant tab in integrations * Update list and dropdown image urls * Remove create table button * no wrapping bind to text * minor review considerations * showing the widget name to left in sniping mode * can set data to datepicker * will not show snipe btn if there are no widgets in canvas * Changes for multiple suggested widgets * removed dependency of sniping from suggested widgets * Added analytics events for sniping mode * logic for binding data to a widget, moved to snipeable component * changed binding widget func from capture to onClick and took care of sniping from widget wrapper too. * added tests to check sniping mode for table * updated test spec * minor fix * Fix copy changes * Update test to use table widget from suggested widget list * if fails to bind will generate warning and keep user in sniping mode * in sniping mode will only show name plate if it is under focus * fixed the test case * added a comment * minor fix to capture on click event in sniping mode * updated text * Hide connections UI when there are no connections * Increase width to 90% * Show placeholder text and back button in sidepane * Show tooltip on hover * Add analyitcs events for suggested widgets and connections * Update label based on whether widgets are there or not * binding related changes * renamed the saga file containing sinping mode sagas * Changes for inspect entity * Revert "binding related changes" temporarily This reverts commit 54ae9667fecf24bc3cf9912a5356d06600b25c84. * Update suggested widgets url * Update table url * Fix chart data field not getting evaluated * a minor fix to show proper tool tip when user hovers on widget name * Show sidepane when there is output * Update locators * Use constants for messages * Update file name to ApiRightPane * Remove delay * Revert "Revert "binding related changes" temporarily" This reverts commit ee7f75e83218137250b4b9a28fcf63080c185150. * Fix width * Fix overlap Co-authored-by: Akash N <akash@codemonk.in>
2021-07-26 16:44:10 +00:00
export const addSuggestedWidget = (payload: Partial<WidgetProps>) => {
2020-10-15 07:21:00 +00:00
return {
[Feature] new nav sniping mode (#5746) * added sniping mode toggle option to header * added cover to components on hover in sniping mode * fixed the transition time * using filled icon * Show dependencies in action pane * Added a wrapper to make a widget snipeable * removed older parts of sniping from Positioned Container * removed onclick action from snipeable wrapper * Showing widget name in different color * Added a mechanism to send user to sniping mode from successful API screen * created new property pane saga to bind the data * Fix datasource list width issue * Fix sidebar going out of view when the response is a table * Minor refactor * Show add widgets section on the sidebar * Stop showing autocomplete option after adding a widget * fetching pageId, appId from store * Get suggested widget from response * Fix table data not getting evaluated after adding binding * Fix property pane going below the entity explorer while navigating from query/api pane * Fix width of sidepane shifting for apis * Fix vertical margins of connections * Fix api pane suggested widget showing up for errors * Fix margins * can show select in canvas btn in sidebar * can get the action object at the end to bind the data * updated saga and action names * can bind data to table * Use themes * Use new image url for Table widget * Added conditional mapping for sniping mode binding. * updated the widget name tags and seq of calls to open property pane * pushed all sniping mode decoration to header * moved setting sniping mode logic to editor reducer * Added keyboard short cut to get out of sniping mode * updated reset sniping mechanism * removed a divider line * if there are no relationships, will not show the complete section * Connect Data will automatically show relevant tab in integrations * Update list and dropdown image urls * Remove create table button * no wrapping bind to text * minor review considerations * showing the widget name to left in sniping mode * can set data to datepicker * will not show snipe btn if there are no widgets in canvas * Changes for multiple suggested widgets * removed dependency of sniping from suggested widgets * Added analytics events for sniping mode * logic for binding data to a widget, moved to snipeable component * changed binding widget func from capture to onClick and took care of sniping from widget wrapper too. * added tests to check sniping mode for table * updated test spec * minor fix * Fix copy changes * Update test to use table widget from suggested widget list * if fails to bind will generate warning and keep user in sniping mode * in sniping mode will only show name plate if it is under focus * fixed the test case * added a comment * minor fix to capture on click event in sniping mode * updated text * Hide connections UI when there are no connections * Increase width to 90% * Show placeholder text and back button in sidepane * Show tooltip on hover * Add analyitcs events for suggested widgets and connections * Update label based on whether widgets are there or not * binding related changes * renamed the saga file containing sinping mode sagas * Changes for inspect entity * Revert "binding related changes" temporarily This reverts commit 54ae9667fecf24bc3cf9912a5356d06600b25c84. * Update suggested widgets url * Update table url * Fix chart data field not getting evaluated * a minor fix to show proper tool tip when user hovers on widget name * Show sidepane when there is output * Update locators * Use constants for messages * Update file name to ApiRightPane * Remove delay * Revert "Revert "binding related changes" temporarily" This reverts commit ee7f75e83218137250b4b9a28fcf63080c185150. * Fix width * Fix overlap Co-authored-by: Akash N <akash@codemonk.in>
2021-07-26 16:44:10 +00:00
type: ReduxActionTypes.ADD_SUGGESTED_WIDGET,
payload,
2020-10-15 07:21:00 +00:00
};
};
Grouping widgets into container (#5704) * Cut copy paste first cut * removed different parent groups logic * mouseup on the outer canvas removes selections. * bug fix * remove unwanted dead code. * Adding tests * build fix * min height fixes * fixing specs. * fixing specs. * fix merge conflcits * fix border positioning * fix canvas widgets incorrect bouding box * fix bounding box position issue * fix bounding box position issue * fix * border issue fix * update test case * add colors in theme * use layers + use click capture on actions * add icon for grouping * fix overflow issue in contextmenu in containers * fix context menu display issue * update position of context menu * fix container box-shadow issue * fix container box-shadow issue * revert container box shadow * stop opening of property pane on shift clicking a widget * remove console.log * fix multiselect box issue * add container on copy * add analytics middleware * refactor paste widget saga * change flash element to accept array + revert refactor * add logic to create containers from selected widgets * update positions of grouped widgets * fix comments + remove console * update flashElementbyId to flashElementsById * remove analytics middleware + remove unecessary imports * add shorcut for grouping * fix position issue when pasting * allow grouping only when multi widgets are selected * fix ux issues with widget grouping * fix help text for grouping actions * filter out the modal widget when calculting next row * fix delete issue when grouping * persist positin when grouping if there is no collision * fix typo for new position * changes for review comments * changes for review comments * fix position issue when pasting * fix new container position issue * move utils function to utils * fix import issue * fix the composite widget grouping issue * fix table name bug * remove repeated code * move copied groups existence check; * fix copied group check Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain> Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
2021-08-25 05:00:31 +00:00
/**
* action to group selected widgets into container
* @returns
*/
export const groupWidgets = () => {
return {
type: ReduxActionTypes.GROUP_WIDGETS_INIT,
};
};