PromucFlow_constructor/app/client/src/utils/NavigationSelector/WidgetChildren.ts
Anand Srinivasan 73ba3a39c5
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 21:33:34 +05:30

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 };
}
};