Merge pull request #24 from platform-mesh/feat/edit-entity-btn

feat: edit entity btn

Author: makdeniss

projects/lib/services/resource/resource.service.spec.ts

@@ -1,9 +1,9 @@
+import { ApolloFactory } from './apollo-factory';
+import { ResourceService } from './resource.service';
 import { TestBed } from '@angular/core/testing';
 import { LuigiCoreService } from '@openmfp/portal-ui-lib';
 import { mock } from 'jest-mock-extended';
 import { of, throwError } from 'rxjs';
-import { ApolloFactory } from './apollo-factory';
-import { ResourceService } from './resource.service';
 
 describe('ResourceService', () => {
   let service: ResourceService;
@@ -564,6 +564,122 @@ describe('ResourceService', () => {
     });
   });
 
+  describe('update', () => {
+    it('should strip __typename recursively from update payload', (done) => {
+      const dirtyResource: any = {
+        metadata: { name: 'test-name', __typename: 'Meta' },
+        spec: {
+          __typename: 'Spec',
+          items: [
+            { key: 'a', __typename: 'Item' },
+            { key: 'b', nested: { foo: 'bar', __typename: 'Nested' } },
+          ],
+          map: {
+            one: { val: 1, __typename: 'Val' },
+            two: [{ x: 1, __typename: 'X' }, { y: 2 }],
+          },
+        },
+      };
+
+      mockApollo.mutate.mockReturnValue(
+        of({ data: { __typename: 'TestKind' } }),
+      );
+
+      service
+        .update(dirtyResource, resourceDefinition, namespacedNodeContext)
+        .subscribe(() => {
+          const mutateCall = mockApollo.mutate.mock.calls[0][0];
+          const passedObject = mutateCall.variables.object;
+          expect(passedObject).toEqual({
+            metadata: { name: 'test-name' },
+            spec: {
+              items: [{ key: 'a' }, { key: 'b', nested: { foo: 'bar' } }],
+              map: {
+                one: { val: 1 },
+                two: [{ x: 1 }, { y: 2 }],
+              },
+            },
+          });
+          done();
+        });
+    });
+    it('should update resource', (done) => {
+      mockApollo.mutate.mockReturnValue(
+        of({ data: { __typename: 'TestKind' } }),
+      );
+      service
+        .update(resource, resourceDefinition, namespacedNodeContext)
+        .subscribe(() => {
+          expect(mockApollo.mutate).toHaveBeenCalled();
+          done();
+        });
+    });
+
+    it('should update namespaced resource', (done) => {
+      mockApollo.mutate.mockReturnValue(
+        of({ data: { __typename: 'TestKind' } }),
+      );
+
+      service
+        .update(resource, resourceDefinition, namespacedNodeContext)
+        .subscribe(() => {
+          expect(mockApollo.mutate).toHaveBeenCalledWith({
+            mutation: expect.anything(),
+            fetchPolicy: 'no-cache',
+            variables: {
+              name: resource.metadata.name,
+              object: resource,
+              namespace: namespacedNodeContext.namespaceId,
+            },
+          });
+          done();
+        });
+    });
+
+    it('should update cluster resource', (done) => {
+      mockApollo.mutate.mockReturnValue(
+        of({ data: { __typename: 'TestKind' } }),
+      );
+
+      service
+        .update(resource, resourceDefinition, clusterScopeNodeContext)
+        .subscribe(() => {
+          expect(mockApollo.mutate).toHaveBeenCalledWith({
+            mutation: expect.anything(),
+            fetchPolicy: 'no-cache',
+            variables: {
+              name: resource.metadata.name,
+              object: resource,
+            },
+          });
+          done();
+        });
+    });
+
+    it('should handle update error', (done) => {
+      const error = new Error('fail');
+      mockApollo.mutate.mockReturnValue(throwError(() => error));
+      console.error = jest.fn();
+
+      service
+        .update(resource, resourceDefinition, clusterScopeNodeContext)
+        .subscribe({
+          error: () => {
+            expect(console.error).toHaveBeenCalledWith(
+              'Error executing GraphQL query.',
+              error,
+            );
+            expect(mockLuigiCoreService.showAlert).toHaveBeenCalledWith({
+              text: 'fail',
+              type: 'error',
+            });
+            done();
+          },
+        });
+    });
+  });
+
+
   describe('readAccountInfo', () => {
     it('should read account info', (done) => {
       const ca = 'cert-data';

projects/lib/services/resource/resource.service.ts

@@ -11,6 +11,7 @@ import {
 import {
   getValueByPath,
   replaceDotsAndHyphensWithUnderscores,
+  stripTypename,
 } from '@platform-mesh/portal-ui-lib/utils';
 import { gql } from 'apollo-angular';
 import * as gqlBuilder from 'gql-query-builder';
@@ -278,6 +279,58 @@ export class ResourceService {
       );
   }
 
+  update(
+    resource: Resource,
+    resourceDefinition: ResourceDefinition,
+    nodeContext: ResourceNodeContext,
+  ) {
+    const isNamespacedResource = this.isNamespacedResource(nodeContext);
+    const group = replaceDotsAndHyphensWithUnderscores(
+      resourceDefinition.group,
+    );
+    const kind = resourceDefinition.kind;
+    const namespace = nodeContext.namespaceId;
+
+    const cleanResource = stripTypename(resource);
+
+    const mutation = gqlBuilder.mutation({
+      operation: group,
+      fields: [
+        {
+          operation: `update${kind}`,
+          variables: {
+            ...(isNamespacedResource && {
+              namespace: { type: 'String', value: namespace },
+            }),
+            name: { type: 'String!', value: resource.metadata.name },
+            object: {
+              type: `${kind}Input!`,
+              value: cleanResource,
+            },
+          },
+          fields: ['__typename'],
+        },
+      ],
+    });
+
+    return this.apolloFactory
+      .apollo(nodeContext)
+      .mutate({
+        mutation: gql`
+          ${mutation.query}
+        `,
+        fetchPolicy: 'no-cache',
+        variables: mutation.variables,
+      })
+      .pipe(
+        catchError((error) => {
+          this.alertErrors(error);
+          console.error('Error executing GraphQL query.', error);
+          return error;
+        }),
+      );
+  }
+
   readAccountInfo(nodeContext: ResourceNodeContext): Observable<AccountInfo> {
     return this.apolloFactory
       .apollo(nodeContext)

projects/lib/utils/utils/index.ts

@@ -3,3 +3,4 @@ export * from './get-value-by-path';
 export * from './group-name-sanitizer';
 export * from './is-local-setup';
 export * from './resource-field-by-path';
+export * from './resource-sanitizer';

projects/lib/utils/utils/resource-sanitizer.spec.ts

@@ -0,0 +1,21 @@
+import { stripTypename } from '@platform-mesh/portal-ui-lib/utils';
+
+describe('stripTypename (utils)', () => {
+  it('should return primitives as-is', () => {
+    expect(stripTypename(42 as any)).toBe(42);
+    expect(stripTypename('x' as any)).toBe('x');
+    expect(stripTypename(null as any)).toBe(null);
+    expect(stripTypename(undefined as any)).toBe(undefined);
+  });
+
+  it('should clean nested objects and arrays', () => {
+    const input = {
+      __typename: 'Root',
+      a: { __typename: 'A', b: 1 },
+      arr: [{ __typename: 'X', v: 1 }, [{ __typename: 'Y', z: 2 }, 3]],
+    } as any;
+
+    const output = stripTypename(input);
+    expect(output).toEqual({ a: { b: 1 }, arr: [{ v: 1 }, [{ z: 2 }, 3]] });
+  });
+});

projects/lib/utils/utils/resource-sanitizer.ts

@@ -0,0 +1,16 @@
+export function stripTypename<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return (value as unknown as any[]).map((v) => stripTypename(v)) as T;
+  }
+  if (value && typeof value === 'object') {
+    const { __typename, ...rest } = value as Record<string, unknown> & {
+      __typename?: string;
+    };
+    for (const k of Object.keys(rest)) {
+      // @ts-ignore - rest is an indexable object
+      rest[k] = stripTypename((rest as any)[k]);
+    }
+    return rest as T;
+  }
+  return value;
+}

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

@@ -1,4 +1,13 @@
-<ui5-dialog #dialog header-text="Create">
+<ui5-dialog #dialog>
+  <ui5-bar slot="header" design="Header">
+    <ui5-title slot="startContent">
+      @if (isEditMode()) {
+        Edit
+      } @else {
+        Create
+      }
+    </ui5-title>
+  </ui5-bar>
   <section class="form" [formGroup]="form">
     @for (field of fields(); track field.property) {
       @let fieldProperty = sanitizePropertyName(field.property);
@@ -15,6 +24,7 @@
             (blur)="onFieldBlur(fieldProperty)"
             [required]="field.required"
             [valueState]="getValueState(fieldProperty)"
+            [disabled]="isEditMode() && isCreateFieldOnly(field)"
           >
             @for (value of [''].concat(field.values); track value) {
               <ui5-option
@@ -43,6 +53,7 @@
             (input)="setFormControlValue($event, fieldProperty)"
             [required]="field.required"
             [valueState]="getValueState(fieldProperty)"
+            [disabled]="isEditMode() && isCreateFieldOnly(field)"
           ></ui5-input>
         }
       </div>

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

@@ -1,5 +1,5 @@
 import { CreateResourceModalComponent } from './create-resource-modal.component';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FieldDefinition } from '@openmfp/portal-ui-lib';
@@ -17,7 +17,8 @@ describe('CreateResourceModalComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ReactiveFormsModule, CreateResourceModalComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+      teardown: { destroyAfterEach: true },
     })
       .overrideComponent(CreateResourceModalComponent, {
         set: { template: '' },
@@ -61,6 +62,44 @@ describe('CreateResourceModalComponent', () => {
     expect(mockDialog.open).toBeTruthy();
   });
 
+  it('should prefill and disable name/namespace in edit mode, emit updateResource', () => {
+    (component as any).fields = () =>
+      [
+        { property: 'metadata.name', required: true, label: 'Name' },
+        { property: 'metadata.namespace', required: false, label: 'Namespace' },
+        { property: 'spec.description', required: false, label: 'Description' },
+      ] as any;
+
+    component.form = (component as any).fb.group(
+      (component as any).createControls(),
+    );
+
+    const resource: any = {
+      metadata: { name: 'res1', namespace: 'ns1' },
+      spec: { description: 'hello' },
+    };
+
+    const updateSpy = spyOn(component.updateResource, 'emit');
+
+    component.open(resource);
+    expect(mockDialog.open).toBeTruthy();
+
+    expect(component.form.controls['metadata_name'].value).toBe('res1');
+    expect(component.form.controls['metadata_namespace'].value).toBe('ns1');
+    expect(component.form.controls['spec_description'].value).toBe('hello');
+
+    component.form.controls['spec_description'].setValue('updated');
+    component.create();
+
+    expect(updateSpy).toHaveBeenCalledWith({
+      metadata: { name: 'res1', namespace: 'ns1' },
+      spec: { description: 'updated' },
+    });
+
+    expect(component.form.controls['metadata_name'].disabled).toBeFalsy();
+    expect(component.form.controls['metadata_namespace'].disabled).toBeFalsy();
+  });
+
   it('should close dialog and reset form when close method is called', () => {
     spyOn(component.form, 'reset');
 
@@ -168,4 +207,22 @@ describe('CreateResourceModalComponent', () => {
       );
     });
   });
+
+  it('should detect name/namespace and not other fields in isCreateFieldOnly function', () => {
+    const nameField: any = { property: 'metadata.name' };
+    const nsField: any = { property: 'metadata.namespace' };
+    const otherField: any = { property: 'spec.description' };
+
+    expect(component.isCreateFieldOnly(nameField)).toBeTruthy();
+    expect(component.isCreateFieldOnly(nsField)).toBeTruthy();
+    expect(component.isCreateFieldOnly(otherField)).toBeFalsy();
+  });
+
+  it('should open dialog using open function', () => {
+    mockDialog.open = false;
+
+    component.open();
+
+    expect(mockDialog.open).toBeTruthy();
+  });
 });