Revert "feat(hub): delete a warning pop up on manager dashboard (#12061…

…)"

This reverts commit 76da253.

packages/manager/apps/hub/src/dashboard/dashboard.html

@@ -10,6 +10,10 @@
                 class="mb-4"
                 tracker="{{ $ctrl.prefix + '::event-banner' }}"
             ></ovh-manager-banner>
+            <ovh-manager-hub-carousel
+                class="w-100"
+                tracking-prefix="{{ $ctrl.prefix }}"
+            ></ovh-manager-hub-carousel>
         </div>
         <oui-message
             data-type="info"

packages/manager/modules/hub/src/components/carousel/carousel.component.js

@@ -0,0 +1,12 @@
+import controller from './carousel.controller';
+import template from './carousel.html';
+
+export default {
+  bindings: {
+    trackingPrefix: '@',
+    productType: '<',
+    items: '<',
+  },
+  controller,
+  template,
+};

packages/manager/modules/hub/src/components/carousel/carousel.controller.js

@@ -0,0 +1,64 @@
+import { map, filter } from 'lodash-es';
+
+export default class {
+  /* @ngInject */
+  constructor($q, $http, $translate, atInternet) {
+    this.atInternet = atInternet;
+    this.index = 0;
+    this.$http = $http;
+    this.$q = $q;
+    this.$translate = $translate;
+  }
+
+  $onInit() {
+    if (!this.items) {
+      this.$http
+        .get('/hub/notifications', {
+          serviceType: 'aapi',
+        })
+        .then((data) => {
+          this.items = this.filterNotifications(
+            data.data.data.notifications.data,
+          );
+        });
+    }
+  }
+
+  nextAlert() {
+    if (this.index === this.items.length - 1) {
+      this.index = 0;
+    } else {
+      this.index += 1;
+    }
+
+    this.atInternet.trackClick({
+      name: `${this.trackingPrefix}::alert::action`,
+      type: 'action',
+    });
+  }
+
+  filterNotifications(notificationsData, productType) {
+    const mappedNotifications = map(
+      filter(notificationsData, (notification) => {
+        return ['warning', 'error'].includes(notification.level);
+      }),
+      (notification) => ({
+        ...notification,
+        // force sanitization to null as this causes issues with UTF-8 characters
+        description: this.$translate.instant(
+          'manager_hub_notification_warning',
+          { content: notification.description },
+          undefined,
+          false,
+          null,
+        ),
+      }),
+    );
+
+    return mappedNotifications.filter(({ type }) => type === productType);
+  }
+
+  switchToAlert(index) {
+    this.index = index;
+  }
+}

packages/manager/modules/hub/src/components/carousel/carousel.html

@@ -0,0 +1,51 @@
+<div
+    data-ng-repeat="item in $ctrl.items track by $index"
+    role="alert"
+    class="oui-message oui-message_error"
+    data-ng-if="$index === $ctrl.index"
+    data-navi-id="alert-message-block"
+>
+    <span
+        class="oui-message__icon oui-icon oui-icon-warning"
+        aria-hidden="true"
+    ></span>
+    <div class="oui-message__body">
+        <a
+            data-ng-if="item.urlDetails"
+            data-ng-href="{{ item.urlDetails.href }}"
+            data-ng-bind-html="item.description"
+            target="_top"
+        >
+        </a>
+        <span
+            data-ng-if="!item.urlDetails"
+            data-ng-bind-html="item.description"
+        ></span>
+    </div>
+    <div class="oui-message__bullets" data-ng-if="$ctrl.items.length > 1">
+        <button
+            type="button"
+            data-ng-repeat="el in $ctrl.items track by $index"
+            class="circular-tile"
+            data-ng-class="{
+                    'circular-tile_active' : $index === $ctrl.index
+                }"
+            data-ng-click="$ctrl.switchToAlert($index)"
+        ></button>
+    </div>
+    <button
+        class="oui-message__next oui-button oui-button_s"
+        type="button"
+        data-ng-if="$ctrl.items.length > 1"
+    >
+        <span
+            class="oui-icon oui-icon-arrow-right"
+            aria-hidden="true"
+            data-ng-click="$ctrl.nextAlert()"
+        ></span>
+        <span
+            class="sr-only"
+            data-translate="manager_hub_carousel_see_next"
+        ></span>
+    </button>
+</div>

