Skip to content

G
gitlab-ce
Commit 4abb1f05 authored by Alexander Turinske's avatar Alexander Turinske
Browse files
Options

Wrap disabled form groups in a disabled parent 

- instead of disabling form groups individually,
  this wraps them in a parent form group and
  conditionally disables that.
- update tests
parent 998b460e
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 287 deletions
ee/app/assets/javascripts/security_configuration/dast_scanner_profiles/components/dast_scanner_profile_form.vue
View file @ 4abb1f05
......@@ -274,111 +274,111 @@ export default {
</ul>
</gl-alert>
<gl-form-group :disabled="isPolicyProfile" :label="s__('DastProfiles|Profile name')">
<gl-form-input
v-model="form.profileName.value"
class="mw-460"
data-testid="profile-name-input"
type="text"
/>
</gl-form-group>
<hr class="gl-border-gray-100" />
<gl-form-group :disabled="isPolicyProfile">
<template #label>
{{ s__('DastProfiles|Scan mode') }}
<tooltip-icon :title="i18n.tooltips.scanMode" />
</template>
<gl-form-group data-testid="dast-scanner-parent-group" :disabled="isPolicyProfile">
<gl-form-group :label="s__('DastProfiles|Profile name')">
<gl-form-input
v-model="form.profileName.value"
class="mw-460"
data-testid="profile-name-input"
type="text"
/>
</gl-form-group>
<gl-form-radio-group
v-model="form.scanType.value"
:options="$options.SCAN_TYPE_OPTIONS"
data-testid="scan-type-option"
/>
</gl-form-group>
<hr class="gl-border-gray-100" />
<div class="row">
<gl-form-group
class="col-md-6 mb-0"
:disabled="isPolicyProfile"
:state="form.spiderTimeout.state"
:invalid-feedback="form.spiderTimeout.feedback"
>
<gl-form-group>
<template #label>
{{ s__('DastProfiles|Spider timeout') }}
<tooltip-icon :title="i18n.tooltips.spiderTimeout" />
{{ s__('DastProfiles|Scan mode') }}
<tooltip-icon :title="i18n.tooltips.scanMode" />
</template>
<gl-form-input-group
v-model.number="form.spiderTimeout.value"
class="mw-460"
data-testid="spider-timeout-input"
type="number"
:min="$options.spiderTimeoutRange.min"
:max="$options.spiderTimeoutRange.max"
@input="validateSpiderTimeout"
<gl-form-radio-group
v-model="form.scanType.value"
:options="$options.SCAN_TYPE_OPTIONS"
data-testid="scan-type-option"
/>
</gl-form-group>
<div class="row">
<gl-form-group
class="col-md-6 mb-0"
:state="form.spiderTimeout.state"
:invalid-feedback="form.spiderTimeout.feedback"
>
<template #append>
<gl-input-group-text>{{ __('Minutes') }}</gl-input-group-text>
<template #label>
{{ s__('DastProfiles|Spider timeout') }}
<tooltip-icon :title="i18n.tooltips.spiderTimeout" />
</template>
</gl-form-input-group>
<div class="gl-text-gray-400 gl-my-2">
{{ s__('DastProfiles|Minimum = 0 (no timeout enabled), Maximum = 2880 minutes') }}
</div>
</gl-form-group>
<gl-form-input-group
v-model.number="form.spiderTimeout.value"
class="mw-460"
data-testid="spider-timeout-input"
type="number"
:min="$options.spiderTimeoutRange.min"
:max="$options.spiderTimeoutRange.max"
@input="validateSpiderTimeout"
>
<template #append>
<gl-input-group-text>{{ __('Minutes') }}</gl-input-group-text>
</template>
</gl-form-input-group>
<div class="gl-text-gray-400 gl-my-2">
{{ s__('DastProfiles|Minimum = 0 (no timeout enabled), Maximum = 2880 minutes') }}
</div>
</gl-form-group>
<gl-form-group
class="col-md-6 mb-0"
:disabled="isPolicyProfile"
:state="form.targetTimeout.state"
:invalid-feedback="form.targetTimeout.feedback"
>
<template #label>
{{ s__('DastProfiles|Target timeout') }}
<tooltip-icon :title="i18n.tooltips.targetTimeout" />
</template>
<gl-form-input-group
v-model.number="form.targetTimeout.value"
class="mw-460"
data-testid="target-timeout-input"
type="number"
:min="$options.targetTimeoutRange.min"
:max="$options.targetTimeoutRange.max"
@input="validateTargetTimeout"
<gl-form-group
class="col-md-6 mb-0"
:state="form.targetTimeout.state"
:invalid-feedback="form.targetTimeout.feedback"
>
<template #append>
<gl-input-group-text>{{ __('Seconds') }}</gl-input-group-text>
<template #label>
{{ s__('DastProfiles|Target timeout') }}
<tooltip-icon :title="i18n.tooltips.targetTimeout" />
</template>
</gl-form-input-group>
<div class="gl-text-gray-400 gl-my-2">
{{ s__('DastProfiles|Minimum = 1 second, Maximum = 3600 seconds') }}
</div>
</gl-form-group>
</div>
<gl-form-input-group
v-model.number="form.targetTimeout.value"
class="mw-460"
data-testid="target-timeout-input"
type="number"
:min="$options.targetTimeoutRange.min"
:max="$options.targetTimeoutRange.max"
@input="validateTargetTimeout"
>
<template #append>
<gl-input-group-text>{{ __('Seconds') }}</gl-input-group-text>
</template>
</gl-form-input-group>
<div class="gl-text-gray-400 gl-my-2">
{{ s__('DastProfiles|Minimum = 1 second, Maximum = 3600 seconds') }}
</div>
</gl-form-group>
</div>
<hr class="gl-border-gray-100" />
<hr class="gl-border-gray-100" />
<div class="row">
<gl-form-group class="col-md-6 mb-0" :disabled="isPolicyProfile">
<template #label>
{{ s__('DastProfiles|AJAX spider') }}
<tooltip-icon :title="i18n.tooltips.ajaxSpider" />
</template>
<gl-form-checkbox v-model="form.useAjaxSpider.value">{{
s__('DastProfiles|Turn on AJAX spider')
}}</gl-form-checkbox>
</gl-form-group>
<div class="row">
<gl-form-group class="col-md-6 mb-0">
<template #label>
{{ s__('DastProfiles|AJAX spider') }}
<tooltip-icon :title="i18n.tooltips.ajaxSpider" />
</template>
<gl-form-checkbox v-model="form.useAjaxSpider.value">{{
s__('DastProfiles|Turn on AJAX spider')
}}</gl-form-checkbox>
</gl-form-group>
<gl-form-group class="col-md-6 mb-0" :disabled="isPolicyProfile">
<template #label>
{{ s__('DastProfiles|Debug messages') }}
<tooltip-icon :title="i18n.tooltips.debugMessage" />
</template>
<gl-form-checkbox v-model="form.showDebugMessages.value">{{
s__('DastProfiles|Show debug messages')
}}</gl-form-checkbox>
</gl-form-group>
</div>
<gl-form-group class="col-md-6 mb-0">
<template #label>
{{ s__('DastProfiles|Debug messages') }}
<tooltip-icon :title="i18n.tooltips.debugMessage" />
</template>
<gl-form-checkbox v-model="form.showDebugMessages.value">{{
s__('DastProfiles|Show debug messages')
}}</gl-form-checkbox>
</gl-form-group>
</div>
</gl-form-group>
<hr class="gl-border-gray-100" />
......
ee/app/assets/javascripts/security_configuration/dast_site_profiles_form/components/dast_site_auth_section.vue
View file @ 4abb1f05
......@@ -82,96 +82,93 @@ export default {
<template>
<section>
<gl-form-group :disabled="disabled" :label="s__('DastProfiles|Authentication')">
<gl-form-checkbox v-model="form.fields.enabled.value" data-testid="auth-enable-checkbox">{{
s__('DastProfiles|Enable Authentication')
}}</gl-form-checkbox>
</gl-form-group>
<div v-if="form.fields.enabled.value" data-testid="auth-form">
<div class="row">
<gl-form-group
:disabled="disabled"
:label="s__('DastProfiles|Authentication URL')"
:invalid-feedback="form.fields.url.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.url.value"
v-validation:[showValidationOrInEditMode]
name="url"
type="url"
required
:state="form.fields.url.state"
/>
</gl-form-group>
</div>
<div class="row">
<gl-form-group
:disabled="disabled"
:label="s__('DastProfiles|Username')"
:invalid-feedback="form.fields.username.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.username.value"
v-validation:[showValidationOrInEditMode]
autocomplete="off"
name="username"
type="text"
required
:state="form.fields.username.state"
/>
</gl-form-group>
<gl-form-group
:disabled="disabled"
:label="s__('DastProfiles|Password')"
:invalid-feedback="form.fields.password.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.password.value"
v-validation:[showValidationOrInEditMode]
autocomplete="off"
name="password"
type="password"
:placeholder="sensitiveFieldPlaceholder"
:required="isSensitiveFieldRequired"
:state="form.fields.password.state"
/>
</gl-form-group>
<gl-form-group data-testid="dast-site-auth-parent-group" :disabled="disabled">
<gl-form-group :label="s__('DastProfiles|Authentication')">
<gl-form-checkbox v-model="form.fields.enabled.value" data-testid="auth-enable-checkbox">{{
s__('DastProfiles|Enable Authentication')
}}</gl-form-checkbox>
</gl-form-group>
<div v-if="form.fields.enabled.value" data-testid="auth-form">
<div class="row">
<gl-form-group
:label="s__('DastProfiles|Authentication URL')"
:invalid-feedback="form.fields.url.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.url.value"
v-validation:[showValidationOrInEditMode]
name="url"
type="url"
required
:state="form.fields.url.state"
/>
</gl-form-group>
</div>
<div class="row">
<gl-form-group
:label="s__('DastProfiles|Username')"
:invalid-feedback="form.fields.username.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.username.value"
v-validation:[showValidationOrInEditMode]
autocomplete="off"
name="username"
type="text"
required
:state="form.fields.username.state"
/>
</gl-form-group>
<gl-form-group
:label="s__('DastProfiles|Password')"
:invalid-feedback="form.fields.password.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.password.value"
v-validation:[showValidationOrInEditMode]
autocomplete="off"
name="password"
type="password"
:placeholder="sensitiveFieldPlaceholder"
:required="isSensitiveFieldRequired"
:state="form.fields.password.state"
/>
</gl-form-group>
</div>
<div class="row">
<gl-form-group
:label="s__('DastProfiles|Username form field')"
:invalid-feedback="form.fields.usernameField.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.usernameField.value"
v-validation:[showValidationOrInEditMode]
name="usernameField"
type="text"
required
:state="form.fields.usernameField.state"
/>
</gl-form-group>
<gl-form-group
:label="s__('DastProfiles|Password form field')"
:invalid-feedback="form.fields.passwordField.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.passwordField.value"
v-validation:[showValidationOrInEditMode]
name="passwordField"
type="text"
required
:state="form.fields.passwordField.state"
/>
</gl-form-group>
</div>
</div>
<div class="row">
<gl-form-group
:disabled="disabled"
:label="s__('DastProfiles|Username form field')"
:invalid-feedback="form.fields.usernameField.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.usernameField.value"
v-validation:[showValidationOrInEditMode]
name="usernameField"
type="text"
required
:state="form.fields.usernameField.state"
/>
</gl-form-group>
<gl-form-group
:disabled="disabled"
:label="s__('DastProfiles|Password form field')"
:invalid-feedback="form.fields.passwordField.feedback"
class="col-md-6"
>
<gl-form-input
v-model="form.fields.passwordField.value"
v-validation:[showValidationOrInEditMode]
name="passwordField"
type="text"
required
:state="form.fields.passwordField.state"
/>
</gl-form-group>
</div>
</div>
</gl-form-group>
</section>
</template>
ee/app/assets/javascripts/security_configuration/dast_site_profiles_form/components/dast_site_profile_form.vue
View file @ 4abb1f05
......@@ -274,95 +274,90 @@ export default {
</ul>
</gl-alert>
<gl-form-group
:disabled="isPolicyProfile"
:label="s__('DastProfiles|Profile name')"
:invalid-feedback="form.fields.profileName.feedback"
>
<gl-form-input
v-model="form.fields.profileName.value"
v-validation:[form.showValidation]
name="profileName"
class="mw-460"
data-testid="profile-name-input"
type="text"
required
:state="form.fields.profileName.state"
/>
</gl-form-group>
<hr class="gl-border-gray-100" />
<gl-form-group
:disabled="isPolicyProfile"
data-testid="target-url-input-group"
:invalid-feedback="form.fields.targetUrl.feedback"
:label="s__('DastProfiles|Target URL')"
>
<gl-form-input
v-model="form.fields.targetUrl.value"
v-validation:[form.showValidation]
name="targetUrl"
class="mw-460"
data-testid="target-url-input"
required
type="url"
:state="form.fields.targetUrl.state"
/>
</gl-form-group>
<div v-if="glFeatures.securityDastSiteProfilesAdditionalFields" class="row">
<gl-form-group data-testid="dast-site-parent-group" :disabled="isPolicyProfile">
<gl-form-group
:disabled="isPolicyProfile"
:label="s__('DastProfiles|Excluded URLs (Optional)')"
:invalid-feedback="form.fields.excludedUrls.feedback"
class="col-md-6"
:label="s__('DastProfiles|Profile name')"
:invalid-feedback="form.fields.profileName.feedback"
>
<template #label>
{{ i18n.excludedUrls.label }}
<tooltip-icon :title="i18n.excludedUrls.tooltip" />
<gl-form-text class="gl-mt-3">{{ i18n.excludedUrls.description }}</gl-form-text>
</template>
<gl-form-textarea
v-model="form.fields.excludedUrls.value"
:maxlength="$options.MAX_CHAR_LIMIT_EXCLUDED_URLS"
:placeholder="i18n.excludedUrls.placeholder"
:no-resize="false"
data-testid="excluded-urls-input"
<gl-form-input
v-model="form.fields.profileName.value"
v-validation:[form.showValidation]
name="profileName"
class="mw-460"
data-testid="profile-name-input"
type="text"
required
:state="form.fields.profileName.state"
/>
<gl-form-text>{{
getCharacterLimitText(
form.fields.excludedUrls.value,
$options.MAX_CHAR_LIMIT_EXCLUDED_URLS,
)
}}</gl-form-text>
</gl-form-group>
<hr class="gl-border-gray-100" />
<gl-form-group
:disabled="isPolicyProfile"
:invalid-feedback="form.fields.requestHeaders.feedback"
class="col-md-6"
data-testid="target-url-input-group"
:invalid-feedback="form.fields.targetUrl.feedback"
:label="s__('DastProfiles|Target URL')"
>
<template #label>
{{ i18n.requestHeaders.label }}
<tooltip-icon :title="i18n.requestHeaders.tooltip" />
<gl-form-text class="gl-mt-3">{{ i18n.requestHeaders.description }}</gl-form-text>
</template>
<gl-form-textarea
v-model="form.fields.requestHeaders.value"
:maxlength="$options.MAX_CHAR_LIMIT_REQUEST_HEADERS"
:placeholder="i18n.requestHeaders.placeholder"
:no-resize="false"
data-testid="request-headers-input"
<gl-form-input
v-model="form.fields.targetUrl.value"
v-validation:[form.showValidation]
name="targetUrl"
class="mw-460"
data-testid="target-url-input"
required
type="url"
:state="form.fields.targetUrl.state"
/>
<gl-form-text>{{
getCharacterLimitText(
form.fields.requestHeaders.value,
$options.MAX_CHAR_LIMIT_REQUEST_HEADERS,
)
}}</gl-form-text>
</gl-form-group>
</div>
<div v-if="glFeatures.securityDastSiteProfilesAdditionalFields" class="row">
<gl-form-group
:label="s__('DastProfiles|Excluded URLs (Optional)')"
:invalid-feedback="form.fields.excludedUrls.feedback"
class="col-md-6"
>
<template #label>
{{ i18n.excludedUrls.label }}
<tooltip-icon :title="i18n.excludedUrls.tooltip" />
<gl-form-text class="gl-mt-3">{{ i18n.excludedUrls.description }}</gl-form-text>
</template>
<gl-form-textarea
v-model="form.fields.excludedUrls.value"
:maxlength="$options.MAX_CHAR_LIMIT_EXCLUDED_URLS"
:placeholder="i18n.excludedUrls.placeholder"
:no-resize="false"
data-testid="excluded-urls-input"
/>
<gl-form-text>{{
getCharacterLimitText(
form.fields.excludedUrls.value,
$options.MAX_CHAR_LIMIT_EXCLUDED_URLS,
)
}}</gl-form-text>
</gl-form-group>
<gl-form-group :invalid-feedback="form.fields.requestHeaders.feedback" class="col-md-6">
<template #label>
{{ i18n.requestHeaders.label }}
<tooltip-icon :title="i18n.requestHeaders.tooltip" />
<gl-form-text class="gl-mt-3">{{ i18n.requestHeaders.description }}</gl-form-text>
</template>
<gl-form-textarea
v-model="form.fields.requestHeaders.value"
:maxlength="$options.MAX_CHAR_LIMIT_REQUEST_HEADERS"
:placeholder="i18n.requestHeaders.placeholder"
:no-resize="false"
data-testid="request-headers-input"
/>
<gl-form-text>{{
getCharacterLimitText(
form.fields.requestHeaders.value,
$options.MAX_CHAR_LIMIT_REQUEST_HEADERS,
)
}}</gl-form-text>
</gl-form-group>
</div>
</gl-form-group>
<dast-site-auth-section
v-if="glFeatures.securityDastSiteProfilesAdditionalFields"
......
ee/spec/frontend/security_configuration/dast_scanner_profiles_form/components/dast_scanner_profiles_form_spec.js
View file @ 4abb1f05
import { GlForm, GlFormGroup, GlModal } from '@gitlab/ui';
import { GlForm, GlModal } from '@gitlab/ui';
import { within } from '@testing-library/dom';
import { mount, shallowMount } from '@vue/test-utils';
import merge from 'lodash/merge';
......@@ -40,7 +40,7 @@ describe('DAST Scanner Profile', () => {
const withinComponent = () => within(wrapper.element);
const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"`);
const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
const findParentFormGroup = () => findByTestId('dast-scanner-parent-group');
const findForm = () => wrapper.find(GlForm);
const findProfileNameInput = () => findByTestId('profile-name-input');
const findSpiderTimeoutInput = () => findByTestId('spider-timeout-input');
......@@ -294,9 +294,7 @@ describe('DAST Scanner Profile', () => {
});
it('should enable all form groups', () => {
expect(
findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === undefined),
).toBe(true);
expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
});
it('should show the policy profile alert', () => {
......@@ -318,9 +316,7 @@ describe('DAST Scanner Profile', () => {
});
it('should disable all form groups', () => {
expect(findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === 'true')).toBe(
true,
);
expect(findParentFormGroup().attributes('disabled')).toBe('true');
});
it('should disable the save button', () => {
......
ee/spec/frontend/security_configuration/dast_site_profiles_form/components/dast_site_auth_section_spec.js
View file @ 4abb1f05
import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
import { GlFormCheckbox } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import DastSiteAuthSection from 'ee/security_configuration/dast_site_profiles_form/components/dast_site_auth_section.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
......@@ -25,7 +25,7 @@ describe('DastSiteAuthSection', () => {
wrapper.destroy();
});
const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
const findParentFormGroup = () => wrapper.findByTestId('dast-site-auth-parent-group');
const findByNameAttribute = (name) => wrapper.find(`[name="${name}"]`);
const findAuthForm = () => wrapper.findByTestId('auth-form');
const findAuthCheckbox = () => wrapper.find(GlFormCheckbox);
......@@ -121,18 +121,14 @@ describe('DastSiteAuthSection', () => {
describe('when profile does not come from a policy', () => {
it('should enable all form groups', () => {
createComponent({ mountFn: shallowMount, fields: { enabled: true } });
expect(
findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === undefined),
).toBe(true);
expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
});
});
describe('when profile does comes from a policy', () => {
it('should disable all form groups', () => {
createComponent({ mountFn: shallowMount, disabled: true, fields: { enabled: true } });
expect(findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === 'true')).toBe(
true,
);
expect(findParentFormGroup().attributes('disabled')).toBe('true');
});
});
});
......
ee/spec/frontend/security_configuration/dast_site_profiles_form/components/dast_site_profile_form_spec.js
View file @ 4abb1f05
import { GlForm, GlFormGroup, GlModal } from '@gitlab/ui';
import { GlForm, GlModal } from '@gitlab/ui';
import { within } from '@testing-library/dom';
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import merge from 'lodash/merge';
......@@ -46,7 +46,7 @@ describe('DastSiteProfileForm', () => {
const withinComponent = () => within(wrapper.element);
const findForm = () => wrapper.findComponent(GlForm);
const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
const findParentFormGroup = () => wrapper.findByTestId('dast-site-parent-group');
const findAuthSection = () => wrapper.findComponent(DastSiteAuthSection);
const findCancelModal = () => wrapper.findComponent(GlModal);
const findByNameAttribute = (name) => wrapper.find(`[name="${name}"]`);
......@@ -346,9 +346,7 @@ describe('DastSiteProfileForm', () => {
});
it('should enable all form groups', () => {
expect(
findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === undefined),
).toBe(true);
expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
});
it('should show the policy profile alert', () => {
......@@ -370,9 +368,7 @@ describe('DastSiteProfileForm', () => {
});
it('should disable all form groups', () => {
expect(findAllFormGroups().wrappers.every((w) => w.attributes('disabled') === 'true')).toBe(
true,
);
expect(findParentFormGroup().attributes('disabled')).toBe('true');
});
it('should disable the save button', () => {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7