Merge pull request #102 from kubeflow/main

[pull] main from kubeflow:main

.github/workflows/ui-frontend-build.yml

@@ -23,13 +23,9 @@ jobs:
         working-directory: clients/ui/frontend
         run: npm install
 
-      - name: Run tests
-        working-directory: clients/ui/frontend
-        run: npm run test:coverage
-
       - name: Clean
         working-directory: clients/ui/frontend
-        run: npm run clean
+        run: npm run build:clean
 
       - name: Build
         working-directory: clients/ui/frontend

clients/ui/frontend/CONTRIBUTING.md

@@ -0,0 +1,41 @@
+[dev setup documentation]: docs/dev-setup.md#requirements
+
+# Contributing
+
+Contributing encompasses repository specific requirements.
+
+## Requirements
+
+To review the requirements, please refer to the [dev setup documentation].
+
+## Writing code
+
+### Running locally
+
+The recommended flow for development is to have two sessions, one for the "frontend":
+
+```bash
+npm run start:dev
+```
+
+And one for the "backend":
+
+```bash
+cd ../bff
+docker compose -f docker-compose.yaml up
+```
+
+Once you have both services ready, you can open the dashboard locally at: `http://localhost:4010`. The dev server will reload automatically when you make changes.
+
+
+## Debugging and Testing
+
+[TBD]
+
+## Environment variables
+
+[TBD]
+
+### Building your image
+
+[TBD]

clients/ui/frontend/README.md

@@ -1,38 +1,21 @@
+[contributing guidelines]: CONTRIBUTING.md
+[Dev setup & Requirements]: docs/dev-setup.md
+[Model Registry UI documentation]: docs/README.md
+[issue]: https://github.com/kubeflow/model-registry/issues/new/choose
+
 # Kubeflow Model Registry UI
 
 The Kubeflow Model Registry UI is a standalone web app for Kubeflow Model Registry.
 
-## Pre-requisites:
-
-TBD
-
-## Development
-
-```sh
-# Install development/build dependencies
-npm install
-
-# Start the development server
-npm run start:dev
-
-# Run a production build (outputs to "dist" dir)
-npm run build
-
-# Run the test suite
-npm run test
+## Contributing:
 
-# Run the test suite with coverage
-npm run test:coverage
+Individual bug fixes are welcome, it is recommended that you create a bug [issue] at the same time to describe the fix you're applying. If you are unsure how best to solve it, start with the issue and note your desire to contribute.
 
-# Run the linter
-npm run lint
+We do have some [contributing guidelines] you can follow.
 
-# Run the code formatter
-npm run format
+## Documentation
 
-# Launch a tool to inspect the bundle size
-npm run bundle-profile:analyze
+Read more about the Model Registry UI in one of our documentation links.
 
-# Start the express server (run a production build first)
-npm run start
-```
+* [Dev setup & Requirements]
+* [Model Registry UI documentation]

