feat(pci.projects.new): manage polling during project creation (#418)

Author: Jisay

packages/manager/modules/pci/src/projects/new/new.routing.js

@@ -80,7 +80,7 @@ export default /* @ngInject */ ($stateProvider) => {
         newProjectInfo: /* @ngInject */ PciProjectNewService => PciProjectNewService
           .getNewProjectInfo(),
         onProjectCreated: /* @ngInject */ $state => projectId => $state.go(
-          'pci.projects.project.creating', {
+          'pci.projects.project', {
             projectId,
           },
         ),

packages/manager/modules/pci/src/projects/project/creating/creating.component.js

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

packages/manager/modules/pci/src/projects/project/creating/creating.controller.js

@@ -0,0 +1,41 @@
+export default class ProjectCreatingCtrl {
+  /* @ngInject */
+  constructor(Poller) {
+    // dependencies injections
+    this.Poller = Poller;
+
+    // other attributes
+    this.pollingNamespace = 'pci.projects.creating';
+  }
+
+  startCreationPolling() {
+    return this.Poller.poll(`/cloud/project/${this.projectId}`, null, {
+      namespace: this.pollingNamespace,
+      successRule(details) {
+        return details.status === 'ok';
+      },
+    })
+      .then(() => this.onProjectCreated());
+  }
+
+  stopCreationPolling() {
+    return this.Poller.kill({
+      namespace: this.pollingNamespace,
+    });
+  }
+
+  /* ============================
+  =            Hooks            =
+  ============================= */
+
+  $onInit() {
+    this.stopCreationPolling();
+    return this.startCreationPolling();
+  }
+
+  $onDestroy() {
+    return this.stopCreationPolling();
+  }
+
+  /* -----  End of Hooks  ------ */
+}

packages/manager/modules/pci/src/projects/project/creating/creating.module.js

@@ -1,9 +1,12 @@
 import angular from 'angular';
 import '@ovh-ux/ng-translate-async-loader';
+import '@ovh-ux/ng-ovh-swimming-poll';
 import '@uirouter/angularjs';
 import 'angular-translate';
 
+
 import routing from './creating.routing';
+import component from './creating.component';
 
 const moduleName = 'ovhManagerPciProjectsNewCreating';
 
@@ -12,8 +15,10 @@ angular
     'ui.router',
     'ngTranslateAsyncLoader',
     'pascalprecht.translate',
+    'ngOvhSwimmingPoll',
   ])
   .config(routing)
-  .run(/* @ngTranslationsInject:json ./translations */);
+  .run(/* @ngTranslationsInject:json ./translations */)
+  .component('pciProjectCreating', component);
 
 export default moduleName;

packages/manager/modules/pci/src/projects/project/creating/creating.routing.js

@@ -1,9 +1,11 @@
-import template from './creating.html';
-
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider
     .state('pci.projects.project.creating', {
       url: '/creating',
-      template,
+      component: 'pciProjectCreating',
+      resolve: {
+        breadcrumb: () => null,
+        onProjectCreated: /* @ngInject */ $state => () => $state.go('^'),
+      },
     });
 };

packages/manager/modules/pci/src/projects/project/project.module.js

@@ -8,6 +8,7 @@ import 'ovh-ui-angular';
 
 import billing from './billing';
 import contacts from './contacts';
+import creating from './creating';
 import edit from './edit';
 import failoverIps from './failover-ips';
 import instances from './instances';
@@ -26,6 +27,7 @@ angular
   .module(moduleName, [
     billing,
     contacts,
+    creating,
     edit,
     failoverIps,
     instances,

packages/manager/modules/pci/src/projects/project/project.routing.js

@@ -16,6 +16,17 @@ export default /* @ngInject */ ($stateProvider) => {
         format: 'json',
         value: ['.'],
       },
+      redirectTo: ($transitions) => {
+        const projectPromise = $transitions.injector().getAsync('project');
+        return projectPromise
+          .then((project) => {
+            if (project.status === 'creating') {
+              return 'pci.projects.project.creating';
+            }
+
+            return null;
+          });
+      },
       resolve: {
         projectId: /* @ngInject */  $transition$ => $transition$.params().projectId,
         project: /* @ngInject */ (OvhApiCloudProject, $transition$) => OvhApiCloudProject