Merge branch 'paginate-license-management' into 'master'

Backport and Docs for Paginate license management and add license search

See merge request gitlab-org/gitlab-ce!27602

app/assets/javascripts/vue_shared/components/paginated_list.vue

+<script>
+import { GlPaginatedList } from '@gitlab/ui';
+import { PREV, NEXT } from '~/vue_shared/components/pagination/constants';
+
+export default {
+  components: {
+    GlPaginatedList,
+  },
+  labels: {
+    prev: PREV,
+    next: NEXT,
+  },
+};
+</script>
+
+<template>
+  <gl-paginated-list
+    v-bind="$attrs"
+    :prev-text="$options.labels.prev"
+    :next-text="$options.labels.next"
+  >
+    <!-- proxy the slots -->
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
+    <template #subheader>
+      <slot name="subheader"></slot>
+    </template>
+
+    <template #default="{ listItem, query }">
+      <slot :listItem="listItem" :query="query"></slot>
+    </template>
+  </gl-paginated-list>
+</template>

changelogs/unreleased/paginate-license-management.yml

+---
+title: Backport and Docs for Paginate license management and add license search
+merge_request: 27602
+author:
+type: changed

doc/user/application_security/license_management/index.md

@@ -262,6 +262,8 @@ To approve or blacklist a license:
    navigate to the project's **Settings > CI/CD** and expand the
    **License Management** section.
 1. Click the **Add a license** button.
+
+   ![License Management Add License](img/license_management_add_license.png)
 1. In the **License name** dropdown, either:
     - Select one of the available licenses. You can search for licenses in the field
    at the top of the list.
@@ -270,8 +272,22 @@ To approve or blacklist a license:
 1. Select the **Approve** or **Blacklist** radio button to approve or blacklist respectively
    the selected license.
 
+
+
+To modify an existing license:
+
+1. In the **License Management** list, click the **Approved/Declined** dropdown to change it to the desired status.
+
    ![License Management Settings](img/license_management_settings.png)
 
+Searching for Licenses:
+
+1. Use the **Search** box to search for a specific license.
+
+   ![License Management Search](img/license_management_search.png)
+
+
+
 ## License Management report under pipelines
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab-ee/issues/5491)

spec/frontend/vue_shared/components/paginated_list_spec.js

+import PaginatedList from '~/vue_shared/components/paginated_list.vue';
+import { PREV, NEXT } from '~/vue_shared/components/pagination/constants';
+import { mount } from '@vue/test-utils';
+
+describe('Pagination links component', () => {
+  let wrapper;
+  let glPaginatedList;
+
+  const template = `
+    <div class="slot" slot-scope="{ listItem }">
+      <span class="item">Item Name: {{listItem.id}}</span>
+    </div>
+  `;
+
+  const props = {
+    prevText: PREV,
+    nextText: NEXT,
+  };
+
+  beforeEach(() => {
+    wrapper = mount(PaginatedList, {
+      scopedSlots: {
+        default: template,
+      },
+      propsData: {
+        list: [{ id: 'foo' }, { id: 'bar' }],
+        props,
+      },
+    });
+
+    [glPaginatedList] = wrapper.vm.$children;
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Paginated List Component', () => {
+    describe('props', () => {
+      // We test attrs and not props because we pass through to child component using v-bind:"$attrs"
+      it('should pass prevText to GitLab UI paginated list', () => {
+        expect(glPaginatedList.$attrs['prev-text']).toBe(props.prevText);
+      });
+      it('should pass nextText to GitLab UI paginated list', () => {
+        expect(glPaginatedList.$attrs['next-text']).toBe(props.nextText);
+      });
+    });
+
+    describe('rendering', () => {
+      it('it renders the gl-paginated-list', () => {
+        expect(wrapper.contains('ul.list-group')).toBe(true);
+        expect(wrapper.findAll('li.list-group-item').length).toBe(2);
+      });
+    });
+  });
+});