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
This commit is contained in:
parent
adeccba136
commit
91cf0cb2d5
|
@ -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>
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Backport and Docs for Paginate license management and add license search
|
||||
merge_request: 27602
|
||||
author:
|
||||
type: changed
|
Binary file not shown.
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 168 KiB |
|
@ -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)
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue