diff options
Diffstat (limited to 'app/assets/javascripts/reports/components')
8 files changed, 60 insertions, 109 deletions
diff --git a/app/assets/javascripts/reports/components/grouped_issues_list.vue b/app/assets/javascripts/reports/components/grouped_issues_list.vue index 97587636644..1826fbaddac 100644 --- a/app/assets/javascripts/reports/components/grouped_issues_list.vue +++ b/app/assets/javascripts/reports/components/grouped_issues_list.vue @@ -41,7 +41,7 @@ export default { computed: { groups() { return this.$options.groups - .map(group => ({ + .map((group) => ({ name: group, issues: this[`${group}Issues`], heading: this[`${group}Heading`], diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue index c13df60198b..bf1868d427e 100644 --- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue +++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue @@ -10,7 +10,6 @@ import IssuesList from './issues_list.vue'; import Modal from './modal.vue'; import createStore from '../store'; import Tracking from '~/tracking'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { summaryTextBuilder, reportTextBuilder, @@ -28,7 +27,7 @@ export default { Modal, GlButton, }, - mixins: [glFeatureFlagsMixin(), Tracking.mixin()], + mixins: [Tracking.mixin()], props: { endpoint: { type: String, @@ -44,8 +43,9 @@ export default { computed: { ...mapState(['reports', 'isLoading', 'hasError', 'summary']), ...mapState({ - modalTitle: state => state.modal.title || '', - modalData: state => state.modal.data || {}, + modalTitle: (state) => state.modal.title || '', + modalData: (state) => state.modal.data || {}, + modalOpen: (state) => state.modal.open || false, }), ...mapGetters(['summaryStatus']), groupedSummaryText() { @@ -77,7 +77,7 @@ export default { this.fetchReports(); }, methods: { - ...mapActions(['setEndpoint', 'fetchReports']), + ...mapActions(['setEndpoint', 'fetchReports', 'closeModal']), reportText(report) { const { name, summary } = report || {}; @@ -92,7 +92,7 @@ export default { return reportTextBuilder(name, summary); }, hasRecentFailures(summary) { - return this.glFeatures.testFailureHistory && summary?.recentlyFailed > 0; + return summary?.recentlyFailed > 0; }, recentFailuresText(summary) { return recentFailuresTextBuilder(summary); @@ -171,8 +171,12 @@ export default { class="report-block-group-list" /> </template> - - <modal :title="modalTitle" :modal-data="modalData" /> + <modal + :visible="modalOpen" + :title="modalTitle" + :modal-data="modalData" + @hide="closeModal" + /> </div> </template> </report-section> diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue index ee07efea3b0..16d5b14d3e9 100644 --- a/app/assets/javascripts/reports/components/issues_list.vue +++ b/app/assets/javascripts/reports/components/issues_list.vue @@ -3,7 +3,7 @@ import ReportItem from '~/reports/components/report_item.vue'; import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '~/reports/constants'; import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue'; -const wrapIssueWithState = (status, isNew = false) => issue => ({ +const wrapIssueWithState = (status, isNew = false) => (issue) => ({ status: issue.status || status, isNew, issue, diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/components/modal.vue index ca95db6c826..6243bddf941 100644 --- a/app/assets/javascripts/reports/components/modal.vue +++ b/app/assets/javascripts/reports/components/modal.vue @@ -1,15 +1,21 @@ <script> -// import { sprintf, __ } from '~/locale'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; +import { GlModal, GlLink, GlSprintf } from '@gitlab/ui'; + import CodeBlock from '~/vue_shared/components/code_block.vue'; import { fieldTypes } from '../constants'; export default { components: { - Modal: DeprecatedModal2, CodeBlock, + GlModal, + GlLink, + GlSprintf, }, props: { + visible: { + type: Boolean, + required: true, + }, title: { type: String, required: true, @@ -23,39 +29,43 @@ export default { }; </script> <template> - <modal - id="modal-mrwidget-reports" - :header-title-text="title" - class="modal-security-report-dast modal-hide-footer" + <gl-modal + :visible="visible" + modal-id="modal-mrwidget-reports" + :title="title" + :hide-footer="true" + @hide="$emit('hide')" > - <slot> - <div - v-for="(field, key, index) in modalData" - v-if="field.value" - :key="index" - class="row gl-mt-3 gl-mb-3" - > - <strong class="col-sm-3 text-right"> {{ field.text }}: </strong> + <div + v-for="(field, key, index) in modalData" + v-if="field.value" + :key="index" + class="row gl-mt-3 gl-mb-3" + > + <strong class="col-sm-3 text-right"> {{ field.text }}: </strong> - <div class="col-sm-9 text-secondary"> - <code-block v-if="field.type === $options.fieldTypes.codeBock" :code="field.value" /> + <div class="col-sm-9 text-secondary"> + <code-block v-if="field.type === $options.fieldTypes.codeBock" :code="field.value" /> - <template v-else-if="field.type === $options.fieldTypes.link"> - <a :href="field.value" target="_blank" rel="noopener noreferrer" class="js-modal-link"> - {{ field.value }} - </a> - </template> + <gl-link + v-else-if="field.type === $options.fieldTypes.link" + :href="field.value" + target="_blank" + > + {{ field.value }} + </gl-link> - <template v-else-if="field.type === $options.fieldTypes.seconds">{{ - sprintf(__('%{value} s'), { value: field.value }) - }}</template> + <gl-sprintf + v-else-if="field.type === $options.fieldTypes.seconds" + :message="__('%{value} s')" + > + <template #value>{{ field.value }}</template> + </gl-sprintf> - <template v-else-if="field.type === $options.fieldTypes.text"> - {{ field.value }} - </template> - </div> + <template v-else-if="field.type === $options.fieldTypes.text"> + {{ field.value }} + </template> </div> - </slot> - <div slot="footer"></div> - </modal> + </div> + </gl-modal> </template> diff --git a/app/assets/javascripts/reports/components/modal_open_name.vue b/app/assets/javascripts/reports/components/modal_open_name.vue deleted file mode 100644 index 78e1fcb205b..00000000000 --- a/app/assets/javascripts/reports/components/modal_open_name.vue +++ /dev/null @@ -1,51 +0,0 @@ -<script> -import { GlTooltipDirective, GlResizeObserverDirective } from '@gitlab/ui'; -import { mapActions } from 'vuex'; - -export default { - directives: { - GlTooltip: GlTooltipDirective, - GlResizeObserverDirective, - }, - props: { - issue: { - type: Object, - required: true, - }, - // failed || success - status: { - type: String, - required: true, - }, - }, - data: () => ({ - tooltipTitle: '', - }), - mounted() { - this.updateTooltipTitle(); - }, - methods: { - ...mapActions(['openModal']), - handleIssueClick() { - const { issue, status, openModal } = this; - openModal({ issue, status }); - }, - updateTooltipTitle() { - // Only show the tooltip if the text is truncated with an ellipsis. - this.tooltipTitle = this.$el.offsetWidth < this.$el.scrollWidth ? this.issue.title : ''; - }, - }, -}; -</script> -<template> - <button - v-gl-tooltip="{ boundary: 'viewport' }" - v-gl-resize-observer-directive="updateTooltipTitle" - class="btn-link gl-text-truncate" - :aria-label="s__('Reports|Vulnerability Name')" - :title="tooltipTitle" - @click="handleIssueClick()" - > - {{ issue.title }} - </button> -</template> diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue index 1b47d03aa01..df20d5c19ba 100644 --- a/app/assets/javascripts/reports/components/report_item.vue +++ b/app/assets/javascripts/reports/components/report_item.vue @@ -17,7 +17,7 @@ export default { type: String, required: false, default: '', - validator: value => value === '' || Object.values(componentNames).includes(value), + validator: (value) => value === '' || Object.values(componentNames).includes(value), }, // failed || success status: { diff --git a/app/assets/javascripts/reports/components/report_link.vue b/app/assets/javascripts/reports/components/report_link.vue index f285b526a54..1f68f79e487 100644 --- a/app/assets/javascripts/reports/components/report_link.vue +++ b/app/assets/javascripts/reports/components/report_link.vue @@ -21,16 +21,10 @@ export default { rel="noopener noreferrer nofollow" class="break-link" > - {{ issue.path - }}<template v-if="issue.line" - >:{{ issue.line }}</template - > + {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template> </a> <template v-else> - {{ issue.path - }}<template v-if="issue.line" - >:{{ issue.line }}</template - > + {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template> </template> </div> </template> diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue index 69b0dcf881d..ad980b334bb 100644 --- a/app/assets/javascripts/reports/components/test_issue_body.vue +++ b/app/assets/javascripts/reports/components/test_issue_body.vue @@ -1,7 +1,6 @@ <script> import { mapActions } from 'vuex'; import { GlBadge, GlSprintf } from '@gitlab/ui'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { name: 'TestIssueBody', @@ -9,7 +8,6 @@ export default { GlBadge, GlSprintf, }, - mixins: [glFeatureFlagsMixin()], props: { issue: { type: Object, @@ -28,11 +26,7 @@ export default { }, computed: { showRecentFailures() { - return ( - this.glFeatures.testFailureHistory && - this.issue.recent_failures?.count && - this.issue.recent_failures?.base_branch - ); + return this.issue.recent_failures?.count && this.issue.recent_failures?.base_branch; }, }, methods: { |