All files / app/assets/javascripts/vue_merge_request_widget/components/states mr_widget_conflicts.vue

100% Statements 6/6
100% Branches 5/5
100% Functions 7/7
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124              3x                             16x             16x                           16x             32x     15x                                                                                                                                            
<script>
import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
import { s__ } from '~/locale';
import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
import userPermissionsQuery from '../../queries/permissions.query.graphql';
import conflictsStateQuery from '../../queries/states/conflicts.query.graphql';
import StateContainer from '../state_container.vue';
 
export default {
  name: 'MRWidgetConflicts',
  components: {
    BoldText,
    GlSkeletonLoader,
    GlButton,
    StateContainer,
  },
  mixins: [mergeRequestQueryVariablesMixin],
  apollo: {
    userPermissions: {
      query: userPermissionsQuery,
      variables() {
        return this.mergeRequestQueryVariables;
      },
      update: (data) => data.project?.mergeRequest?.userPermissions || {},
    },
    state: {
      query: conflictsStateQuery,
      variables() {
        return this.mergeRequestQueryVariables;
      },
      update: (data) => data.project?.mergeRequest || {},
    },
  },
  props: {
    /* TODO: This is providing all store and service down when it
      only needs a few props */
    mr: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      userPermissions: {},
      state: {},
    };
  },
  computed: {
    isLoading() {
      return this.$apollo.queries.userPermissions.loading && this.$apollo.queries.state.loading;
    },
    showResolveButton() {
      return (
        this.mr.conflictResolutionPath &&
        this.userPermissions.pushToSourceBranch &&
        !this.state.sourceBranchProtected
      );
    },
  },
  i18n: {
    shouldBeRebased: s__(
      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} fast-forward merge is not possible. To merge this request, first rebase locally.',
    ),
    shouldBeResolved: s__(
      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} merge conflicts must be resolved.',
    ),
    usersWriteBranches: s__(
      'mrWidget|%{boldStart}Merge blocked:%{boldEnd} Users who can write to the source or target branches can resolve the conflicts.',
    ),
  },
};
</script>
<template>
  <state-container
    status="failed"
    :is-loading="isLoading"
    is-collapsible
    :collapsed="mr.mergeDetailsCollapsed"
    @toggle="() => mr.toggleMergeDetails()"
  >
    <template #loading>
      <gl-skeleton-loader :width="334" :height="24">
        <rect x="0" y="0" width="24" height="24" rx="4" />
        <rect x="32" y="2" width="150" height="20" rx="4" />
        <rect x="190" y="2" width="144" height="20" rx="4" />
      </gl-skeleton-loader>
    </template>
    <template v-if="!isLoading">
      <span v-if="state.shouldBeRebased" class="gl-ml-0! gl-text-body!">
        <bold-text :message="$options.i18n.shouldBeRebased" />
      </span>
      <template v-else>
        <span class="gl-ml-0! gl-text-body! gl-flex-grow-1 gl-w-full gl-md-w-auto gl-mr-2">
          <bold-text v-if="userPermissions.canMerge" :message="$options.i18n.shouldBeResolved" />
          <bold-text v-else :message="$options.i18n.usersWriteBranches" />
        </span>
      </template>
    </template>
    <template v-if="!isLoading && !state.shouldBeRebased" #actions>
      <gl-button
        v-if="showResolveButton"
        :href="mr.conflictResolutionPath"
        size="small"
        variant="confirm"
        class="gl-align-self-start"
        data-testid="resolve-conflicts-button"
      >
        {{ s__('mrWidget|Resolve conflicts') }}
      </gl-button>
      <gl-button
        v-if="userPermissions.canMerge"
        size="small"
        variant="confirm"
        category="tertiary"
        data-testid="merge-locally-button"
        class="js-check-out-modal-trigger gl-align-self-start"
      >
        {{ s__('mrWidget|Resolve locally') }}
      </gl-button>
    </template>
  </state-container>
</template>