Add frontend skeleton

.github/workflows/frontend.yml

@@ -0,0 +1,37 @@
+name: frontend
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+env:
+  CI: true
+
+jobs:
+  test:
+    name: test
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - name: Verify package-lock.json
+        run: ./scripts/verify_lock.mjs
+      - name: Install
+        run: npm clean-install --ignore-scripts
+      - name: Lint sources
+        run: npm run lint
+      - name: Build
+        run: npm run build
+      - name: Test
+        run: npm run test -- --coverage --watchAll=false

frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+*/dist/

frontend/.editorconfig

@@ -0,0 +1,13 @@
+root=true
+
+[*]
+# standard prettier behaviors
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Configurable prettier behaviors
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

frontend/.eslintrc.cjs

@@ -0,0 +1,94 @@
+/* eslint-env node */
+
+module.exports = {
+  root: true,
+
+  env: {
+    browser: true,
+    es2020: true,
+    jest: true,
+  },
+
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020, // keep in sync with tsconfig.json
+    sourceType: "module",
+  },
+
+  // eslint-disable-next-line prettier/prettier
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier",
+  ],
+
+  // eslint-disable-next-line prettier/prettier
+  plugins: [
+    "prettier",
+    "unused-imports", // or eslint-plugin-import?
+    "@typescript-eslint",
+    "react",
+    "react-hooks",
+    "@tanstack/query",
+  ],
+
+  // NOTE: Tweak the rules as needed when bulk fixes get merged
+  rules: {
+    // TODO: set to "error" when prettier v2 to v3 style changes are fixed
+    "prettier/prettier": ["warn"],
+
+    // TODO: set to "error" when all resolved, but keep the `argsIgnorePattern`
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+
+    // TODO: each one of these can be removed or set to "error" when they're all resolved
+    "unused-imports/no-unused-imports": ["warn"],
+    "@typescript-eslint/ban-types": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "react/jsx-key": "warn",
+    "react-hooks/rules-of-hooks": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-extra-boolean-cast": "warn",
+    "prefer-const": "warn",
+
+    // Allow the "cy-data" property for trustification-ui-test (but should really be "data-cy" w/o this rule)
+    "react/no-unknown-property": ["error", { ignore: ["cy-data"] }],
+
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/prefer-query-object-syntax": "error",
+  },
+
+  settings: {
+    react: { version: "detect" },
+  },
+
+  ignorePatterns: [
+    // don't ignore dot files so config files get linted
+    "!.*.js",
+    "!.*.cjs",
+    "!.*.mjs",
+
+    // take the place of `.eslintignore`
+    "dist/",
+    "generated/",
+    "node_modules/",
+  ],
+
+  // this is a hack to make sure eslint will look at all of the file extensions we
+  // care about without having to put it on the command line
+  overrides: [
+    {
+      files: [
+        "**/*.js",
+        "**/*.jsx",
+        "**/*.cjs",
+        "**/*.mjs",
+        "**/*.ts",
+        "**/*.tsx",
+      ],
+    },
+  ],
+};

frontend/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+/.pnp
+.pnp.js
+
+# testing
+coverage/
+
+# production
+dist/
+/qa/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+
+.eslintcache
+
+# VSCode
+.vscode/*
+
+# Intellij IDEA
+.idea/

frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

frontend/.prettierignore

@@ -0,0 +1,12 @@
+# Library, IDE and build locations
+**/node_modules/
+**/coverage/
+**/dist/
+.vscode/
+.idea/
+.eslintcache/
+
+#
+# NOTE: Could ignore anything that eslint will look at since eslint also applies
+#       prettier.
+#

frontend/.prettierrc.mjs

@@ -0,0 +1,14 @@
+/** @type {import("prettier").Config} */
+const config = {
+  trailingComma: "es5", // es5 was the default in prettier v2
+  semi: true,
+  singleQuote: false,
+
+  // Values used from .editorconfig:
+  //   - printWidth == max_line_length
+  //   - tabWidth == indent_size
+  //   - useTabs == indent_style
+  //   - endOfLine == end_of_line
+};
+
+export default config;

frontend/Dockerfile

@@ -0,0 +1,38 @@
+# Builder image
+FROM registry.access.redhat.com/ubi9/nodejs-18:latest as builder
+
+USER 1001
+COPY --chown=1001 . .
+RUN npm clean-install && npm run build && npm run dist
+
+# Runner image
+FROM registry.access.redhat.com/ubi9/nodejs-18-minimal:latest
+
+# Add ps package to allow liveness probe for k8s cluster
+# Add tar package to allow copying files with kubectl scp
+USER 0
+RUN microdnf -y install tar procps-ng && microdnf clean all
+
+USER 1001
+
+LABEL name="trustification/trustification-ui" \
+      description="Trustification - User Interface" \
+      help="For more information visit https://trustification.github.io/" \
+      license="Apache License 2.0" \
+      maintainer="[email protected]" \
+      summary="Trustification - User Interface" \
+      url="https://quay.io/repository/trustification/trustification-ui" \
+      usage="podman run -p 80 -v trustification/trustification-ui:latest" \      
+      io.k8s.display-name="trustification-ui" \
+      io.k8s.description="Trustification - User Interface" \
+      io.openshift.expose-services="80:http" \
+      io.openshift.tags="operator,trustification,ui,nodejs18" \
+      io.openshift.min-cpu="100m" \
+      io.openshift.min-memory="350Mi"
+
+COPY --from=builder /opt/app-root/src/dist /opt/app-root/dist/
+
+ENV DEBUG=1
+
+WORKDIR /opt/app-root/dist
+ENTRYPOINT ["./entrypoint.sh"]

frontend/README.md

@@ -1 +1,27 @@
-# Where the frontend lives.
+## dev-env
+
+Install dependencies:
+
+```shell
+npm clean-install --ignore-scripts
+```
+
+Init the dev server:
+
+```shell
+npm run start:dev
+```
+
+Open brower at http://localhost:3000
+
+## Environment variables
+
+| ENV VAR                | Description                   | Defaul value                         |
+| ---------------------- | ----------------------------- | ------------------------------------ |
+| TRUSTIFICATION_HUB_URL | Set Trustification API URL    | http://localhost:8080                |
+| AUTH_REQUIRED          | Enable/Disable authentication | false                                |
+| OIDC_CLIENT_ID         | Set Oidc Client               | frontend                             |
+| OIDC_SERVER_URL        | Set Oidc Server URL           | http://localhost:8090/realms/chicken |
+| OIDC_Scope             | Set Oidc Scope                | openid                               |
+| ANALYTICS_ENABLED      | Enable/Disable analytics      | false                                |
+| ANALYTICS_WRITE_KEY    | Set Segment Write key         | null                                 |

frontend/branding/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "trustification-ui",
+  "name": "Trustification UI",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/branding/strings.json

@@ -0,0 +1,21 @@
+{
+  "application": {
+    "title": "Trustification",
+    "name": "Trustification UI",
+    "description": "Trustification UI"
+  },
+  "about": {
+    "displayName": "Trustification",
+    "imageSrc": "<%= brandingRoot %>/images/masthead-logo.svg",
+    "documentationUrl": "https://trustification.io/"
+  },
+  "masthead": {
+    "leftBrand": {
+      "src": "<%= brandingRoot %>/images/masthead-logo.svg",
+      "alt": "brand",
+      "height": "40px"
+    },
+    "leftTitle": null,
+    "rightBrand": null
+  }
+}