Merge pull request #36 from platform-mesh/fix/organization-managment

fix: fix empty organization bug

Author: Sobyt483

projects/wc/src/app/components/organization-management/organization-management.component.html

@@ -11,17 +11,17 @@
     <div class="organization-management-input">
       <ui5-select
         id="select-switch"
-        [value]="organizationToSwitch"
+        [value]="organizationToSwitch()"
         (input)="setOrganizationToSwitch($event)"
         (change)="setOrganizationToSwitch($event)"
       >
         @for (org of organizations(); track org) {
-          <ui5-option [value]="org" [selected]="org === organizationToSwitch">{{
+          <ui5-option [value]="org" [selected]="org === organizationToSwitch()">{{
             org
           }}</ui5-option>
         }
       </ui5-select>
-      <ui5-button design="Emphasized" (ui5Click)="switchOrganization()">{{
+      <ui5-button [disabled]="!organizationToSwitch()" design="Emphasized" (ui5Click)="switchOrganization()">{{
         texts.switchOrganization.button
       }}</ui5-button>
     </div>

projects/wc/src/app/components/organization-management/organization-management.component.spec.ts

@@ -121,7 +121,7 @@ describe('OrganizationManagementComponent', () => {
   it('should set organization to switch', () => {
     const event = { target: { value: 'testOrg' } };
     component.setOrganizationToSwitch(event);
-    expect(component.organizationToSwitch).toBe('testOrg');
+    expect(component.organizationToSwitch()).toBe('testOrg');
   });
 
   it('should onboard new organization successfully', () => {
@@ -141,7 +141,7 @@ describe('OrganizationManagementComponent', () => {
 
     expect(resourceServiceMock.create).toHaveBeenCalled();
     expect(component.organizations()).toEqual(['newOrg', 'existingOrg']);
-    expect(component.organizationToSwitch).toBe('newOrg');
+    expect(component.organizationToSwitch()).toBe('newOrg');
     expect(component.newOrganization).toBe('');
     expect(luigiClientMock.uxManager().showAlert).toHaveBeenCalled();
   });
@@ -176,7 +176,7 @@ describe('OrganizationManagementComponent', () => {
       },
     };
     envConfigServiceMock.getEnvConfig.mockResolvedValue(mockEnvConfig);
-    component.organizationToSwitch = 'newOrg';
+    component.organizationToSwitch.set('newOrg');
     Object.defineProperty(window, 'location', {
       value: { protocol: 'https:', port: '8080' },
       writable: true,
@@ -203,7 +203,7 @@ describe('OrganizationManagementComponent', () => {
       },
     };
     envConfigServiceMock.getEnvConfig.mockResolvedValue(mockEnvConfig);
-    component.organizationToSwitch = 'invalid-org-name-'; // Invalid: ends with hyphen
+    component.organizationToSwitch.set('invalid-org-name-'); // Invalid: ends with hyphen
 
     await component.switchOrganization();
 
@@ -229,7 +229,7 @@ describe('OrganizationManagementComponent', () => {
       },
     };
     envConfigServiceMock.getEnvConfig.mockResolvedValue(mockEnvConfig);
-    component.organizationToSwitch = 'validorg';
+    component.organizationToSwitch.set('validorg');
     Object.defineProperty(window, 'location', {
       value: { protocol: 'https:', port: '' },
       writable: true,

projects/wc/src/app/components/organization-management/organization-management.component.ts

@@ -6,6 +6,7 @@ import {
   effect,
   inject,
   input,
+  linkedSignal,
   signal,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -54,7 +55,7 @@ export class OrganizationManagementComponent implements OnInit {
 
   texts: any = {};
   organizations = signal<string[]>([]);
-  organizationToSwitch: string;
+  organizationToSwitch = linkedSignal(() => this.organizations()[0] ?? '');
   newOrganization: string;
 
   constructor() {
@@ -72,7 +73,7 @@ export class OrganizationManagementComponent implements OnInit {
   }
 
   setOrganizationToSwitch($event: any) {
-    this.organizationToSwitch = $event.target.value;
+    this.organizationToSwitch.set($event.target.value);
   }
 
   readOrganizations() {
@@ -118,7 +119,7 @@ export class OrganizationManagementComponent implements OnInit {
             this.newOrganization,
             ...this.organizations(),
           ]);
-          this.organizationToSwitch = this.newOrganization;
+          this.organizationToSwitch.set(this.newOrganization);
           this.newOrganization = '';
           this.LuigiClient().uxManager().showAlert({
             text: 'New organization has been created, select it from the list to switch to it.',
@@ -181,7 +182,9 @@ export class OrganizationManagementComponent implements OnInit {
   async switchOrganization() {
     const { baseDomain } = await this.envConfigService.getEnvConfig();
     const protocol = window.location.protocol;
-    const sanitizedOrg = this.sanitizeSubdomainInput(this.organizationToSwitch);
+    const sanitizedOrg = this.sanitizeSubdomainInput(
+      this.organizationToSwitch(),
+    );
 
     if (!sanitizedOrg) {
       this.LuigiClient().uxManager().showAlert({