Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Entity explorer revamp #9811

Merged
merged 242 commits into from
Jan 29, 2022
Merged

feat: Entity explorer revamp #9811

merged 242 commits into from
Jan 29, 2022

Conversation

albinAppsmith
Copy link
Collaborator

@albinAppsmith albinAppsmith commented Dec 15, 2021

Description

A complete refresh to our entity explorer.

Problems with the existing explorer

  • It shows the entities of all the pages in the application making it difficult to use when an application grows.
  • It re-renders on every(almost) action done on the UI.
  • It fails to show the queries created under a datasource.
  • Generic icons makes it difficult to differentiate between kind of queries.
  • Widgets take up a lot of real estate and it is expanded on every widget selection, pushing the relevant items further down.

Changes

  • We no longer show the entities from all the pages but just of the page, user is currently on.
  • Performance improvements by writing better selectors and memoizing components.
  • Queries now have the same icon as the datasource except that they are boxed.
  • We have a new section which shows all the queries and JS Objects. They are grouped and sorted by default.
  • Widgets section is expanded only on demand.
  • Action creation will now go via the omnibar.
  • Bindings are no longer under the entity but is shown in a separate popover.

Fixes #9689
Fixes #9671
Fixes #9672
Fixes #9688

Type of change

  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

  • Manual
  • Cypress

Checklist:

  • 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

Test coverage results πŸ§ͺ

