diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list')
6 files changed, 104 insertions, 14 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue index e9773f055a7..104a3caab4c 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue @@ -2,6 +2,7 @@ import { GlEmptyState, GlButton } from '@gitlab/ui'; import { startCodeQualityWalkthrough, track } from '~/code_quality_walkthrough/utils'; import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue'; +import ExperimentTracking from '~/experimentation/experiment_tracking'; import { getExperimentData } from '~/experimentation/utils'; import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; @@ -13,7 +14,9 @@ export default { description: s__(`Pipelines|GitLab CI/CD can automatically build, test, and deploy your code. Let GitLab take care of time consuming tasks, so you can spend more time creating.`), - btnText: s__('Pipelines|Get started with CI/CD'), + aboutRunnersBtnText: s__('Pipelines|Learn about Runners'), + installRunnersBtnText: s__('Pipelines|Install GitLab Runners'), + getStartedBtnText: s__('Pipelines|Get started with CI/CD'), codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'), codeQualityDescription: s__(`Pipelines|To keep your codebase simple, readable, and accessible to contributors, use GitLab CI/CD @@ -42,6 +45,11 @@ export default { required: false, default: null, }, + ciRunnerSettingsPath: { + type: String, + required: false, + default: null, + }, }, computed: { ciHelpPagePath() { @@ -50,6 +58,12 @@ export default { isPipelineEmptyStateTemplatesExperimentActive() { return this.canSetCi && Boolean(getExperimentData('pipeline_empty_state_templates')); }, + isCodeQualityExperimentActive() { + return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough')); + }, + isCiRunnerTemplatesExperimentActive() { + return this.canSetCi && Boolean(getExperimentData('ci_runner_templates')); + }, }, mounted() { startCodeQualityWalkthrough(); @@ -58,6 +72,10 @@ export default { trackClick() { track('cta_clicked'); }, + trackCiRunnerTemplatesClick(action) { + const tracking = new ExperimentTracking('ci_runner_templates'); + tracking.event(action); + }, }, }; </script> @@ -72,7 +90,7 @@ export default { :title="$options.i18n.title" :svg-path="emptyStateSvgPath" :description="$options.i18n.description" - :primary-button-text="$options.i18n.btnText" + :primary-button-text="$options.i18n.getStartedBtnText" :primary-button-link="ciHelpPagePath" /> </template> @@ -80,7 +98,7 @@ export default { <pipelines-ci-templates /> </template> </gitlab-experiment> - <gitlab-experiment v-else-if="canSetCi" name="code_quality_walkthrough"> + <gitlab-experiment v-else-if="isCodeQualityExperimentActive" name="code_quality_walkthrough"> <template #control> <gl-empty-state :title="$options.i18n.title" @@ -89,7 +107,7 @@ export default { > <template #actions> <gl-button :href="ciHelpPagePath" variant="confirm" @click="trackClick()"> - {{ $options.i18n.btnText }} + {{ $options.i18n.getStartedBtnText }} </gl-button> </template> </gl-empty-state> @@ -108,6 +126,57 @@ export default { </gl-empty-state> </template> </gitlab-experiment> + <gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates"> + <template #control> + <gl-empty-state + :title="$options.i18n.title" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.description" + > + <template #actions> + <gl-button + :href="ciHelpPagePath" + variant="confirm" + @click="trackCiRunnerTemplatesClick('get_started_button_clicked')" + > + {{ $options.i18n.getStartedBtnText }} + </gl-button> + </template> + </gl-empty-state> + </template> + <template #candidate> + <gl-empty-state + :title="$options.i18n.title" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.description" + > + <template #actions> + <gl-button + :href="ciRunnerSettingsPath" + variant="confirm" + @click="trackCiRunnerTemplatesClick('install_runners_button_clicked')" + > + {{ $options.i18n.installRunnersBtnText }} + </gl-button> + <gl-button + :href="ciHelpPagePath" + variant="default" + @click="trackCiRunnerTemplatesClick('learn_button_clicked')" + > + {{ $options.i18n.aboutRunnersBtnText }} + </gl-button> + </template> + </gl-empty-state> + </template> + </gitlab-experiment> + <gl-empty-state + v-else-if="canSetCi" + :title="$options.i18n.title" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.description" + :primary-button-text="$options.i18n.getStartedBtnText" + :primary-button-link="ciHelpPagePath" + /> <gl-empty-state v-else title="" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue index d39e120dc6c..52c8ef2cf26 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -56,6 +56,7 @@ export default { <div class="pipeline-tags" data-testid="pipeline-url-table-cell"> <gl-link :href="pipeline.path" + class="gl-text-decoration-underline" data-testid="pipeline-url-link" data-qa-selector="pipeline_url_link" > diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue index 0218cb2e1b8..8bb2657c161 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue @@ -1,7 +1,7 @@ <script> import { GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui'; import { isEqual } from 'lodash'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { getParameterByName } from '~/lib/utils/common_utils'; import { __, s__ } from '~/locale'; import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; @@ -99,6 +99,11 @@ export default { required: false, default: null, }, + ciRunnerSettingsPath: { + type: String, + required: false, + default: null, + }, }, data() { return { @@ -249,11 +254,16 @@ export default { .postAction(endpoint) .then(() => { this.isResetCacheButtonLoading = false; - createFlash(s__('Pipelines|Project cache successfully reset.'), 'notice'); + createFlash({ + message: s__('Pipelines|Project cache successfully reset.'), + type: 'notice', + }); }) .catch(() => { this.isResetCacheButtonLoading = false; - createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.')); + createFlash({ + message: s__('Pipelines|Something went wrong while cleaning runners cache.'), + }); }); }, resetRequestData() { @@ -278,7 +288,10 @@ export default { } if (!filter.type) { - createFlash(RAW_TEXT_WARNING, 'warning'); + createFlash({ + message: RAW_TEXT_WARNING, + type: 'warning', + }); } }); @@ -337,6 +350,7 @@ export default { :empty-state-svg-path="emptyStateSvgPath" :can-set-ci="canCreatePipeline" :code-quality-page-path="codeQualityPagePath" + :ci-runner-settings-path="ciRunnerSettingsPath" /> <gl-empty-state diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue index 20a232beb83..15ff7da35e1 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue @@ -2,7 +2,7 @@ import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; import { debounce } from 'lodash'; import Api from '~/api'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants'; export default { @@ -38,7 +38,9 @@ export default { this.loading = false; }) .catch((err) => { - createFlash(FETCH_BRANCH_ERROR_MESSAGE); + createFlash({ + message: FETCH_BRANCH_ERROR_MESSAGE, + }); this.loading = false; throw err; }); diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue index 4a8d89ebe37..af62c492748 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue @@ -2,7 +2,7 @@ import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; import { debounce } from 'lodash'; import Api from '~/api'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants'; export default { @@ -38,7 +38,9 @@ export default { this.loading = false; }) .catch((err) => { - createFlash(FETCH_TAG_ERROR_MESSAGE); + createFlash({ + message: FETCH_TAG_ERROR_MESSAGE, + }); this.loading = false; throw err; }); diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue index 3db5893b565..bc661f37493 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue @@ -8,7 +8,7 @@ import { } from '@gitlab/ui'; import { debounce } from 'lodash'; import Api from '~/api'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { ANY_TRIGGER_AUTHOR, FETCH_AUTHOR_ERROR_MESSAGE, @@ -61,7 +61,9 @@ export default { this.loading = false; }) .catch((err) => { - createFlash(FETCH_AUTHOR_ERROR_MESSAGE); + createFlash({ + message: FETCH_AUTHOR_ERROR_MESSAGE, + }); this.loading = false; throw err; }); |