Commit a558f7f8 authored by Robert Hunt's avatar Robert Hunt Committed by Natalia Tepluhina

Update RuleForm inputs to use GlFormInput and GlFormGroup

parent 41d18ebb
<script>
import { GlFormGroup, GlFormInput } from '@gitlab/ui';
import { groupBy, isNumber } from 'lodash';
import { mapState, mapActions } from 'vuex';
import { isSafeURL } from '~/lib/utils/url_utility';
......@@ -27,10 +28,12 @@ function mapServerResponseToValidationErrors(messages) {
export default {
components: {
ApproverTypeSelect,
ApproversList,
ApproversSelect,
BranchesSelect,
ApproverTypeSelect,
GlFormGroup,
GlFormInput,
},
mixins: [glFeatureFlagsMixin()],
props: {
......@@ -95,7 +98,9 @@ export default {
invalidApprovalGateUrl() {
if (this.serverValidationErrors.includes('External url has already been taken')) {
return this.$options.i18n.validations.externalUrlTaken;
} else if (!this.externalUrl || !isSafeURL(this.externalUrl)) {
}
if (!this.externalUrl || !isSafeURL(this.externalUrl)) {
return this.$options.i18n.validations.invalidUrl;
}
......@@ -266,7 +271,7 @@ export default {
* - Single rule?
* - Multi rule?
*/
submit() {
async submit() {
let submission;
this.serverValidationErrors = [];
......@@ -275,16 +280,18 @@ export default {
const valid = this.isExternalApprovalRule ? this.isValidExternalApprovalRule : this.isValid;
if (!valid) {
submission = Promise.resolve();
submission = Promise.resolve;
} else if (this.isFallbackSubmission) {
submission = this.submitFallback();
submission = this.submitFallback;
} else if (!this.isMultiSubmission) {
submission = this.submitSingleRule();
submission = this.submitSingleRule;
} else {
submission = this.submitRule();
submission = this.submitRule;
}
submission.catch((failureResponse) => {
try {
await submission();
} catch (failureResponse) {
if (this.isExternalApprovalRule) {
this.serverValidationErrors = failureResponse?.response?.data?.message || [];
} else {
......@@ -292,9 +299,7 @@ export default {
failureResponse?.response?.data?.message || {},
);
}
});
return submission;
}
},
/**
* Submit the rule, by either put-ing or post-ing.
......@@ -304,10 +309,13 @@ export default {
const data = this.externalRuleSubmissionData;
return data.id ? this.putExternalApprovalRule(data) : this.postExternalApprovalRule(data);
}
const data = this.submissionData;
if (!this.settings.allowMultiRule && this.settings.prefix === 'mr-edit') {
return data.id ? this.putRule(data) : this.postRegularRule(data);
}
return data.id ? this.putRule(data) : this.postRule(data);
},
/**
......@@ -416,59 +424,66 @@ export default {
<template>
<form novalidate @submit.prevent.stop="submit">
<div v-if="showName" class="form-group gl-form-group">
<label class="col-form-label">{{ $options.i18n.form.nameLabel }}</label>
<input
<gl-form-group
v-if="showName"
:label="$options.i18n.form.nameLabel"
:description="$options.i18n.form.nameDescription"
:state="isValidName"
:invalid-feedback="invalidName"
data-testid="name-group"
>
<gl-form-input
v-model="name"
:class="{ 'is-invalid': !isValidName }"
:disabled="isNameDisabled"
class="gl-form-input form-control"
name="name"
type="text"
:state="isValidName"
data-qa-selector="rule_name_field"
data-testid="name"
/>
<span class="invalid-feedback">{{ isValidName ? '' : invalidName }}</span>
<small class="form-text text-gl-muted">
{{ $options.i18n.form.nameDescription }}
</small>
</div>
<div v-if="showProtectedBranch" class="form-group gl-form-group">
<label class="col-form-label">{{ $options.i18n.form.protectedBranchLabel }}</label>
</gl-form-group>
<gl-form-group
v-if="showProtectedBranch"
:label="$options.i18n.form.protectedBranchLabel"
:description="$options.i18n.form.protectedBranchDescription"
:state="isValidBranches"
:invalid-feedback="invalidBranches"
data-testid="branches-group"
>
<branches-select
v-model="branchesToAdd"
:project-id="settings.projectId"
:is-invalid="!isValidBranches"
:init-rule="rule"
/>
<span class="invalid-feedback">{{ isValidBranches ? '' : invalidBranches }}</span>
<small class="form-text text-gl-muted">
{{ $options.i18n.form.protectedBranchDescription }}
</small>
</div>
<div v-if="showApproverTypeSelect" class="form-group gl-form-group">
<label class="col-form-label">{{ $options.i18n.form.approvalTypeLabel }}</label>
</gl-form-group>
<gl-form-group v-if="showApproverTypeSelect" :label="$options.i18n.form.approvalTypeLabel">
<approver-type-select
v-model="ruleType"
:approver-type-options="$options.approverTypeOptions"
/>
</div>
<div v-if="!isExternalApprovalRule" class="form-group gl-form-group">
<label class="col-form-label">{{ $options.i18n.form.approvalsRequiredLabel }}</label>
<input
</gl-form-group>
<template v-if="!isExternalApprovalRule">
<gl-form-group
:label="$options.i18n.form.approvalsRequiredLabel"
:state="isValidApprovalsRequired"
:invalid-feedback="invalidApprovalsRequired"
data-testid="approvals-required-group"
>
<gl-form-input
v-model.number="approvalsRequired"
:class="{ 'is-invalid': !isValidApprovalsRequired }"
class="gl-form-input form-control mw-6em"
name="approvals_required"
type="number"
:state="isValidApprovalsRequired"
:min="minApprovalsRequired"
class="mw-6em"
type="number"
data-testid="approvals-required"
data-qa-selector="approvals_required_field"
/>
<span class="invalid-feedback">{{
isValidApprovalsRequired ? '' : invalidApprovalsRequired
}}</span>
</div>
<div v-if="!isExternalApprovalRule" class="form-group gl-form-group">
<label class="col-form-label">{{ $options.i18n.form.approversLabel }}</label>
</gl-form-group>
<gl-form-group
:label="$options.i18n.form.approversLabel"
:state="isValidApprovers"
:invalid-feedback="invalidApprovers"
data-testid="approvers-group"
>
<approvers-select
v-model="approversToAdd"
:project-id="settings.projectId"
......@@ -477,25 +492,24 @@ export default {
:is-invalid="!isValidApprovers"
data-qa-selector="member_select_field"
/>
<span class="invalid-feedback">{{ isValidApprovers ? '' : invalidApprovers }}</span>
</div>
<div v-if="isExternalApprovalRule" class="form-group gl-form-group">
<label class="col-form-label">{{ approvalGateLabel }}</label>
<input
</gl-form-group>
</template>
<gl-form-group
v-if="isExternalApprovalRule"
:label="approvalGateLabel"
:description="$options.i18n.form.approvalGateDescription"
:state="isValidApprovalGateUrl"
:invalid-feedback="invalidApprovalGateUrl"
data-testid="approval-gate-url-group"
>
<gl-form-input
v-model="externalUrl"
:class="{ 'is-invalid': !isValidApprovalGateUrl }"
class="gl-form-input form-control"
name="approval_gate_url"
:state="isValidApprovalGateUrl"
type="url"
data-qa-selector="external_url_field"
data-testid="approval-gate-url"
/>
<span class="invalid-feedback">{{
isValidApprovalGateUrl ? '' : invalidApprovalGateUrl
}}</span>
<small class="form-text text-gl-muted">
{{ $options.i18n.form.approvalGateDescription }}
</small>
</div>
</gl-form-group>
<div v-if="!isExternalApprovalRule" class="bordered-box overflow-auto h-12em">
<approvers-list v-model="approvers" />
</div>
......
......@@ -62,7 +62,9 @@ RSpec.describe 'Merge request > User edits MR with approval rules', :js do
click_button "Add approval rule"
fill_in "name", with: rule_name
within_fieldset('Rule name') do
fill_in with: rule_name
end
add_approval_rule_member('user', approver.name)
......
......@@ -228,9 +228,11 @@ RSpec.describe 'Merge request > User sets approvers', :js do
find('.merge-request').click_on 'Edit'
open_modal
expect(page).to have_field 'approvals_required', exact: 2
within_fieldset('Approvals required') do
expect(find_field.value).to eq '2'
fill_in 'approvals_required', with: '3'
fill_in with: '3'
end
click_button 'Update approval rule'
click_on('Save changes')
......@@ -245,7 +247,9 @@ RSpec.describe 'Merge request > User sets approvers', :js do
open_modal
expect(page).to have_field 'approvals_required', exact: 3
within_fieldset('Approvals required') do
expect(find_field.value).to eq '3'
end
end
end
end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment