diff options
author | Sarah German <sgerman@gitlab.com> | 2022-06-02 04:12:22 +0300 |
---|---|---|
committer | Suzanne Selhorn <sselhorn@gitlab.com> | 2022-06-02 04:12:22 +0300 |
commit | 438e557f7a46357a01a9267c8e23dddf7aa00a40 (patch) | |
tree | a3e1e378a049851c4548e941af86d283052cf6f2 | |
parent | 7587182c0ac4d601fb4dee0c9cf4dd9c4ab5b089 (diff) |
Add filters to the Deprecations page
-rw-r--r-- | content/frontend/deprecations/components/deprecation_filters.vue | 67 | ||||
-rw-r--r-- | content/frontend/deprecations/filters.js | 43 | ||||
-rw-r--r-- | layouts/default.html | 3 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | spec/frontend/deprecations/deprecation_filters_spec.js | 16 | ||||
-rw-r--r-- | yarn.lock | 5 |
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 9b2d91cc..c9c9c24d 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -105,6 +105,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 07ac9791..1558d809 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", "pikaday": "^1.8.2", 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); + }); +}); @@ -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" |