Add prettier and integrate it with eslint

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+build

.git-blame-ignore-revs

@@ -0,0 +1,11 @@
+# git-blame ignored revisions
+# To configure, run
+# git config blame.ignoreRevsFile .git-blame-ignore-revs
+# Requires Git > 2.23
+# See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
+
+# Applied Prettier on UI codebase
+fc85f4caf4e7c0de6a7589a0487b50f41ba1036f
+
+# Applied Prettier on TS/TSX files
+0493ad595c959aee577f2a5cfff3e034f59bb426

.github/workflows/pull_request_push_test.yml

@@ -4,19 +4,22 @@ on:
  push:
  branches: [main]
  paths-ignore:
- - 'docs/**'
- - '**/README.md'
+ - "docs/**"
+ - "**/README.md"
+
  pull_request:
  branches: [main]
  paths-ignore:
- - 'docs/**'
- - '**/README.md'
+ - "docs/**"
+ - "**/README.md"
+
  pull_request_target:
  branches: [main]
  types: [labeled, edited, opened, synchronize]
  paths-ignore:
- - 'docs/**'
- - '**/README.md'
+ - "docs/**"
+ - "**/README.md"
+
 jobs:
  sbt_test:
  runs-on: ubuntu-latest
@@ -32,6 +35,7 @@ jobs:
  distribution: "temurin"
  - name: Run tests
  run: sbt clean && sbt test
+
  python_lint:
  runs-on: ubuntu-latest
  if: github.event_name == 'push' || github.event_name == 'pull_request' || (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe to test'))
@@ -51,7 +55,7 @@ jobs:
  flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
  # exit-zero treats all errors as warnings. The GitHub editor is 127 chars wide
  flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics
- 
+
  databricks_test:
  runs-on: ubuntu-latest
  if: github.event_name == 'push' || github.event_name == 'pull_request' || (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe to test'))
@@ -119,10 +123,10 @@ jobs:
  pytest -n 6 feathr_project/test/
 
  azure_synapse_test:
-  # might be a bit duplication to setup both the azure_synapse test and databricks test, but for now we will keep those to accelerate the test speed
-  runs-on: ubuntu-latest
-  if: github.event_name == 'push' || github.event_name == 'pull_request' || (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe to test'))
-  steps:
+ # might be a bit duplication to setup both the azure_synapse test and databricks test, but for now we will keep those to accelerate the test speed
+ runs-on: ubuntu-latest
+ if: github.event_name == 'push' || github.event_name == 'pull_request' || (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe to test'))
+ steps:
  - uses: actions/checkout@v2
  with:
  ref: ${{ github.event.pull_request.head.sha }}
@@ -184,5 +188,3 @@ jobs:
  # skip databricks related test as we just ran the test; also seperate databricks and synapse test to make sure there's no write conflict
  # run in 4 parallel jobs to make the time shorter
  pytest -n 6 feathr_project/test/
-
-

.github/workflows/ui-check.yml

@@ -0,0 +1,39 @@
+name: Feathr UI Lint and Format Checks
+
+on:
+ push:
+ branches: [main]
+ paths:
+ - "ui/**/*"
+
+ pull_request:
+ branches: [main]
+ paths:
+ - "ui/**/*"
+
+ pull_request_target:
+ branches: [main]
+ paths:
+ - "ui/**/*"
+
+jobs:
+ eslint:
+ name: eslint
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: reviewdog/action-eslint@v1
+ with:
+ eslint_flags: "src/"
+ reporter: github-pr-review
+ workdir: ui
+
+ prettier:
+ name: prettier_code_formatter
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2 # Check out the repository first.
+ - uses: actionsx/prettier@v2
+ with:
+ # prettier CLI arguments.
+ args: --check ./ui/src

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

ui/.eslintrc

@@ -4,12 +4,17 @@
  "es6": true,
  "node": true
  },
+ "plugins": ["@typescript-eslint/eslint-plugin"],
  "extends": [
  // https://github.com/eslint/eslint/blob/main/conf/eslint-recommended.js
  "eslint:recommended",
  // https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
- "react-app"
+ "react-app",
+ // https://reactjs.org/docs/hooks-rules.html
+ "plugin:react-hooks/recommended",
+ "prettier"
  ],
+ "parser": "@typescript-eslint/parser",
  "parserOptions": {
  "ecmaVersion": 2018,
  "sourceType": "module"
@@ -19,9 +24,7 @@
  },
  "overrides": [
  {
- "files": [
- "**/*.ts?(x)"
- ],
+ "files": ["**/*.ts?(x)"],
  "rules": {}
  }
  ]

ui/.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+node_modules
+public
+package*.json

ui/.prettierrc

@@ -0,0 +1 @@
+{}

ui/README.md

@@ -1,10 +1,11 @@
 # Feathr Feature Store UI
 
-This directory hosts Feathr Feature Store UI code. 
+This directory hosts Feathr Feature Store UI code.
 
 ## Live Demo
 
-Check out the latest Feathr Feature Store UI live demo [here](https://aka.ms/feathrdemo), use one of following accounts when you are prompted to login: 
+Check out the latest Feathr Feature Store UI live demo [here](https://aka.ms/feathrdemo), use one of following accounts when you are prompted to login:
+
 - A work or school organization account, includes Office 365 subscribers.
 - Microsoft personal account, this means an account can access to Skype, Outlook.com, OneDrive, and Xbox LIVE.
 
@@ -28,12 +29,16 @@ npm start
 
 This should launch [http://localhost:3000](http://localhost:3000) on your web browser. The page will reload when you make code changes and save.
 
-#### [Optional] Override configurations for local development 
+#### [Optional] Override configurations for local development
+
 - **Point to a different backend endpoint**: by default, UI talks to live backend API at https://feathr-sql-registry.azurewebsites.net. To point to a custom backend API (e.g. running locally), create a .env.local in this directory and set REACT_APP_API_ENDPOINT, for example:
+
 ```
 REACT_APP_API_ENDPOINT=http://localhost:8080
 ```
+
 - **Use different authentication settings**: by default, UI authenticates with an Azure AD application with multiple tenants authentication enabled. To change to use a different Azure AD application, create a .env.local in this directory and set REACT_APP_AZURE_CLIENT_ID and REACT_APP_AZURE_TENANT_ID, for example:
+
 ```
 REACT_APP_AZURE_CLIENT_ID=<REPLACE_WITH_YOUR_AZURE_CLIENT_ID>
 REACT_APP_AZURE_TENANT_ID=<REPLACE_WITH_YOUR_TENANT_ID>
@@ -44,16 +49,29 @@ REACT_APP_AZURE_TENANT_ID=<REPLACE_WITH_YOUR_TENANT_ID>
 - For static file based deployment, run `npm run build` and upload `build/` to your server.
 - For docker image based deployment, run `docker -t <image_name> .` to build image and push to your container registry.
 
-### Lint
+### Linting & Formatting
+
+#### Linting
 
 To lint ts and tsx code, run:
+
 ```
 npm run lint:fix
 ```
 
 This command will Automatically fix all problems that can be fixed, and list the rest problems requires manual fix.
 Linting rules are configured in [.eslintrc](.eslintrc) file. [Read More](https://eslint.org/docs/rules/).
 
+#### Formatting
+
+[Prettier](https://prettier.io/) is being used to format the UI code. Currently, the [default options](https://prettier.io/docs/en/options.html) are being used.
+
+To format the code, run:
+
+```
+npm run format
+```
+
 ### Project Structure
 
 ```
@@ -64,4 +82,3 @@ src/
  pages // a view on the page, can be routed by url path
  router // url path and page mapping
 ```
-