@ieeesa-npm/tenants 0.4.2 → 0.4.4

package/src/lib/components/roles-and-permissions-mapping/roles-and-permissions-mapping.component.ts

@@ -0,0 +1,504 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import {
+  AlignType,
+  FormGrid,
+  FormModel,
+  SelectOption,
+  SlideToggleOption,
+  FormControlType,
+  DynamicFormComponent,
+  DataTableComponent,
+  TableColumnSchema,
+  TableColumnType,
+} from '@ieeesa-npm/presentation';
+import { AlertType } from '@ieeesa-npm/utility';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import {
+  Permission,
+  ModifiedRolesAndPermissionsMapping,
+  RolesAndPermissionsRequestPayload,
+  Role,
+  RoleDetails,
+  RoleOrPermissionMapping,
+  RolePermissionMappingRequestPayload,
+} from '../../models/roles-and-permissions.model';
+import { RoleAndPermissionsTableType } from '../../models/roles-and-permissions-table-type.model';
+import * as screenText from '../../assets/constants.json';
+import { FormUtilityService, SharedService } from '@ieeesa-npm/shared';
+
+@Component({
+  selector: 'ieeesa-roles-and-permissions-mapping',
+  standalone: true,
+  imports: [CommonModule, DynamicFormComponent, DataTableComponent],
+  templateUrl: './roles-and-permissions-mapping.component.html',
+  styleUrls: ['./roles-and-permissions-mapping.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class RolesAndPermissionsMappingComponent implements OnInit, OnDestroy {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constants: any = screenText;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mapRolesAndPermissionsScreenTexts: any =
+    this.constants?.mapRolesAndPermissions;
+  formGroup!: FormModel;
+  colWidth: FormGrid = { xs: 12, xl: 6, sm: 12, md: 12, lg: 6 };
+  actionButtonAlign = AlignType.MIDDLE;
+  leftButtonLabel =
+    this.mapRolesAndPermissionsScreenTexts?.label?.leftButtonLabel;
+  rightButtonLabel =
+    this.mapRolesAndPermissionsScreenTexts?.label?.rightButtonLabel;
+  roles: SelectOption[] = [];
+  permissions: SelectOption[] = [];
+  appId!: string;
+  destroy$: Subject<boolean> = new Subject<boolean>();
+  tableColumnSchema: TableColumnSchema[] = [];
+  tableData: RoleOrPermissionMapping[] = [];
+  selectedRole!: RoleDetails;
+  selectedPermission!: Permission;
+  modifiedRolesAndPermissionsMapping: ModifiedRolesAndPermissionsMapping[] = [];
+  tableHeading = '';
+  rolePermissionMappingPayload: RolePermissionMappingRequestPayload = {
+    payload: {
+      appId: '',
+      permissionId: null,
+      roleId: null,
+    },
+  };
+  @Output() formCancel = new EventEmitter();
+  @ViewChild(DynamicFormComponent) dynamicFormComponent!: DynamicFormComponent;
+  constructor(
+    // eslint-disable-next-line no-unused-vars, no-empty-function, @typescript-eslint/no-unused-vars
+    private tenantAppService: TenantApplicationsService,
+    // eslint-disable-next-line no-unused-vars
+    private sharedService: SharedService,
+    // eslint-disable-next-line no-unused-vars
+    public elementRef: ElementRef,
+    // eslint-disable-next-line no-unused-vars
+    private formUtilityService: FormUtilityService // eslint-disable-next-line no-empty-function
+  ) {}
+  /**
+   * Initializes form group and all the page defaults.
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  ngOnInit(): void {
+    this.appId = this.tenantAppService.getSelectedTenantInformation()
+      ?.appId as string;
+    this.formGroup = {
+      formGroup: [
+        {
+          legend: this.mapRolesAndPermissionsScreenTexts?.legend,
+          controls: [
+            {
+              controlName: 'role',
+              label: this.mapRolesAndPermissionsScreenTexts?.label?.role,
+              type: FormControlType.SELECT,
+              dropdownOptions: this.roles,
+              supportMessage:
+                this.mapRolesAndPermissionsScreenTexts?.supportText?.role,
+              ariaLabel:
+                this.mapRolesAndPermissionsScreenTexts?.label?.ariaLabel?.role,
+              ariaDescribedById:
+                this.mapRolesAndPermissionsScreenTexts?.label?.ariaDescribedById
+                  ?.role,
+            },
+            {
+              controlName: 'permission',
+              label: this.mapRolesAndPermissionsScreenTexts?.label?.permission,
+              type: FormControlType.SELECT,
+              dropdownOptions: this.permissions,
+              supportMessage:
+                this.mapRolesAndPermissionsScreenTexts?.supportText?.permission,
+              ariaLabel:
+                this.mapRolesAndPermissionsScreenTexts?.label?.ariaLabel
+                  ?.permission,
+              ariaDescribedById:
+                this.mapRolesAndPermissionsScreenTexts?.label?.ariaDescribedById
+                  ?.permission,
+            },
+          ],
+        },
+      ],
+    };
+    this.getRoles();
+    this.getPermissions();
+    this.sharedService.isAlertClosed
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        const alertModals = document.querySelectorAll(
+          '.cdk-overlay-container ieeesa-alert'
+        );
+        if (alertModals.length) {
+          (
+            document.querySelector(
+              '.cdk-overlay-container .mat-mdc-dialog-content .ieeesa-alert-box__close-button'
+            ) as HTMLElement
+          )?.focus();
+        } else {
+          (
+            this.elementRef.nativeElement.querySelector(
+              '.cdk-overlay-container .mat-mdc-dialog-content .ieeesa-select-field mat-select'
+            ) as HTMLElement
+          )?.focus();
+        }
+      });
+  }
+  /**
+   * Constructs the role or permission table schema to display the associated mapping in a table view.
+   * @param {FormGroup[]} formGroups
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  onRoleOrPermissionSelected(formGroups: FormGroup[]): void {
+    this.tableColumnSchema = [];
+    this.modifiedRolesAndPermissionsMapping = [];
+    const formGroup = formGroups[0];
+    const role = formGroup.get('role')?.value;
+    const permission = formGroup.get('permission')?.value;
+    if (role) {
+      this.selectedRole = {
+        roleId: role.id,
+        roleName: role.name,
+      };
+      this.rolePermissionMappingPayload.payload.roleId = role?.id;
+    }
+    if (permission) {
+      this.selectedPermission = {
+        permissionId: permission.id,
+        permissionName: permission.name,
+      };
+      this.rolePermissionMappingPayload.payload.permissionId = permission?.id;
+    }
+    this.rolePermissionMappingPayload.payload.appId = this.appId;
+    if ((role && permission) || role) {
+      this.tableHeading = `${this.mapRolesAndPermissionsScreenTexts?.roleTableCaption}<strong>${role?.name}</strong>`;
+      this.tableColumnSchema.push({
+        id: 1,
+        columnDef: 'permission',
+        heading: this.mapRolesAndPermissionsScreenTexts.tableColumns.permission,
+        columnType: TableColumnType.TEXT,
+        cellData: (permissionMapping: RoleOrPermissionMapping) =>
+          permissionMapping?.roleOrPermissionName,
+      });
+    } else {
+      this.tableColumnSchema.push({
+        id: 1,
+        columnDef: 'role',
+        heading: this.mapRolesAndPermissionsScreenTexts.tableColumns.role,
+        columnType: TableColumnType.TEXT,
+        cellData: (roleMapping: RoleOrPermissionMapping) =>
+          roleMapping?.roleOrPermissionName,
+      });
+    }
+    if (permission) {
+      const permissionHeading = `${this.mapRolesAndPermissionsScreenTexts?.permissionTableCaption}<strong>${permission?.name}</strong>`;
+      this.tableHeading = role
+        ? this.tableHeading + `</br>` + permissionHeading
+        : permissionHeading;
+    }
+    this.tableColumnSchema.push({
+      id: 2,
+      columnDef: 'slideToggle',
+      heading: this.mapRolesAndPermissionsScreenTexts.tableColumns.status,
+      columnType: TableColumnType.SLIDE_TOGGLE,
+      cellData: (roleMapping: RoleOrPermissionMapping) => {
+        return {
+          id: Math.floor(Math.random() * 1000) + 1,
+          label: '',
+          ariaLabel: roleMapping.roleOrPermissionName,
+          checked: roleMapping.status,
+        };
+      },
+    });
+    this.dynamicFormComponent.isSubmitButtonDisabled = true;
+    this.getRolePermissionMapping(this.rolePermissionMappingPayload);
+  }
+  /**
+   * Gets the list of roles and displayed in the role dropdown.
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  getRoles(): void {
+    this.tenantAppService
+      .getRoles(this.appId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response) => {
+          if (response?.status) {
+            const rolesList = response?.body as Role[];
+            rolesList.map((role: Role) => {
+              this.roles.push({
+                id: role.roleId,
+                name: role.roleName,
+              });
+            });
+            this.formUtilityService.updateFormControlOptions(
+              'role',
+              'dropdownOptions',
+              this.roles,
+              this.dynamicFormComponent
+            );
+          }
+        },
+        error: (error) => {
+          this.sharedService.handleErrors(
+            error,
+            this.mapRolesAndPermissionsScreenTexts.errors
+          );
+        },
+      });
+  }
+  /**
+   * Gets the list of permissions and displayed in the permission dropdown.
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  getPermissions(): void {
+    this.tenantAppService
+      .getPermissions(this.appId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response) => {
+          if (response?.status) {
+            const permissionsList = response?.body as Permission[];
+            permissionsList.map((permission: Permission) => {
+              this.permissions.push({
+                id: permission.permissionId,
+                name: permission.permissionName,
+              });
+            });
+            this.formUtilityService.updateFormControlOptions(
+              'permission',
+              'dropdownOptions',
+              this.permissions,
+              this.dynamicFormComponent
+            );
+          }
+        },
+        error: (error) => {
+          this.sharedService.handleErrors(
+            error,
+            this.mapRolesAndPermissionsScreenTexts.errors
+          );
+        },
+      });
+  }
+  /**
+   * Gets the list of mapped roles/permissions from the backend api.
+   * @param {RolePermissionMappingRequestPayload} payload
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  getRolePermissionMapping(payload: RolePermissionMappingRequestPayload): void {
+    this.tableData = [];
+    this.tenantAppService
+      .getRolePermissionMapping(payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response) => {
+          const payloadInfo = payload.payload;
+          if (payloadInfo?.roleId && payloadInfo?.permissionId) {
+            this.tableData.push({
+              roleOrPermissionName: this.selectedPermission?.permissionName,
+              roleOrPermissionId: this.selectedPermission?.permissionId,
+              status: true,
+            });
+          } else if (payloadInfo?.roleId) {
+            this.setTableData(
+              this.permissions,
+              response.body as Permission[],
+              RoleAndPermissionsTableType.PERMISSION
+            );
+          } else {
+            this.setTableData(
+              this.roles,
+              response.body as RoleDetails[],
+              RoleAndPermissionsTableType.ROLE
+            );
+          }
+        },
+        error: (error) => {
+          const errorCodes = error?.error?.body?.errorCodes;
+          // Returns error code 3020 when mapped roles does not exist for given permission id.
+          if (errorCodes.includes('3020')) {
+            this.setTableData(this.roles, [], RoleAndPermissionsTableType.ROLE);
+          }
+          // Returns error code 3021 when mapped permissions does not exist for given role id.
+          else if (errorCodes.includes('3021')) {
+            this.setTableData(
+              this.permissions,
+              [],
+              RoleAndPermissionsTableType.PERMISSION
+            );
+          }
+          // Returns error code 3017 when role permission mapping does not exist for given role id.
+          else if (errorCodes.includes('3017')) {
+            this.tableData.push({
+              roleOrPermissionName: this.selectedPermission?.permissionName,
+              roleOrPermissionId: this.selectedPermission?.permissionId,
+              status: false,
+            });
+          } else
+            this.sharedService.handleErrors(
+              error,
+              this.mapRolesAndPermissionsScreenTexts.errors
+            );
+        },
+      });
+  }
+  /**
+   * Displaying the mapped roles and permissions data into the data table.
+   * @param {SelectOption[]} roleOrPermissions
+   * @param {RoleDetails[] | Permission[]} mappedRoleOrPermissions
+   * @param {RoleAndPermissionsTableType} tableType
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  setTableData(
+    roleOrPermissions: SelectOption[],
+    mappedRoleOrPermissions: RoleDetails[] | Permission[],
+    tableType: RoleAndPermissionsTableType
+  ): void {
+    roleOrPermissions.map((roleOrPermission) => {
+      this.tableData.push({
+        roleOrPermissionName: roleOrPermission.name,
+        roleOrPermissionId: roleOrPermission.id as string,
+        status:
+          tableType === RoleAndPermissionsTableType.ROLE
+            ? mappedRoleOrPermissions.length > 0 &&
+              (mappedRoleOrPermissions as RoleDetails[]).some(
+                (mappedRoleOrPermission: RoleDetails) =>
+                  mappedRoleOrPermission.roleId === roleOrPermission.id
+              )
+            : mappedRoleOrPermissions.length > 0 &&
+              (mappedRoleOrPermissions as Permission[]).some(
+                (mappedRoleOrPermission) =>
+                  mappedRoleOrPermission.permissionId === roleOrPermission.id
+              ),
+      });
+    });
+  }
+  /**
+   * Constructs the payload based on the roles and permissions mapping (selection or deselection).
+   * @param roleOrPermissionStatus
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  roleOrPermissionStatusChange(roleOrPermissionStatus: {
+    slideToggle: SlideToggleOption;
+    rowData: RoleOrPermissionMapping;
+  }): void {
+    if (
+      (this.selectedRole?.roleId && this.selectedPermission?.permissionId) ||
+      this.selectedRole?.roleId
+    ) {
+      if (
+        this.modifiedRolesAndPermissionsMapping.find(
+          (permission) =>
+            permission.permissionId ===
+            roleOrPermissionStatus.rowData.roleOrPermissionId
+        )
+      ) {
+        this.modifiedRolesAndPermissionsMapping.splice(
+          this.modifiedRolesAndPermissionsMapping.findIndex(
+            (permission) =>
+              permission.permissionId ===
+              roleOrPermissionStatus.rowData.roleOrPermissionId
+          ),
+          1
+        );
+      } else {
+        this.modifiedRolesAndPermissionsMapping.push({
+          roleId: this.selectedRole.roleId,
+          permissionId: roleOrPermissionStatus.rowData.roleOrPermissionId,
+          appId: this.appId,
+          status: roleOrPermissionStatus.slideToggle.checked,
+        });
+      }
+    } else if (this.selectedPermission?.permissionId) {
+      if (
+        this.modifiedRolesAndPermissionsMapping.find(
+          (role) =>
+            role.roleId === roleOrPermissionStatus.rowData.roleOrPermissionId
+        )
+      ) {
+        this.modifiedRolesAndPermissionsMapping.splice(
+          this.modifiedRolesAndPermissionsMapping.findIndex(
+            (role) =>
+              role.roleId === roleOrPermissionStatus.rowData.roleOrPermissionId
+          ),
+          1
+        );
+      } else {
+        this.modifiedRolesAndPermissionsMapping.push({
+          roleId: roleOrPermissionStatus.rowData.roleOrPermissionId,
+          permissionId: this.selectedPermission.permissionId,
+          appId: this.appId,
+          status: roleOrPermissionStatus.slideToggle.checked,
+        });
+      }
+    }
+    this.dynamicFormComponent.isSubmitButtonDisabled =
+      !this.modifiedRolesAndPermissionsMapping.length;
+  }
+  /**
+   * Submits the roles and permissions mappings to the server.
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  onMapAndPermissionsFormSubmit(): void {
+    const payload: RolesAndPermissionsRequestPayload = {
+      payload: this.modifiedRolesAndPermissionsMapping,
+    };
+    this.dynamicFormComponent.isSubmitButtonDisabled = true;
+    this.modifiedRolesAndPermissionsMapping = [];
+    this.tenantAppService
+      .saveRolePermissionMapping(payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response) => {
+          if (response?.status) {
+            this.sharedService.showAlertMessage(
+              AlertType.SUCCESS,
+              this.mapRolesAndPermissionsScreenTexts.message.success
+                .rolesAndPermissionsSubmission
+            );
+          }
+        },
+        error: (error) => {
+          this.sharedService.handleErrors(
+            error,
+            this.mapRolesAndPermissionsScreenTexts.errors
+          );
+        },
+      });
+  }
+  /**
+   * Closes the map and permissions modal.
+   * @memberof MapPermissionsRolesComponent
+   * @returns {void}
+   */
+  onMapAndPermissionsFormCancel(): void {
+    this.formCancel.emit();
+  }
+  /**
+   * Performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
+   * @memberof ViewTenantDetailsComponent
+   */
+  ngOnDestroy(): void {
+    this.destroy$?.next(true);
+    this.destroy$?.unsubscribe();
+  }
+}

package/src/lib/components/tenant-basic-details/tenant-basic-details.component.html

@@ -0,0 +1,44 @@
+<div *ngIf="basicInfo" class="ieeesa-tenant-basic-info d-flex flex-start flex-column">
+  <p class="ieeesa-body-color-sm-14 mb-0">{{ basicDetailTexts.title }}</p>
+  <p class="ieeesa-body-md-16">{{ basicInfo.appTitle }}</p>
+  <p class="ieeesa-body-color-sm-14 mb-2">{{ basicDetailTexts.logo }}</p>
+  <ng-container>
+    <ieeesa-image-preview
+      class="pb-3"
+      [imageUrl]="imageUrl"
+    ></ieeesa-image-preview>
+  </ng-container>
+  <span class="ieeesa-body-color-sm-14 mb-0">{{
+    basicDetailTexts.heading
+  }}</span>
+  <p class="ieeesa-title-sm-16">{{ basicInfo.appHeading }}</p>
+  <span class="ieeesa-body-color-sm-14 mb-0">{{
+    basicDetailTexts.description
+  }}</span>
+  <p class="ieeesa-title-sm-16 me-4">{{ basicInfo.appDescription }}</p>
+  <span class="ieeesa-body-color-sm-14 mb-2">{{
+    basicDetailTexts.bgColor
+  }}</span>
+  <p
+    class="ieeesa-tenant-basic-info__bgColor"
+    [ngStyle]="{ 'background-color': basicInfo.backgroundColor }"
+  ></p>
+  <span class="ieeesa-body-color-sm-14 mb-0">{{
+    basicDetailTexts.helpLink
+  }}</span>
+  <p class="ieeesa-title-sm-16">{{ basicInfo.appHelpLink }}</p>
+  <span class="ieeesa-body-color-sm-14 mb-0">{{
+    basicDetailTexts.listOfFeatures
+  }}</span>
+  <ul [ngClass]="isMobileView ? '' : 'd-flex gap-5'">
+    <li class="ieeesa-body-md-16" *ngFor="let feature of basicInfo.features">
+      {{ feature?.featureName }}
+    </li>
+  </ul>
+  <span class="ieeesa-body-color-sm-14 mb-0">{{
+    basicDetailTexts.domainURL
+  }}</span>
+  <p class="ieeesa-title-sm-16">{{ basicInfo.appDomainUrl }}</p>
+  <span class="ieeesa-body-color-sm-14 mb-0">{{ basicDetailTexts.type }}</span>
+  <p class="ieeesa-body-md-16">{{ selectedAppTypeLabel }}</p>
+</div>

package/src/lib/components/tenant-basic-details/tenant-basic-details.component.scss

@@ -0,0 +1,16 @@
+@import "styles.scss";
+
+.ieeesa-tenant-basic-info {
+  .ieeesa-body-color-sm-14 {
+    color: $ieeesa-dark-grey !important;
+  }
+  &__bgColor {
+    width: 1.85em;
+    height: 1.85em;
+    border: 1px solid $ieeesa-background-gray;
+  }
+  .ieeesa-body-md-16,
+  .ieeesa-title-sm-16 {
+    color: $ieeesa-background-dark-color !important;
+  }
+}

package/src/lib/components/tenant-basic-details/tenant-basic-details.component.spec.ts

@@ -0,0 +1,115 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TenantsMocks } from '../../assets/tenants-mock';
+import { TenantBasicDetailsComponent } from './tenant-basic-details.component';
+import { HttpService } from '@ieeesa-npm/utility';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SharedService } from '@ieeesa-npm/shared';
+import {
+  HttpBackend,
+  HttpClient,
+  HttpClientModule,
+  HttpErrorResponse,
+  HttpHandler,
+} from '@angular/common/http';
+import { FileUploadService } from '@presentation/services/file-upload.service';
+import { Observable } from 'rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TenantApplicationsService } from '@ieeesa-npm/tenants';
+
+describe('TenantBasicDetailsComponent', () => {
+  let component: TenantBasicDetailsComponent;
+  let fixture: ComponentFixture<TenantBasicDetailsComponent>;
+  let fileUploadService: FileUploadService;
+  let sharedService: SharedService;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        TenantBasicDetailsComponent,
+        MatDialogModule,
+        HttpClientModule,
+      ],
+      providers: [
+        SharedService,
+        HttpClient,
+        FileUploadService,
+        HttpHandler,
+        HttpBackend,
+        HttpService,
+        TenantApplicationsService,
+      ],
+    });
+    fixture = TestBed.createComponent(TenantBasicDetailsComponent);
+    component = fixture.componentInstance;
+    fileUploadService = TestBed.inject(FileUploadService);
+    sharedService = TestBed.inject(SharedService);
+    fixture.detectChanges();
+  });
+  const presignedUrl = TenantsMocks.mockPreSignedUrlResponse.body;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  describe('#tenantDetails()', () => {
+    it('should set tenant details', () => {
+      component.tenantDetails =
+        TenantsMocks.viewTenantDetailsMockResponse?.body;
+      expect(component.logo).toEqual(
+        TenantsMocks.viewTenantDetailsMockResponse?.body?.appLogo
+      );
+      expect(component.selectedAppType).toEqual(
+        TenantsMocks.viewTenantDetailsMockResponse?.body?.appType
+      );
+    });
+  });
+
+  describe('#getAppType', () => {
+    it('should get app types', () => {
+      component['tenantAppService'].setApplicationType(
+        TenantsMocks.mockAppTypesFormattedResponse
+      );
+      component.basicInfo = TenantsMocks.viewTenantDetailsMockResponse.body;
+      component.getAppType();
+      expect(component.selectedAppTypeLabel).toEqual(
+        TenantsMocks.mockAppTypesFormattedResponse[0].label
+      );
+    });
+  });
+  describe('#getFileDownloadPresignedUrls', () => {
+    it('should call get file download presigned urls', () => {
+      const mockPresignedUrlResponse = TenantsMocks.mockPreSignedUrlResponse;
+      const fileName = 'Test.jpg';
+      component.imageUrl = presignedUrl;
+      spyOn(fileUploadService, 'getFileDownloadPresignedUrls').and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.next(mockPresignedUrlResponse.body);
+        })
+      );
+      component.getFileDownloadPresignedUrls(fileName);
+      expect(component.imageUrl).toBe(
+        TenantsMocks.mockPreSignedUrlResponse.body
+      );
+    });
+    it('should throw and handle global error in retrieving file download presigned urls', () => {
+      const mockServerErrorResponse = new HttpErrorResponse({
+        error: 'test',
+      });
+      spyOn(sharedService, 'handleErrors');
+      spyOn(fileUploadService, 'getFileDownloadPresignedUrls').and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.error(mockServerErrorResponse);
+        })
+      );
+      component.getFileDownloadPresignedUrls('presigned-url.jpg');
+      expect(sharedService.handleErrors).toHaveBeenCalled();
+    });
+  });
+
+  describe('#ngOnDestroy', () => {
+    it('should perform necessary cleanup tasks on ngOnDestroy', () => {
+      spyOn(component.destroy$, 'unsubscribe');
+      component.ngOnDestroy();
+      expect(component.destroy$.unsubscribe).toHaveBeenCalled();
+      expect(component.destroy$.next).toBeTruthy();
+    });
+  });
+});