feat: peek overlay #20053

eco-monk · 2023-01-25T02:47:51Z

Description

Hover over appsmith properties in code to peek data.

This right now covers:

Queries/JsObjects/Apis/Widgets/appsmith and their properties.
Note: For query or Api, this'll work only upto Api.data. (Not Api.data.users[0].id)
Note: For appsmith.store, this'll work only upto appsmith.store. (Not appsmith.store.myData[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

#20053 (comment)
#20053 (comment)

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

vercel · 2023-01-25T02:47:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
appsmith	✅ Ready (Inspect)	Visit Preview		Feb 17, 2023 at 11:15AM (UTC)

what-the-diff · 2023-01-25T02:48:00Z

Added a new feature to show the peek data for an action.
Fixed some bugs in existing code and added tests for them as well.

eco-monk · 2023-01-27T07:29:51Z

/ok-to-test sha=c01aba1

github-actions · 2023-01-27T07:30:14Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4022449104.
Workflow: Appsmith External Integration Test Workflow.
Commit: c01aba1.
PR: 20053.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=20053&runId=4022449104_1

github-actions · 2023-02-17T03:34:50Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-17T03:34:51Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitImport/GitImport_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/JSEditorComment_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicServerSideData_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/GenerateCRUD/S3_Spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/S3_1_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/S3_2_spec.js
cypress/integration/Regression_TestSuite/UpgradeAppsmith/UpgradeAppsimth_spec.js

eco-monk · 2023-02-17T05:01:58Z

/ok-to-test sha=250e737

github-actions · 2023-02-17T05:02:24Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4200844903.
Workflow: Appsmith External Integration Test Workflow.
Commit: 250e737.
PR: 20053.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=20053&runId=4200844903_1

eco-monk · 2023-02-17T06:02:03Z

/ok-to-test sha=de4c987

github-actions · 2023-02-17T06:02:32Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4201145819.
Workflow: Appsmith External Integration Test Workflow.
Commit: de4c987.
PR: 20053.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=20053&runId=4201145819_1

github-actions · 2023-02-17T06:21:48Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-17T06:21:49Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js

github-actions · 2023-02-17T07:25:59Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-17T07:26:00Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/Binding/Bind_TableV2TextPagination_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/Mongo_Spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/S3_1_spec.js

app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx

eco-monk · 2023-02-17T10:45:57Z

/ok-to-test sha=f5cdf44

github-actions · 2023-02-17T10:46:20Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4202995103.
Workflow: Appsmith External Integration Test Workflow.
Commit: f5cdf44.
PR: 20053.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=20053&runId=4202995103_1

github-actions · 2023-02-17T11:56:06Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-17T11:56:07Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/ThemingTests/Basic_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/JSEditorIndent_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Modal/Modal_focus_spec.js

eco-monk added 7 commits January 24, 2023 18:24

event basic

52de6c9

peekable class

77af5da

markers

26d51e7

underline style

9a2dbc0

basic hover without delay

074d1d7

200ms delay

9afad44

hide complete evaluated pop-up

abde6c8

eco-monk changed the title ~~feat: peek overlay new~~ feat: peek overlay Jan 25, 2023

github-actions bot added the Enhancement New feature or request label Jan 25, 2023

eco-monk added 2 commits January 25, 2023 09:38

null check

d65a011

null check

b0beedf

vercel bot had a problem deploying to Preview January 25, 2023 04:15 Failure

react json view

6ccd1b8

vercel bot deployed to Preview January 25, 2023 04:57 View deployment

on mouse leave

17f8f7b

vercel bot deployed to Preview January 25, 2023 05:09 View deployment

cmd + hover styling

bd16055

vercel bot deployed to Preview January 25, 2023 11:26 View deployment

eco-monk added 2 commits January 27, 2023 11:14

Merge branch 'release' into feat/peek-overlay-new

9c66784

make it easier to hover

c01aba1

vercel bot deployed to Preview January 27, 2023 07:37 View deployment

eco-monk added 4 commits January 31, 2023 10:31

Merge branch 'release' into feat/peek-overlay-new

55c813f

Merge branch 'release' into feat/peek-overlay-new

4facb32

overlay start

bc5ff2f

functions basic

7de6621

vercel bot deployed to Preview February 1, 2023 15:08 View deployment

vercel bot deployed to Preview February 17, 2023 02:19 View deployment

copy event analytics

250e737

vercel bot had a problem deploying to Preview February 17, 2023 05:06 Failure

comment

de4c987

vercel bot deployed to Preview February 17, 2023 06:07 View deployment

eco-monk requested a review from akash-codemonk February 17, 2023 06:42

hetunandu previously approved these changes Feb 17, 2023

View reviewed changes

app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx Outdated Show resolved Hide resolved

remove comments

f5cdf44

eco-monk dismissed hetunandu’s stale review via f5cdf44 February 17, 2023 10:45

vercel bot deployed to Preview February 17, 2023 10:51 View deployment

eco-monk enabled auto-merge (squash) February 17, 2023 13:03

hetunandu approved these changes Feb 17, 2023

View reviewed changes

eco-monk merged commit 73ba3a3 into release Feb 17, 2023

eco-monk deleted the feat/peek-overlay-new branch February 17, 2023 16:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: peek overlay #20053

feat: peek overlay #20053

eco-monk commented Jan 25, 2023 •

edited

Loading

vercel bot commented Jan 25, 2023 •

edited

Loading

what-the-diff bot commented Jan 25, 2023

eco-monk commented Jan 27, 2023

github-actions bot commented Jan 27, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

eco-monk commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

eco-monk commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

eco-monk commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

feat: peek overlay #20053

feat: peek overlay #20053

Conversation

eco-monk commented Jan 25, 2023 • edited Loading

Description

Type of change

How Has This Been Tested?

Test Plan

Issues raised during DP testing

Checklist:

Dev activity

QA activity:

vercel bot commented Jan 25, 2023 • edited Loading

what-the-diff bot commented Jan 25, 2023

eco-monk commented Jan 27, 2023

github-actions bot commented Jan 27, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

eco-monk commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

eco-monk commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

eco-monk commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

eco-monk commented Jan 25, 2023 •

edited

Loading

vercel bot commented Jan 25, 2023 •

edited

Loading