-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
[UI] feat: Setup prettier and moved lint-staged to its own file #8827
Merged
Merged
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
The table of contents is too big for display.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,17 @@ | ||
{ | ||
"presets": ["next/babel"], | ||
"plugins": [ | ||
"relay", | ||
[ | ||
"istanbul", | ||
{ | ||
"exclude": [ | ||
"**/*.spec.js", | ||
"pages/_document.js" | ||
] | ||
} | ||
] | ||
"presets": [ | ||
"next/babel" | ||
], | ||
"plugins": [ | ||
"relay", | ||
[ | ||
"istanbul", | ||
{ | ||
"exclude": [ | ||
"**/*.spec.js", | ||
"pages/_document.js" | ||
] | ||
} | ||
] | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,4 +7,4 @@ package-lock.json | |
nodemon.json | ||
lib/ | ||
cypress/ | ||
pages/_document.js | ||
**/__generated__/** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,99 +1,60 @@ | ||
module.exports = { | ||
env : { | ||
browser : true, | ||
es6 : true, | ||
node : true, // tells the parser that we are using nodejs | ||
env: { | ||
browser: true, | ||
es6: true, | ||
node: true, // tells the parser that we are using nodejs | ||
}, | ||
|
||
settings : { | ||
react : { | ||
version : require("./package.json").dependencies.react, | ||
settings: { | ||
react: { | ||
version: require('./package.json').dependencies.react, | ||
}, | ||
}, | ||
extends : ["eslint:recommended", "plugin:react/recommended", "plugin:cypress/recommended", "next"], | ||
globals : { | ||
Atomics : "readonly", | ||
SharedArrayBuffer : "readonly", | ||
globalThis : "readonly", | ||
extends: [ | ||
'eslint:recommended', | ||
'plugin:react/recommended', | ||
'plugin:cypress/recommended', | ||
'next', | ||
'plugin:prettier/recommended', | ||
], | ||
globals: { | ||
Atomics: 'readonly', | ||
SharedArrayBuffer: 'readonly', | ||
globalThis: 'readonly', | ||
}, | ||
parser : "@babel/eslint-parser", | ||
parserOptions : { | ||
ecmaFeatures : { | ||
jsx : true, | ||
parser: '@babel/eslint-parser', | ||
parserOptions: { | ||
ecmaFeatures: { | ||
jsx: true, | ||
}, | ||
ecmaVersion : 2018, | ||
sourceType : "module", | ||
ecmaVersion: 2018, | ||
sourceType: 'module', | ||
}, | ||
plugins : ["react", "cypress"], | ||
rules : { | ||
"@next/next/no-img-element" : "off", | ||
// turn off next img/image warning | ||
"react-hooks/rules-of-hooks" : "warn", | ||
// warn about react-hooks | ||
"react-hooks/exhaustive-deps" : "off", | ||
// turn off react-hooks exhaustive-deps for now | ||
"jsx-a11y/alt-text" : "off", | ||
// turn off image alt text warning | ||
"valid-typeof" : "warn", | ||
// show warning for now | ||
"array-bracket-spacing" : ["error", "never"], | ||
"comma-style" : ["error"], | ||
"jsx-quotes" : ["error", "prefer-double"], | ||
"block-scoped-var" : "error", | ||
"keyword-spacing" : "error", | ||
"no-trailing-spaces" : "error", | ||
"object-curly-spacing" : ["error", "always"], | ||
"arrow-spacing" : [ | ||
"error", | ||
{ | ||
before : true, | ||
after : true, | ||
}, | ||
], | ||
"key-spacing" : [ | ||
"error", | ||
{ | ||
afterColon : true, | ||
beforeColon : true | ||
}, | ||
], | ||
"block-spacing" : "error", | ||
"brace-style" : ["error", "1tbs"], | ||
indent : [ | ||
"error", | ||
2, | ||
{ | ||
FunctionExpression : { | ||
parameters : "first", | ||
}, | ||
FunctionDeclaration : { | ||
parameters : "first", | ||
}, | ||
MemberExpression : 1, | ||
SwitchCase : 1, | ||
outerIIFEBody : 0, | ||
VariableDeclarator : { | ||
var : 2, | ||
let : 2, | ||
const : 3, | ||
}, | ||
ignoredNodes : ["TemplateLiteral"], | ||
}, | ||
], | ||
"react/react-in-jsx-scope" : "off", | ||
"no-undef" : "error", | ||
"react/jsx-uses-vars" : [2], | ||
"react/jsx-no-undef" : "error", | ||
"no-console" : 0, | ||
"no-unused-vars" : "error", | ||
"react/jsx-key" : "warn", | ||
"no-dupe-keys" : "error", | ||
"react/jsx-filename-extension" : [ | ||
plugins: ['react', 'cypress', 'prettier'], | ||
rules: { | ||
'@next/next/no-img-element': 'off', | ||
'react-hooks/rules-of-hooks': 'warn', | ||
'react-hooks/exhaustive-deps': 'off', | ||
'jsx-a11y/alt-text': 'off', | ||
'valid-typeof': 'warn', | ||
'no-trailing-spaces': 'error', | ||
'block-spacing': 'error', | ||
'brace-style': ['error', '1tbs'], | ||
'react/react-in-jsx-scope': 'off', | ||
'no-undef': 'error', | ||
'react/jsx-uses-vars': [2], | ||
'react/jsx-no-undef': 'error', | ||
'no-console': 0, | ||
'no-unused-vars': 'error', | ||
'react/jsx-key': 'warn', | ||
'no-dupe-keys': 'error', | ||
'react/jsx-filename-extension': [ | ||
1, | ||
{ | ||
extensions : [".js", ".jsx"], | ||
extensions: ['.js', '.jsx'], | ||
}, | ||
], | ||
"react/prop-types" : "off", | ||
'react/prop-types': 'off', | ||
'prettier/prettier': 'warn', | ||
}, | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
module.exports = { | ||
// Lint & Prettify TS and JS files | ||
'**/*.(ts|tsx|js|jsx)': (filenames) => [`npm run lint`, `npm run format`], | ||
|
||
// Prettify only Markdown and JSON files | ||
'**/*.(md|json)': (filenames) => `npx prettier --write ${filenames.join(' ')}`, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
*.svg | ||
*.ico | ||
*.css | ||
|
||
*/.DS_Store | ||
assets/** | ||
.next | ||
package-lock.json | ||
public | ||
node_modules | ||
next-env.d.ts | ||
next.config.js | ||
.eslintrc.js | ||
**/__generated__/** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
arrowParens: always | ||
bracketSameLine: false | ||
bracketSpacing: true | ||
jsxSingleQuote: false | ||
proseWrap: preserve | ||
quoteProps: as-needed | ||
semi: true | ||
singleQuote: true | ||
tabWidth: 2 | ||
trailingComma: all | ||
printWidth: 100 | ||
useTabs: false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,36 +3,41 @@ | |
This guide is specific to the Meshery UI component and involves steps/methods one need to follow while working on issues related to Meshery UI. | ||
|
||
## How to run Meshery UI? | ||
|
||
Meshery UI can be built and run in different ways. You will choose one of the two ways to build and run Meshery UI depending upon whether you are actively developing it (whether you are creating a new feature or fixing a bug in Meshery UI) or whether you simply need to use it as a user. Let's refer to these two methods as a _Development Build_ and _User Build._ | ||
|
||
#### 1. User Build: | ||
|
||
For general usage, one can run Meshery UI using Meshery's command client `mesheryctl`, by simply running the `mesheryctl system start` command. | ||
If you don't have the `mesheryctl` tool installed already, you can follow the [mesheryctl installation docs](https://docs.meshery.io/installation/mesheryctl) to install `mesheryctl` using various `package management` tools supported. | ||
|
||
#### 2. Development Build: | ||
|
||
For purposes of actively developing Meshery UI, you first need to ensure you have npm v7 installed (`npm -v`) and if not install it (`npm -g i npm@7`), then install the dependencies using `make ui-setup` and then you can use either of the following approaches to build Meshery UI: | ||
|
||
1. Follow the procedure mentioned in Step 1 (User build) above, and start Meshery UI sever on the 9081 port, and login to Meshery UI using either of the providers mentioned on the login page. Then, to run a development server of Meshery UI, install the dependencies using the command mentioned above, then execute `make ui` to run the livereload-nodemon server on port 3000. | ||
> **NOTE:** Please run the steps in order to avoid issues, as Meshery server should be running and logged-in before accessing the development server | ||
> on 3000 port. | ||
|
||
> **NOTE:** Its strongly recommended to use either [Node Version Manager](https://github.com/nvm-sh/nvm#node-version-manager---) in linux/mac os systems or [NVM for Windows](https://github.com/coreybutler/nvm-windows#nvm-for-windows) on Windows systems so single `nvm use` / `nvm install` simplifies installing and using correct node version locallly **(v18)**, see [NVM Intro](https://github.com/nvm-sh/nvm#intro) for details. Otherwise, you might experience issues during local `npm i` similar to [4674](https://github.com/meshery/meshery/issues/4674) due to how optional dependencies are resolved in npm v6. | ||
|
||
> **NOTE:** Please run the steps in order to avoid issues, as Meshery server should be running and logged-in before accessing the development server | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could we please have these notes added to one or more of the contributing docs on docs.meshery.io? |
||
> on 3000 port. | ||
|
||
> **NOTE:** Its strongly recommended to use either [Node Version Manager](https://github.com/nvm-sh/nvm#node-version-manager---) in linux/mac os systems or [NVM for Windows](https://github.com/coreybutler/nvm-windows#nvm-for-windows) on Windows systems so single `nvm use` / `nvm install` simplifies installing and using correct node version locallly **(v18)**, see [NVM Intro](https://github.com/nvm-sh/nvm#intro) for details. Otherwise, you might experience issues during local `npm i` similar to [4674](https://github.com/meshery/meshery/issues/4674) due to how optional dependencies are resolved in npm v6. | ||
|
||
1. **`make server`** - Alternatively, build all of Meshery UI's components upfront before serving the UI. Do this in two steps: | ||
- Execute `make ui-setup` to initialize your environment and then `make ui-build` to build and export all Meshery UI components. | ||
- Execute `make server` to serve the prebuilt components. | ||
This method doesn't provide a live reload server. You will have to build Meshery UI after making changes to the code and rerun these steps again in order to see those subsequent code changes reflected in the UI. | ||
> **NOTE:** If you are using this method, make sure you don't have Meshery already running on 9081 port, using `mesheryctl`. | ||
|
||
- Execute `make ui-setup` to initialize your environment and then `make ui-build` to build and export all Meshery UI components. | ||
- Execute `make server` to serve the prebuilt components. | ||
This method doesn't provide a live reload server. You will have to build Meshery UI after making changes to the code and rerun these steps again in order to see those subsequent code changes reflected in the UI. > **NOTE:** If you are using this method, make sure you don't have Meshery already running on 9081 port, using `mesheryctl`. | ||
|
||
## Tech stack used in Meshery-UI | ||
|
||
- Meshery UI uses NextJs to do server side rendering of ReactJS components. The folder `ui/components` contains all the ReactJS components involved in | ||
building Meshery UI. | ||
- MaterialUI is being used extensively for the visual components of Meshery UI. | ||
- Billboard.js library is being used to display various charts, and comparison graphs in Meshery UI. | ||
|
||
|
||
## Component naming convention | ||
|
||
For reference and easy code search, the components are named accordingly following the rule 'Meshery<Part of UI it involves>', for example: components | ||
involved in rendering the Results page of Meshery UI are named as 'MesheryResults.js', 'MesheryResultDialog.js', 'MesherySMIResults.js'. Please follow this convention if you are creating a new component. | ||
|
||
|
||
<p style="text-align: center"><em>If you'll like to go to the main Meshery Contributor guide <a href="../CONTRIBUTING.md">click here</a></em></p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
import { promisifiedDataFetch } from "../lib/data-fetch"; | ||
import { promisifiedDataFetch } from '../lib/data-fetch'; | ||
|
||
export const getConnectionStatusSummary = async () => { | ||
return await promisifiedDataFetch("/api/integrations/connections/status"); | ||
return await promisifiedDataFetch('/api/integrations/connections/status'); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,15 @@ | ||
import axios from "axios"; | ||
import axios from 'axios'; | ||
|
||
const instance = axios.create({ | ||
withCredentials : true // for pushing client-cookies in all requests to server | ||
withCredentials: true, // for pushing client-cookies in all requests to server | ||
}); | ||
|
||
instance.interceptors.response.use(response => { | ||
if (response.request.responseURL.includes("/auth/login")) { | ||
window.location = "/auth/login"; | ||
instance.interceptors.response.use((response) => { | ||
if (response.request.responseURL.includes('/auth/login')) { | ||
window.location = '/auth/login'; | ||
window.onbeforeunload = null; | ||
} | ||
return response; | ||
}); | ||
|
||
|
||
export default instance; | ||
export default instance; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nebula-aac All looks good though I have a question should be doing same for meshery cloud as we are not using next Image there too, and getting bunch of lint error on that or we should not silence it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Yashsharma1911 I have it turned off now because in using Image from Next, it requires the width and height to be used, and some of the images we have, we're doing without. It would be a good idea to turn it off in Meshery Cloud too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Yashsharma1911 can you approve again? I updated the lint staged to fix the linting at commits
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure