feat: authorization dataset tiles

src/app/admin/schema/frontend.config.jsonforms.json

@@ -139,7 +139,6 @@
             "url": { "type": "string" },
             "target": { "type": "string" },
             "enabled": { "type": "string" },
-            "authorization": { "type": "array", "items": { "type": "string" } },
             "inputs": {
               "type": "array",
               "items": {
@@ -356,6 +355,10 @@
                   "type": "string",
                   "enum": ["table", "json", "tree"]
                 },
+                "authorization": {
+                  "type": "array",
+                  "items": { "type": "string" }
+                },
 
                 "options": {
                   "type": "object",
@@ -660,10 +663,6 @@
                     "options": { "multi": true }
                   },
                   { "type": "Control", "scope": "#/properties/filename" },
-                  {
-                    "type": "Control",
-                    "scope": "#/properties/authorization"
-                  },
                   {
                     "type": "Control",
                     "scope": "#/properties/variables",
@@ -765,7 +764,11 @@
                     "elements": [
                       { "type": "Control", "scope": "#/properties/label" },
                       { "type": "Control", "scope": "#/properties/type" },
-                      { "type": "Control", "scope": "#/properties/order" },
+                      { "type": "Control", "scope": "#/properties/order" }]
+                  },
+                  {
+                    "type": "HorizontalLayout",
+                    "elements": [
                       { "type": "Control", "scope": "#/properties/row" },
                       { "type": "Control", "scope": "#/properties/col" },
                       {
@@ -783,6 +786,15 @@
                       }
                     ]
                   },
+                  {
+                    "type": "HorizontalLayout",
+                    "elements": [
+                      {
+                        "type": "Control",
+                        "scope": "#/properties/authorization"
+                      }
+                    ]
+                  },
                   {
                     "type": "VerticalLayout",
                     "label": "Attachments Options",

src/app/datasets/dataset-detail/dataset-detail-dynamic/_dataset-detail-dynamic-theme.scss

@@ -9,8 +9,12 @@
   $header-2: map.get($color-config, "header-2");
   $header-3: map.get($color-config, "header-3");
   $header-4: map.get($color-config, "header-4");
+  $header-5: map.get($color-config, "header-5");
   $warn: map.get($color-config, "warn");
   $warn-2: map.get($color-config, "warn-2");
+  .dynamic-template-tile-header {
+    background-color: mat.m2-get-color-from-palette($header-5, "lighter");
+  }
   .dynamic-template-general-header {
     background-color: mat.m2-get-color-from-palette($primary, "lighter");
   }

src/app/datasets/dataset-detail/dataset-detail-dynamic/dataset-detail-dynamic.component.html

@@ -28,7 +28,7 @@
     *ngIf="dataset$ | async as dataset"
   >
     <!-- Iterate over each section in datasetView -->
-    <ng-container *ngFor="let section of datasetView">
+    <ng-container *ngFor="let section of datasetView$ | async">
       <ng-container [ngSwitch]="section.type">
         <!-- Regular Section -->
         <div
@@ -40,7 +40,7 @@
           <mat-card>
             <!-- Section Header -->
             <mat-card-header
-              class="dynamic-template-general-header sticky-header"
+              class="dynamic-template-tile-header sticky-header"
               data-cy="section-label"
             >
               <div mat-card-avatar class="section-icon">
@@ -160,7 +160,7 @@
           <ng-container *ngIf="emptyMetadataTable()">
             <mat-card>
               <mat-card-header
-                class="scientific-header sticky-header"
+                class="dynamic-template-tile-header sticky-header"
                 data-cy="section-label"
               >
                 <div mat-card-avatar class="section-icon">
@@ -218,7 +218,7 @@
         >
           <mat-card>
             <mat-card-header
-              class="dynamic-template-attachments-header sticky-header"
+              class="dynamic-template-tile-header sticky-header"
               data-cy="section-label"
             >
               <div mat-card-avatar class="section-icon">
@@ -285,7 +285,7 @@
         >
           <mat-card>
             <mat-card-header
-              class="dynamic-template-json-view-header sticky-header"
+              class="dynamic-template-tile-header sticky-header"
               data-cy="section-label"
             >
               <div mat-card-avatar class="section-icon">

src/app/datasets/dataset-detail/dataset-detail-dynamic/dataset-detail-dynamic.component.ts

@@ -2,15 +2,16 @@
 
 import { MatDialog } from "@angular/material/dialog";
 import { Store } from "@ngrx/store";
-import { Subscription } from "rxjs";
+import { Subscription, Observable } from "rxjs";
+import { map } from "rxjs/operators";
 
 import { showMessageAction } from "state-management/actions/user.actions";
 import {
   selectCurrentAttachments,
   selectCurrentDataset,
   selectCurrentDatasetWithoutFileInfo,
 } from "state-management/selectors/datasets.selectors";
-import { selectIsLoading } from "state-management/selectors/user.selectors";
+import { selectIsLoading, selectProfile } from "state-management/selectors/user.selectors";
 import { selectCurrentInstrument } from "state-management/selectors/instruments.selectors";
 
 import { AppConfigService } from "app-config.service";
@@ -50,7 +51,7 @@
 export class DatasetDetailDynamicComponent implements OnInit, OnDestroy {
   private subscriptions: Subscription[] = [];
 
-  datasetView: CustomizationItem[];
+  datasetView$: Observable<CustomizationItem[]>;
   form: FormGroup;
   cols = 10;
   gutterSize = 12;
@@ -65,6 +66,8 @@
   loading$ = this.store.select(selectIsLoading);
   show = false;
 
+  userGroups$: Observable<string[]>;
+
   instrument: Instrument | undefined;
   dataset: OutputDatasetObsoleteDto | undefined;
 
@@ -83,7 +86,11 @@
     private router: Router,
     private route: ActivatedRoute,
     private snackBar: MatSnackBar,
-  ) {}
+  ) {
+    this.userGroups$ = this.store.select(selectProfile).pipe(
+      map((profile) => profile?.accessGroups || [])
+    );
+  }
 
   ngOnInit() {
     this.form = this.fb.group({});
@@ -97,7 +104,13 @@
       }
     });
 
