Merge branch 'filter-url' into 'main'

Enable filtering the Deprecations list with URL parameters

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

3 files changed, 69 insertions, 3 deletions

diff --git a/content/frontend/deprecations/components/deprecation_filters.vue b/content/frontend/deprecations/components/deprecation_filters.vue
index 23778827..b8381d8d 100644
--- a/content/frontend/deprecations/components/deprecation_filters.vue
+++ b/content/frontend/deprecations/components/deprecation_filters.vue
@@ -20,7 +20,41 @@ export default {
       selected: this.showAllText,
     };
   },
+  created() {
+    // Pre-filter the page if the URL includes a valid version parameter.
+    const searchParams = new URLSearchParams(window.location.search);
+    if (!searchParams.has('removal_milestone')) {
+      return;
+    }
+    const version = searchParams.get('removal_milestone').replace(/\./g, '');
+    if (this.isValidVersion(version)) {
+      this.filterDeprecationList(version);
+      this.selected = version;
+    }
+  },
   methods: {
+    isValidVersion(version) {
+      return this.milestonesList.some((e) => e.value === version);
+    },
+    updateURLParams(option) {
+      const item = this.milestonesList.find((x) => x.value === option);
+      const url = new URL(window.location);
+
+      if (item.text.length > 0 && item.text !== this.showAllText) {
+        url.searchParams.set('removal_milestone', item.text);
+      } else {
+        url.searchParams.delete('removal_milestone');
+      }
+      window.history.pushState(null, '', url.toString());
+    },
+    /**
+     * Filters the page down to a specified removal version.
+     *
+     * This method hides all deprecations that do not have the selected version
+     * in their wrapper div's class lists.
+     *
+     * @param {String} option
+     */
     filterDeprecationList(option) {
       const hiddenClass = 'd-none';
 
@@ -30,7 +64,7 @@ export default {
       });
 
       if (option !== this.showAllText) {
-        // If a removal version was selected, hide deprecations with different versions.
+        // Hide deprecations with non-selected versions.
         document
           .querySelectorAll(`.deprecation:not(.removal-${option})`)
           .forEach(function hideDeprecationsAndHeader(el) {
@@ -46,6 +80,9 @@ export default {
             el.parentElement.children[0].classList.remove(hiddenClass);
           });
       }
+
+      // Update the removal_milestone parameter in the URL.
+      this.updateURLParams(option);
     },
   },
 };
diff --git a/content/frontend/deprecations/filters.js b/content/frontend/deprecations/filters.js
index 208c0b29..ea9e2880 100644
--- a/content/frontend/deprecations/filters.js
+++ b/content/frontend/deprecations/filters.js
@@ -3,8 +3,17 @@ import compareVersions from 'compare-versions';
 import DeprecationFilters from './components/deprecation_filters.vue';
 
 /**
- * Builds an ordered array of removal milestones from page content.
+ * Builds an array of removal milestone options from page content.
+ *
+ * Each milestone object contains:
+ *   - A text string, used for labels in the select options list.
+ *     This also appears as a query string value in the URL when filtering.
+ *   - A value string, which is the same as the text string, but without periods.
+ *     This is used to match the query with CSS classes on deprecations.
+ *     CSS classes cannot include periods, so we drop those for this element.
+ *
  * @param {String} showAllText
+ *   Label for default/unselected state.
  * @return {Array}
  */
 const buildMilestonesList = (showAllText) => {
diff --git a/spec/frontend/deprecations/deprecation_filters_spec.js b/spec/frontend/deprecations/deprecation_filters_spec.js
index c192745e..d5149792 100644
--- a/spec/frontend/deprecations/deprecation_filters_spec.js
+++ b/spec/frontend/deprecations/deprecation_filters_spec.js
@@ -5,7 +5,7 @@
 import { mount } from '@vue/test-utils';
 import DeprecationFilters from '../../../content/frontend/deprecations/components/deprecation_filters.vue';
 
-const propsData = { showAllText: 'Show all', milestonesList: [] };
+const propsData = { showAllText: 'Show all', milestonesList: [{ value: '160', text: '16.0' }] };
 const removalsFilterSelector = '[data-testid="removal-milestone-filter"]';
 
 describe('component: Deprecations Filter', () => {
@@ -13,4 +13,24 @@ describe('component: Deprecations Filter', () => {
     const wrapper = mount(DeprecationFilters, { propsData });
     expect(wrapper.find(removalsFilterSelector).isVisible()).toBe(true);
   });
+
+  it('Validates a URL parameter', () => {
+    const location = {
+      ...window.location,
+      search: '?removal_milestone=16.0',
+      toString: () => {
+        return 'http://localhost/ee/update/deprecations.html';
+      },
+    };
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: location,
+    });
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const versionValue = searchParams.get('removal_milestone').replace(/\./g, '');
+
+    const wrapper = mount(DeprecationFilters, { propsData });
+    expect(wrapper.vm.isValidVersion(versionValue)).toBe(true);
+  });
 });