PromucFlow_constructor/app/client/src/selectors/navigationSelectors.ts

101 lines
3.3 KiB
TypeScript
Raw Normal View History

import {
DataTree,
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
DataTreeAppsmith,
ENTITY_TYPE,
} from "entities/DataTree/dataTreeFactory";
import { createSelector } from "reselect";
import {
getActionsForCurrentPage,
getJSCollectionsForCurrentPage,
getPlugins,
} from "selectors/entitiesSelector";
import { getWidgets } from "sagas/selectors";
import { getCurrentPageId } from "selectors/editorSelectors";
import { getActionConfig } from "pages/Editor/Explorer/Actions/helpers";
feat: URL Navigation for Widgets (#20202) ## Description Widget selection is driven by URL changes. This would fix browser navigation for users as they can use browser back/forward buttons to travel across older contexts on Appsmith. > Fixing browser URL navigation for widgets Fixes #19571 Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video ## Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual - Jest - Cypress ### Test Plan > Add Testsmith [test cases](https://github.com/appsmithorg/TestSmith/issues/2171) links that relate to this PR ### Issues raised during DP testing - [X] When a selected widget is below viewport and user refreshes the page, then the widget property pane is open but the page does not navigate to the selected widget https://loom.com/share/09f1eda2f02d474981a0d48e4a6419ec - [ ] Drop 2 widgets one at a time > Delete both the widgets > Now click on back button of the browser > Observe the url it shows the widget id in the URL but the canvas remains empty https://loom.com/share/53cae28a5d224e67b783c8ccf53745f5 Dev Response: This issue is valid but not a major inconvenience. We will try to track it and see if it needed to be addressed. Many other web tools do not handle such cases - [X] Canvas scrolls down when all widgets are selected. https://loom.com/share/c8a68dadcdb040779abd3a73bde2b06c - [X] Widget is not getting highlighted when added from the API editor page. Please refer to the attached video:-https://jiju8jbmwa.vmaker.com/record/IkwiAqFgafK9dVmu ## Checklist: ### Dev activity - [ ] 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 - [ ] 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 - [x] 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: Aishwarya UR <aishwarya@appsmith.com>
2023-02-21 13:38:16 +00:00
import { jsCollectionIdURL, widgetURL } from "RouteBuilder";
import { getDataTree } from "selectors/dataTreeSelectors";
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
import { getActionChildrenNavData } from "utils/NavigationSelector/ActionChildren";
import { createNavData } from "utils/NavigationSelector/common";
import { getWidgetChildrenNavData } from "utils/NavigationSelector/WidgetChildren";
import { getJsChildrenNavData } from "utils/NavigationSelector/JsChildren";
import { getAppsmithNavData } from "utils/NavigationSelector/AppsmithNavData";
export type NavigationData = {
name: string;
id: string;
type: ENTITY_TYPE;
url: string | undefined;
navigable: boolean;
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
children: EntityNavigationData;
peekable: boolean;
peekData?: unknown;
key?: string;
};
export type EntityNavigationData = Record<string, NavigationData>;
export const getEntitiesForNavigation = createSelector(
getActionsForCurrentPage,
getPlugins,
getJSCollectionsForCurrentPage,
getWidgets,
getCurrentPageId,
getDataTree,
(actions, plugins, jsActions, widgets, pageId, dataTree: DataTree) => {
const navigationData: EntityNavigationData = {};
if (!dataTree) return navigationData;
actions.forEach((action) => {
const plugin = plugins.find(
(plugin) => plugin.id === action.config.pluginId,
);
const config = getActionConfig(action.config.pluginType);
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
const result = getActionChildrenNavData(action, dataTree);
2022-12-15 04:06:13 +00:00
if (!config) return;
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
navigationData[action.config.name] = createNavData({
id: action.config.id,
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
name: action.config.name,
type: ENTITY_TYPE.ACTION,
2022-12-15 04:06:13 +00:00
url: config.getURL(
pageId,
action.config.id,
action.config.pluginType,
plugin,
),
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
peekable: true,
peekData: result?.peekData,
children: result?.childNavData || {},
});
});
jsActions.forEach((jsAction) => {
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
const result = getJsChildrenNavData(jsAction, pageId, dataTree);
navigationData[jsAction.config.name] = createNavData({
id: jsAction.config.id,
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
name: jsAction.config.name,
type: ENTITY_TYPE.JSACTION,
url: jsCollectionIdURL({ pageId, collectionId: jsAction.config.id }),
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
peekable: true,
peekData: result?.peekData,
children: result?.childNavData || {},
});
});
Object.values(widgets).forEach((widget) => {
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
const result = getWidgetChildrenNavData(widget, dataTree, pageId);
navigationData[widget.widgetName] = createNavData({
id: widget.widgetId,
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
name: widget.widgetName,
type: ENTITY_TYPE.WIDGET,
feat: URL Navigation for Widgets (#20202) ## Description Widget selection is driven by URL changes. This would fix browser navigation for users as they can use browser back/forward buttons to travel across older contexts on Appsmith. > Fixing browser URL navigation for widgets Fixes #19571 Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video ## Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual - Jest - Cypress ### Test Plan > Add Testsmith [test cases](https://github.com/appsmithorg/TestSmith/issues/2171) links that relate to this PR ### Issues raised during DP testing - [X] When a selected widget is below viewport and user refreshes the page, then the widget property pane is open but the page does not navigate to the selected widget https://loom.com/share/09f1eda2f02d474981a0d48e4a6419ec - [ ] Drop 2 widgets one at a time > Delete both the widgets > Now click on back button of the browser > Observe the url it shows the widget id in the URL but the canvas remains empty https://loom.com/share/53cae28a5d224e67b783c8ccf53745f5 Dev Response: This issue is valid but not a major inconvenience. We will try to track it and see if it needed to be addressed. Many other web tools do not handle such cases - [X] Canvas scrolls down when all widgets are selected. https://loom.com/share/c8a68dadcdb040779abd3a73bde2b06c - [X] Widget is not getting highlighted when added from the API editor page. Please refer to the attached video:-https://jiju8jbmwa.vmaker.com/record/IkwiAqFgafK9dVmu ## Checklist: ### Dev activity - [ ] 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 - [ ] 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 - [x] 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: Aishwarya UR <aishwarya@appsmith.com>
2023-02-21 13:38:16 +00:00
url: widgetURL({ pageId, selectedWidgets: [widget.widgetId] }),
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
peekable: true,
peekData: result?.peekData,
children: result?.childNavData || {},
});
});
feat: peek overlay (#20053) ## Description Hover over appsmith properties in code to peek data. <img width="380" alt="image" src="https://user-images.githubusercontent.com/66776129/217707810-164924c0-36e8-4450-b087-18af333c7547.png"> This right now covers: - Queries/JsObjects/Apis/Widgets and their properties. - Note: For query or Api, this'll work only upto `Api.data`. (Not `Api.data.users[0].id`) - This is because of the way codemirror renders code and we'll need more time to see how this is best handled. Misc: - added `react-append-to-body` to work with variable height for peek overlay - we needed a container that doesn't apply `position: absolute` to itself - Because, when a container's `height` is zero with `position: absolute` (like in bp3-portal), child elements cannot be positioned using just the `bottom` property - with `react-append-to-body`, the container won't have `position: absolute`, instead it is applied to the child element `<div>` directly, hence we can position using `bottom` property. Fixes #17507 Media https://www.loom.com/share/0f17918fcd604805b023c215d57fce43 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan https://github.com/appsmithorg/TestSmith/issues/2173 https://github.com/appsmithorg/TestSmith/issues/2178 ### Issues raised during DP testing https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1420545330 https://github.com/appsmithorg/appsmith/pull/20053#issuecomment-1424427913 ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [x] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [x] 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
2023-02-17 16:03:34 +00:00
navigationData["appsmith"] = getAppsmithNavData(
dataTree.appsmith as DataTreeAppsmith,
);
return navigationData;
},
);