Commit 3765eb1d authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '38414' into 'master'

Adjust Create issue button on the error tracking detail page for mobile

See merge request gitlab-org/gitlab!24390
parents 61171cc6 e5fa46d8
......@@ -10,6 +10,9 @@ import {
GlBadge,
GlAlert,
GlSprintf,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
} from '@gitlab/ui';
import { __, sprintf, n__ } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
......@@ -36,6 +39,9 @@ export default {
GlBadge,
GlAlert,
GlSprintf,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
},
directives: {
TrackEvent: TrackEventDirective,
......@@ -108,7 +114,7 @@ export default {
return sprintf(
__('Reported %{timeAgo} by %{reportedBy}'),
{
reportedBy: `<strong>${this.error.culprit}</strong>`,
reportedBy: `<strong class="error-details-meta-culprit">${this.error.culprit}</strong>`,
timeAgo: this.timeFormatted(this.stacktraceData.date_received),
},
false,
......@@ -144,6 +150,11 @@ export default {
false,
);
},
issueUpdateInProgress() {
return (
this.updatingIgnoreStatus || this.updatingResolveStatus || this.issueCreationInProgress
);
},
errorLevel() {
return sprintf(__('level: %{level}'), { level: this.error.tags.level });
},
......@@ -217,9 +228,12 @@ export default {
</gl-sprintf>
</gl-alert>
<div class="top-area align-items-center justify-content-between py-3">
<div class="error-details-header d-flex py-2 justify-content-between">
<div class="error-details-meta my-auto">
<span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span>
<div class="d-inline-flex ml-lg-auto">
</div>
<div class="error-details-actions">
<div class="d-inline-flex bv-d-sm-down-none">
<loading-button
:label="ignoreBtnLabel"
:loading="updatingIgnoreStatus"
......@@ -266,6 +280,39 @@ export default {
/>
</form>
</div>
<gl-dropdown
text="Options"
class="error-details-options d-md-none"
right
:disabled="issueUpdateInProgress"
>
<gl-dropdown-item
data-qa-selector="update_ignore_status_button"
@click="onIgnoreStatusUpdate"
>{{ ignoreBtnLabel }}</gl-dropdown-item
>
<gl-dropdown-item
data-qa-selector="update_resolve_status_button"
@click="onResolveStatusUpdate"
>{{ resolveBtnLabel }}</gl-dropdown-item
>
<gl-dropdown-divider />
<gl-dropdown-item
v-if="error.gitlabIssuePath"
data-qa-selector="view_issue_button"
:href="error.gitlabIssuePath"
variant="success"
>{{ __('View issue') }}</gl-dropdown-item
>
<gl-dropdown-item
v-if="!error.gitlabIssuePath"
:loading="issueCreationInProgress"
data-qa-selector="create_issue_button"
@click="createIssue"
>{{ __('Create issue') }}</gl-dropdown-item
>
</gl-dropdown>
</div>
</div>
<div>
<tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">
......@@ -300,7 +347,6 @@ export default {
<strong class="bold">{{ __('Sentry event') }}:</strong>
<gl-link
v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)"
class="d-inline-flex align-items-center"
:href="error.externalUrl"
target="_blank"
>
......
......@@ -7,6 +7,26 @@
color: $blue-500;
border-color: $blue-500;
}
.error-details-header {
border-bottom: 1px solid $border-color;
@include media-breakpoint-down(xs) {
flex-flow: column;
.error-details-meta-culprit {
display: flex;
}
.error-details-options {
width: 100%;
.dropdown-toggle {
text-align: center;
}
}
}
}
}
.stacktrace {
......
---
title: Fix error details layout and alignment for mobile view
merge_request: 24390
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment