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

[UI] feat: Setup prettier and moved lint-staged to its own file #8827

Merged
merged 4 commits into from
Sep 24, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
28 changes: 15 additions & 13 deletions ui/.babelrc
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"
]
}
]
}
]
}
2 changes: 1 addition & 1 deletion ui/.eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ package-lock.json
nodemon.json
lib/
cypress/
pages/_document.js
**/__generated__/**
133 changes: 47 additions & 86 deletions ui/.eslintrc.js
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',
Copy link
Contributor

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?

Copy link
Contributor Author

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.

Copy link
Contributor Author

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

'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',
},
};
};
7 changes: 7 additions & 0 deletions ui/.lintstagedrc.js
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(' ')}`,
};
14 changes: 14 additions & 0 deletions ui/.prettierignore
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__/**
12 changes: 12 additions & 0 deletions ui/.prettierrc.yml
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
25 changes: 15 additions & 10 deletions ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The 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>
4 changes: 2 additions & 2 deletions ui/api/connections.js
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');
};
13 changes: 6 additions & 7 deletions ui/api/index.js
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;