@ieeesa-npm/tenants 0.4.2 → 0.4.4

package/src/lib/components/create-modify-role/create-modify-role.component.spec.ts

@@ -0,0 +1,346 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CreateModifyRoleComponent } from './create-modify-role.component';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControlType, FormModel } from '@ieeesa-npm/presentation';
+import { HttpErrorResponse } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogModule,
+} from '@angular/material/dialog';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AlertsService, GlobalErrorHandlerService } from '@ieeesa-npm/utility';
+import { TenantsMocks } from '../../assets/tenants-mock';
+import { Observable } from 'rxjs';
+import { SharedService } from '@ieeesa-npm/shared';
+import { TenantFunctionType } from '../../models/tenant-function-type.model';
+
+describe('CreateModifyRoleComponent', () => {
+  let component: CreateModifyRoleComponent;
+  let fixture: ComponentFixture<CreateModifyRoleComponent>;
+  let tenantAppService: TenantApplicationsService;
+  let globalErrorHandlerService: GlobalErrorHandlerService;
+  let sharedService: SharedService;
+  let alertsService: AlertsService;
+  const formBuilder: FormBuilder = new FormBuilder();
+  const mockFormGroup = formBuilder.group({
+    appTitle: ['SA Collaboration portal'],
+    roleType: [
+      {
+        id: 'RT_SAAPPS_bb35eeba-50b3-452f-9839-83d78c78a197',
+        name: 'System',
+        order: 1,
+      },
+      [Validators.required],
+    ],
+    roleName: ['test role', [Validators.required]],
+  });
+  const dialogOptions = {
+    heading: 'New Role',
+    isCloseNeeded: true,
+    componentReference: CreateModifyRoleComponent,
+    modalType: 1,
+  };
+  const mockFormModel: FormModel = {
+    formGroup: [
+      {
+        legend: '',
+        controls: [
+          {
+            type: FormControlType.TEXT_AREA,
+            controlName: 'appTitle',
+          },
+          {
+            type: FormControlType.SELECT,
+            controlName: 'roleType',
+          },
+          {
+            type: FormControlType.INPUT,
+            controlName: 'roleName',
+          },
+        ],
+      },
+    ],
+  };
+  const mockServerErrorResponse = new HttpErrorResponse({
+    error: 'test',
+  });
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        CreateModifyRoleComponent,
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
+        HttpClientTestingModule,
+        MatDialogModule,
+      ],
+      providers: [
+        TenantApplicationsService,
+        AlertsService,
+        { provide: MAT_DIALOG_DATA, useValue: dialogOptions },
+        MatDialog,
+        SharedService,
+      ],
+    });
+    fixture = TestBed.createComponent(CreateModifyRoleComponent);
+    component = fixture.componentInstance;
+    component.createRoleFormGroup = mockFormModel;
+    component.selectedTenantInfo = TenantsMocks?.tenantInfoMock;
+    tenantAppService = TestBed.inject(TenantApplicationsService);
+    globalErrorHandlerService = TestBed.inject(GlobalErrorHandlerService);
+    alertsService = TestBed.inject(AlertsService);
+    sharedService = TestBed.inject(SharedService);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('#ngOnInit', () => {
+    it('should initialize the create role form group', () => {
+      component.createRoleFormGroup = mockFormModel;
+      component.selectedRole = TenantsMocks.mockUserRoles.body[0];
+      tenantAppService.setSelectedRoleInformation(
+        TenantsMocks.mockUserRoles.body[0]
+      );
+      spyOn(tenantAppService, 'getSelectedRoleInformation').and.returnValue(
+        TenantsMocks.mockUserRoles.body[0]
+      );
+      component.ngOnInit();
+      expect(
+        component.createRoleFormGroup?.formGroup[0]?.controls?.length
+      ).toBe(3);
+    });
+    it('should get selected roles information', () => {
+      spyOn(tenantAppService, 'getSelectedRoleInformation').and.returnValue(
+        TenantsMocks.mockUserRoles.body[0]
+      );
+      tenantAppService.setSelectedRoleInformation(TenantsMocks.mockRoleInfo);
+      tenantAppService.setRolesInfo(TenantsMocks.mockUserRoles.body);
+      component.ngOnInit();
+      expect(component.selectedRole).toEqual(
+        TenantsMocks.mockUserRoles.body[0]
+      );
+    });
+    it('should construct role type field when tenantFunctionType is EDIT_ROLE', () => {
+      component.tenantFunctionType = TenantFunctionType.EDIT_ROLE;
+      const fieldConfig = component.getRoleTypeField();
+      expect(fieldConfig).toEqual({
+        type: FormControlType?.TEXT_AREA,
+        label: component.createRoleTexts?.label?.roleType,
+        controlName: 'roleType',
+        isReadonly: true,
+        value: component.selectedRole?.roleTypeName,
+        ariaLabel: component.createRoleTexts?.label?.ariaLabel?.roleType,
+        ariaDescribedById:
+          component.createRoleTexts?.label?.ariaDescribedById?.roleType,
+        isResize: true,
+        ariaMultiline: false
+      });
+    });
+    it('should display role name in edit role form when tenantFunctionType is EDIT_ROLE', () => {
+      component.tenantFunctionType = TenantFunctionType.EDIT_ROLE;
+      tenantAppService.setRolesInfo(TenantsMocks.mockUserRoles.body);
+      tenantAppService.setSelectedRoleInformation(TenantsMocks.mockRoleInfo);
+      spyOn(tenantAppService, 'getSelectedRoleInformation').and.returnValue(
+        TenantsMocks.mockUserRoles.body[0]
+      );
+      component.ngOnInit();
+      expect(component.selectedRole).toEqual(
+        TenantsMocks.mockUserRoles.body[0]
+      );
+    });
+  });
+  describe('#getCreateModifyRoleFormGroupRef', () => {
+    it('initialize create role form group', () => {
+      const mockFormGroup = formBuilder.group({
+        appTitle: ['SA Collaboration portal'],
+        roleType: ['System', [Validators.required]],
+        roleName: ['test', [Validators.required]],
+      });
+      component.createRoleFormGroup = mockFormModel;
+      fixture.detectChanges();
+      component.getCreateModifyRoleFormGroupRef([mockFormGroup]);
+      expect(component.createModifyRoleFormGroupRef).toEqual(mockFormGroup);
+    });
+  });
+  describe('#getCreateModifyRolePayload', () => {
+    it('should prepare the create role payload on form submit', () => {
+      component.createRoleFormGroup = mockFormModel;
+      component.selectedTenantInfo = TenantsMocks.tenantInfoMock;
+      const payload = component.getCreateModifyRolePayload(
+        mockFormGroup?.getRawValue()
+      );
+      expect(payload).toEqual(TenantsMocks.createRoleMockPayload);
+    });
+    it('should prepare the edit role payload on form submit', () => {
+      component.createRoleFormGroup = mockFormModel;
+      component.selectedRole = TenantsMocks.mockUserRoles.body[0];
+      component.tenantFunctionType = TenantFunctionType.EDIT_ROLE;
+      const payload = component.getCreateModifyRolePayload(
+        mockFormGroup?.getRawValue()
+      );
+      expect(payload.payload.roleId).toEqual(
+        TenantsMocks.editRoleMockPayload.payload.roleId
+      );
+    });
+  });
+  describe('#onCreateModifyRoleFormChange', () => {
+    it('should call onCreateTenantFormChange whenever the form control value changes', () => {
+      component.onCreateModifyRoleFormChange([mockFormGroup]);
+      expect(component.createModifyRoleFormGroupRef).toEqual(mockFormGroup);
+    });
+  });
+  describe('#onCreateModifyRoleFormSubmit', () => {
+    it('should call createRole when tenantFunctionType is CREATE_ROLE and save button is clicked', () => {
+      component.tenantFunctionType = TenantFunctionType.CREATE_ROLE;
+      const createRoleSpy = spyOn(
+        tenantAppService,
+        'createRole'
+      ).and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.next(TenantsMocks.createRoleMockResponse);
+        })
+      );
+      component.onCreateModifyRoleFormSubmit([mockFormGroup]);
+      expect(createRoleSpy).toHaveBeenCalled();
+    });
+    it('should call editRole when tenantFunctionType is EDIT_ROLE and save button is clicked', () => {
+      component.tenantFunctionType = TenantFunctionType.EDIT_ROLE;
+      const editRoleSpy = spyOn(tenantAppService, 'editRole').and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.next(TenantsMocks.editRoleMockResponse);
+        })
+      );
+      component.onCreateModifyRoleFormSubmit([mockFormGroup]);
+      expect(editRoleSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('#createRole', () => {
+    it('should submit the create role form', () => {
+      component.createModifyRolePayload = TenantsMocks.createRoleMockPayload;
+      const submitResponseSpy = spyOn(
+        component.submitFormResponse,
+        'emit'
+      ).and.callThrough();
+      const createRoleSpy = spyOn(
+        tenantAppService,
+        'createRole'
+      ).and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.next(TenantsMocks.createRoleMockResponse);
+        })
+      );
+      component.createRole();
+      expect(createRoleSpy).toHaveBeenCalled();
+      expect(submitResponseSpy).toHaveBeenCalled();
+    });
+    it('should throw error while creating the role', () => {
+      const submitResponseSpy = spyOn(
+        component.submitFormResponse,
+        'emit'
+      ).and.callThrough();
+      const submitResponseErrorSpy = spyOn(
+        tenantAppService,
+        'createRole'
+      ).and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.error(mockServerErrorResponse);
+        })
+      );
+      spyOn(globalErrorHandlerService, 'handleError');
+      component.createRole();
+      expect(submitResponseErrorSpy).toHaveBeenCalled();
+      expect(submitResponseSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('#editRole', () => {
+    it('should submit the edit role form', () => {
+      component.createModifyRolePayload = TenantsMocks.editRoleMockPayload;
+      const submitResponseSpy = spyOn(
+        component.submitFormResponse,
+        'emit'
+      ).and.callThrough();
+      const editRoleSpy = spyOn(tenantAppService, 'editRole').and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.next(TenantsMocks.editRoleMockResponse);
+        })
+      );
+      component.editRole();
+      expect(editRoleSpy).toHaveBeenCalled();
+      expect(submitResponseSpy).toHaveBeenCalled();
+    });
+    it('should throw error while updating the role', () => {
+      const submitResponseSpy = spyOn(
+        component.submitFormResponse,
+        'emit'
+      ).and.callThrough();
+      const editRoleSpy = spyOn(tenantAppService, 'editRole').and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.error(mockServerErrorResponse);
+        })
+      );
+      spyOn(globalErrorHandlerService, 'handleError');
+      component.editRole();
+      expect(editRoleSpy).toHaveBeenCalled();
+      expect(submitResponseSpy).not.toHaveBeenCalled();
+    });
+  });
+  describe('#onFormCancel', () => {
+    it('should emit formCancel event', () => {
+      const formCancelEmitSpy = spyOn(
+        component.formCancel,
+        'emit'
+      ).and.callThrough();
+      component.onFormCancel();
+      expect(formCancelEmitSpy).toHaveBeenCalled();
+    });
+  });
+  describe('#handleErrors', () => {
+    it('should handle HttpErrorResponse and call globalErrorHandlerService.handleError', () => {
+      spyOn(globalErrorHandlerService, 'handleError');
+      const errorResponse = new HttpErrorResponse({ status: 500 });
+      const parseErrorMessageSpy = spyOn(sharedService, 'parseErrorMessage');
+      component.handleErrors(errorResponse);
+      expect(parseErrorMessageSpy).not.toHaveBeenCalled();
+      expect(globalErrorHandlerService.handleError).toHaveBeenCalledWith(
+        errorResponse
+      );
+    });
+    it('should handle errors and show custom error message', () => {
+      const mockErrorResponse = {
+        error: {
+          status: false,
+          message: 'role already exists.',
+          body: { errorCodes: ['3012'] },
+        },
+        status: 400,
+        statusText: 'OK',
+      };
+      const createRoleSpy = spyOn(tenantAppService, 'createRole');
+      createRoleSpy.and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.error(new HttpErrorResponse(mockErrorResponse));
+        })
+      );
+      spyOn(alertsService, 'showMessage').and.callThrough();
+      const parseErrorMessageSpy = spyOn(sharedService, 'parseErrorMessage');
+      component.handleErrors(new HttpErrorResponse(mockErrorResponse));
+      expect(parseErrorMessageSpy).toHaveBeenCalled();
+    });
+  });
+  describe('#ngOnDestroy', () => {
+    it('should unsubscribe on ngOnDestroy', () => {
+      spyOn(component.destroy$, 'next');
+      spyOn(component.destroy$, 'unsubscribe');
+      component.ngOnDestroy();
+      expect(component.destroy$.next).toHaveBeenCalledWith(true);
+      expect(component.destroy$.unsubscribe).toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/components/create-modify-role/create-modify-role.component.ts

@@ -0,0 +1,321 @@
+import {
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subject, takeUntil } from 'rxjs';
+import * as screenTexts from '../../assets/constants.json';
+import { FormGroup, Validators } from '@angular/forms';
+import {
+  AlignType,
+  DynamicFormComponent,
+  FieldConfig,
+  FormControlType,
+  FormGrid,
+  FormModel,
+  SelectOption,
+} from '@ieeesa-npm/presentation';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import { FormStatus, SharedService } from '@ieeesa-npm/shared';
+import { TenantFunctionType } from '../../models/tenant-function-type.model';
+import { TenantBasicInfo } from '../../models/tenant.model';
+import {
+  RoleDetails,
+  Role,
+  CreateModifyRoleRequestPayload,
+  CreateModifyRoleResponse,
+} from '../../models/roles-and-permissions.model';
+import { RoleTypeOption } from '../../models/role-type.model';
+import { RolesValidation } from '../../assets/tenant-validations';
+import { AlertType, GlobalErrorHandlerService } from '@ieeesa-npm/utility';
+import { HttpErrorResponse } from '@angular/common/http';
+@Component({
+  selector: 'ieeesa-create-modify-role',
+  standalone: true,
+  imports: [CommonModule, DynamicFormComponent],
+  templateUrl: './create-modify-role.component.html',
+  styleUrls: ['./create-modify-role.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class CreateModifyRoleComponent implements OnInit, OnDestroy {
+  destroy$ = new Subject<boolean>();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constants: any = screenTexts;
+  createRoleTexts = this.constants?.createRole;
+  leftButtonLabel = this.createRoleTexts?.label?.leftButtonLabel;
+  rightButtonLabel = this.createRoleTexts?.label?.rightButtonLabel;
+  colWidth: FormGrid = { xs: 12, xl: 12, sm: 12, md: 12, lg: 12 };
+  createRoleFormGroup!: FormModel;
+  createModifyRoleFormGroupRef!: FormGroup;
+  actionButtonAlign = AlignType.LEFT;
+  @ViewChild(DynamicFormComponent)
+  dynamicFormComponent!: DynamicFormComponent;
+  @Output() submitFormResponse = new EventEmitter();
+  @Output() formCancel = new EventEmitter();
+  tenantFunctionType!: TenantFunctionType;
+  selectedTenantInfo!: TenantBasicInfo | undefined;
+  createModifyRolePayload!: CreateModifyRoleRequestPayload;
+  roleTypeOptions!: SelectOption[];
+  selectedRoleDetails!: RoleDetails;
+  selectedRole!: Role;
+  constructor(
+    // eslint-disable-next-line no-unused-vars
+    private tenantAppService: TenantApplicationsService,
+    // eslint-disable-next-line no-unused-vars
+    private sharedService: SharedService,
+    // eslint-disable-next-line no-unused-vars
+    private globalErrorHandlerService: GlobalErrorHandlerService // eslint-disable-next-line no-empty-function
+  ) {}
+
+  ngOnInit(): void {
+    this.tenantFunctionType = this.tenantAppService?.getTenantFunctionType();
+    this.selectedTenantInfo =
+      this.tenantAppService?.getSelectedTenantInformation();
+    this.roleTypeOptions =
+      this.tenantAppService?.getRoleTypeOption() as RoleTypeOption[];
+    this.selectedRoleDetails =
+      this.tenantAppService?.getSelectedRoleInformation() as Role;
+    if (this.selectedRoleDetails) {
+      this.selectedRole = this.tenantAppService?.roles?.find(
+        ({ roleId }) => roleId === this.selectedRoleDetails?.roleId
+      ) as Role;
+    }
+    this.initializeCreateRoleFormGroup();
+  }
+
+  /**
+   * Constructs and returns the role type form field based on credit or edit role.
+   * @return {FieldConfig} -role type form field.
+   * @memberof CreateModifyRoleComponent
+   */
+  getRoleTypeField(): FieldConfig {
+    let roleTypeField: FieldConfig;
+    if (this.tenantFunctionType === TenantFunctionType.EDIT_ROLE) {
+      roleTypeField = {
+        type: FormControlType?.TEXT_AREA,
+        label: this.createRoleTexts?.label?.roleType,
+        controlName: 'roleType',
+        isReadonly: true,
+        value: this.selectedRole?.roleTypeName,
+        ariaMultiline: false,
+        ariaLabel: this.createRoleTexts?.label?.ariaLabel?.roleType,
+        ariaDescribedById:
+          this.createRoleTexts?.label?.ariaDescribedById?.roleType,
+        isResize: true,
+      };
+    } else {
+      roleTypeField = {
+        type: FormControlType?.SELECT,
+        label: this.createRoleTexts?.label?.roleType + '*',
+        controlName: 'roleType',
+        isSortNeeded: false,
+        value: '',
+        validation: [Validators.required],
+        dropdownOptions: this.roleTypeOptions,
+        supportMessage: this.createRoleTexts?.supportText?.roleType,
+        requiredErrorMessage: this.createRoleTexts?.message?.error?.required,
+        ariaLabel: this.createRoleTexts?.label?.ariaLabel?.roleType,
+        ariaDescribedById:
+          this.createRoleTexts?.label?.ariaDescribedById?.roleType,
+      };
+    }
+    return roleTypeField;
+  }
+  /**
+   * Initialize the create/edit role form group array.
+   * @memberof CreateModifyRoleComponent
+   */
+  initializeCreateRoleFormGroup(): void {
+    this.createRoleFormGroup = {
+      formGroup: [
+        {
+          legend: '',
+          controls: [
+            {
+              type: FormControlType.TEXT_AREA,
+              label: this.createRoleTexts?.label?.appTitle,
+              controlName: 'appTitle',
+              value: this.selectedTenantInfo?.appTitle,
+              ariaLabel: this.createRoleTexts?.label?.ariaLabel?.appTitle,
+              ariaDescribedById:
+                this.createRoleTexts?.label?.ariaDescribedById?.appTitle,
+              isReadonly: true,
+              ariaMultiline: false,
+              isResize: true,
+            },
+            this.getRoleTypeField(),
+            {
+              type: FormControlType.INPUT,
+              label: this.createRoleTexts?.label?.roleName + '*',
+              controlName: 'roleName',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT_ROLE
+                  ? this.selectedRole?.roleName
+                  : '',
+              validation: [
+                Validators.required,
+                Validators.maxLength(RolesValidation.roleNameMaxLength),
+              ],
+              supportMessage: this.createRoleTexts?.supportText?.roleName,
+              requiredErrorMessage:
+                this.createRoleTexts?.message?.error?.required,
+              maxErrorMessage:
+                this.createRoleTexts?.message?.error?.limit?.roleNameMaxChars,
+              ariaLabel: this.createRoleTexts?.label?.ariaLabel?.roleName,
+              ariaDescribedById:
+                this.createRoleTexts?.label?.ariaDescribedById?.roleName,
+            },
+          ],
+        },
+      ],
+    };
+  }
+  /**
+   * Gets create/edit role form group reference.
+   * @param {FormGroup[]} form
+   * @memberof CreateModifyRoleComponent
+   */
+  getCreateModifyRoleFormGroupRef(form: FormGroup[]): void {
+    this.createModifyRoleFormGroupRef = form[0];
+  }
+  /**
+   * Updates createModifyRoleFormGroupRef on add role form change event.
+   * @param {FormGroup[]} form
+   * @memberof CreateModifyRoleComponent
+   */
+  onCreateModifyRoleFormChange(form: FormGroup[]): void {
+    this.createModifyRoleFormGroupRef = form[0];
+  }
+  /**
+   * Creates a new role on form submission and the form is valid.
+   * @param {FormGroup[]} form
+   * @memberof CreateModifyRoleComponent
+   */
+  onCreateModifyRoleFormSubmit(form: FormGroup[]): void {
+    form[0]?.markAllAsTouched();
+    if (form[0].status === FormStatus.VALID) {
+      this.createModifyRolePayload = this.getCreateModifyRolePayload(
+        form[0].getRawValue()
+      );
+      // eslint-disable-next-line no-unused-expressions
+      this.tenantFunctionType === TenantFunctionType.EDIT_ROLE
+        ? this.editRole()
+        : this.createRole();
+    }
+  }
+  /**
+   * Constructs create/edit role payload from the form data and returns.
+   * @param {*} formData
+   * @return {CreateModifyRoleRequestPayload}
+   * @memberof CreateModifyRoleComponent
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getCreateModifyRolePayload(formData: any): CreateModifyRoleRequestPayload {
+    const payload: CreateModifyRoleRequestPayload = {
+      payload: {
+        appId: this.selectedTenantInfo?.appId as string,
+        roleName: formData?.roleName,
+      },
+    };
+    if (this.tenantFunctionType === TenantFunctionType.EDIT_ROLE) {
+      payload.payload.roleId = this.selectedRole?.roleId;
+    } else {
+      payload.payload.roleType = formData?.roleType?.id;
+    }
+    return payload;
+  }
+  /**
+   * Post the creates new role form data to the server on form submission to create a new role.
+   * @param {CreateRoleRequestPayload} createModifyRolePayload
+   * @memberof CreateModifyRoleComponent
+   */
+  createRole(): void {
+    this.tenantAppService
+      .createRole(this.createModifyRolePayload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: CreateModifyRoleResponse) => {
+          if (response.status) {
+            this.tenantAppService.setNewlyCreatedRoleInfo(
+              this.createModifyRolePayload?.payload
+            );
+            this.submitFormResponse.emit(response);
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.handleErrors(error);
+        },
+      });
+  }
+  /**
+   * Post the edited role form data to server on form submission to update the selected role information.
+   * @param {CreateModifyRoleRequestPayload} createModifyRolePayload
+   * @memberof CreateModifyRoleComponent
+   */
+  editRole(): void {
+    this.tenantAppService
+      .editRole(this.createModifyRolePayload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: CreateModifyRoleResponse) => {
+          if (response.status) {
+            this.tenantAppService.setNewlyCreatedRoleInfo(
+              this.createModifyRolePayload?.payload
+            );
+            this.submitFormResponse.emit(response);
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.handleErrors(error);
+        },
+      });
+  }
+  /**
+   * Captures the server side errors and handles it based on the custom or Http errors.
+   * @param {HttpErrorResponse} error
+   * @return -returns nothing
+   * @memberof CreateModifyRoleComponent
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  handleErrors(error: any): void {
+    const errorCodes = error?.error?.body?.errorCodes;
+    if (Array.isArray(errorCodes) && !error?.error?.status) {
+      if (errorCodes[0] === '3012') {
+        const roleName = this.createModifyRolePayload?.payload?.roleName;
+        const errorMessage = this.sharedService?.parseErrorMessage(
+          errorCodes,
+          this.createRoleTexts?.errors
+        );
+        this.sharedService.showAlertMessage(
+          AlertType.ERROR,
+          `${roleName} ${errorMessage}`
+        );
+      }
+    } else if (error && error instanceof HttpErrorResponse) {
+      this.globalErrorHandlerService?.handleError(error);
+    }
+  }
+  /**
+   * Emits form cancel event.
+   * @memberof CreateModifyRoleComponent
+   */
+  onFormCancel(): void {
+    this.formCancel.emit();
+  }
+
+  /**
+   * Implementation of ngOnDestroy lifecycle hook method to unsubscribe the open observable subscriptions.
+   * @memberof CreateModifyRoleComponent
+   */
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
+  }
+}

package/src/lib/components/create-tenant-application/create-tenant-application.component.html

@@ -0,0 +1,18 @@
+<ieeesa-dynamic-form
+  *ngIf="createTenantFormGroup"
+  class="ieeesa-create-tenant-form"
+  [leftButtonLabel]="leftButtonLabel"
+  [rightButtonLabel]="rightButtonLabel"
+  [isLegendVisible]="false"
+  [colWidth]="colWidth"
+  [actionButtonAlign]="actionButtonAlign"
+  [formGroups]="createTenantFormGroup"
+  [isLeftButtonNeeded]="true"
+  (formSubmit)="onCreateTenantFormSubmit($event)"
+  (formChange)="onCreateTenantFormChange($event)"
+  (formLeftButtonClicked)="onFormCancel()"
+  (formGroupsReference)="getCreateTenantFormGroupRef($event)"
+  (formFileUpload)="onFormFileUpload($event)"
+  (formColorPickerChange)="onColorPickerChange($event)"
+  (formRadioOptionSelected)="onRadioOptionSelected($event)"
+></ieeesa-dynamic-form>