feat: add environment configuration files for frontend

workspaces/frontend/.env

@@ -0,0 +1,4 @@
+LOGO=logo-light-theme.svg
+LOGO_DARK=logo-dark-theme.svg
+FAVICON=favicon.ico
+PRODUCT_NAME="Notebooks"

workspaces/frontend/.env.cypress.mock

@@ -1,2 +1,7 @@
 # Test against prod build hosted by lightweight http server
 BASE_URL=http://localhost:9001
+DEPLOYMENT_MODE=standalone
+POLL_INTERVAL=9999999
+DIST_DIR=./dist
+URL_PREFIX=/
+PUBLIC_PATH=/

workspaces/frontend/.env.development

@@ -0,0 +1,3 @@
+APP_ENV=development
+DEPLOYMENT_MODE=standalone
+MOCK_API_ENABLED=true

workspaces/frontend/.env.production

@@ -0,0 +1 @@
+APP_ENV=production

workspaces/frontend/.gitignore

@@ -5,6 +5,5 @@ yarn.lock
 stats.json
 coverage
 .idea
-.env
 .vscode/*
-!.vscode/settings.json
+!.vscode/settings.json

workspaces/frontend/README.md

@@ -50,11 +50,7 @@ This is the default setup for running the UI locally. Make sure you build the pr
   npm run start:dev
   ```
 
-The command above requires the backend to be active in order to serve data. To run the UI independently, without establishing a connection to the backend, use the following command to start the application with a mocked API:
-
-  ```bash
-  npm run start:dev:mock
-  ```
+The command above starts the UI with mocked data by default, so you can run the application without requiring a connection to the backend. This behavior can be customized in the `.env.development` file by setting the `MOCK_API_ENABLED` environment variable to `false`.
 
 ### Testing
 

workspaces/frontend/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          chrome: 110,
+        },
+        useBuiltIns: 'usage',
+        corejs: '3',
+      },
+    ],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

workspaces/frontend/config/cspell-ignore-words.txt

@@ -5,4 +5,6 @@ jovyan
 millicores
 workspacekind
 workspacekinds
-healthcheck
+healthcheck
+pficon
+svgs

workspaces/frontend/config/dotenv.js

@@ -0,0 +1,191 @@
+const fs = require('fs');
+const path = require('path');
+const dotenv = require('dotenv');
+const dotenvExpand = require('dotenv-expand');
+const Dotenv = require('dotenv-webpack');
+
+/**
+ * Determine if the project is standalone or nested.
+ *
+ * @param {string} directory
+ * @returns {boolean}
+ */
+const getProjectIsRootDir = (directory) => {
+  const dotenvLocalFile = path.resolve(directory, '.env.local');
+  const dotenvFile = path.resolve(directory, '.env');
+  let localIsRoot;
+  let isRoot;
+
+  if (fs.existsSync(dotenvLocalFile)) {
+    const { IS_PROJECT_ROOT_DIR: DOTENV_LOCAL_ROOT } = dotenv.parse(
+      fs.readFileSync(dotenvLocalFile),
+    );
+    localIsRoot = DOTENV_LOCAL_ROOT;
+  }
+
+  if (fs.existsSync(dotenvFile)) {
+    const { IS_PROJECT_ROOT_DIR: DOTENV_ROOT } = dotenv.parse(fs.readFileSync(dotenvFile));
+    isRoot = DOTENV_ROOT;
+  }
+
+  return localIsRoot !== undefined ? localIsRoot !== 'false' : isRoot !== 'false';
+};
+
+/**
+ * Return tsconfig compilerOptions.
+ *
+ * @param {string} directory
+ * @returns {object}
+ */
+const getTsCompilerOptions = (directory) => {
+  const tsconfigFile = path.resolve(directory, './tsconfig.json');
+  let tsCompilerOptions = {};
+
+  if (fs.existsSync(tsconfigFile)) {
+    const { compilerOptions = { outDir: './dist', baseUrl: './src' } } = require(tsconfigFile);
+    tsCompilerOptions = compilerOptions;
+  }
+
+  return tsCompilerOptions;
+};
+
+/**
+ * Setup a webpack dotenv plugin config.
+ *
+ * @param {string} path
+ * @returns {*}
+ */
+const setupWebpackDotenvFile = (path) => {
+  const settings = {
+    systemvars: true,
+    silent: true,
+  };
+
+  if (path) {
+    settings.path = path;
+  }
+
+  return new Dotenv(settings);
+};
+
+/**
+ * Setup multiple webpack dotenv file parameters.
+ *
+ * @param {string} directory
+ * @param {string} env
+ * @param {boolean} isRoot
+ * @returns {Array}
+ */
+const setupWebpackDotenvFilesForEnv = ({ directory, env, isRoot = true }) => {
+  const dotenvWebpackSettings = [];
+
+  if (process.env.CY_MOCK) {
+    dotenvWebpackSettings.push(
+      setupWebpackDotenvFile(path.resolve(directory, `.env.cypress.mock`)),
+    );
+  }
+
+  if (env) {
+    dotenvWebpackSettings.push(
+      setupWebpackDotenvFile(path.resolve(directory, `.env.${env}.local`)),
+    );
+    dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, `.env.${env}`)));
+  }
+
+  dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '.env.local')));
+  dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '.env')));
+
+  if (!isRoot) {
+    if (env) {
+      dotenvWebpackSettings.push(
+        setupWebpackDotenvFile(path.resolve(directory, '..', `.env.${env}.local`)),
+      );
+      dotenvWebpackSettings.push(
+        setupWebpackDotenvFile(path.resolve(directory, '..', `.env.${env}`)),
+      );
+    }
+
+    dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '..', '.env.local')));
+    dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '..', '.env')));
+  }
+
+  return dotenvWebpackSettings;
+};
+
+/**
+ * Setup, and access, a dotenv file and the related set of parameters.
+ *
+ * @param {string} path
+ * @returns {*}
+ */
+const setupDotenvFile = (path) => {
+  const dotenvInitial = dotenv.config({ path });
+  dotenvExpand(dotenvInitial);
+};
+
+/**
+ * Setup and access local and specific dotenv file parameters.
+ *
+ * @param {string} env
+ */
+const setupDotenvFilesForEnv = ({ env }) => {
+  const RELATIVE_DIRNAME = path.resolve(__dirname, '..');
+  const IS_ROOT = getProjectIsRootDir(RELATIVE_DIRNAME);
+  const { baseUrl: TS_BASE_URL, outDir: TS_OUT_DIR } = getTsCompilerOptions(RELATIVE_DIRNAME);
+
+  if (process.env.CY_MOCK) {
+    setupDotenvFile(path.resolve(RELATIVE_DIRNAME, `.env.cypress.mock`));
+  }
+
+  if (!IS_ROOT) {
+    if (env) {
+      setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', `.env.${env}.local`));
+      setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', `.env.${env}`));
+    }
+
+    setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', '.env.local'));
+    setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '..', '.env'));
+  }
+
+  if (env) {
+    setupDotenvFile(path.resolve(RELATIVE_DIRNAME, `.env.${env}.local`));
+    setupDotenvFile(path.resolve(RELATIVE_DIRNAME, `.env.${env}`));
+  }
+
+  setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '.env.local'));
+  setupDotenvFile(path.resolve(RELATIVE_DIRNAME, '.env'));
+
+  const DEPLOYMENT_MODE = process.env.DEPLOYMENT_MODE || 'kubeflow';
+  const AUTH_METHOD = process.env.AUTH_METHOD || 'internal';
+  const IMAGES_DIRNAME = process.env.IMAGES_DIRNAME || 'images';
+  const PUBLIC_PATH = process.env.PUBLIC_PATH || '/workspaces';
+  const SRC_DIR = path.resolve(RELATIVE_DIRNAME, process.env.SRC_DIR || TS_BASE_URL || 'src');
+  const COMMON_DIR = path.resolve(RELATIVE_DIRNAME, process.env.COMMON_DIR || '../common');
+  const DIST_DIR = path.resolve(RELATIVE_DIRNAME, process.env.DIST_DIR || TS_OUT_DIR || 'dist');
+  const HOST = process.env.HOST || DEPLOYMENT_MODE === 'kubeflow' ? '0.0.0.0' : 'localhost';
+  const PORT = process.env.PORT || '9000';
+  const PROXY_PROTOCOL = process.env.PROXY_PROTOCOL || 'http';
+  const PROXY_HOST = process.env.PROXY_HOST || 'localhost';
+  const PROXY_PORT = process.env.PROXY_PORT || process.env.PORT || 4000;
+  const DEV_MODE = process.env.DEV_MODE || undefined;
+  const OUTPUT_ONLY = process.env._OUTPUT_ONLY === 'true';
+
+  process.env._RELATIVE_DIRNAME = RELATIVE_DIRNAME;
+  process.env._IS_PROJECT_ROOT_DIR = IS_ROOT;
+  process.env._IMAGES_DIRNAME = IMAGES_DIRNAME;
+  process.env._PUBLIC_PATH = PUBLIC_PATH;
+  process.env._SRC_DIR = SRC_DIR;
+  process.env._COMMON_DIR = COMMON_DIR;
+  process.env._DIST_DIR = DIST_DIR;
+  process.env._HOST = HOST;
+  process.env._PORT = PORT;
+  process.env._PROXY_PROTOCOL = PROXY_PROTOCOL;
+  process.env._PROXY_HOST = PROXY_HOST;
+  process.env._PROXY_PORT = PROXY_PORT;
+  process.env._OUTPUT_ONLY = OUTPUT_ONLY;
+  process.env._DEV_MODE = DEV_MODE;
+  process.env._DEPLOYMENT_MODE = DEPLOYMENT_MODE;
+  process.env._AUTH_METHOD = AUTH_METHOD;
+};
+
+module.exports = { setupWebpackDotenvFilesForEnv, setupDotenvFilesForEnv };

workspaces/frontend/config/stylePaths.js

@@ -23,5 +23,6 @@ module.exports = {
       relativeDir,
       'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css',
     ),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-catalog-view-extension/dist/css'),
   ],
 };