Add latest changes from gitlab-org/gitlab@master

3 files changed, 12 insertions, 115 deletions

diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
index 05ee77b932a..835b75e1fcb 100644
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
+++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
@@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex';
 import { mapComputed } from '~/vuex_shared/bindings';
 import { __ } from '~/locale';
 import { MODAL_ID } from '../constants';
-import DeployFreezeTimezoneDropdown from './deploy_freeze_timezone_dropdown.vue';
+import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
 import { isValidCron } from 'cron-validator';
 
 export default {
@@ -14,7 +14,7 @@ export default {
     GlModal,
     GlSprintf,
     GlLink,
-    DeployFreezeTimezoneDropdown,
+    TimezoneDropdown,
   },
   modalOptions: {
     ref: 'modal',
@@ -39,7 +39,6 @@ export default {
       'timezoneData',
       'freezeStartCron',
       'freezeEndCron',
-      'selectedTimezone',
     ]),
     ...mapComputed([
       { key: 'freezeStartCron', updateFn: 'setFreezeStartCron' },
@@ -71,6 +70,14 @@ export default {
     freezeEndCronState() {
       return Boolean(!this.freezeEndCron || isValidCron(this.freezeEndCron));
     },
+    timezone: {
+      get() {
+        return this.selectedTimezone;
+      },
+      set(selectedTimezone) {
+        this.setSelectedTimezone(selectedTimezone);
+      },
+    },
   },
   methods: {
     ...mapActions(['addFreezePeriod', 'setSelectedTimezone', 'resetModal']),
@@ -137,11 +144,7 @@ export default {
     </gl-form-group>
 
     <gl-form-group :label="__('Cron time zone')" label-for="cron-time-zone-dropdown">
-      <deploy-freeze-timezone-dropdown
-        :timezone-data="timezoneData"
-        :value="selectedTimezone"
-        @selectTimezone="setSelectedTimezone"
-      />
+      <timezone-dropdown v-model="timezone" :timezone-data="timezoneData" />
     </gl-form-group>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_timezone_dropdown.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_timezone_dropdown.vue
deleted file mode 100644
index 09f6d9460ea..00000000000
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_timezone_dropdown.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script>
-import { GlNewDropdown, GlDropdownItem, GlSearchBoxByType, GlIcon } from '@gitlab/ui';
-import { __ } from '~/locale';
-import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
-
-export default {
-  name: 'DeployFreezeTimezoneDropdown',
-  components: {
-    GlNewDropdown,
-    GlDropdownItem,
-    GlSearchBoxByType,
-    GlIcon,
-  },
-  directives: {
-    autofocusonshow,
-  },
-  props: {
-    value: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    timezoneData: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      searchTerm: this.value || '',
-    };
-  },
-  tranlations: {
-    noResultsText: __('No matching results'),
-  },
-  computed: {
-    timezones() {
-      return this.timezoneData.map(timezone => ({
-        formattedTimezone: this.formatTimezone(timezone),
-        identifier: timezone.identifier,
-      }));
-    },
-    filteredResults() {
-      const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
-      return this.timezones.filter(timezone =>
-        timezone.formattedTimezone.toLowerCase().includes(lowerCasedSearchTerm),
-      );
-    },
-    selectTimezoneLabel() {
-      return this.value || __('Select timezone');
-    },
-  },
-  watch: {
-    value(newVal) {
-      this.searchTerm = newVal;
-    },
-  },
-  methods: {
-    selectTimezone(selected) {
-      this.$emit('selectTimezone', selected);
-      this.searchTerm = '';
-    },
-    isSelected(timezone) {
-      return this.value === timezone.formattedTimezone;
-    },
-    formatUtcOffset(offset) {
-      const parsed = parseInt(offset, 10);
-      if (Number.isNaN(parsed) || parsed === 0) {
-        return `0`;
-      }
-      const prefix = offset > 0 ? '+' : '-';
-      return `${prefix}${Math.abs(offset / 3600)}`;
-    },
-    formatTimezone(item) {
-      return `[UTC ${this.formatUtcOffset(item.offset)}] ${item.name}`;
-    },
-  },
-};
-</script>
-<template>
-  <gl-new-dropdown :text="value" block lazy menu-class="gl-w-full!">
-    <template #button-content>
-      <span ref="buttonText" class="gl-flex-grow-1" :class="{ 'gl-text-gray-500': !value }">{{
-        selectTimezoneLabel
-      }}</span>
-      <gl-icon name="chevron-down" />
-    </template>
-
-    <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus class="gl-m-3" />
-    <gl-dropdown-item
-      v-for="timezone in filteredResults"
-      :key="timezone.formattedTimezone"
-      @click="selectTimezone(timezone)"
-    >
-      <gl-icon
-        :class="{ invisible: !isSelected(timezone) }"
-        name="mobile-issue-close"
-        class="gl-vertical-align-middle"
-      />
-      {{ timezone.formattedTimezone }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">
-      {{ $options.tranlations.noResultsText }}
-    </gl-dropdown-item>
-  </gl-new-dropdown>
-</template>
diff --git a/app/assets/javascripts/deploy_freeze/store/actions.js b/app/assets/javascripts/deploy_freeze/store/actions.js
index e4c649ac4c3..7c042c17c05 100644
--- a/app/assets/javascripts/deploy_freeze/store/actions.js
+++ b/app/assets/javascripts/deploy_freeze/store/actions.js
@@ -64,6 +64,7 @@ export const fetchFreezePeriods = ({ dispatch, state }) => {
 export const setSelectedTimezone = ({ commit }, timezone) => {
   commit(types.SET_SELECTED_TIMEZONE, timezone);
 };
+
 export const setFreezeStartCron = ({ commit }, { freezeStartCron }) => {
   commit(types.SET_FREEZE_START_CRON, freezeStartCron);
 };