chore: Make Feast UI importable as a NPM Module (#2370)

* Make FeastUI publishable as NPM Module Signed-off-by: Tony Chu <[email protected]> * Fixes tests Signed-off-by: Tony Chu <[email protected]> * Add Feature Flags as Config Signed-off-by: Tony Chu <[email protected]> * Update package.json Signed-off-by: Tony Chu <[email protected]> * Make where to fetch projects configurable. Signed-off-by: Tony Chu <[email protected]> * Match Feast's License Signed-off-by: Tony Chu <[email protected]> * Better error messages for missing Project List Signed-off-by: Tony Chu <[email protected]> * Fix typo and remove gitignore Signed-off-by: Tony Chu <[email protected]> * Add customization instructions to the README Signed-off-by: Tony Chu <[email protected]> * Add back tests and document publishing Signed-off-by: Tony Chu <[email protected]>
feast-dev · Mar 23, 2022 · 45db6dc · 45db6dc
1 parent ab5daae
commit 45db6dc
Show file tree

Hide file tree

Showing 80 changed files with 2,928 additions and 2,013 deletions.
diff --git a/infra/scripts/release/files_to_bump.txt b/infra/scripts/release/files_to_bump.txt
@@ -9,4 +9,5 @@ infra/charts/feast/charts/feature-server/values.yaml
 infra/charts/feast/README.md
 infra/charts/feast-python-server/Chart.yaml
 infra/charts/feast-python-server/README.md
-java/pom.xml
+java/pom.xml
+ui/package.json
diff --git a/ui/.babelrc.js b/ui/.babelrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [["@babel/preset-env"], ["@babel/preset-react"]],
+};
diff --git a/ui/PUBLISHING_TO_NPM.md b/ui/PUBLISHING_TO_NPM.md
@@ -0,0 +1,13 @@
+# Publishing the Feast Package to NPM
+
+The Feast UI is published as a module to NPM and can be found here: https://www.npmjs.com/package/@feast-dev/feast-ui
+
+To publish a new version of the module, you will need to be part of the @feast-dev team in NPM. Ask Tony to add you if necessary. You will also need to [login to your NPM account on the command line](https://docs.npmjs.com/cli/v8/commands/npm-adduser).
+
+## Steps for Publishing
+
+1. Make sure tests are passing. Run tests with `yarn tests` in the ui directory.
+2. Bump the version number in `package.json` as appropriate.
+3. Package the modules for distributions. Run the library build script with `yarn build:lib`. We use [Rollup](https://rollupjs.org/) for building the module, and the configs are in the `rollup.config.js` file.
+4. Publish the package to NPM. Run `npm publish`
+5. [Check NPM to see that the package was properly publish](https://www.npmjs.com/package/@feast-dev/feast-ui).
diff --git a/ui/README.md b/ui/README.md
@@ -16,46 +16,135 @@ available for the rest of the UI.
 - `src/custom-tabs` includes sample custom tabs. This is a WIP plugin system where users can inject their own tabs and 
 data to the UI.
 
+## Usage
+
+There are two modes of usage: importing the UI as a module, or running the entire build as a React app.
+
+### Importing the UI as a module
+
+This is the recommended way to use Feast UI for teams maintaining their own internal UI for their deployment of Feast.
+
+Start with bootstrapping a React app with `create-react-app`
 
-## Available Scripts
+```
+npx create-react-app your-feast-ui
+```
 
-In the project directory, you can run:
+Then, in your app folder, install Feast UI and its peer dependencies. Assuming you use yarn
 
-### `yarn start`
+```
+yarn add @feast-dev/feast-ui
+yarn add @elastic/eui @elastic/datemath @emotion/react moment prop-types inter-ui react-query react-router-dom use-query-params zod typescript query-string d3 @types/d3
+```
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Edit `index.js` in the React app to use Feast UI.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
 
-### `yarn test`
+import FeastUI from "@feast-dev/feast-ui";
+import "@feast-dev/feast-ui/dist/feast-ui.css";
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+ReactDOM.render(
+  <React.StrictMode>
+    <FeastUI />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+```
+
+When you start the React app, it will look for `project-list.json` to find a list of your projects. The JSON should looks something like this.
+
+```json
+{
+  "projects": [
+    {
+      "name": "Credit Score Project",
+      "description": "Project for credit scoring team and associated models.",
+      "id": "credit_score_project",
+      "registryPath": "/registry.json"
+    },
+  ]
+}
+```
+
+```
+// Start the React App
+yarn start
+```
+
+#### Customization
+
+The advantage of importing Feast UI as a module is in the ease of customization. The `<FeastUI>` component exposes a `feastUIConfigs` prop thorough which you can customize the UI. Currently it supports a few parameters.
+
+##### Fetching the Project List
 
-### `yarn build`
+You can use `projectListPromise` to provide a promise that overrides where the Feast UI fetches the project list from.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+```jsx
+<FeastUI
+  feastUIConfigs={{
+    projectListPromise: fetch(SOME_PATH, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }).then((res) => {
+      return res.json();
+    })
+  }}
+/>
+```
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+##### Custom Tabs
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+You can add custom tabs for any of the core Feast objects through the `tabsRegistry`.
 
-### `yarn eject`
+```
+const tabsRegistry = {
+  RegularFeatureViewCustomTabs: [
+    {
+      label: "Custom Tab Demo", // Navigation Label for the tab
+      path: "demo-tab", // Subpath for the tab
+      Component: RFVDemoCustomTab, // a React Component
+    },
+  ]
+}
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+<FeastUI
+  feastUIConfigs={{
+    tabsRegistry: tabsRegistry,
+  }}
+/>
+```
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+Examples of custom tabs can be found in the `/custom-tabs` folder.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+### Alternative: Run this Repo
+
+If you would like to simply try things out and see how the UI works, you can simply run the code in this repo. First:
+
+### `yarn install` 
+
+That will install the all the dependencies that the UI needs, as well as development dependencies. Then in the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-## Learn More
+## On React and Create React App
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+This project was bootstrapped with Create React App, and uses its scripts to simplify UI development. You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
diff --git a/ui/package.json b/ui/package.json
@@ -1,37 +1,58 @@
 {
-  "name": "feast-ui",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
+  "name": "@feast-dev/feast-ui",
+  "version": "0.19.0",
+  "private": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/feast-ui.cjs",
+  "module": "./dist/feast-ui.module.js",
+  "peerDependencies": {
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^50.0.0",
-    "@emotion/react": "^11.8.1",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
+    "@elastic/eui": "^46.1.0",
+    "@emotion/react": "^11.7.1",
     "@types/d3": "^7.1.0",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
     "d3": "^7.3.0",
     "inter-ui": "^3.19.3",
     "moment": "^2.29.1",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-query": "^3.34.16",
+    "react-query": "^3.34.12",
+    "react-router-dom": "6",
+    "react-scripts": "^5.0.0",
+    "typescript": "^4.4.2",
+    "use-query-params": "^1.2.3",
+    "zod": "^3.11.6"
+  },
+  "dependencies": {
+    "@elastic/datemath": "^5.0.3",
+    "@elastic/eui": "^46.1.0",
+    "@emotion/react": "^11.7.1",
+    "@types/d3": "^7.1.0",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "d3": "^7.3.0",
+    "inter-ui": "^3.19.3",
+    "moment": "^2.29.1",
+    "prop-types": "^15.8.1",
+    "query-string": "^7.1.1",
+    "react-query": "^3.34.12",
     "react-router-dom": "6",
-    "react-scripts": "5.0.0",
-    "typescript": "^4.6.2",
+    "react-scripts": "^5.0.0",
     "use-query-params": "^1.2.3",
-    "web-vitals": "^2.1.4",
-    "zod": "^3.13.4"
+    "zod": "^3.11.6"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build:lib": "rimraf ./dist && tsc && rollup -c",
+    "build:lib-dev": "rimraf ./dist && tsc && rollup -c && yalc publish -f",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -59,6 +80,43 @@
     ]
   },
   "devDependencies": {
-    "msw": "^0.38.2"
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "msw": "^0.36.8",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.68.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-import-css": "^3.0.2",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-svgo": "^1.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.2"
+  },
+  "description": "Web UI for the [Feast Feature Store](https://feast.dev/)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/feast-dev/feast.git"
+  },
+  "keywords": [
+    "Feast",
+    "Feature",
+    "Store"
+  ],
+  "author": "[email protected]",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/feast-dev/feast/issues"
   }
 }
diff --git a/ui/public/manifest.json b/ui/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Feast UI",
+  "name": "Feast UI",
   "icons": [
     {
       "src": "favicon.ico",