fix(sidebar): add translations and right state in list of projects

Author: jleveugle

packages/manager/apps/public-cloud/src/sidebar/project-list/project-list.controller.js

@@ -1,12 +1,26 @@
 export default class ProjectListController {
   /* @ngInject */
-  constructor(publicCloud, iceberg) {
+  constructor($injector, $q, $translate, publicCloud, iceberg) {
+    this.$injector = $injector;
+    this.$q = $q;
+    this.$translate = $translate;
     this.publicCloud = publicCloud;
     this.iceberg = iceberg;
   }
 
   $onInit() {
     this.getProjects();
+    this.getTranslations();
+  }
+
+  getTranslations() {
+    this.isLoadingTranslations = true;
+
+    return this.$injector.invoke(/* @ngTranslationsInject:json ./translations */)
+      .then(() => this.$translate.refresh())
+      .finally(() => {
+        this.isLoadingTranslations = false;
+      });
   }
 
   getProjects() {

packages/manager/apps/public-cloud/src/sidebar/project-list/project-list.html

@@ -1,22 +1,23 @@
-<div>
+<div data-ng-if="!$ctrl.isLoadingTranslations">
     <a class="btn btn-primary py-1 px-2"
        data-ui-sref="pci.projects.new"
-       style="background-color: rgb(40, 89, 192); color: #fff;">
-        Create new project
+       style="background-color: rgb(40, 89, 192); color: #fff;"
+       data-translate="cloud_sidebar_projectlist_create_project"
+    >
     </a>
     <div data-ng-if="$ctrl.isLoading" class="d-flex mt-4">
-        <span class="mr-3" style="font-size: 0.8rem;">Chargement de la liste de vos&nbsp;projets</span>
+        <span class="mr-3" style="font-size: 0.8rem;" data-translate="cloud_sidebar_projectlist_loading_projects"></span>
         <oui-spinner class="my-auto ml-auto" size="s"></oui-spinner>
     </div>
     <div data-ng-if="!$ctrl.isLoading">
         <div class="d-flex" data-ng-if="$ctrl.err">
-            <span class="mr-3" style="font-size: 0.8rem;">Une erreur est survenue lors de la récupération de la liste de projets ({{ ::$ctrl.err.statusText }})</span>
+            <span class="mr-3" style="font-size: 0.8rem;" data-translate="cloud_sidebar_projectlist_error" data-translate-params="{ err: $ctrl.err.statusText }"></span>
             <button type="button" class="p-0 my-auto">
                 <i class="fas fa-sync"></i>
             </button>
         </div>
         <div class="mt-3" data-ng-if="$ctrl.projects && $ctrl.projects.length > 0">
-            <strong class="text-white">Mes projets&nbsp;:</strong>
+            <strong class="text-white" data-translate="cloud_sidebar_projectlist_title"></strong>
             <ul class="list-unstyled mt-2 mb-5">
                 <li data-ng-repeat="project in $ctrl.projects track by $index">
                     <a ui-sref="pci.projects.project({ projectId: project.project_id })" class="d-flex text-white">

packages/manager/apps/public-cloud/src/sidebar/project-list/translations/Messages_fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "cloud_sidebar_projectlist_create_project": "Créer un nouveau projet",
+  "cloud_sidebar_projectlist_loading_projects": "Chargement de la liste de vos projets",
+  "cloud_sidebar_projectlist_error": "Une erreur est survenue lors de la récupération de la liste de projets ({{ err }})",
+  "cloud_sidebar_projectlist_title": "Mes projets :"
+}