diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/alert_details')
6 files changed, 80 insertions, 35 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue b/app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue index 554c7a573fe..ca42cb0b1b5 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue @@ -64,6 +64,9 @@ export default { <sidebar-status :project-path="projectPath" :alert="alert" + :sidebar-collapsed="sidebarStatus" + text-class="gl-text-gray-500" + class="gl-w-70p" @toggle-sidebar="$emit('toggle-sidebar')" @alert-error="$emit('alert-error', $event)" /> diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue index 2a999b908f9..ef31106b709 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue @@ -192,21 +192,33 @@ export default { </script> <template> - <div class="block alert-assignees"> - <div ref="assignees" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')"> - <gl-icon name="user" :size="14" /> - <gl-loading-icon v-if="isUpdating" /> - </div> - <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left"> - <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK"> - <template #assignees> - {{ userName }} - </template> - </gl-sprintf> - </gl-tooltip> + <div + class="alert-assignees gl-py-5 gl-w-70p" + :class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': !sidebarCollapsed }" + > + <template v-if="sidebarCollapsed"> + <div + ref="assignees" + class="gl-mb-6 gl-ml-6" + data-testid="assignees-icon" + @click="$emit('toggle-sidebar')" + > + <gl-icon name="user" /> + <gl-loading-icon v-if="isUpdating" /> + </div> + <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left"> + <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK"> + <template #assignees> + {{ userName }} + </template> + </gl-sprintf> + </gl-tooltip> + </template> - <div class="hide-collapsed"> - <p class="title gl-display-flex gl-justify-content-space-between"> + <div v-else> + <p + class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between" + > {{ __('Assignee') }} <a v-if="isEditable" @@ -264,7 +276,11 @@ export default { </div> <gl-loading-icon v-if="isUpdating" :inline="true" /> - <div v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !userName }"> + <div + v-else-if="!isDropdownShowing" + class="hide-collapsed value gl-m-0" + :class="{ 'no-value': !userName }" + > <div v-if="userName" class="gl-display-inline-flex gl-mt-2" data-testid="assigned-users"> <span class="gl-relative gl-mr-4"> <img diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue index fd40b5d9f65..832b154b312 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue @@ -25,7 +25,7 @@ export default { </script> <template> - <div class="block gl-display-flex gl-justify-content-space-between"> + <div class="block gl-display-flex gl-justify-content-space-between gl-border-b-gray-100!"> <span class="issuable-header-text hide-collapsed"> {{ __('To Do') }} </span> diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue index 3822b9153a4..8715eb99518 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue @@ -30,6 +30,15 @@ export default { required: false, default: true, }, + sidebarCollapsed: { + type: Boolean, + required: false, + }, + textClass: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -48,34 +57,44 @@ export default { }, toggleFormDropdown() { this.isDropdownShowing = !this.isDropdownShowing; - const { dropdown } = this.$children[2].$refs.dropdown.$refs; + const { dropdown } = this.$refs.status.$refs.dropdown.$refs; if (dropdown && this.isDropdownShowing) { dropdown.show(); } }, - handleUpdating(updating) { - this.isUpdating = updating; + handleUpdating(isMutationInProgress) { + if (!isMutationInProgress) { + this.$emit('alert-update'); + } + this.isUpdating = isMutationInProgress; }, }, }; </script> <template> - <div class="block alert-status"> - <div ref="status" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')"> - <gl-icon name="status" :size="14" /> - <gl-loading-icon v-if="isUpdating" /> - </div> - <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left"> - <gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')"> - <template #status> - {{ alert.status.toLowerCase() }} - </template> - </gl-sprintf> - </gl-tooltip> + <div + class="alert-status gl-py-5" + :class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': !sidebarCollapsed }" + > + <template v-if="sidebarCollapsed"> + <div ref="status" class="gl-ml-6" data-testid="status-icon" @click="$emit('toggle-sidebar')"> + <gl-icon name="status" /> + <gl-loading-icon v-if="isUpdating" /> + </div> + <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left"> + <gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')"> + <template #status> + {{ alert.status.toLowerCase() }} + </template> + </gl-sprintf> + </gl-tooltip> + </template> - <div class="hide-collapsed"> - <p class="title gl-display-flex justify-content-between"> + <div v-else> + <p + class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between" + > {{ s__('AlertManagement|Status') }} <a v-if="isEditable" @@ -90,6 +109,7 @@ export default { </p> <alert-status + ref="status" :alert="alert" :project-path="projectPath" :is-dropdown-showing="isDropdownShowing" @@ -106,7 +126,7 @@ export default { class="value gl-m-0" :class="{ 'no-value': !statuses[alert.status] }" > - <span v-if="statuses[alert.status]" class="gl-text-gray-500" data-testid="status"> + <span v-if="statuses[alert.status]" :class="textClass" data-testid="status"> {{ statuses[alert.status] }} </span> <span v-else> diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue index 271f0b4e4bb..a2a4046ab81 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue @@ -134,7 +134,12 @@ export default { </script> <template> - <div :class="{ 'block todo': sidebarCollapsed, 'gl-ml-auto': !sidebarCollapsed }"> + <div + :class="{ + 'block todo': sidebarCollapsed, + 'gl-ml-auto': !sidebarCollapsed, + }" + > <todo data-testid="alert-todo-button" :collapsed="sidebarCollapsed" diff --git a/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql b/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql index bc4d91a51d1..f0095abfca1 100644 --- a/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql +++ b/app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql @@ -3,6 +3,7 @@ mutation createAlertIssue($projectPath: ID!, $iid: String!) { errors issue { iid + webUrl } } } |