Paginate license management and add license searchpaginate-license-management

First pass at license pagination

* Paginate license management client side
* Refactor license list into seperate component

Add string filtering to license names

* Add search input to query on license name

Add add license button

* Refactor add license button to be a slot

Clean up styles and button state logic

* Clean up alignment
* Disable button when dorpdown is open

Remove client side alphabetical sorting

* Let the databse return order by date

Refactor list to use row slot

Further abstract pagination list compnent

Finish refactor of paginated list

* Refactor component into generic paginated list component
* Add additional style tweaks + responsive classes

Run prettier

Update license_management_spec

Run Prettier

Add unit tests for paginated list component

* Refactor template to be valid html (li in ul)
* Add jest unit tests

Add additional unit tests

* Add unit tests around pagination and search states

Add unit tests for filter props

Pretty print, lint, and add changelog

Update po files

Regernate pot file

Backport EE changes

* Update paginated list component
* Update specs and snapshot

Add POT file

Update default copy for pagianted list

* update copy for empty and empty search result states

Update pot file

Backport changes from EE merge request

* Paginaed list component and specs

Backport EE changes

Update paginated list snapshot

Update license management docs and images

Backport paginated-list component from EE

Link to gitlab-ui artifacts job

Match gitlab ui build to EE

Update pot file

Backport Paginated list changes

Set gitlab-ui to temp artifact

Add changelog

1 files changed, 56 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/paginated_list_spec.js b/spec/frontend/vue_shared/components/paginated_list_spec.js
new file mode 100644
index 00000000000..31ac362d35f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/paginated_list_spec.js
@@ -0,0 +1,56 @@
+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);
+      });
+    });
+  });
+});