fix(pci.projects.failover-ips): display message on ipfo order (#796)

marie-j · antleblanc · commit 235c861adc49 · 2019-06-05T08:19:44.000+02:00
ref: MANAGER-2741
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.component.js b/packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.component.js
@@ -7,5 +7,6 @@ export default {
   bindings: {
     projectId: '<',
     failoverIps: '<',
+    instances: '<',
   },
 };
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.html b/packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.html
@@ -8,7 +8,9 @@ <h1 data-translate="pci_projects_project_failoverip_title"></h1>
                     <oui-action-menu-item state="pci.projects.project.failover-ips.imports">
                         <span data-translate="pci_projects_project_failoverip_import"></span>
                     </oui-action-menu-item>
-                    <oui-action-menu-item state="pci.projects.project.failover-ips.order">
+                    <oui-action-menu-item
+                        state="pci.projects.project.failover-ips.order"
+                        disabled="$ctrl.instances.length === 0">
                         <span data-translate="pci_projects_project_failoverip_order"></span>
                     </oui-action-menu-item>
                 </oui-action-menu>
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.routing.js b/packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.routing.js
@@ -1,5 +1,6 @@
-import map from 'lodash/map';
+import filter from 'lodash/filter';
 import find from 'lodash/find';
+import map from 'lodash/map';
 
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider
@@ -61,6 +62,21 @@ export default /* @ngInject */ ($stateProvider) => {
 
           return promise;
         },
+
+        instances: /* @ngInject */ (
+          OvhApiCloudProject,
+          projectId,
+        ) => OvhApiCloudProject
+          .Instance()
+          .v6()
+          .query({
+            serviceName: projectId,
+          })
+          .$promise
+          .then(instances => filter(
+            instances,
+            ({ ipAddresses }) => find(ipAddresses, { type: 'public' }),
+          )),
       },
     });
 };
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.component.js b/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.component.js
@@ -7,5 +7,6 @@ export default {
   bindings: {
     addFailoverIp: '<',
     buyFailoverIp: '<',
+    instances: '<',
   },
 };
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.controller.js b/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.controller.js
@@ -5,8 +5,10 @@ export default class PciFailoverIpsOnboardingController {
   /* @ngInject */
   constructor(
     $translate,
+    CucCloudMessage,
   ) {
     this.$translate = $translate;
+    this.CucCloudMessage = CucCloudMessage;
   }
 
   $onInit() {
@@ -22,5 +24,20 @@ export default class PciFailoverIpsOnboardingController {
       ]),
       [],
     );
+    this.loadMessages();
+  }
+
+  loadMessages() {
+    this.CucCloudMessage.unSubscribe('pci.projects.project.failover-ips.onboarding');
+    this.messageHandler = this.CucCloudMessage.subscribe(
+      'pci.projects.project.failover-ips.onboarding',
+      {
+        onMessage: () => this.refreshMessages(),
+      },
+    );
+  }
+
+  refreshMessages() {
+    this.messages = this.messageHandler.getMessages();
   }
 }
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.html b/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.html
@@ -1,3 +1,4 @@
+<cui-message-container data-messages="$ctrl.messages"></cui-message-container>
 <pci-project-empty guides="$ctrl.guides">
     <h1 data-translate="pci_projects_project_failoverip_title"></h1>
     <p data-translate="pci_projects_project_failoverip_onboarding_content1"></p>
@@ -15,7 +16,8 @@ <h1 data-translate="pci_projects_project_failoverip_title"></h1>
         <oui-button
             class="ml-2"
             data-variant="secondary"
