diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item.vue b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item.vue new file mode 100644 index 00000000000..a25b3ca09fd --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item.vue @@ -0,0 +1,89 @@ + + diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js index 1c122fd5e38..05a616596e2 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js +++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js @@ -1,7 +1,38 @@ -import { s__ } from '~/locale'; +import { __, s__ } from '~/locale'; export const DRAWER_CONTAINER_CLASS = '.content-wrapper'; +export const JOB_TEMPLATE = { + name: '', + stage: '', + script: '', + tags: [], + image: { + name: '', + entrypoint: '', + }, + services: [ + { + name: '', + entrypoint: '', + }, + ], + artifacts: { + paths: [''], + exclude: [''], + }, + cache: { + paths: [''], + key: '', + }, +}; + export const i18n = { ADD_JOB: s__('JobAssistant|Add job'), + SCRIPT: s__('JobAssistant|Script'), + JOB_NAME: s__('JobAssistant|Job name'), + JOB_SETUP: s__('JobAssistant|Job Setup'), + STAGE: s__('JobAssistant|Stage (optional)'), + TAGS: s__('JobAssistant|Tags (optional)'), + THIS_FIELD_IS_REQUIRED: __('This field is required'), }; diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue index 65c87df21cb..d9df32ad84e 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue @@ -1,13 +1,23 @@ @@ -44,6 +123,15 @@ export default { + + + diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/utils.js b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/utils.js new file mode 100644 index 00000000000..83e7574c4de --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/utils.js @@ -0,0 +1,22 @@ +import { isEmpty, isObject, isArray, isString, reject, omitBy, mapValues, map, trim } from 'lodash'; + +const isEmptyValue = (val) => (isObject(val) || isString(val)) && isEmpty(val); +const trimText = (val) => (isString(val) ? trim(val) : val); + +export const removeEmptyObj = (obj) => { + if (isArray(obj)) { + return reject(map(obj, removeEmptyObj), isEmptyValue); + } else if (isObject(obj)) { + return omitBy(mapValues(obj, removeEmptyObj), isEmptyValue); + } + return obj; +}; + +export const trimFields = (data) => { + if (isArray(data)) { + return data.map(trimFields); + } else if (isObject(data)) { + return mapValues(data, trimFields); + } + return trimText(data); +}; diff --git a/app/assets/javascripts/ci/pipeline_editor/event_hub.js b/app/assets/javascripts/ci/pipeline_editor/event_hub.js new file mode 100644 index 00000000000..c64eaf5ef5c --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_editor/event_hub.js @@ -0,0 +1,5 @@ +import createEventHub from '~/helpers/event_hub_factory'; + +export default createEventHub(); + +export const SCROLL_EDITOR_TO_BOTTOM = Symbol('scrollEditorToBottom'); diff --git a/app/assets/javascripts/ci/pipeline_editor/index.js b/app/assets/javascripts/ci/pipeline_editor/index.js index 6d91c339833..50d1cb42f5c 100644 --- a/app/assets/javascripts/ci/pipeline_editor/index.js +++ b/app/assets/javascripts/ci/pipeline_editor/index.js @@ -12,6 +12,7 @@ import getPipelineEtag from './graphql/queries/client/pipeline_etag.query.graphq import { resolvers } from './graphql/resolvers'; import typeDefs from './graphql/typedefs.graphql'; import PipelineEditorApp from './pipeline_editor_app.vue'; +import createStore from './store'; export const initPipelineEditor = (selector = '#js-pipeline-editor') => { const el = document.querySelector(selector); @@ -111,8 +112,11 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { }, }); + const store = createStore(); + return new Vue({ el, + store, apolloProvider, provide: { ciConfigPath, diff --git a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue index ff848a973e3..7b3c4d6f74f 100644 --- a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue @@ -1,10 +1,12 @@