feat: redirect transition's error on error page

Author: Cyrille Bourgois

packages/manager/apps/public-cloud/src/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-webpack-loader-syntax, import/extensions */
 import 'script-loader!jquery';
 import angular from 'angular';
-import '@uirouter/angularjs';
+import '@uirouter/angularjs'; // eslint-disable-line import/no-duplicates
 import 'script-loader!lodash';
 import 'script-loader!jquery-ui/ui/minified/core.min';
 import 'script-loader!jquery-ui/ui/minified/widget.min';
@@ -14,6 +14,10 @@ import 'script-loader!jsplumb';
 import 'script-loader!angular-ui-validate/dist/validate.js';
 /* eslint-enable import/no-webpack-loader-syntax, import/extensions */
 
+import get from 'lodash/get';
+import has from 'lodash/has';
+import { RejectType } from '@uirouter/angularjs'; // eslint-disable-line import/no-duplicates
+
 import navbar from '@ovh-ux/manager-navbar';
 import ovhManagerCore from '@ovh-ux/manager-core';
 import ovhManagerPci from '@ovh-ux/manager-pci';
@@ -53,4 +57,16 @@ angular
   .controller('PublicCloudController', controller)
   .service('publicCloud', service)
   .config(routing)
+  .run(/* @ngInject */ ($state) => {
+    $state.defaultErrorHandler((error) => {
+      if (error.type === RejectType.ERROR) {
+        $state.go('pci.error', {
+          detail: {
+            message: get(error.detail, 'data.message'),
+            code: has(error.detail, 'headers') ? error.detail.headers('x-ovh-queryId') : null,
+          },
+        }, { location: false });
+      }
+    });
+  })
   .run(/* @ngTranslationsInject:json ./translations */);

packages/manager/modules/pci/src/error/error.component.js

@@ -9,5 +9,7 @@ export default {
     getAssets: '<',
     getCancelHref: '<',
     getErrorTranslationValues: '<',
+    reload: '<',
+    homeLink: '<',
   },
 };

packages/manager/modules/pci/src/error/error.html

@@ -1,4 +1,4 @@
-<div class="pci-error row justify-content-md-center mb-5">
+<div class="pci-error row justify-content-md-center py-5">
     <div class="col-md-6">
 
         <div class="text-center mb-3">
@@ -16,7 +16,25 @@
                   data-translate-default="{{ 'pci_error_default' | translate }}"
                   data-translate-values="$ctrl.getErrorTranslationValues($ctrl.error.code)">
             </span>
+            <strong class="d-block"
+                data-ng-if="$ctrl.error.detail.message"
+                data-ng-bind="::$ctrl.error.detail.message"></strong>
+            <span class="d-block"
+                data-ng-if="$ctrl.error.detail.code"
+                data-translate="pci_error_detail_code"
+                data-translate-values="$ctrl.error.detail"></span>
         </oui-message>
+        <div class="d-flex flex-row-reverse"
+            data-ng-if="$ctrl.error.detail">
+            <oui-button
+                data-variant="primary"
+                data-on-click="$ctrl.reload()">
+                <span data-translate="pci_error_action_reload_label"></span>
+            </oui-button>
+            <a class="oui-button oui-button_link"
+                data-ng-href="{{$ctrl.homeLink}}"
+                data-translate="pci_error_action_home_label"></a>
+        </div>
 
         <div class="my-3"
              data-ng-class="{ 'd-flex flex-row-reverse justify-content-between align-items-center': ['account_not_eligible', 'unpaid_debts', 'max_projects_limit_reached'].indexOf($ctrl.error.code) > -1 }"

packages/manager/modules/pci/src/error/error.routing.js

@@ -22,6 +22,7 @@ export default /* @ngInject */ ($stateProvider) => {
         context: {
           type: 'any',
         },
+        detail: null,
         message: {
           type: 'any',
         },
@@ -87,6 +88,9 @@ export default /* @ngInject */ ($stateProvider) => {
               return {};
           }
         },
+
+        reload: /* @ngInject */ $window => () => $window.location.reload(),
+        homeLink: /* @ngInject */ $state => $state.href('pci'),
       },
     });
 };

packages/manager/modules/pci/src/error/translations/Messages_fr_FR.json

@@ -3,6 +3,9 @@
   "pci_error_button_cancel": "Annuler",
   "pci_error_button_action_pay_debt": "Régler ma dette",
   "pci_error_button_action_contact_support": "Contacter le support",
+  "pci_error_detail_code": "Code d'erreur : {{code}}",
+  "pci_error_action_reload_label": "Réessayer",
+  "pci_error_action_home_label": "Retour à la page d'accueil",
   "pci_error_default": "Une erreur est survenue lors du chargement de la page.",
   "pci_error_account_not_eligible": "Malheureusement vous ne pouvez pas créer de projet Public Cloud car vous avez eu des projets fermés pour impayés ou pour une mauvaise utilisation du service. Nous vous invitons à contacter le support.",
   "pci_error_max_projects_limit_reached": "Malheureusement vous ne pouvez pas créer de projet Public Cloud supplémentaire car vous avez atteint le quota maximum de projets. Pour débloquer ces quotas, nous vous invitons à contacter le support.",