Merge branch '11059-dependency-list-actions-component-ee' into 'master'

Add Dependency List actions component

See merge request gitlab-org/gitlab-ee!13679

ee/app/assets/javascripts/dependencies/components/dependencies_actions.vue

+<script>
+import { mapActions, mapState } from 'vuex';
+import { GlButton, GlDropdown, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { SORT_ORDER } from '../store/constants';
+
+export default {
+  name: 'DependenciesActions',
+  components: {
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  computed: {
+    ...mapState(['endpoint', 'sortField', 'sortFields', 'sortOrder']),
+    sortFieldName() {
+      return this.sortFields[this.sortField];
+    },
+    sortOrderIcon() {
+      return this.sortOrder === SORT_ORDER.ascending ? 'sort-lowest' : 'sort-highest';
+    },
+  },
+  methods: {
+    ...mapActions(['setSortField', 'toggleSortOrder']),
+    isCurrentSortField(id) {
+      return id === this.sortField;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="btn-toolbar">
+    <div class="btn-group flex-grow-1 mr-2">
+      <gl-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right>
+        <gl-dropdown-item v-for="(name, id) in sortFields" :key="id" @click="setSortField(id)">
+          <span class="d-flex">
+            <icon
+              class="flex-shrink-0 append-right-4"
+              :class="{ invisible: !isCurrentSortField(id) }"
+              name="mobile-issue-close"
+            />
+            {{ name }}
+          </span>
+        </gl-dropdown-item>
+      </gl-dropdown>
+      <gl-button
+        v-gl-tooltip
+        :title="__('Sort direction')"
+        class="flex-grow-0 js-sort-order"
+        @click="toggleSortOrder"
+      >
+        <icon :name="sortOrderIcon" />
+      </gl-button>
+    </div>
+    <gl-button
+      v-gl-tooltip
+      :href="endpoint"
+      download="dependencies.json"
+      :title="s__('Dependencies|Export as JSON')"
+      class="js-download"
+    >
+      <icon name="download" />
+    </gl-button>
+  </div>
+</template>

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DependenciesActions component matches the snapshot 1`] = `
+<div
+  class="btn-toolbar"
+>
+  <div
+    class="btn-group flex-grow-1 mr-2"
+  >
+    <gldropdown-stub
+      class="flex-grow-1 text-center"
+      right=""
+      text="Component name"
+    >
+      <gldropdownitem-stub>
+        <span
+          class="d-flex"
+        >
+          <icon-stub
+            class="flex-shrink-0 append-right-4"
+            cssclasses=""
+            name="mobile-issue-close"
+            size="16"
+          />
+          
+          Component name
+        
+        </span>
+      </gldropdownitem-stub>
+      <gldropdownitem-stub>
+        <span
+          class="d-flex"
+        >
+          <icon-stub
+            class="flex-shrink-0 append-right-4 invisible"
+            cssclasses=""
+            name="mobile-issue-close"
+            size="16"
+          />
+          
+          Packager
+        
+        </span>
+      </gldropdownitem-stub>
+    </gldropdown-stub>
+     
+    <glbutton-stub
+      class="flex-grow-0 js-sort-order"
+      data-original-title="Sort direction"
+      title=""
+    >
+      <icon-stub
+        cssclasses=""
+        name="sort-lowest"
+        size="16"
+      />
+    </glbutton-stub>
+  </div>
+   
+  <glbutton-stub
+    class="js-download"
+    data-original-title="Export as JSON"
+    download="dependencies.json"
+    href=""
+    title=""
+  >
+    <icon-stub
+      cssclasses=""
+      name="download"
+      size="16"
+    />
+  </glbutton-stub>
+</div>
+`;

ee/spec/frontend/dependencies/components/dependencies_actions_spec.js

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlDropdownItem } from '@gitlab/ui';
+import { TEST_HOST } from 'helpers/test_constants';
+import createStore from 'ee/dependencies/store';
+import { SORT_FIELDS } from 'ee/dependencies/store/constants';
+import DependenciesActions from 'ee/dependencies/components/dependencies_actions.vue';
+
+describe('DependenciesActions component', () => {
+  let store;
+  let wrapper;
+
+  const factory = () => {
+    const localVue = createLocalVue();
+
+    store = createStore();
+    jest.spyOn(store, 'dispatch');
+
+    wrapper = shallowMount(localVue.extend(DependenciesActions), {
+      localVue,
+      store,
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    factory();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('dispatches the right setSortField action on clicking each item in the dropdown', () => {
+    const dropdownItems = wrapper.findAll(GlDropdownItem).wrappers;
+
+    dropdownItems.forEach(item => {
+      // trigger() does not work on stubbed/shallow mounted components
+      // https://github.com/vuejs/vue-test-utils/issues/919
+      item.vm.$emit('click');
+    });
+
+    expect(store.dispatch.mock.calls).toEqual(
+      expect.arrayContaining(Object.keys(SORT_FIELDS).map(field => ['setSortField', field])),
+    );
+  });
+
+  it('dispatches the toggleSortOrder action on clicking the sort order button', () => {
+    const sortButton = wrapper.find('.js-sort-order');
+    sortButton.vm.$emit('click');
+    expect(store.dispatch).toHaveBeenCalledWith('toggleSortOrder');
+  });
+
+  describe('given an endpoint', () => {
+    beforeEach(() => {
+      store.state.endpoint = `${TEST_HOST}/dependencies`;
+      return wrapper.vm.$nextTick();
+    });
+
+    it('has a button to export the dependency list', () => {
+      const download = wrapper.find('.js-download');
+      expect(download.attributes()).toEqual(
+        expect.objectContaining({
+          href: store.state.endpoint,
+          download: expect.any(String),
+        }),
+      );
+    });
+  });
+});

locale/gitlab.pot

@@ -4046,6 +4046,9 @@ msgstr ""
 msgid "Dependencies|Component name"
 msgstr ""
 
+msgid "Dependencies|Export as JSON"
+msgstr ""
+
 msgid "Dependencies|Job failed to generate the dependency list"
 msgstr ""