feat(ws): initial commit for frontend (#19)

* feat: client ui frontend scaffolding

In this PR:
- UI frontend scaffolding
- Github Action for frontend and backend

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>

* Changes requested by code review

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

* Fixing icons

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

---------

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

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

@@ -0,0 +1,35 @@
+name: UI - BFF - Test and Build
+on:
+  push:
+    branches: [ "main", "notebooks-v2", "v*-branch" ]
+  pull_request:
+    paths: [ "workspaces/backend/**" ]
+    branches: [ "main", "notebooks-v2", "v*-branch" ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version-file: workspaces/backend/go.mod
+          check-latest: true
+          cache-dependency-path: workspaces/backend/go.sum
+
+      - name: Build
+        working-directory: workspaces/backend
+        run: make build
+
+      - name: Check if there are uncommitted file changes
+        working-directory: workspaces/backend
+        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

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

@@ -0,0 +1,45 @@
+name: UI - Frontend - Test and Build
+on:
+  push:
+    branches: [ "main", "notebooks-v2", "v*-branch" ]
+  pull_request:
+    paths: [ "workspaces/frontend/**" ]
+    branches: [ "main", "notebooks-v2", "v*-branch" ]
+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: workspaces/frontend
+        run: npm install
+
+      - name: Run tests
+        working-directory: workspaces/frontend
+        run: npm run test:coverage
+
+      - name: Clean
+        working-directory: workspaces/frontend
+        run: npm run clean
+
+      - name: Build
+        working-directory: workspaces/frontend
+        run: npm run build
+
+      - name: Check if there are uncommitted file changes
+        working-directory: workspaces/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

workspaces/backend/README.md

@@ -1,5 +1,5 @@
 # Kubeflow Workspaces Backend
-The Kubeflow Workspaces Backend is the _backend for frontend_ (BFF) used by the Kubeflow Workspaces UI as part of [Kubeflow Notebooks 2.0](https://github.com/kubeflow/kubeflow/issues/7156).
+The Kubeflow Workspaces Backend is the _backend for frontend_ (BFF) used by the Kubeflow Workspaces Frontend as part of [Kubeflow Notebooks 2.0](https://github.com/kubeflow/kubeflow/issues/7156).
 
 > ⚠️ __Warning__ ⚠️
 >

workspaces/frontend/.gitignore

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

workspaces/frontend/README.md

@@ -0,0 +1,43 @@
+# Kubeflow Workspaces Frontend
+The Kubeflow Workspaces Frontend is the web user interface used to monitor and manage Kubeflow Workspaces as part of [Kubeflow Notebooks 2.0](https://github.com/kubeflow/kubeflow/issues/7156).
+
+> ⚠️ __Warning__ ⚠️
+>
+> The Kubeflow Workspaces Frontend is a work in progress and is __NOT__ currently ready for use.
+> We greatly appreciate any contributions.
+
+
+## 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
+```

workspaces/frontend/__mocks__/styleMock.js

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

workspaces/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'
+};