fix(signage-manager): keep group selection and lists stable

apps/signage-manager/USER_STORIES.md

@@ -311,10 +311,11 @@ These stories cover the current app workflows:
 
 **Acceptance Criteria:**
 
-- The groups page is available only when the user can manage signage groups.
+- The groups page is available only when the user can manage signage groups. Other users who open its address go to the media library.
 - Manageable groups appear in a searchable tree.
-- Expanding a group loads and shows child groups.
-- Selecting a group opens its users and zones panels.
+- Expanding a group shows its child groups.
+- Selecting a group opens its users and zones panels. On mobile, the back button returns to the group list.
+- After a save, the selected group and the expanded groups stay as they were, also when the group list cannot load again. When the group list cannot load at all, the page shows an error.
 - Users with manage-all-groups permission can create a new group.
 - Selected groups can be edited or removed.
 
@@ -329,7 +330,7 @@ These stories cover the current app workflows:
 **Acceptance Criteria:**
 
 - The users panel lists assigned users with name, email, and permission labels.
-- Users can add a user not already assigned to the group. The user gets the default permissions of the group.
+- Users can add a user not already assigned to the group. The user gets the default permissions of the group. The user search shows a loading state, and an error when the search fails.
 - Users can edit an assigned user's signage permissions.
 - Users can remove an assigned user from the group.
 - Empty state appears when no users are assigned.

apps/signage-manager/src/app/app.config.ts

@@ -19,7 +19,7 @@ import {
     UnauthorisedComponent,
 } from '@placeos/components';
 import { environment } from '../environments/environment';
-import { signageAccessGuard } from './signage-access.guard';
+import { manageGroupsGuard, signageAccessGuard } from './signage-access.guard';
 import { templatesEnabledGuard } from './templates-enabled.guard';
 import { templateUnsavedGuard } from './templates/template-unsaved.guard';
 
@@ -121,6 +121,7 @@ const APP_ROUTES: Routes = [
             { path: 'branding', redirectTo: 'manage/branding' },
             {
                 path: 'groups',
+                canActivate: [manageGroupsGuard],
                 loadComponent: () =>
                     import('./groups/groups.component').then(
                         (m) => m.GroupsSectionComponent,

apps/signage-manager/src/app/groups/signage-group-access-modal.component.ts

@@ -28,9 +28,9 @@ import { PlaceGroup, PlaceGroupAdMappings } from '@placeos/ts-client';
 import { adGroupKey } from '../signage-group-access';
 import { dialogClosed } from '../signage-service.util';
 import { SignageGroupAdminService } from './signage-group-admin.service';
+import { SignageGroupPermissionLabelsComponent } from './signage-group-permission-labels.component';
 import {
     GROUP_PERMISSION_FLAGS,
-    groupPermissionLabels,
     SignageGroupPermissionsModalComponent,
 } from './signage-group-permissions-modal.component';
 
@@ -133,26 +133,9 @@ interface AdGroupRow {
                                         <div
                                             class="text-base-content/70 mt-1 truncate text-xs"
                                         >
-                                            @let labels =
-                                                permissionLabels(
-                                                    row.permissions
-                                                );
-                                            @if (labels.length) {
-                                                @for (
-                                                    label of labels;
-                                                    track label
-                                                ) {
-                                                    {{ label | translate }}
-                                                    @if (!$last) {
-                                                        ,
-                                                    }
-                                                }
-                                            } @else {
-                                                <span class="italic">{{
-                                                    'SIGNAGE_MANAGER.DEFAULT_PERMISSIONS'
-                                                        | translate
-                                                }}</span>
-                                            }
+                                            <signage-group-permission-labels
+                                                [permissions]="row.permissions"
+                                            />
                                         </div>
                                     </div>
                                     <button
@@ -352,6 +335,7 @@ interface AdGroupRow {
         MatTooltipModule,
         SettingsToggleComponent,
         TranslatePipe,
+        SignageGroupPermissionLabelsComponent,
     ],
 })
 export class SignageGroupAccessModalComponent {
@@ -363,7 +347,6 @@ export class SignageGroupAccessModalComponent {
 
     public readonly group = this._data.group;
     public readonly permissions = GROUP_PERMISSION_FLAGS;
-    public readonly permissionLabels = groupPermissionLabels;
     public readonly loaded = signal(false);
     public readonly saving = signal(false);
     public readonly default_permissions = signal(0);
@@ -477,17 +460,13 @@ export class SignageGroupAccessModalComponent {
         if (this.saving() || !this.loaded()) return;
         this.saving.set(true);
         this._dialog_ref.disableClose = true;
-        try {
-            const result = await this._group_admin.saveGroupAccess(this.group, {
-                default_permissions: this.default_permissions(),
-                ad_group_mappings: this.mappings(),
-            });
-            this._dialog_ref.disableClose = false;
-            if (result) this._dialog_ref.close(result);
-            else this.saving.set(false);
-        } catch {
-            this._dialog_ref.disableClose = false;
-            this.saving.set(false);
-        }
+        // The service shows the error and returns null when it fails
+        const result = await this._group_admin.saveGroupAccess(this.group, {
+            default_permissions: this.default_permissions(),
+            ad_group_mappings: this.mappings(),
+        });
+        this._dialog_ref.disableClose = false;
+        if (result) this._dialog_ref.close(result);
+        else this.saving.set(false);
     }
 }