πŸ”΄ Total coverage has decreased
// Code coverage diff between base branch:release and head branch: feat/organize_entity_exp 
Status File % Stmts % Branch % Funcs % Lines
πŸ”΄ total 55.01 (-0.02) 36.53 (-0.04) 34.74 (-0.2) 55.41 (-0.03)
🟒 app/client/src/components/ads/TreeDropdown.tsx 59.26 (0) 61.11 (2.29) 36.84 (0) 57.69 (0)
🟒 app/client/src/components/editorComponents/Sidebar.tsx 83.15 (1.54) 44.12 (0) 62.5 (6.25) 83.33 (1.62)
🟒 app/client/src/components/editorComponents/ActionCreator/index.tsx 39.11 (0) 7.08 (0.12) 40 (0) 38.98 (0)
πŸ”΄ app/client/src/components/editorComponents/CodeEditor/generateQuickCommands.tsx 26.25 (-3.08) 7.14 (0.47) 6.25 (0) 25.32 (-3.06)
πŸ”΄ app/client/src/components/editorComponents/GlobalSearch/Description.tsx 21.05 (-0.28) 29.63 (0) 0 (0) 22.22 (-0.32)
✨ πŸ†• app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHooks.tsx 71 21.88 50 66.28
πŸ”΄ app/client/src/components/editorComponents/GlobalSearch/HelpBar.tsx 93.55 (0.69) 66.67 (-8.33) 90.91 (0.91) 92.31 (0.31)
πŸ”΄ app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx 25 (-0.37) 18.75 (-0.6) 0 (0) 28.81 (-0.5)
πŸ”΄ app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx 23.4 (-1.41) 26.97 (-2.66) 0 (0) 24.26 (-1.12)
🟒 app/client/src/components/editorComponents/GlobalSearch/index.tsx 52.52 (0.23) 17.19 (2.57) 34.48 (-2.83) 54.98 (1.16)
πŸ”΄ app/client/src/components/editorComponents/GlobalSearch/utils.tsx 67.33 (-2.27) 23.58 (-1.2) 53.57 (-7.3) 66.94 (-2.06)
πŸ”΄ app/client/src/constants/messages.ts 74.85 (-0.09) 100 (0) 25.45 (-0.3) 80.29 (0.07)
πŸ”΄ app/client/src/constants/routes.ts 64.96 (-2.56) 24.36 (-2.56) 22.22 (-7.41) 61.27 (-2.95)
πŸ”΄ app/client/src/icons/MenuIcons.tsx 58.46 (-4.25) 100 (0) 6.9 (-8.48) 58.46 (-4.25)
🟒 app/client/src/pages/Editor/EditorHeader.tsx 86.52 (0.29) 53.01 (2.33) 62.5 (0) 86.03 (0.32)
πŸ”΄ app/client/src/pages/Editor/GlobalHotKeys.tsx 61.42 (-0.48) 28.57 (0) 50 (-1.11) 60.66 (-0.5)
🟒 app/client/src/pages/Editor/MainContainer.tsx 93.1 (4.73) 100 (16.67) 66.67 (11.11) 92.59 (5.75)
✨ πŸ†• app/client/src/pages/Editor/Explorer/Datasources.tsx 92.11 62.5 50 91.43
🟒 app/client/src/pages/Editor/Explorer/EntityExplorer.tsx 88.89 (9.79) 66.67 (29.17) 50 (16.67) 88.46 (8.77)
πŸ”΄ app/client/src/pages/Editor/Explorer/ExplorerIcons.tsx 75 (-14.06) 30 (-20) 6.67 (-13.33) 78.82 (-9.89)
πŸ”΄ app/client/src/pages/Editor/Explorer/JSDependencies.tsx 81.82 (-3.03) 100 (0) 42.86 (-7.14) 85.71 (-3.58)
🟒 app/client/src/pages/Editor/Explorer/helpers.tsx 76.47 (12.83) 50 (15.38) 50 (25) 73.33 (14.71)
πŸ”΄ app/client/src/pages/Editor/Explorer/hooks.ts 22.87 (-14.36) 19.83 (11.38) 12.24 (-41.25) 22.78 (-17.36)
πŸ”΄ app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx 48.39 (-16.61) 0 (0) 0 (0) 51.72 (-13.28)
🟒 app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx 40.38 (1.25) 0 (0) 0 (0) 40.38 (1.25)
🟒 app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx 34.78 (1.45) 25 (0) 0 (0) 37.21 (1.5)
πŸ”΄ app/client/src/pages/Editor/Explorer/Actions/helpers.tsx 36.59 (-10.29) 0 (-34.55) 0 (-19.05) 37.14 (-11.95)
πŸ”΄ app/client/src/pages/Editor/Explorer/Datasources/DatasourceEntity.tsx 39.13 (-6.82) 0 (0) 0 (0) 39.13 (-6.82)
🟒 app/client/src/pages/Editor/Explorer/Entity/Collapse.tsx 100 (11.11) 100 (25) 100 (0) 100 (0)
🟒 app/client/src/pages/Editor/Explorer/Entity/CollapseToggle.tsx 100 (8.33) 100 (25) 100 (0) 100 (0)
🟒 app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx 52.63 (31.42) 19.23 (19.23) 52.63 (52.63) 50.96 (29.42)
🟒 app/client/src/pages/Editor/Explorer/Entity/EntityProperty.tsx 57.14 (-1.95) 75 (41.67) 0 (0) 60.61 (1.52)
πŸ”΄ app/client/src/pages/Editor/Explorer/Entity/Name.tsx 54.26 (-8.09) 32.08 (-2.61) 26.32 (-12.14) 53.33 (-8.4)
🟒 app/client/src/pages/Editor/Explorer/Entity/Placeholder.tsx 100 (45.45) 100 (0) 100 (100) 100 (45.45)
🟒 app/client/src/pages/Editor/Explorer/Entity/index.tsx 90.59 (0.47) 82.86 (6.07) 84.21 (0.88) 90.12 (0.38)
✨ πŸ†• app/client/src/pages/Editor/Explorer/Files/index.tsx 75 16.67 50 80
🟒 app/client/src/pages/Editor/Explorer/JSActions/JSActionContextMenu.tsx 37.84 (2.36) 0 (0) 0 (0) 38.89 (2.22)
πŸ”΄ app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx 60.87 (-4.35) 100 (0) 0 (0) 60.87 (-4.35)
🟒 app/client/src/pages/Editor/Explorer/JSActions/MoreJSActionsMenu.tsx 33.33 (1.75) 33.33 (0) 0 (0) 36.11 (1.82)
✨ πŸ†• app/client/src/pages/Editor/Explorer/Pages/index.tsx 80.36 62.5 38.46 80.36
πŸ”΄ app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx 70.83 (-1.9) 14.29 (0) 50 (-16.67) 70.21 (-1.88)
πŸ”΄ app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx 97.62 (-0.3) 79.31 (-3.67) 100 (0) 100 (0)
🟒 app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx 100 (6.45) 74 (3.17) 100 (33.33) 100 (6.67)
πŸ”΄ app/client/src/pages/Editor/SaaSEditor/constants.ts 45.71 (-8.58) 0 (-6.67) 0 (-25) 38.71 (-9.68)
πŸ”΄ app/client/src/pages/Editor/WidgetsEditor/index.tsx 91.78 (-1.87) 62.07 (0) 75 (-25) 91.18 (-2.15)
🟒 app/client/src/reducers/uiReducers/explorerReducer.ts 48 (4.52) 0 (0) 10 (10) 48 (4.52)
🟒 app/client/src/sagas/ApiPaneSagas.ts 17.19 (1.59) 1.96 (0.14) 9.09 (1.95) 19.39 (1.74)
🟒 app/client/src/sagas/DatasourcesSagas.ts 13.51 (0.08) 2.4 (0.04) 8.7 (0) 16.12 (0.12)
πŸ”΄ app/client/src/sagas/QueryPaneSagas.ts 22.66 (-2.56) 10.87 (-0.49) 18.18 (-6.82) 26.67 (-2.8)
πŸ”΄ app/client/src/selectors/entitiesSelector.ts 46.95 (-2.91) 8.53 (-2.97) 26.24 (-5.34) 43.61 (-2.94)
🟒 app/client/src/utils/helpers.tsx 65.78 (2.32) 32.22 (2.22) 58.82 (7.84) 63.68 (3)
❌ app/client/src/pages/Editor/Explorer/Actions/ActionsGroup.tsx 50 0 0 50
❌ app/client/src/pages/Editor/Explorer/Entity/CurrentPageEntityProperties.tsx 27.08 0 0 28.26
❌ app/client/src/pages/Editor/Explorer/JSActions/JSActionGroup.tsx 63.16 0 0 63.16
❌ app/client/src/pages/Editor/Explorer/Pages/PageEntity.tsx 90.91 40 60 90.91
❌ app/client/src/pages/Editor/Explorer/Pages/PageGroup.tsx 82.61 80 50 84.44
❌ app/client/src/pages/Editor/Explorer/PluginGroup/PluginGroup.tsx 89.66 65.96 60 89.29

