From 811631e4981fdd1ce3a848abf51de97341248466 Mon Sep 17 00:00:00 2001
From: qpavy <contact@quentinpavy.com>
Date: Fri, 11 Aug 2023 15:23:01 +0200
Subject: [PATCH] fix(pci): scroll top at object page init (#9667)

ref: DTRSD-94224

Signed-off-by: Quentin Pavy <contact@quentinpavy.com>
---
 packages/components/ng-ovh-utils/src/index.js |  2 ++
 .../src/scroll/scroll-directive.js            |  8 +++++
 .../ng-ovh-utils/src/scroll/scroll-service.js | 36 +++++++++++++++++++
 .../ng-ovh-utils/src/scroll/scroll.js         | 12 +++++++
 .../manager/apps/public-cloud/src/index.html  |  5 +--
 .../src/projects/project/project.module.js    |  2 ++
 .../containers/container/container.html       |  2 +-
 7 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/ng-ovh-utils/src/scroll/scroll-directive.js
 create mode 100644 packages/components/ng-ovh-utils/src/scroll/scroll-service.js
 create mode 100644 packages/components/ng-ovh-utils/src/scroll/scroll.js

diff --git a/packages/components/ng-ovh-utils/src/index.js b/packages/components/ng-ovh-utils/src/index.js
index 7b923ac082a5..04624a030132 100644
--- a/packages/components/ng-ovh-utils/src/index.js
+++ b/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,
diff --git a/packages/components/ng-ovh-utils/src/scroll/scroll-directive.js b/packages/components/ng-ovh-utils/src/scroll/scroll-directive.js
new file mode 100644
index 000000000000..0e15ec54f74f
--- /dev/null
+++ b/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();
+    },
+  };
+}
diff --git a/packages/components/ng-ovh-utils/src/scroll/scroll-service.js b/packages/components/ng-ovh-utils/src/scroll/scroll-service.js
new file mode 100644
index 000000000000..cc436eec91e9
--- /dev/null
+++ b/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');
+    });
+  };
+}
diff --git a/packages/components/ng-ovh-utils/src/scroll/scroll.js b/packages/components/ng-ovh-utils/src/scroll/scroll.js
new file mode 100644
index 000000000000..27e894f62493
--- /dev/null
+++ b/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;
diff --git a/packages/manager/apps/public-cloud/src/index.html b/packages/manager/apps/public-cloud/src/index.html
index 46c013f66d3b..148e970febc3 100644
--- a/packages/manager/apps/public-cloud/src/index.html
+++ b/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>
diff --git a/packages/manager/modules/pci/src/projects/project/project.module.js b/packages/manager/modules/pci/src/projects/project/project.module.js
index bbb31ac149cb..098b8983bee4 100644
--- a/packages/manager/modules/pci/src/projects/project/project.module.js
+++ b/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',
diff --git a/packages/manager/modules/pci/src/projects/project/storages/containers/container/container.html b/packages/manager/modules/pci/src/projects/project/storages/containers/container/container.html
index 537914efae70..f20bcb2342e3 100644
--- a/packages/manager/modules/pci/src/projects/project/storages/containers/container/container.html
+++ b/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"