From 9f46488805e86b1bc341ea1620b866016c2ce5ed Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Wed, 20 May 2020 14:34:42 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-0-stable-ee

---
 .../shared/components/interval_pattern_input.vue   | 139 +++++++++++++++------
 1 file changed, 103 insertions(+), 36 deletions(-)

(limited to 'app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue')

diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 3a0d9c17228..4efabcb7df3 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -1,5 +1,13 @@
 <script>
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import { getWeekdayNames } from '~/lib/utils/datetime_utility';
+
 export default {
+  components: {
+    GlSprintf,
+    GlLink,
+  },
   props: {
     initialCronInterval: {
       type: String,
@@ -9,25 +17,51 @@ export default {
   },
   data() {
     return {
+      isEditingCustom: false,
+      randomHour: this.generateRandomHour(),
+      randomWeekDayIndex: this.generateRandomWeekDayIndex(),
+      randomDay: this.generateRandomDay(),
       inputNameAttribute: 'schedule[cron]',
       cronInterval: this.initialCronInterval,
-      cronIntervalPresets: {
-        everyDay: '0 4 * * *',
-        everyWeek: '0 4 * * 0',
-        everyMonth: '0 4 1 * *',
-      },
       cronSyntaxUrl: 'https://en.wikipedia.org/wiki/Cron',
-      customInputEnabled: false,
     };
   },
   computed: {
+    cronIntervalPresets() {
+      return {
+        everyDay: `0 ${this.randomHour} * * *`,
+        everyWeek: `0 ${this.randomHour} * * ${this.randomWeekDayIndex}`,
+        everyMonth: `0 ${this.randomHour} ${this.randomDay} * *`,
+      };
+    },
     intervalIsPreset() {
       return Object.values(this.cronIntervalPresets).includes(this.cronInterval);
     },
-    // The text input is editable when there's a custom interval, or when it's
-    // a preset interval and the user clicks the 'custom' radio button
-    isEditable() {
-      return Boolean(this.customInputEnabled || !this.intervalIsPreset);
+    formattedTime() {
+      if (this.randomHour > 12) {
+        return `${this.randomHour - 12}:00pm`;
+      } else if (this.randomHour === 12) {
+        return `12:00pm`;
+      }
+      return `${this.randomHour}:00am`;
+    },
+    weekday() {
+      return getWeekdayNames()[this.randomWeekDayIndex];
+    },
+    everyDayText() {
+      return sprintf(s__(`Every day (at %{time})`), { time: this.formattedTime });
+    },
+    everyWeekText() {
+      return sprintf(s__('Every week (%{weekday} at %{time})'), {
+        weekday: this.weekday,
+        time: this.formattedTime,
+      });
+    },
+    everyMonthText() {
+      return sprintf(s__('Every month (Day %{day} at %{time})'), {
+        day: this.randomDay,
+        time: this.formattedTime,
+      });
     },
   },
   watch: {
@@ -39,14 +73,31 @@ export default {
       });
     },
   },
-  created() {
-    if (this.intervalIsPreset) {
-      this.enableCustomInput = false;
+  // If at the mounting stage the default is still an empty string, we
+  // know we are not editing an existing field so we update it so
+  // that the default is the first radio option
+  mounted() {
+    if (this.cronInterval === '') {
+      this.cronInterval = this.cronIntervalPresets.everyDay;
     }
   },
   methods: {
+    setCustomInput(e) {
+      if (!this.isEditingCustom) {
+        this.isEditingCustom = true;
+        this.$refs.customInput.click();
+        // Because we need to manually trigger the click on the radio btn,
+        // it will add a space to update the v-model. If the user is typing
+        // and the space is added, it will feel very unituitive so we reset
+        // the value to the original
+        this.cronInterval = e.target.value;
+      }
+      if (this.intervalIsPreset) {
+        this.isEditingCustom = false;
+      }
+    },
     toggleCustomInput(shouldEnable) {
-      this.customInputEnabled = shouldEnable;
+      this.isEditingCustom = shouldEnable;
 
       if (shouldEnable) {
         // We need to change the value so other radios don't remain selected
@@ -54,30 +105,21 @@ export default {
         this.cronInterval = `${this.cronInterval} `;
       }
     },
+    generateRandomHour() {
+      return Math.floor(Math.random() * 23);
+    },
+    generateRandomWeekDayIndex() {
+      return Math.floor(Math.random() * 6);
+    },
+    generateRandomDay() {
+      return Math.floor(Math.random() * 28);
+    },
   },
 };
 </script>
 
 <template>
   <div class="interval-pattern-form-group">
-    <div class="cron-preset-radio-input">
-      <input
-        id="custom"
-        :name="inputNameAttribute"
-        :value="cronInterval"
-        :checked="isEditable"
-        class="label-bold"
-        type="radio"
-        @click="toggleCustomInput(true)"
-      />
-
-      <label for="custom"> {{ s__('PipelineSheduleIntervalPattern|Custom') }} </label>
-
-      <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"
@@ -89,7 +131,9 @@ export default {
         @click="toggleCustomInput(false)"
       />
 
-      <label class="label-bold" for="every-day"> {{ __('Every day (at 4:00am)') }} </label>
+      <label class="label-bold" for="every-day">
+        {{ everyDayText }}
+      </label>
     </div>
 
     <div class="cron-preset-radio-input">
@@ -104,7 +148,7 @@ export default {
       />
 
       <label class="label-bold" for="every-week">
-        {{ __('Every week (Sundays at 4:00am)') }}
+        {{ everyWeekText }}
       </label>
     </div>
 
@@ -120,20 +164,43 @@ export default {
       />
 
       <label class="label-bold" for="every-month">
-        {{ __('Every month (on the 1st at 4:00am)') }}
+        {{ everyMonthText }}
       </label>
     </div>
 
+    <div class="cron-preset-radio-input">
+      <input
+        id="custom"
+        ref="customInput"
+        v-model="cronInterval"
+        :name="inputNameAttribute"
+        :value="cronInterval"
+        class="label-bold"
+        type="radio"
+        @click="toggleCustomInput(true)"
+      />
+
+      <label for="custom"> {{ s__('PipelineSheduleIntervalPattern|Custom') }} </label>
+
+      <gl-sprintf :message="__('(%{linkStart}Cron syntax%{linkEnd})')">
+        <template #link="{content}">
+          <gl-link :href="cronSyntaxUrl" target="_blank" class="gl-font-sm">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
+
     <div class="cron-interval-input-wrapper">
       <input
         id="schedule_cron"
         v-model="cronInterval"
         :placeholder="__('Define a custom pattern with cron syntax')"
         :name="inputNameAttribute"
-        :disabled="!isEditable"
         class="form-control inline cron-interval-input"
         type="text"
         required="true"
+        @input="setCustomInput"
       />
     </div>
   </div>
-- 
cgit v1.2.1