Setup branding to be configurable during the build

Refactor and enhance branding capabilities.  Now branding is included
from a single directory that contains at least `strings.json`,
`manifest.json`, and `favicon.ico`.  Any other assets may be placed
in the directory and will be copied to the bundled app.

Change summary:
  - Move Konveyor branding assets to a project top-level branding
    directory

  - Remove MTA branding assets

  - Remove profile/branding constants from `env` and client module

  - Embed branding strings and assets in the common module
    - `strings.json` is templated to allow the build to adjust asset
      URL path roots as necessary
    - `brandingAssetPath()`

  - server's index.html generation sources the template strings from
    the common module's branding strings

  - HeaderApp support brand definitions

  - client about and masthead to use 'useBranding' hook

  - `BRANDING` as a relative path is computed from the project root

  - webpack build source branding assets directly from the common module

  - Unit tests, snapshots and jest configs updated as necessary

Jest changes:
  - Use `react-i18next` mock from `client/__mocks__` as a more robust
    mock borrowed from react-i18n repos

  - Move `setupTests.ts` into `client/src/app/test-config` to keep jest
    test config code all in the same directory

Related changes:
  - Upgrade rollup to v4, add new rollup plugins (copy, virtual)

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>

client/public/manifest.json → branding/manifest.json

@@ -1,6 +1,6 @@
 {
- "short_name": "tackle-ui",
- "name": "Tackle UI",
+ "short_name": "konveyor-ui",
+ "name": "Konveyor UI",
  "icons": [
  {
  "src": "favicon.ico",

branding/strings.json

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

client/__mocks__/react-i18next.js

@@ -0,0 +1,65 @@
+/* eslint-env node */
+
+// Adapted from https://github.com/i18next/react-i18next/blob/master/example/test-jest/src/__mocks__/react-i18next.js
+import React from "react";
+import * as reactI18next from "react-i18next";
+
+const hasChildren = (node) =>
+ node && (node.children || (node.props && node.props.children));
+
+const getChildren = (node) =>
+ node && node.children ? node.children : node.props && node.props.children;
+
+const renderNodes = (reactNodes) => {
+ if (typeof reactNodes === "string") {
+ return reactNodes;
+ }
+
+ return Object.keys(reactNodes).map((key, i) => {
+ const child = reactNodes[key];
+ const isElement = React.isValidElement(child);
+
+ if (typeof child === "string") {
+ return child;
+ }
+ if (hasChildren(child)) {
+ const inner = renderNodes(getChildren(child));
+ return React.cloneElement(child, { ...child.props, key: i }, inner);
+ }
+ if (typeof child === "object" && !isElement) {
+ return Object.keys(child).reduce(
+ (str, childKey) => `${str}${child[childKey]}`,
+ ""
+ );
+ }
+
+ return child;
+ });
+};
+
+const useMock = [(k) => k, { changeLanguage: () => new Promise(() => {}) }];
+useMock.t = (k) => k;
+useMock.i18n = { changeLanguage: () => new Promise(() => {}) };
+
+module.exports = {
+ // Note: Ignoring "withTranslation" HOC. We don't use it.
+
+ Trans: ({ children, i18nKey }) =>
+ !children
+ ? i18nKey
+ : Array.isArray(children)
+ ? renderNodes(children)
+ : renderNodes([children]),
+
+ Translation: ({ children }) => children((k) => k, { i18n: {} }),
+
+ useTranslation: () => useMock,
+
+ // mock if needed
+ I18nextProvider: reactI18next.I18nextProvider,
+ initReactI18next: reactI18next.initReactI18next,
+ setDefaults: reactI18next.setDefaults,
+ getDefaults: reactI18next.getDefaults,
+ setI18n: reactI18next.setI18n,
+ getI18n: reactI18next.getI18n,
+};

client/config/jest.config.ts

@@ -23,6 +23,9 @@ const config: JestConfigWithTsJest = {
  "@patternfly/react-icons/dist/esm/icons/":
  "<rootDir>/__mocks__/fileMock.js",
 
+ // other mocks
+ "react-i18next": "<rootDir>/__mocks__/react-i18next.js",
+
  // match the paths in tsconfig.json
  "@app/(.*)": "<rootDir>/src/app/$1",
  "@assets/(.*)":
@@ -44,7 +47,7 @@ const config: JestConfigWithTsJest = {
  },
 
  // Code to set up the testing framework before each test file in the suite is executed
- setupFilesAfterEnv: ["<rootDir>/src/app/setupTests.ts"],
+ setupFilesAfterEnv: ["<rootDir>/src/app/test-config/setupTests.ts"],
 };
 
 export default config;

client/config/webpack.common.ts

@@ -1,15 +1,18 @@
 import path from "path";
 import { Configuration } from "webpack";
-// import CaseSensitivePathsWebpackPlugin from "case-sensitive-paths-webpack-plugin";
 import CopyPlugin from "copy-webpack-plugin";
 import Dotenv from "dotenv-webpack";
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
 import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 
+import { brandingAssetPath } from "@konveyor-ui/common";
 import { LANGUAGES_BY_FILE_EXTENSION } from "./monacoConstants";
 
-const BG_IMAGES_DIRNAME = "images";
 const pathTo = (relativePath: string) => path.resolve(__dirname, relativePath);
+const brandingPath = brandingAssetPath();
+const manifestPath = path.resolve(brandingPath, "manifest.json");
+
+const BG_IMAGES_DIRNAME = "images";
 
 const config: Configuration = {
  entry: {
@@ -150,22 +153,26 @@ const config: Configuration = {
  exports: "xmllint",
  },
  },
- // For monaco-editor-webpack-plugin
+ {
+ test: /\.yaml$/,
+ use: "raw-loader",
+ },
+
+ // For monaco-editor-webpack-plugin --->
  {
  test: /\.css$/,
  include: [pathTo("../../node_modules/monaco-editor")],
  use: ["style-loader", "css-loader"],
  },
- // For monaco-editor-webpack-plugin
  {
  test: /\.ttf$/,
  type: "asset/resource",
  },
+ // <--- For monaco-editor-webpack-plugin
  ],
  },
 
  plugins: [
- // new CaseSensitivePathsWebpackPlugin(),
  new Dotenv({
  systemvars: true,
  silent: true,
@@ -174,15 +181,19 @@ const config: Configuration = {
  patterns: [
  {
  from: pathTo("../public/locales"),
- to: pathTo("../dist/locales"),
+ to: "./locales/",
  },
  {
- from: pathTo("../public/manifest.json"),
- to: pathTo("../dist/manifest.json"),
+ from: pathTo("../public/templates"),
+ to: "./templates/",
  },
  {
- from: pathTo("../public/templates"),
- to: pathTo("../dist/templates"),
+ from: manifestPath,
+ to: ".",
+ },
+ {
+ from: brandingPath,
+ to: "./branding/",
  },
  ],
  }),

client/config/webpack.dev.ts

@@ -2,7 +2,6 @@ import path from "path";
 import { mergeWithRules } from "webpack-merge";
 import type { Configuration as WebpackConfiguration } from "webpack";
 import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
-
 import CopyPlugin from "copy-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import ReactRefreshTypeScript from "react-refresh-typescript";
@@ -14,12 +13,14 @@ import {
  KONVEYOR_ENV,
  SERVER_ENV_KEYS,
  proxyMap,
+ brandingStrings,
+ brandingAssetPath,
 } from "@konveyor-ui/common";
 import { stylePaths } from "./stylePaths";
 import commonWebpackConfiguration from "./webpack.common";
 
-const brandType = KONVEYOR_ENV.PROFILE;
 const pathTo = (relativePath: string) => path.resolve(__dirname, relativePath);
+const faviconPath = path.resolve(brandingAssetPath(), "favicon.ico");
 
 interface Configuration extends WebpackConfiguration {
  devServer?: DevServerConfiguration;
@@ -75,10 +76,6 @@ const config: Configuration = mergeWithRules({
  include: [...stylePaths],
  use: ["style-loader", "css-loader"],
  },
- {
- test: /\.yaml$/,
- use: "raw-loader",
- },
  ],
  },
 
@@ -96,15 +93,16 @@ const config: Configuration = mergeWithRules({
  },
  ],
  }),
+
  // index.html generated at compile time to inject `_env`
  new HtmlWebpackPlugin({
  filename: "index.html",
  template: pathTo("../public/index.html.ejs"),
  templateParameters: {
  _env: encodeEnv(KONVEYOR_ENV, SERVER_ENV_KEYS),
- brandType,
+ branding: brandingStrings,
  },
- favicon: pathTo(`../public/${brandType}-favicon.ico`),
+ favicon: faviconPath,
  minify: {
  collapseWhitespace: false,
  keepClosingSlash: true,

client/config/webpack.prod.ts

@@ -5,12 +5,12 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 
-import { KONVEYOR_ENV } from "@konveyor-ui/common";
+import { brandingAssetPath } from "@konveyor-ui/common";
 import { stylePaths } from "./stylePaths";
 import commonWebpackConfiguration from "./webpack.common";
 
-const brandType = KONVEYOR_ENV.PROFILE;
 const pathTo = (relativePath: string) => path.resolve(__dirname, relativePath);
+const faviconPath = path.resolve(brandingAssetPath(), "favicon.ico");
 
 const config = merge<Configuration>(commonWebpackConfiguration, {
  mode: "production",
@@ -36,10 +36,6 @@ const config = merge<Configuration>(commonWebpackConfiguration, {
  include: [...stylePaths],
  use: [MiniCssExtractPlugin.loader, "css-loader"],
  },
- {
- test: /\.yaml$/,
- use: "raw-loader",
- },
  ],
  },
 
@@ -56,11 +52,12 @@ const config = merge<Configuration>(commonWebpackConfiguration, {
  new webpack.EnvironmentPlugin({
  NODE_ENV: "production",
  }),
+
  // index.html generated at runtime via the express server to inject `_env`
  new HtmlWebpackPlugin({
  filename: "index.html.ejs",
  template: `!!raw-loader!${pathTo("../public/index.html.ejs")}`,
- favicon: pathTo(`../public/${brandType}-favicon.ico`),
+ favicon: faviconPath,
  minify: {
  collapseWhitespace: false,
  keepClosingSlash: true,

client/public/index.html.ejs

@@ -1,15 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
  <head>
- <% if (brandType == 'mta') { %>
- <title>Migration Toolkit for Applications</title>
- <meta name="description" content="MTA UI" />
- <meta id="appName" name="application-name" content="MTA UI" />
- <% } else { %>
- <title>Konveyor</title>
- <meta name="description" content="Konveyor/Tackle UI" />
- <meta id="appName" name="application-name" content="Konveyor Tackle UI" />
- <% } %>
+ <title><%= branding.application.title %></title>
+ <meta name="description" content="<%= branding.application.description %>" />
+ <meta id="appName" name="application-name" content="<%= branding.application.name %>" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />

client/public/locales/en/translation.json

@@ -1,8 +1,8 @@
 {
  "about": {
  "about": "About",
- "bottom1": "{{brandType}} is a project within the",
- "bottom2": "For more information, refer to",
+ "bottom1": "{{brandType}} is a project within the <2>Konveyor community</2>.",
+ "bottom2": "For more information, refer to <1>{{brandType}} documentation</1>.",
  "description": "{{brandType}} allows users to maintain their portfolio of applications with a full set of metadata and to assess their suitability for modernization leveraging a questionnaire based approach.",
  "iconLibrary": "The Icon Library used in this project is a derivative of the <2>Standard Icons library</2> by <5>Red Hat</5>, used under <8>CC BY 4.0</8>",
  "introduction": "{{brandType}} is a collection of tools that supports large-scale application modernization and migration projects to Kubernetes."

client/src/app/Constants.ts

@@ -12,14 +12,8 @@ import {
 import { EffortEstimate, ProposedAction, Risk } from "@app/api/models";
 import { ENV } from "./env";
 
-export enum BrandType {
- Konveyor = "konveyor",
- MTA = "mta",
-}
-
 export const isAuthRequired = ENV.AUTH_REQUIRED !== "false";
 export const uploadLimit = ENV.UI_INGRESS_PROXY_BODY_SIZE || "500m";
-export const APP_BRAND = ENV.PROFILE as BrandType;
 export const isRWXSupported = ENV.RWX_SUPPORTED === "true";
 
 export const DEFAULT_SELECT_MAX_HEIGHT = 200;

client/src/app/hooks/useBranding.ts

@@ -0,0 +1,12 @@
+import { BrandingStrings, brandingStrings } from "@konveyor-ui/common";
+
+/**
+ * Wrap the branding strings in a hook so components access it in a standard
+ * React way instead of a direct import. This allows the branding implementation
+ * to change in future with a minimal amount of refactoring in existing components.
+ */
+export const useBranding = (): BrandingStrings => {
+ return brandingStrings;
+};
+
+export default useBranding;