Skip to content

G
gitlab-ce
Commit 5f4b0b7d authored by Peter Hegman's avatar Peter Hegman Committed by Olena Horal-Koretska
Browse files
Options

Migrate checkboxes on user preferences page to be Pajamas compliant 

Part of Pajamas migration day.

Changelog: changed
parent fe874613
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 89 deletions
app/assets/javascripts/profile/preferences/components/integration_view.vue
View file @ 5f4b0b7d
<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';
export default {
name: 'IntegrationView',
components: {
GlFormText,
GlIcon,
GlLink,
GlFormGroup,
GlFormCheckbox,
IntegrationHelpText,
},
inject: ['userFields'],
......@@ -31,7 +32,7 @@ export default {
},
data() {
return {
isEnabled: this.userFields[this.config.formName],
isEnabled: this.userFields[this.config.formName] ? '1' : '0',
};
},
computed: {
......@@ -46,36 +47,25 @@ export default {
</script>
<template>
<div>
<label class="label-bold">
<gl-form-group>
<template #label>
{{ config.title }}
</label>
<gl-link class="has-tooltip" title="More information" :href="helpLink">
<gl-icon name="question-o" class="vertical-align-middle" />
</gl-link>
<div class="form-group form-check" data-testid="profile-preferences-integration-form-group">
<!-- Necessary for Rails to receive the value when not checked -->
<input
:name="formName"
type="hidden"
value="0"
data-testid="profile-preferences-integration-hidden-field"
/>
<input
:id="formId"
v-model="isEnabled"
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">
<gl-link class="has-tooltip" title="More information" :href="helpLink">
<gl-icon name="question-o" class="vertical-align-middle" />
</gl-link>
</template>
<!-- Necessary for Rails to receive the value when not checked -->
<input
:name="formName"
type="hidden"
value="0"
data-testid="profile-preferences-integration-hidden-field"
/>
<gl-form-checkbox :id="formId" :checked="isEnabled" :name="formName" value="1"
>{{ config.label }}
<template #help>
<integration-help-text :message="message" :message-url="messageUrl" />
</gl-form-text>
</div>
</div>
</template>
</gl-form-checkbox>
</gl-form-group>
</template>
app/views/profiles/preferences/show.html.haml
View file @ 5f4b0b7d
......@@ -8,7 +8,7 @@
- Gitlab::Themes.each do |theme|
= 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
.col-lg-4.application-theme#navigation-theme
%h4.gl-mt-0
......@@ -87,27 +87,19 @@
= f.select :project_view, project_view_choices, {}, class: 'select2'
.form-text.text-muted
= s_('Preferences|Choose what content you want to see on a project’s overview page.')
.form-group.form-check
= f.check_box :render_whitespace_in_code, class: 'form-check-input'
= f.label :render_whitespace_in_code, class: 'form-check-label' do
= s_('Preferences|Render whitespace characters in the Web IDE')
.form-group.form-check
= f.check_box :show_whitespace_in_diffs, class: 'form-check-input'
= f.label :show_whitespace_in_diffs, class: 'form-check-label' do
= s_('Preferences|Show whitespace changes in diffs')
.form-group.form-check
= f.check_box :view_diffs_file_by_file, class: 'form-check-input'
= f.label :view_diffs_file_by_file, class: 'form-check-label' do
= s_("Preferences|Show one file at a time on merge request's Changes tab")
.form-text.text-muted
= 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
= f.gitlab_ui_checkbox_component :render_whitespace_in_code, s_('Preferences|Render whitespace characters in the Web IDE')
.form-group
= f.gitlab_ui_checkbox_component :show_whitespace_in_diffs, s_('Preferences|Show whitespace changes in diffs')
.form-group
= f.gitlab_ui_checkbox_component :view_diffs_file_by_file,
s_("Preferences|Show one file at a time on merge request's Changes tab"),
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
- supported_characters = %w(" ' ` &#40; [ { < * _).map {|char| "<code>#{char}</code>" }.join(', ')
= f.gitlab_ui_checkbox_component :markdown_surround_selection,
s_('Preferences|Surround text selection when typing quotes or brackets'),
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
.form-group
= f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
......@@ -151,16 +143,12 @@
= succeed '.' do
= link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'time-preferences'), target: '_blank', rel: 'noopener noreferrer'
.col-lg-8
.form-group.form-check
= f.check_box :time_display_relative, class: 'form-check-input'
= f.label :time_display_relative, class: 'form-check-label' do
= s_('Preferences|Use relative times')
.form-text.text-muted
= s_('Preferences|For example: 30 minutes ago.')
.form-group
= f.gitlab_ui_checkbox_component :time_display_relative,
s_('Preferences|Use relative times'),
help_text: s_('Preferences|For example: 30 minutes ago.')
- if Feature.enabled?(:user_time_settings)
.form-group.form-check
= f.check_box :time_format_in_24h, class: 'form-check-input'
= f.label :time_format_in_24h, class: 'form-check-label' do
= s_('Preferences|Display time in 24-hour format')
.form-group
= f.gitlab_ui_checkbox_component :time_format_in_24h, s_('Preferences|Display time in 24-hour format')
#js-profile-preferences-app{ data: data_attributes }
spec/frontend/profile/preferences/components/integration_view_spec.js
View file @ 5f4b0b7d
import { GlFormText } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { GlFormGroup } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import IntegrationView from '~/profile/preferences/components/integration_view.vue';
......@@ -21,7 +21,7 @@ describe('IntegrationView component', () => {
function createComponent(options = {}) {
const { props = {}, provide = {} } = options;
return shallowMount(IntegrationView, {
return mountExtended(IntegrationView, {
provide: {
userFields,
...provide,
......@@ -33,28 +33,20 @@ describe('IntegrationView component', () => {
});
}
function findCheckbox() {
return wrapper.find('[data-testid="profile-preferences-integration-checkbox"]');
}
function findFormGroup() {
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');
}
const findCheckbox = () => wrapper.findByLabelText(new RegExp(defaultProps.config.label));
const findFormGroup = () => wrapper.findComponent(GlFormGroup);
const findHiddenField = () =>
wrapper.findByTestId('profile-preferences-integration-hidden-field');
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('should render the title correctly', () => {
it('should render the form group legend correctly', () => {
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', () => {
......@@ -106,13 +98,6 @@ describe('IntegrationView component', () => {
it('should render the help text', () => {
wrapper = createComponent();
expect(wrapper.find(GlFormText).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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7