-            data-on-click="$ctrl.buyFailoverIp()">
+            data-on-click="$ctrl.buyFailoverIp()"
+            data-disabled="$ctrl.instances.length === 0">
             <span data-translate="pci_projects_project_failoverip_onboarding_action_buy"></span>
         </oui-button>
     </div>
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.routing.js b/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.routing.js
@@ -15,6 +15,22 @@ export default /* @ngInject */ ($stateProvider) => {
         buyFailoverIp: /* @ngInject */ ($state, projectId) => () => $state.go('pci.projects.project.failover-ips.onboarding.order', {
           projectId,
         }),
+        goToFailoverIpsOnboarding: /* @ngInject */($state, CucCloudMessage, projectId) => (message = false, type = 'success') => {
+          const reload = message && type === 'success';
+
+          const promise = $state.go('pci.projects.project.failover-ips.onboarding', {
+            projectId,
+          },
+          {
+            reload,
+          });
+
+          if (message) {
+            promise.then(() => CucCloudMessage[type](message, 'pci.projects.project.failover-ips.onboarding'));
+          }
+
+          return promise;
+        },
       },
       translations: {
         value: ['.'],
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/order/order.routing.js b/packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/order/order.routing.js
@@ -1,5 +1,4 @@
 import filter from 'lodash/filter';
-import find from 'lodash/find';
 import map from 'lodash/map';
 
 export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
@@ -26,22 +25,7 @@ export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
               id,
             }).$promise))),
 
-          instances: /* @ngInject */ (
-            OvhApiCloudProject,
-            projectId,
-          ) => OvhApiCloudProject
-            .Instance()
-            .v6()
-            .query({
-              serviceName: projectId,
-            })
-            .$promise
-            .then(instances => filter(
-              instances,
-              ({ ipAddresses }) => find(ipAddresses, { type: 'public' }),
-            )),
-
-          goBack: /* @ngInject */ goToFailoverIps => goToFailoverIps,
+          goBack: /* @ngInject */ goToFailoverIpsOnboarding => goToFailoverIpsOnboarding,
         },
 
       });
@@ -64,19 +48,7 @@ export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
             }).$promise
               .then(({ plans }) => filter(plans, offer => /failover/.test(offer.planCode) && /USA/.test(offer.invoiceName))),
 
-
-          instances: /* @ngInject */ (
-            OvhApiCloudProject,
-            projectId,
-          ) => OvhApiCloudProject
-            .Instance()
-            .v6()
-            .query({
-              serviceName: projectId,
-            })
-            .$promise,
-
-          goBack: /* @ngInject */ goToFailoverIps => goToFailoverIps,
+          goBack: /* @ngInject */ goToFailoverIpsOnboarding => goToFailoverIpsOnboarding,
         },
 
       });
diff --git a/packages/manager/modules/pci/src/projects/project/failover-ips/order/order.routing.js b/packages/manager/modules/pci/src/projects/project/failover-ips/order/order.routing.js
@@ -1,5 +1,4 @@
 import filter from 'lodash/filter';
-import find from 'lodash/find';
 import map from 'lodash/map';
 
 export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
@@ -26,21 +25,6 @@ export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
               id,
             }).$promise))),
 
-          instances: /* @ngInject */ (
-            OvhApiCloudProject,
-            projectId,
-          ) => OvhApiCloudProject
-            .Instance()
-            .v6()
-            .query({
-              serviceName: projectId,
-            })
-            .$promise
-            .then(instances => filter(
-              instances,
-              ({ ipAddresses }) => find(ipAddresses, { type: 'public' }),
-            )),
-
           goBack: /* @ngInject */ goToFailoverIps => goToFailoverIps,
         },
 
@@ -64,18 +48,6 @@ export default /* @ngInject */ ($stateProvider, coreConfigProvider) => {
             }).$promise
               .then(({ plans }) => filter(plans, offer => /failover/.test(offer.planCode) && /USA/.test(offer.invoiceName))),
 
-
-          instances: /* @ngInject */ (
-            OvhApiCloudProject,
-            projectId,
-          ) => OvhApiCloudProject
-            .Instance()
-            .v6()
-            .query({
-              serviceName: projectId,
-            })
-            .$promise,
-
           goBack: /* @ngInject */ goToFailoverIps => goToFailoverIps,
         },
 