-    this.datasetView = sortedDatasetView;
+    this.datasetView$ = this.userGroups$.pipe(
+      map((userGroups) =>
+        sortedDatasetView.filter((section) =>
+          this.canViewBlock(section.authorization, userGroups)
+        )
+      )
+    );
 
     this.subscriptions.push(
       this.store.select(selectCurrentInstrument).subscribe((instrument) => {
@@ -120,6 +133,29 @@
     );
   }
 
+  /**
+   * Checks if the current user can view a block based on authorization
+   * @param blockAuthorization - Optional array of group names from block.authorization
+   * @param userGroups - Array of groups the current user belongs to
+   * @returns true if user can view the block
+   */
+  canViewBlock(
+    blockAuthorization: string[] | undefined,
+    userGroups: string[]
+  ): boolean {
+    const auth = blockAuthorization || ["#all"];
+
+    if (auth.includes("#all")) {
+      return true;
+    }
+
+    if (auth.length === 0) {
+      return false;
+    }
+
+    return auth.some((group) => userGroups.includes(group));
+  }
+
   onCopy(value: string) {
     navigator.clipboard.writeText(value).then(
       () => {

src/app/state-management/models/index.ts

@@ -83,6 +83,7 @@ export interface CustomizationItem {
   source?: string;
   options?: AttachmentOptions;
   viewMode?: viewModeOptions;
+  authorization?: string[];
 }
 
 export interface Field {

src/app/theme.ts

@@ -50,6 +50,12 @@ export const light: Theme = {
     "--theme-header-4-lighter-contrast": "#000000",
     "--theme-header-4-darker": "#9b429b",
     "--theme-header-4-darker-contrast": "#ffffff",
+    "--theme-header-5-default": "#7f7f7f",
+    "--theme-header-5-default-contrast": "#ffffff",
+    "--theme-header-5-lighter": "#e5e5e5",
+    "--theme-header-5-lighter-contrast": "#000000",
+    "--theme-header-5-darker": "#4c4c4c",
+    "--theme-header-5-darker-contrast": "#ffffff",
     "--theme-hover-default": "#7f7f7f",
     "--theme-hover-default-contrast": "#000000",
     "--theme-hover-lighter": "#e5e5e5",

src/assets/theme.json

@@ -49,6 +49,12 @@
     "--theme-header-4-lighter-contrast": "#000000",
     "--theme-header-4-darker": "#9b429b",
     "--theme-header-4-darker-contrast": "#ffffff",
+    "--theme-header-5-default": "#7f7f7f",
+    "--theme-header-5-default-contrast": "#ffffff",
+    "--theme-header-5-lighter": "#e5e5e5",
+    "--theme-header-5-lighter-contrast": "#000000",
+    "--theme-header-5-darker": "#4c4c4c",
+    "--theme-header-5-darker-contrast": "#ffffff",
     "--theme-hover-default": "#7f7f7f",
     "--theme-hover-default-contrast": "#000000",
     "--theme-hover-lighter": "#e5e5e5",

src/styles.scss

@@ -152,6 +152,17 @@ $theme-header-4: (
   ),
 );
 
+$theme-header-5: (
+  default: var(--theme-header-5-default),
+  lighter: var(--theme-header-5-lighter),
+  darker: var(--theme-header-5-darker),
+  contrast: (
+    default: var(--theme-header-5-default-contrast),
+    lighter: var(--theme-header-5-lighter-contrast),
+    darker: var(--theme-header-5-darker-contrast),
+  ),
+);
+
 $theme-hover: (
   default: var(--theme-hover-default),
   lighter: var(--theme-hover-lighter),
@@ -191,6 +202,12 @@ $header-4: mat.m2-define-palette(
   "lighter",
   "darker"
 );
+$header-5: mat.m2-define-palette(
+  $theme-header-5,
+  "default",
+  "lighter",
+  "darker"
+);
 $hover: mat.m2-define-palette($theme-hover, "default", "lighter", "darker");
 
 $basetheme: mat.m2-define-light-theme(
@@ -211,8 +228,9 @@ $newcolor: map.merge(
     warn-2: $warn-2,
     header-1: $header-1,
     header-2: $header-2,
-    header-3: $header-4,
+    header-3: $header-3,
     header-4: $header-4,
+    header-5: $header-5,
     hover: $hover,
   )
 );
@@ -476,4 +494,4 @@ display: inline-flex;
 .mat-mdc-form-field-icon-suffix {
 display: flex;
 align-items: center;
-}
+}