refactor(frontend): convert all components to standalone

frontend/src/app/app.module.ts

@@ -194,11 +194,79 @@ import { UserComputingUnitListItemComponent } from "./dashboard/component/user/u
 registerLocaleData(en);
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    JwtModule.forRoot({
+      config: {
+        tokenGetter: AuthService.getAccessToken,
+        skipWhenExpired: false,
+        throwNoTokenError: false,
+        disallowedRoutes: ["forum/api/users"],
+      },
+    }),
+    BrowserAnimationsModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FormlyModule.forRoot(TEXERA_FORMLY_CONFIG),
+    FormlyNgZorroAntdModule,
+    OverlayModule,
+    NzDatePickerModule,
+    NzDropDownModule,
+    NzButtonModule,
+    NzAutocompleteModule,
+    NzIconModule,
+    NzFormModule,
+    NzListModule,
+    NzInputModule,
+    NzPopoverModule,
+    NzCollapseModule,
+    NzTooltipModule,
+    NzTableModule,
+    NzSelectModule,
+    NzSpaceModule,
+    NzBadgeModule,
+    NzUploadModule,
+    NgxJsonViewerModule,
+    NzModalModule,
+    NzDescriptionsModule,
+    NzCardModule,
+    NzTagModule,
+    NzPopconfirmModule,
+    NzAvatarModule,
+    NzTabsModule,
+    NzPaginationModule,
+    NzCommentModule,
+    ColorPickerModule,
+    NzSwitchModule,
+    NzRadioModule,
+    NzLayoutModule,
+    NzSliderModule,
+    MarkdownModule.forRoot(),
+    DragDropModule,
+    NzAlertModule,
+    NzResizableModule,
+    NzSpinModule,
+    NgxFileDropModule,
+    NzTreeModule,
+    NzTreeViewModule,
+    NzNoAnimationModule,
+    TreeModule,
+    SocialLoginModule,
+    GoogleSigninButtonModule,
+    NzEmptyModule,
+    NzDividerModule,
+    NzProgressModule,
+    NzInputNumberModule,
+    NzCheckboxModule,
+    NzGridModule,
+    ScrollingModule,
     FormlyRepeatDndComponent,
     AdminGmailComponent,
     PublicProjectComponent,
-    AppComponent,
     WorkspaceComponent,
     MenuComponent,
     OperatorMenuComponent,
@@ -291,76 +359,6 @@ registerLocaleData(en);
     UserComputingUnitComponent,
     UserComputingUnitListItemComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    HttpClientModule,
-    JwtModule.forRoot({
-      config: {
-        tokenGetter: AuthService.getAccessToken,
-        skipWhenExpired: false,
-        throwNoTokenError: false,
-        disallowedRoutes: ["forum/api/users"],
-      },
-    }),
-    BrowserAnimationsModule,
-    RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
-    FormlyModule.forRoot(TEXERA_FORMLY_CONFIG),
-    FormlyNgZorroAntdModule,
-    OverlayModule,
-    NzDatePickerModule,
-    NzDropDownModule,
-    NzButtonModule,
-    NzAutocompleteModule,
-    NzIconModule,
-    NzFormModule,
-    NzListModule,
-    NzInputModule,
-    NzPopoverModule,
-    NzCollapseModule,
-    NzTooltipModule,
-    NzTableModule,
-    NzSelectModule,
-    NzSpaceModule,
-    NzBadgeModule,
-    NzUploadModule,
-    NgxJsonViewerModule,
-    NzModalModule,
-    NzDescriptionsModule,
-    NzCardModule,
-    NzTagModule,
-    NzPopconfirmModule,
-    NzAvatarModule,
-    NzTabsModule,
-    NzPaginationModule,
-    NzCommentModule,
-    ColorPickerModule,
-    NzSwitchModule,
-    NzRadioModule,
-    NzLayoutModule,
-    NzSliderModule,
-    MarkdownModule.forRoot(),
-    DragDropModule,
-    NzAlertModule,
-    NzResizableModule,
-    NzSpinModule,
-    NgxFileDropModule,
-    NzTreeModule,
-    NzTreeViewModule,
-    NzNoAnimationModule,
-    TreeModule,
-    SocialLoginModule,
-    GoogleSigninButtonModule,
-    NzEmptyModule,
-    NzDividerModule,
-    NzProgressModule,
-    NzInputNumberModule,
-    NzCheckboxModule,
-    NzGridModule,
-    ScrollingModule,
-  ],
   providers: [
     provideNzI18n(en_US),
     AuthGuardService,

frontend/src/app/common/formly/array.type.ts

@@ -8,7 +8,13 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldArrayType } from "@ngx-formly/core";
+import { FieldArrayType, FormlyModule } from "@ngx-formly/core";
+import { NgFor } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 @Component({
   template: `
@@ -47,6 +53,14 @@ import { FieldArrayType } from "@ngx-formly/core";
         nzType="plus"></span>
     </button>
   `,
-  standalone: false,
+  imports: [
+    NgFor,
+    FormlyModule,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+  ],
 })
 export class ArrayTypeComponent extends FieldArrayType {}

frontend/src/app/common/formly/collab-wrapper/collab-wrapper/collab-wrapper.component.ts

@@ -26,6 +26,7 @@ import * as Y from "yjs";
 import { QuillBinding } from "y-quill";
 import QuillCursors from "quill-cursors";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NgStyle } from "@angular/common";
 
 // Quill related definitions
 export const COLLAB_DEBOUNCE_TIME_MS = 10;
@@ -66,7 +67,7 @@ Quill.register("modules/cursors", QuillCursors);
 @Component({
   templateUrl: "./collab-wrapper.component.html",
   styleUrls: ["./collab-wrapper.component.css"],
-  standalone: false,
+  imports: [NgStyle],
 })
 export class CollabWrapperComponent extends FieldWrapper<FieldTypeConfig> implements AfterContentInit {
   private quill?: Quill;

frontend/src/app/common/formly/multischema.type.ts

@@ -8,7 +8,8 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldType } from "@ngx-formly/core";
+import { FieldType, FormlyModule } from "@ngx-formly/core";
+import { NgIf, NgFor } from "@angular/common";
 
 @Component({
   // selector: 'formly-multi-schema-type',
@@ -29,6 +30,6 @@ import { FieldType } from "@ngx-formly/core";
       </div>
     </div>
   `,
-  standalone: false,
+  imports: [NgIf, FormlyModule, NgFor],
 })
 export class MultiSchemaTypeComponent extends FieldType {}

frontend/src/app/common/formly/null.type.ts

@@ -13,6 +13,5 @@ import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
 @Component({
   // selector: 'formly-null-type',
   template: "",
-  standalone: false,
 })
 export class NullTypeComponent extends FieldType<FieldTypeConfig> {}

frontend/src/app/common/formly/object.type.ts

@@ -8,7 +8,8 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
+import { FieldType, FieldTypeConfig, FormlyModule } from "@ngx-formly/core";
+import { NgIf, NgFor } from "@angular/common";
 
 @Component({
   // selector: 'formly-object-type',
@@ -27,7 +28,7 @@ import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
         [field]="f"></formly-field>
     </div>
   `,
-  standalone: false,
+  imports: [NgIf, FormlyModule, NgFor],
 })
 export class ObjectTypeComponent extends FieldType<FieldTypeConfig> {
   defaultOptions = {

frontend/src/app/common/formly/preset-wrapper/preset-wrapper.component.ts

@@ -25,6 +25,14 @@ import { debounceTime, filter, first, takeUntil } from "rxjs/operators";
 import { Preset, PresetService } from "src/app/workspace/service/preset/preset.service";
 import { asType } from "../../util/assert";
 import { NzMessageService } from "ng-zorro-antd/message";
+import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NgFor } from "@angular/common";
 
 /**
  * PresetWrapperComponent is a custom formly form field wrapper: https://formly.dev/guide/custom-formly-wrapper
@@ -52,7 +60,18 @@ export interface PresetKey {
 @Component({
   templateUrl: "./preset-wrapper.component.html",
   styleUrls: ["./preset-wrapper.component.scss"],
-  standalone: false,
+  imports: [
+    NzDropdownDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NgFor,
+    NzMenuItemComponent,
+  ],
 })
 export class PresetWrapperComponent extends FieldWrapper implements OnInit, OnDestroy {
   public searchResults: Preset[] = []; // the list of presets shown in the dropdown

frontend/src/app/common/formly/repeat-dnd/repeat-dnd.component.ts

@@ -18,14 +18,31 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldArrayType } from "@ngx-formly/core";
-import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
+import { FieldArrayType, FormlyModule } from "@ngx-formly/core";
+import { CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
+import { NgFor } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 
 @Component({
   selector: "texera-formly-repeat-section-dnd",
   templateUrl: "./repeat-dnd.component.html",
   styleUrls: ["./repeat-dnd.component.css"],
-  standalone: false,
+  imports: [
+    CdkDropList,
+    NgFor,
+    CdkDrag,
+    CdkDragHandle,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    FormlyModule,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+  ],
 })
 export class FormlyRepeatDndComponent extends FieldArrayType {
   onDrop(event: CdkDragDrop<string[]>) {

frontend/src/app/common/service/user/registration-request-modal/registration-request-modal.component.ts

@@ -19,12 +19,15 @@
 
 import { Component, Inject, Input, TemplateRef, ViewChild } from "@angular/core";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: "texera-registration-request-modal",
   templateUrl: "./registration-request-modal.component.html",
   styleUrls: ["./registration-request-modal.component.scss"],
-  standalone: false,
+  imports: [NzSpaceCompactItemDirective, NzInputDirective, FormsModule],
 })
 
 // Component for registration form modal

frontend/src/app/dashboard/component/admin/execution/admin-execution.component.ts

@@ -21,19 +21,57 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AdminExecutionService } from "../../../service/admin/execution/admin-execution.service";
 import { Execution } from "../../../../common/type/execution";
-import { NzTableFilterFn, NzTableQueryParams } from "ng-zorro-antd/table";
+import {
+  NzTableFilterFn,
+  NzTableQueryParams,
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzThAddOnComponent,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
 import { GuiConfigService } from "../../../../common/service/gui-config.service";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NgFor, NgIf, NgStyle } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
 
 export const NO_SORT = "NO_SORTING";
 
 @UntilDestroy()
 @Component({
   templateUrl: "./admin-execution.component.html",
   styleUrls: ["./admin-execution.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzThAddOnComponent,
+    NzTbodyComponent,
+    NgFor,
+    NgIf,
+    NgStyle,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzSpinComponent,
+  ],
 })
 export class AdminExecutionComponent implements OnInit, OnDestroy {
   listOfExecutions: ReadonlyArray<Execution> = [];