arunvjn and others added 28 commits December 13, 2021 15:16
Added file operations in omnibar.
Datasource section in Entity Explorer.
Added icon for new datasource.
…o task/9671-entity-explorer-pages-section
…appsmithorg/appsmith into feat/organize_entity_exp
@github-actions github-actions bot added the Enhancement New feature or request label Dec 15, 2021
@github-actions
Copy link

Unable to find test scripts. Please add necessary tests to the PR.

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1760698222.
Workflow: Appsmith External Integration Test Workflow.
Commit: ea07fdb.
PR: 9811.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/1760698222.
Commit: ea07fdb.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Mean SD.Sample SD.Population
Click on table row
scripting 2931.08 2137.86 2057.79 2185.76 2184.93 2299.48 15.52 13.88
painting 43.69 29.17 13.79 15.7 10.97 22.66 60.37 53.97
rendering 457.3 259.23 253.2 257.72 260.96 297.68 29.99 26.82
Edit input
scripting 350.39 358.49 300.58 316.92 302.46 325.77 8.31 7.43
painting 10.05 12.16 9.02 13.14 22.01 13.28 38.78 34.71
rendering 21.14 20.52 15.43 15.14 14.79 17.4 18.05 16.15
Clear input
scripting 728.76 739.05 772.76 752.79 773.95 753.46 2.66 2.38
painting 5.65 6.15 11.23 12.98 6.6 8.52 39.32 35.09
rendering 192.06 184.02 213.48 183.54 181 190.82 6.99 6.25
Edit input again
scripting 269.47 241.46 263.33 262.69 279 263.19 5.24 4.69
painting 5.33 4.68 6.15 5.71 3.66 5.11 18.98 17.03
rendering 19.06 21.45 22.67 17.15 17.06 19.48 12.99 11.60

@arunvjn
Copy link
Contributor

