Move progress bar and make configurable

Make the registration progress bar more
reusable friendly.

ee/app/assets/javascripts/subscriptions/new/components/checkout/progress_bar.vue → ee/app/assets/javascripts/registrations/components/progress_bar.vue

 <script>
-import { s__ } from '~/locale';
-
 export default {
   props: {
-    step: {
-      type: Number,
+    steps: {
+      type: Array,
+      required: true,
+    },
+    currentStep: {
+      type: String,
       required: true,
     },
   },
+  computed: {
+    currentStepIndex() {
+      return this.steps.indexOf(this.currentStep);
+    },
+  },
   methods: {
-    classObject(stepNumber) {
+    classObject(stepIndex) {
       return {
         phase: true,
         bold: true,
         center: true,
-        finished: this.step > stepNumber,
-        current: this.step === stepNumber,
+        finished: this.currentStepIndex > stepIndex,
+        current: this.currentStepIndex === stepIndex,
       };
     },
   },
-  i18n: {
-    yourProfile: s__('Checkout|1. Your profile'),
-    checkout: s__('Checkout|2. Checkout'),
-    yourGroup: s__('Checkout|3. Your GitLab group'),
-  },
 };
 </script>
 <template>
   <div class="bar d-flex">
-    <div v-for="(value, name, index) in $options.i18n" :key="name" :class="classObject(index + 1)">
-      {{ value }}
+    <div v-for="(step, index) in steps" :key="index" :class="classObject(index)">
+      {{ index + 1 }}. {{ step }}
     </div>
   </div>
 </template>

ee/app/assets/javascripts/registrations/constants.js

+import { s__ } from '~/locale';
+
+export const STEPS = {
+  yourProfile: s__('Registration|Your profile'),
+  checkout: s__('Registration|Checkout'),
+  yourGroup: s__('Registration|Your GitLab group'),
+  yourProject: s__('Registration|Your first project'),
+};
+
+export const SUBSCRIPTON_FLOW_STEPS = [STEPS.yourProfile, STEPS.checkout, STEPS.yourGroup];

ee/app/assets/javascripts/registrations/welcome/index.js

 import Vue from 'vue';
-import { PROGRESS_STEPS } from 'ee/subscriptions/new/constants';
-import ProgressBar from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
+import { STEPS } from '../constants';
+import ProgressBar from '../components/progress_bar.vue';
 
 export default () => {
-  const progressBarEl = document.getElementById('progress-bar');
+  const el = document.getElementById('progress-bar');
+
+  if (!el) return null;
+
+  const steps = [STEPS.yourProfile, STEPS.yourGroup, STEPS.yourProject];
 
   return new Vue({
-    el: progressBarEl,
+    el,
     render(createElement) {
-      return createElement(ProgressBar, { props: { step: PROGRESS_STEPS.editProfile } });
+      return createElement(ProgressBar, {
+        props: { steps, currentStep: STEPS.yourProfile },
+      });
     },
   });
 };

ee/app/assets/javascripts/subscriptions/groups/edit/index.js

 import Vue from 'vue';
-import { PROGRESS_STEPS } from 'ee/subscriptions/new/constants';
-import ProgressBar from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
+import { STEPS, SUBSCRIPTON_FLOW_STEPS } from 'ee/registrations/constants';
+import ProgressBar from 'ee/registrations/components/progress_bar.vue';
 
 export default () => {
-  const progressBarEl = document.getElementById('progress-bar');
+  const el = document.getElementById('progress-bar');
+
+  if (!el) return null;
 
   return new Vue({
-    el: progressBarEl,
+    el,
     render(createElement) {
-      return createElement(ProgressBar, { props: { step: PROGRESS_STEPS.editGroup } });
+      return createElement(ProgressBar, {
+        props: { steps: SUBSCRIPTON_FLOW_STEPS, currentStep: STEPS.yourGroup },
+      });
     },
   });
 };

ee/app/assets/javascripts/subscriptions/new/components/checkout.vue

 <script>
 import { s__ } from '~/locale';
-import { PROGRESS_STEPS } from '../constants';
+import { STEPS, SUBSCRIPTON_FLOW_STEPS } from 'ee/registrations/constants';
 import { mapState } from 'vuex';
-import ProgressBar from './checkout/progress_bar.vue';
+import ProgressBar from 'ee/registrations/components/progress_bar.vue';
 import SubscriptionDetails from './checkout/subscription_details.vue';
 import BillingAddress from './checkout/billing_address.vue';
 import PaymentMethod from './checkout/payment_method.vue';
@@ -10,11 +10,8 @@ import ConfirmOrder from './checkout/confirm_order.vue';
 
 export default {
   components: { ProgressBar, SubscriptionDetails, BillingAddress, PaymentMethod, ConfirmOrder },
-  data() {
-    return {
-      step: PROGRESS_STEPS.checkout,
-    };
-  },
+  steps: SUBSCRIPTON_FLOW_STEPS,
+  currentStep: STEPS.checkout,
   computed: {
     ...mapState(['isNewUser']),
   },
@@ -26,7 +23,7 @@ export default {
 <template>
   <div class="checkout d-flex flex-column justify-content-between w-100">
     <div class="full-width">
-      <progress-bar v-if="isNewUser" :step="step" />
+      <progress-bar v-if="isNewUser" :steps="$options.steps" :current-step="$options.currentStep" />
       <div class="flash-container"></div>
       <h2 class="mt-4 mb-3 mb-lg-5">{{ $options.i18n.checkout }}</h2>
       <subscription-details />

ee/app/assets/javascripts/subscriptions/new/constants.js

@@ -11,12 +11,6 @@ export const ZUORA_IFRAME_OVERRIDE_PARAMS = {
   retainValues: 'true',
 };
 
-export const PROGRESS_STEPS = {
-  editProfile: 1,
-  checkout: 2,
-  editGroup: 3,
-};
-
 export const TAX_RATE = 0;
 
 export const NEW_GROUP = 'new_group';

ee/changelogs/unreleased/move-progress-bar-component.yml

+---
+title: Move registrations progress bar to a generic place and make it configurable
+merge_request: 31484
+author:
+type: changed

ee/spec/frontend/subscriptions/new/components/checkout/progress_bar_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Component from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
+import Component from 'ee/registrations/components/progress_bar.vue';
 
 describe('Progress Bar', () => {
   let wrapper;
@@ -14,7 +14,7 @@ describe('Progress Bar', () => {
   const secondStep = () => wrapper.find('.bar div:nth-child(2)');
 
   beforeEach(() => {
-    createComponent({ step: 2 });
+    createComponent({ currentStep: 'b', steps: ['a', 'b'] });
   });
 
   afterEach(() => {

ee/spec/frontend/subscriptions/new/components/checkout_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import createStore from 'ee/subscriptions/new/store';
 import Component from 'ee/subscriptions/new/components/checkout.vue';
-import ProgressBar from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
+import ProgressBar from 'ee/registrations/components/progress_bar.vue';
 
 describe('Checkout', () => {
   const localVue = createLocalVue();
@@ -37,4 +37,22 @@ describe('Checkout', () => {
       expect(findProgressBar().exists()).toBe(visible);
     });
   });
+
+  describe('passing the correct options to the progress bar component', () => {
+    beforeEach(() => {
+      store.state.isNewUser = true;
+    });
+
+    it('passes the steps', () => {
+      expect(findProgressBar().props('steps')).toEqual([
+        'Your profile',
+        'Checkout',
+        'Your GitLab group',
+      ]);
+    });
+
+    it('passes the current step', () => {
+      expect(findProgressBar().props('currentStep')).toEqual('Checkout');
+    });
+  });
 });

locale/gitlab.pot

@@ -3836,15 +3836,6 @@ msgstr ""
 msgid "Checkout|(x%{numberOfUsers})"
 msgstr ""
 
-msgid "Checkout|1. Your profile"
-msgstr ""
-
-msgid "Checkout|2. Checkout"
-msgstr ""
-
-msgid "Checkout|3. Your GitLab group"
-msgstr ""
-
 msgid "Checkout|Billing address"
 msgstr ""
 
@@ -17232,6 +17223,18 @@ msgstr ""
 msgid "Registration"
 msgstr ""
 
+msgid "Registration|Checkout"
+msgstr ""
+
+msgid "Registration|Your GitLab group"
+msgstr ""
+
+msgid "Registration|Your first project"
+msgstr ""
+
+msgid "Registration|Your profile"
+msgstr ""
+
 msgid "Related Deployed Jobs"
 msgstr ""