Verified Commit 491cd60c authored by Phil Hughes's avatar Phil Hughes Committed by Paul Slaughter
Browse files

Merge branch '9963-optional-approval-view' into 'master' 

Resolve "Add "No approval required" state to approval rules MR component"

Closes #9963

See merge request gitlab-org/gitlab-ee!9899
parent 9ee09dee

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js

+2 −0
Original line number Diff line number Diff line
@@ -7,3 +7,5 @@ export const FETCH_ERROR = s__( 
export const APPROVE_ERROR = s__('mrWidget|An error occurred while submitting your approval.');

export const UNAPPROVE_ERROR = s__('mrWidget|An error occurred while removing your approval.');

export const APPROVED_MESSAGE = s__('mrWidget|Merge request approved.');

export const OPTIONAL_CAN_APPROVE = s__('mrWidget|No approval required; you can still approve');

export const OPTIONAL = s__('mrWidget|No approval required');

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue

+40 −17
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ import eventHub from '~/vue_merge_request_widget/event_hub'; 
import MrWidgetContainer from '~/vue_merge_request_widget/components/mr_widget_container.vue';

import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';

import ApprovalsSummary from './approvals_summary.vue';

import ApprovalsSummaryOptional from './approvals_summary_optional.vue';

import ApprovalsFooter from './approvals_footer.vue';

import { FETCH_LOADING, FETCH_ERROR, APPROVE_ERROR, UNAPPROVE_ERROR } from '../messages';
@@ -17,6 +18,7 @@ export default { 
    MrWidgetContainer,

    MrWidgetIcon,

    ApprovalsSummary,

    ApprovalsSummaryOptional,

    ApprovalsFooter,

    GlButton,

    GlLoadingIcon,
@@ -40,17 +42,29 @@ export default { 
    };

  },

  computed: {

    approvals() {

      return this.mr.approvals || {};

    },

    hasFooter() {

      return this.mr.approvals && this.mr.approvals.has_approval_rules;

      return !!this.approvals.has_approval_rules;

    },

    approvedBy() {

      return this.mr.approvals.approved_by.map(x => x.user);

      return this.approvals.approved_by ? this.approvals.approved_by.map(x => x.user) : [];

    },

    isApproved() {

      return !!this.approvals.approved;

    },

    approvalsRequired() {

      return this.approvals.approvals_required || 0;

    },

    isOptional() {

      return !this.approvedBy.length && !this.approvalsRequired;

    },

    userHasApproved() {

      return this.mr.approvals.user_has_approved;

      return !!this.approvals.user_has_approved;

    },

    userCanApprove() {

      return this.mr.approvals.user_can_approve;

      return !!this.approvals.user_can_approve;

    },

    showApprove() {

      return !this.userHasApproved && this.userCanApprove && this.mr.isOpen;
@@ -59,16 +73,16 @@ export default { 
      return this.userHasApproved && !this.userCanApprove && this.mr.state !== 'merged';

    },

    action() {

      if (this.showApprove && this.mr.approvals.approved) {

        return {

          text: s__('mrWidget|Approve additionally'),

          variant: 'primary',

          inverted: true,

          action: () => this.approve(),

        };

      } else if (this.showApprove) {

      if (this.showApprove) {

        const inverted = this.isApproved;

        const text =

          this.isApproved && this.approvedBy.length > 0

            ? s__('mrWidget|Approve additionally')

            : s__('mrWidget|Approve');



        return {

          text: s__('mrWidget|Approve'),

          text,

          inverted,

          variant: 'primary',

          action: () => this.approve(),

        };
@@ -83,6 +97,9 @@ export default { 


      return null;

    },

    hasAction() {

      return !!this.action;

    },

  },

  watch: {

    isExpanded(val) {
@@ -160,10 +177,16 @@ export default { 
          <gl-loading-icon v-if="isApproving" inline />

          {{ action.text }}

        </gl-button>

        <approvals-summary-optional

          v-if="isOptional"

          :can-approve="hasAction"

          :help-path="mr.approvalsHelpPath"

        />

        <approvals-summary

          :approved="mr.approvals.approved"

          :approvals-left="mr.approvals.approvals_left"

          :rules-left="mr.approvals.approvalRuleNamesLeft"

          v-else

          :approved="isApproved"

          :approvals-left="approvals.approvals_left"

          :rules-left="approvals.approvalRuleNamesLeft"

          :approvers="approvedBy"

        />

      </template>
@@ -172,7 +195,7 @@ export default { 
      v-if="hasFooter"

      slot="footer"

      v-model="isExpanded"

      :suggested-approvers="mr.approvals.suggested_approvers"

      :suggested-approvers="approvals.suggested_approvers"

      :approval-rules="mr.approvalRules"

      :is-loading-rules="isLoadingRules"

    />

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary_optional.vue

0 → 100644
+47 −0
Original line number Diff line number Diff line 
<script>

import { GlTooltipDirective, GlLink } from '@gitlab/ui';

import Icon from '~/vue_shared/components/icon.vue';

import { OPTIONAL, OPTIONAL_CAN_APPROVE } from '../messages';



export default {

  components: {

    GlLink,

    Icon,

  },

  directives: {

    GlTooltip: GlTooltipDirective,

  },

  props: {

    canApprove: {

      type: Boolean,

      required: true,

    },

    helpPath: {

      type: String,

      required: false,

      default: '',

    },

  },

  computed: {

    message() {

      return this.canApprove ? OPTIONAL_CAN_APPROVE : OPTIONAL;

    },

  },

};

</script>



<template>

  <div class="d-flex align-items-center">

    <span class="text-muted">{{ message }}</span>

    <gl-link

      v-if="canApprove && helpPath"

      v-gl-tooltip

      :href="helpPath"

      :title="__('About this feature')"

      target="_blank"

      class="d-flex-center pl-1"

    >

      <icon name="question-o" />

    </gl-link>

  </div>

</template>

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue

+3 −3
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue'; 
import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';

import tooltip from '~/vue_shared/directives/tooltip';

import eventHub from '~/vue_merge_request_widget/event_hub';

import { APPROVE_ERROR } from '../messages';

import { APPROVE_ERROR, OPTIONAL_CAN_APPROVE, OPTIONAL } from '../messages';



export default {

  name: 'ApprovalsBody',
@@ -65,10 +65,10 @@ export default { 
    approvalsRequiredStringified() {

      if (this.approvalsOptional) {

        if (this.userCanApprove) {

          return s__('mrWidget|No Approval required; you can still approve');

          return OPTIONAL_CAN_APPROVE;

        }



        return s__('mrWidget|No Approval required');

        return OPTIONAL;

      }



      if (this.approvalsLeft === 0) {

ee/changelogs/unreleased/9963-optional-approval-view.yml

0 → 100644
+5 −0
Original line number Diff line number Diff line 
--- 

title: Add 'No approvals required' view to approval rules (behind feature flag)

merge_request: 9899

author:

type: fixed