SF-3603 Convert to Angular standalone components (#3535)

Author: siltomato

.grit/patterns/xforge_common_absolute_only.md

@@ -18,9 +18,9 @@ language js
 ## Basic example
 
 ```ts
-import { UICommonModule } from "../../xforge-common/ui-common.module";
+import { UserService } from "../../xforge-common/user.service";
 ```
 
 ```ts
-import { UICommonModule } from "xforge-common/ui-common.module";
+import { UserService } from "xforge-common/user.service";
 ```

src/SIL.XForge.Scripture/ClientApp/.storybook/preview.ts

@@ -1,15 +1,16 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { importProvidersFrom } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import { applicationConfig } from '@storybook/angular';
-import docJson from '../documentation.json';
-import { I18nStoryDecorator, I18nStoryModule } from 'xforge-common/i18n-story.module';
+import { I18nStoryDecorator, provideI18nStory } from 'xforge-common/i18n-story';
 import { I18nService } from 'xforge-common/i18n.service';
 import { APP_ROOT_ELEMENT_SELECTOR, InAppRootOverlayContainer } from 'xforge-common/overlay-container';
+import { provideUICommon } from 'xforge-common/ui-common-providers';
 import { getI18nLocales } from 'xforge-common/utils';
+import docJson from '../documentation.json';
+import { provideSFTabs } from '../src/app/shared/sf-tab-group';
 
 setCompodocJson(docJson);
 
@@ -42,8 +43,10 @@ export const decorators = [
   I18nStoryDecorator,
   applicationConfig({
     providers: [
-      importProvidersFrom(I18nStoryModule),
+      provideI18nStory(),
       provideAnimations(),
+      provideUICommon(),
+      provideSFTabs(),
       { provide: APP_ROOT_ELEMENT_SELECTOR, useValue: 'storybook-root' },
       { provide: OverlayContainer, useClass: InAppRootOverlayContainer }
     ]

src/SIL.XForge.Scripture/ClientApp/.storybook/util/mat-dialog-launch.ts

@@ -1,9 +1,7 @@
-import { CommonModule } from '@angular/common';
 import { Component, Inject, InjectionToken, Injector, OnInit, Provider } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslocoModule } from '@ngneat/transloco';
 import { StoryFn } from '@storybook/angular';
-import { UICommonModule } from 'xforge-common/ui-common.module';
 import { hasProp } from '../../src/type-utils';
 
 export function getOverlays(element: HTMLElement): HTMLElement[] {
@@ -25,7 +23,6 @@ export interface MatDialogStoryConfig {
   imports?: any[];
   declarations?: any[];
   providers?: Provider[];
-  standaloneComponent?: boolean;
 }
 
 @Component({ template: '' })
@@ -57,8 +54,8 @@ export class MatDialogLaunchComponent implements OnInit {
 export function matDialogStory(component: any, config?: MatDialogStoryConfig): StoryFn {
   const story: StoryFn = args => ({
     moduleMetadata: {
-      imports: [UICommonModule, CommonModule, TranslocoModule, ...(config?.imports ?? [])],
-      declarations: [...(config?.standaloneComponent ? [] : [component]), ...(config?.declarations ?? [])],
+      imports: [MatDialogModule, TranslocoModule, component, ...(config?.imports ?? [])],
+      declarations: [...(config?.declarations ?? [])],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: args.data },
         { provide: COMPONENT_UNDER_TEST, useValue: component },

src/SIL.XForge.Scripture/ClientApp/src/app/app-routing.module.ts

@@ -2,9 +2,12 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Location } from '@angular/common';
 import { Component, DebugElement, NgZone } from '@angular/core';
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu } from '@angular/material/menu';
+import { MatTooltip } from '@angular/material/tooltip';
 import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Route, Router, RouterModule } from '@angular/router';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideRouter, Route, Router } from '@angular/router';
 import { CookieService } from 'ngx-cookie-service';
 import { SystemRole } from 'realtime-server/lib/esm/common/models/system-role';
 import { User } from 'realtime-server/lib/esm/common/models/user';
@@ -30,12 +33,11 @@ import { NoticeService } from 'xforge-common/notice.service';
 import { OnlineStatusService } from 'xforge-common/online-status.service';
 import { PWA_BEFORE_PROMPT_CAN_BE_SHOWN_AGAIN, PwaService } from 'xforge-common/pwa.service';
 import { TestBreakpointObserver } from 'xforge-common/test-breakpoint-observer';
-import { TestOnlineStatusModule } from 'xforge-common/test-online-status.module';
+import { provideTestOnlineStatus } from 'xforge-common/test-online-status-providers';
 import { TestOnlineStatusService } from 'xforge-common/test-online-status.service';
-import { TestRealtimeModule } from 'xforge-common/test-realtime.module';
+import { provideTestRealtime } from 'xforge-common/test-realtime-providers';
 import { TestRealtimeService } from 'xforge-common/test-realtime.service';
-import { configureTestingModule, TestTranslocoModule } from 'xforge-common/test-utils';
-import { UICommonModule } from 'xforge-common/ui-common.module';
+import { configureTestingModule, getTestTranslocoModule } from 'xforge-common/test-utils';
 import { UserService } from 'xforge-common/user.service';
 import { AppComponent } from './app.component';
 import { SFProjectProfileDoc } from './core/models/sf-project-profile-doc';
@@ -65,8 +67,7 @@ const mockedErrorReportingService = mock(ErrorReportingService);
 const mockedDialogService = mock(DialogService);
 
 @Component({
-  template: `<div>Mock</div>`,
-  standalone: false
+  template: `<div>Mock</div>`
 })
 class MockComponent {}
 
@@ -87,18 +88,20 @@ const ROUTES: Route[] = [
 
 describe('AppComponent', () => {
   configureTestingModule(() => ({
-    declarations: [AppComponent, NavigationComponent],
     imports: [
-      UICommonModule,
-      NoopAnimationsModule,
-      RouterModule.forRoot(ROUTES),
-      TestTranslocoModule,
-      TestOnlineStatusModule.forRoot(),
-      TestRealtimeModule.forRoot(SF_TYPE_REGISTRY),
+      AppComponent,
+      NavigationComponent,
+      getTestTranslocoModule(),
       AvatarComponent,
-      GlobalNoticesComponent
+      GlobalNoticesComponent,
+      MatMenu,
+      MatIcon,
+      MatTooltip
     ],
     providers: [
+      provideRouter(ROUTES),
+      provideTestOnlineStatus(),
+      provideTestRealtime(SF_TYPE_REGISTRY),
       { provide: AuthService, useMock: mockedAuthService },
       { provide: UserService, useMock: mockedUserService },
       { provide: SettingsAuthGuard, useMock: mockedSettingsAuthGuard },
@@ -116,7 +119,8 @@ describe('AppComponent', () => {
       { provide: FileService, useMock: mockedFileService },
       { provide: ErrorReportingService, useMock: mockedErrorReportingService },
       { provide: BreakpointObserver, useClass: TestBreakpointObserver },
-      { provide: DialogService, useMock: mockedDialogService }
+      { provide: DialogService, useMock: mockedDialogService },
+      provideNoopAnimations()
     ]
   }));
 

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.spec.ts

@@ -1,9 +1,20 @@
+import { BidiModule } from '@angular/cdk/bidi';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { DOCUMENT } from '@angular/common';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { AsyncPipe, DOCUMENT } from '@angular/common';
 import { Component, DestroyRef, Inject, OnDestroy, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router } from '@angular/router';
+import { MatButton, MatIconAnchor, MatIconButton } from '@angular/material/button';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatDrawer, MatDrawerContainer } from '@angular/material/sidenav';
+import { MatToolbar, MatToolbarRow } from '@angular/material/toolbar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
 import Bugsnag from '@bugsnag/js';
+import { TranslocoModule } from '@ngneat/transloco';
 import { cloneDeep } from 'lodash-es';
 import { CookieService } from 'ngx-cookie-service';
 import { SystemRole } from 'realtime-server/lib/esm/common/models/system-role';
@@ -13,6 +24,7 @@ import { Observable, Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { ActivatedProjectService } from 'xforge-common/activated-project.service';
 import { AuthService } from 'xforge-common/auth.service';
+import { AvatarComponent } from 'xforge-common/avatar/avatar.component';
 import { DataLoadingComponent } from 'xforge-common/data-loading-component';
 import { DiagnosticOverlayService } from 'xforge-common/diagnostic-overlay.service';
 import { DialogService } from 'xforge-common/dialog.service';
@@ -28,6 +40,7 @@ import { UserDoc } from 'xforge-common/models/user-doc';
 import { NoticeService } from 'xforge-common/notice.service';
 import { OnlineStatusService } from 'xforge-common/online-status.service';
 import { PWA_BEFORE_PROMPT_CAN_BE_SHOWN_AGAIN, PwaService } from 'xforge-common/pwa.service';
+import { RouterLinkDirective } from 'xforge-common/router-link.directive';
 import {
   BrowserIssue,
   SupportedBrowsersDialogComponent
@@ -42,6 +55,8 @@ import { SFProjectProfileDoc } from './core/models/sf-project-profile-doc';
 import { roleCanAccessTranslate } from './core/models/sf-project-role-info';
 import { SFProjectUserConfigDoc } from './core/models/sf-project-user-config-doc';
 import { SFProjectService } from './core/sf-project.service';
+import { NavigationComponent } from './navigation/navigation.component';
+import { GlobalNoticesComponent } from './shared/global-notices/global-notices.component';
 import { checkAppAccess } from './shared/utils';
 
 declare function gtag(...args: any): void;
@@ -50,7 +65,33 @@ declare function gtag(...args: any): void;
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  standalone: false
+  imports: [
+    AsyncPipe,
+    TranslocoModule,
+    RouterLink,
+    AvatarComponent,
+    RouterLinkDirective,
+    NavigationComponent,
+    GlobalNoticesComponent,
+    RouterOutlet,
+    MatIcon,
+    MatDrawerContainer,
+    MatButton,
+    MatIconAnchor,
+    MatIconButton,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger,
+    MatTooltip,
+    MatToolbar,
+    MatToolbarRow,
+    MatProgressBar,
+    MatDivider,
+    MatDrawer,
+    MatDrawerContainer,
+    CdkScrollable,
+    BidiModule
+  ]
 })
 export class AppComponent extends DataLoadingComponent implements OnInit, OnDestroy {
   version: string = versionData.version;