packages/manager/modules/hub/src/components/carousel/carousel.scss

@@ -0,0 +1,49 @@
+ovh-manager-hub-carousel {
+  @import '@ovh-ux/ui-kit/dist/scss/_tokens';
+
+  .oui-message {
+    padding: 1rem 3rem;
+
+    &__next {
+      position: absolute;
+      top: 50%;
+      right: 0.5rem;
+      margin-top: -1rem;
+
+      .oui-icon {
+        font-size: 1.5rem;
+      }
+    }
+
+    &__bullets {
+      text-align: center;
+    }
+
+    &__body {
+      font-weight: 600;
+    }
+  }
+
+  a.oui-message__body {
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration-color: $ae-500;
+      color: $ae-500;
+    }
+  }
+
+  .circular-tile {
+    display: inline-block;
+    margin: 0.25rem;
+    border-radius: 0.625rem;
+    background-color: $p-000-white;
+    padding: 0.1875rem;
+    border: $ae-500;
+    cursor: pointer;
+
+    &_active {
+      background-color: $ae-500;
+    }
+  }
+}

packages/manager/modules/hub/src/components/carousel/index.js

@@ -0,0 +1,21 @@
+import angular from 'angular';
+import 'angular-translate';
+import '@ovh-ux/ng-at-internet';
+
+import carousel from './carousel.component';
+
+import './carousel.scss';
+
+const moduleName = 'ovhManagerHubCarouselComponent';
+
+angular
+  .module(moduleName, [
+    'oui',
+    'ngAtInternet',
+    'ngTranslateAsyncLoader',
+    'pascalprecht.translate',
+  ])
+  .component('ovhManagerHubCarousel', carousel)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/hub/src/components/carousel/translations/Messages_de_DE.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "Nächstes Element anzeigen"
+}

packages/manager/modules/hub/src/components/carousel/translations/Messages_en_GB.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "See next element"
+}

packages/manager/modules/hub/src/components/carousel/translations/Messages_es_ES.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "Ver el siguiente elemento"
+}

packages/manager/modules/hub/src/components/carousel/translations/Messages_fr_CA.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "Voir l'élément suivant"
+}

packages/manager/modules/hub/src/components/carousel/translations/Messages_fr_FR.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "Voir l'élément suivant"
+}

packages/manager/modules/hub/src/components/carousel/translations/Messages_it_IT.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "Visualizza l’elemento successivo"
+}

packages/manager/modules/hub/src/components/carousel/translations/Messages_pl_PL.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "Wyświetl kolejny element"
+}

packages/manager/modules/hub/src/components/carousel/translations/Messages_pt_PT.json

@@ -0,0 +1,3 @@
+{
+  "manager_hub_carousel_see_next": "Ver o elemento seguinte"
+}

packages/manager/modules/hub/src/index.js

@@ -6,6 +6,7 @@ import '@uirouter/angularjs';
 import 'angular-translate';
 
 import billingSummary from './components/billing-summary';
+import ovhManagerHubCarousel from './components/carousel';
 import ovhManagerHubCatalogItems from './components/catalog-items';
 import ovhManagerHubEnterpriseBillingSummary from './components/enterprise-billing-summary';
 import ovhManagerHubOrderTracking from './components/order-tracking';
@@ -22,6 +23,7 @@ angular.module(moduleName, [
   'ovhManagerCore',
   'pascalprecht.translate',
   'ui.router',
+  ovhManagerHubCarousel,
   ovhManagerHubCatalogItems,
   ovhManagerHubEnterpriseBillingSummary,
   ovhManagerHubOrderTracking,