Merge pull request #52 from platform-mesh/organization-managment-k8s-validation

Organization managment k8s validation

Author: Sobyt483

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.html

@@ -54,7 +54,13 @@
             [required]="field.required"
             [valueState]="getValueState(fieldProperty)"
             [disabled]="isEditMode() && isCreateFieldOnly(field)"
-          ></ui5-input>
+          >
+            @if (form.controls[fieldProperty].errors?.k8sNameInvalid) {
+              <div slot="valueStateMessage">
+                <a href="{{ k8sMessages.RFC_1035.href }}" target="_blank">{{ k8sMessages.RFC_1035.message }}</a>
+              </div>
+            }
+          </ui5-input>
         }
       </div>
     }

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.ts

@@ -1,5 +1,7 @@
+import { k8sMessages } from '../../../../consts/k8s-messages';
+import { k8sNameValidator } from '../../../../validators/k8s-name-validator';
 import { DynamicSelectComponent } from '../../../dynamic-select/dynamic-select.component';
-import { CreateOnlyResourceFieldNames } from './create-resource-modal.enums';
+import { ResourceFieldNames } from './create-resource-modal.enums';
 import {
   Component,
   OnInit,
@@ -65,6 +67,8 @@ export class CreateResourceModalComponent implements OnInit {
 
   private originalResource = signal<Resource | null>(null);
 
+  protected readonly k8sMessages = k8sMessages;
+
   ngOnInit(): void {
     this.form = this.fb.group(this.createControls());
   }
@@ -131,26 +135,39 @@ export class CreateResourceModalComponent implements OnInit {
 
   isCreateFieldOnly(field: FieldDefinition): boolean {
     return (
-      field.property === CreateOnlyResourceFieldNames.MetadataName ||
-      field.property === CreateOnlyResourceFieldNames.SpecType ||
-      field.property === CreateOnlyResourceFieldNames.MetadataNamespace
+      field.property === ResourceFieldNames.MetadataName ||
+      field.property === ResourceFieldNames.SpecType ||
+      field.property === ResourceFieldNames.MetadataNamespace
     );
   }
 
   private createControls(resource?: Resource) {
     return this.fields().reduce(
       (obj, fieldDefinition) => {
-        const validator = fieldDefinition.required ? Validators.required : null;
+        const validators = this.getValidator(fieldDefinition);
         const fieldName = this.sanitizePropertyName(fieldDefinition.property);
         const fieldValue =
           resource && typeof fieldDefinition.property === 'string'
             ? getValueByPath(resource, fieldDefinition.property)
             : '';
-        obj[fieldName] = new FormControl(fieldValue, validator);
+        obj[fieldName] = new FormControl(fieldValue, validators);
 
         return obj;
       },
       {} as Record<string, FormControl>,
     );
   }
+
+  private getValidator(fieldDefinition: FieldDefinition) {
+    const validators = [];
+    if (fieldDefinition.required) {
+      validators.push(Validators.required);
+    }
+
+    if (fieldDefinition.property === ResourceFieldNames.MetadataName) {
+      validators.push(k8sNameValidator);
+    }
+
+    return validators;
+  }
 }

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.enums.ts

@@ -1,4 +1,4 @@
-export enum CreateOnlyResourceFieldNames {
+export enum ResourceFieldNames {
   MetadataName = 'metadata.name',
   SpecType = 'spec.type',
   MetadataNamespace = 'metadata.namespace',

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

@@ -33,12 +33,17 @@
     }}</ui5-label
     ><br />
     <div class="organization-management-input">
-      <ui5-input
-        id="input-onboard"
-        placeholder="{{ texts.onboardOrganization.placeholder }}"
-        [(ngModel)]="newOrganization"
-      ></ui5-input>
-      <ui5-button design="Emphasized" (ui5Click)="onboardOrganization()">{{
+        <ui5-input
+          id="input-onboard"
+          placeholder="{{ texts.onboardOrganization.placeholder }}"
+          [formControl]="newOrganization"
+          [valueState]="getValueState(newOrganization)"
+        >
+          <div slot="valueStateMessage">
+            <a href="{{ k8sMessages.RFC_1035.href }}" target="_blank">{{ k8sMessages.RFC_1035.message }}</a>
+          </div>
+      </ui5-input>
+      <ui5-button [disabled]="newOrganization.invalid" design="Emphasized" (ui5Click)="onboardOrganization()">{{
         texts.onboardOrganization.button
       }}</ui5-button>
     </div>

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

@@ -134,23 +134,23 @@ describe('OrganizationManagementComponent', () => {
       reset: jest.fn(),
     };
     resourceServiceMock.create.mockReturnValue(of(mockResponse));
-    component.newOrganization = 'newOrg';
+    component.newOrganization.setValue('newOrg');
     component.organizations.set(['existingOrg']);
 
     component.onboardOrganization();
 
     expect(resourceServiceMock.create).toHaveBeenCalled();
     expect(component.organizations()).toEqual(['newOrg', 'existingOrg']);
     expect(component.organizationToSwitch()).toBe('newOrg');
-    expect(component.newOrganization).toBe('');
+    expect(component.newOrganization.value).toBe('');
     expect(luigiClientMock.uxManager().showAlert).toHaveBeenCalled();
   });
 
   it('should handle organization creation error', () => {
     resourceServiceMock.create.mockReturnValue(
       throwError(() => new Error('Creation failed')),
     );
-    component.newOrganization = 'newOrg';
+    component.newOrganization.setValue('newOrg');
 
     component.onboardOrganization();
 
@@ -239,4 +239,44 @@ describe('OrganizationManagementComponent', () => {
 
     expect(window.location.href).toBe('https://validorg.test.com');
   });
+
+  it('should return non-local message for organization creation when not in local setup', () => {
+    // Mock window.location.hostname to simulate non-local setup
+    const originalHostname = window.location.hostname;
+    Object.defineProperty(window.location, 'hostname', {
+      value: 'production.example.com',
+      writable: true,
+    });
+
+    const message = component['getMessageForOrganizationCreation']('testOrg');
+    expect(message).toBe(
+      'A new organization has been created. Select it from the list to switch.',
+    );
+
+    // Restore original hostname
+    Object.defineProperty(window.location, 'hostname', {
+      value: originalHostname,
+      writable: true,
+    });
+  });
+
+  it('should return Negative state for invalid and touched form control', () => {
+    const formControl = {
+      invalid: true,
+      touched: true,
+    } as any;
+
+    const result = component.getValueState(formControl);
+    expect(result).toBe('Negative');
+  });
+
+  it('should return None state for valid form control', () => {
+    const formControl = {
+      invalid: false,
+      touched: true,
+    } as any;
+
+    const result = component.getValueState(formControl);
+    expect(result).toBe('None');
+  });
 });

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

@@ -1,3 +1,5 @@
+import { k8sMessages } from '../../consts/k8s-messages';
+import { k8sNameValidator } from '../../validators/k8s-name-validator';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -9,7 +11,12 @@ import {
   linkedSignal,
   signal,
 } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 import { LuigiClient } from '@luigi-project/client/luigi-element';
 import {
   EnvConfigService,
@@ -43,6 +50,7 @@ import {
     OptionComponent,
     SelectComponent,
     FormsModule,
+    ReactiveFormsModule,
   ],
   templateUrl: './organization-management.component.html',
   styleUrl: './organization-management.component.scss',
@@ -53,13 +61,19 @@ export class OrganizationManagementComponent implements OnInit {
   private i18nService = inject(I18nService);
   private resourceService = inject(ResourceService);
   private envConfigService = inject(EnvConfigService);
+
   context = input<ResourceNodeContext>();
   LuigiClient = input<LuigiClient>();
 
   texts: any = {};
   organizations = signal<string[]>([]);
   organizationToSwitch = linkedSignal(() => this.organizations()[0] ?? '');
-  newOrganization: string;
+  newOrganization = new FormControl('', {
+    validators: [Validators.required, k8sNameValidator],
+    nonNullable: true,
+  });
+
+  protected readonly k8sMessages = k8sMessages;
 
   constructor() {
     effect(() => {
@@ -101,7 +115,7 @@ export class OrganizationManagementComponent implements OnInit {
   onboardOrganization() {
     const resource: Resource = {
       spec: { type: 'org' },
-      metadata: { name: this.newOrganization },
+      metadata: { name: this.newOrganization.value },
     };
     const resourceDefinition: ResourceDefinition = {
       group: 'core.platform-mesh.io',
@@ -117,11 +131,11 @@ export class OrganizationManagementComponent implements OnInit {
         next: (result) => {
           console.debug('Resource created', result);
           this.organizations.set([
-            this.newOrganization,
+            this.newOrganization.value,
             ...this.organizations(),
           ]);
-          this.organizationToSwitch.set(this.newOrganization);
-          this.newOrganization = '';
+          this.organizationToSwitch.set(this.newOrganization.value);
+          this.newOrganization.reset();
           this.LuigiClient()
             .uxManager()
             .showAlert({
@@ -201,8 +215,8 @@ export class OrganizationManagementComponent implements OnInit {
 
     if (!sanitizedOrg) {
       this.LuigiClient().uxManager().showAlert({
-        text: 'Organization name is not valid for subdomain usage, accrording to RFC 1034/1123.',
-        type: 'error',
+        text: k8sMessages.RFC_1034_1123.message,
+        type: k8sMessages.RFC_1034_1123.type,
       });
       return;
     }
@@ -211,4 +225,9 @@ export class OrganizationManagementComponent implements OnInit {
     const port = window.location.port ? `:${window.location.port}` : '';
     window.location.href = `${protocol}//${fullSubdomain}${port}`;
   }
+
+  getValueState(formControl: FormControl) {
+    const control = formControl;
+    return control.invalid && control.touched ? 'Negative' : 'None';
+  }
 }

projects/wc/src/app/consts/k8s-messages.ts

@@ -0,0 +1,13 @@
+export const k8sMessages = {
+  RFC_1035: {
+    href: 'https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#dns-label-names',
+    message: 'Invalid resource name accrording to RFC 1035',
+    type: 'error',
+  },
+  RFC_1034_1123: {
+    href: 'https://kubernetes.io/docs/concepts/overview/working-with-objects/names/#dns-label-names',
+    message:
+      'Organization name is not valid for subdomain usage, accrording to RFC 1034/1123.',
+    type: 'error',
+  },
+} as const;

projects/wc/src/app/validators/k8s-name-validator.spec.ts

@@ -0,0 +1,87 @@
+import { k8sNameValidator } from './k8s-name-validator';
+import { AbstractControl } from '@angular/forms';
+
+describe('k8sNameValidator', () => {
+  const createControl = (value: any): AbstractControl =>
+    ({
+      value,
+    }) as AbstractControl;
+
+  it('should return null when control value is null', () => {
+    const control = createControl(null);
+    const result = k8sNameValidator(control);
+    expect(result).toBeNull();
+  });
+
+  it('should return null when control value is undefined', () => {
+    const control = createControl(undefined);
+    const result = k8sNameValidator(control);
+    expect(result).toBeNull();
+  });
+
+  it('should return null when control value is empty string', () => {
+    const control = createControl('');
+    const result = k8sNameValidator(control);
+    expect(result).toBeNull();
+  });
+
+  it('should return null for valid k8s name (single character)', () => {
+    const control = createControl('a');
+    const result = k8sNameValidator(control);
+    expect(result).toBeNull();
+  });
+
+  it('should return null for valid k8s name (with numbers and hyphens)', () => {
+    const control = createControl('my-app-123');
+    const result = k8sNameValidator(control);
+    expect(result).toBeNull();
+  });
+
+  it('should return null for valid k8s name (maximum length)', () => {
+    const control = createControl('a'.repeat(63));
+    const result = k8sNameValidator(control);
+    expect(result).toBeNull();
+  });
+
+  it('should return error for invalid k8s name starting with number', () => {
+    const control = createControl('123invalid');
+    const result = k8sNameValidator(control);
+    expect(result).toEqual({ k8sNameInvalid: true });
+  });
+
+  it('should return error for invalid k8s name starting with uppercase', () => {
+    const control = createControl('Invalid');
+    const result = k8sNameValidator(control);
+    expect(result).toEqual({ k8sNameInvalid: true });
+  });
+
+  it('should return error for invalid k8s name ending with hyphen', () => {
+    const control = createControl('invalid-');
+    const result = k8sNameValidator(control);
+    expect(result).toEqual({ k8sNameInvalid: true });
+  });
+
+  it('should return error for invalid k8s name with uppercase letters', () => {
+    const control = createControl('Invalid-Name');
+    const result = k8sNameValidator(control);
+    expect(result).toEqual({ k8sNameInvalid: true });
+  });
+
+  it('should return error for invalid k8s name exceeding maximum length', () => {
+    const control = createControl('a'.repeat(64));
+    const result = k8sNameValidator(control);
+    expect(result).toEqual({ k8sNameInvalid: true });
+  });
+
+  it('should return error for invalid k8s name with special characters', () => {
+    const control = createControl('invalid@name');
+    const result = k8sNameValidator(control);
+    expect(result).toEqual({ k8sNameInvalid: true });
+  });
+
+  it('should handle non-string values by converting to string', () => {
+    const control = createControl(123);
+    const result = k8sNameValidator(control);
+    expect(result).toEqual({ k8sNameInvalid: true });
+  });
+});

projects/wc/src/app/validators/k8s-name-validator.ts

@@ -0,0 +1,18 @@
+import { AbstractControl } from '@angular/forms';
+
+export function k8sNameValidator(control: AbstractControl) {
+  if (!control.value) {
+    return null;
+  }
+
+  const value = control.value.toString();
+
+  // RFC 1035 validation: max 63 chars, lowercase alphanumeric or '-', starts with letter, ends with alphanumeric
+  const k8sNameRegex = /^[a-z]([a-z0-9-]{0,61}[a-z0-9])?$/;
+
+  if (!k8sNameRegex.test(value)) {
+    return { k8sNameInvalid: true };
+  }
+
+  return null;
+}