Merge branch '1172-deprecations-filters' into 'main'

Add filters to the Deprecations page

See merge request gitlab-org/gitlab-docs!2622

6 files changed, 135 insertions, 0 deletions

diff --git a/content/frontend/deprecations/components/deprecation_filters.vue b/content/frontend/deprecations/components/deprecation_filters.vue
new file mode 100644
index 00000000..23778827
--- /dev/null
+++ b/content/frontend/deprecations/components/deprecation_filters.vue
@@ -0,0 +1,67 @@
+<script>
+import { GlFormSelect } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormSelect,
+  },
+  props: {
+    milestonesList: {
+      type: Array,
+      required: true,
+    },
+    showAllText: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selected: this.showAllText,
+    };
+  },
+  methods: {
+    filterDeprecationList(option) {
+      const hiddenClass = 'd-none';
+
+      // Reset the list and show all deprecations and headers.
+      document.querySelectorAll('.deprecation, h2').forEach(function showAllSections(el) {
+        el.classList.remove(hiddenClass);
+      });
+
+      if (option !== this.showAllText) {
+        // If a removal version was selected, hide deprecations with different versions.
+        document
+          .querySelectorAll(`.deprecation:not(.removal-${option})`)
+          .forEach(function hideDeprecationsAndHeader(el) {
+            el.classList.add(hiddenClass);
+            // Hide the "announcement version" section header.
+            el.parentElement.children[0].classList.add(hiddenClass);
+          });
+
+        // Show the "announcement version" header if we have deprecations in this section.
+        document
+          .querySelectorAll(`.deprecation.removal-${option}`)
+          .forEach(function showHeader(el) {
+            el.parentElement.children[0].classList.remove(hiddenClass);
+          });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mt-3 row">
+    <div class="col-4">
+      <label for="milestone" class="d-block col-form-label">Filter by removal version:</label>
+      <gl-form-select
+        v-model="selected"
+        name="milestone"
+        :options="milestonesList"
+        data-testid="removal-milestone-filter"
+        @change="filterDeprecationList(selected)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/content/frontend/deprecations/filters.js b/content/frontend/deprecations/filters.js
new file mode 100644
index 00000000..208c0b29
--- /dev/null
+++ b/content/frontend/deprecations/filters.js
@@ -0,0 +1,43 @@
+import Vue from 'vue';
+import compareVersions from 'compare-versions';
+import DeprecationFilters from './components/deprecation_filters.vue';
+
+/**
+ * Builds an ordered array of removal milestones from page content.
+ * @param {String} showAllText
+ * @return {Array}
+ */
+const buildMilestonesList = (showAllText) => {
+  let milestones = [];
+  document.querySelectorAll('.removal-milestone').forEach(function addOption(el) {
+    if (!milestones.includes(el.innerText)) {
+      milestones.push(el.innerText);
+    }
+  });
+  milestones.sort(compareVersions).reverse();
+  milestones = milestones.map(function addValues(el) {
+    return { value: el.replaceAll('.', ''), text: el };
+  });
+  milestones.unshift({ value: showAllText, text: showAllText });
+  return milestones;
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const showAllText = 'Show all';
+  const milestonesList = buildMilestonesList(showAllText);
+
+  return new Vue({
+    el: '.js-deprecation-filters',
+    components: {
+      DeprecationFilters,
+    },
+    render(createElement) {
+      return createElement(DeprecationFilters, {
+        props: {
+          milestonesList,
+          showAllText,
+        },
+      });
+    },
+  });
+});
diff --git a/layouts/default.html b/layouts/default.html
index e1550aec..c216fdc4 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -104,6 +104,9 @@
     <%# Add analytics only in production %>
       <%= render '/analytics.*' %>
     <% end %>
+    <% if @item.identifier.to_s == '/ee/update/deprecations.md' %>
+      <script src="<%= @items['/frontend/deprecations/filters.*'].path %>"></script>
+    <% end %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/docs.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/global-nav.*'].path %>"></script>
diff --git a/package.json b/package.json
index 292fbcf7..8963694a 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@popperjs/core": "^2.11.5",
     "algoliasearch": "4.13.1",
     "bootstrap": "^4.6.1",
+    "compare-versions": "^4.1.3",
     "eslint-plugin-filenames": "^1.3.2",
     "instantsearch.js": "^4.40.6",
     "jquery": "^3.6.0",
diff --git a/spec/frontend/deprecations/deprecation_filters_spec.js b/spec/frontend/deprecations/deprecation_filters_spec.js
new file mode 100644
index 00000000..c192745e
--- /dev/null
+++ b/spec/frontend/deprecations/deprecation_filters_spec.js
@@ -0,0 +1,16 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '@vue/test-utils';
+import DeprecationFilters from '../../../content/frontend/deprecations/components/deprecation_filters.vue';
+
+const propsData = { showAllText: 'Show all', milestonesList: [] };
+const removalsFilterSelector = '[data-testid="removal-milestone-filter"]';
+
+describe('component: Deprecations Filter', () => {
+  it('Filter is visible', () => {
+    const wrapper = mount(DeprecationFilters, { propsData });
+    expect(wrapper.find(removalsFilterSelector).isVisible()).toBe(true);
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 325edafc..76f66e30 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2333,6 +2333,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compare-versions@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-4.1.3.tgz#8f7b8966aef7dc4282b45dfa6be98434fc18a1a4"
+  integrity sha512-WQfnbDcrYnGr55UwbxKiQKASnTtNnaAWVi8jZyy8NTpVAXWACSne8lMD1iaIo9AiU6mnuLvSVshCzewVuWxHUg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"