Skip to content

Commit

Permalink
Merge pull request #8827 from meshery/feat/setup-prettier
Browse files Browse the repository at this point in the history
[UI] feat: Setup prettier and moved lint-staged to its own file
  • Loading branch information
nebula-aac committed Sep 24, 2023
2 parents 6640f6f + 8ffded1 commit 3903685
Show file tree
Hide file tree
Showing 330 changed files with 22,653 additions and 19,981 deletions.
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',
'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:fix`, `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
> 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;

0 comments on commit 3903685

Please sign in to comment.