diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor')
3 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue index b78224e93b0..66957365261 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue @@ -10,6 +10,7 @@ export default { browseTemplates: __('Browse templates'), help: __('Help'), jobAssistant: s__('JobAssistant|Job assistant'), + aiAssistant: s__('PipelinesAiAssistant|Ai assistant'), }, TEMPLATE_REPOSITORY_URL, components: { @@ -25,6 +26,10 @@ export default { type: Boolean, required: true, }, + showAiAssistantDrawer: { + type: Boolean, + required: true, + }, }, methods: { toggleDrawer() { @@ -40,6 +45,11 @@ export default { this.showJobAssistantDrawer ? 'close-job-assistant-drawer' : 'open-job-assistant-drawer', ); }, + toggleAiAssistantDrawer() { + this.$emit( + this.showAiAssistantDrawer ? 'close-ai-assistant-drawer' : 'open-ai-assistant-drawer', + ); + }, trackHelpDrawerClick() { const { label, actions } = pipelineEditorTrackingOptions; this.track(actions.openHelpDrawer, { label }); @@ -85,5 +95,15 @@ export default { > {{ $options.i18n.jobAssistant }} </gl-button> + <gl-button + v-if="glFeatures.aiCiConfigGenerator" + icon="bulb" + size="small" + data-testid="ai-assistant-drawer-toggle" + data-qa-selector="ai_assistant_drawer_toggle" + @click="toggleAiAssistantDrawer" + > + {{ $options.i18n.aiAssistant }} + </gl-button> </div> </template> diff --git a/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue index e965ac12aa5..403793a255a 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue @@ -99,6 +99,10 @@ export default { type: Boolean, required: true, }, + showAiAssistantDrawer: { + type: Boolean, + required: true, + }, }, apollo: { appStatus: { @@ -194,6 +198,7 @@ export default { <ci-editor-header :show-drawer="showDrawer" :show-job-assistant-drawer="showJobAssistantDrawer" + :show-ai-assistant-drawer="showAiAssistantDrawer" v-on="$listeners" /> <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" /> diff --git a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue index 1329042ee4c..647e33333ce 100644 --- a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue @@ -1,6 +1,7 @@ <script> import { GlModal } from '@gitlab/ui'; import { __ } from '~/locale'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import CommitSection from './components/commit/commit_section.vue'; import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue'; import JobAssistantDrawer from './components/job_assistant_drawer/job_assistant_drawer.vue'; @@ -10,6 +11,9 @@ import PipelineEditorHeader from './components/header/pipeline_editor_header.vue import PipelineEditorTabs from './components/pipeline_editor_tabs.vue'; import { CREATE_TAB, FILE_TREE_DISPLAY_KEY } from './constants'; +const AiAssistantDrawer = () => + import('ee_component/ci/pipeline_editor/components/ai_assistant_drawer.vue'); + export default { commitSectionRef: 'commitSectionRef', modal: { @@ -30,11 +34,13 @@ export default { GlModal, PipelineEditorDrawer, JobAssistantDrawer, + AiAssistantDrawer, PipelineEditorFileNav, PipelineEditorFileTree, PipelineEditorHeader, PipelineEditorTabs, }, + mixins: [glFeatureFlagMixin()], props: { ciConfigData: { type: Object, @@ -66,8 +72,10 @@ export default { shouldLoadNewBranch: false, showDrawer: false, showJobAssistantDrawer: false, + showAiAssistantDrawer: false, drawerIndex: 200, jobAssistantIndex: 200, + aiAssistantIndex: 200, showFileTree: false, showSwitchBranchModal: false, }; @@ -93,6 +101,13 @@ export default { closeJobAssistantDrawer() { this.showJobAssistantDrawer = false; }, + closeAiAssistantDrawer() { + this.showAiAssistantDrawer = false; + }, + openAiAssistantDrawer() { + this.showAiAssistantDrawer = true; + this.aiAssistantIndex = this.drawerIndex + 1; + }, handleConfirmSwitchBranch() { this.showSwitchBranchModal = true; }, @@ -167,11 +182,14 @@ export default { :is-new-ci-config-file="isNewCiConfigFile" :show-drawer="showDrawer" :show-job-assistant-drawer="showJobAssistantDrawer" + :show-ai-assistant-drawer="showAiAssistantDrawer" v-on="$listeners" @open-drawer="openDrawer" @close-drawer="closeDrawer" @open-job-assistant-drawer="openJobAssistantDrawer" @close-job-assistant-drawer="closeJobAssistantDrawer" + @open-ai-assistant-drawer="openAiAssistantDrawer" + @close-ai-assistant-drawer="closeAiAssistantDrawer" @set-current-tab="setCurrentTab" @walkthrough-popover-cta-clicked="setScrollToCommitForm" /> @@ -202,5 +220,11 @@ export default { v-on="$listeners" @close-job-assistant-drawer="closeJobAssistantDrawer" /> + <ai-assistant-drawer + v-if="glFeatures.aiCiConfigGenerator" + :is-visible="showAiAssistantDrawer" + :z-index="aiAssistantIndex" + @close-ai-assistant-drawer="closeAiAssistantDrawer" + /> </div> </template> |