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

Polish UI on pipeline schedules form

Closes #32172

See merge request !11332

7 files changed, 114 insertions, 124 deletions

diff --git a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
index 152e75b747e..4d623763ca7 100644
--- a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
+++ b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
@@ -24,9 +24,6 @@ export default {
     };
   },
   computed: {
-    showUnsetWarning() {
-      return this.cronInterval === '';
-    },
     intervalIsPreset() {
       return _.contains(this.cronIntervalPresets, this.cronInterval);
     },
@@ -63,67 +60,75 @@ export default {
   },
   template: `
     <div class="interval-pattern-form-group">
-      <input
-        id="custom"
-        class="label-light"
-        type="radio"
-        :name="inputNameAttribute"
-        :value="cronInterval"
-        :checked="isEditable"
-        @click="toggleCustomInput(true)"
-      />
+      <div class="cron-preset-radio-input">
+        <input
+          id="custom"
+          class="label-light"
+          type="radio"
+          :name="inputNameAttribute"
+          :value="cronInterval"
+          :checked="isEditable"
+          @click="toggleCustomInput(true)"
+        />
 
-      <label for="custom">
-        Custom
-      </label>
+        <label for="custom">
+          Custom
+        </label>
 
-      <span class="cron-syntax-link-wrap">
-        (<a :href="cronSyntaxUrl" target="_blank">Cron syntax</a>)
-      </span>
+        <span class="cron-syntax-link-wrap">
+          (<a :href="cronSyntaxUrl" target="_blank">Cron syntax</a>)
+        </span>
+      </div>
 
-      <input
-        id="every-day"
-        class="label-light"
-        type="radio"
-        v-model="cronInterval"
-        :name="inputNameAttribute"
-        :value="cronIntervalPresets.everyDay"
-        @click="toggleCustomInput(false)"
-      />
+      <div class="cron-preset-radio-input">
+        <input
+          id="every-day"
+          class="label-light"
+          type="radio"
+          v-model="cronInterval"
+          :name="inputNameAttribute"
+          :value="cronIntervalPresets.everyDay"
+          @click="toggleCustomInput(false)"
+        />
 
-      <label class="label-light" for="every-day">
-        Every day (at 4:00am)
-      </label>
+        <label class="label-light" for="every-day">
+          Every day (at 4:00am)
+        </label>
+      </div>
 
-      <input
-        id="every-week"
-        class="label-light"
-        type="radio"
-        v-model="cronInterval"
-        :name="inputNameAttribute"
-        :value="cronIntervalPresets.everyWeek"
-        @click="toggleCustomInput(false)"
-      />
+      <div class="cron-preset-radio-input">
+        <input
+          id="every-week"
+          class="label-light"
+          type="radio"
+          v-model="cronInterval"
+          :name="inputNameAttribute"
+          :value="cronIntervalPresets.everyWeek"
+          @click="toggleCustomInput(false)"
+        />
 
-      <label class="label-light" for="every-week">
-        Every week (Sundays at 4:00am)
-      </label>
+        <label class="label-light" for="every-week">
+          Every week (Sundays at 4:00am)
+        </label>
+      </div>
 
-      <input
-        id="every-month"
-        class="label-light"
-        type="radio"
-        v-model="cronInterval"
-        :name="inputNameAttribute"
-        :value="cronIntervalPresets.everyMonth"
-        @click="toggleCustomInput(false)"
-      />
+      <div class="cron-preset-radio-input">
+        <input
+          id="every-month"
+          class="label-light"
+          type="radio"
+          v-model="cronInterval"
+          :name="inputNameAttribute"
+          :value="cronIntervalPresets.everyMonth"
+          @click="toggleCustomInput(false)"
+        />
 
-      <label class="label-light" for="every-month">
-        Every month (on the 1st at 4:00am)
-      </label>
+        <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>
   `,
 };
diff --git a/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js b/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js
index 22e746ad2c3..0c3926d76b5 100644
--- a/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js
+++ b/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js
@@ -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();
   }
diff --git a/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js b/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js
index c70e0502cf8..95ed9c7dc21 100644
--- a/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js
+++ b/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js
@@ -1,12 +1,14 @@
 /* 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,12 +44,20 @@ 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 }) {
     e.preventDefault();
     this.$input.val(selectedObj.identifier);
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index 0fee54a0d19..ab417948931 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -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;
+  }
+}
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index d6f4f1a206c..bbed10039af 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -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'
diff --git a/spec/features/projects/pipeline_schedules_spec.rb b/spec/features/projects/pipeline_schedules_spec.rb
index fe9f94db574..03a30bfb996 100644
--- a/spec/features/projects/pipeline_schedules_spec.rb
+++ b/spec/features/projects/pipeline_schedules_spec.rb
@@ -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
 
diff --git a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
index 08fa6ca9057..845b371d90c 100644
--- a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
+++ b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
@@ -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);