Add prettier and pre-commit hook

.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
 ```
-