PromucFlow_constructor/app/client/src/utils/NavigationSelector/JsChildren.ts

92 lines
2.8 KiB
TypeScript
Raw Normal View History

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 {
DataTree,
DataTreeJSAction,
ENTITY_TYPE,
} from "entities/DataTree/dataTreeFactory";
import { keyBy } from "lodash";
import { JSCollectionData } from "reducers/entityReducers/jsActionsReducer";
import { jsCollectionIdURL } from "RouteBuilder";
import {
EntityNavigationData,
NavigationData,
} from "selectors/navigationSelectors";
import { createNavData } from "./common";
export const getJsChildrenNavData = (
jsAction: JSCollectionData,
pageId: string,
dataTree: DataTree,
) => {
const peekData: Record<string, unknown> = {};
let childNavData: EntityNavigationData = {};
const dataTreeAction = dataTree[jsAction.config.name] as DataTreeJSAction;
if (dataTreeAction) {
let children: NavigationData[] = jsAction.config.actions.map((jsChild) => {
// eslint-disable-next-line @typescript-eslint/no-empty-function
peekData[jsChild.name] = function() {}; // can use new Function to parse string
const children: EntityNavigationData = {};
if (jsAction.data?.[jsChild.id] && jsChild.executeOnLoad) {
(peekData[jsChild.name] as any).data = jsAction.data[jsChild.id];
children.data = createNavData({
id: `${jsAction.config.name}.${jsChild.name}.data`,
name: `${jsAction.config.name}.${jsChild.name}.data`,
type: ENTITY_TYPE.JSACTION,
url: undefined,
peekable: true,
peekData: undefined,
children: {},
key: jsChild.name + ".data",
});
}
return createNavData({
id: `${jsAction.config.name}.${jsChild.name}`,
name: `${jsAction.config.name}.${jsChild.name}`,
type: ENTITY_TYPE.JSACTION,
url: jsCollectionIdURL({
pageId,
collectionId: jsAction.config.id,
functionName: jsChild.name,
}),
peekable: true,
peekData: undefined,
children,
key: jsChild.name,
});
});
const variableChildren: NavigationData[] = jsAction.config.variables.map(
(jsChild) => {
if (dataTreeAction)
peekData[jsChild.name] = dataTreeAction[jsChild.name];
return createNavData({
id: `${jsAction.config.name}.${jsChild.name}`,
name: `${jsAction.config.name}.${jsChild.name}`,
type: ENTITY_TYPE.JSACTION,
url: jsCollectionIdURL({
pageId,
collectionId: jsAction.config.id,
functionName: jsChild.name,
}),
peekable: true,
peekData: undefined,
children: {},
key: jsChild.name,
});
},
);
children = children.concat(variableChildren);
childNavData = keyBy(children, (data) => data.key) as Record<
string,
NavigationData
>;
return { childNavData, peekData };
}
};