Skip to content

G
gitlab-ce
Commit 9fde881d authored by Tim Zallmann's avatar Tim Zallmann
Browse files
Options

Merge branch '32172-improve-responsive-styling-of-pipeline-schedules-form' into 'master' 

Polish UI on pipeline schedules form

Closes #32172

See merge request !11332
parents 6a2bcb4b dadd74b5
Show whitespace changes
Inline Side-by-side
Showing with 114 additions and 124 deletions
app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
View file @ 9fde881d
......@@ -24,9 +24,6 @@ export default {
};
},
computed: {
showUnsetWarning() {
return this.cronInterval === '';
},
intervalIsPreset() {
return _.contains(this.cronIntervalPresets, this.cronInterval);
},
......@@ -63,6 +60,7 @@ export default {
},
template: `
<div class="interval-pattern-form-group">
<div class="cron-preset-radio-input">
<input
id="custom"
class="label-light"
......@@ -80,7 +78,9 @@ export default {
<span class="cron-syntax-link-wrap">
(<a :href="cronSyntaxUrl" target="_blank">Cron syntax</a>)
</span>
</div>
<div class="cron-preset-radio-input">
<input
id="every-day"
class="label-light"
......@@ -94,7 +94,9 @@ export default {
<label class="label-light" for="every-day">
Every day (at 4:00am)
</label>
</div>
<div class="cron-preset-radio-input">
<input
id="every-week"
class="label-light"
......@@ -108,7 +110,9 @@ export default {
<label class="label-light" for="every-week">
Every week (Sundays at 4:00am)
</label>
</div>
<div class="cron-preset-radio-input">
<input
id="every-month"
class="label-light"
......@@ -122,8 +126,9 @@ export default {
<label class="label-light" for="every-month">
Every month (on the 1st at 4:00am)
</label>
</div>
<div class="cron-interval-input-wrapper col-md-6">
<div class="cron-interval-input-wrapper">
<input
id="schedule_cron"
class="form-control inline cron-interval-input"
......@@ -135,9 +140,6 @@ export default {
:disabled="!isEditable"
/>
</div>
<span class="cron-unset-status col-md-3" v-if="showUnsetWarning">
Schedule not yet set
</span>
</div>
`,
};
app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js
View file @ 9fde881d
......@@ -3,7 +3,7 @@ export default class TargetBranchDropdown {
this.$dropdown = $('.js-target-branch-dropdown');
this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
this.$input = $('#schedule_ref');
this.initialValue = this.$input.val();
this.initDefaultBranch();
this.initDropdown();
}
......@@ -29,13 +29,23 @@ export default class TargetBranchDropdown {
}
setDropdownToggle() {
if (this.initialValue) {
this.$dropdownToggle.text(this.initialValue);
const initialValue = this.$input.val();
this.$dropdownToggle.text(initialValue);
}
initDefaultBranch() {
const initialValue = this.$input.val();
const defaultBranch = this.$dropdown.data('defaultBranch');
if (!initialValue) {
this.$input.val(defaultBranch);
}
}
updateInputValue({ selectedObj, e }) {
e.preventDefault();
this.$input.val(selectedObj.name);
gl.pipelineScheduleFieldErrors.updateFormValidityState();
}
......
app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js
View file @ 9fde881d
/* eslint-disable class-methods-use-this */
const defaultTimezone = 'UTC';
export default class TimezoneDropdown {
constructor() {
this.$dropdown = $('.js-timezone-dropdown');
this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
this.$input = $('#schedule_cron_timezone');
this.timezoneData = this.$dropdown.data('data');
this.initialValue = this.$input.val();
this.initDefaultTimezone();
this.initDropdown();
}
......@@ -42,10 +44,18 @@ export default class TimezoneDropdown {
return `[UTC ${this.formatUtcOffset(item.offset)}] ${item.name}`;
}
setDropdownToggle() {
if (this.initialValue) {
this.$dropdownToggle.text(this.initialValue);
initDefaultTimezone() {
const initialValue = this.$input.val();
if (!initialValue) {
this.$input.val(defaultTimezone);
}
}
setDropdownToggle() {
const initialValue = this.$input.val();
this.$dropdownToggle.text(initialValue);
}
updateInputValue({ selectedObj, e }) {
......
app/assets/stylesheets/pages/pipeline_schedules.scss
View file @ 9fde881d
......@@ -31,14 +31,6 @@
margin-right: 10px;
font-size: 12px;
}
.cron-unset-status {
padding-top: 16px;
margin-left: -16px;
color: $gl-text-color-secondary;
font-size: 12px;
font-weight: 600;
}
}
.pipeline-schedule-table-row {
......@@ -69,3 +61,16 @@
color: $gl-text-color;
}
}
.cron-preset-radio-input {
display: inline-block;
@media (max-width: $screen-md-max) {
display: block;
margin: 0 0 5px 5px;
}
input {
margin-right: 3px;
}
}
app/views/projects/pipeline_schedules/_form.html.haml
View file @ 9fde881d
......@@ -5,29 +5,29 @@
= form_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "form-horizontal js-pipeline-schedule-form" } do |f|
= form_errors(@schedule)
.form-group
.col-md-6
.col-md-9
= f.label :description, 'Description', class: 'label-light'
= f.text_field :description, class: 'form-control', required: true, autofocus: true, placeholder: 'Provide a short description for this pipeline'
.form-group
.col-md-12
.col-md-9
= f.label :cron, 'Interval Pattern', class: 'label-light'
#interval-pattern-input{ data: { initial_interval: @schedule.cron } }
.form-group
.col-md-6
.col-md-9
= f.label :cron_timezone, 'Cron Timezone', class: 'label-light'
= dropdown_tag("Select a timezone", options: { toggle_class: 'btn js-timezone-dropdown', title: "Select a timezone", filter: true, placeholder: "Filter", data: { data: timezone_data } } )
= f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true
.form-group
.col-md-6
.col-md-9
= f.label :ref, 'Target Branch', class: 'label-light'
= dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } )
= dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } )
= f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
.form-group
.col-md-6
.col-md-9
= f.label :active, 'Activated', class: 'label-light'
%div
= f.check_box :active, required: false, value: @schedule.active?
active
Active
.footer-block.row-content-block
= f.submit 'Save pipeline schedule', class: 'btn btn-create', tabindex: 3
= link_to 'Cancel', pipeline_schedules_path(@project), class: 'btn btn-cancel'
spec/features/projects/pipeline_schedules_spec.rb
View file @ 9fde881d
......@@ -70,6 +70,11 @@ feature 'Pipeline Schedules', :feature do
describe 'POST /projects/pipeline_schedules/new', js: true do
let(:visit_page) { visit_new_pipeline_schedule }
it 'sets defaults for timezone and target branch' do
expect(page).to have_button('master')
expect(page).to have_button('UTC')
end
it 'it creates a new scheduled pipeline' do
fill_in_schedule_form
save_pipeline_schedule
......@@ -118,12 +123,12 @@ feature 'Pipeline Schedules', :feature do
end
def select_timezone
click_button 'Select a timezone'
find('.js-timezone-dropdown').click
click_link 'American Samoa'
end
def select_target_branch
click_button 'Select target branch'
find('.js-target-branch-dropdown').click
click_link 'master'
end
......
spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
View file @ 9fde881d
......@@ -36,20 +36,6 @@ describe('Interval Pattern Input Component', function () {
expect(this.intervalPatternComponent.initialCronInterval).toBe(this.initialCronInterval);
});
it('sets showUnsetWarning to false', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.showUnsetWarning).toBe(false);
done();
});
});
it('does not render showUnsetWarning', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.$el.outerHTML).not.toContain('Schedule not yet set');
done();
});
});
it('sets isEditable to true', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.isEditable).toBe(true);
......@@ -72,20 +58,6 @@ describe('Interval Pattern Input Component', function () {
expect(this.intervalPatternComponent).toBeDefined();
});
it('sets showUnsetWarning to false', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.showUnsetWarning).toBe(false);
done();
});
});
it('does not render showUnsetWarning', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.$el.outerHTML).not.toContain('Schedule not yet set');
done();
});
});
it('sets isEditable to false', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.isEditable).toBe(false);
......@@ -113,20 +85,6 @@ describe('Interval Pattern Input Component', function () {
expect(this.intervalPatternComponent.initialCronInterval).toBe(defaultInitialCronInterval);
});
it('sets showUnsetWarning to true', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.showUnsetWarning).toBe(true);
done();
});
});
it('renders showUnsetWarning to true', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.$el.outerHTML).toContain('Schedule not yet set');
done();
});
});
it('sets isEditable to true', function (done) {
Vue.nextTick(() => {
expect(this.intervalPatternComponent.isEditable).toBe(true);
......
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