feat: client ui frontend scaffolding (kubeflow#148)

In this PR:
- UI frontend scaffolding
- Github Action

Most of the content of this PR is extract from https://github.com/patternfly/patternfly-react-seed/tree/v6. Thank you so much patternfly team for the seed!

Signed-off-by: Eder Ignatowicz <ignatowicz@gmail.com>

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

@@ -0,0 +1,48 @@
+name: UI - Frontend - Test and Build
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+    paths-ignore:
+      - 'LICENSE*'
+      - 'DOCKERFILE*'
+      - '**.gitignore'
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        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
+
+      - name: Build
+        working-directory: clients/ui/frontend
+        run: npm run build
+
+      - name: Check if there are uncommitted file changes
+        working-directory: clients/ui/frontend
+        run: |
+          clean=$(git status --porcelain)
+          if [[ -z "$clean" ]]; then
+              echo "Empty git status --porcelain: $clean"
+          else
+              echo "Uncommitted file changes detected: $clean"
+              git diff
+              exit 1
+          fi

.gitignore

@@ -40,3 +40,6 @@ __pycache__
 # Protoc files
 include/
 readme.txt
+
+#OSX files
+**/.DS_Store

clients/ui/frontend/.gitignore

@@ -0,0 +1,8 @@
+**/node_modules
+dist
+yarn-error.log
+yarn.lock
+stats.json
+coverage
+.idea
+.env

clients/ui/frontend/README.md

@@ -0,0 +1,38 @@
+# 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
+
+# Run the test suite with coverage
+npm run test:coverage
+
+# Run the linter
+npm run lint
+
+# Run the code formatter
+npm run format
+
+# Launch a tool to inspect the bundle size
+npm run bundle-profile:analyze
+
+# Start the express server (run a production build first)
+npm run start
+```

clients/ui/frontend/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

clients/ui/frontend/jest.config.js

@@ -0,0 +1,32 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  // Automatically clear mock calls and instances between every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: false,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage',
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  moduleDirectories: [
+    'node_modules',
+    '<rootDir>/src'
+  ],
+
+  // A map from regular expressions to module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '@app/(.*)': '<rootDir>/src/app/$1'
+  },
+
+  // A preset that is used as a base for Jest's configuration
+  preset: 'ts-jest/presets/js-with-ts',
+
+  // The test environment that will be used for testing.
+  testEnvironment: 'jsdom'
+};