diff --git a/app/assets/javascripts/pages/profiles/init_timezone_dropdown.js b/app/assets/javascripts/pages/profiles/init_timezone_dropdown.js index 9390be9873c..80b911493a8 100644 --- a/app/assets/javascripts/pages/profiles/init_timezone_dropdown.js +++ b/app/assets/javascripts/pages/profiles/init_timezone_dropdown.js @@ -1,6 +1,5 @@ import Vue from 'vue'; import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown/timezone_dropdown.vue'; -import { formatTimezone } from '~/lib/utils/datetime_utility'; export const initTimezoneDropdown = () => { const el = document.querySelector('.js-timezone-dropdown'); @@ -11,15 +10,12 @@ export const initTimezoneDropdown = () => { const { timezoneData, initialValue } = el.dataset; const timezones = JSON.parse(timezoneData); - const initialTimezone = initialValue - ? formatTimezone(timezones.find((timezone) => timezone.identifier === initialValue)) - : undefined; const timezoneDropdown = new Vue({ el, data() { return { - value: initialTimezone, + value: initialValue, }; }, render(h) { diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js index 6dd21380bec..0edce2db0a3 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js @@ -1,3 +1,8 @@ +import initPipelineSchedulesFormApp from '~/pipeline_schedules/mount_pipeline_schedules_form_app'; import initForm from '../shared/init_form'; -initForm(); +if (gon.features?.pipelineSchedulesVue) { + initPipelineSchedulesFormApp('#pipeline-schedules-form-edit'); +} else { + initForm(); +} diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js index 9513f42d9c9..7d0930f6424 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js @@ -1,9 +1,10 @@ import Vue from 'vue'; import { BV_SHOW_MODAL } from '~/lib/utils/constants'; +import initPipelineSchedulesApp from '~/pipeline_schedules/mount_pipeline_schedules_app'; import PipelineSchedulesTakeOwnershipModal from '~/pipeline_schedules/components/take_ownership_modal.vue'; import PipelineSchedulesCallout from '../shared/components/pipeline_schedules_callout.vue'; -function initPipelineSchedules() { +function initPipelineSchedulesCallout() { const el = document.getElementById('pipeline-schedules-callout'); if (!el) { @@ -15,6 +16,7 @@ function initPipelineSchedules() { // eslint-disable-next-line no-new new Vue({ el, + name: 'PipelineSchedulesCalloutRoot', provide: { docsUrl, illustrationUrl, @@ -25,6 +27,8 @@ function initPipelineSchedules() { }); } +// TODO: move take ownership feature into new Vue app +// located in directory app/assets/javascripts/pipeline_schedules/components function initTakeownershipModal() { const modalId = 'pipeline-take-ownership-modal'; const buttonSelector = 'js-take-ownership-button'; @@ -63,5 +67,10 @@ function initTakeownershipModal() { }); } -initPipelineSchedules(); -initTakeownershipModal(); +initPipelineSchedulesCallout(); + +if (gon.features?.pipelineSchedulesVue) { + initPipelineSchedulesApp(); +} else { + initTakeownershipModal(); +} diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js index 6dd21380bec..06084fa729b 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js @@ -1,3 +1,8 @@ +import initPipelineSchedulesFormApp from '~/pipeline_schedules/mount_pipeline_schedules_form_app'; import initForm from '../shared/init_form'; -initForm(); +if (gon.features?.pipelineSchedulesVue) { + initPipelineSchedulesFormApp('#pipeline-schedules-form-new'); +} else { + initForm(); +} diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules.vue b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules.vue new file mode 100644 index 00000000000..86460e62183 --- /dev/null +++ b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules.vue @@ -0,0 +1,20 @@ + + + diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_form.vue b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_form.vue new file mode 100644 index 00000000000..6e24ac6b8d4 --- /dev/null +++ b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_form.vue @@ -0,0 +1,18 @@ + + + diff --git a/app/assets/javascripts/pipeline_schedules/components/table/pipeline_schedules_table.vue b/app/assets/javascripts/pipeline_schedules/components/table/pipeline_schedules_table.vue new file mode 100644 index 00000000000..613da200105 --- /dev/null +++ b/app/assets/javascripts/pipeline_schedules/components/table/pipeline_schedules_table.vue @@ -0,0 +1,13 @@ + + + diff --git a/app/assets/javascripts/pipeline_schedules/mount_pipeline_schedules_app.js b/app/assets/javascripts/pipeline_schedules/mount_pipeline_schedules_app.js new file mode 100644 index 00000000000..8f77e06c19a --- /dev/null +++ b/app/assets/javascripts/pipeline_schedules/mount_pipeline_schedules_app.js @@ -0,0 +1,32 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import PipelineSchedules from './components/pipeline_schedules.vue'; + +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + +export default () => { + const containerEl = document.querySelector('#pipeline-schedules-app'); + + if (!containerEl) { + return false; + } + + const { fullPath } = containerEl.dataset; + + return new Vue({ + el: containerEl, + name: 'PipelineSchedulesRoot', + apolloProvider, + provide: { + fullPath, + }, + render(createElement) { + return createElement(PipelineSchedules); + }, + }); +}; diff --git a/app/assets/javascripts/pipeline_schedules/mount_pipeline_schedules_form_app.js b/app/assets/javascripts/pipeline_schedules/mount_pipeline_schedules_form_app.js new file mode 100644 index 00000000000..d83417ab84a --- /dev/null +++ b/app/assets/javascripts/pipeline_schedules/mount_pipeline_schedules_form_app.js @@ -0,0 +1,32 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import PipelineSchedulesForm from './components/pipeline_schedules_form.vue'; + +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + +export default (selector) => { + const containerEl = document.querySelector(selector); + + if (!containerEl) { + return false; + } + + const { fullPath } = containerEl.dataset; + + return new Vue({ + el: containerEl, + name: 'PipelineSchedulesFormRoot', + apolloProvider, + provide: { + fullPath, + }, + render(createElement) { + return createElement(PipelineSchedulesForm); + }, + }); +}; diff --git a/app/assets/javascripts/vue_shared/components/timezone_dropdown/timezone_dropdown.vue b/app/assets/javascripts/vue_shared/components/timezone_dropdown/timezone_dropdown.vue index 051beeff4cd..423501265d7 100644 --- a/app/assets/javascripts/vue_shared/components/timezone_dropdown/timezone_dropdown.vue +++ b/app/assets/javascripts/vue_shared/components/timezone_dropdown/timezone_dropdown.vue @@ -34,7 +34,7 @@ export default { data() { return { searchTerm: '', - tzValue: this.value, + tzValue: this.initialTimezone(this.timezoneData, this.value), }; }, translations: { @@ -71,12 +71,31 @@ export default { isSelected(timezone) { return this.tzValue === timezone.formattedTimezone; }, + initialTimezone(timezones, value) { + if (!value) { + return undefined; + } + + const initialTimezone = timezones.find((timezone) => timezone.identifier === value); + + if (initialTimezone) { + return formatTimezone(initialTimezone); + } + + return undefined; + }, }, };