diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-10 21:10:05 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-10 21:10:05 +0300 |
commit | d715acda3b27b7ca9eacbd058d7cb9629638c52d (patch) | |
tree | a6a6a51f69950ca6fa19d55d22a574e571bc8cf5 /app/assets/javascripts/pipeline_editor | |
parent | be1b7b709e957f83b076d05c9672ab2ab5ff1940 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
5 files changed, 49 insertions, 75 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 22c1563350d..a8ad56ab6a5 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,20 +1,22 @@ <script> import { GlCard, GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; -import PipelineVisualReference from '../ui/pipeline_visual_reference.vue'; export default { i18n: { title: s__('PipelineEditorTutorial|🚀 Run your first pipeline'), firstParagraph: s__( - 'PipelineEditorTutorial|A typical GitLab pipeline consists of three stages: build, test and deploy. Each stage can have one or more jobs.', - ), - secondParagraph: s__( - 'PipelineEditorTutorial|In the example below, %{codeStart}build%{codeEnd} and %{codeStart}deploy%{codeEnd} each contain one job, and %{codeStart}test%{codeEnd} contains two jobs. Your scripts run in jobs like these.', - ), - thirdParagraph: s__( - 'PipelineEditorTutorial|You can use %{linkStart}CI/CD examples and templates%{linkEnd} to get your first %{codeStart}.gitlab-ci.yml%{codeEnd} configuration file started. Your first pipeline runs when you commit the changes.', + 'PipelineEditorTutorial|This template creates a simple test pipeline. To use it:', ), + listItems: [ + s__( + 'PipelineEditorTutorial|Commit the file to your repository. The pipeline then runs automatically.', + ), + s__('PipelineEditorTutorial|The pipeline status is at the top of the page.'), + s__( + 'PipelineEditorTutorial|Select the pipeline ID to view the full details about your first pipeline run.', + ), + ], note: s__( 'PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}', ), @@ -23,9 +25,8 @@ export default { GlCard, GlLink, GlSprintf, - PipelineVisualReference, }, - inject: ['ciExamplesHelpPagePath', 'runnerHelpPagePath'], + inject: ['runnerHelpPagePath'], }; </script> <template> @@ -33,26 +34,9 @@ export default { <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-3"> - <gl-sprintf :message="$options.i18n.secondParagraph"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> - <pipeline-visual-reference /> - <p class="gl-my-3"> - <gl-sprintf :message="$options.i18n.thirdParagraph"> - <template #link="{ content }"> - <gl-link :href="ciExamplesHelpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </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 }"> diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue b/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue deleted file mode 100644 index 1017237365b..00000000000 --- a/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue +++ /dev/null @@ -1,43 +0,0 @@ -<script> -import { s__ } from '~/locale'; -import DemoJobPill from './demo_job_pill.vue'; - -export default { - i18n: { - stageNames: { - build: s__('StageName|Build'), - test: s__('StageName|Test'), - deploy: s__('StageName|Deploy'), - }, - jobNames: { - build: s__('JobName|build-job'), - test_1: s__('JobName|unit-test'), - test_2: s__('JobName|lint-test'), - deploy: s__('JobName|deploy-app'), - }, - }, - stageClasses: - 'gl-bg-blue-50 gl-display-flex gl-flex-direction-column gl-align-items-center gl-p-4 gl-rounded-base', - titleClasses: 'gl-text-blue-600 gl-mb-4', - components: { - DemoJobPill, - }, -}; -</script> -<template> - <div class="gl-display-flex gl-justify-content-center"> - <div :class="$options.stageClasses" class="gl-mr-5"> - <div :class="$options.titleClasses">{{ $options.i18n.stageNames.build }}</div> - <demo-job-pill :job-name="$options.i18n.jobNames.build" /> - </div> - <div :class="$options.stageClasses" class="gl-mr-5"> - <div :class="$options.titleClasses">{{ $options.i18n.stageNames.test }}</div> - <demo-job-pill class="gl-mb-3" :job-name="$options.i18n.jobNames.test_1" /> - <demo-job-pill :job-name="$options.i18n.jobNames.test_2" /> - </div> - <div :class="$options.stageClasses"> - <div :class="$options.titleClasses">{{ $options.i18n.stageNames.deploy }}</div> - <demo-job-pill :job-name="$options.i18n.jobNames.deploy" /> - </div> - </div> -</template> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index f0a24e0c061..1467abd7289 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -31,3 +31,5 @@ export const DRAWER_EXPANDED_KEY = 'pipeline_editor_drawer_expanded'; export const BRANCH_PAGINATION_LIMIT = 20; export const BRANCH_SEARCH_DEBOUNCE = '500'; + +export const STARTER_TEMPLATE_NAME = 'Getting-Started'; diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/get_starter_template.query.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/get_starter_template.query.graphql new file mode 100644 index 00000000000..88825718f7b --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/graphql/queries/get_starter_template.query.graphql @@ -0,0 +1,7 @@ +query getTemplate($projectPath: ID!, $templateName: String!) { + project(fullPath: $projectPath) { + ciTemplate(name: $templateName) { + content + } + } +} diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index 1ec4ee522d6..d900cfcdf2b 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -14,12 +14,14 @@ import { EDITOR_APP_STATUS_ERROR, EDITOR_APP_STATUS_LOADING, LOAD_FAILURE_UNKNOWN, + STARTER_TEMPLATE_NAME, } from './constants'; import getBlobContent from './graphql/queries/blob_content.graphql'; import getCiConfigData from './graphql/queries/ci_config.graphql'; import getAppStatus from './graphql/queries/client/app_status.graphql'; import getCurrentBranch from './graphql/queries/client/current_branch.graphql'; import getIsNewCiConfigFile from './graphql/queries/client/is_new_ci_config_file.graphql'; +import getTemplate from './graphql/queries/get_starter_template.query.graphql'; import PipelineEditorHome from './pipeline_editor_home.vue'; export default { @@ -51,12 +53,13 @@ export default { showStartScreen: false, showSuccess: false, showFailure: false, + starterTemplate: '', }; }, apollo: { initialCiFileContent: { - fetchPolicy: fetchPolicies.NETWORK, + fetchPolicy: fetchPolicies.NETWORK_ONLY, query: getBlobContent, // If it's a brand new file, we don't want to fetch the content. // Then when the user commits the first time, the query would run @@ -135,6 +138,24 @@ export default { isNewCiConfigFile: { query: getIsNewCiConfigFile, }, + starterTemplate: { + query: getTemplate, + variables() { + return { + projectPath: this.projectFullPath, + templateName: STARTER_TEMPLATE_NAME, + }; + }, + skip({ isNewCiConfigFile }) { + return !isNewCiConfigFile; + }, + update(data) { + return data.project?.ciTemplate?.content || ''; + }, + error() { + this.reportFailure(LOAD_FAILURE_UNKNOWN); + }, + }, }, computed: { hasUnsavedChanges() { @@ -149,6 +170,9 @@ export default { isEmpty() { return this.currentCiFileContent === ''; }, + templateOrCurrentContent() { + return this.isNewCiConfigFile ? this.starterTemplate : this.currentCiFileContent; + }, }, i18n: { tabEdit: s__('Pipelines|Edit'), @@ -256,7 +280,7 @@ export default { /> <pipeline-editor-home :ci-config-data="ciConfigData" - :ci-file-content="currentCiFileContent" + :ci-file-content="templateOrCurrentContent" :is-new-ci-config-file="isNewCiConfigFile" @commit="updateOnCommit" @resetContent="resetContent" |