Merge pull request #14404 from guardian/ih/ab-testing-ui-branch

A/B testing report UI

Author: i-hardy

.github/workflows/ab-testing-ui.yml

@@ -0,0 +1,67 @@
+name: 🦕 AB testing UI
+on:
+  pull_request:
+    paths:
+      - 'ab-testing/**'
+
+jobs:
+  build-ui:
+    name: AB testing UI build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    defaults:
+      run:
+        working-directory: ab-testing/frontend
+    steps:
+      - uses: actions/checkout@v4
+
+      # https://github.com/denoland/setup-deno#latest-stable-for-a-major
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v2.3
+      - name: Install
+        run: deno install
+      - name: Build
+        run: deno run build
+      - name: Save build
+        uses: actions/[email protected]
+        with:
+          name: ui-build
+          path: ${{ github.workspace }}/ab-testing/frontend/output/ab-tests.html
+          if-no-files-found: error
+
+  riff-raff:
+    name: AB testing Riffraff upload
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+      pull-requests: write
+
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Set up Node
+        uses: ./.github/actions/setup-node-env
+
+      - name: Fetch build
+        uses: actions/[email protected]
+        with:
+          name: ui-build
+          path: output/ab-tests.html
+
+      - name: Riff-Raff Upload
+        uses: guardian/[email protected]
+        with:
+          roleArn: ${{ secrets.GU_RIFF_RAFF_ROLE_ARN }}
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          projectName: dotcom:rendering-all
+          configPath: ab-testing/riff-raff.yaml
+          contentDirectories: |
+            frontend-store/commercial:
+              - output/ab-tests.html

.gitignore

@@ -12,6 +12,7 @@ yarn-error.log*
 # Dependency directories
 node_modules
 .yarn
+.svelte-kit
 
 # IDE files
 .idea
@@ -56,3 +57,6 @@ k6-v*arm64
 test-results/
 playwright-report/
 playwright/.cache/
+
+# svelte output
+ab-testing/frontend/output

ab-testing/abTest.ts

@@ -0,0 +1,61 @@
+import type { ABTest } from './types';
+
+/**
+ * Tests are defined here. They will be assigned mvt ranges based on the
+ * size of the test and the number of groups, these ranges may not be contiguous.
+ *
+ * For 100% tests to run concurrently with other tests, they should be assigned to different
+ * test spaces. This means that some users will be in multiple tests at the same time.
+ *
+ * Example:
+ * [Space A]
+ * - 20% Test	control		MVT 0-99
+ * - 20% Test	variant		MVT 100-199
+ * - 50% Test	control		MVT 200-449
+ * - 50% Test	variant		MVT 450-699
+ *
+ * [Space B]
+ * - 100% Test	control		MVT 0-499
+ * - 100% Test	variant		MVT 500-999
+ */
+
+export const ABTests: ABTest[] = [
+	// Sample tests that will be used for testing the AB testing framework
+	{
+		name: 'commercial-client-side-test',
+		description:
+			'Show new ad block ask component in ad slots when we detect ad blocker usage',
+		owners: ['[email protected]'],
+		status: 'ON',
+		expirationDate: '2050-12-30',
+		type: 'client',
+		audienceSize: 10 / 100,
+		groups: ['control', 'variant'],
+	},
+	{
+		name: 'commercial-server-side-test',
+		description:
+			'Show new ad block ask component in ad slots when we detect ad blocker usage',
+		owners: ['[email protected]'],
+		status: 'ON',
+		expirationDate: '2050-12-30',
+		type: 'server',
+		audienceSize: 10 / 100,
+		groups: ['control', 'variant'],
+	},
+	{
+		name: 'commercial-large-overlap-test',
+		description:
+			'Allows viewing the beta version of the Europe network front',
+		owners: [
+			'[email protected]',
+			'[email protected]',
+		],
+		status: 'ON',
+		expirationDate: '2050-12-30',
+		type: 'server',
+		audienceSize: 50 / 100,
+		groups: ['control', 'variant'],
+		audienceSpace: 'B',
+	},
+];

ab-testing/frontend/README.md

@@ -0,0 +1,17 @@
+# A/B Testing - reporting UI
+
+This is a simple UI showing the key details of currently active A/B tests and the distribution of those tests within the available test space. The current implementation is a drop-in replacement for the current reporting page in the [Frontend admin tooling](https://github.com/guardian/frontend/tree/main/admin). The UI is built with Svelte and Sveltekit with no additional dependencies aside from Guardian fonts.
+
+## Developing
+
+Install dependencies with `deno install`, then start a development server:
+
+```bash
+deno run dev
+```
+
+## Building
+
+The project is set up to build the entire Svelte application into a single HTML file. This can be run locally with `deno run build`, with the resulting file put into `/output`.
+
+After a merge, this file will be built and uploaded to the `frontend-store` S3 bucket. It is then accessed securely and served in an iframe in the Frontend admin tool, in place of the old page which relied on A/B test information being present in the switchboard and client-side config in frontend.