From 91cf0cb2d53b6f48560862fc121f897bb7331046 Mon Sep 17 00:00:00 2001 From: Fernando Date: Sun, 14 Apr 2019 11:05:28 -0500 Subject: Paginate license management and add license search 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 --- .../vue_shared/components/paginated_list.vue | 35 +++++++++++++ .../unreleased/paginate-license-management.yml | 5 ++ .../img/license_management_add_license.png | Bin 0 -> 87049 bytes .../img/license_management_search.png | Bin 0 -> 104278 bytes .../img/license_management_settings.png | Bin 13300 -> 171592 bytes .../license_management/index.md | 16 ++++++ .../vue_shared/components/paginated_list_spec.js | 56 +++++++++++++++++++++ 7 files changed, 112 insertions(+) create mode 100644 app/assets/javascripts/vue_shared/components/paginated_list.vue create mode 100644 changelogs/unreleased/paginate-license-management.yml create mode 100644 doc/user/application_security/license_management/img/license_management_add_license.png create mode 100644 doc/user/application_security/license_management/img/license_management_search.png create mode 100644 spec/frontend/vue_shared/components/paginated_list_spec.js 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 @@ + + + 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 Binary files /dev/null and b/doc/user/application_security/license_management/img/license_management_add_license.png differ 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 Binary files /dev/null and b/doc/user/application_security/license_management/img/license_management_search.png differ 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 Binary files a/doc/user/application_security/license_management/img/license_management_settings.png and b/doc/user/application_security/license_management/img/license_management_settings.png differ 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 = ` +
+ Item Name: {{listItem.id}} +
+ `; + + 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); + }); + }); + }); +}); -- cgit v1.2.1