Fix continuous onboarding A SVG paths

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue

@@ -18,9 +18,13 @@ export default {
       required: true,
       type: Object,
     },
+    sections: {
+      required: true,
+      type: Object,
+    },
   },
   maxValue: Object.keys(ACTION_LABELS).length,
-  sections: Object.keys(ACTION_SECTIONS),
+  actionSections: Object.keys(ACTION_SECTIONS),
   computed: {
     progressValue() {
       return Object.values(this.actions).filter((a) => a.completed).length;
@@ -38,6 +42,9 @@ export default {
       );
       return actions;
     },
+    svgFor(section) {
+      return this.sections[section].svg;
+    },
   },
 };
 </script>
@@ -59,8 +66,12 @@ export default {
       <gl-progress-bar :value="progressValue" :max="$options.maxValue" />
     </div>
     <div class="row row-cols-1 row-cols-md-3 gl-mt-5">
-      <div v-for="section in $options.sections" :key="section" class="col gl-mb-6">
-        <learn-gitlab-section-card :section="section" :actions="actionsFor(section)" />
+      <div v-for="section in $options.actionSections" :key="section" class="col gl-mb-6">
+        <learn-gitlab-section-card
+          :section="section"
+          :svg="svgFor(section)"
+          :actions="actionsFor(section)"
+        />
       </div>
     </div>
   </div>

app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue

 <script>
 import { GlCard } from '@gitlab/ui';
-import { imagePath } from '~/lib/utils/common_utils';
 import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
 
 import LearnGitlabSectionLink from './learn_gitlab_section_link.vue';
@@ -16,6 +15,10 @@ export default {
       required: true,
       type: String,
     },
+    svg: {
+      required: true,
+      type: String,
+    },
     actions: {
       required: true,
       type: Object,
@@ -28,17 +31,12 @@ export default {
       );
     },
   },
-  methods: {
-    svg(section) {
-      return imagePath(`learn_gitlab/section_${section}.svg`);
-    },
-  },
 };
 </script>
 <template>
   <gl-card class="gl-pt-0 learn-gitlab-section-card">
     <div class="learn-gitlab-section-card-header">
-      <img :src="svg(section)" />
+      <img :src="svg" />
       <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n[section].title }}</h2>
       <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n[section].description }}</p>
     </div>

app/assets/javascripts/pages/projects/learn_gitlab/index/index.js

@@ -12,6 +12,7 @@ function initLearnGitlab() {
   }
 
   const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
+  const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
 
   const { learnGitlabA } = gon.experiments;
 
@@ -20,7 +21,9 @@ function initLearnGitlab() {
   return new Vue({
     el,
     render(createElement) {
-      return createElement(learnGitlabA ? LearnGitlabA : LearnGitlabB, { props: { actions } });
+      return createElement(learnGitlabA ? LearnGitlabA : LearnGitlabB, {
+        props: { actions, sections },
+      });
     },
   });
 }

app/helpers/learn_gitlab_helper.rb

@@ -36,6 +36,20 @@ module LearnGitlabHelper
       Gitlab::Experimentation.in_experiment_group?(:learn_gitlab_b, subject: current_user)
   end
 
+  def onboarding_sections_data
+    {
+      workspace: {
+        svg: image_path("learn_gitlab/section_workspace.svg")
+      },
+      plan: {
+        svg: image_path("learn_gitlab/section_plan.svg")
+      },
+      deploy: {
+        svg: image_path("learn_gitlab/section_deploy.svg")
+      }
+    }
+  end
+
   private
 
   def action_urls

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

@@ -2,4 +2,4 @@
 - page_title _("Learn GitLab")
 - add_page_specific_style 'page_bundles/learn_gitlab'
 
-#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json } }
+#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json, sections: onboarding_sections_data.to_json } }

spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap

@@ -68,7 +68,7 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
             class="learn-gitlab-section-card-header"
           >
             <img
-              src="/assets/learn_gitlab/section_workspace.svg"
+              src="workspace.svg"
             />
              
             <h2
@@ -246,7 +246,7 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
             class="learn-gitlab-section-card-header"
           >
             <img
-              src="/assets/learn_gitlab/section_plan.svg"
+              src="plan.svg"
             />
              
             <h2
@@ -324,7 +324,7 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
             class="learn-gitlab-section-card-header"
           >
             <img
-              src="/assets/learn_gitlab/section_deploy.svg"
+              src="deploy.svg"
             />
              
             <h2

spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap

@@ -11,7 +11,7 @@ exports[`Learn GitLab Section Card renders correctly 1`] = `
     class="learn-gitlab-section-card-header"
   >
     <img
-      src="/assets/learn_gitlab/section_workspace.svg"
+      src="workspace.svg"
     />
      
     <h2

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js

 import { GlProgressBar } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
-import { testActions } from './mock_data';
+import { testActions, testSections } from './mock_data';
 
 describe('Learn GitLab Design A', () => {
   let wrapper;
 
   const createWrapper = () => {
-    wrapper = mount(LearnGitlabA, { propsData: { actions: testActions } });
+    wrapper = mount(LearnGitlabA, { propsData: { actions: testActions, sections: testSections } });
   };
 
   beforeEach(() => {

spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js

@@ -3,6 +3,7 @@ import LearnGitlabSectionCard from '~/pages/projects/learn_gitlab/components/lea
 import { testActions } from './mock_data';
 
 const defaultSection = 'workspace';
+const testImage = 'workspace.svg';
 
 describe('Learn GitLab Section Card', () => {
   let wrapper;
@@ -14,7 +15,7 @@ describe('Learn GitLab Section Card', () => {
 
   const createWrapper = () => {
     wrapper = shallowMount(LearnGitlabSectionCard, {
-      propsData: { section: defaultSection, actions: testActions },
+      propsData: { section: defaultSection, actions: testActions, svg: testImage },
     });
   };
 

spec/frontend/pages/projects/learn_gitlab/components/mock_data.js

@@ -45,3 +45,15 @@ export const testActions = {
     svg: 'http://example.com/images/illustration.svg',
   },
 };
+
+export const testSections = {
+  workspace: {
+    svg: 'workspace.svg',
+  },
+  deploy: {
+    svg: 'deploy.svg',
+  },
+  plan: {
+    svg: 'plan.svg',
+  },
+};

spec/helpers/learn_gitlab_helper_spec.rb

@@ -96,6 +96,17 @@ RSpec.describe LearnGitlabHelper do
     end
   end
 
+  describe '.onboarding_sections_data' do
+    subject(:sections) { helper.onboarding_sections_data }
+
+    it 'has the right keys' do
+      expect(sections.keys).to contain_exactly(:deploy, :plan, :workspace)
+    end
+    it 'has the svg' do
+      expect(sections.values.map { |section| section.keys }).to eq([[:svg]] * 3)
+    end
+  end
+
   describe '.learn_gitlab_experiment_tracking_category' do
     using RSpec::Parameterized::TableSyntax