Resolve "Decouple timezone dropdown component from deploy freeze"

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>

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);
 };

app/assets/javascripts/deploy_freeze/components/deploy_freeze_timezone_dropdown.vue → app/assets/javascripts/vue_shared/components/timezone_dropdown.vue

@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 
 export default {
-  name: 'DeployFreezeTimezoneDropdown',
+  name: 'TimezoneDropdown',
   components: {
     GlNewDropdown,
     GlDropdownItem,
@@ -17,7 +17,7 @@ export default {
   props: {
     value: {
       type: String,
-      required: false,
+      required: true,
       default: '',
     },
     timezoneData: {
@@ -28,7 +28,7 @@ export default {
   },
   data() {
     return {
-      searchTerm: this.value || '',
+      searchTerm: '',
     };
   },
   tranlations: {
@@ -47,18 +47,13 @@ export default {
         timezone.formattedTimezone.toLowerCase().includes(lowerCasedSearchTerm),
       );
     },
-    selectTimezoneLabel() {
+    selectedTimezoneLabel() {
       return this.value || __('Select timezone');
     },
   },
-  watch: {
-    value(newVal) {
-      this.searchTerm = newVal;
-    },
-  },
   methods: {
-    selectTimezone(selected) {
-      this.$emit('selectTimezone', selected);
+    selectTimezone(selectedTimezone) {
+      this.$emit('input', selectedTimezone);
       this.searchTerm = '';
     },
     isSelected(timezone) {
@@ -81,9 +76,9 @@ export default {
 <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>
+      <span class="gl-flex-grow-1" :class="{ 'gl-text-gray-500': !value }">
+        {{ selectedTimezoneLabel }}
+      </span>
       <gl-icon name="chevron-down" />
     </template>
 
@@ -100,7 +95,7 @@ export default {
       />
       {{ timezone.formattedTimezone }}
     </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">
+    <gl-dropdown-item v-if="!filteredResults.length" data-testid="noMatchingResults">
       {{ $options.tranlations.noResultsText }}
     </gl-dropdown-item>
   </gl-new-dropdown>

spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlButton, GlModal } from '@gitlab/ui';
 import DeployFreezeModal from '~/deploy_freeze/components/deploy_freeze_modal.vue';
-import DeployFreezeTimezoneDropdown from '~/deploy_freeze/components/deploy_freeze_timezone_dropdown.vue';
+import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
 import createStore from '~/deploy_freeze/store';
 import { mockDeployFreezePayload, mockTimezoneData } from '../mock_data';
 
@@ -41,7 +41,7 @@ describe('Deploy freeze modal', () => {
 
     wrapper.find('#deploy-freeze-start').trigger('input');
     wrapper.find('#deploy-freeze-end').trigger('input');
-    wrapper.find(DeployFreezeTimezoneDropdown).trigger('input');
+    wrapper.find(TimezoneDropdown).trigger('input');
   };
 
   afterEach(() => {

spec/frontend/deploy_freeze/components/deploy_freeze_timezone_dropdown_spec.js → spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js

 import Vuex from 'vuex';
-import DeployFreezeTimezoneDropdown from '~/deploy_freeze/components/deploy_freeze_timezone_dropdown.vue';
+import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import createStore from '~/deploy_freeze/store';
 import { mockTimezoneData } from '../mock_data';
 
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem, GlNewDropdown } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -13,20 +13,21 @@ describe('Deploy freeze timezone dropdown', () => {
   let wrapper;
   let store;
 
-  const createComponent = term => {
+  const createComponent = (searchTerm, selectedTimezone) => {
     store = createStore({
       projectId: '8',
       timezoneData: mockTimezoneData,
     });
-    store.state.timezoneData = mockTimezoneData;
-    wrapper = shallowMount(DeployFreezeTimezoneDropdown, {
+    wrapper = shallowMount(TimezoneDropdown, {
       store,
       localVue,
       propsData: {
-        value: term,
+        value: selectedTimezone,
         timezoneData: mockTimezoneData,
       },
     });
+
+    wrapper.setData({ searchTerm });
   };
 
   const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
@@ -37,7 +38,7 @@ describe('Deploy freeze timezone dropdown', () => {
     wrapper = null;
   });
 
-  describe('No enviroments found', () => {
+  describe('No time zones found', () => {
     beforeEach(() => {
       createComponent('UTC timezone');
     });
@@ -68,13 +69,13 @@ describe('Deploy freeze timezone dropdown', () => {
     });
 
     it('should not display empty results message', () => {
-      expect(wrapper.find({ ref: 'noMatchingResults' }).exists()).toBe(false);
+      expect(wrapper.find('[data-testid="noMatchingResults"]').exists()).toBe(false);
     });
 
     describe('Custom events', () => {
-      it('should emit selectTimezone if an environment is clicked', () => {
+      it('should emit input if a time zone is clicked', () => {
         findDropdownItemByIndex(0).vm.$emit('click');
-        expect(wrapper.emitted('selectTimezone')).toEqual([
+        expect(wrapper.emitted('input')).toEqual([
           [
             {
               formattedTimezone: '[UTC -8] Alaska',
@@ -85,4 +86,14 @@ describe('Deploy freeze timezone dropdown', () => {
       });
     });
   });
+
+  describe('Selected time zone', () => {
+    beforeEach(() => {
+      createComponent('', 'Alaska');
+    });
+
+    it('renders selected time zone as dropdown label', () => {
+      expect(wrapper.find(GlNewDropdown).vm.text).toBe('Alaska');
+    });
+  });
 });