diff options
Diffstat (limited to 'app/assets/javascripts/issue_show')
5 files changed, 25 insertions, 24 deletions
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue index e1b308c6f57..8a1a8448bb8 100644 --- a/app/assets/javascripts/issue_show/components/fields/description_template.vue +++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable @gitlab/vue-require-i18n-strings */ import $ from 'jquery'; import { GlIcon } from '@gitlab/ui'; import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors'; @@ -62,11 +61,15 @@ export default { data-toggle="dropdown" > <span class="dropdown-toggle-text">{{ __('Choose a template') }}</span> - <i aria-hidden="true" class="fa fa-chevron-down"> </i> + <gl-icon + name="chevron-down" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + aria-hidden="true" + /> </button> <div class="dropdown-menu dropdown-select"> <div class="dropdown-title gl-display-flex gl-justify-content-center"> - <span class="gl-ml-auto">Choose a template</span> + <span class="gl-ml-auto">{{ __('Choose a template') }}</span> <button class="dropdown-title-button dropdown-menu-close gl-ml-auto" :aria-label="__('Close')" @@ -82,7 +85,7 @@ export default { :placeholder="__('Filter')" autocomplete="off" /> - <i aria-hidden="true" class="fa fa-search dropdown-input-search"> </i> + <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" /> <gl-icon name="close" class="dropdown-input-clear js-dropdown-input-clear" diff --git a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue index a47fe4c84cf..b2aa5265331 100644 --- a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue +++ b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue @@ -1,11 +1,14 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlLink, GlTooltipDirective } from '@gitlab/ui'; import { formatDate } from '~/lib/utils/datetime_utility'; export default { components: { GlLink, }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { alert: { type: Object, @@ -22,19 +25,21 @@ export default { <template> <div - class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between" + class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between gl-xs-flex-direction-column" > - <div class="text-truncate gl-pr-3"> + <div class="gl-pr-3"> <span class="gl-font-weight-bold">{{ s__('HighlightBar|Original alert:') }}</span> - <gl-link :href="alert.detailsUrl">{{ alert.title }}</gl-link> + <gl-link v-gl-tooltip :title="alert.title" :href="alert.detailsUrl"> + #{{ alert.iid }} + </gl-link> </div> - <div class="gl-pr-3 gl-white-space-nowrap"> + <div class="gl-pr-3"> <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert start time:') }}</span> {{ startTime }} </div> - <div class="gl-white-space-nowrap"> + <div> <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert events:') }}</span> <span>{{ alert.eventCount }}</span> </div> diff --git a/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue index 4104ddbf06f..5925c013e89 100644 --- a/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue +++ b/app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue @@ -45,13 +45,6 @@ export default { loading() { return this.$apollo.queries.alert.loading; }, - alertTableFields() { - if (this.alert) { - const { detailsUrl, __typename, ...restDetails } = this.alert; - return restDetails; - } - return null; - }, }, }; </script> @@ -64,7 +57,7 @@ export default { <description-component v-bind="$attrs" /> </gl-tab> <gl-tab v-if="alert" class="alert-management-details" :title="s__('Incident|Alert details')"> - <alert-details-table :alert="alertTableFields" :loading="loading" /> + <alert-details-table :alert="alert" :loading="loading" /> </gl-tab> </gl-tabs> </div> diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js index c6f7e892f9b..06bbd406e3a 100644 --- a/app/assets/javascripts/issue_show/stores/index.js +++ b/app/assets/javascripts/issue_show/stores/index.js @@ -1,4 +1,4 @@ -import { sanitize } from 'dompurify'; +import { sanitize } from '~/lib/dompurify'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import updateDescription from '../utils/update_description'; diff --git a/app/assets/javascripts/issue_show/utils/parse_data.js b/app/assets/javascripts/issue_show/utils/parse_data.js index a62a5167961..f2d1650fed1 100644 --- a/app/assets/javascripts/issue_show/utils/parse_data.js +++ b/app/assets/javascripts/issue_show/utils/parse_data.js @@ -1,4 +1,5 @@ -import { sanitize } from 'dompurify'; +import * as Sentry from '@sentry/browser'; +import { sanitize } from '~/lib/dompurify'; // We currently load + parse the data from the issue app and related merge request let cachedParsedData; @@ -7,10 +8,9 @@ export const parseIssuableData = () => { try { if (cachedParsedData) return cachedParsedData; - const initialDataEl = document.getElementById('js-issuable-app-initial-data'); - - const parsedData = JSON.parse(initialDataEl.textContent.replace(/"/g, '"')); + const initialDataEl = document.getElementById('js-issuable-app'); + const parsedData = JSON.parse(initialDataEl.dataset.initial); parsedData.initialTitleHtml = sanitize(parsedData.initialTitleHtml); parsedData.initialDescriptionHtml = sanitize(parsedData.initialDescriptionHtml); @@ -18,7 +18,7 @@ export const parseIssuableData = () => { return parsedData; } catch (e) { - console.error(e); // eslint-disable-line no-console + Sentry.captureException(e); return {}; } |