Merge branch...

Merge branch '217321-update-the-admin-audit-events-sorting-dropdown-to-a-vue-app-which-utilises-gitlab-ui' into 'master'

Change Admin Audit Events sorting field to use GitLab UI

Closes #217321

See merge request gitlab-org/gitlab!32299

ee/app/assets/javascripts/audit_logs/components/sorting_field.vue

+<script>
+import { GlNewDropdown, GlNewDropdownHeader, GlNewDropdownItem } from '@gitlab/ui';
+
+import { setUrlParams, queryToObject } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
+
+const SORTING_TITLE = s__('SortOptions|Sort by:');
+const SORTING_OPTIONS = [
+  {
+    key: 'created_desc',
+    text: s__('SortOptions|Last created'),
+  },
+  {
+    key: 'created_asc',
+    text: s__('SortOptions|Oldest created'),
+  },
+];
+
+export default {
+  name: 'SortingField',
+  components: {
+    GlNewDropdown,
+    GlNewDropdownHeader,
+    GlNewDropdownItem,
+  },
+  data() {
+    const { sort: selectedOption } = queryToObject(window.location.search);
+
+    return {
+      selectedOption: selectedOption || SORTING_OPTIONS[0].key,
+    };
+  },
+  computed: {
+    selectedOptionText() {
+      return SORTING_OPTIONS.find(option => option.key === this.selectedOption).text;
+    },
+  },
+  methods: {
+    getItemLink(key) {
+      return setUrlParams({ sort: key });
+    },
+    isChecked(key) {
+      return key === this.selectedOption;
+    },
+  },
+  SORTING_TITLE,
+  SORTING_OPTIONS,
+};
+</script>
+
+<template>
+  <div>
+    <gl-new-dropdown
+      v-model="selectedOption"
+      :text="selectedOptionText"
+      class="w-100 flex-column flex-lg-row form-group"
+    >
+      <gl-new-dropdown-header> {{ $options.SORTING_TITLE }}</gl-new-dropdown-header>
+      <gl-new-dropdown-item
+        v-for="option in $options.SORTING_OPTIONS"
+        :key="option.key"
+        :is-check-item="true"
+        :is-checked="isChecked(option.key)"
+        :href="getItemLink(option.key)"
+      >
+        {{ option.text }}
+      </gl-new-dropdown-item>
+    </gl-new-dropdown>
+
+    <input type="hidden" name="sort" :value="selectedOption" />
+  </div>
+</template>

ee/app/assets/javascripts/pages/admin/audit_logs/index.js

@@ -4,9 +4,20 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 
 import AuditLogFilter from 'ee/audit_logs/components/audit_log_filter.vue';
 import DateRangeField from 'ee/audit_logs/components/date_range_field.vue';
+import SortingField from 'ee/audit_logs/components/sorting_field.vue';
 import LogsTable from 'ee/audit_logs/components/logs_table.vue';
 
 // Merge these when working on https://gitlab.com/gitlab-org/gitlab/-/issues/215363
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.querySelector('#js-audit-logs-filter-app');
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    name: 'AuditLogFilterApp',
+    render: createElement => createElement(AuditLogFilter),
+  });
+});
 document.addEventListener('DOMContentLoaded', () => {
   const el = document.querySelector('#js-audit-logs-date-range-app');
   const formElement = el.closest('form');
@@ -24,6 +35,16 @@ document.addEventListener('DOMContentLoaded', () => {
       }),
   });
 });
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.querySelector('#js-audit-logs-sorting-app');
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    name: 'AuditLogSortingApp',
+    render: createElement => createElement(SortingField),
+  });
+});
 document.addEventListener('DOMContentLoaded', () => {
   const el = document.querySelector('#js-audit-logs-table-app');
 
@@ -40,13 +61,3 @@ document.addEventListener('DOMContentLoaded', () => {
       }),
   });
 });
-document.addEventListener('DOMContentLoaded', () => {
-  const el = document.querySelector('#js-audit-logs-filter-app');
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    name: 'AuditLogFilterApp',
-    render: createElement => createElement(AuditLogFilter),
-  });
-});

ee/app/assets/stylesheets/components/audit_logs/sorting_field.scss

+.audit-controls .gl-dropdown-toggle {
+  border-color: $gray-100;
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 0 0.0625rem $gray-400;
+  padding: 0.5rem 0.75rem;
+}

ee/app/views/admin/audit_logs/index.html.haml

@@ -7,10 +7,9 @@
         #js-audit-logs-filter-app
 
       .d-flex.col-lg-auto.flex-wrap.pl-lg-0
-        %form.row-content-block.second-block.d-flex.justify-content-lg-end.pb-0
-          .audit-controls.d-flex.align-items-lg-center.flex-column.flex-lg-row.col-lg-auto.px-0
-            #js-audit-logs-date-range-app
-            = render 'shared/audit_events/event_sort'
+        .audit-controls.d-flex.align-items-lg-center.flex-column.flex-lg-row.col-lg-auto.px-0
+          #js-audit-logs-date-range-app
+          #js-audit-logs-sorting-app
 
 - if @table_events.present?
   #js-audit-logs-table-app{ data: { events: @table_events.to_json, is_last_page: @events.last_page?.to_json, qa_selector: 'admin_audit_log_table' } }

ee/spec/frontend/audit_logs/components/sorting_field_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlNewDropdownItem } from '@gitlab/ui';
+
+import * as urlUtils from '~/lib/utils/url_utility';
+
+import SortingField from 'ee/audit_logs/components/sorting_field.vue';
+
+describe('SortingField component', () => {
+  let wrapper;
+
+  const DUMMY_URL = 'https://localhost';
+  const createComponent = () =>
+    shallowMount(SortingField, { stubs: { GlNewDropdown: true, GlNewDropdownItem: true } });
+
+  const getCheckedOptions = () =>
+    wrapper.findAll(GlNewDropdownItem).filter(item => item.props().isChecked);
+
+  const getCheckedOptionHref = () => {
+    return getCheckedOptions()
+      .at(0)
+      .attributes().href;
+  };
+
+  beforeEach(() => {
+    urlUtils.setUrlParams = jest.fn(({ sort }) => `${DUMMY_URL}/?sort=${sort}`);
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Sorting behaviour', () => {
+    it('should have sorting options', () => {
+      expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(2);
+    });
+
+    it('should set the sorting option to `created_desc` by default', () => {
+      expect(getCheckedOptions()).toHaveLength(1);
+      expect(getCheckedOptionHref()).toBe(`${DUMMY_URL}/?sort=created_desc`);
+    });
+
+    it('should get the sorting option from the URL', () => {
+      urlUtils.queryToObject = jest.fn(() => ({ sort: 'created_asc' }));
+      wrapper = createComponent();
+
+      expect(getCheckedOptions()).toHaveLength(1);
+      expect(getCheckedOptionHref()).toBe(`${DUMMY_URL}/?sort=created_asc`);
+    });
+
+    it('should retain other params when creating the option URL', () => {
+      urlUtils.setUrlParams = jest.fn(({ sort }) => `${DUMMY_URL}/?abc=defg&sort=${sort}`);
+      urlUtils.queryToObject = jest.fn(() => ({ sort: 'created_desc', abc: 'defg' }));
+
+      wrapper = createComponent();
+
+      expect(getCheckedOptionHref()).toBe(`${DUMMY_URL}/?abc=defg&sort=created_desc`);
+    });
+  });
+});

locale/gitlab.pot

@@ -20243,6 +20243,9 @@ msgstr ""
 msgid "SortOptions|Size"
 msgstr ""
 
+msgid "SortOptions|Sort by:"
+msgstr ""
+
 msgid "SortOptions|Sort direction"
 msgstr ""