feat(pci.project.failover-ips): add empty page

* add `onboarding`module
* update `failoverIps` to use component and resolve
* redirect to `onboarding` if no `failoverIps`

ref: MANAGER-2280

Author: Cyrille Bourgois

packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.component.js

@@ -0,0 +1,11 @@
+import controller from './failover-ips.controller';
+import template from './failover-ips.html';
+
+export default {
+  controller,
+  template,
+  bindings: {
+    projectId: '<',
+    failoverIps: '<',
+  },
+};

packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.controller.js

@@ -2,41 +2,18 @@ const MESSAGES_CONTAINER_NAME = 'pci.projects.project.failover-ips';
 
 export default class FailoverIpController {
   /* @ngInject */
-  constructor($translate, CucCloudMessage, OvhApiCloudProjectIpFailover, projectId) {
+  constructor($translate, CucCloudMessage, OvhApiCloudProjectIpFailover) {
     this.$translate = $translate;
     this.CucCloudMessage = CucCloudMessage;
     this.OvhApiCloudProjectIpFailover = OvhApiCloudProjectIpFailover;
-    this.projectId = projectId;
+  }
 
-    this.messageHandler = CucCloudMessage.subscribe(MESSAGES_CONTAINER_NAME, {
+  $onInit() {
+    this.messageHandler = this.CucCloudMessage.subscribe(MESSAGES_CONTAINER_NAME, {
       onMessage: () => this.refreshMessage(),
     });
   }
 
-  loadPartialData({ offset, pageSize }) {
-    return this.OvhApiCloudProjectIpFailover
-      .v6()
-      .query({
-        serviceName: this.projectId,
-      })
-      .$promise
-      .then(data => ({
-        data: data.slice(offset - 1, offset + pageSize - 1),
-        meta: {
-          totalCount: data.length,
-          currentOffset: offset,
-          pageCount: Math.ceil(data.length / pageSize),
-          pageSize,
-        },
-      }))
-      .catch(({ data }) => {
-        this.CucCloudMessage.error(
-          this.$translate.instant('pci_projects_project_failoverip_error', { error: data.message }),
-          MESSAGES_CONTAINER_NAME,
-        );
-      });
-  }
-
   refreshMessage() {
     this.messages = this.messageHandler.getMessages();
   }

packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.html

@@ -2,7 +2,7 @@
     <h1 data-translate="pci_projects_project_failoverip_title"></h1>
     <div>
         <cui-message-container data-messages="$ctrl.messages"></cui-message-container>
-        <oui-datagrid data-rows-loader="$ctrl.loadPartialData($config)" data-page-size="5">
+        <oui-datagrid data-rows="$ctrl.failoverIps" data-page-size="5">
             <extra-top>
                 <a class="oui-button oui-button_secondary oui-button_icon-left mb-3" data-ui-sref="pci.projects.project.failover-ips.imports">
                     <span class="oui-icon oui-icon-add" aria-hidden="true"></span>

packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.module.js

@@ -4,6 +4,9 @@ import '@uirouter/angularjs';
 
 import failoverIp from './failover-ip';
 import imports from './imports';
+import onboarding from './onboarding';
+
+import component from './failover-ips.component';
 import routing from './failover-ips.routing';
 
 const moduleName = 'ovhManagerPciProjectFailoverIps';
@@ -14,7 +17,9 @@ angular
     'pascalprecht.translate',
     failoverIp,
     imports,
+    onboarding,
   ])
-  .config(routing);
+  .config(routing)
+  .component('pciProjectFailoverIps', component);
 
 export default moduleName;

packages/manager/modules/pci/src/projects/project/failover-ips/failover-ips.routing.js

@@ -1,21 +1,29 @@
-import controller from './failover-ips.controller';
-import template from './failover-ips.html';
-
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider
     .state('pci.projects.project.failover-ips', {
       url: '/failover-ips',
-      controller,
-      controllerAs: '$ctrl',
-      template,
+      component: 'pciProjectFailoverIps',
       translations: {
         format: 'json',
         value: ['.'],
       },
+      redirectTo: transition => transition
+        .injector()
+        .getAsync('failoverIps')
+        .then(failoverIps => (failoverIps.length === 0 ? { state: 'pci.projects.project.failover-ips.onboarding' } : false)),
       resolve: {
         breadcrumb: /* @ngInject */ $translate => $translate
           .refresh()
           .then(() => $translate.instant('pci_projects_project_failoverip_title')),
+        failoverIps: /* @ngInject */ (
+          OvhApiCloudProjectIpFailover,
+          projectId,
+        ) => OvhApiCloudProjectIpFailover
+          .v6()
+          .query({
+            serviceName: projectId,
+          })
+          .$promise,
       },
     });
 };

packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/index.js

@@ -0,0 +1,24 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerPciFailoverIpsOnboardingLazyLoading';
+
+angular
+  .module(moduleName, [
+    'ui.router',
+    'oc.lazyLoad',
+  ])
+  .config(/* @ngInject */ ($stateProvider) => {
+    $stateProvider.state('pci.projects.project.failover-ips.onboarding.**', {
+      url: '/onboarding',
+      lazyLoad: ($transition$) => {
+        const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+        return import('./onboarding.module')
+          .then(mod => $ocLazyLoad.inject(mod.default || mod));
+      },
+    });
+  });
+
+export default moduleName;

packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.component.js

@@ -0,0 +1,10 @@
+import controller from './onboarding.controller';
+import template from './onboarding.html';
+
+export default {
+  controller,
+  template,
+  bindings: {
+    addFailoverIp: '<',
+  },
+};

packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.constants.js

@@ -0,0 +1,12 @@
+export const GUIDES = [
+  {
+    id: 'persistent-failover-ip-configuration',
+    link: 'https://docs.ovh.com/gb/en/public-cloud/make-failover-ip-configuration-persistent/',
+  },
+  {
+    id: 'migrating-failover-ip',
+    link: 'https://docs.ovh.com/gb/en/public-cloud/migrating_a_failover_ip/',
+  },
+];
+
+export default { GUIDES };

packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.controller.js

@@ -0,0 +1,26 @@
+import reduce from 'lodash/reduce';
+import { GUIDES } from './onboarding.constants';
+
+export default class PciFailoverIpsOnboardingController {
+  /* @ngInject */
+  constructor(
+    $translate,
+  ) {
+    this.$translate = $translate;
+  }
+
+  $onInit() {
+    this.guides = reduce(
+      GUIDES,
+      (list, guide) => ([
+        ...list,
+        {
+          ...guide,
+          title: this.$translate.instant(`pci_projects_project_failoverip_onboarding_guides_${guide.id}_title`),
+          description: this.$translate.instant(`pci_projects_project_failoverip_onboarding_guides_${guide.id}_description`),
+        },
+      ]),
+      [],
+    );
+  }
+}

packages/manager/modules/pci/src/projects/project/failover-ips/onboarding/onboarding.html

@@ -0,0 +1,14 @@
+<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>
+    <strong data-translate="pci_projects_project_failoverip_onboarding_content2"></strong>
+    <p data-translate="pci_projects_project_failoverip_onboarding_content3"></p>
+    <p data-translate="pci_projects_project_failoverip_onboarding_content4"></p>
+
+    <oui-button
+        data-variant="primary"
+        data-on-click="$ctrl.addFailoverIp()">
+        <span data-translate="pci_projects_project_failoverip_onboarding_action_label"></span>
+    </oui-button>
+
+</pci-project-empty>