arunvjn commented Jan 28, 2022

/ok-to-test sha=89d9227

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1761115672.
Workflow: Appsmith External Integration Test Workflow.
Commit: 89d9227.
PR: 9811.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/1761115672.
Commit: 89d9227.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Mean SD.Sample SD.Population
Click on table row
scripting 3153.61 2577.33 2654.48 2547.92 2546.93 2696.05 9.63 8.61
painting 32.49 11.62 15.01 13.88 24.12 19.42 44.90 40.16
rendering 489.92 275.14 283.16 296.86 302.53 329.52 27.41 24.51
Edit input
scripting 372.71 387.07 466.04 542.7 365.93 426.89 17.83 15.95
painting 23.43 6.35 11.96 7.28 16.7 13.14 53.88 48.17
rendering 15.92 20.12 26.2 22.58 16.5 20.26 21.17 18.95
Clear input
scripting 867.53 868.71 915.9 876.02 851.67 875.97 2.74 2.45
painting 6.79 12.17 17.6 16.82 6.79 12.03 43.39 38.82
rendering 216.85 225.26 219.35 204.03 213.03 215.7 3.66 3.27
Edit input again
scripting 355.92 356.84 338.12 325.32 355.31 346.3 4.06 3.63
painting 5.68 6.31 14.52 15.31 7.25 9.81 47.91 42.81
rendering 24.61 21.9 20.59 21.59 24.5 22.64 8.04 7.16

@arunvjn
Copy link
Contributor

arunvjn commented Jan 28, 2022

/ok-to-test sha=36ad8fa

1 similar comment
@arunvjn
Copy link
Contributor

arunvjn commented Jan 28, 2022

/ok-to-test sha=36ad8fa

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1761470707.
Workflow: Appsmith External Integration Test Workflow.
Commit: 36ad8fa.
PR: 9811.

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1761576734.
Workflow: Appsmith External Integration Test Workflow.
Commit: 36ad8fa.
PR: 9811.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/1761576734.
Commit: 36ad8fa.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Mean SD.Sample SD.Population
Click on table row
scripting 2548.38 2561.82 2977.99 2494.44 2429.57 2602.44 8.31 7.43
painting 13.23 23.73 36.7 11.82 19.22 20.94 47.85 42.79
rendering 303.66 271.28 478.95 284.73 301.79 328.08 26.02 23.27
Edit input
scripting 404.77 400.9 401.59 402.82 500.17 422.05 10.35 9.26
painting 8.24 15.02 8.84 8.31 14.45 10.97 31.45 28.08
rendering 20.6 18.3 17.23 17.64 26.53 20.06 19.14 17.15
Clear input
scripting 884.24 985.21 880.57 828 880.24 891.65 6.42 5.74
painting 8.38 10.63 5.55 6.41 15.17 9.23 41.82 37.38
rendering 229.57 223.37 207.08 203.64 210.21 214.77 5.19 4.64
Edit input again
scripting 734.97 375.48 376.91 372.31 402.76 452.49 35.00 31.31
painting 6.29 20.13 8.12 14.13 17.86 13.31 45.08 40.35
rendering 20.54 22.18 24.17 27.34 22.39 23.32 11.11 9.91

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/1761470707.
Commit: 36ad8fa.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Mean SD.Sample SD.Population
Click on table row
scripting 2538.92 2564.14 2487.73 2560.95 2523.35 2535.02 1.23 1.10
painting 10.44 31.51 11.32 13.79 13.13 16.04 54.55 48.82
rendering 351.54 353.77 358.63 360.49 338.23 352.53 2.49 2.22
Edit input
scripting 395.24 429.75 395.19 330.88 465.94 403.4 12.39 11.09
painting 19.31 6.2 30.35 42.16 20.94 23.79 56.33 50.36
rendering 23.33 18.17 35.96 15.3 21.79 22.91 34.66 30.99
Clear input
scripting 913.99 847.5 905.97 897.84 851.61 883.38 3.56 3.18
painting 6.04 13.95 13.65 8.99 9 10.33 32.82 29.43
rendering 281.62 249.48 261.58 267.1 252.58 262.47 4.88 4.36
Edit input again
scripting 368.21 350.07 351.29 398.22 362.73 366.1 5.33 4.77
painting 7.08 5.51 6.26 9.62 5.26 6.75 26.07 23.26
rendering 22.44 21 35.83 25.91 25.78 26.19 22.11 19.78

