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

Add filters to the Deprecations page

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

2 files changed, 110 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,
+        },
+      });
+    },
+  });
+});