fix(Admin UI): prevent editing of unsupported views (#2569)

like NoteDetails, which breaks the config

fixes #2466

Author: sleidig

src/app/core/admin/admin-entity/admin-entity.component.html

@@ -46,15 +46,26 @@
     <div class="config-component flex-grow mat-elevation-z1">
       @switch (mode) {
         @case ("details") {
-          <app-admin-entity-details
-            [entityConstructor]="entityConstructor"
-            [config]="configDetailsView"
-          ></app-admin-entity-details>
+          @switch (configDetailsView.component) {
+            @case ("EntityDetails") {
+              <app-admin-entity-details
+                [entityConstructor]="entityConstructor"
+                [config]="configDetailsView.config"
+              ></app-admin-entity-details>
+            }
+            @default {
+              <p class="admin-ui-not-supported-info" i18n>
+                This component ({{ configDetailsView.component }}) cannot be
+                edited by users in the Admin UI yet. Please contact your
+                technical support team to make changes to this.
+              </p>
+            }
+          }
         }
         @case ("list") {
           <app-admin-entity-list
             [entityConstructor]="entityConstructor"
-            [config]="configListView"
+            [config]="configListView.config"
           ></app-admin-entity-list>
         }
         @case ("general") {

src/app/core/admin/admin-entity/admin-entity.component.scss

@@ -27,3 +27,8 @@
     color: colors.$muted;
   }
 }
+
+.admin-ui-not-supported-info {
+  padding: 20px;
+  text-align: center;
+}

src/app/core/admin/admin-entity/admin-entity.component.spec.ts

@@ -26,6 +26,7 @@ import { EntityActionsService } from "../../entity/entity-actions/entity-actions
 import { ActivatedRoute } from "@angular/router";
 import { of } from "rxjs";
 import { EntitySchemaField } from "../../entity/schema/entity-schema-field";
+import { DynamicComponentConfig } from "../../config/dynamic-components/dynamic-component-config.interface";
 
 describe("AdminEntityComponent", () => {
   let component: AdminEntityComponent;
@@ -35,7 +36,7 @@ describe("AdminEntityComponent", () => {
   let entityMapper: MockEntityMapperService;
 
   let config;
-  let viewConfig: EntityDetailsConfig;
+  let viewConfig: DynamicComponentConfig<EntityDetailsConfig>;
   let viewConfigId, entityConfigId;
 
   @DatabaseEntity("AdminTest")
@@ -50,11 +51,14 @@ describe("AdminEntityComponent", () => {
     viewConfigId = `view:${AdminTestEntity.route.substring(1)}/:id`;
     entityConfigId = `entity:${AdminTestEntity.ENTITY_TYPE}`;
     viewConfig = {
-      entityType: AdminTestEntity.ENTITY_TYPE,
-      panels: [{ title: "Tab 1", components: [] }],
+      component: "EntityDetails",
+      config: {
+        entityType: AdminTestEntity.ENTITY_TYPE,
+        panels: [{ title: "Tab 1", components: [] }],
+      },
     };
     config = {
-      [viewConfigId]: { component: "EntityDetails", config: viewConfig },
+      [viewConfigId]: viewConfig,
       [entityConfigId]: {},
     };
     const mockActivatedRoute = {
@@ -137,7 +141,7 @@ describe("AdminEntityComponent", () => {
       title: "New Panel",
       components: [],
     };
-    component.configDetailsView.panels.push(newPanel);
+    component.configDetailsView.config.panels.push(newPanel);
 
     await component.save();
 

src/app/core/admin/admin-entity/admin-entity.component.ts

@@ -10,7 +10,6 @@ import { EntityRegistry } from "../../entity/database-entity.decorator";
 import { ConfigService } from "../../config/config.service";
 import { EntityMapperService } from "../../entity/entity-mapper/entity-mapper.service";
 import { EntityActionsService } from "../../entity/entity-actions/entity-actions.service";
-import { ViewConfig } from "../../config/dynamic-routing/view-config.interface";
 import { EntityDetailsConfig } from "../../entity-details/EntityDetailsConfig";
 import { EntityConfigService } from "../../entity/entity-config.service";
 import { Config } from "../../config/config";
@@ -33,6 +32,7 @@ import { MatListItem, MatNavList } from "@angular/material/list";
 import { AdminEntityDetailsComponent } from "../admin-entity-details/admin-entity-details/admin-entity-details.component";
 import { AdminEntityGeneralSettingsComponent } from "./admin-entity-general-settings/admin-entity-general-settings.component";
 import { BetaFeatureComponent } from "../../../features/coming-soon/beta-feature/beta-feature.component";
+import { DynamicComponentConfig } from "../../config/dynamic-components/dynamic-component-config.interface";
 
 @Component({
   selector: "app-admin-entity",
@@ -63,8 +63,8 @@ export class AdminEntityComponent implements OnInit {
   entityConstructor: EntityConstructor;
   private originalEntitySchemaFields: [string, EntitySchemaField][];
 
-  configDetailsView: EntityDetailsConfig;
-  configListView: EntityListConfig;
+  configDetailsView: DynamicComponentConfig<EntityDetailsConfig>;
+  configListView: DynamicComponentConfig<EntityListConfig>;
   configEntitySettings: EntityConfig;
   protected mode: "details" | "list" | "general" = "details";
 
@@ -93,23 +93,43 @@ export class AdminEntityComponent implements OnInit {
     );
 
     this.configDetailsView = this.loadViewConfig(
-      EntityConfigService.getDetailsViewId(this.entityConstructor),
-    ) ?? { entityType: this.entityType, panels: [] };
-    this.configListView = this.loadViewConfig(
-      EntityConfigService.getListViewId(this.entityConstructor),
-    ) ?? { entityType: this.entityType };
+      this.entityConstructor,
+      "details",
+    );
+    this.configListView = this.loadViewConfig(this.entityConstructor, "list");
+
     this.configEntitySettings = this.entityConstructor;
   }
 
-  private loadViewConfig<
-    C = EntityDetailsConfig | EntityListConfig | undefined,
-  >(viewId: string): C | undefined {
-    const viewConfig: ViewConfig<C> = this.configService.getConfig(viewId);
+  private loadViewConfig(
+    entityType: EntityConstructor,
+    viewType: "details" | "list",
+  ): DynamicComponentConfig {
+    const viewId =
+      viewType === "details"
+        ? EntityConfigService.getDetailsViewId(entityType)
+        : EntityConfigService.getListViewId(entityType);
+    const viewConfig: DynamicComponentConfig =
+      this.configService.getConfig(viewId);
+
+    if (!viewConfig) {
+      // return default view config
+      if (viewType === "details") {
+        return {
+          component: "EntityDetails",
+          config: { entityType: this.entityType, panels: [] },
+        };
+      } else {
+        return {
+          component: "EntityList",
+          config: { entityType: this.entityType },
+        };
+      }
+    }
 
+    viewConfig.config = viewConfig.config ?? { entityType: this.entityType };
     // work on a deep copy as we are editing in place (for titles, sections, etc.)
-    return viewConfig?.config
-      ? JSON.parse(JSON.stringify(viewConfig.config))
-      : undefined;
+    return JSON.parse(JSON.stringify(viewConfig));
   }
 
   cancel() {
@@ -124,18 +144,11 @@ export class AdminEntityComponent implements OnInit {
     );
     const newConfig = originalConfig.copy();
 
-    this.setViewConfig(
-      newConfig,
-      EntityConfigService.getDetailsViewId(this.entityConstructor),
-      this.configDetailsView,
-      "EntityDetails",
-    );
-    this.setViewConfig(
-      newConfig,
-      EntityConfigService.getListViewId(this.entityConstructor),
-      this.configListView,
-      "EntityList",
-    );
+    newConfig.data[
+      EntityConfigService.getDetailsViewId(this.entityConstructor)
+    ] = this.configDetailsView;
+    newConfig.data[EntityConfigService.getListViewId(this.entityConstructor)] =
+      this.configListView;
     this.setEntityConfig(newConfig);
 
     await this.entityMapper.save(newConfig);
@@ -171,22 +184,4 @@ export class AdminEntityComponent implements OnInit {
       entitySchemaConfig.hasPII = this.configEntitySettings.hasPII;
     }
   }
-
-  private setViewConfig(
-    targetConfig,
-    detailsViewId: string,
-    viewConfig: EntityDetailsConfig | EntityListConfig,
-    componentForNewConfig: string,
-  ) {
-    if (targetConfig.data[detailsViewId]) {
-      targetConfig.data[detailsViewId].config = viewConfig;
-    } else {
-      // create new config
-      viewConfig.entityType = this.entityType;
-      targetConfig.data[detailsViewId] = {
-        component: componentForNewConfig,
-        config: viewConfig,
-      } as ViewConfig<EntityDetailsConfig | EntityListConfig>;
-    }
-  }
 }

src/app/core/config/config.service.spec.ts

@@ -123,6 +123,9 @@ describe("ConfigService", () => {
   it("should create export config string", fakeAsync(() => {
     const config = new Config();
     config.data = { first: "foo", second: "bar" };
+    // @ts-ignore disable migrations for this test
+    spyOn(service, "applyMigrations").and.callFake((c) => c);
+
     const expected = JSON.stringify(config.data);
     updateSubject.next({ entity: config, type: "update" });
     tick();

src/app/core/config/config.service.ts

@@ -72,6 +72,7 @@ export class ConfigService extends LatestEntityLoader<Config> {
       migratePhotoDatatype,
       migratePercentageDatatype,
       migrateEntityBlock,
+      addDefaultNoteDetailsConfig,
     ];
 
     // TODO: execute this on server via ndb-admin
@@ -375,3 +376,22 @@ const migrateEntityBlock: ConfigMigration = (key, configPart) => {
 
   return configPart;
 };
+
+/**
+ * Add default view:note/:id NoteDetails config
+ * to avoid breaking note details with a default config from AdminModule
+ */
+const addDefaultNoteDetailsConfig: ConfigMigration = (key, configPart) => {
+  if (
+    // add at top-level of config
+    configPart?.["_id"] === "Config:CONFIG_ENTITY" &&
+    !configPart?.["data"]["view:note/:id"]
+  ) {
+    configPart["data"]["view:note/:id"] = {
+      component: "NoteDetails",
+      config: {},
+    };
+  }
+
+  return configPart;
+};