diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
11 files changed, 152 insertions, 172 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue index a8ad56ab6a5..897bd2dcccf 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue @@ -1,5 +1,5 @@ <script> -import { GlCard, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; export default { @@ -22,7 +22,6 @@ export default { ), }, components: { - GlCard, GlLink, GlSprintf, }, @@ -30,22 +29,20 @@ export default { }; </script> <template> - <gl-card> - <template #default> - <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4> - <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p> - <ol class="gl-mb-3"> - <li v-for="(item, i) in $options.i18n.listItems" :key="`li-${i}`">{{ item }}</li> - </ol> - <p class="gl-mb-0"> - <gl-sprintf :message="$options.i18n.note"> - <template #link="{ content }"> - <gl-link :href="runnerHelpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </p> - </template> - </gl-card> + <div> + <h3 class="gl-font-lg gl-mt-0 gl-mb-5">{{ $options.i18n.title }}</h3> + <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p> + <ol class="gl-mb-3"> + <li v-for="(item, i) in $options.i18n.listItems" :key="`li-${i}`">{{ item }}</li> + </ol> + <p class="gl-mb-0"> + <gl-sprintf :message="$options.i18n.note"> + <template #link="{ content }"> + <gl-link :href="runnerHelpPagePath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </p> + </div> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue index 3da535f5f94..d2682cf6326 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue @@ -1,5 +1,5 @@ <script> -import { GlCard, GlSprintf } from '@gitlab/ui'; +import { GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; export default { @@ -13,23 +13,20 @@ export default { ), }, components: { - GlCard, GlSprintf, }, }; </script> <template> - <gl-card> - <template #default> - <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4> - <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p> - <p class="gl-mb-0"> - <gl-sprintf :message="$options.i18n.secondParagraph"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> - </template> - </gl-card> + <div> + <h3 class="gl-font-lg gl-mt-0 gl-mb-5">{{ $options.i18n.title }}</h3> + <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p> + <p class="gl-mb-0"> + <gl-sprintf :message="$options.i18n.secondParagraph"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + </gl-sprintf> + </p> + </div> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue index f714f6411f1..04140434af2 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue @@ -1,5 +1,5 @@ <script> -import { GlCard, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; export default { @@ -20,7 +20,6 @@ export default { ), }, components: { - GlCard, GlLink, GlSprintf, }, @@ -28,48 +27,46 @@ export default { }; </script> <template> - <gl-card> - <template #default> - <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4> - <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p> - <ul> - <li> - <gl-sprintf :message="$options.i18n.browseExamples"> - <template #link="{ content }"> - <gl-link :href="ciExamplesHelpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </li> - <li> - <gl-sprintf :message="$options.i18n.viewSyntaxRef"> - <template #link="{ content }"> - <gl-link :href="ymlHelpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </li> - <li> - <gl-sprintf :message="$options.i18n.learnMore"> - <template #link="{ content }"> - <gl-link :href="ciHelpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </li> - <li> - <gl-sprintf :message="$options.i18n.needs"> - <template #link="{ content }"> - <gl-link :href="needsHelpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </li> - </ul> - </template> - </gl-card> + <div> + <h3 class="gl-font-lg gl-mt-0 gl-mb-5">{{ $options.i18n.title }}</h3> + <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p> + <ul> + <li> + <gl-sprintf :message="$options.i18n.browseExamples"> + <template #link="{ content }"> + <gl-link :href="ciExamplesHelpPagePath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </li> + <li> + <gl-sprintf :message="$options.i18n.viewSyntaxRef"> + <template #link="{ content }"> + <gl-link :href="ymlHelpPagePath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </li> + <li> + <gl-sprintf :message="$options.i18n.learnMore"> + <template #link="{ content }"> + <gl-link :href="ciHelpPagePath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </li> + <li> + <gl-sprintf :message="$options.i18n.needs"> + <template #link="{ content }"> + <gl-link :href="needsHelpPagePath" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </li> + </ul> + </div> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue index 512414f0246..aeeb52319d2 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue @@ -1,5 +1,4 @@ <script> -import { GlCard } from '@gitlab/ui'; import { s__ } from '~/locale'; export default { @@ -9,16 +8,11 @@ export default { 'PipelineEditorTutorial|Use the Visualize and Lint tabs in the Pipeline Editor to visualize your pipeline and check for any errors or warnings before committing your changes.', ), }, - components: { - GlCard, - }, }; </script> <template> - <gl-card> - <template #default> - <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4> - <p class="gl-mb-0">{{ $options.i18n.firstParagraph }}</p> - </template> - </gl-card> + <div> + <h3 class="gl-font-lg gl-mt-0 gl-mb-5">{{ $options.i18n.title }}</h3> + <p class="gl-mb-0">{{ $options.i18n.firstParagraph }}</p> + </div> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue index 9cb070a5517..375db7f3054 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue @@ -1,101 +1,61 @@ <script> -import { GlButton, GlIcon } from '@gitlab/ui'; +import { GlDrawer } from '@gitlab/ui'; import { __ } from '~/locale'; -import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; -import { DRAWER_EXPANDED_KEY } from '../../constants'; import FirstPipelineCard from './cards/first_pipeline_card.vue'; import GettingStartedCard from './cards/getting_started_card.vue'; import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue'; import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue'; +const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-line-height-20']; + export default { - width: { - expanded: '482px', - collapsed: '58px', - }, + DRAWER_CARD_STYLES, i18n: { - toggleTxt: __('Collapse'), + title: __('Help'), }, - localDrawerKey: DRAWER_EXPANDED_KEY, components: { FirstPipelineCard, GettingStartedCard, - GlButton, - GlIcon, - LocalStorageSync, + GlDrawer, PipelineConfigReferenceCard, VisualizeAndLintCard, }, - data() { - return { - isExpanded: false, - topPosition: 0, - }; + props: { + isVisible: { + type: Boolean, + required: false, + default: false, + }, }, computed: { - buttonIconName() { - return this.isExpanded ? 'chevron-double-lg-right' : 'chevron-double-lg-left'; - }, - buttonClass() { - return this.isExpanded ? 'gl-justify-content-end!' : ''; + drawerCardStyles() { + return ''; }, - rootStyle() { - const { expanded, collapsed } = this.$options.width; - const top = this.topPosition; - const style = { top: `${top}px` }; - - return this.isExpanded ? { ...style, width: expanded } : { ...style, width: collapsed }; + drawerHeightOffset() { + const wrapperEl = document.querySelector('.content-wrapper'); + return wrapperEl ? `${wrapperEl.offsetTop}px` : ''; }, }, - mounted() { - this.setTopPosition(); - }, methods: { - setTopPosition() { - const navbarEl = document.querySelector('.js-navbar'); - - if (navbarEl) { - this.topPosition = navbarEl.getBoundingClientRect().bottom; - } - }, - toggleDrawer() { - this.isExpanded = !this.isExpanded; + closeDrawer() { + this.$emit('close-drawer'); }, }, }; </script> <template> - <local-storage-sync v-model="isExpanded" :storage-key="$options.localDrawerKey" as-json> - <aside - aria-live="polite" - class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-property-width gl-transition-duration-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-200 gl-overflow-y-auto" - :style="rootStyle" - > - <gl-button - category="tertiary" - class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex" - :class="buttonClass" - :title="__('Toggle sidebar')" - data-qa-selector="toggle_sidebar_collapse_button" - @click="toggleDrawer" - > - <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text"> - {{ __('Collapse') }} - </span> - <gl-icon data-testid="toggle-icon" :name="buttonIconName" /> - </gl-button> - <div - v-if="isExpanded" - class="gl-h-full gl-p-5" - data-testid="drawer-content" - data-qa-selector="drawer_content" - > - <getting-started-card class="gl-mb-4" /> - <first-pipeline-card class="gl-mb-4" /> - <visualize-and-lint-card class="gl-mb-4" /> - <pipeline-config-reference-card /> - <div class="gl-h-13"></div> - </div> - </aside> - </local-storage-sync> + <gl-drawer + :header-height="drawerHeightOffset" + :open="isVisible" + :z-index="200" + @close="closeDrawer" + > + <template #title> + <h2 class="gl-m-0 gl-font-lg">{{ $options.i18n.title }}</h2> + </template> + <getting-started-card :class="$options.DRAWER_CARD_STYLES" /> + <first-pipeline-card :class="$options.DRAWER_CARD_STYLES" /> + <visualize-and-lint-card :class="$options.DRAWER_CARD_STYLES" /> + <pipeline-config-reference-card :class="$options.DRAWER_CARD_STYLES" /> + </gl-drawer> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue b/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue index b4e9ab81d38..9765d669fc1 100644 --- a/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue +++ b/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue @@ -7,13 +7,23 @@ import { pipelineEditorTrackingOptions, TEMPLATE_REPOSITORY_URL } from '../../co export default { i18n: { browseTemplates: __('Browse templates'), + help: __('Help'), }, TEMPLATE_REPOSITORY_URL, components: { GlButton, }, mixins: [Tracking.mixin()], + props: { + showDrawer: { + type: Boolean, + required: true, + }, + }, methods: { + toggleDrawer() { + this.$emit(this.showDrawer ? 'close-drawer' : 'open-drawer'); + }, trackTemplateBrowsing() { const { label, actions } = pipelineEditorTrackingOptions; @@ -30,9 +40,20 @@ export default { size="small" icon="external-link" target="_blank" + data-testid="template-repo-link" + data-qa-selector="template_repo_link" @click="trackTemplateBrowsing" > {{ $options.i18n.browseTemplates }} </gl-button> + <gl-button + icon="information-o" + size="small" + data-testid="drawer-toggle" + data-qa-selector="drawer_toggle" + @click="toggleDrawer" + > + {{ $options.i18n.help }} + </gl-button> </div> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue index 5cff93c884f..d50e6f9a623 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -86,6 +86,10 @@ export default { type: Boolean, required: true, }, + showDrawer: { + type: Boolean, + required: true, + }, }, apollo: { appStatus: { @@ -157,7 +161,7 @@ export default { @click="setCurrentTab($options.tabConstants.CREATE_TAB)" > <walkthrough-popover v-if="isNewCiConfigFile" v-on="$listeners" /> - <ci-editor-header /> + <ci-editor-header :show-drawer="showDrawer" v-on="$listeners" /> <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" /> </editor-tab> <editor-tab diff --git a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue index aee71999373..3e87088e77e 100644 --- a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue +++ b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue @@ -14,7 +14,7 @@ export default { body: __( 'Create a new %{codeStart}.gitlab-ci.yml%{codeEnd} file at the root of the repository to get started.', ), - btnText: __('Create new CI/CD pipeline'), + btnText: __('Configure pipeline'), }, inject: { emptyStateIllustrationPath: { diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index 2ebc4306405..9b4732b26d2 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -45,8 +45,6 @@ export const TAB_QUERY_PARAM = 'tab'; export const COMMIT_ACTION_CREATE = 'CREATE'; export const COMMIT_ACTION_UPDATE = 'UPDATE'; -export const DRAWER_EXPANDED_KEY = 'pipeline_editor_drawer_expanded'; - export const BRANCH_PAGINATION_LIMIT = 20; export const BRANCH_SEARCH_DEBOUNCE = '500'; export const SOURCE_EDITOR_DEBOUNCE = 500; @@ -102,7 +100,5 @@ export const I18N = { subtitle: s__( "Pipelines|Use a template based on your project's language or framework to get started with GitLab CI/CD.", ), - description: s__('Pipelines|CI/CD template to test and deploy your %{name} project.'), - cta: s__('Pipelines|Use template'), }, }; diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index a5436ca63cb..4e6a4ffa6d2 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -388,7 +388,7 @@ export default { @createEmptyConfigFile="setNewEmptyCiConfigFile" @refetchContent="refetchContent" /> - <div v-else class="gl-pr-10"> + <div v-else> <pipeline-editor-messages :failure-type="failureType" :failure-reasons="failureReasons" diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index 631dd8a2c00..23e3ce10d5a 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -60,6 +60,7 @@ export default { currentTab: CREATE_TAB, scrollToCommitForm: false, shouldLoadNewBranch: false, + showDrawer: false, showSwitchBranchModal: false, }; }, @@ -72,9 +73,15 @@ export default { closeBranchModal() { this.showSwitchBranchModal = false; }, + closeDrawer() { + this.showDrawer = false; + }, handleConfirmSwitchBranch() { this.showSwitchBranchModal = true; }, + openDrawer() { + this.showDrawer = true; + }, switchBranch() { this.showSwitchBranchModal = false; this.shouldLoadNewBranch = true; @@ -122,7 +129,10 @@ export default { :ci-file-content="ciFileContent" :commit-sha="commitSha" :is-new-ci-config-file="isNewCiConfigFile" + :show-drawer="showDrawer" v-on="$listeners" + @open-drawer="openDrawer" + @close-drawer="closeDrawer" @set-current-tab="setCurrentTab" @walkthrough-popover-cta-clicked="setScrollToCommitForm" /> @@ -137,6 +147,10 @@ export default { @scrolled-to-commit-form="setScrollToCommitForm(false)" v-on="$listeners" /> - <pipeline-editor-drawer /> + <pipeline-editor-drawer + :is-visible="showDrawer" + v-on="$listeners" + @close-drawer="closeDrawer" + /> </div> </template> |