feat(console): change default organization (#5151)

Adds the possibility to change the default organization from the organization overview

console/src/app/modules/org-table/org-table.component.html

@@ -52,7 +52,12 @@
       <th mat-header-cell *matHeaderCellDef>
         {{ 'ORG.PAGES.NAME' | translate }}
       </th>
-      <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">{{ org.name }}</td>
+      <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
+        <span>{{ org.name }}</span
+        ><span *ngIf="defaultOrgId === org.id" class="state orgdefaultlabel">{{
+          'ORG.PAGES.DEFAULTLABEL' | translate
+        }}</span>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="state">
@@ -88,6 +93,17 @@
       </td>
     </ng-container>
 
+    <ng-container matColumnDef="actions" stickyEnd>
+      <th mat-header-cell *matHeaderCellDef class="user-tr-actions"></th>
+      <td mat-cell *matCellDef="let org" class="user-tr-actions">
+        <cnsl-table-actions [hasActions]="true">
+          <button menuActions mat-menu-item (click)="setDefaultOrg(org)" data-e2e="set-default-button">
+            {{ 'ORG.PAGES.SETASDEFAULT' | translate }}
+          </button>
+        </cnsl-table-actions>
+      </td>
+    </ng-container>
+
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>

console/src/app/modules/org-table/org-table.component.scss

@@ -9,6 +9,10 @@ td {
     }
   }
 
+  .orgdefaultlabel {
+    margin-left: 0.5rem;
+  }
+
   &:hover {
     .cpy-button {
       visibility: visible;

console/src/app/modules/org-table/org-table.component.ts

@@ -11,6 +11,8 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { PaginatorComponent } from '../paginator/paginator.component';
+import { AdminService } from 'src/app/services/admin.service';
+import { ManagementService } from 'src/app/services/mgmt.service';
 
 enum OrgListSearchKey {
   NAME = 'NAME',
@@ -30,7 +32,7 @@ export class OrgTableComponent {
   @ViewChild('input') public filter!: Input;
 
   public dataSource: MatTableDataSource<Org.AsObject> = new MatTableDataSource<Org.AsObject>([]);
-  public displayedColumns: string[] = ['name', 'state', 'primaryDomain', 'creationDate', 'changeDate'];
+  public displayedColumns: string[] = ['name', 'state', 'primaryDomain', 'creationDate', 'changeDate', 'actions'];
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
   public activeOrg!: Org.AsObject;
@@ -50,10 +52,13 @@ export class OrgTableComponent {
     offset: 0,
     queries: [],
   });
+  public defaultOrgId: string = '';
   private requestOrgsObservable$ = this.requestOrgs$.pipe(takeUntil(this.destroy$));
 
   constructor(
     private authService: GrpcAuthService,
+    private mgmtService: ManagementService,
+    private adminService: AdminService,
     private router: Router,
     private toast: ToastService,
     private _liveAnnouncer: LiveAnnouncer,
@@ -65,6 +70,10 @@ export class OrgTableComponent {
     this.requestOrgsObservable$.pipe(switchMap((req) => this.loadOrgs(req))).subscribe((orgs) => {
       this.dataSource = new MatTableDataSource<Org.AsObject>(orgs);
     });
+
+    this.mgmtService.getIAM().then((iam) => {
+      this.defaultOrgId = iam.defaultOrgId;
+    });
   }
 
   public loadOrgs(request: Request): Observable<Org.AsObject[]> {
@@ -111,6 +120,18 @@ export class OrgTableComponent {
     }
   }
 
+  public setDefaultOrg(org: Org.AsObject) {
+    this.adminService
+      .setDefaultOrg(org.id)
+      .then(() => {
+        this.toast.showInfo('ORG.PAGES.DEFAULTORGSET', true);
+        this.defaultOrgId = org.id;
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
+  }
+
   public applySearchQuery(searchQueries: OrgQuery[]): void {
     this.searchQueries = searchQueries;
     this.requestOrgs$.next({

console/src/app/modules/org-table/org-table.module.ts

@@ -20,6 +20,7 @@ import { InputModule } from '../input/input.module';
 import { PaginatorModule } from '../paginator/paginator.module';
 import { RefreshTableModule } from '../refresh-table/refresh-table.module';
 import { OrgTableComponent } from './org-table.component';
+import { TableActionsModule } from '../table-actions/table-actions.module';
 
 @NgModule({
   declarations: [OrgTableComponent],
@@ -33,6 +34,7 @@ import { OrgTableComponent } from './org-table.component';
     TimestampToDatePipeModule,
     LocalizedDatePipeModule,
     MatSortModule,
+    TableActionsModule,
     MatIconModule,
     PaginatorModule,
     HasRoleModule,