117287: Removed method calls returning observables from the Group form

2025-10-07 01:54:15 +00:00 · 2024-09-03 22:08:38 +02:00
parent d3019e4006
commit 680ed3bccf
3 changed files with 259 additions and 253 deletions
--- a/src/app/access-control/group-registry/group-form/group-form.component.html
+++ b/src/app/access-control/group-registry/group-form/group-form.component.html
@@ -2,7 +2,7 @@
  <div class="group-form row">
    <div class="col-12">

-      <div *ngIf="groupDataService.getActiveGroup() | async; then editheader; else createHeader"></div>
+      <div *ngIf="activeGroup$ | async; then editheader; else createHeader"></div>

      <ng-template #createHeader>
        <h2 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h2>
@@ -23,11 +23,15 @@
        </h2>
      </ng-template>

-      <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
-                [content]="messagePrefix + '.alert.permanent'"></ds-alert>
-      <ds-alert *ngIf="!(canEdit$ | async) && (groupDataService.getActiveGroup() | async)" [type]="AlertTypeEnum.Warning"
-                [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName((getLinkedDSO(groupBeingEdited) | async)?.payload), comcol: (getLinkedDSO(groupBeingEdited) | async)?.payload?.type, comcolEditRolesRoute: (getLinkedEditRolesRoute(groupBeingEdited) | async) })">
-      </ds-alert>
+      <ng-container *ngIf="(activeGroup$ | async) as groupBeingEdited">
+        <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertType.Warning"
+                  [content]="messagePrefix + '.alert.permanent'"></ds-alert>
+        <ng-container *ngIf="(activeGroupLinkedDSO$ | async) as activeGroupLinkedDSO">
+          <ds-alert *ngIf="!(canEdit$ | async)" [type]="AlertType.Warning"
+                    [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName(activeGroupLinkedDSO), comcol: activeGroupLinkedDSO.type, comcolEditRolesRoute: (linkedEditRolesRoute$ | async) })">
+          </ds-alert>
+        </ng-container>
+      </ng-container>

      <ds-form [formId]="formId"
               [formModel]="formModel"
@@ -39,7 +43,7 @@
          <button (click)="onCancel()"
                  class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
        </div>
-        <div after *ngIf="groupBeingEdited != null" class="btn-group">
+        <div after *ngIf="(activeGroup$ | async) as groupBeingEdited" class="btn-group">
          <button class="btn btn-danger delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
                  (click)="delete()">
            <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
@@ -47,15 +51,14 @@
        </div>
      </ds-form>