clients/ui/frontend/config/stylePaths.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const relativeDir = path.resolve(__dirname, '..');
+module.exports = {
+  stylePaths: [
+    path.resolve(relativeDir, 'src'),
+    path.resolve(relativeDir, 'node_modules/patternfly'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/patternfly'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-styles/css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+  ]
+};

clients/ui/frontend/webpack.common.js → clients/ui/frontend/config/webpack.common.js

@@ -7,6 +7,7 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const BG_IMAGES_DIRNAME = 'bgimages';
 const ASSET_PATH = process.env.ASSET_PATH || '/';
+const relativeDir = path.resolve(__dirname, '..');
 module.exports = (env) => {
   return {
     module: {
@@ -29,11 +30,11 @@ module.exports = (env) => {
           // only process modules with this loader
           // if they live under a 'fonts' or 'pficon' directory
           include: [
-            path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon')
+            path.resolve(relativeDir, 'node_modules/patternfly/dist/fonts'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/fonts'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/pficon')
           ]
         },
         {
@@ -74,21 +75,21 @@ module.exports = (env) => {
         {
           test: /\.(jpg|jpeg|png|gif)$/i,
           include: [
-            path.resolve(__dirname, 'src'),
-            path.resolve(__dirname, 'node_modules/patternfly'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
+            path.resolve(relativeDir, 'src'),
+            path.resolve(relativeDir, 'node_modules/patternfly'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/images'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-styles/css/assets/images'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
             path.resolve(
-              __dirname,
+              relativeDir,
               'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'
             ),
             path.resolve(
-              __dirname,
+              relativeDir,
               'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'
             ),
             path.resolve(
-              __dirname,
+              relativeDir,
               'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images'
             )
           ],
@@ -107,12 +108,12 @@ module.exports = (env) => {
     },
     output: {
       filename: '[name].bundle.js',
-      path: path.resolve(__dirname, 'dist'),
+      path: path.resolve(relativeDir, 'dist'),
       publicPath: ASSET_PATH
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, 'src', 'index.html')
+        template: path.resolve(relativeDir, 'src', 'index.html')
       }),
       new Dotenv({
         systemvars: true,
@@ -126,7 +127,7 @@ module.exports = (env) => {
       extensions: ['.js', '.ts', '.tsx', '.jsx'],
       plugins: [
         new TsconfigPathsPlugin({
-          configFile: path.resolve(__dirname, './tsconfig.json')
+          configFile: path.resolve(relativeDir, './tsconfig.json')
         })
       ],
       symlinks: false,

clients/ui/frontend/webpack.dev.js → clients/ui/frontend/config/webpack.dev.js

@@ -6,6 +6,7 @@ const common = require('./webpack.common.js');
 const { stylePaths } = require('./stylePaths');
 const HOST = process.env.HOST || 'localhost';
 const PORT = process.env.PORT || '9000';
+const relativeDir = path.resolve(__dirname, '..');
 
 module.exports = merge(common('development'), {
   mode: 'development',
@@ -16,7 +17,7 @@ module.exports = merge(common('development'), {
     historyApiFallback: true,
     open: true,
     static: {
-      directory: path.resolve(__dirname, 'dist')
+      directory: path.resolve(relativeDir, 'dist')
     },
     client: {
       overlay: true

clients/ui/frontend/docs/README.md

@@ -0,0 +1,12 @@
+[Dev setup & Requirements]: dev-setup.md
+[Architecture]: architecture.md
+
+
+# Model Registry UI Documentation
+
+This is the general documentation of the Model Registry UI.
+
+## Developer Readmes
+
+* [Dev setup & Requirements]
+* [Architecture]

clients/ui/frontend/docs/architecture.md

@@ -0,0 +1,3 @@
+# Model Registry UI Architecture
+
+[TBD]

clients/ui/frontend/docs/dev-setup.md

@@ -0,0 +1,53 @@
+# Dev Setup
+
+## Requirements
+
+This project requires the following tools to be installed on your system:
+
+- [NodeJS and NPM](https://nodejs.org/)
+  - Node recommended version -> `18.16.0`
+  - NPM recommended version -> `9.6.7`
+
+### Additional tooling
+
+[TBD]
+
+## Development
+
+1. Clone the repository
+
+      ``` bash
+      git clone https://github.com/kubeflow/model-registry
+      ```
+
+2. Within the repo context, install project dependencies
+
+     ```bash
+     cd model-registry/clients/ui/frontend && npm install
+     ```
+
+### Build project
+
+```bash
+npm run build
+```
+
+### Serve development content
+
+This is the default context for running a local UI.  Make sure you build the project using the instructions above prior to running the command below.
+
+```bash
+npm run start
+```
+
+For in-depth local run guidance review the [contribution guidelines](../CONTRIBUTING.md).
+
+### Testing
+
+Run the tests.
+
+  ```bash
+  npm run test
+  ```
+
+For in-depth testing guidance review the [testing guidelines](./testing.md)

clients/ui/frontend/docs/testing.md

@@ -0,0 +1,3 @@
+# Model Registry UI Testing
+
+[TBD]