diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-23 06:08:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-23 06:08:49 +0300 |
commit | 98ce6418920b510e0e819e686e83a22bf6d5cd20 (patch) | |
tree | d950bf3a1c236e92e9cd335111d1b8b7756203e0 /app/assets/javascripts/pipeline_editor | |
parent | 0a8d7059a2db069c1193009c56ff3af1aa0791b5 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
7 files changed, 143 insertions, 3 deletions
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 08d246a9a00..4ebfec7a715 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -1,6 +1,6 @@ <script> import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { s__, __ } from '~/locale'; import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility'; @@ -16,6 +16,7 @@ import { TAB_QUERY_PARAM, TABS_INDEX, VALIDATE_TAB, + VALIDATE_TAB_BADGE_DISMISSED_KEY, VISUALIZE_TAB, } from '../constants'; import getAppStatus from '../graphql/queries/client/app_status.query.graphql'; @@ -29,6 +30,7 @@ import WalkthroughPopover from './popovers/walkthrough_popover.vue'; export default { i18n: { + new: __('NEW'), tabEdit: s__('Pipelines|Edit'), tabGraph: s__('Pipelines|Visualize'), tabLint: s__('Pipelines|Lint'), @@ -87,6 +89,10 @@ export default { required: false, default: '', }, + currentTab: { + type: String, + required: true, + }, isNewCiConfigFile: { type: Boolean, required: true, @@ -104,6 +110,11 @@ export default { }, }, }, + data() { + return { + showValidateNewBadge: false, + }; + }, computed: { isMergedYamlAvailable() { return this.ciConfigData?.mergedYaml; @@ -123,6 +134,16 @@ export default { isLoading() { return this.appStatus === EDITOR_APP_STATUS_LOADING; }, + validateTabBadgeTitle() { + if (this.showValidateNewBadge) { + return this.$options.i18n.new; + } + + return ''; + }, + }, + mounted() { + this.showValidateNewBadge = !JSON.parse(localStorage.getItem(VALIDATE_TAB_BADGE_DISMISSED_KEY)); }, created() { const [tabQueryParam] = getParameterValues(TAB_QUERY_PARAM); @@ -134,6 +155,11 @@ export default { }, methods: { setCurrentTab(tabName) { + if (this.currentTab === VALIDATE_TAB) { + localStorage.setItem(VALIDATE_TAB_BADGE_DISMISSED_KEY, 'true'); + this.showValidateNewBadge = false; + } + this.$emit('set-current-tab', tabName); }, setDefaultTab(tabName) { @@ -189,6 +215,7 @@ export default { v-if="glFeatures.simulatePipeline" class="gl-mb-3" data-testid="validate-tab" + :badge-title="validateTabBadgeTitle" :title="$options.i18n.tabValidate" @click="setCurrentTab($options.tabConstants.VALIDATE_TAB)" > diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/validate_pipeline_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/validate_pipeline_popover.vue new file mode 100644 index 00000000000..4730a521227 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/popovers/validate_pipeline_popover.vue @@ -0,0 +1,72 @@ +<script> +import { GlLink, GlPopover, GlOutsideDirective as Outside, GlSprintf } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +import { VALIDATE_TAB_FEEDBACK_URL } from '../../constants'; + +export const i18n = { + feedbackLink: __('Provide Feedback'), + popoverContent: s__( + 'PipelineEditor|Pipeline behavior will be simulated including the %{codeStart}rules%{codeEnd} %{codeStart}only%{codeEnd} %{codeStart}except%{codeEnd} and %{codeStart}needs%{codeEnd} job dependencies. %{linkStart}Learn more%{linkEnd}', + ), + title: s__('PipelineEditor|Validate pipeline under simulated conditions'), +}; + +export default { + name: 'ValidatePipelinePopover', + directives: { Outside }, + components: { + GlLink, + GlPopover, + GlSprintf, + }, + inject: ['simulatePipelineHelpPagePath'], + data() { + return { + showPopover: false, + }; + }, + methods: { + dismiss() { + this.showPopover = false; + }, + }, + i18n, + VALIDATE_TAB_FEEDBACK_URL, +}; +</script> + +<template> + <gl-popover + :show.sync="showPopover" + target="validate-pipeline-help" + triggers="hover focus" + placement="top" + > + <p class="gl-my-3 gl-font-weight-bold">{{ $options.i18n.title }}</p> + <p> + <gl-sprintf :message="$options.i18n.popoverContent"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + <template #link="{ content }"> + <gl-link + class="gl-font-sm" + target="_blank" + :href="simulatePipelineHelpPagePath" + data-testid="help-link" + >{{ content }}</gl-link + > + </template> + </gl-sprintf> + </p> + <p class="gl-text-right gl-mb-3"> + <gl-link + class="gl-font-sm" + target="_blank" + :href="$options.VALIDATE_TAB_FEEDBACK_URL" + data-testid="feedback-link" + >{{ $options.i18n.feedbackLink }}</gl-link + > + </p> + </gl-popover> +</template> diff --git a/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue index 673599da085..f30017ecbce 100644 --- a/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue +++ b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert, GlTab } from '@gitlab/ui'; +import { GlAlert, GlBadge, GlTab } from '@gitlab/ui'; import { __, s__ } from '~/locale'; /** * Wrapper of <gl-tab> to optionally lazily render this tab's content @@ -48,6 +48,7 @@ export default { }, components: { GlAlert, + GlBadge, GlTab, // Use a small renderless component to know when the tab content mounts because: // - gl-tab always gets mounted, even if lazy is `true`. See: @@ -59,6 +60,16 @@ export default { }, inheritAttrs: false, props: { + badgeTitle: { + type: String, + required: false, + default: '', + }, + badgeVariant: { + type: String, + required: false, + default: 'info', + }, emptyMessage: { type: String, required: false, @@ -91,6 +102,10 @@ export default { required: false, default: false, }, + title: { + type: String, + required: true, + }, }, data() { return { @@ -98,6 +113,9 @@ export default { }; }, computed: { + hasBadgeTitle() { + return this.badgeTitle.length > 0; + }, slots() { return Object.keys(this.$slots); }, @@ -116,6 +134,12 @@ export default { </script> <template> <gl-tab :lazy="isLazy" v-bind="$attrs" v-on="$listeners"> + <template #title> + <span>{{ title }}</span> + <gl-badge v-if="hasBadgeTitle" class="gl-ml-2" size="sm" :variant="badgeVariant">{{ + badgeTitle + }}</gl-badge> + </template> <gl-alert v-if="isEmpty" variant="tip">{{ emptyMessage }}</gl-alert> <gl-alert v-else-if="isUnavailable" variant="danger" :dismissible="false"> {{ $options.i18n.unavailable }}</gl-alert diff --git a/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue b/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue index 5f26318497b..4453796a0e4 100644 --- a/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue +++ b/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue @@ -1,6 +1,7 @@ <script> -import { GlButton, GlDropdown, GlTooltipDirective, GlSprintf } from '@gitlab/ui'; +import { GlButton, GlDropdown, GlIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui'; import { s__, __ } from '~/locale'; +import ValidatePipelinePopover from '../popovers/validate_pipeline_popover.vue'; export const i18n = { help: __('Help'), @@ -22,7 +23,9 @@ export default { components: { GlButton, GlDropdown, + GlIcon, GlSprintf, + ValidatePipelinePopover, }, directives: { GlTooltip: GlTooltipDirective, @@ -43,6 +46,15 @@ export default { disabled data-testid="pipeline-source" /> + <validate-pipeline-popover /> + <gl-icon + id="validate-pipeline-help" + name="question-o" + class="gl-ml-1 gl-fill-blue-500" + category="secondary" + variant="confirm" + :aria-label="$options.i18n.help" + /> </div> <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11"> <img :src="validateTabIllustrationPath" /> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index 8f688e6ba76..05db0afd15d 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -54,6 +54,7 @@ export const SOURCE_EDITOR_DEBOUNCE = 500; export const FILE_TREE_DISPLAY_KEY = 'pipeline_editor_file_tree_display'; export const FILE_TREE_POPOVER_DISMISSED_KEY = 'pipeline_editor_file_tree_popover_dismissed'; export const FILE_TREE_TIP_DISMISSED_KEY = 'pipeline_editor_file_tree_tip_dismissed'; +export const VALIDATE_TAB_BADGE_DISMISSED_KEY = 'pipeline_editor_validate_tab_badge_dismissed'; export const STARTER_TEMPLATE_NAME = 'Getting-Started'; @@ -81,6 +82,7 @@ export const pipelineEditorTrackingOptions = { export const TEMPLATE_REPOSITORY_URL = 'https://gitlab.com/gitlab-org/gitlab-foss/tree/master/lib/gitlab/ci/templates'; +export const VALIDATE_TAB_FEEDBACK_URL = 'https://gitlab.com/gitlab-org/gitlab/-/issues/346687'; export const COMMIT_SHA_POLL_INTERVAL = 1000; diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js index 4caa253b85e..b056b086d57 100644 --- a/app/assets/javascripts/pipeline_editor/index.js +++ b/app/assets/javascripts/pipeline_editor/index.js @@ -40,6 +40,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { projectPath, projectNamespace, runnerHelpPagePath, + simulatePipelineHelpPagePath, totalBranches, validateTabIllustrationPath, ymlHelpPagePath, @@ -130,6 +131,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { projectPath, projectNamespace, runnerHelpPagePath, + simulatePipelineHelpPagePath, totalBranches: parseInt(totalBranches, 10), validateTabIllustrationPath, ymlHelpPagePath, diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index f26cdd8b017..2d5c01a58b7 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -150,6 +150,7 @@ export default { :ci-config-data="ciConfigData" :ci-file-content="ciFileContent" :commit-sha="commitSha" + :current-tab="currentTab" :is-new-ci-config-file="isNewCiConfigFile" :show-drawer="showDrawer" v-on="$listeners" |