PromucFlow_constructor/app/client
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
..
cypress feat: peek overlay (#20053) 2023-02-17 21:33:34 +05:30
docker fix: Remove extra event and old disable var (#20624) 2023-02-15 19:16:04 +05:30
generators feat: Auto height instant update (#19082) 2023-02-03 11:17:40 +05:30
patches fix: patches blueprint's popover (#12213) 2022-03-31 13:27:06 +05:30
perf ci: run fat container docker inside perf tests and update setup-perf-test workflow to use localhost for accessing dev environment (#20280) 2023-02-07 15:56:41 +05:30
public fix: Remove extra event and old disable var (#20624) 2023-02-15 19:16:04 +05:30
src feat: peek overlay (#20053) 2023-02-17 21:33:34 +05:30
test chore: Render below the fold widget components when browser is idle using Intersection Observer (#18747) 2023-02-08 16:53:39 +05:30
typings feat: peek overlay (#20053) 2023-02-17 21:33:34 +05:30
.babelrc refactor: code splitting to support third party sso/oidc in EE (#10201) 2022-01-07 11:38:17 +05:30
.dockerignore
.editorconfig
.eslintrc.json feat: upgrade to create react app 5 (#14000) 2022-06-21 19:27:34 +05:30
.flowconfig
.gitignore feat: Support running NGINX for development without Docker (#16667) 2022-09-14 09:58:31 +05:30
.huskyrc
.lintstagedrc feat: upgrade client npm packages. (#14858) 2022-06-30 16:59:09 +05:30
.nvmrc chore: Update node version to 16.15.0 LTS (#14094) 2022-05-26 16:05:02 +05:30
.prettierignore
.prettierrc
.sentryclirc
build.sh ci: Ship source maps + fix perf test failures on EE (#18700) 2022-12-09 18:40:59 +05:30
craco.build.config.js feat: Automatic height updates for widgets based on contents (Auto Height) (#18341) 2022-11-23 15:18:23 +05:30
craco.common.config.js fix: webpack hot reload issue (#15070) 2022-07-07 14:00:57 +05:30
craco.dev.config.js chore: updated dependencies removed unused dependencies. (#19441) 2023-01-06 19:12:03 +05:30
cypress_ci.json test: Cypress Flaky fixes + Mock api update + PgAdminspec fix (#20032) 2023-02-02 13:29:24 +05:30
cypress.env.json feat: [Context Switching] Complex widgets and other Phase 2 items (#17046) 2022-12-08 12:51:58 +05:30
cypress.json test: Cypress Flaky fixes + Mock api update + PgAdminspec fix (#20032) 2023-02-02 13:29:24 +05:30
Dockerfile feat: Support running NGINX for development without Docker (#16667) 2022-09-14 09:58:31 +05:30
index.tsx feat: property pane docking (#7361) 2021-11-23 13:31:46 +05:30
jest.config.js fix: Remove extra event and old disable var (#20624) 2023-02-15 19:16:04 +05:30
package.json feat: peek overlay (#20053) 2023-02-17 21:33:34 +05:30
postcss.config.js feat: upgrade to create react app 5 (#14000) 2022-06-21 19:27:34 +05:30
README.md ci: Modularizing the Github actions workflow for maintainability (#16505) 2022-09-09 01:08:55 +05:30
README.old.md
start-https.sh fix: Remove extra event and old disable var (#20624) 2023-02-15 19:16:04 +05:30
stats.json feat: property pane docking (#7361) 2021-11-23 13:31:46 +05:30
tailwind.config.js feat: upgrade to create react app 5 (#14000) 2022-06-21 19:27:34 +05:30
tsconfig.json feat: Import javascript libraries (#17895) 2022-12-21 22:44:47 +05:30
tsconfig.path.json refactor: code splitting to support third party sso/oidc in EE (#10201) 2022-01-07 11:38:17 +05:30
vercel.json chore: Remove old way of adding feature flags (#11213) 2022-02-16 19:57:58 +05:30
yarn.lock feat: peek overlay (#20053) 2023-02-17 21:33:34 +05:30

Appsmith Client

This project was bootstrapped with Create React App.

For details on setting up your development machine, please refer to the Setup Guide