Populate deprecation dates from JSON file

4 files changed, 112 insertions, 4 deletions

diff --git a/content/frontend/deprecations/filters.js b/content/frontend/deprecations/deprecations.js
index 472cba50..3a651f67 100644
--- a/content/frontend/deprecations/filters.js
+++ b/content/frontend/deprecations/deprecations.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { compareVersions } from 'compare-versions';
+import { getReleaseDates } from '../services/fetch_versions';
 import DeprecationFilters from './components/deprecation_filters.vue';
 
 /**
@@ -36,7 +37,24 @@ const buildMilestonesList = (showAllText) => {
   return milestones;
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
+  // Populate milestone dates.
+  const releaseDates = await getReleaseDates();
+  const dateFields = ['removal-date', 'support-end-date'];
+
+  dateFields.forEach((field) => {
+    const depDates = document.querySelectorAll(`span.${field}`);
+    depDates.forEach((dd) => {
+      // Find the milestone value from within the sibling span tag.
+      // Use this to populate the date for the milestone.
+      const milestone = dd.parentNode.querySelector('.removal-milestone').innerText;
+      const releaseDate = Object.keys(releaseDates).find((key) => releaseDates[key] === milestone);
+      // eslint-disable-next-line no-param-reassign
+      dd.innerText = `(${releaseDate})`;
+    });
+  });
+
+  // Initialize the filters Vue component.
   const showAllText = 'Show all';
   const milestonesOptions = buildMilestonesList(showAllText);
 
diff --git a/content/frontend/services/fetch_versions.js b/content/frontend/services/fetch_versions.js
index 4b73d879..6edf3e45 100644
--- a/content/frontend/services/fetch_versions.js
+++ b/content/frontend/services/fetch_versions.js
@@ -2,7 +2,9 @@
 
 import { compareVersions } from 'compare-versions';
 
-const DOCS_VERSIONS_ENDPOINT = 'https://docs.gitlab.com/versions.json';
+const BASE_URL = `${window.location.protocol}//${window.location.host}`;
+const DOCS_VERSIONS_ENDPOINT = `${BASE_URL}/versions.json`;
+const GITLAB_RELEASE_DATES_ENDPOINT = `${BASE_URL}/release_dates.json`;
 const DOCS_IMAGES_ENDPOINT =
   'https://gitlab.com/api/v4/projects/1794617/registry/repositories/631635/tags?per_page=100';
 
@@ -56,3 +58,17 @@ export async function getArchivesVersions() {
         !Object.values(onlineVersions).flat().includes(v),
     );
 }
+
+/**
+ * Fetch a list of versions with their associated release dates.
+ *
+ * @returns Array
+ */
+export function getReleaseDates() {
+  return fetch(GITLAB_RELEASE_DATES_ENDPOINT)
+    .then((response) => response.json())
+    .then((data) => {
+      return Object.assign(...data);
+    })
+    .catch((error) => console.error(error));
+}
diff --git a/content/release_dates.json b/content/release_dates.json
new file mode 100644
index 00000000..75284757
--- /dev/null
+++ b/content/release_dates.json
@@ -0,0 +1,75 @@
+[
+  {
+    "2021-05-22": "14.0",
+    "2021-06-22": "14.1",
+    "2021-07-22": "14.2",
+    "2021-08-22": "14.3",
+    "2021-09-22": "14.4",
+    "2021-10-22": "14.5",
+    "2021-11-22": "14.6",
+    "2021-12-22": "14.7",
+    "2022-01-22": "14.8",
+    "2022-03-22": "14.9",
+    "2022-04-22": "14.10",
+    "2022-05-22": "15.0",
+    "2022-06-22": "15.1",
+    "2022-07-22": "15.2",
+    "2022-08-22": "15.3",
+    "2022-09-22": "15.4",
+    "2022-10-22": "15.5",
+    "2022-11-22": "15.6",
+    "2022-12-22": "15.7",
+    "2023-01-22": "15.8",
+    "2023-02-22": "15.9",
+    "2023-03-22": "15.10",
+    "2023-04-22": "15.11",
+    "2023-05-22": "16.0",
+    "2023-06-22": "16.1",
+    "2023-07-22": "16.2",
+    "2023-08-22": "16.3",
+    "2023-09-22": "16.4",
+    "2023-10-22": "16.5",
+    "2023-11-22": "16.6",
+    "2023-12-22": "16.7",
+    "2024-01-22": "16.8",
+    "2024-02-22": "16.9",
+    "2024-03-22": "16.10",
+    "2024-04-22": "16.11",
+    "2024-05-22": "17.0",
+    "2024-06-22": "17.1",
+    "2024-07-22": "17.2",
+    "2024-08-22": "17.3",
+    "2024-09-22": "17.4",
+    "2024-10-22": "17.5",
+    "2024-11-22": "17.6",
+    "2024-12-22": "17.7",
+    "2025-01-22": "17.8",
+    "2025-02-22": "17.9",
+    "2025-03-22": "17.10",
+    "2025-04-22": "17.11",
+    "2025-05-22": "18.0",
+    "2025-06-22": "18.1",
+    "2025-07-22": "18.2",
+    "2025-08-22": "18.3",
+    "2025-09-22": "18.4",
+    "2025-10-22": "18.5",
+    "2025-11-22": "18.6",
+    "2025-12-22": "18.7",
+    "2026-01-22": "18.8",
+    "2026-02-22": "18.9",
+    "2026-03-22": "18.10",
+    "2026-04-22": "18.11",
+    "2026-05-22": "19.0",
+    "2026-06-22": "19.1",
+    "2026-07-22": "19.2",
+    "2026-08-22": "19.3",
+    "2026-09-22": "19.4",
+    "2026-10-22": "19.5",
+    "2026-11-22": "19.6",
+    "2026-12-22": "19.7",
+    "2027-01-22": "19.8",
+    "2027-02-22": "19.9",
+    "2027-03-22": "19.10",
+    "2027-04-22": "19.11"
+  }
+]
diff --git a/layouts/default.html b/layouts/default.html
index 2e81869c..b5684b6d 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -112,7 +112,7 @@
       <%= render '/analytics.*' %>
     <% end %>
     <% if @item.identifier.to_s == '/ee/update/deprecations.md' %>
-      <script src="<%= @items['/frontend/deprecations/filters.*'].path %>"></script>
+      <script src="<%= @items['/frontend/deprecations/deprecations.*'].path %>"></script>
     <% end %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/docs.*'].path %>"></script>
@@ -121,4 +121,3 @@
     <script src="<%= @items['/frontend/default/default.*'].path %>"></script>
   </body>
 </html>
-