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

7 files changed, 112 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/paginated_list.vue b/app/assets/javascripts/vue_shared/components/paginated_list.vue
new file mode 100644
index 00000000000..e19b8510399
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/paginated_list.vue
@@ -0,0 +1,35 @@
+<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>
diff --git a/changelogs/unreleased/paginate-license-management.yml b/changelogs/unreleased/paginate-license-management.yml
new file mode 100644
index 00000000000..c5134978612
--- /dev/null
+++ b/changelogs/unreleased/paginate-license-management.yml
@@ -0,0 +1,5 @@
+---
+title: Backport and Docs for Paginate license management and add license search
+merge_request: 27602
+author:
+type: changed
diff --git a/doc/user/application_security/license_management/img/license_management_add_license.png b/doc/user/application_security/license_management/img/license_management_add_license.png
new file mode 100644
index 00000000000..1e1a698515b
--- /dev/null
+++ b/doc/user/application_security/license_management/img/license_management_add_license.png
diff --git a/doc/user/application_security/license_management/img/license_management_search.png b/doc/user/application_security/license_management/img/license_management_search.png
new file mode 100644
index 00000000000..7b6006cef9d
--- /dev/null
+++ b/doc/user/application_security/license_management/img/license_management_search.png
diff --git a/doc/user/application_security/license_management/img/license_management_settings.png b/doc/user/application_security/license_management/img/license_management_settings.png
index b5490e59074..1a2bfa78a03 100644
--- a/doc/user/application_security/license_management/img/license_management_settings.png
+++ b/doc/user/application_security/license_management/img/license_management_settings.png
diff --git a/doc/user/application_security/license_management/index.md b/doc/user/application_security/license_management/index.md
index 7a583016586..957c4ede981 100644
--- a/doc/user/application_security/license_management/index.md
+++ b/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)
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);
+      });
+    });
+  });
+});