feat(POC): implement live frontend config editing UI

src/app/_layout/app-header/app-header.component.html

@@ -80,6 +80,16 @@
   </mat-menu>
 
   <mat-menu #userMenu="matMenu">
+    <button
+      *ngIf="isAdmin$ | async"
+      mat-menu-item
+      routerLink="/admin"
+      data-cy="admin-button"
+    >
+      <mat-icon> build</mat-icon>
+      <span> Admin Settings <mat-chip class="beta-badge">Beta</mat-chip></span>
+    </button>
+
     <button mat-menu-item routerLink="/user/" data-cy="setting-button">
       <mat-icon> settings</mat-icon>
       <span>Settings</span>

src/app/_layout/app-header/app-header.component.scss

@@ -58,6 +58,13 @@
   }
 }
 
+.beta-badge {
+  height: 1.25rem;
+  font-size: 0.75rem;
+  margin-left: 0.5rem;
+  background-color: var(--theme-header-3-default);
+}
+
 @media only screen and (max-width: 1279px) {
   .large-screen-text {
     display: none;

src/app/_layout/app-header/app-header.component.ts

@@ -7,6 +7,7 @@ import {
   selectIsLoggedIn,
   selectCurrentUserName,
   selectThumbnailPhoto,
+  selectIsAdmin,
 } from "state-management/selectors/user.selectors";
 import { selectDatasetsInBatchIndicator } from "state-management/selectors/datasets.selectors";
 import {
@@ -42,6 +43,8 @@ export class AppHeaderComponent implements OnInit {
   profileImage$ = this.store.select(selectThumbnailPhoto);
   inBatchIndicator$ = this.store.select(selectDatasetsInBatchIndicator);
   isLoggedIn$ = this.store.select(selectIsLoggedIn);
+  isAdmin$ = this.store.select(selectIsAdmin);
+
   mainMenuConfig$: Observable<MainMenuOptions>;
   defaultMainPage$: Observable<string>;
   siteHeaderLogoUrl$: Observable<string>;

src/app/_layout/layout.module.ts

@@ -12,6 +12,7 @@ import { AppMainLayoutComponent } from "./app-main-layout/app-main-layout.compon
 import { BatchCardModule } from "datasets/batch-card/batch-card.module";
 import { BreadcrumbModule } from "shared/modules/breadcrumb/breadcrumb.module";
 import { UsersModule } from "../users/users.module";
+import { MatChipsModule } from "@angular/material/chips";
 
 @NgModule({
   declarations: [
@@ -26,6 +27,7 @@ import { UsersModule } from "../users/users.module";
     MatButtonModule,
     MatIconModule,
     MatMenuModule,
+    MatChipsModule,
     MatToolbarModule,
     RouterModule,
     BreadcrumbModule,

src/app/admin/admin-config-edit/admin-config-edit.component.html

@@ -0,0 +1,37 @@
+<div style="display: flex; justify-content: space-between; margin-bottom: 10px">
+  <!-- LEFT -->
+  <div>
+    <button mat-button color="primary" (click)="jsonPreview()">
+      Json Preview
+    </button>
+  </div>
+
+  <!-- RIGHT -->
+  <div>
+    <button mat-button color="primary" (click)="export()">Export</button>
+    <button mat-button color="primary" (click)="save()">Save</button>
+  </div>
+</div>
+<div>
+  <jsonforms
+    [data]="data$ | async"
+    [schema]="schema"
+    [uischema]="uiSchema"
+    [renderers]="renderers"
+    (dataChange)="onChange($event)"
+  ></jsonforms>
+  <div style="display: flex; justify-content: space-between; margin-top: 10px">
+    <!-- LEFT -->
+    <div>
+      <button mat-button color="primary" (click)="jsonPreview()">
+        Json Preview
+      </button>
+    </div>
+
+    <!-- RIGHT -->
+    <div>
+      <button mat-button color="primary" (click)="export()">Export</button>
+      <button mat-button color="primary" (click)="save()">Save</button>
+    </div>
+  </div>
+</div>

src/app/admin/admin-config-edit/admin-config-edit.component.ts

@@ -0,0 +1,187 @@
+import { Component, OnInit } from "@angular/core";
+import { Store } from "@ngrx/store";
+import { updateConfiguration } from "state-management/actions/runtime-config.action";
+import { selectConfig } from "state-management/selectors/runtime-config.selectors";
+import schema from "../schema/frontend.config.jsonforms.json";
+import { angularMaterialRenderers } from "@jsonforms/angular-material";
+import {
+  accordionArrayLayoutRendererTester,
+  AccordionArrayLayoutRendererComponent,
+} from "shared/modules/jsonforms-custom-renderers/expand-panel-renderer/accordion-array-layout-renderer.component";
+import { map, Subscription, take } from "rxjs";
+import {
+  expandGroupTester,
+  ExpandGroupRendererComponent,
+} from "shared/modules/jsonforms-custom-renderers/expand-group-renderer/expand-group-renderer";
+import {
+  ArrayLayoutRendererCustom,
+  arrayLayoutRendererTester,
+} from "shared/modules/jsonforms-custom-renderers/ingestor-renderer/array-renderer";
+import { MatDialog } from "@angular/material/dialog";
+import { JsonPreviewDialogComponent } from "shared/modules/json-preview-dialog/json-preview-dialog.component";
+import { JsonSchema, UISchemaElement } from "@jsonforms/core";
+import { AppConfigInterface } from "app-config.service";
+
+@Component({
+  selector: "admin-config-edit",
+  templateUrl: "./admin-config-edit.component.html",
+  styleUrls: ["./admin-config-edit.component.scss"],
+  standalone: false,
+})
+export class AdminConfigEditComponent implements OnInit {
+  private subscriptions: Subscription[] = [];
+  config$ = this.store.select(selectConfig);
+  data$ = this.config$.pipe(
+    map((cfg) => (cfg.data ? this.toFormData(cfg.data) : null)),
+  );
+
+  currentData: AppConfigInterface;
+  schema: JsonSchema = schema.schema || {};
+  uiSchema: UISchemaElement = schema.uiSchema;
+  renderers = [
+    ...angularMaterialRenderers,
+    {
+      tester: accordionArrayLayoutRendererTester,
+      renderer: AccordionArrayLayoutRendererComponent,
+    },
+    {
+      tester: expandGroupTester,
+      renderer: ExpandGroupRendererComponent,
+    },
+    {
+      tester: arrayLayoutRendererTester,
+      renderer: ArrayLayoutRendererCustom,
+    },
+  ];
+  constructor(
+    private store: Store,
+    private dialog: MatDialog,
+  ) {}
+
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.data$.pipe(take(1)).subscribe((d) => (this.currentData = d)),
+    );
+  }
+
+  onChange(event: any) {
+    this.currentData = event;
+  }
+
+  save() {
+    const apiData = this.toApiData(this.currentData);
+
+    this.store.dispatch(
+      updateConfiguration({ id: "frontendConfig", config: apiData }),
+    );
+  }
+
+  jsonPreview() {
+    const apiData = this.toApiData(this.currentData);
+
+    this.dialog.open(JsonPreviewDialogComponent, {
+      width: "90vw",
+      maxHeight: "90vh",
+      data: apiData,
+    });
+  }
+
+  export() {
+    const apiData = this.toApiData(this.currentData);
+    const json = JSON.stringify(apiData, null, 2);
+
+    const blob = new Blob([json], { type: "application/json;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `frontend-config-${new Date().toLocaleString("sv-SE")}.json`;
+    a.click();
+
+    URL.revokeObjectURL(url);
+  }
+
+  ///////////////////////////////////////////////////////
+  // NOTE: below are temporary conversion functions
+  // it converts dynamic object to array with key and value properties
+  // and vice versa for jsonforms compatibility
+  // Should be removed when config values are fixed to use only arrays
+  ///////////////////////////////////////////////////////
+
+  toArray(obj: any) {
+    if (!obj) return [];
+    return Object.entries(obj).map(([key, value]) => ({ key, value }));
+  }
+  // TODO: to be removed
+  toObject(arr: any) {
+    if (!arr?.length) return {};
+
+    return Object.fromEntries(arr.map((i) => [i.key, i.value]));
+  }
+
+  // TODO: to be removed
+  toFormData(data: any) {
+    const d = structuredClone(data);
+
+    if (d.labelsLocalization.dataset) {
+      d.labelsLocalization.dataset = this.toArray(d.labelsLocalization.dataset);
+    }
+    if (d.labelsLocalization.proposal) {
+      d.labelsLocalization.proposal = this.toArray(
+        d.labelsLocalization.proposal,
+      );
+    }
+    if (d.datafilesActions) {
+      d.datafilesActions = d.datafilesActions.map((a: any) => ({
+        ...a,
+        variables:
+          a.variables && !Array.isArray(a.variables)
+            ? this.toArray(a.variables)
+            : a.variables,
+        inputs:
+          a.inputs && !Array.isArray(a.inputs)
+            ? this.toArray(a.inputs)
+            : a.inputs,
+      }));
+    }
+
+    return d;
+  }
+
+  // TODO: to be removed
+  toApiData(data: any) {
+    const d = structuredClone(data);
+
+    d.labelsLocalization = d.labelsLocalization ?? {
+      dataset: {},
+      proposal: {},
+    };
+    if (Array.isArray(d.labelsLocalization.dataset)) {
+      d.labelsLocalization.dataset = this.toObject(
+        d.labelsLocalization.dataset,
+      );
+    }
+    if (Array.isArray(d.labelsLocalization.proposal)) {
+      d.labelsLocalization.proposal = this.toObject(
+        d.labelsLocalization.proposal,
+      );
+    }
+    if (Array.isArray(d.datafilesActions)) {
+      d.datafilesActions = d.datafilesActions.map((a: any) => ({
+        ...a,
+        variables: Array.isArray(a.variables)
+          ? this.toObject(a.variables)
+          : a.variables,
+        inputs: Array.isArray(a.inputs) ? this.toObject(a.inputs) : a.inputs,
+      }));
+    }
+
+    return d;
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription) => {
+      subscription.unsubscribe();
+    });
+  }
+}

src/app/admin/admin-dashboard/admin-dashboard.component.html

@@ -0,0 +1,23 @@
+<!-- src/app/admin/admin-dashboard/admin-dashboard.component.html -->
+
+<nav mat-tab-nav-bar [tabPanel]="tabPanel">
+  <ng-container *ngFor="let link of navLinks">
+    <a
+      mat-tab-link
+      *ngIf="link.enabled"
+      routerLink="{{ link.location }}"
+      routerLinkActive
+      #rla="routerLinkActive"
+      [routerLinkActiveOptions]="routerLinkActiveOptions"
+      [active]="rla.isActive"
+      [replaceUrl]="true"
+      (click)="onTabSelected(link.label)"
+    >
+      <mat-icon>{{ link.icon }}</mat-icon>
+      <span>{{ link.label }}</span>
+    </a>
+  </ng-container>
+</nav>
+<mat-tab-nav-panel #tabPanel>
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>