diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-08 09:09:24 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-08 09:09:24 +0300 |
commit | dabcc5d12d22ca30d83c986d6ca0b9b81e7ccbfc (patch) | |
tree | 402520b6779be27a17265dd10b978836e7955e53 /app/assets/javascripts/vue_shared | |
parent | 72db8879531eb432b1d3b6957477543d59d94c49 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared')
5 files changed, 151 insertions, 80 deletions
diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue index 65a601ed927..a1ef1f30ebb 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue @@ -38,7 +38,16 @@ export default { default: CONFIRM_DANGER_MODAL_CANCEL, }, }, + model: { + prop: 'visible', + event: 'change', + }, props: { + visible: { + type: Boolean, + required: false, + default: null, + }, modalId: { type: String, required: true, @@ -89,12 +98,15 @@ export default { <template> <gl-modal ref="modal" + :visible="visible" :modal-id="modalId" :data-testid="modalId" :title="$options.i18n.CONFIRM_DANGER_MODAL_TITLE" :action-primary="actionPrimary" :action-cancel="actionCancel" + size="sm" @primary="$emit('confirm')" + @change="$emit('change', $event)" > <gl-alert v-if="confirmDangerMessage" diff --git a/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue b/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue index 7da45169fee..a375a167c68 100644 --- a/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue +++ b/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue @@ -24,6 +24,7 @@ export default { :key="group.id" :group="group" :show-group-icon="showGroupIcon" + @delete="$emit('delete', $event)" /> </ul> </template> diff --git a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue index 8a301cd0dd0..ca1e7400f2d 100644 --- a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue +++ b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue @@ -1,5 +1,6 @@ <script> import { GlAvatarLabeled, GlIcon, GlTooltipDirective, GlTruncateText } from '@gitlab/ui'; +import uniqueId from 'lodash/uniqueId'; import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '~/visibility_level/constants'; import { ACCESS_LEVEL_LABELS } from '~/access_level/constants'; @@ -7,6 +8,9 @@ import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge. import { __ } from '~/locale'; import { numberToMetricPrefix } from '~/lib/utils/number_utils'; import SafeHtml from '~/vue_shared/directives/safe_html'; +import { ACTION_EDIT, ACTION_DELETE } from '~/vue_shared/components/list_actions/constants'; +import ListActions from '~/vue_shared/components/list_actions/list_actions.vue'; +import DangerConfirmModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue'; export default { i18n: { @@ -25,6 +29,8 @@ export default { GlIcon, UserAccessRoleBadge, GlTruncateText, + ListActions, + DangerConfirmModal, }, directives: { GlTooltip: GlTooltipDirective, @@ -41,6 +47,12 @@ export default { default: false, }, }, + data() { + return { + isDeleteModalVisible: false, + modalId: uniqueId('groups-list-item-modal-id-'), + }; + }, computed: { visibility() { return this.group.visibility; @@ -75,94 +87,131 @@ export default { groupMembersCount() { return numberToMetricPrefix(this.group.groupMembersCount); }, + actions() { + return { + [ACTION_EDIT]: { + href: this.group.editPath, + }, + [ACTION_DELETE]: { + action: this.onActionDelete, + }, + }; + }, + hasActions() { + return this.group.availableActions?.length; + }, + hasActionDelete() { + return this.group.availableActions?.includes(ACTION_DELETE); + }, + }, + methods: { + onActionDelete() { + this.isDeleteModalVisible = true; + }, }, }; </script> <template> - <li class="groups-list-item gl-py-5 gl-md-display-flex gl-align-items-center gl-border-b"> - <div class="gl-display-flex gl-flex-grow-1"> - <gl-icon - v-if="showGroupIcon" - class="gl-mr-3 gl-mt-3 gl-md-mt-5 gl-flex-shrink-0 gl-text-secondary" - :name="groupIconName" - /> - <gl-avatar-labeled - :entity-id="group.id" - :entity-name="group.fullName" - :label="group.fullName" - :label-link="group.webUrl" - shape="rect" - :size="$options.avatarSize" - > - <template #meta> - <div class="gl-px-2"> - <div class="gl-mx-n2 gl-display-flex gl-align-items-center gl-flex-wrap"> - <div class="gl-px-2"> - <gl-icon - v-if="visibility" - v-gl-tooltip="visibilityTooltip" - :name="visibilityIcon" - class="gl-text-secondary" - /> - </div> - <div class="gl-px-2"> - <user-access-role-badge v-if="shouldShowAccessLevel">{{ - accessLevelLabel - }}</user-access-role-badge> + <li class="groups-list-item gl-py-5 gl-border-b gl-display-flex gl-align-items-flex-start"> + <div class="gl-md-display-flex gl-align-items-center gl-flex-grow-1"> + <div class="gl-display-flex gl-flex-grow-1"> + <gl-icon + v-if="showGroupIcon" + class="gl-mr-3 gl-mt-3 gl-md-mt-5 gl-flex-shrink-0 gl-text-secondary" + :name="groupIconName" + /> + <gl-avatar-labeled + :entity-id="group.id" + :entity-name="group.fullName" + :label="group.fullName" + :label-link="group.webUrl" + shape="rect" + :size="$options.avatarSize" + > + <template #meta> + <div class="gl-px-2"> + <div class="gl-mx-n2 gl-display-flex gl-align-items-center gl-flex-wrap"> + <div class="gl-px-2"> + <gl-icon + v-if="visibility" + v-gl-tooltip="visibilityTooltip" + :name="visibilityIcon" + class="gl-text-secondary" + /> + </div> + <div class="gl-px-2"> + <user-access-role-badge v-if="shouldShowAccessLevel">{{ + accessLevelLabel + }}</user-access-role-badge> + </div> </div> </div> + </template> + <gl-truncate-text + v-if="group.descriptionHtml" + :lines="2" + :mobile-lines="2" + :show-more-text="$options.i18n.showMore" + :show-less-text="$options.i18n.showLess" + class="gl-mt-2" + > + <div + v-safe-html:[$options.safeHtmlConfig]="group.descriptionHtml" + class="gl-font-sm md" + data-testid="group-description" + ></div> + </gl-truncate-text> + </gl-avatar-labeled> + </div> + <div + class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0 gl-md-ml-3" + :class="statsPadding" + > + <div class="gl-display-flex gl-align-items-center gl-gap-x-3"> + <div + v-gl-tooltip="$options.i18n.subgroups" + :aria-label="$options.i18n.subgroups" + class="gl-text-secondary" + data-testid="subgroups-count" + > + <gl-icon name="subgroup" /> + <span>{{ descendantGroupsCount }}</span> </div> - </template> - <gl-truncate-text - v-if="group.descriptionHtml" - :lines="2" - :mobile-lines="2" - :show-more-text="$options.i18n.showMore" - :show-less-text="$options.i18n.showLess" - class="gl-mt-2" - > <div - v-safe-html:[$options.safeHtmlConfig]="group.descriptionHtml" - class="gl-font-sm md" - data-testid="group-description" - ></div> - </gl-truncate-text> - </gl-avatar-labeled> - </div> - <div - class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0 gl-md-ml-3" - :class="statsPadding" - > - <div class="gl-display-flex gl-align-items-center gl-gap-x-3"> - <div - v-gl-tooltip="$options.i18n.subgroups" - :aria-label="$options.i18n.subgroups" - class="gl-text-secondary" - data-testid="subgroups-count" - > - <gl-icon name="subgroup" /> - <span>{{ descendantGroupsCount }}</span> - </div> - <div - v-gl-tooltip="$options.i18n.projects" - :aria-label="$options.i18n.projects" - class="gl-text-secondary" - data-testid="projects-count" - > - <gl-icon name="project" /> - <span>{{ projectsCount }}</span> - </div> - <div - v-gl-tooltip="$options.i18n.directMembers" - :aria-label="$options.i18n.directMembers" - class="gl-text-secondary" - data-testid="members-count" - > - <gl-icon name="users" /> - <span>{{ groupMembersCount }}</span> + v-gl-tooltip="$options.i18n.projects" + :aria-label="$options.i18n.projects" + class="gl-text-secondary" + data-testid="projects-count" + > + <gl-icon name="project" /> + <span>{{ projectsCount }}</span> + </div> + <div + v-gl-tooltip="$options.i18n.directMembers" + :aria-label="$options.i18n.directMembers" + class="gl-text-secondary" + data-testid="members-count" + > + <gl-icon name="users" /> + <span>{{ groupMembersCount }}</span> + </div> </div> </div> </div> + <list-actions + v-if="hasActions" + class="gl-ml-3 gl-md-align-self-center" + :actions="actions" + :available-actions="group.availableActions" + /> + + <danger-confirm-modal + v-if="hasActionDelete" + v-model="isDeleteModalVisible" + :modal-id="modalId" + :phrase="group.fullName" + @confirm="$emit('delete', group)" + /> </li> </template> diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue index 96dc2007ecf..05ce007e615 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue @@ -39,6 +39,13 @@ export default { return n__('Apply %d suggestion', 'Apply %d suggestions', this.batchSuggestionsCount); }, + helperText() { + if (this.batchSuggestionsCount <= 1) { + return __('This also resolves this thread'); + } + + return __('This also resolves all related threads'); + }, }, methods: { onApply() { @@ -78,6 +85,10 @@ export default { @submit="onApply" /> + <span class="gl-mt-2 gl-text-secondary"> + {{ helperText }} + </span> + <gl-button class="gl-w-auto! gl-mt-3 gl-align-self-end" category="primary" diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue index 855c7a449c4..8a0ca8ebac1 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue @@ -77,9 +77,7 @@ export default { return this.inapplicableReason; } - return this.batchSuggestionsCount > 1 - ? __('This also resolves all related threads') - : __('This also resolves this thread'); + return false; }, isDisableButton() { return this.isApplying || !this.canApply; |