refactor(config-ui): adjust the eslint and prettier rules (apache#4071)

* refactor(config-ui): adjust the eslint and prettier rules

* refactor(config-ui): format code

* feat(config-ui): add lint-staged and husky for format code

config-ui/.babelrc.js

@@ -17,10 +17,6 @@
  */
 
 module.exports = {
-  presets: [
-    '@babel/preset-env',
-    '@babel/preset-react',
-    '@babel/preset-typescript'
-  ],
-  plugins: ['@babel/plugin-transform-runtime']
-}
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+  plugins: ['@babel/plugin-transform-runtime'],
+};

config-ui/.eslintignore

@@ -0,0 +1,18 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+dist
+node_modules

config-ui/src/plugins/common/transformation/config/jenkins.ts → config-ui/.eslintrc.js

@@ -16,7 +16,12 @@
  *
  */
 
-export default {
-  productionPattern: '',
-  deploymentPattern: ''
-}
+module.exports = {
+  extends: ['react-app', 'react-app/jest', 'prettier'],
+  plugins: ['header', 'prettier'],
+  rules: {
+    'prettier/prettier': 'warn',
+    'header/header': ['error', '.file-headerrc'],
+    'react-hooks/exhaustive-deps': 'off',
+  },
+};

config-ui/.husky/pre-commit

@@ -0,0 +1,21 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd config-ui && npm run lint-staged

config-ui/.prettierignore

@@ -12,4 +12,7 @@
 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 # See the License for the specific language governing permissions and
 # limitations under the License.
-#
+#
+
+dist
+node_modules

config-ui/.prettierrc.js

@@ -17,15 +17,7 @@
  */
 
 module.exports = {
-  printWidth: 80,
+  printWidth: 120,
   singleQuote: true,
-  singleAttributePerLine: false,
-  jsxSingleQuote: true,
-  trailingComma: 'none',
-  semi: false,
-  bracketSpacing: true,
-  useTabs: false,
-  tabWidth: 2,
-  bracketSameLine: false,
-  arrowParens: 'always'
-}
+  trailingComma: 'all',
+};

config-ui/README.md

@@ -3,47 +3,59 @@
 The **Config-UI Application** is a **React.js** SPA (Single-Page-Application) that manages the setup and configuration of a **DevLake** Instance.
 
 #### Technology / Stack Overview
+
 - React.js
 - BlueprintJS
 - Webpack
 
 ## Development
+
 In order to develop on this project you will need a properly working **React Development Environment**.
 
 ### Environment Setup
+
 Install Package Dependencies before attempting to start the UI. The application will not start unless all packages are installed without errors.
 
 #### Install NPM Dependencies
+
 ```
 [config-ui@main] $> npm -i
 ```
 
 #### Start Development Server
+
 ❗ Please ensure the **DevLake API** is **online** before starting the **UI**, otherwise the application will remain in offline mode and errors will be displayed.
 
 ```
 [config-ui@main] $> npm start
 ```
+
 Server will listen on `http://localhost:4000`
 
 #### Production Build
+
 To Build static and minified production assets to the `dist/` directory.
+
 ```
 [config-ui@main] $> npm run build
 ```
 
 #### TEST / RUN Production Build
+
 Build production assets and listen to emulate a production environment. This is to verify minified bundled/assets are operating correctly.
+
 ```
 [config-ui@main] $> npm run start-production
 ```
+
 Server will listen on `http://localhost:9000`
 
 For actual production use, the **Docker Image** for Config-UI should be used as outlined in the main project README.md
 
 ## Plugin Registration
 
 ### Step 1. Create Registry JSON Configuration
+
 Depending on the nature of the plugin, see a similar integration in `registry/plugins/` folder and copy as base template. For example, to model after GitHub copy `registry/plugins/github.json` to a uniquely named JSON registry file.
 
 ```
@@ -61,7 +73,7 @@ Since not all Plugins created may have **UI** capabilities, the `type` property
 - pipeline
 - webhook
 
-The **Enabled** property (`enabled`) must be set to `true` to allow the plugin the be registered. 
+The **Enabled** property (`enabled`) must be set to `true` to allow the plugin the be registered.
 
 ```
 # Sample Config for "Merico" Plugin
@@ -81,7 +93,9 @@ The **Enabled** property (`enabled`) must be set to `true` to allow the plugin t
 ```
 
 ### Step 2. Register the JSON Configuration
-Next, the new plugin needs to be registered with the **Integrations Manager Hook** (`@hooks/useIntegrations.jsx`). 
+
+Next, the new plugin needs to be registered with the **Integrations Manager Hook** (`@hooks/useIntegrations.jsx`).
+
 1. Import the new Plugin JSON File
 2. Add Plugin to the bottom of `pluginRegistry` Array
 
@@ -129,13 +143,13 @@ export default function MericoSettings(props) {
 
   return (
     <>
-     
+
     </>
   )
 }
 ```
 
-3. Import & **Register Provider Transformation Settings** in `components/blueprints/ProviderTransformationSettings.jsx`.  Update the `TransformationComponents` Map to Load the Plugin
+3. Import & **Register Provider Transformation Settings** in `components/blueprints/ProviderTransformationSettings.jsx`. Update the `TransformationComponents` Map to Load the Plugin
 
 ```jsx
 # components/blueprints/ProviderTransformationSettings.jsx
@@ -145,7 +159,7 @@ import GiteeSettings from '@/pages/configure/settings/gitee'
 # Import/Register Merico Plugin
 + import MericoSettings from '@/pages/configure/settings/merico'
 
-const ProviderTransformationSettings = (props) => { 
+const ProviderTransformationSettings = (props) => {
   ...
   ...
   ...