@arunvjn
Copy link
Contributor

arunvjn commented Jan 28, 2022

/ok-to-test sha=c3f5262

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1762032670.
Workflow: Appsmith External Integration Test Workflow.
Commit: c3f5262.
PR: 9811.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/1762032670.
Commit: c3f5262.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Mean SD.Sample SD.Population
Click on table row
scripting 3542.54 3259.39 3174.67 3288.44 2982.63 3249.53 6.24 5.58
painting 21.4 32.04 27.56 21.17 16.37 23.71 25.81 23.07
rendering 628.24 466.28 507.97 472.81 445.21 504.1 14.48 12.95
Edit input
scripting 463.93 437.57 530.12 465.84 397.2 458.93 10.57 9.45
painting 32.13 12.15 11.08 41.72 7.01 20.82 73.05 65.32
rendering 20.55 17.71 27.15 18.75 20.65 20.96 17.56 15.70
Clear input
scripting 1048.59 1057.57 1097.15 1086.07 1056.27 1069.13 1.98 1.77
painting 8.11 9.53 7.16 16.46 16.88 11.63 40.24 36.03
rendering 297.25 266.86 306.63 326.77 290.74 297.65 7.37 6.59
Edit input again
scripting 412.3 446.29 410.22 409.25 431.56 421.92 3.89 3.48
painting 7.45 14.88 5.61 9.87 6.03 8.77 43.33 38.77
rendering 26.67 42.81 25.42 27.37 25.77 29.61 25.06 22.42

@arunvjn
Copy link
Contributor

arunvjn commented Jan 29, 2022

/ok-to-test sha=c3f5262

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1764711366.
Workflow: Appsmith External Integration Test Workflow.
Commit: c3f5262.
PR: 9811.

@arunvjn
Copy link
Contributor

arunvjn commented Jan 29, 2022

/ok-to-test sha=c3f5262

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1764849170.
Workflow: Appsmith External Integration Test Workflow.
Commit: c3f5262.
PR: 9811.

@github-actions
Copy link

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/1764849170.
Commit: c3f5262.
Results:

Click to view performance test results

Run 1 Run 2 Run 3 Run 4 Run 5 Mean SD.Sample SD.Population
Click on table row
scripting 3401.99 2608.43 2655.44 2639.58 2587.26 2778.54 12.58 11.25
painting 16.54 22.08 21.05 11.93 9.9 16.3 33.07 29.57
rendering 469.43 351.37 332.04 334.32 352.02 367.84 15.65 13.99
Edit input
scripting 422.32 480.34 499.41 431.56 430.95 452.92 7.64 6.83
painting 17.87 20.45 10.67 30.91 7.28 17.44 52.87 47.25
rendering 21.85 25.86 23.94 27.88 17.42 23.39 17.19 15.35
Clear input
scripting 1161.74 923.3 896.69 871.75 921.98 955.09 12.30 11.00
painting 9.41 10.91 11.35 6.84 13.24 10.35 23.09 20.68
rendering 269.62 247.72 272.43 246.31 249.99 257.21 4.94 4.42
Edit input again
scripting 359.95 359.67 390.81 378.65 335.3 364.88 5.79 5.18
painting 13.53 5.1 5.96 8.5 6.39 7.9 42.91 38.35
rendering 25.03 22.93 24.45 25.51 27.22 25.03 6.23 5.59

@arunvjn
Copy link
Contributor

arunvjn commented Jan 29, 2022

/ok-to-test sha=c3f5262

@github-actions
Copy link

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/1764991032.
Workflow: Appsmith External Integration Test Workflow.
Commit: c3f5262.
PR: 9811.

@arunvjn arunvjn merged commit 5cfe12b into release Jan 29, 2022
@arunvjn arunvjn deleted the feat/organize_entity_exp branch January 29, 2022 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement New feature or request
Projects
None yet
9 participants