SW-881: Show dataset ID in Main information section

src/consumer/views/dataset/components/AboutTab.tsx

@@ -6,6 +6,7 @@ import { PreviewMetadata } from '../../../../shared/interfaces/preview-metadata'
 
 export type AboutTabProps = {
   datasetMetadata: PreviewMetadata;
+  datasetId?: string;
 };
 
 export default function AboutTab(props: AboutTabProps) {

src/shared/i18n/cy.json

@@ -203,7 +203,8 @@
       "time_covered": "Cyfnod amser dan sylw",
       "time_period": "{{start}} i {{end}}",
       "update_missing": "Dyddiad cyhoeddi heb ei nodi eto",
-      "not_updated": "Ni chaiff y set ddata hon ei diweddaru"
+      "not_updated": "Ni chaiff y set ddata hon ei diweddaru",
+      "dataset_id": "ID y set ddata"
     },
     "downloads": {
       "heading": "Lawrlwythiadau"

src/shared/i18n/en.json

@@ -205,7 +205,8 @@
       "time_covered": "Time period covered",
       "time_period": "{{start}} to {{end}}",
       "update_missing": "Publish date not entered yet",
-      "not_updated": "This dataset will not be updated"
+      "not_updated": "This dataset will not be updated",
+      "dataset_id": "Dataset ID"
     },
     "downloads": {
       "heading": "Downloads"

src/shared/views/components/dataset/KeyInfo.jsx

@@ -76,6 +76,13 @@ export default function KeyInfo(props) {
         )}
 
         <PeriodCovered locale={props.i18n.language} timePeriod={props.keyInfo.timePeriod} />
+
+        {props.datasetId && (
+          <div id="dataset-id" className="govuk-summary-list__row">
+            <dt className="govuk-summary-list__key">{props.t('dataset_view.key_information.dataset_id')}</dt>
+            <dd className="govuk-summary-list__value">{props.datasetId}</dd>
+          </div>
+        )}
       </dl>
     </div>
   );

tests-e2e/consumer/dataset-view.spec.ts

@@ -45,6 +45,29 @@ test.describe('Dataset View', () => {
     await expect(page.locator('#time-period')).toContainText('March 2024');
   });
 
+  test('About tab shows dataset ID at the bottom of Main information', async ({ page }) => {
+    await page.goto(datasetUrl);
+    await page.getByRole('tab', { name: 'About this dataset' }).click();
+
+    const datasetIdRow = page.locator('#dataset-id');
+    await expect(datasetIdRow).toBeVisible();
+    await expect(datasetIdRow.locator('dt')).toHaveText('Dataset ID');
+
+    // The value should be the UUID from the URL
+    const urlId = new URL(datasetUrl).pathname.split('/').find((s) => s.match(/^[0-9a-f-]{36}$/i));
+    await expect(datasetIdRow.locator('dd')).toHaveText(urlId!);
+  });
+
+  test('About tab shows dataset ID label in Welsh', async ({ page }) => {
+    await page.goto(datasetUrl);
+    await page.getByText('Cymraeg').click();
+    await page.getByRole('tab', { name: 'Am y set ddata hon' }).click();
+
+    const datasetIdRow = page.locator('#dataset-id');
+    await expect(datasetIdRow).toBeVisible();
+    await expect(datasetIdRow.locator('dt')).toHaveText('ID y set ddata');
+  });
+
   test('Custom year dataset About tab does not show time period', async ({ browser }) => {
     const customYearUrl = await resolveDatasetUrlByTitle(browser, CUSTOM_YEAR_DATASET_TITLE);
     const page = await browser.newPage();