Refactor groups component: update tour steps, improve button layout, and enhance translation keys

ogWebconsole/src/app/components/groups/groups.component.html

@@ -1,25 +1,27 @@
 <div class="groups-container">
   <!-- HEADER -->
-  <div class="header-container" joyrideStep="tabsStep" text="{{ 'tabsStepText' | translate }}">
-    <button mat-icon-button color="primary" (click)="iniciarTour()">
+  <div class="header-container">
+    <button mat-icon-button color="primary" (click)="initTour()">
       <mat-icon>help</mat-icon>
     </button>
     <div class="header-container-title">
-      <h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
+      <h2 joyrideStep="groupsTitleStep" text="{{ 'groupsTitleStepText' | translate }}">
         {{ 'adminGroupsTitle' | translate }}
       </h2>
     </div>
-    <div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
-      <button class="action-button" (click)="addOU($event)"
-        matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
-        {{ 'newOrganizationalUnitButton' | translate }}
-      </button>
-      <button class="action-button" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate }}</button>
-      <mat-menu #menuClients="matMenu">
-        <button mat-menu-item (click)="addClient($event)">{{ 'newSingleClientButton' | translate }}</button>
-        <button mat-menu-item (click)="addMultipleClients($event)">{{ 'newMultipleClientButton' | translate }}</button>
-      </mat-menu>
-
+    <div class="groups-button-row">
+      <div joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}" style="display: flex; gap: 15px;">
+        <button class="action-button" (click)="addOU($event)"
+          matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
+          {{ 'newOrganizationalUnitButton' | translate }}
+        </button>
+        <button class="action-button" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate }}</button>
+        <mat-menu #menuClients="matMenu">
+          <button mat-menu-item (click)="addClient($event)">{{ 'newSingleClientButton' | translate }}</button>
+          <button mat-menu-item (click)="addMultipleClients($event)">{{ 'newMultipleClientButton' | translate
+            }}</button>
+        </mat-menu>
+      </div>
       <button class="ordinary-button" (click)="openBottomSheet()" joyrideStep="keyStep"
         text="{{ 'keyStepText' | translate }}" matTooltipShowDelay="1000">
         {{ 'legendButton' | translate }}
@@ -81,7 +83,7 @@
               </button>
             </mat-form-field>
             <mat-form-field class="form-field search-select" appearance="outline">
-              <mat-select placeholder="Buscar por estado..." #clientSearchStatusInput
+              <mat-select placeholder="{{ 'searchState' | translate }}" #clientSearchStatusInput
                 (selectionChange)="onClientFilterStatusInput($event.value)">
                 <mat-option *ngFor="let option of status" [value]="option.value">
                   {{ option.name }}
@@ -116,7 +118,7 @@
         </div>
 
         <!-- Tree -->
-        <div class="tree-container">
+        <div class="tree-container" joyrideStep="treePanelStep" text="{{ 'treePanelStepText' | translate }}">
           <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl">
             <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
               *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick($event, node)">
@@ -222,16 +224,18 @@
             <strong>{{ selectedNode?.name }}</strong>
           </span>
           <div class="view-type-container">
-            <app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
-              [buttonText]="'Ejecutar comandos'" [disabled]="selection.selected.length === 0"
-              [runScriptContext]="getRunScriptContext(selection.selected)"></app-execute-command>
+            <div joyrideStep="executeCommandStep" text="{{ 'executeCommandStepText' | translate }}">
+              <app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
+                [buttonText]="'ejecutarComandos' | translate" [disabled]="selection.selected.length === 0"
+                [runScriptContext]="getRunScriptContext(selection.selected)"></app-execute-command>
+            </div>
             <mat-button-toggle-group name="viewType" aria-label="View Type" [hideSingleSelectionIndicator]="true"
-              (change)="toggleView($event.value)">
+              (change)="toggleView($event.value)" joyrideStep="tabsStep" text="{{ 'tabsStepText' | translate }}">
               <mat-button-toggle value="list" [disabled]="currentView === 'list'">
-                <mat-icon>list</mat-icon> <span class="type-view-text">{{ 'Vista Lista' | translate }}</span>
+                <mat-icon>list</mat-icon> <span class="type-view-text">{{ 'vistalista' | translate }}</span>
               </mat-button-toggle>
               <mat-button-toggle value="card" [disabled]="currentView === 'card'">
-                <mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'Vista Tarjeta' | translate }}</span>
+                <mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'vistatarjeta' | translate }}</span>
               </mat-button-toggle>
             </mat-button-toggle-group>
           </div>
@@ -240,7 +244,8 @@
         <app-loading [isLoading]="isLoadingClients"></app-loading>
 
         <!-- CLIENTS VIEWS-->
-        <div class="clients-view" *ngIf="!isLoadingClients">
+        <div class="clients-view" *ngIf="!isLoadingClients" joyrideStep="clientsViewStep"
+          text="{{ 'clientsViewStepText' | translate }}">
           <div *ngIf="hasClients; else noClientsTemplate">
 
             <!-- Cards view -->

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -635,9 +635,9 @@ export class GroupsComponent implements OnInit, OnDestroy {
   }
 
 
