Skip to content

Add metadata to work items detail pages

Jack Chapman requested to merge jc/work-item-page-metadata into master

What does this MR do and why?

Updates Work Item details haml templates to include meta tags for social previews and expanded links in apps like Slack.

Aims to make the Work Item experience as close to the Legacy experience as possible.

Note that this uses the Work Item Type in the title rather than hard coded "Issues" or "Epics" (as this should work for any Work Item at project or group level).

We also now have the ability to display Assignee in the social preview/expanded link for Epics, so that has been included.

Diff between Legacy and Work Item Issue
 <title>Test issue 1 (#42) · Issues · Flightjs / Flight · GitLab</title>
 <meta content="object" property="og:type">
 <meta content="GitLab" property="og:site_name">
 <meta content="Test issue 1 (#42) · Issues · Flightjs / Flight · GitLab" property="og:title">
 <meta content="Here&#39;s a test issue for testing purposes" property="og:description">
 <meta content="http://127.0.0.1:3000/uploads/-/system/project/avatar/7/jackchapman.jpg" property="og:image">
 <meta content="64" property="og:image:width">
 <meta content="64" property="og:image:height">
-<meta content="http://127.0.0.1:3000/flightjs/Flight/-/issues/42" property="og:url">
+<meta content="http://127.0.0.1:3000/flightjs/Flight/-/work_items/42" property="og:url">
 <meta content="summary" property="twitter:card">
 <meta content="Test issue 1 (#42) · Issues · Flightjs / Flight · GitLab" property="twitter:title">
 <meta content="Here&#39;s a test issue for testing purposes" property="twitter:description">
 <meta content="http://127.0.0.1:3000/uploads/-/system/project/avatar/7/jackchapman.jpg" property="twitter:image">
-<meta property="twitter:label1" content="Author"><meta property="twitter:data1" content="Administrator">
+<meta property="twitter:label1" content="Author"><meta property="twitter:data1" content="Administrator"><meta property="twitter:label2" content="Assignee"><meta property="twitter:data2" content="Administrator">
 <meta name="csrf-param" content="authenticity_token" />
-<meta name="csrf-token" content="lpMQdp378ikzWfFFfafqOwVvV6VU1M9YSGDKhUrDLfCqk_wefcVcS5vrgG2bUtoK-Zes12FyBrvJmwWW9PDwiw" />
-<meta name="csp-nonce" content="rZHQfZ6nNYJI4wfe4Ujgaw==" />
+<meta name="csrf-token" content="FPpqFoBeR_GzQi3zBE36Zb_lQrcrIU1cbJAakza9mooo-oZ-YGDpkxvwXNviuMpUQx25xR6HhL_ta9WAiI5H8Q" />
+<meta name="csp-nonce" content="EfkvjWYVvDyYt8V24GKoWw==" />
 <meta name="action-cable-url" content="/-/cable" />
 <link href="/-/manifest.json" rel="manifest">
 <link rel="icon" type="image/png" href="/assets/favicon-green-c16587cf491e061b34683ae7fd585c3030129f27080728566a43cd80eecaf55c.png" id="favicon" data-original-href="/assets/favicon-green-c16587cf491e061b34683ae7fd585c3030129f27080728566a43cd80eecaf55c.png" />
 <link rel="apple-touch-icon" type="image/x-icon" href="/assets/apple-touch-icon-b049d4bc0dd9626f31db825d61880737befc7835982586d015bded10b4435460.png" />
 <link href="/search/opensearch.xml" rel="search" title="Search GitLab" type="application/opensearchdescription+xml">
 <meta content="Here&#39;s a test issue for testing purposes" name="description">
 <meta content="#ececef" name="theme-color">
Diff between legacy and work item epic
-<title>Create marketing materials (&amp;45) · Epics · Flightjs · GitLab</title>
+<title>Create marketing materials (#45) · Epics · Flightjs · GitLab</title>
 <meta content="object" property="og:type">
 <meta content="GitLab" property="og:site_name">
-<meta content="Create marketing materials (&amp;45) · Epics · Flightjs · GitLab" property="og:title">
+<meta content="Create marketing materials (#45) · Epics · Flightjs · GitLab" property="og:title">
 <meta content="Make marketing stuff for the marketing thing" property="og:description">
 <meta content="http://127.0.0.1:3000/assets/twitter_card-570ddb06edf56a2312253c5872489847a0f385112ddbcd71ccfa1570febab5d2.jpg" property="og:image">
 <meta content="64" property="og:image:width">
 <meta content="64" property="og:image:height">
-<meta content="http://127.0.0.1:3000/groups/flightjs/-/epics/45" property="og:url">
+<meta content="http://127.0.0.1:3000/groups/flightjs/-/work_items/45" property="og:url">
 <meta content="summary" property="twitter:card">
-<meta content="Create marketing materials (&amp;45) · Epics · Flightjs · GitLab" property="twitter:title">
+<meta content="Create marketing materials (#45) · Epics · Flightjs · GitLab" property="twitter:title">
 <meta content="Make marketing stuff for the marketing thing" property="twitter:description">
 <meta content="http://127.0.0.1:3000/assets/twitter_card-570ddb06edf56a2312253c5872489847a0f385112ddbcd71ccfa1570febab5d2.jpg" property="twitter:image">
-<meta property="twitter:label1" content="Author"><meta property="twitter:data1" content="Administrator">
+<meta property="twitter:label1" content="Author"><meta property="twitter:data1" content="Administrator"><meta property="twitter:label2" content="Assignee"><meta property="twitter:data2" content="Administrator">
 <meta name="csrf-param" content="authenticity_token" />
-<meta name="csrf-token" content="WpK-Zw-QZdirQgFggbT-3jvcsxDhhKbPhv8tM0BWBWRmklIP767LugPwcEhnQc7vxyRIYtQibywHBOIg_mXYHw" />
-<meta name="csp-nonce" content="sQIV7izVdtgdM9inDOHcrw==" />
+<meta name="csrf-token" content="crl8958w-PQFS1M4lVI9Hpa80UhKd2qVJ1BjbXvH8nRpIY8cLHnN5LeKnvYZ3ZPxc8wvtChp4wB3Ms9MSaHcYg" />
+<meta name="csp-nonce" content="9MuWXxC1gUUEQ/Erv/bKIg==" />
 <meta name="action-cable-url" content="/-/cable" />
 <link href="/-/manifest.json" rel="manifest">
 <link rel="icon" type="image/png" href="/assets/favicon-green-c16587cf491e061b34683ae7fd585c3030129f27080728566a43cd80eecaf55c.png" id="favicon" data-original-href="/assets/favicon-green-c16587cf491e061b34683ae7fd585c3030129f27080728566a43cd80eecaf55c.png" />

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

Relates to #467998 (closed) Relates to #468705 (closed)

Edited by Jack Chapman

Merge request reports