Dashboard - Format files & enable linting

[sohel-rp]

Summary

Format all files from the dashboard & push them together. Also, enable linting for future commits.

Motivation

Files are being formatted and included in individual PRs even for a single liner change. So, formatting all files altogether and pushing them should reduce the review time.

Proposal

• Format files (some manually & remaining automatically using eslint CLI)
• Enable linting before committing for everyone
• Raise the PR

AB#353

[anupdhiran]

Gireesh can work on it

[OtherHorizon]

Hi,Is this issue still being worked on?

[sohel-rp]

Hi @OtherHorizon,

We haven't yet prioritized this ticket but yes we would like to fix this soon.
Let us know if you'd like to work on it. We'll help you start with some suggestions.

[OtherHorizon]

Sure, I would like to work on this issue. Suggestions are very much appreciated.

[sohel-rp]

Hey @OtherHorizon,
Here are some suggestions/pointers to get you started,

Formatting with Prettier

1. Codebase sync - Take the latest pull or clone for the fresh start
2. Run yarn or yarn install for the first time. Ignore if done already.
3. No additional installation steps required as prettier is already part of devDependencies & .prettierrc.js is also present that contains the preferences we use to format files.
4. Run the following commands to automatically check or format the files,

• Checks if files are formatted - yarn prettier --check src
• Format all supported files - yarn prettier --write src

Note: Running formatting command at root directory (/ src) might take some time to complete and there might be some wrong formatting for mixed conditions containing both && and ||, most likely to happen in tsx files. So you can,

• Create a feature branch. E.g. formatting-changes
• Start formatting files at child folder level something like,
  yarn prettier --write src/components/app
• Then verify the changes locally for conditions like mentioned above
• Commit the changes with meaningful commit message something like Formatted app details files and push the changes to feature branch

Setting up ESLint, Prettier & Husky

We already have .eslintrc.js, .prettierrc.js & .huskyrc.js in place, we just have to fix a couple of things & make these work inorder to enable linting on commit & also lint-fix command to auto fix the linting errors. You can refer official docs of prettier/eslint for more info.

Let know for any queries. Thanks 🙂

[sohel-rp]

Hi @OtherHorizon,
Did you get a chance to start on this? Anything I can help you with? 🙂

[OtherHorizon]

Hi @OtherHorizon, Did you get a chance to start on this? Anything I can help you with? 🙂

hi, sry for getting back so late. yarn --check after yarn install at child level doesn't work because Package.json doesn't exist. how should i proceed?

[sohel-rp]

Hi @OtherHorizon,

So were you trying to build - https://github.com/devtron-labs/devtron repo? Actually, this has to be done in https://github.com/devtron-labs/dashboard repo.

Let know if there's anything I can help you with.

[OtherHorizon]

Hi @OtherHorizon,

So were you trying to build - https://github.com/devtron-labs/devtron repo? Actually, this has to be done in https://github.com/devtron-labs/dashboard repo.

Let know if there's anything I can help you with.

Thanks i'll start working on now