feat: allow to search project (#737)

ref: MANAGER-2716

Author: marie-j

packages/manager/apps/public-cloud/src/assets/theme/_sidebar.less

@@ -57,6 +57,12 @@ cloud-sidebar { /* stylelint-disable-line */
       left: 0;
     }
 
+    .oui-input-group {
+      .oui-button {
+        right: 0;
+      }
+    }
+
     oui-clipboard { /* stylelint-disable-line */
       .oui-clipboard__control,
       .oui-clipboard__button {

packages/manager/modules/pci/src/projects/project/sidebar/project-list/project-list.html

@@ -19,8 +19,16 @@
         </div>
         <div class="mt-3" data-ng-if="$ctrl.projects && $ctrl.projects.length > 0">
             <strong class="text-white" data-translate="cloud_sidebar_projectlist_title"></strong>
+            <div class="oui-search mt-2">
+                <div class="oui-input-group oui-input-group_search">
+                    <input type="text" class="oui-input pr-4" data-ng-model="$ctrl.searchText" placeholder="{{:: 'cloud_sidebar_projectlist_title_search' | translate }}">
+                    <button class="oui-button" type="button">
+                        <span class="oui-icon oui-icon-search_extra-thin" aria-hidden="true"></span>
+                    </button>
+                </div>
+            </div>
             <ul class="list-unstyled mt-2 mb-5">
-                <li data-ng-repeat="project in $ctrl.projects track by $index">
+                <li data-ng-repeat="project in $ctrl.projects | filter:$ctrl.searchText track by $index">
                     <a ui-sref="pci.projects.project({ projectId: project.project_id })" class="d-flex text-white">
                         <span class="text-truncate" data-ng-bind="project.description"></span>
                         <span class="text-white ml-auto my-auto oui-icon oui-icon-chevron-right" style="font-size: 0.8rem;"></span>

packages/manager/modules/pci/src/projects/project/sidebar/project-list/translations/Messages_fr_FR.json

@@ -2,5 +2,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 :"
+  "cloud_sidebar_projectlist_title": "Mes projets",
+  "cloud_sidebar_projectlist_title_search": "Rechercher un projet"
 }