Clean up UI and styles.

3 files changed, 87 insertions, 65 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);