appsmith icon indicating copy to clipboard operation
appsmith copied to clipboard

Published 20 hours ago • verified publisher icon appsmithorg

chore: update Styled components to latest version and related cleanup

Open yaldram opened this issue 2 years ago • 10 comments

Description

We need to upgrade styled-components, so that it will become easy to upgrade to version 6.0 when it is out. This is because, v6.0 has an important functionality which isn't available in today's version.

Tasks completed

  • Update Styled components to latest version.
  • Prepare codebase by cleaning up the styled components functions that will be deprecated in version 6
  • We are still using the withTheme HOC, we should instead use the useTheme hook (best practices)
  • Remove the AnyStyledComponent type it is un-necessary and will be deprecated

Fixes #19463

Type of change

  • Non breaking change. The application should work as before and should not effect any visual elements or UI.

How Has This Been Tested?

  • Manual @appsmithorg/qa please refer to the test plan for areas of interest.
  • Cypress: All existing test cases must pass.

Test Plan

  • We need to do a sanity check on the Product Updates Modal, Release section.
  • We also need to do a sanity check on the Login, Signup, ResetPassword pages.
  • I think we can merge this Pull Request and continue with our weekly regression, because there are no style changes in this Pull Request, everything should work as expected.

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

yaldram avatar Dec 28 '22 12:12 yaldram

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

Name Status Preview Updated
appsmith ✅ Ready (Inspect) Visit Preview Jan 13, 2023 at 7:55AM (UTC)

vercel[bot] avatar Dec 28 '22 12:12 vercel[bot]

@yaldram Please update the PR description in the relevant areas. We should especially add context around why we're doing these changes and if we have any tests to verify regression as well as the areas of concern during QA.

riodeuno avatar Jan 03 '23 06:01 riodeuno

@riodeuno I have added the Q/A plan under the Test plan in the description of the Pull Request. I personally use the vscode-styled-components extension, it provides linting for styled-components block of code.

yaldram avatar Jan 03 '23 06:01 yaldram

/ok-to-test sha=9bd5825

yaldram avatar Jan 03 '23 13:01 yaldram

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

github-actions[bot] avatar Jan 03 '23 13:01 github-actions[bot]

@riodeuno I have removed a false test EditorHeader , it was passing on release when it should not have passed. It was 20 months old, we should not test styles in jest, also it took a lot of time. It was for testing the global search bar border-color on hover, if you check release, it is black, but the test expected white border color and it was passing on release.

yaldram avatar Jan 04 '23 07:01 yaldram

/ok-to-test sha=c84e758

yaldram avatar Jan 04 '23 07:01 yaldram

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

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

@yaldram

we should not test styles in jest

What alternative do you suggest here?

riodeuno avatar Jan 04 '23 13:01 riodeuno

Please create a task for replacing the test we've removed. We should add this to our backlog and work on adding a relevant test.

cc @rohitagarwal88

riodeuno avatar Jan 04 '23 13:01 riodeuno

Have checked the pages and compared it with release, no noticeable changes seen. Moving to done.

Sripriya93 avatar Jan 06 '23 12:01 Sripriya93

/ok-to-test sha=75d5c93

yaldram avatar Jan 09 '23 08:01 yaldram

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

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

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/Autocomplete/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitImport/ImportEmptyRepo_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Connection_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Deploy_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/DisconnectGit_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Merge_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Chart/Custom_Chart_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MySQLNoiseTest_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/JSFunctionExecution_spec.ts

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

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/Autocomplete/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Autocomplete/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Connection_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/DisconnectGit_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Merge_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MySQLNoiseTest_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MySQLNoiseTest_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/JSFunctionExecution_spec.ts

github-actions[bot] avatar Jan 09 '23 10:01 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/Autocomplete/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Autocomplete/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Connection_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/DisconnectGit_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Merge_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MySQLNoiseTest_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MySQLNoiseTest_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/JSFunctionExecution_spec.ts

github-actions[bot] avatar Jan 09 '23 11:01 github-actions[bot]

/ok-to-test sha=ed86aa6

yaldram avatar Jan 09 '23 14:01 yaldram

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

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

/ok-to-test sha=a3651ac

yaldram avatar Jan 13 '23 09:01 yaldram

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

github-actions[bot] avatar Jan 13 '23 09:01 github-actions[bot]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/JSFunctionExecution_spec.ts

github-actions[bot] avatar Jan 13 '23 10:01 github-actions[bot]

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

github-actions[bot] avatar Jan 13 '23 10:01 github-actions[bot]

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

github-actions[bot] avatar Jan 13 '23 11:01 github-actions[bot]