Resolve "timezones don't encode special characters properly"

ee/app/assets/javascripts/oncall_schedules/components/add_edit_schedule_form.vue

 <script>
 import {
+  GlIcon,
   GlForm,
   GlFormGroup,
   GlFormInput,
   GlDropdown,
   GlDropdownItem,
   GlSearchBoxByType,
+  GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { isEqual, isEmpty } from 'lodash';
 import { s__, __ } from '~/locale';
@@ -39,6 +41,7 @@ export const i18n = {
 export default {
   i18n,
   components: {
+    GlIcon,
     GlForm,
     GlFormGroup,
     GlFormInput,
@@ -46,6 +49,9 @@ export default {
     GlDropdownItem,
     GlSearchBoxByType,
   },
+  directives: {
+    SafeHtml,
+  },
   inject: ['projectPath', 'timezones'],
   props: {
     form: {
@@ -138,12 +144,15 @@ export default {
     >
       <gl-dropdown
         id="schedule-timezone"
-        :text="selectedTimezone"
         class="timezone-dropdown gl-w-full"
         :header-text="$options.i18n.selectTimezone"
         :class="{ 'invalid-dropdown': !validationState.timezone }"
         @hide="$emit('update-schedule-form', { type: 'timezone', value: selectedDropdownTimezone })"
       >
+        <template #button-content>
+          <span v-safe-html="selectedTimezone" class="gl-new-dropdown-button-text"></span>
+          <gl-icon class="dropdown-chevron" name="chevron-down" />
+        </template>
         <gl-search-box-by-type v-model.trim="tzSearchTerm" />
         <gl-dropdown-item
           v-for="tz in filteredTimezones"
@@ -152,7 +161,7 @@ export default {
           is-check-item
           @click="setTimezone(tz)"
         >
-          <span class="gl-white-space-nowrap"> {{ getFormattedTimezone(tz) }}</span>
+          <span v-safe-html="getFormattedTimezone(tz)" class="gl-white-space-nowrap"> </span>
         </gl-dropdown-item>
         <gl-dropdown-item v-if="noResults">
           {{ $options.i18n.noResults }}

ee/changelogs/unreleased/324713-schedule-description.yml

+---
+title: Allow oncall schedule timezones to encode special characters correctly
+merge_request: 56792
+author:
+type: fixed

ee/spec/frontend/oncall_schedule/__snapshots__/add_edit_schedule_form_spec.js.snap

@@ -45,9 +45,10 @@ exports[`AddEditScheduleForm renders modal layout 1`] = `
       hideheaderborder="true"
       id="schedule-timezone"
       size="medium"
-      text="(UTC -12:00) -12 International Date Line West"
+      text=""
       variant="default"
     >
+       
       <gl-search-box-by-type-stub
         clearbuttontitle="Clear"
         value=""
@@ -111,7 +112,7 @@ exports[`AddEditScheduleForm renders modal layout 1`] = `
         <span
           class="gl-white-space-nowrap"
         >
-           (UTC -10:00) HST Hawaii
+          (UTC -7:00) PT Pacific Time (US & Canada)
         </span>
       </gl-dropdown-item-stub>
        

ee/spec/frontend/oncall_schedule/add_edit_schedule_form_spec.js

@@ -84,7 +84,7 @@ describe('AddEditScheduleForm', () => {
 
     describe('timezones filtering', () => {
       it('should filter options based on search term', async () => {
-        const searchTerm = 'Hawaii';
+        const searchTerm = 'Pacific';
         findTimezoneSearchBox().vm.$emit('input', searchTerm);
         await wrapper.vm.$nextTick();
         const options = findDropdownOptions();

ee/spec/frontend/oncall_schedule/mocks/mock_timezones.json

@@ -18,9 +18,9 @@
     "formatted_offset": "-11:00"
   },
   {
-    "identifier": "Pacific/Honolulu",
-    "name": "Hawaii",
-    "abbr": "HST",
-    "formatted_offset": "-10:00"
+    "identifier": "Pacific/US/Canada",
+    "name": "Pacific Time (US & Canada)",
+    "abbr": "PT",
+    "formatted_offset": "-7:00"
   }
 ]