Commit 5f4b0b7d authored by Peter Hegman's avatar Peter Hegman Committed by Olena Horal-Koretska

Migrate checkboxes on user preferences page to be Pajamas compliant

Part of Pajamas migration day.

Changelog: changed
parent fe874613
<script> <script>
import { GlFormText, GlIcon, GlLink } from '@gitlab/ui'; import { GlIcon, GlLink, GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue'; import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
export default { export default {
name: 'IntegrationView', name: 'IntegrationView',
components: { components: {
GlFormText,
GlIcon, GlIcon,
GlLink, GlLink,
GlFormGroup,
GlFormCheckbox,
IntegrationHelpText, IntegrationHelpText,
}, },
inject: ['userFields'], inject: ['userFields'],
...@@ -31,7 +32,7 @@ export default { ...@@ -31,7 +32,7 @@ export default {
}, },
data() { data() {
return { return {
isEnabled: this.userFields[this.config.formName], isEnabled: this.userFields[this.config.formName] ? '1' : '0',
}; };
}, },
computed: { computed: {
...@@ -46,14 +47,13 @@ export default { ...@@ -46,14 +47,13 @@ export default {
</script> </script>
<template> <template>
<div> <gl-form-group>
<label class="label-bold"> <template #label>
{{ config.title }} {{ config.title }}
</label>
<gl-link class="has-tooltip" title="More information" :href="helpLink"> <gl-link class="has-tooltip" title="More information" :href="helpLink">
<gl-icon name="question-o" class="vertical-align-middle" /> <gl-icon name="question-o" class="vertical-align-middle" />
</gl-link> </gl-link>
<div class="form-group form-check" data-testid="profile-preferences-integration-form-group"> </template>
<!-- Necessary for Rails to receive the value when not checked --> <!-- Necessary for Rails to receive the value when not checked -->
<input <input
:name="formName" :name="formName"
...@@ -61,21 +61,11 @@ export default { ...@@ -61,21 +61,11 @@ export default {
value="0" value="0"
data-testid="profile-preferences-integration-hidden-field" data-testid="profile-preferences-integration-hidden-field"
/> />
<input <gl-form-checkbox :id="formId" :checked="isEnabled" :name="formName" value="1"
:id="formId" >{{ config.label }}
v-model="isEnabled" <template #help>
type="checkbox"
class="form-check-input"
:name="formName"
value="1"
data-testid="profile-preferences-integration-checkbox"
/>
<label class="form-check-label" :for="formId">
{{ config.label }}
</label>
<gl-form-text tag="div">
<integration-help-text :message="message" :message-url="messageUrl" /> <integration-help-text :message="message" :message-url="messageUrl" />
</gl-form-text> </template>
</div> </gl-form-checkbox>
</div> </gl-form-group>
</template> </template>
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
- Gitlab::Themes.each do |theme| - Gitlab::Themes.each do |theme|
= stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f| = gitlab_ui_form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
.row.gl-mt-3.js-preferences-form.js-search-settings-section .row.gl-mt-3.js-preferences-form.js-search-settings-section
.col-lg-4.application-theme#navigation-theme .col-lg-4.application-theme#navigation-theme
%h4.gl-mt-0 %h4.gl-mt-0
...@@ -87,27 +87,19 @@ ...@@ -87,27 +87,19 @@
= f.select :project_view, project_view_choices, {}, class: 'select2' = f.select :project_view, project_view_choices, {}, class: 'select2'
.form-text.text-muted .form-text.text-muted
= s_('Preferences|Choose what content you want to see on a project’s overview page.') = s_('Preferences|Choose what content you want to see on a project’s overview page.')
.form-group.form-check .form-group
= f.check_box :render_whitespace_in_code, class: 'form-check-input' = f.gitlab_ui_checkbox_component :render_whitespace_in_code, s_('Preferences|Render whitespace characters in the Web IDE')
= f.label :render_whitespace_in_code, class: 'form-check-label' do .form-group
= s_('Preferences|Render whitespace characters in the Web IDE') = f.gitlab_ui_checkbox_component :show_whitespace_in_diffs, s_('Preferences|Show whitespace changes in diffs')
.form-group.form-check .form-group
= f.check_box :show_whitespace_in_diffs, class: 'form-check-input' = f.gitlab_ui_checkbox_component :view_diffs_file_by_file,
= f.label :show_whitespace_in_diffs, class: 'form-check-label' do s_("Preferences|Show one file at a time on merge request's Changes tab"),
= s_('Preferences|Show whitespace changes in diffs') help_text: s_("Preferences|Instead of all the files changed, show only one file at a time. To switch between files, use the file browser.")
.form-group.form-check .form-group
= f.check_box :view_diffs_file_by_file, class: 'form-check-input' - supported_characters = %w(" ' ` &#40; [ { < * _).map {|char| "<code>#{char}</code>" }.join(', ')
= f.label :view_diffs_file_by_file, class: 'form-check-label' do = f.gitlab_ui_checkbox_component :markdown_surround_selection,
= s_("Preferences|Show one file at a time on merge request's Changes tab") s_('Preferences|Surround text selection when typing quotes or brackets'),
.form-text.text-muted help_text: sprintf(s_( "Preferences|When you type in a description or comment box, selected text is surrounded by the corresponding character after typing one of the following characters: %{supported_characters}."), { supported_characters: supported_characters }).html_safe
= s_("Preferences|Instead of all the files changed, show only one file at a time. To switch between files, use the file browser.")
.form-group.form-check
= f.check_box :markdown_surround_selection, class: 'form-check-input'
= f.label :markdown_surround_selection, class: 'form-check-label' do
= s_('Preferences|Surround text selection when typing quotes or brackets')
.form-text.text-muted
- supported_characters = %w(" ' ` \( [ { < * _).map {|char| "<code>#{char}</code>" }.join(', ')
= sprintf(s_( "Preferences|When you type in a description or comment box, selected text is surrounded by the corresponding character after typing one of the following characters: %{supported_characters}."), { supported_characters: supported_characters }).html_safe
.form-group .form-group
= f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold' = f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
...@@ -151,16 +143,12 @@ ...@@ -151,16 +143,12 @@
= succeed '.' do = succeed '.' do
= link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'time-preferences'), target: '_blank', rel: 'noopener noreferrer' = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'time-preferences'), target: '_blank', rel: 'noopener noreferrer'
.col-lg-8 .col-lg-8
.form-group.form-check .form-group
= f.check_box :time_display_relative, class: 'form-check-input' = f.gitlab_ui_checkbox_component :time_display_relative,
= f.label :time_display_relative, class: 'form-check-label' do s_('Preferences|Use relative times'),
= s_('Preferences|Use relative times') help_text: s_('Preferences|For example: 30 minutes ago.')
.form-text.text-muted
= s_('Preferences|For example: 30 minutes ago.')
- if Feature.enabled?(:user_time_settings) - if Feature.enabled?(:user_time_settings)
.form-group.form-check .form-group
= f.check_box :time_format_in_24h, class: 'form-check-input' = f.gitlab_ui_checkbox_component :time_format_in_24h, s_('Preferences|Display time in 24-hour format')
= f.label :time_format_in_24h, class: 'form-check-label' do
= s_('Preferences|Display time in 24-hour format')
#js-profile-preferences-app{ data: data_attributes } #js-profile-preferences-app{ data: data_attributes }
import { GlFormText } from '@gitlab/ui'; import { GlFormGroup } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import IntegrationView from '~/profile/preferences/components/integration_view.vue'; import IntegrationView from '~/profile/preferences/components/integration_view.vue';
...@@ -21,7 +21,7 @@ describe('IntegrationView component', () => { ...@@ -21,7 +21,7 @@ describe('IntegrationView component', () => {
function createComponent(options = {}) { function createComponent(options = {}) {
const { props = {}, provide = {} } = options; const { props = {}, provide = {} } = options;
return shallowMount(IntegrationView, { return mountExtended(IntegrationView, {
provide: { provide: {
userFields, userFields,
...provide, ...provide,
...@@ -33,28 +33,20 @@ describe('IntegrationView component', () => { ...@@ -33,28 +33,20 @@ describe('IntegrationView component', () => {
}); });
} }
function findCheckbox() { const findCheckbox = () => wrapper.findByLabelText(new RegExp(defaultProps.config.label));
return wrapper.find('[data-testid="profile-preferences-integration-checkbox"]'); const findFormGroup = () => wrapper.findComponent(GlFormGroup);
} const findHiddenField = () =>
function findFormGroup() { wrapper.findByTestId('profile-preferences-integration-hidden-field');
return wrapper.find('[data-testid="profile-preferences-integration-form-group"]');
}
function findHiddenField() {
return wrapper.find('[data-testid="profile-preferences-integration-hidden-field"]');
}
function findFormGroupLabel() {
return wrapper.find('[data-testid="profile-preferences-integration-form-group"] label');
}
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
wrapper = null; wrapper = null;
}); });
it('should render the title correctly', () => { it('should render the form group legend correctly', () => {
wrapper = createComponent(); wrapper = createComponent();
expect(wrapper.find('label.label-bold').text()).toBe('Foo'); expect(wrapper.findByText(defaultProps.config.title).exists()).toBe(true);
}); });
it('should render the form correctly', () => { it('should render the form correctly', () => {
...@@ -106,13 +98,6 @@ describe('IntegrationView component', () => { ...@@ -106,13 +98,6 @@ describe('IntegrationView component', () => {
it('should render the help text', () => { it('should render the help text', () => {
wrapper = createComponent(); wrapper = createComponent();
expect(wrapper.find(GlFormText).exists()).toBe(true);
expect(wrapper.find(IntegrationHelpText).exists()).toBe(true); expect(wrapper.find(IntegrationHelpText).exists()).toBe(true);
}); });
it('should render the label correctly', () => {
wrapper = createComponent();
expect(findFormGroupLabel().text()).toBe('Enable foo');
});
}); });
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