-  iniciarTour(): void {
+  initTour(): void {
     this.joyrideService.startTour({
-      steps: ['groupsTitleStepText', 'filtersPanelStep', 'addStep', 'keyStep', 'tabsStep'],
+      steps: ['groupsTitleStep', 'filtersPanelStep', 'treePanelStep', 'addStep', 'keyStep', 'executeCommandStep', 'tabsStep', 'clientsViewStep'],
       showPrevButton: true,
       themeColor: '#3f51b5',
     });

ogWebconsole/src/locale/en.json

@@ -52,7 +52,7 @@
   "checkboxUserRole": "User",
   "groupsTitleStepText": "On this screen, you can manage the main organizational units (Faculties, Classrooms, Classroom Groups, and clients).",
   "titleStepText": "On this screen, you can manage the calendars of remote teams connected to the UDS service",
-  "groupsAddStepText": "Click to add a new organizational unit or client.",
+  "groupsAddStepText": "Click to add a new organizational unit or clients.",
   "adminCalendarsTitle": "Manage calendars",
   "addButtonStepText": "Click here to add a new calendar.",
   "addCalendar": "Add calendar",
@@ -163,6 +163,7 @@
   "cancelButton": "Cancel",
   "saveButton": "Save",
   "generalTabLabel": "General",
+  "executeCommandStepText": "Set of actions to be performed on a selection of clients or an organizational unit.",
   "tabsStepText": "Use the tabs to access different viewing and search options for organizational units and clients.",
   "adminGroupsTitle": "Manage groups",
   "newOrganizationalUnitTooltip": "Open modal to create organizational units of any type (Center, Classroom, Classroom Group, or Client Group)",
@@ -428,7 +429,7 @@
   "ogLive": "ogLive",
   "TOOLTIP_PXE_IMAGES": "View available PXE boot images",
   "pxeTemplates": "PXE Templates",
-  "pxeTemplate": "Plantilla",
+  "pxeTemplate": "Template",
   "TOOLTIP_PXE_TEMPLATES": "Manage PXE boot templates",
   "pxeBootFiles": "PXE Boot Files",
   "TOOLTIP_PXE_BOOT_FILES": "Configure PXE boot files",
@@ -476,7 +477,8 @@
   "subnet": "Subnet",
   "parent": "Parent",
   "adminUsersTitle": "Manage users",
-  "filtersPanelStepText": "Use these filters to search or load configurations.",
+  "filtersPanelStepText": "Use these filters to search by clients, organizational units or states.",
+  "treePanelStepText": "In this organizational units tree you will be able to see the different hierarchical structures as well as to perform actions on each of them.",
   "organizationalUnitsStepText": "List of Organizational Units. Click on one to view details.",
   "defaultMenuLabel": "Main menu",
   "noClients": "No clients",
@@ -487,5 +489,10 @@
   "usedPercentageLabel": "Used",
   "errorLoadingData": "Error fetching data. Service not available",
   "repositoryTitleStep": "On this screen you can manage image repositories.",
-  "partitions": "Particiones"
-}
+  "partitions": "Particiones",
+  "clientsViewStepText": "Display of the selected organizational unit's clients",
+  "vistalista": "List View",
+  "vistatarjeta": "Card View",
+  "ejecutarComandos": "Execute Commands",
+  "searchState": "Search state"
+}

ogWebconsole/src/locale/es.json

@@ -164,7 +164,8 @@
   "cancelButton": "Cancelar",
   "saveButton": "Guardar",
   "generalTabLabel": "General",
-  "tabsStepText": "Utiliza las pestañás para acceder a las diferentes opciones de visualización y busqueda de unidades organizativas y clientes.",
+  "executeCommandStepText": "Conjunto de acciones a ejecutar sobre una selección de clientes o unidad organizativa",
+  "tabsStepText": "Utiliza las pestañas para acceder a las diferentes opciones de visualización y busqueda de unidades organizativas y clientes.",
   "adminGroupsTitle": "Administrar grupos",
   "newOrganizationalUnitTooltip": "Abrir modal para crear unidades organizativas de cualquier tipo (Centro, Aula, Grupo de aulas o Grupo de clientes)",
   "newOrganizationalUnitButton": "Nueva Unidad Organizativa",
@@ -478,7 +479,8 @@
   "subnet": "Subred",
   "parent": "Padre",
   "adminUsersTitle": "Administrar usuarios",
-  "filtersPanelStepText": "Utiliza estos filtros para buscar o cargar configuraciones.",
+  "filtersPanelStepText": "Utiliza estos filtros para buscar por clientes, unidades organizativas o estados.",
+  "treePanelStepText": "En este árbol de unidades organizativas podrás ver las diferentes estructuras jerárquicas además de poder realizar acciones sobre cada una de ellas",
   "organizationalUnitsStepText": "Lista de Unidades Organizacionales. Haz clic en una para ver detalles.",
   "defaultMenuLabel": "Menú por defecto",
   "noClients": "No hay clientes",
@@ -489,5 +491,10 @@
   "usedPercentageLabel": "Usado",
   "errorLoadingData": "Error al cargar los datos. Servicio inactivo",
   "repositoryTitleStep": "En esta pantalla se pueden gestionar los repositorios de imágenes.",
-  "partitions": "Particiones"
-}
+  "partitions": "Particiones",
+  "clientsViewStepText": "Visualización de los clientes de la unidad organizativa seleccionada",
+  "vistalista": "Vista Lista",
+  "vistatarjeta": "Vista Tarjeta",
+  "ejecutarComandos": "Ejecutar Comandos",
+  "searchState": "Buscar por estado"
+}