diff options
Diffstat (limited to 'app/assets/javascripts/groups')
7 files changed, 98 insertions, 15 deletions
diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue index 8c7192b49a0..d2a613bed4f 100644 --- a/app/assets/javascripts/groups/components/group_folder.vue +++ b/app/assets/javascripts/groups/components/group_folder.vue @@ -1,8 +1,12 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { n__ } from '../../locale'; import { MAX_CHILDREN_COUNT } from '../constants'; export default { + components: { + GlIcon, + }, props: { parentGroup: { type: Object, @@ -45,7 +49,7 @@ export default { /> <li v-if="hasMoreChildren" class="group-row"> <a :href="parentGroup.relativePath" class="group-row-contents has-more-items py-2"> - <i class="fa fa-external-link" aria-hidden="true"> </i> {{ moreChildrenStats }} + <gl-icon name="external-link" aria-hidden="true" /> {{ moreChildrenStats }} </a> </li> </ul> diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index 5487e25066e..2e92a608f76 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -53,6 +53,7 @@ export default { :aria-label="leaveBtnTitle" data-container="body" data-placement="bottom" + data-testid="leave-group-btn" class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5" @click.prevent="onLeaveGroup" > @@ -66,6 +67,7 @@ export default { :aria-label="editBtnTitle" data-container="body" data-placement="bottom" + data-testid="edit-group-btn" class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5" > <gl-icon name="settings" class="position-top-0 align-middle" /> diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue index 18efd8c6823..52dc7cfa19d 100644 --- a/app/assets/javascripts/groups/components/item_stats_value.vue +++ b/app/assets/javascripts/groups/components/item_stats_value.vue @@ -1,13 +1,12 @@ <script> -import { GlIcon } from '@gitlab/ui'; -import tooltip from '~/vue_shared/directives/tooltip'; +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; export default { components: { GlIcon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { title: { @@ -51,12 +50,13 @@ export default { <template> <span - v-tooltip + v-gl-tooltip :data-placement="tooltipPlacement" :class="cssClass" :title="title" data-container="body" > - <gl-icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span> + <gl-icon :name="iconName" /> + <span v-if="isValuePresent" class="stat-value" data-testid="itemStatValue"> {{ value }} </span> </span> </template> diff --git a/app/assets/javascripts/groups/members/components/app.vue b/app/assets/javascripts/groups/members/components/app.vue index e94b28f5773..2e6dd4a0bad 100644 --- a/app/assets/javascripts/groups/members/components/app.vue +++ b/app/assets/javascripts/groups/members/components/app.vue @@ -1,11 +1,38 @@ <script> +import { mapState, mapMutations } from 'vuex'; +import { GlAlert } from '@gitlab/ui'; +import MembersTable from '~/vue_shared/components/members/table/members_table.vue'; +import { scrollToElement } from '~/lib/utils/common_utils'; +import { HIDE_ERROR } from '~/vuex_shared/modules/members/mutation_types'; + export default { name: 'GroupMembersApp', + components: { MembersTable, GlAlert }, + computed: { + ...mapState(['showError', 'errorMessage']), + }, + watch: { + showError(value) { + if (value) { + this.$nextTick(() => { + scrollToElement(this.$refs.errorAlert.$el); + }); + } + }, + }, + methods: { + ...mapMutations({ + hideError: HIDE_ERROR, + }), + }, }; </script> <template> - <span> - <!-- Temporary empty template --> - </span> + <div> + <gl-alert v-if="showError" ref="errorAlert" variant="danger" @dismiss="hideError">{{ + errorMessage + }}</gl-alert> + <members-table /> + </div> </template> diff --git a/app/assets/javascripts/groups/members/constants.js b/app/assets/javascripts/groups/members/constants.js new file mode 100644 index 00000000000..6d71b666d7a --- /dev/null +++ b/app/assets/javascripts/groups/members/constants.js @@ -0,0 +1,5 @@ +export const GROUP_MEMBER_BASE_PROPERTY_NAME = 'group_member'; +export const GROUP_MEMBER_ACCESS_LEVEL_PROPERTY_NAME = 'access_level'; + +export const GROUP_LINK_BASE_PROPERTY_NAME = 'group_link'; +export const GROUP_LINK_ACCESS_LEVEL_PROPERTY_NAME = 'group_access'; diff --git a/app/assets/javascripts/groups/members/index.js b/app/assets/javascripts/groups/members/index.js index 4ca1756f10c..3bbef14d199 100644 --- a/app/assets/javascripts/groups/members/index.js +++ b/app/assets/javascripts/groups/members/index.js @@ -1,23 +1,24 @@ import Vue from 'vue'; import Vuex from 'vuex'; +import { GlToast } from '@gitlab/ui'; +import { parseDataAttributes } from 'ee_else_ce/groups/members/utils'; import App from './components/app.vue'; import membersModule from '~/vuex_shared/modules/members'; -import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; -export default el => { +export const initGroupMembersApp = (el, tableFields, requestFormatter) => { if (!el) { return () => {}; } Vue.use(Vuex); - - const { members, groupId } = el.dataset; + Vue.use(GlToast); const store = new Vuex.Store({ ...membersModule({ - members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }), - sourceId: parseInt(groupId, 10), + ...parseDataAttributes(el), currentUserId: gon.current_user_id || null, + tableFields, + requestFormatter, }), }); diff --git a/app/assets/javascripts/groups/members/utils.js b/app/assets/javascripts/groups/members/utils.js new file mode 100644 index 00000000000..662eecc4e38 --- /dev/null +++ b/app/assets/javascripts/groups/members/utils.js @@ -0,0 +1,44 @@ +import { isUndefined } from 'lodash'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { + GROUP_MEMBER_BASE_PROPERTY_NAME, + GROUP_MEMBER_ACCESS_LEVEL_PROPERTY_NAME, + GROUP_LINK_BASE_PROPERTY_NAME, + GROUP_LINK_ACCESS_LEVEL_PROPERTY_NAME, +} from './constants'; + +export const parseDataAttributes = el => { + const { members, groupId, memberPath } = el.dataset; + + return { + members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }), + sourceId: parseInt(groupId, 10), + memberPath, + }; +}; + +const baseRequestFormatter = (basePropertyName, accessLevelPropertyName) => ({ + accessLevel, + ...otherProperties +}) => { + const accessLevelProperty = !isUndefined(accessLevel) + ? { [accessLevelPropertyName]: accessLevel } + : {}; + + return { + [basePropertyName]: { + ...accessLevelProperty, + ...otherProperties, + }, + }; +}; + +export const memberRequestFormatter = baseRequestFormatter( + GROUP_MEMBER_BASE_PROPERTY_NAME, + GROUP_MEMBER_ACCESS_LEVEL_PROPERTY_NAME, +); + +export const groupLinkRequestFormatter = baseRequestFormatter( + GROUP_LINK_BASE_PROPERTY_NAME, + GROUP_LINK_ACCESS_LEVEL_PROPERTY_NAME, +); |