Merge branch...

Merge branch 'customers-2200-mlunoe-handle-non-existing-group-gracefully-in-new-subscription-flow' into 'master'

Fix(New Subscription): handle non-existing groups

See merge request gitlab-org/gitlab!48626

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

@@ -17,7 +17,13 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['totalAmount', 'name', 'usersPresent']),
+    ...mapGetters([
+      'totalAmount',
+      'name',
+      'usersPresent',
+      'isGroupSelected',
+      'isSelectedGroupPresent',
+    ]),
     titleWithName() {
       return sprintf(this.$options.i18n.title, { name: this.name });
     },
@@ -33,7 +39,10 @@ export default {
 };
 </script>
 <template>
-  <div class="order-summary d-flex flex-column flex-grow-1 gl-mt-2 mt-lg-5">
+  <div
+    v-if="!isGroupSelected || isSelectedGroupPresent"
+    class="order-summary gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-mt-2 mt-lg-5"
+  >
     <div class="d-lg-none">
       <div @click="toggleCollapse">
         <h4 class="d-flex justify-content-between gl-font-lg" :class="{ 'gl-mb-7': !collapsed }">

ee/app/assets/javascripts/subscriptions/new/store/getters.js

@@ -45,9 +45,14 @@ export const vat = (state, getters) => state.taxRate * getters.totalExVat;
 export const totalAmount = (_, getters) => getters.totalExVat + getters.vat;
 
 export const name = (state, getters) => {
-  if (state.isSetupForCompany && state.organizationName) return state.organizationName;
-  else if (getters.isGroupSelected) return getters.selectedGroupName;
-  else if (state.isSetupForCompany) return s__('Checkout|Your organization');
+  if (state.isSetupForCompany && state.organizationName) {
+    return state.organizationName;
+  } else if (getters.isGroupSelected && getters.isSelectedGroupPresent) {
+    return getters.selectedGroupName;
+  } else if (state.isSetupForCompany) {
+    return s__('Checkout|Your organization');
+  }
+
   return state.fullName;
 };
 
@@ -56,9 +61,20 @@ export const usersPresent = state => state.numberOfUsers > 0;
 export const isGroupSelected = state =>
   state.selectedGroup !== null && state.selectedGroup !== NEW_GROUP;
 
+export const isSelectedGroupPresent = (state, getters) => {
+  return (
+    getters.isGroupSelected && state.groupData.some(group => group.value === state.selectedGroup)
+  );
+};
+
 export const selectedGroupUsers = (state, getters) => {
-  if (!getters.isGroupSelected) return 1;
-  return state.groupData.find(group => group.value === state.selectedGroup).numberOfUsers;
+  if (!getters.isGroupSelected) {
+    return 1;
+  } else if (getters.isSelectedGroupPresent) {
+    return state.groupData.find(group => group.value === state.selectedGroup).numberOfUsers;
+  }
+
+  return null;
 };
 
 export const selectedGroupName = (state, getters) => {

ee/changelogs/unreleased/customers-2200-mlunoe-handle-non-existing-group-gracefully-in-new-subscri.yml

+---
+title: Fix the user experience when the user is unauthorized or trying to subscribe
+  for a non-existing group
+merge_request: 48626
+author:
+type: fixed

ee/spec/frontend/subscriptions/new/store/getters_spec.js

@@ -105,11 +105,28 @@ describe('Subscriptions Getters', () => {
       ).toBe('My organization');
     });
 
+    it('returns the organization name when a group is selected but does not exist', () => {
+      expect(
+        getters.name(
+          { isSetupForCompany: true },
+          {
+            isGroupSelected: true,
+            isSelectedGroupPresent: false,
+            selectedGroupName: 'Selected group',
+          },
+        ),
+      ).toBe('Your organization');
+    });
+
     it('returns the selected group name a group is selected', () => {
       expect(
         getters.name(
           { isSetupForCompany: true },
-          { isGroupSelected: true, selectedGroupName: 'Selected group' },
+          {
+            isGroupSelected: true,
+            isSelectedGroupPresent: true,
+            selectedGroupName: 'Selected group',
+          },
         ),
       ).toBe('Selected group');
     });
@@ -161,16 +178,54 @@ describe('Subscriptions Getters', () => {
       ).toBe(1);
     });
 
+    it('returns `null` when a group is selected, but not present', () => {
+      expect(
+        getters.selectedGroupUsers(
+          { groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 123 },
+          { isGroupSelected: true, isSelectedGroupPresent: false },
+        ),
+      ).toBe(null);
+    });
+
     it('returns the number of users of the selected group when a group is selected', () => {
       expect(
         getters.selectedGroupUsers(
           { groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 123 },
-          { isGroupSelected: true },
+          { isGroupSelected: true, isSelectedGroupPresent: true },
         ),
       ).toBe(3);
     });
   });
 
+  describe('isSelectedGroupPresent', () => {
+    it('returns false when group is not selected', () => {
+      expect(
+        getters.isSelectedGroupPresent(
+          { groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: null },
+          { isGroupSelected: false },
+        ),
+      ).toBe(false);
+    });
+
+    it('returns false when group is selected, but not present', () => {
+      expect(
+        getters.isSelectedGroupPresent(
+          { groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 321 },
+          { isGroupSelected: true },
+        ),
+      ).toBe(false);
+    });
+
+    it('returns true when group is selected and is present', () => {
+      expect(
+        getters.isSelectedGroupPresent(
+          { groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 123 },
+          { isGroupSelected: true },
+        ),
+      ).toBe(true);
+    });
+  });
+
   describe('selectedGroupName', () => {
     it('returns null when no group is selected', () => {
       expect(