fix(pci): scroll top at object page init (#9667)

ref: DTRSD-94224

Signed-off-by: Quentin Pavy <[email protected]>

packages/components/ng-ovh-utils/src/index.js

@@ -30,6 +30,7 @@ import tooltipBox from './tooltipBox/tooltipBox';
 import triStateCheckbox from './triStateCheckbox/triStateCheckbox';
 import wizard from './wizard/wizard';
 import wizardForm from './wizardForm/wizardForm';
+import scroll from './scroll/scroll';
 
 const moduleName = 'ngOvhUtils';
 
@@ -43,6 +44,7 @@ angular.module(moduleName, [
   poll,
   popover,
   price,
+  scroll,
   storage,
   tooltipBox,
   triStateCheckbox,

packages/components/ng-ovh-utils/src/scroll/scroll-directive.js

@@ -0,0 +1,8 @@
+export default /* @ngInject */ function scrollTopDirective(ScrollService) {
+  return {
+    restrict: 'A',
+    link() {
+      ScrollService.scrollTop();
+    },
+  };
+}

packages/components/ng-ovh-utils/src/scroll/scroll-service.js

@@ -0,0 +1,36 @@
+/**
+ * @type service
+ * @name ovhServices:ScrollService
+ * @description
+ * Provide scroll methods
+ * @example
+ * # Usage
+ * <code:js>
+ * export default class PciStoragesContainersContainerController {
+ *  */ /* @ngInject */ /*
+ *  constructor(ScrollService) {
+ *    this.ScrollService = ScrollService
+ *  }
+ *
+ *  $onInit() {
+ *    ScrollService.scrollTop();
+ *  };
+ *};
+ *
+ * </code>
+ */
+export default /* @ngInject */ function scrollService(
+  $document,
+  $timeout,
+  $anchorScroll,
+) {
+  this.scrollTop = function scrollTop() {
+    $document[0].body.style.setProperty('height', 'auto', 'important');
+    $document[0].body.style.setProperty('overflow', 'auto');
+    $anchorScroll();
+    $timeout(function() {
+      $document[0].body.style.removeProperty('height');
+      $document[0].body.style.removeProperty('overflow');
+    });
+  };
+}

packages/components/ng-ovh-utils/src/scroll/scroll.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+import scrollService from './scroll-service';
+import scrollTopDirective from './scroll-directive';
+
+const moduleName = 'ua.scroll';
+
+angular
+  .module(moduleName, ['ui.router'])
+  .service('ScrollService', scrollService)
+  .directive('ovhScrollTop', scrollTopDirective);
+
+export default moduleName;

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

@@ -25,10 +25,7 @@
             data-ng-controller="PublicCloudController as $ctrl"
         >
             <div class="d-flex w-100 h-100 position-relative">
-                <div
-                    class="w-100 h-100 position-absolute"
-                    style="top: 0; left: 0;"
-                >
+                <div class="w-100 h-100" style="top: 0; left: 0;">
                     <div class="h-100 w-100" data-ui-view></div>
                 </div>
             </div>

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

@@ -8,6 +8,7 @@ import '@ovh-ux/ui-kit';
 import ovhManagerAdvices from '@ovh-ux/manager-advices';
 import trustedNic from '@ovh-ux/manager-trusted-nic';
 
+import ngOvhUtils from '@ovh-ux/ng-ovh-utils';
 import billing from './billing';
 import contacts from './contacts';
 import creating from './creating';
@@ -68,6 +69,7 @@ angular
     quotaExceedError,
     regions,
     privateRegistry,
+    ngOvhUtils,
     'oui',
     'ovhManagerCore',
     'ovh-api-services',

packages/manager/modules/pci/src/projects/project/storages/containers/container/container.html

@@ -1,4 +1,4 @@
-<div data-ui-view>
+<div data-ui-view ovh-scroll-top>
     <oui-header
         heading="{{ :: $ctrl.container.name }}"
         data-ng-if="$ctrl.archive"