-      <div class="mb-5">
-        <ds-members-list *ngIf="groupBeingEdited != null"
-                         [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
-      </div>
-      <ds-subgroups-list *ngIf="groupBeingEdited != null"
-                         [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
-
-
-
+      <ng-container *ngIf="(activeGroup$ | async) as groupBeingEdited">
+        <div class="mb-5">
+          <ds-members-list *ngIf="groupBeingEdited != null"
+                           [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
+        </div>
+        <ds-subgroups-list *ngIf="groupBeingEdited != null"
+                           [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
+      </ng-container>
    </div>
  </div>
 </div>
--- a/src/app/access-control/group-registry/group-form/group-form.component.spec.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.spec.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { UntypedFormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { Observable, of as observableOf } from 'rxjs';
 import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
@@ -29,8 +29,6 @@ import { GroupMock, GroupMock2 } from '../../../shared/testing/group-mock';
 import { GroupFormComponent } from './group-form.component';
 import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
-import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
-import { TranslateLoaderMock } from '../../../shared/testing/translate-loader.mock';
 import { RouterMock } from '../../../shared/mocks/router.mock';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { Operation } from 'fast-json-patch';
@@ -38,23 +36,24 @@ import { ValidateGroupExists } from './validators/group-exists.validator';
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';

 describe('GroupFormComponent', () => {
  let component: GroupFormComponent;
  let fixture: ComponentFixture<GroupFormComponent>;
-  let translateService: TranslateService;
  let builderService: FormBuilderService;
  let ePersonDataServiceStub: any;
  let groupsDataServiceStub: any;
  let dsoDataServiceStub: any;
  let authorizationService: AuthorizationDataService;
  let notificationService: NotificationsServiceStub;
-  let router;
+  let router: RouterMock;
+  let route: ActivatedRouteStub;

-  let groups;
-  let groupName;
-  let groupDescription;
-  let expected;
+  let groups: Group[];
+  let groupName: string;
+  let groupDescription: string;
+  let expected: Group;

  beforeEach(waitForAsync(() => {
    groups = [GroupMock, GroupMock2];
@@ -69,6 +68,15 @@ describe('GroupFormComponent', () => {
          }
        ],
      },
+      object: createSuccessfulRemoteDataObject$(undefined),
+      _links: {
+        self: {
+          href: 'group-selflink',
+        },
+        object: {
+          href: 'group-objectlink',
+        }
+      },
    });
    ePersonDataServiceStub = {};
    groupsDataServiceStub = {
@@ -105,7 +113,14 @@ describe('GroupFormComponent', () => {
      create(group: Group): Observable<RemoteData<Group>> {
        this.allGroups = [...this.allGroups, group];
        this.createdGroup = Object.assign({}, group, {
-          _links: { self: { href: 'group-selflink' } }
+          _links: {
+            self: {
+              href: 'group-selflink',
+            },
+            object: {
+              href: 'group-objectlink',
+            },
+          },
        });
        return createSuccessfulRemoteDataObject$(this.createdGroup);
      },
@@ -187,17 +202,13 @@ describe('GroupFormComponent', () => {
        return typeof value === 'object' && value !== null;
      }
    });
-    translateService = getMockTranslateService();
    router = new RouterMock();
+    route = new ActivatedRouteStub();
    notificationService = new NotificationsServiceStub();
+
    return TestBed.configureTestingModule({
      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateLoaderMock
-          }
-        }),
+        TranslateModule.forRoot(),
      ],
      declarations: [GroupFormComponent],
      providers: [
@@ -214,14 +225,11 @@ describe('GroupFormComponent', () => {
        { provide: Store, useValue: {} },
        { provide: RemoteDataBuildService, useValue: {} },
        { provide: HALEndpointService, useValue: {} },
-        {
-          provide: ActivatedRoute,
-          useValue: { data: observableOf({ dso: { payload: {} } }), params: observableOf({}) }
-        },
+        { provide: ActivatedRoute, useValue: route },
        { provide: Router, useValue: router },
        { provide: AuthorizationDataService, useValue: authorizationService },
      ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
  }));

@@ -234,8 +242,8 @@ describe('GroupFormComponent', () => {
  describe('when submitting the form', () => {
    beforeEach(() => {
      spyOn(component.submitForm, 'emit');
-      component.groupName.value = groupName;
-      component.groupDescription.value = groupDescription;
+      component.groupName.setValue(groupName);
+      component.groupDescription.setValue(groupDescription);
    });
    describe('without active Group', () => {
      beforeEach(() => {
@@ -243,14 +251,22 @@ describe('GroupFormComponent', () => {
        fixture.detectChanges();
      });

-      it('should emit a new group using the correct values', (async () => {
-        await fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expected);
-        });
+      it('should emit a new group using the correct values', (() => {
+        expect(component.submitForm.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+          name: groupName,
+          metadata: {
+            'dc.description': [
+              {
+                value: groupDescription,
+              },
+            ],
+          },
+        }));
      }));
    });
+
    describe('with active Group', () => {
-      let expected2;
+      let expected2: Group;
      beforeEach(() => {
        expected2 = Object.assign(new Group(), {
          name: 'newGroupName',
@@ -261,15 +277,24 @@ describe('GroupFormComponent', () => {
              }
            ],
          },
+          object: createSuccessfulRemoteDataObject$(undefined),
+          _links: {
+            self: {
+              href: 'group-selflink',
+            },
+            object: {
+              href: 'group-objectlink',
+            },
+          },
        });
        spyOn(groupsDataServiceStub, 'getActiveGroup').and.returnValue(observableOf(expected));
        spyOn(groupsDataServiceStub, 'patch').and.returnValue(createSuccessfulRemoteDataObject$(expected2));
-        component.groupName.value = 'newGroupName';
-        component.onSubmit();
-        fixture.detectChanges();
+        component.ngOnInit();
      });

      it('should edit with name and description operations', () => {
+        component.groupName.setValue('newGroupName');
+        component.onSubmit();
        const operations = [{
          op: 'add',
          path: '/metadata/dc.description',
@@ -283,9 +308,8 @@ describe('GroupFormComponent', () => {
      });

      it('should edit with description operations', () => {
-        component.groupName.value = null;
+        component.groupName.setValue(null);
        component.onSubmit();
-        fixture.detectChanges();
        const operations = [{
          op: 'add',
          path: '/metadata/dc.description',
@@ -295,9 +319,9 @@ describe('GroupFormComponent', () => {
      });

      it('should edit with name operations', () => {
-        component.groupDescription.value = null;
+        component.groupName.setValue('newGroupName');
+        component.groupDescription.setValue(null);
        component.onSubmit();
-        fixture.detectChanges();
        const operations = [{
          op: 'replace',
          path: '/name',
@@ -306,12 +330,13 @@ describe('GroupFormComponent', () => {
        expect(groupsDataServiceStub.patch).toHaveBeenCalledWith(expected, operations);
      });

-      it('should emit the existing group using the correct new values', (async () => {
-        await fixture.whenStable().then(() => {
-          expect(component.submitForm.emit).toHaveBeenCalledWith(expected2);
-        });
-      }));
+      it('should emit the existing group using the correct new values', () => {
+        component.onSubmit();
+        expect(component.submitForm.emit).toHaveBeenCalledWith(expected2);
+      });
+
      it('should emit success notification', () => {
+        component.onSubmit();
        expect(notificationService.success).toHaveBeenCalled();
      });
    });
@@ -326,11 +351,8 @@ describe('GroupFormComponent', () => {


  describe('check form validation', () => {
-    let groupCommunity;
-
    beforeEach(() => {
      groupName = 'testName';
-      groupCommunity = 'testgroupCommunity';
      groupDescription = 'testgroupDescription';

      expected = Object.assign(new Group(), {
@@ -342,8 +364,17 @@ describe('GroupFormComponent', () => {
            }
          ],
        },
+        _links: {
+          self: {
+            href: 'group-selflink',
+          },
+          object: {
+            href: 'group-objectlink',
+          },
+        },
      });
      spyOn(component.submitForm, 'emit');
+      spyOn(dsoDataServiceStub, 'findByHref').and.returnValue(observableOf(expected));

      fixture.detectChanges();
      component.initialisePage();
@@ -393,21 +424,20 @@ describe('GroupFormComponent', () => {
  });

  describe('delete', () => {
-    let deleteButton;
-
-    beforeEach(() => {
-      component.initialisePage();
+    let deleteButton: HTMLButtonElement;

+    beforeEach(async () => {
+      spyOn(groupsDataServiceStub, 'delete').and.callThrough();
+      component.activeGroup$ = observableOf({
+        id: 'active-group',
+        permanent: false,
+      } as Group);
      component.canEdit$ = observableOf(true);
-      component.groupBeingEdited = {
-        permanent: false
-      } as Group;
+
+      component.initialisePage();

      fixture.detectChanges();
      deleteButton = fixture.debugElement.query(By.css('.delete-button')).nativeElement;
-
-      spyOn(groupsDataServiceStub, 'delete').and.callThrough();
-      spyOn(groupsDataServiceStub, 'getActiveGroup').and.returnValue(observableOf({ id: 'active-group' }));
    });

    describe('if confirmed via modal', () => {
--- a/src/app/access-control/group-registry/group-form/group-form.component.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, HostListener, OnDestroy, OnInit, Output, ChangeDetectorRef } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { UntypedFormGroup, AbstractControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
@@ -10,13 +10,10 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
-  ObservedValueOf,
-  combineLatest as observableCombineLatest,
  Observable,
-  of as observableOf,
-  Subscription,
+  Subscription, combineLatest,
 } from 'rxjs';
-import { catchError, map, switchMap, take, filter, debounceTime } from 'rxjs/operators';
+import { map, switchMap, take, debounceTime, startWith, filter } from 'rxjs/operators';
 import { getCollectionEditRolesRoute } from '../../../collection-page/collection-page-routing-paths';
 import { getCommunityEditRolesRoute } from '../../../community-page/community-page-routing-paths';
 import { DSpaceObjectDataService } from '../../../core/data/dspace-object-data.service';
@@ -25,21 +22,20 @@ import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { RequestService } from '../../../core/data/request.service';
-import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
 import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { Group } from '../../../core/eperson/models/group.model';
 import { Collection } from '../../../core/shared/collection.model';
 import { Community } from '../../../core/shared/community.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import {
+  getAllCompletedRemoteData,
  getRemoteDataPayload,
  getFirstSucceededRemoteData,
  getFirstCompletedRemoteData,
-  getFirstSucceededRemoteDataPayload
 } from '../../../core/shared/operators';
 import { AlertType } from '../../../shared/alert/aletr-type';
 import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
-import { hasValue, isNotEmpty, hasValueOperator } from '../../../shared/empty.util';
+import { hasValue, isNotEmpty, hasValueOperator, hasNoValue } from '../../../shared/empty.util';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
@@ -68,9 +64,9 @@ export class GroupFormComponent implements OnInit, OnDestroy {
  /**
   * Dynamic models for the inputs of form
   */
-  groupName: DynamicInputModel;
-  groupCommunity: DynamicInputModel;
-  groupDescription: DynamicTextAreaModel;
+  groupName: AbstractControl;
+  groupCommunity: AbstractControl;
+  groupDescription: AbstractControl;

  /**
   * A list of all dynamic input models
@@ -113,21 +109,30 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   */
  subs: Subscription[] = [];

-  /**
-   * Group currently being edited
-   */
-  groupBeingEdited: Group;
-
  /**
   * Observable whether or not the logged in user is allowed to delete the Group & doesn't have a linked object (community / collection linked to workspace group
   */
  canEdit$: Observable<boolean>;

  /**
-   * The AlertType enumeration
-   * @type {AlertType}
+   * The current {@link Group}
   */
-  public AlertTypeEnum = AlertType;
+  activeGroup$: Observable<Group>;
+
+  /**
+   * The current {@link Group}'s linked {@link Community}/{@link Collection}
+   */
+  activeGroupLinkedDSO$: Observable<DSpaceObject>;
+
+  /**
+   * Link to the current {@link Group}'s {@link Community}/{@link Collection} edit role tab
+   */
+  linkedEditRolesRoute$: Observable<string>;
+
+  /**
+   * The AlertType enumeration
+   */
+  public readonly AlertType = AlertType;

  /**
   * Subscription to email field value change
@@ -137,124 +142,110 @@ export class GroupFormComponent implements OnInit, OnDestroy {

  constructor(
    public groupDataService: GroupDataService,
-    private ePersonDataService: EPersonDataService,
-    private dSpaceObjectDataService: DSpaceObjectDataService,
-    private formBuilderService: FormBuilderService,
-    private translateService: TranslateService,
-    private notificationsService: NotificationsService,
-    private route: ActivatedRoute,
+    protected dSpaceObjectDataService: DSpaceObjectDataService,
+    protected formBuilderService: FormBuilderService,
+    protected translateService: TranslateService,
+    protected notificationsService: NotificationsService,
+    protected route: ActivatedRoute,
    protected router: Router,
-    private authorizationService: AuthorizationDataService,
-    private modalService: NgbModal,
+    protected authorizationService: AuthorizationDataService,
+    protected modalService: NgbModal,
    public requestService: RequestService,
    protected changeDetectorRef: ChangeDetectorRef,
    public dsoNameService: DSONameService,
  ) {
  }

-  ngOnInit() {
+  ngOnInit(): void {
+    if (this.route.snapshot.params.groupId !== 'newGroup') {
+      this.setActiveGroup(this.route.snapshot.params.groupId);
+    }
+    this.activeGroup$ = this.groupDataService.getActiveGroup();
+    this.activeGroupLinkedDSO$ = this.getActiveGroupLinkedDSO();
+    this.linkedEditRolesRoute$ = this.getLinkedEditRolesRoute();
+    this.canEdit$ = this.activeGroupLinkedDSO$.pipe(
+      filter((dso: DSpaceObject) => hasNoValue(dso)),
+      switchMap(() => this.activeGroup$),
+      hasValueOperator(),
+      switchMap((group: Group) => this.authorizationService.isAuthorized(FeatureID.CanDelete, group.self)),
+      startWith(false),
+    );
    this.initialisePage();
  }

  initialisePage() {
-    this.subs.push(this.route.params.subscribe((params) => {
-      if (params.groupId !== 'newGroup') {
-        this.setActiveGroup(params.groupId);
-      }
-    }));
-    this.canEdit$ = this.groupDataService.getActiveGroup().pipe(
-      hasValueOperator(),
-      switchMap((group: Group) => {
-        return observableCombineLatest(
-          this.authorizationService.isAuthorized(FeatureID.CanDelete, isNotEmpty(group) ? group.self : undefined),
-          this.hasLinkedDSO(group),
-          (isAuthorized: ObservedValueOf<Observable<boolean>>, hasLinkedDSO: ObservedValueOf<Observable<boolean>>) => {
-            return isAuthorized && !hasLinkedDSO;
-          });
+    const groupNameModel = new DynamicInputModel({
+      id: 'groupName',
+      label: this.translateService.instant(`${this.messagePrefix}.groupName`),
+      name: 'groupName',
+      validators: {
+        required: null,
+      },
+      required: true,
+    });
+    const groupCommunityModel = new DynamicInputModel({
+      id: 'groupCommunity',
+      label: this.translateService.instant(`${this.messagePrefix}.groupCommunity`),
+      name: 'groupCommunity',
+      required: false,
+      readOnly: true,
+    });
+    const groupDescriptionModel = new DynamicTextAreaModel({
+      id: 'groupDescription',
+      label: this.translateService.instant(`${this.messagePrefix}.groupDescription`),
+      name: 'groupDescription',
+      required: false,
+      spellCheck: environment.form.spellCheck,
+    });
+    this.formModel = [
+      groupNameModel,
+      groupDescriptionModel,
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.groupName = this.formGroup.get('groupName');
+    this.groupDescription = this.formGroup.get('groupDescription');
+
+    if (hasValue(this.groupName)) {
+      this.groupName.setAsyncValidators(ValidateGroupExists.createValidator(this.groupDataService));
+      this.groupNameValueChangeSubscribe = this.groupName.valueChanges.pipe(debounceTime(300)).subscribe(() => {
+        this.changeDetectorRef.detectChanges();
+      });
+    }
+
+    this.subs.push(
+      combineLatest([
+        this.activeGroup$,
+        this.canEdit$,
+        this.activeGroupLinkedDSO$.pipe(take(1)),
+      ]).subscribe(([activeGroup, canEdit, linkedObject]) => {
+
+        if (activeGroup != null) {
+
+          // Disable group name exists validator
+          this.formGroup.controls.groupName.clearAsyncValidators();
+
+          if (linkedObject?.name) {
+            this.formBuilderService.insertFormGroupControl(1, this.formGroup, this.formModel, groupCommunityModel);
+            this.groupDescription = this.formGroup.get('groupCommunity');
+            this.formGroup.patchValue({
+              groupName: activeGroup.name,
+              groupCommunity: linkedObject?.name ?? '',
+              groupDescription: activeGroup.firstMetadataValue('dc.description'),
+            });
+          } else {
+            this.formGroup.patchValue({
+              groupName: activeGroup.name,
+              groupDescription: activeGroup.firstMetadataValue('dc.description'),
+            });
+          }
+          setTimeout(() => {
+            if (!canEdit || activeGroup.permanent) {
+              this.formGroup.disable();
+            }
+          }, 200);
+        }
      })
    );
-    observableCombineLatest(
-      this.translateService.get(`${this.messagePrefix}.groupName`),
-      this.translateService.get(`${this.messagePrefix}.groupCommunity`),
-      this.translateService.get(`${this.messagePrefix}.groupDescription`)
-    ).subscribe(([groupName, groupCommunity, groupDescription]) => {
-      this.groupName = new DynamicInputModel({
-        id: 'groupName',
-        label: groupName,
-        name: 'groupName',
-        validators: {
-          required: null,
-        },
-        required: true,
-      });
-      this.groupCommunity = new DynamicInputModel({
-        id: 'groupCommunity',
-        label: groupCommunity,
-        name: 'groupCommunity',
-        required: false,
-        readOnly: true,
-      });
-      this.groupDescription = new DynamicTextAreaModel({
-        id: 'groupDescription',
-        label: groupDescription,
-        name: 'groupDescription',
-        required: false,
-        spellCheck: environment.form.spellCheck,
-      });
-      this.formModel = [
-        this.groupName,
-        this.groupDescription,
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-
-      if (!!this.formGroup.controls.groupName) {
-        this.formGroup.controls.groupName.setAsyncValidators(ValidateGroupExists.createValidator(this.groupDataService));
-        this.groupNameValueChangeSubscribe = this.groupName.valueChanges.pipe(debounceTime(300)).subscribe(() => {
-          this.changeDetectorRef.detectChanges();
-        });
-      }
-
-      this.subs.push(
-        observableCombineLatest(
-          this.groupDataService.getActiveGroup(),
-          this.canEdit$,
-          this.groupDataService.getActiveGroup()
-            .pipe(filter((activeGroup) => hasValue(activeGroup)),switchMap((activeGroup) => this.getLinkedDSO(activeGroup).pipe(getFirstSucceededRemoteDataPayload())))
-        ).subscribe(([activeGroup, canEdit, linkedObject]) => {
-
-          if (activeGroup != null) {
-
-            // Disable group name exists validator
-            this.formGroup.controls.groupName.clearAsyncValidators();
-
-            this.groupBeingEdited = activeGroup;
-
-            if (linkedObject?.name) {
-              this.formBuilderService.insertFormGroupControl(1, this.formGroup, this.formModel, this.groupCommunity);
-              this.formGroup.patchValue({
-                groupName: activeGroup.name,
-                groupCommunity: linkedObject?.name ?? '',
-                groupDescription: activeGroup.firstMetadataValue('dc.description'),
-              });
-            } else {
-              this.formModel = [
-                this.groupName,
-                this.groupDescription,
-              ];
-              this.formGroup.patchValue({
-                groupName: activeGroup.name,
-                groupDescription: activeGroup.firstMetadataValue('dc.description'),
-              });
-            }
-            setTimeout(() => {
-              if (!canEdit || activeGroup.permanent) {
-                this.formGroup.disable();
-              }
-            }, 200);
-          }
-        })
-      );
-    });
  }

  /**
@@ -273,25 +264,22 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   * Emit the updated/created eperson using the EventEmitter submitForm
   */
  onSubmit() {
-    this.groupDataService.getActiveGroup().pipe(take(1)).subscribe(
-      (group: Group) => {
-        const values = {
+    this.activeGroup$.pipe(take(1)).subscribe((group: Group) => {
+      if (group === null) {
+        this.createNewGroup({
          name: this.groupName.value,
          metadata: {
            'dc.description': [
              {
-                value: this.groupDescription.value
-              }
-            ]
+                value: this.groupDescription.value,
+              },
+            ],
          },
-        };
-        if (group === null) {
-          this.createNewGroup(values);
-        } else {
-          this.editGroup(group);
-        }
+        });
+      } else {
+        this.editGroup(group);
      }
-    );
+    });
  }

  /**
@@ -397,7 +385,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   * @param groupSelfLink   SelfLink of group to set as active
   */
  setActiveGroupWithLink(groupSelfLink: string) {
-    this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((activeGroup: Group) => {
+    this.activeGroup$.pipe(take(1)).subscribe((activeGroup: Group) => {
      if (activeGroup === null) {
        this.groupDataService.cancelEditGroup();
        this.groupDataService.findByHref(groupSelfLink, false, false, followLink('subgroups'), followLink('epersons'), followLink('object'))
@@ -416,7 +404,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   * It'll either show a success or error message depending on whether the delete was successful or not.
   */
  delete() {
-    this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((group: Group) => {
+    this.activeGroup$.pipe(take(1)).subscribe((group: Group) => {
      const modalRef = this.modalService.open(ConfirmationModalComponent);
      modalRef.componentInstance.dso = group;
      modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-group.modal.header';
@@ -460,52 +448,37 @@ export class GroupFormComponent implements OnInit, OnDestroy {
  }

  /**
-   * Check if group has a linked object (community or collection linked to a workflow group)
-   * @param group
+   * Get the active {@link Group}'s linked object if it has one ({@link Community} or {@link Collection} linked to a
+   * workflow group)
   */
-  hasLinkedDSO(group: Group): Observable<boolean> {
-    if (hasValue(group) && hasValue(group._links.object.href)) {
-      return this.getLinkedDSO(group).pipe(
-        map((rd: RemoteData<DSpaceObject>) => {
-          return hasValue(rd) && hasValue(rd.payload);
-        }),
-        catchError(() => observableOf(false)),
-      );
-    }
+  getActiveGroupLinkedDSO(): Observable<DSpaceObject> {
+    return this.activeGroup$.pipe(
+      hasValueOperator(),
+      switchMap((group: Group) => {
+        if (group.object === undefined) {
+          return this.dSpaceObjectDataService.findByHref(group._links.object.href);
+        }
+        return group.object;
+      }),
+      getAllCompletedRemoteData(),
+      getRemoteDataPayload(),
+    );
  }

  /**
-   * Get group's linked object if it has one (community or collection linked to a workflow group)
-   * @param group
+   * Get the route to the edit roles tab of the active {@link Group}'s linked object (community or collection linked
+   * to a workflow group) if it has one
   */
-  getLinkedDSO(group: Group): Observable<RemoteData<DSpaceObject>> {
-    if (hasValue(group) && hasValue(group._links.object.href)) {
-      if (group.object === undefined) {
-        return this.dSpaceObjectDataService.findByHref(group._links.object.href);
-      }
-      return group.object;
-    }
-  }
-
-  /**
-   * Get the route to the edit roles tab of the group's linked object (community or collection linked to a workflow group) if it has one
-   * @param group
-   */
-  getLinkedEditRolesRoute(group: Group): Observable<string> {
-    if (hasValue(group) && hasValue(group._links.object.href)) {
-      return this.getLinkedDSO(group).pipe(
-        map((rd: RemoteData<DSpaceObject>) => {
-          if (hasValue(rd) && hasValue(rd.payload)) {
-            const dso = rd.payload;
-            switch ((dso as any).type) {
-              case Community.type.value:
-                return getCommunityEditRolesRoute(rd.payload.id);
-              case Collection.type.value:
-                return getCollectionEditRolesRoute(rd.payload.id);
-            }
-          }
-        })
-      );
-    }
+  getLinkedEditRolesRoute(): Observable<string> {
+    return this.activeGroupLinkedDSO$.pipe(
+      map((dso: DSpaceObject) => {
+        switch ((dso as any).type) {
+          case Community.type.value:
+            return getCommunityEditRolesRoute(dso.id);
+          case Collection.type.value:
+            return getCollectionEditRolesRoute(dso.id);
+        }
+      })
+    );
  }
 }