appsmith icon indicating copy to clipboard operation
appsmith copied to clipboard
verified publisher icon appsmithorg

chore: add import sorting

Open alex-golovanov opened this issue 1 year ago • 12 comments

Description

Automatic import sorting for FE client app.

Fixes #35732

Automation

/ok-to-test tags="@tag.Sanity"

:mag: Cypress test results

[!CAUTION] 🔴 🔴 🔴 Some tests have failed. Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/10507939409 Commit: 808c190b4874ff6256c82ccee423fc6590bbec0c Cypress dashboard. Tags: @tag.Sanity Spec: The following are new failures, please fix them before merging the PR:

  1. cypress/e2e/Sanity/Datasources/ArangoDataSourceStub_spec.js
  2. cypress/e2e/Sanity/Datasources/Arango_Basic_Spec.ts
  3. cypress/e2e/Sanity/Datasources/AuthenticatedApiDatasource_spec.js
  4. cypress/e2e/Sanity/Datasources/AuthenticatedApiWithOAuth_spec.ts
  5. cypress/e2e/Sanity/Datasources/DSAutosaveImprovements_spec.ts
  6. cypress/e2e/Sanity/Datasources/DatasourceForm_spec.js
  7. cypress/e2e/Sanity/Datasources/ElasticSearchDatasource_spec.js
  8. cypress/e2e/Sanity/Datasources/GraphQL_spec.ts
  9. cypress/e2e/Sanity/Datasources/MongoDatasourceURI_spec.ts
  10. cypress/e2e/Sanity/Datasources/MsSQLDataSourceStub_spec.js
  11. cypress/e2e/Sanity/Datasources/MySQLDataSourceStub_spec.js
  12. cypress/e2e/Sanity/Datasources/MySQLNoiseTest_spec.js
  13. cypress/e2e/Sanity/Datasources/MySQL_spec.js
  14. cypress/e2e/Sanity/Datasources/Port_Number_Placeholder_Spec.ts
  15. cypress/e2e/Sanity/Datasources/PostgresDatasource_spec.js
  16. cypress/e2e/Sanity/Datasources/RedshiftDataSourceStub_spec.js
  17. cypress/e2e/Sanity/Datasources/RestApiDatasource_spec.js
  18. cypress/e2e/Sanity/Datasources/RestApiOAuth2Validation_spec.ts
  19. cypress/e2e/Sanity/Datasources/SMTPDatasource_spec.js
  20. cypress/e2e/Sanity/Datasources/Styles_spec.js
  21. cypress/e2e/Smoke/Apps/ReconnectDatasource_spec.js
List of identified flaky tests.
Thu, 22 Aug 2024 12:41:38 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

  • [ ] Yes
  • [x] No

Summary by CodeRabbit

  • New Features

    • Introduced a new Prettier plugin for automatic sorting of import statements to enhance code organization.

  • Improvements

    • Enhanced formatting rules for import statements to promote readability and maintainability in the codebase.
    • Structured order for imports now prioritizes specific modules for better organization.

alex-golovanov avatar Aug 16 '24 13:08 alex-golovanov

[!IMPORTANT]

Review skipped

More than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review.

214 files out of 294 files are above the max files limit of 75. Please upgrade to Pro plan to get higher limits.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The recent changes enhance code formatting capabilities in the client application by integrating the @trivago/prettier-plugin-sort-imports. This plugin organizes import statements in a specified order, improving code readability and maintainability. The configuration establishes a clear structure for imports, ensuring a systematic approach that benefits developer workflows while preserving existing application logic.

Changes

Files Change Summary
app/client/.prettierrc Introduced Prettier plugin for sorting imports; configured rules for import order and separation.
app/client/package.json Added @trivago/prettier-plugin-sort-imports dependency with version ^4.3.0.

Sequence Diagram(s)

sequenceDiagram
    participant Developer
    participant Prettier
    participant Codebase

    Developer->>Codebase: Write code with imports
    Developer->>Prettier: Run formatting command
    Prettier->>Codebase: Sort and organize imports
    Codebase->>Developer: Provide formatted code

Assessment against linked issues

