## 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
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import {
|
|
entityDefinitions,
|
|
EntityDefinitionsOptions,
|
|
} from "ce/utils/autocomplete/EntityDefinitions";
|
|
import {
|
|
DataTree,
|
|
DataTreeWidget,
|
|
ENTITY_TYPE,
|
|
} from "entities/DataTree/dataTreeFactory";
|
|
import { isFunction } from "lodash";
|
|
import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
|
|
import { builderURL } from "RouteBuilder";
|
|
import { EntityNavigationData } from "selectors/navigationSelectors";
|
|
import { createNavData } from "./common";
|
|
|
|
export const getWidgetChildrenNavData = (
|
|
widget: FlattenedWidgetProps,
|
|
dataTree: DataTree,
|
|
pageId: string,
|
|
) => {
|
|
const peekData: Record<string, unknown> = {};
|
|
const childNavData: EntityNavigationData = {};
|
|
const dataTreeWidget: DataTreeWidget = dataTree[
|
|
widget.widgetName
|
|
] as DataTreeWidget;
|
|
if (widget.type === "FORM_WIDGET") {
|
|
const children: EntityNavigationData = {};
|
|
const formChildren: EntityNavigationData = {};
|
|
if (dataTreeWidget) {
|
|
Object.keys(dataTreeWidget.data || {}).forEach((widgetName) => {
|
|
const childWidgetId = (dataTree[widgetName] as DataTreeWidget).widgetId;
|
|
formChildren[widgetName] = createNavData({
|
|
id: `${widget.widgetName}.data.${widgetName}`,
|
|
name: widgetName,
|
|
type: ENTITY_TYPE.WIDGET,
|
|
url: builderURL({ pageId, hash: childWidgetId }),
|
|
peekable: false,
|
|
peekData: undefined,
|
|
children: {},
|
|
});
|
|
});
|
|
}
|
|
children.data = createNavData({
|
|
id: `${widget.widgetName}.data`,
|
|
name: "data",
|
|
type: ENTITY_TYPE.WIDGET,
|
|
url: undefined,
|
|
peekable: false,
|
|
peekData: undefined,
|
|
children: formChildren,
|
|
});
|
|
|
|
return { childNavData: children, peekData };
|
|
}
|
|
if (dataTreeWidget) {
|
|
const type: Exclude<
|
|
EntityDefinitionsOptions,
|
|
| "CANVAS_WIDGET"
|
|
| "ICON_WIDGET"
|
|
| "SKELETON_WIDGET"
|
|
| "TABS_MIGRATOR_WIDGET"
|
|
> = dataTreeWidget.type as any;
|
|
let config: any = entityDefinitions[type];
|
|
if (config) {
|
|
if (isFunction(config)) config = config(dataTreeWidget);
|
|
const widgetProps = Object.keys(config).filter(
|
|
(k) => k.indexOf("!") === -1,
|
|
);
|
|
widgetProps.forEach((prop) => {
|
|
const data = dataTreeWidget[prop];
|
|
peekData[prop] = data;
|
|
childNavData[prop] = createNavData({
|
|
id: `${widget.widgetName}.${prop}`,
|
|
name: `${widget.widgetName}.${prop}`,
|
|
type: ENTITY_TYPE.WIDGET,
|
|
url: undefined,
|
|
peekable: true,
|
|
peekData: undefined,
|
|
children: {},
|
|
});
|
|
});
|
|
}
|
|
return { childNavData, peekData };
|
|
}
|
|
};
|