appsmith icon indicating copy to clipboard operation
appsmith copied to clipboard

feat: drag n drop and Container jump enhancements

Open rahulramesha opened this issue 2 years ago • 14 comments

Description

This PR includes Changes for Drag and drop Improvements, That includes,

  • Resizing dragging widgets along Container edges.
  • Initially resize widgets against Container/Droptarget widgets.
  • While holding close to Container/Droptarget widgets for half a second, start to reflow the widget.

Fixes #19139 Fixes #12892

Media

https://user-images.githubusercontent.com/71900764/209154834-66acecbb-2df8-4598-86d5-4fe7843dd21b.mp4

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

How Has This Been Tested?

  • Manual
  • Jest

Test Plan

Add Testsmith test cases links that relate to this PR

Issues raised during DP testing

Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR)

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:

  • [ ] 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

rahulramesha avatar Dec 19 '22 20:12 rahulramesha

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

Name Status Preview Updated
appsmith ✅ Ready (Inspect) Visit Preview Jan 6, 2023 at 2:35PM (UTC)

vercel[bot] avatar Dec 19 '22 20:12 vercel[bot]

/ok-to-test sha=fbaf56d

rahulramesha avatar Dec 22 '22 17:12 rahulramesha

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

github-actions[bot] avatar Dec 22 '22 17:12 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/InputTruncateCheck_Spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/Divider_spec.js

github-actions[bot] avatar Dec 22 '22 18:12 github-actions[bot]

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

github-actions[bot] avatar Dec 22 '22 18:12 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/InputTruncateCheck_Spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/Divider_spec.js

github-actions[bot] avatar Dec 22 '22 18:12 github-actions[bot]

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

github-actions[bot] avatar Dec 22 '22 18:12 github-actions[bot]

/ok-to-test sha=c4d9df9

rahulramesha avatar Dec 27 '22 19:12 rahulramesha

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

github-actions[bot] avatar Dec 27 '22 19:12 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/InputTruncateCheck_Spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/GitBugs_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/Divider_spec.js

github-actions[bot] avatar Dec 27 '22 20:12 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/InputTruncateCheck_Spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/Divider_spec.js

github-actions[bot] avatar Dec 27 '22 20:12 github-actions[bot]

https://www.loom.com/share/9808faae68004df79a9a6d3af5f73f42 The drop target is showing in red even though it is a legit one

kamakshibhat-appsmith avatar Jan 04 '23 05:01 kamakshibhat-appsmith

/ok-to-test sha=6a44756

rahulramesha avatar Jan 04 '23 12:01 rahulramesha

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

github-actions[bot] avatar Jan 04 '23 12:01 github-actions[bot]

/ok-to-test sha=7b5058d

rahulramesha avatar Jan 05 '23 06:01 rahulramesha

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

github-actions[bot] avatar Jan 05 '23 06:01 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/InputTruncateCheck_Spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/Divider_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/EmptyDataSource_spec.js

github-actions[bot] avatar Jan 05 '23 08:01 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/InputTruncateCheck_Spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/Divider_spec.js

github-actions[bot] avatar Jan 05 '23 08:01 github-actions[bot]

Looks good @rahulramesha

kamakshibhat-appsmith avatar Jan 05 '23 15:01 kamakshibhat-appsmith

Looks good @rahulramesha

kamakshibhat-appsmith avatar Jan 05 '23 15:01 kamakshibhat-appsmith

/ok-to-test sha=87204fc

rahulramesha avatar Jan 05 '23 19:01 rahulramesha

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

github-actions[bot] avatar Jan 05 '23 20:01 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/GitBugs_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/GitSyncedApps_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js

github-actions[bot] avatar Jan 05 '23 21:01 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite_Fat/ClientSideTests/Refactoring/Refactoring_spec.ts

github-actions[bot] avatar Jan 05 '23 21:01 github-actions[bot]

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

github-actions[bot] avatar Jan 05 '23 21:01 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite_Fat/ClientSideTests/Refactoring/Refactoring_spec.ts

github-actions[bot] avatar Jan 06 '23 04:01 github-actions[bot]

/ok-to-test sha=fe019f3

rahulramesha avatar Jan 06 '23 12:01 rahulramesha

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

github-actions[bot] avatar Jan 06 '23 12:01 github-actions[bot]

/ok-to-test sha=0eff8c7

rahulramesha avatar Jan 06 '23 14:01 rahulramesha

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

github-actions[bot] avatar Jan 06 '23 14:01 github-actions[bot]