@ampath/esm-dha-workflow-app 4.0.0-next.4

package/e2e/README.md

@@ -0,0 +1,115 @@
+# E2E Tests
+
+This directory contains an E2E test suite using the [Playwright](https://playwright.dev)
+framework. 
+
+## Getting Started
+
+Please ensure that you have followed the basic installation guide in the
+[root README](../README.md).
+Once everything is set up, make sure the dev server is running by using:
+
+```sh
+yarn start --sources 'packages/esm-*-app/'
+```
+Then, in a separate terminal, run:
+
+```sh
+yarn test-e2e --headed
+```
+
+By default, the test suite will run against the http://localhost:8080.
+You can override this by exporting `E2E_BASE_URL` environment variables beforehand:
+
+```sh
+# Ex: Set the server URL to dev3:
+export E2E_BASE_URL=https://dev3.openmrs.org/openmrs
+
+# Run all e2e tests:
+yarn test-e2e --headed
+```
+To run a specific test by title:
+```sh
+yarn test-e2e --headed -g "title of the test"
+```
+Check [this documentation](https://playwright.dev/docs/running-tests#command-line) for more running options.  
+
+It is also highly recommended to install the companion VS Code extension:
+https://playwright.dev/docs/getting-started-vscode
+
+
+## Writing New Tests
+
+In general, it is recommended to read through the official [Playwright docs](https://playwright.dev/docs/intro)
+before writing new test cases. The project uses the official Playwright test runner and,
+generally, follows a very simple project structure:
+
+```
+e2e
+|__ commands
+|   ^ Contains "commands" (simple reusable functions) that can be used in test cases/specs,
+|     e.g. generate a random patient.
+|__ core
+|   ^ Contains code related to the test runner itself, e.g. setting up the custom fixtures.
+|     You probably need to touch this infrequently.
+|__ fixtures
+|   ^ Contains fixtures (https://playwright.dev/docs/test-fixtures) which are used
+|     to run reusable setup/teardown tasks
+|__ pages
+|   ^ Contains page object model classes for interacting with the frontend.
+|     See https://playwright.dev/docs/test-pom for details.
+|__ specs
+|   ^ Contains the actual test cases/specs. New tests should be placed in this folder.
+|__ support
+    ^ Contains support files that requires to run e2e tests, e.g. docker compose files. 
+```
+
+When you want to write a new test case, start by creating a new spec in `./specs`.
+Depending on what you want to achieve, you might want to create new fixtures and/or
+page object models. To see examples, have a look at the existing code to see how these
+different concepts play together.
+
+## Open reports from GitHub Actions / Bamboo
+
+To download the report from the GitHub action/Bamboo plan, follow these steps:
+
+1. Go to the artifact section of the action/plan and locate the report file.
+2. Download the report file and unzip it using a tool of your choice.
+3. Open the index.html file in a web browser to view the report. 
+
+The report will show you a full summary of your tests, including information on which 
+tests passed, failed, were skipped, or were flaky. You can filter the report by browser 
+and explore the details of individual tests, including any errors or failures, video 
+recordings, and the steps involved in each test. Simply click on a test to view its details.
+
+## Debugging Tests
+
+Refer to [this documentation](https://playwright.dev/docs/debug) on how to debug a test.
+
+## Configuration
+
+This is very much underdeveloped/WIP. At the moment, there exists a (git-shared) `example.env`
+file which can be used for configuring certain test attributes. This is most likely
+about to change in the future. Stay tuned for updates!
+
+
+## Github Action integration
+The e2e.yml workflow is made up of two jobs: one for running on pull requests (PRs) and
+one for running on commits.
+
+1. When running on PRs, the workflow will start the dev server, use dev3.openmrs.org as the backend, 
+and run tests only on chromium. This is done in order to quickly provide feedback to the developer. 
+The tests are designed to generate their own data and clean up after themselves once they are finished. 
+This ensures that the tests will have minimum effect from changes made to dev3 by other developers. 
+In the future, we plan to use a docker container to run the tests in an isolated environment once we 
+figure out a way to spin up the container within a small amount of time.
+2. When running on commits, the workflow will spin up a docker container and run the dev server against
+it in order to provide a known and isolated environment. In addition, tests will be run on multiple 
+browsers (chromium, firefox, and WebKit) to ensure compatibility.
+
+## Troubleshooting tips
+
+On MacOS, you might run into the following error:
+```browserType.launch: Executable doesn't exist at /Users/<user>/Library/Caches/ms-playwright/chromium-1015/chrome-mac/Chromium.app/Contents/MacOS/Chromium```
+In order to fix this, you can attempt to force the browser reinstallation by running:
+```PLAYWRIGHT_BROWSERS_PATH=/Users/$USER/Library/Caches/ms-playwright npx playwright install```

package/e2e/core/global-setup.ts

@@ -0,0 +1,32 @@
+import { request } from '@playwright/test';
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+/**
+ * This configuration is to reuse the signed-in state in the tests
+ * by log in only once using the API and then skip the log in step for all the tests.
+ *
+ * https://playwright.dev/docs/auth#reuse-signed-in-state
+ */
+
+async function globalSetup() {
+  const requestContext = await request.newContext();
+  const token = Buffer.from(`${process.env.E2E_USER_ADMIN_USERNAME}:${process.env.E2E_USER_ADMIN_PASSWORD}`).toString(
+    'base64',
+  );
+  await requestContext.post(`${process.env.E2E_BASE_URL}/ws/rest/v1/session`, {
+    data: {
+      sessionLocation: process.env.E2E_LOGIN_DEFAULT_LOCATION_UUID,
+      locale: 'en',
+    },
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Basic ${token}`,
+    },
+  });
+  await requestContext.storageState({ path: 'e2e/storageState.json' });
+  await requestContext.dispose();
+}
+
+export default globalSetup;

package/e2e/core/index.ts

@@ -0,0 +1 @@
+export * from './test';

package/e2e/core/test.ts

@@ -0,0 +1,20 @@
+import { APIRequestContext, Page, test as base } from '@playwright/test';
+import { api } from '../fixtures';
+
+// This file sets up our custom test harness using the custom fixtures.
+// See https://playwright.dev/docs/test-fixtures#creating-a-fixture for details.
+// If a spec intends to use one of the custom fixtures, the special `test` function
+// exported from this file must be used instead of the default `test` function
+// provided by playwright.
+
+export interface CustomTestFixtures {
+  loginAsAdmin: Page;
+}
+
+export interface CustomWorkerFixtures {
+  api: APIRequestContext;
+}
+
+export const test = base.extend<CustomTestFixtures, CustomWorkerFixtures>({
+  api: [api, { scope: 'worker' }],
+});

package/e2e/fixtures/api.ts

@@ -0,0 +1,26 @@
+import { APIRequestContext, PlaywrightWorkerArgs, WorkerFixture } from '@playwright/test';
+
+/**
+ * A fixture which initializes an [`APIRequestContext`](https://playwright.dev/docs/api/class-apirequestcontext)
+ * that is bound to the configured OpenMRS API server. The context is automatically authenticated
+ * using the configured admin account.
+ *
+ * Use the request context like this:
+ * ```ts
+ * test('your test', async ({ api }) => {
+ *   const res = await api.get('patient/1234');
+ *   await expect(res.ok()).toBeTruthy();
+ * });
+ * ```
+ */
+export const api: WorkerFixture<APIRequestContext, PlaywrightWorkerArgs> = async ({ playwright }, use) => {
+  const ctx = await playwright.request.newContext({
+    baseURL: `${process.env.E2E_BASE_URL}/ws/rest/v1/`,
+    httpCredentials: {
+      username: process.env.E2E_USER_ADMIN_USERNAME,
+      password: process.env.E2E_USER_ADMIN_PASSWORD,
+    },
+  });
+
+  await use(ctx);
+};

package/e2e/fixtures/index.ts

@@ -0,0 +1 @@
+export * from './api';

package/e2e/pages/index.ts

@@ -0,0 +1 @@
+export * from './root-page';

package/e2e/pages/root-page.ts

@@ -0,0 +1,32 @@
+import type { Page, Locator } from '@playwright/test';
+
+export class RootPage {
+  readonly page: Page;
+  readonly welcomeHeading: Locator;
+  readonly configSection: Locator;
+  readonly extensionSection: Locator;
+  readonly dataFetchingSection: Locator;
+  readonly resourcesSection: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.welcomeHeading = page.getByRole('heading', { name: /welcome to the o3 template app/i });
+    this.configSection = page.getByRole('heading', { name: /configuration system/i });
+    this.extensionSection = page.getByRole('heading', { name: /extension system/i });
+    this.dataFetchingSection = page.getByRole('heading', { name: /data fetching/i });
+    this.resourcesSection = page.getByRole('heading', { name: /resources/i });
+  }
+
+  async goto() {
+    await this.page.goto('/openmrs/spa/root');
+    await this.welcomeHeading.waitFor();
+  }
+
+  async waitForPageLoad() {
+    await this.welcomeHeading.waitFor();
+    await this.configSection.waitFor();
+    await this.extensionSection.waitFor();
+    await this.dataFetchingSection.waitFor();
+    await this.resourcesSection.waitFor();
+  }
+}

package/e2e/specs/template-app.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+import { RootPage } from '../pages';
+
+test('Home app loads and displays all core components', async ({ page }) => {
+  const rootPage = new RootPage(page);
+  await rootPage.goto();
+
+  await expect(page).toHaveURL(/\/openmrs\/spa\/root/);
+
+  await expect(rootPage.welcomeHeading).toBeVisible();
+  await expect(
+    page.getByText('The following examples demonstrate some key features of the O3 framework'),
+  ).toBeVisible();
+
+  await expect(rootPage.configSection).toBeVisible();
+  await expect(rootPage.extensionSection).toBeVisible();
+  await expect(rootPage.dataFetchingSection).toBeVisible();
+  await expect(rootPage.resourcesSection).toBeVisible();
+
+  await expect(page.getByText(/hello world!/i)).toBeVisible(); // Configuration greeting tile content
+  await expect(page.locator('[data-extension-slot-name="Boxes"]')).toBeVisible(); // Extension boxes slot
+  await expect(page.getByRole('button', { name: /get a patient named 'test'/i })).toBeVisible();
+});

package/e2e/support/github/Dockerfile

@@ -0,0 +1,34 @@
+# syntax=docker/dockerfile:1.3
+FROM --platform=$BUILDPLATFORM node:22-alpine as dev
+
+ARG APP_SHELL_VERSION=next
+
+RUN mkdir -p /app
+WORKDIR /app
+
+COPY . .
+
+RUN npm_config_legacy_peer_deps=true npm install -g openmrs@${APP_SHELL_VERSION:-next}
+ARG CACHE_BUST
+RUN npm_config_legacy_peer_deps=true openmrs assemble --manifest --mode config --config spa-assemble-config.json --target ./spa
+
+FROM --platform=$BUILDPLATFORM openmrs/openmrs-reference-application-3-frontend:nightly as frontend
+FROM nginx:1.23-alpine
+
+RUN apk update && \
+  apk upgrade && \
+  # add more utils for sponge to support our startup script
+  apk add --no-cache moreutils
+
+# clear any default files installed by nginx
+RUN rm -rf /usr/share/nginx/html/*
+
+COPY --from=frontend /etc/nginx/nginx.conf /etc/nginx/nginx.conf
+# this assumes that NOTHING in the framework is in a subdirectory
+COPY --from=frontend /usr/share/nginx/html/* /usr/share/nginx/html/
+COPY --from=frontend /usr/local/bin/startup.sh /usr/local/bin/startup.sh
+RUN chmod +x /usr/local/bin/startup.sh
+
+COPY --from=dev /app/spa/ /usr/share/nginx/html/
+
+CMD ["/usr/local/bin/startup.sh"]

package/e2e/support/github/docker-compose.yml

@@ -0,0 +1,24 @@
+# This docker compose file is used to create a backend environment for the e2e.yml workflow.
+version: '3.7'
+
+services:
+  gateway:
+    image: openmrs/openmrs-reference-application-3-gateway:${TAG:-nightly}
+    ports:
+      - '8080:80'
+
+  frontend:
+    build:
+      context: .
+    environment:
+      SPA_PATH: /openmrs/spa
+      API_URL: /openmrs
+
+  backend:
+    image: openmrs/openmrs-reference-application-3-backend:nightly-with-data
+    depends_on:
+      - db
+
+  # MariaDB
+  db:
+    image: openmrs/openmrs-reference-application-3-db:nightly-with-data

package/e2e/support/github/run-e2e-docker-env.sh

@@ -0,0 +1,37 @@
+#!/usr/bin/env bash -eu
+
+# get the dir containing the script
+script_dir=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+# create a temporary working directory
+working_dir=$(mktemp -d "${TMPDIR:-/tmp/}openmrs-e2e-frontends.XXXXXXXXXX")
+# get the app name
+app_name=$(jq -r '.name' "$script_dir/../../../package.json")
+
+echo "Creating packed archive of the app..."
+# @openmrs/esm-whatever -> _openmrs_esm_whatever
+packed_app_name=$(echo "$app_name" | tr '[:punct:]' '_');
+# run yarn pack for our app and add it to the working directory
+yarn pack -o "$working_dir/$packed_app_name.tgz" >/dev/null;
+echo "Created packed app archives" 
+
+echo "Creating dynamic spa-assemble-config.json..."
+# dynamically assemble our list of frontend modules, prepending the login app and
+# primary navigation apps; apps will all be in the /app directory of the Docker
+# container
+jq -n \
+  --arg app_name "$app_name" \
+  --arg app_file "/app/$packed_app_name.tgz" \
+  '{"@openmrs/esm-primary-navigation-app": "next", "@openmrs/esm-home-app": "next"} + {
+    ($app_name): $app_file
+  }' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
+echo "Created dynamic spa-assemble-config.json"
+
+echo "Copying Docker configuration..."
+cp "$script_dir/Dockerfile" "$working_dir/Dockerfile"
+cp "$script_dir/docker-compose.yml" "$working_dir/docker-compose.yml"
+
+cd $working_dir
+echo "Starting Docker containers..."
+# CACHE_BUST to ensure the assemble step is always run
+docker compose build --build-arg CACHE_BUST=$(date +%s) frontend
+docker compose up -d

package/example.env

@@ -0,0 +1,6 @@
+# This is an example environment file for configuring dynamic values.
+E2E_BASE_URL=http://localhost:8080/openmrs
+E2E_USER_ADMIN_USERNAME=admin
+E2E_USER_ADMIN_PASSWORD=Admin123
+E2E_LOGIN_DEFAULT_LOCATION_UUID=44c3efb0-2583-4c80-a79e-1f756a03c0a1
+# The above location UUID is for the "Outpatient Clinic" location in the reference application

package/jest.config.js

@@ -0,0 +1,33 @@
+/**
+ * @returns {Promise<import('jest').Config>}
+ */
+const path = require('path');
+
+module.exports = {
+  collectCoverageFrom: [
+    '**/src/**/*.component.tsx',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/src/**/*.test.*',
+    '!**/src/declarations.d.ts',
+    '!**/e2e/**',
+  ],
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleNameMapper: {
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    'lodash-es': 'lodash',
+    '^dexie$': require.resolve('dexie'),
+    '^dayjs$': require.resolve('dayjs'),
+  },
+  setupFilesAfterEnv: [path.resolve(__dirname, 'tools', 'setup-tests.ts')],
+  testPathIgnorePatterns: [path.resolve(__dirname, 'e2e')],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+};

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@ampath/esm-dha-workflow-app",
+  "version": "4.0.0-next.4",
+  "license": "MPL-2.0",
+  "description": "An OpenMRS seed application for building microfrontends",
+  "browser": "dist/openmrs-esm-home-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "dev": "openmrs develop --backend=https://staging.ampath.or.ke --api-url=/openmrs --port=9000",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "eslint src --ext js,jsx,ts,tsx --max-warnings 0",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\" --list-different",
+    "typescript": "tsc",
+    "test": "jest --config jest.config.js --passWithNoTests",
+    "verify": "turbo lint typescript coverage",
+    "coverage": "yarn test --coverage",
+    "prepare": "husky install",
+    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./tools/i18next-parser.config.js",
+    "test-e2e": "playwright test"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-home-app.git"
+  },
+  "homepage": "https://github.com/openmrs/openmrs-esm-home-app#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-home-app/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.83.0",
+    "lodash-es": "^4.17.21"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "*",
+    "@openmrs/esm-patient-common-lib": "*",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-patient-common-lib": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@playwright/test": "^1.52.0",
+    "@swc/cli": "^0.3.12",
+    "@swc/core": "^1.3.68",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "css-loader": "^6.8.1",
+    "dayjs": "^1.11.13",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "husky": "^8.0.3",
+    "i18next": "^25.0.0",
+    "i18next-parser": "^9.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.2",
+    "openmrs": "next",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
+    "react-router-dom": "^6.14.1",
+    "rxjs": "^6.6.7",
+    "swc-loader": "^0.2.3",
+    "turbo": "^2.5.2",
+    "typescript": "^5.0.0",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1"
+  },
+  "lint-staged": {
+    "packages/**/src/**/*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
+    "*.{css,scss,ts,tsx}": "prettier --write --list-different"
+  },
+  "packageManager": "yarn@4.10.3",
+  "stableVersion": "4.0.0"
+}

package/playwright.config.ts

@@ -0,0 +1,32 @@
+import { devices, PlaywrightTestConfig } from '@playwright/test';
+import * as dotenv from 'dotenv';
+dotenv.config();
+
+// See https://playwright.dev/docs/test-configuration.
+const config: PlaywrightTestConfig = {
+  testDir: './e2e/specs',
+  timeout: 3 * 60 * 1000,
+  expect: {
+    timeout: 40 * 1000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  reporter: process.env.CI ? [['junit', { outputFile: 'results.xml' }], ['html']] : [['html']],
+  globalSetup: require.resolve('./e2e/core/global-setup'),
+  use: {
+    baseURL: `${process.env.E2E_BASE_URL}/spa/`,
+    storageState: 'e2e/storageState.json',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+};
+
+export default config;

package/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  bracketSpacing: true,
+  printWidth: 120,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+};

package/src/boxes/extensions/blue-box.component.tsx

@@ -0,0 +1,15 @@
+/**
+ * This component demonstrates the creation of an extension.
+ *
+ * Check out the Extension System docs:
+ * https://o3-docs.vercel.app/docs/extension-system
+ */
+
+import React from 'react';
+import styles from './box.scss';
+
+const BlueBox: React.FC = () => {
+  return <div className={styles.blue}></div>;
+};
+
+export default BlueBox;

package/src/boxes/extensions/box.scss

@@ -0,0 +1,23 @@
+/* Extensions should supply the minimum amount of styling
+ * necessary. Here, the extensions set only their colors.
+ * Their sizes and other general features of their display
+ * is controlled by the slot. */
+@use "@carbon/layout";
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+ .blue {
+  background-color: darkblue;
+}
+
+.red {
+  background-color: darkred;
+}
+
+/* Brand colors are special. They must be included using a
+ * SASS mix-in (shown here) or using a CSS variable like
+ * `var(--brand-01)`. */
+.brand {
+  @include brand-01(background-color);
+  color: white;
+  padding: layout.$spacing-03;
+}

package/src/boxes/extensions/brand-box.component.tsx

@@ -0,0 +1,15 @@
+/**
+ * This component demonstrates the creation of an extension.
+ *
+ * Check out the Extension System docs:
+ * https://o3-docs.vercel.app/docs/extension-system
+ */
+
+import React from 'react';
+import styles from './box.scss';
+
+const RedBox: React.FC = () => {
+  return <div className={styles.brand}></div>;
+};
+
+export default RedBox;

package/src/boxes/extensions/red-box.component.tsx

@@ -0,0 +1,15 @@
+/**
+ * This component demonstrates the creation of an extension.
+ *
+ * Check out the Extension System docs:
+ * https://o3-docs.vercel.app/docs/extension-system
+ */
+
+import React from 'react';
+import styles from './box.scss';
+
+const RedBox: React.FC = () => {
+  return <div className={styles.red}></div>;
+};
+
+export default RedBox;

package/src/boxes/slot/boxes.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Extension, ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './boxes.scss';
+
+export const Boxes: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      <h5>{t('extensionSystem', 'Extension system')}</h5>
+      <p>
+        {t(
+          'extensionExplainer',
+          'Here are some colored boxes. Because they are attached as extensions within a slot, an admin can change what boxes are shown using configuration. These boxes happen to be defined in this module, but they could attach to this slot even if they were in a different module.',
+        )}
+      </p>
+      <ExtensionSlot name="Boxes" className={styles.boxes}>
+        <div className={styles.box}>
+          <Extension />
+        </div>
+      </ExtensionSlot>
+    </div>
+  );
+};