Objective Addressed Explanation
Improve code organization and readability (#[35732]) ✅
Use Prettier for import sorting (#[35732]) ✅
Define a structured order for imports (#[35732]) ✅

Poem

In code we find a neat delight,
Imports sorted, all aligned just right.
With Prettier’s gentle hand,
Our files now gracefully stand.
A cleaner flow, a joyful sight! ✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Aug 16 '24 13:08 coderabbitai[bot]

@alex-golovanov Before merging, there is necessary to run the prettier with new settings so that the new changes are reflected in the code.

I'm not so sure about this, this will modify almost all src files, I'd rather do a gradual transfer through lint-staged.

alex-golovanov avatar Aug 19 '24 10:08 alex-golovanov

@alex-golovanov Before merging, there is necessary to run the prettier with new settings so that the new changes are reflected in the code.

I'm not so sure about this, this will modify almost all src files, I'd rather do a gradual transfer through lint-staged.

Yes, it will be so. But that's okay. It seems there is nothing terrible to do it in 1 time.

Also, if this is not done, then you will need to make changes to these pipelines. Снимок экрана 2024-08-19 в 14 16 53

KelvinOm avatar Aug 19 '24 11:08 KelvinOm

@alex-golovanov Before merging, there is necessary to run the prettier with new settings so that the new changes are reflected in the code.

I'm not so sure about this, this will modify almost all src files, I'd rather do a gradual transfer through lint-staged.

Yes, it will be so. But that's okay. It seems there is nothing terrible to do it in 1 time.

Also, if this is not done, then you will need to make changes to these pipelines. Снимок экрана 2024-08-19 в 14 16 53

Ok, no worries, formatted everything.

alex-golovanov avatar Aug 19 '24 11:08 alex-golovanov

@alex-golovanov Before merging, there is necessary to run the prettier with new settings so that the new changes are reflected in the code.

I'm not so sure about this, this will modify almost all src files, I'd rather do a gradual transfer through lint-staged.

Yes, it will be so. But that's okay. It seems there is nothing terrible to do it in 1 time. Also, if this is not done, then you will need to make changes to these pipelines. Снимок экрана 2024-08-19 в 14 16 53

Ok, no worries, formatted everything.

Spoke to soon, there is a problem with EE.

Pre push hook called
URL is [email protected]:appsmithorg/appsmith.git
remote is origin
remote sha is 
pushing from 88c0241f39a298f3457b77b955fc17d16fd14ca4 to 24816450c2f1e5f9f73fec1bcba9994b31f78c4a
local ref is  refs/heads/chore/35732-prettier-import-sort
remote ref is  refs/heads/chore/35732-prettier-import-sort
to_commit in function is 24816450c2f1e5f9f73fec1bcba9994b31f78c4a
from_commit is 88c0241f39a298f3457b77b955fc17d16fd14ca4
File 'app/client/src/ee/AppRouter.tsx' matches the string 'app/client/src/ee'
Found EE changes in the commits

Hook process exited.

How do you solve things like these? @KelvinOm

alex-golovanov avatar Aug 19 '24 12:08 alex-golovanov

@alex-golovanov Before merging, there is necessary to run the prettier with new settings so that the new changes are reflected in the code.

I'm not so sure about this, this will modify almost all src files, I'd rather do a gradual transfer through lint-staged.

Yes, it will be so. But that's okay. It seems there is nothing terrible to do it in 1 time. Also, if this is not done, then you will need to make changes to these pipelines. Снимок экрана 2024-08-19 в 14 16 53

Ok, no worries, formatted everything.

Spoke to soon, there is a problem with EE.

Pre push hook called
URL is [email protected]:appsmithorg/appsmith.git
remote is origin
remote sha is 
pushing from 88c0241f39a298f3457b77b955fc17d16fd14ca4 to 24816450c2f1e5f9f73fec1bcba9994b31f78c4a
local ref is  refs/heads/chore/35732-prettier-import-sort
remote ref is  refs/heads/chore/35732-prettier-import-sort
to_commit in function is 24816450c2f1e5f9f73fec1bcba9994b31f78c4a
from_commit is 88c0241f39a298f3457b77b955fc17d16fd14ca4
File 'app/client/src/ee/AppRouter.tsx' matches the string 'app/client/src/ee'
Found EE changes in the commits

Hook process exited.

How do you solve things like these? @KelvinOm

Make changes to EE repo and then use the yarn sync-ee-to-ce script to create a commit in CE repo. Read more about this here.

Remember that the script only moves changes from the src folder, so something will need to be moved manually.

KelvinOm avatar Aug 19 '24 12:08 KelvinOm

Make changes to EE repo and then use the yarn sync-ee-to-ce script to create a commit in CE repo. Read more about this here.

Remember that the script only moves changes from the src folder, so something will need to be moved manually.

It seems that this script is not geared towards something as drastic as this, so my proposal is to avoid formatting all files and go with gradual lint-staged adoption. This can be easily force merged without any consequences for EE or CE.

alex-golovanov avatar Aug 20 '24 09:08 alex-golovanov

⚠️ Cyclic Dependency Check:

This PR has increased the number of cyclic dependencies by 245, when compared with the release branch.

Refer this document to identify the cyclic dependencies introduced by this PR.

github-actions[bot] avatar Aug 20 '24 12:08 github-actions[bot]

⚠️ Cyclic Dependency Check:

This PR has increased the number of cyclic dependencies by 50, when compared with the release branch.

Refer this document to identify the cyclic dependencies introduced by this PR.

github-actions[bot] avatar Aug 22 '24 08:08 github-actions[bot]

⚠️ Cyclic Dependency Check:

This PR has increased the number of cyclic dependencies by 50, when compared with the release branch.

Refer this document to identify the cyclic dependencies introduced by this PR.

github-actions[bot] avatar Aug 22 '24 09:08 github-actions[bot]

⚠️ Cyclic Dependency Check:

This PR has increased the number of cyclic dependencies by 50, when compared with the release branch.

Refer this document to identify the cyclic dependencies introduced by this PR.

github-actions[bot] avatar Aug 22 '24 12:08 github-actions[bot]

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

github-actions[bot] avatar Sep 10 '24 16:09 github-actions[bot]