diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-15 18:10:07 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-15 18:10:07 +0300 |
commit | 12a224d5db7aebdb30cda8ffb75c69fc66d07096 (patch) | |
tree | b76fd3f006aef2f6cc81a2df18fc73dcf1727bb8 /app/assets/javascripts/issues/show | |
parent | 8470023ba6ca065d0491c37c33e2348e499df8b3 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/issues/show')
8 files changed, 77 insertions, 51 deletions
diff --git a/app/assets/javascripts/issues/show/components/app.vue b/app/assets/javascripts/issues/show/components/app.vue index 633f336b0c0..26c3db647a3 100644 --- a/app/assets/javascripts/issues/show/components/app.vue +++ b/app/assets/javascripts/issues/show/components/app.vue @@ -15,7 +15,6 @@ import { visitUrl } from '~/lib/utils/url_utility'; import { __, sprintf } from '~/locale'; import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue'; import { containsSensitiveToken, confirmSensitiveAction, i18n } from '~/lib/utils/secret_detection'; -import { WORK_ITEM_TYPE_VALUE_ISSUE } from '~/work_items/constants'; import { ISSUE_TYPE_PATH, INCIDENT_TYPE_PATH, POLLING_DELAY } from '../constants'; import eventHub from '../event_hub'; import getIssueStateQuery from '../queries/get_issue_state.query.graphql'; @@ -233,11 +232,6 @@ export default { required: false, default: '', }, - workItemType: { - type: String, - required: false, - default: '', - }, }, data() { const store = new Store({ @@ -267,8 +261,8 @@ export default { }, }, computed: { - isIssue() { - return this.workItemType === WORK_ITEM_TYPE_VALUE_ISSUE; + headerClasses() { + return this.issuableType === TYPE_INCIDENT ? 'gl-mb-3' : 'gl-mb-6'; }, issuableTemplates() { return this.store.formState.issuableTemplates; @@ -307,10 +301,10 @@ export default { : ''; }, statusIcon() { - if (this.issuableType === TYPE_ISSUE) { - return this.isClosed ? 'issue-closed' : 'issues'; + if (this.issuableType === TYPE_EPIC) { + return this.isClosed ? 'epic-closed' : 'epic'; } - return this.isClosed ? 'epic-closed' : 'epic'; + return this.isClosed ? 'issue-closed' : 'issues'; }, statusVariant() { return this.isClosed ? 'info' : 'success'; @@ -319,7 +313,7 @@ export default { return issuableStatusText[this.issuableStatus]; }, shouldShowStickyHeader() { - return [TYPE_ISSUE, TYPE_EPIC].includes(this.issuableType); + return [TYPE_INCIDENT, TYPE_ISSUE, TYPE_EPIC].includes(this.issuableType); }, }, created() { @@ -560,7 +554,7 @@ export default { > <template #actions> <slot name="actions"> - <header-actions v-if="isIssue" /> + <header-actions /> </slot> </template> </title-component> @@ -623,7 +617,8 @@ export default { <slot name="header"> <issue-header - v-if="isIssue" + class="gl-p-0 gl-mt-2 gl-sm-mt-0" + :class="headerClasses" :author="author" :confidential="isConfidential" :created-at="createdAt" @@ -632,6 +627,7 @@ export default { :is-hidden="isHidden" :is-locked="isLocked" :issuable-state="issuableStatus" + :issuable-type="issuableType" :moved-to-issue-url="movedToIssueUrl" :promoted-to-epic-url="promotedToEpicUrl" :service-desk-reply-to="serviceDeskReplyTo" diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue index 5d601009a17..047bdcdcefc 100644 --- a/app/assets/javascripts/issues/show/components/form.vue +++ b/app/assets/javascripts/issues/show/components/form.vue @@ -4,7 +4,7 @@ import { GlAlert } from '@gitlab/ui'; import { getDraft, updateDraft, getLockVersion, clearDraft } from '~/lib/utils/autosave'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { TYPENAME_ISSUE, TYPENAME_USER } from '~/graphql_shared/constants'; -import { TYPE_ISSUE } from '~/issues/constants'; +import { TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import eventHub from '../event_hub'; import EditActions from './edit_actions.vue'; @@ -107,8 +107,8 @@ export default { showLockedWarning() { return this.formState.lockedWarningVisible && !this.formState.updateLoading; }, - isIssueType() { - return this.issuableType === TYPE_ISSUE; + showTypeField() { + return [TYPE_INCIDENT, TYPE_ISSUE].includes(this.issuableType); }, resourceId() { return this.issueId && convertToGraphQLId(TYPENAME_ISSUE, this.issueId); @@ -202,7 +202,7 @@ export default { </div> </div> <div class="row gl-gap-3"> - <div v-if="isIssueType" class="col-12 col-md-4 pr-md-0"> + <div v-if="showTypeField" class="col-12 col-md-4 pr-md-0"> <issuable-type-field ref="issue-type" /> </div> diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue index 8177720b172..1ade5e654e9 100644 --- a/app/assets/javascripts/issues/show/components/header_actions.vue +++ b/app/assets/javascripts/issues/show/components/header_actions.vue @@ -10,6 +10,7 @@ import { GlTooltipDirective, } from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; +// eslint-disable-next-line no-restricted-imports import { mapActions, mapGetters, mapState } from 'vuex'; import { createAlert, VARIANT_SUCCESS } from '~/alert'; import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants'; @@ -419,7 +420,7 @@ export default { v-gl-tooltip.bottom :title="$options.i18n.editTitleAndDescription" :aria-label="$options.i18n.editTitleAndDescription" - class="js-issuable-edit gl-display-none gl-sm-display-block" + class="js-issuable-edit gl-display-none! gl-sm-display-block!" data-testid="edit-button" @click="edit" > diff --git a/app/assets/javascripts/issues/show/components/issue_header.vue b/app/assets/javascripts/issues/show/components/issue_header.vue index 771b438f0da..211f3217ddc 100644 --- a/app/assets/javascripts/issues/show/components/issue_header.vue +++ b/app/assets/javascripts/issues/show/components/issue_header.vue @@ -1,11 +1,10 @@ <script> import { GlLink, GlSprintf } from '@gitlab/ui'; -import { STATUS_OPEN, STATUS_REOPENED, TYPE_ISSUE, WORKSPACE_PROJECT } from '~/issues/constants'; +import { STATUS_OPEN, STATUS_REOPENED, WORKSPACE_PROJECT } from '~/issues/constants'; import { __, s__ } from '~/locale'; import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue'; export default { - TYPE_ISSUE, WORKSPACE_PROJECT, components: { GlLink, @@ -45,6 +44,10 @@ export default { type: String, required: true, }, + issuableType: { + type: String, + required: true, + }, movedToIssueUrl: { type: String, required: true, @@ -96,7 +99,6 @@ export default { <template> <issuable-header - class="gl-p-0 gl-mb-6 gl-mt-2 gl-sm-mt-0" :author="author" :blocked="isLocked" :confidential="confidential" @@ -104,7 +106,7 @@ export default { :is-first-contribution="isFirstContribution" :is-hidden="isHidden" :issuable-state="issuableState" - :issuable-type="$options.TYPE_ISSUE" + :issuable-type="issuableType" :service-desk-reply-to="serviceDeskReplyTo" show-work-item-type-icon :status-icon="statusIcon" diff --git a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue index 8262b3ac0ff..f7a324d9f3f 100644 --- a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue +++ b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue @@ -54,29 +54,27 @@ export default { </script> <template> - <div> - <gl-popover - v-if="showPopover" - target="new-actions-header-dropdown" - container="viewport" - placement="left" - :show="showPopover" - triggers="manual" - content="text" - :css-classes="['gl-p-2 new-header-popover']" + <gl-popover + v-if="showPopover" + target="new-actions-header-dropdown" + container="viewport" + placement="left" + :show="showPopover" + triggers="manual" + content="text" + :css-classes="['gl-p-2 new-header-popover']" + > + <template #title> + <div class="gl-font-base gl-font-weight-normal"> + {{ popoverText }} + </div> + </template> + <gl-button + data-testid="confirm-button" + variant="confirm" + type="submit" + @click="dismissPopover" + >{{ $options.i18n.confirmButtonText }}</gl-button > - <template #title> - <div class="gl-font-base gl-font-weight-normal"> - {{ popoverText }} - </div> - </template> - <gl-button - data-testid="confirm-button" - variant="confirm" - type="submit" - @click="dismissPopover" - >{{ $options.i18n.confirmButtonText }}</gl-button - > - </gl-popover> - </div> + </gl-popover> </template> diff --git a/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue b/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue index 1530e9a15b5..08cda8c3cdc 100644 --- a/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue +++ b/app/assets/javascripts/issues/show/components/sentry_error_stack_trace.vue @@ -1,5 +1,6 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; +// eslint-disable-next-line no-restricted-imports import { mapActions, mapState, mapGetters } from 'vuex'; import Stacktrace from '~/error_tracking/components/stacktrace.vue'; diff --git a/app/assets/javascripts/issues/show/components/title.vue b/app/assets/javascripts/issues/show/components/title.vue index 8c9e43b729b..375180446d9 100644 --- a/app/assets/javascripts/issues/show/components/title.vue +++ b/app/assets/javascripts/issues/show/components/title.vue @@ -54,7 +54,7 @@ export default { <template> <div - class="gl-display-flex gl-align-items-flex-start gl-flex-direction-column gl-sm-flex-direction-row gl-pt-3" + class="gl-display-flex gl-align-items-flex-start gl-flex-direction-column gl-sm-flex-direction-row gl-gap-3 gl-pt-3" > <h1 v-safe-html="titleHtml" diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js index 41e6daea4c1..a27f86bd9c3 100644 --- a/app/assets/javascripts/issues/show/index.js +++ b/app/assets/javascripts/issues/show/index.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +// eslint-disable-next-line no-restricted-imports import { mapGetters } from 'vuex'; import errorTrackingStore from '~/error_tracking/store'; import { apolloProvider } from '~/graphql_shared/issuable_client'; @@ -29,9 +30,13 @@ export function initIncidentApp(issueData = {}, store) { return undefined; } - bootstrapApollo({ ...issueState, issueType: el.dataset.issueType }); + bootstrapApollo({ ...issueState, issueType: TYPE_INCIDENT }); const { + authorId, + authorName, + authorUsername, + authorWebUrl, canCreateIncident, canUpdate, canUpdateTimelineEvent, @@ -45,8 +50,8 @@ export function initIncidentApp(issueData = {}, store) { hasLinkedAlerts, slaFeatureAvailable, uploadMetricsFeatureAvailable, - state, } = issueData; + const headerActionsData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.headerActionsData)); const fullPath = `${projectNamespace}/${projectPath}`; const router = createRouter(currentPath, currentTab); @@ -70,6 +75,22 @@ export function initIncidentApp(issueData = {}, store) { slaFeatureAvailable: parseBoolean(slaFeatureAvailable), uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable), contentEditorOnIssues: gon.features.contentEditorOnIssues, + // for HeaderActions component + canCreateIssue: parseBoolean(headerActionsData.canCreateIncident), + canDestroyIssue: parseBoolean(headerActionsData.canDestroyIssue), + canPromoteToEpic: parseBoolean(headerActionsData.canPromoteToEpic), + canReopenIssue: parseBoolean(headerActionsData.canReopenIssue), + canReportSpam: parseBoolean(headerActionsData.canReportSpam), + canUpdateIssue: parseBoolean(headerActionsData.canUpdateIssue), + isIssueAuthor: parseBoolean(headerActionsData.isIssueAuthor), + issuePath: headerActionsData.issuePath, + newIssuePath: headerActionsData.newIssuePath, + projectPath: headerActionsData.projectPath, + reportAbusePath: headerActionsData.reportAbusePath, + reportedUserId: headerActionsData.reportedUserId, + reportedFromUrl: headerActionsData.reportedFromUrl, + submitAsSpamPath: headerActionsData.submitAsSpamPath, + issuableEmailAddress: headerActionsData.issuableEmailAddress, }, computed: { ...mapGetters(['getNoteableData']), @@ -78,8 +99,15 @@ export function initIncidentApp(issueData = {}, store) { return createElement(IssueApp, { props: { ...issueData, + author: { + id: authorId, + name: authorName, + username: authorUsername, + webUrl: authorWebUrl, + }, issueId: Number(issuableId), - issuableStatus: state, + issuableStatus: this.getNoteableData?.state, + issuableType: TYPE_INCIDENT, descriptionComponent: IncidentTabs, showTitleBorder: false, isConfidential: this.getNoteableData?.confidential, |