Fix images for pipeline empty state experiment

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue

@@ -2,7 +2,7 @@
 import { GlButton, GlCard, GlSprintf } from '@gitlab/ui';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
-import { SUGGESTED_CI_TEMPLATES, HELLO_WORLD_TEMPLATE_KEY } from '../../constants';
+import { HELLO_WORLD_TEMPLATE_KEY } from '../../constants';
 
 export default {
   components: {
@@ -32,14 +32,14 @@ export default {
       description: s__('Pipelines|CI/CD template to test and deploy your %{name} project.'),
     },
   },
-  inject: ['addCiYmlPath'],
+  inject: ['addCiYmlPath', 'suggestedCiTemplates'],
   data() {
-    const templates = Object.keys(SUGGESTED_CI_TEMPLATES).map((key) => {
+    const templates = this.suggestedCiTemplates.map(({ name, logo }) => {
       return {
-        name: key,
-        logoPath: SUGGESTED_CI_TEMPLATES[key].logoPath,
-        link: mergeUrlParams({ template: key }, this.addCiYmlPath),
-        description: sprintf(this.$options.i18n.templates.description, { name: key }),
+        name,
+        logo,
+        link: mergeUrlParams({ template: name }, this.addCiYmlPath),
+        description: sprintf(this.$options.i18n.templates.description, { name }),
       };
     });
 
@@ -101,7 +101,7 @@ export default {
             <img
               width="64"
               height="64"
-              :src="template.logoPath"
+              :src="template.logo"
               class="gl-mr-6"
               data-testid="template-logo"
             />

app/assets/javascripts/pipelines/constants.js

@@ -36,40 +36,5 @@ export const UNSUPPORTED_DATA = 'unsupported_data';
 
 export const CHILD_VIEW = 'child';
 
-// The keys of the templates are the same as their filenames
+// The key of the template is the same as the filename
 export const HELLO_WORLD_TEMPLATE_KEY = 'Hello-World';
-export const SUGGESTED_CI_TEMPLATES = {
-  Android: { logoPath: '/assets/illustrations/logos/android.svg' },
-  Bash: { logoPath: '/assets/illustrations/logos/bash.svg' },
-  'C++': { logoPath: '/assets/illustrations/logos/c_plus_plus.svg' },
-  Clojure: { logoPath: '/assets/illustrations/logos/clojure.svg' },
-  Composer: { logoPath: '/assets/illustrations/logos/composer.svg' },
-  Crystal: { logoPath: '/assets/illustrations/logos/crystal.svg' },
-  Dart: { logoPath: '/assets/illustrations/logos/dart.svg' },
-  Django: { logoPath: '/assets/illustrations/logos/django.svg' },
-  Docker: { logoPath: '/assets/illustrations/logos/docker.svg' },
-  Elixir: { logoPath: '/assets/illustrations/logos/elixir.svg' },
-  'iOS-Fastlane': { logoPath: '/assets/illustrations/logos/fastlane.svg' },
-  Flutter: { logoPath: '/assets/illustrations/logos/flutter.svg' },
-  Go: { logoPath: '/assets/illustrations/logos/go_logo.svg' },
-  Gradle: { logoPath: '/assets/illustrations/logos/gradle.svg' },
-  Grails: { logoPath: '/assets/illustrations/logos/grails.svg' },
-  dotNET: { logoPath: '/assets/illustrations/logos/dotnet.svg' },
-  Rails: { logoPath: '/assets/illustrations/logos/rails.svg' },
-  Julia: { logoPath: '/assets/illustrations/logos/julia.svg' },
-  Laravel: { logoPath: '/assets/illustrations/logos/laravel.svg' },
-  Latex: { logoPath: '/assets/illustrations/logos/latex.svg' },
-  Maven: { logoPath: '/assets/illustrations/logos/maven.svg' },
-  Mono: { logoPath: '/assets/illustrations/logos/mono.svg' },
-  Nodejs: { logoPath: '/assets/illustrations/logos/node_js.svg' },
-  npm: { logoPath: '/assets/illustrations/logos/npm.svg' },
-  OpenShift: { logoPath: '/assets/illustrations/logos/openshift.svg' },
-  Packer: { logoPath: '/assets/illustrations/logos/packer.svg' },
-  PHP: { logoPath: '/assets/illustrations/logos/php.svg' },
-  Python: { logoPath: '/assets/illustrations/logos/python.svg' },
-  Ruby: { logoPath: '/assets/illustrations/logos/ruby.svg' },
-  Rust: { logoPath: '/assets/illustrations/logos/rust.svg' },
-  Scala: { logoPath: '/assets/illustrations/logos/scala.svg' },
-  Swift: { logoPath: '/assets/illustrations/logos/swift.svg' },
-  Terraform: { logoPath: '/assets/illustrations/logos/terraform.svg' },
-};

app/assets/javascripts/pipelines/pipelines_index.js

@@ -28,6 +28,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     noPipelinesSvgPath,
     newPipelinePath,
     addCiYmlPath,
+    suggestedCiTemplates,
     canCreatePipeline,
     hasGitlabCi,
     ciLintPath,
@@ -40,6 +41,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     el,
     provide: {
       addCiYmlPath,
+      suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
     },
     data() {
       return {

app/helpers/ci/pipelines_helper.rb

@@ -30,6 +30,46 @@ module Ci
       project.has_ci? && project.builds_enabled?
     end
 
+    # This list of templates is for the pipeline_empty_state_templates experiment
+    # and will be cleaned up with https://gitlab.com/gitlab-org/gitlab/-/issues/326299
+    def experiment_suggested_ci_templates
+      [
+        { name: 'Android', logo: image_path('/assets/illustrations/logos/android.svg') },
+        { name: 'Bash', logo: image_path('/assets/illustrations/logos/bash.svg') },
+        { name: 'C++', logo: image_path('/assets/illustrations/logos/c_plus_plus.svg') },
+        { name: 'Clojure', logo: image_path('/assets/illustrations/logos/clojure.svg') },
+        { name: 'Composer', logo: image_path('/assets/illustrations/logos/composer.svg') },
+        { name: 'Crystal', logo: image_path('/assets/illustrations/logos/crystal.svg') },
+        { name: 'Dart', logo: image_path('/assets/illustrations/logos/dart.svg') },
+        { name: 'Django', logo: image_path('/assets/illustrations/logos/django.svg') },
+        { name: 'Docker', logo: image_path('/assets/illustrations/logos/docker.svg') },
+        { name: 'Elixir', logo: image_path('/assets/illustrations/logos/elixir.svg') },
+        { name: 'iOS-Fastlane', logo: image_path('/assets/illustrations/logos/fastlane.svg') },
+        { name: 'Flutter', logo: image_path('/assets/illustrations/logos/flutter.svg') },
+        { name: 'Go', logo: image_path('/assets/illustrations/logos/go_logo.svg') },
+        { name: 'Gradle', logo: image_path('/assets/illustrations/logos/gradle.svg') },
+        { name: 'Grails', logo: image_path('/assets/illustrations/logos/grails.svg') },
+        { name: 'dotNET', logo: image_path('/assets/illustrations/logos/dotnet.svg') },
+        { name: 'Rails', logo: image_path('/assets/illustrations/logos/rails.svg') },
+        { name: 'Julia', logo: image_path('/assets/illustrations/logos/julia.svg') },
+        { name: 'Laravel', logo: image_path('/assets/illustrations/logos/laravel.svg') },
+        { name: 'Latex', logo: image_path('/assets/illustrations/logos/latex.svg') },
+        { name: 'Maven', logo: image_path('/assets/illustrations/logos/maven.svg') },
+        { name: 'Mono', logo: image_path('/assets/illustrations/logos/mono.svg') },
+        { name: 'Nodejs', logo: image_path('/assets/illustrations/logos/node_js.svg') },
+        { name: 'npm', logo: image_path('/assets/illustrations/logos/npm.svg') },
+        { name: 'OpenShift', logo: image_path('/assets/illustrations/logos/openshift.svg') },
+        { name: 'Packer', logo: image_path('/assets/illustrations/logos/packer.svg') },
+        { name: 'PHP', logo: image_path('/assets/illustrations/logos/php.svg') },
+        { name: 'Python', logo: image_path('/assets/illustrations/logos/python.svg') },
+        { name: 'Ruby', logo: image_path('/assets/illustrations/logos/ruby.svg') },
+        { name: 'Rust', logo: image_path('/assets/illustrations/logos/rust.svg') },
+        { name: 'Scala', logo: image_path('/assets/illustrations/logos/scala.svg') },
+        { name: 'Swift', logo: image_path('/assets/illustrations/logos/swift.svg') },
+        { name: 'Terraform', logo: image_path('/assets/illustrations/logos/terraform.svg') }
+      ]
+    end
+
     private
 
     def warning_markdown(pipeline)

app/views/projects/pipelines/index.html.haml

@@ -16,4 +16,5 @@
   "ci-lint-path" => can?(current_user, :create_pipeline, @project) && project_ci_lint_path(@project),
   "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project),
   "has-gitlab-ci" => has_gitlab_ci?(@project).to_s,
-  "add-ci-yml-path" => can?(current_user, :create_pipeline, @project) && @project.present(current_user: current_user).add_ci_yml_path } }
+  "add-ci-yml-path" => can?(current_user, :create_pipeline, @project) && @project.present(current_user: current_user).add_ci_yml_path,
+  "suggested-ci-templates" => experiment_suggested_ci_templates.to_json } }

spec/frontend/pipelines/pipelines_ci_templates_spec.js

 import { shallowMount } from '@vue/test-utils';
 import PipelinesCiTemplate from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
-import { SUGGESTED_CI_TEMPLATES } from '~/pipelines/constants';
 
 const addCiYmlPath = "/-/new/master?commit_message='Add%20.gitlab-ci.yml'";
+const suggestedCiTemplates = [
+  { name: 'Android', logo: '/assets/illustrations/logos/android.svg' },
+  { name: 'Bash', logo: '/assets/illustrations/logos/bash.svg' },
+  { name: 'C++', logo: '/assets/illustrations/logos/c_plus_plus.svg' },
+];
 
 describe('Pipelines CI Templates', () => {
   let wrapper;
@@ -13,6 +17,7 @@ describe('Pipelines CI Templates', () => {
     return shallowMount(PipelinesCiTemplate, {
       provide: {
         addCiYmlPath,
+        suggestedCiTemplates,
       },
       stubs: {
         GlEmoji,
@@ -51,9 +56,7 @@ describe('Pipelines CI Templates', () => {
     it('renders all suggested templates', () => {
       const content = wrapper.text();
 
-      const keys = Object.keys(SUGGESTED_CI_TEMPLATES);
-
-      expect(content).toContain(...keys);
+      expect(content).toContain('Android', 'Bash', 'C++');
     });
 
     it('has the correct template name', () => {