feat: Datafiles configurable actions

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

@@ -135,6 +135,52 @@ const appConfig: AppConfig = {
   datasetDetailsShowMissingProposalId: true,
   helpMessages: new HelpMessages(),
   notificationInterceptorEnabled: true,
+  datafilesActionsEnabled: true,
+  datafilesActions: [
+    {
+      id: "eed8efec-4354-11ef-a3b5-d75573a5d37f",
+      order: 4,
+      label: "Download All",
+      files: "all",
+      mat_icon: "download",
+      url: "",
+      target: "_blank",
+      enabled: "#SizeLimit",
+      authorization: ["#datasetAccess", "#datasetPublic"],
+    },
+    {
+      id: "3072fafc-4363-11ef-b9f9-ebf568222d26",
+      order: 3,
+      label: "Download Selected",
+      files: "selected",
+      mat_icon: "download",
+      url: "",
+      target: "_blank",
+      enabled: "#Selected && #SizeLimit",
+      authorization: ["#datasetAccess", "#datasetPublic"],
+    },
+    {
+      id: "4f974f0e-4364-11ef-9c63-03d19f813f4e",
+      order: 2,
+      label: "Notebook All",
+      files: "all",
+      icon: "/assets/icons/jupyter_logo.png",
+      url: "",
+      target: "_blank",
+      authorization: ["#datasetAccess", "#datasetPublic"],
+    },
+    {
+      id: "fa3ce6ee-482d-11ef-95e9-ff2c80dd50bd",
+      order: 1,
+      label: "Notebook Selected",
+      files: "selected",
+      icon: "/assets/icons/jupyter_logo.png",
+      url: "",
+      target: "_blank",
+      enabled: "#Selected",
+      authorization: ["#datasetAccess", "#datasetPublic"],
+    },
+  ],
 };
 
 describe("AppConfigService", () => {

src/app/app-config.service.ts

@@ -36,6 +36,9 @@
   archiveWorkflowEnabled: boolean;
   datasetJsonScientificMetadata: boolean;
   datasetReduceEnabled: boolean;
+  datasetDetailsShowMissingProposalId: boolean;
+  datafilesActionsEnabled: boolean;
+  datafilesActions: any[];
   editDatasetSampleEnabled: boolean;
   editMetadataEnabled: boolean;
   editPublishedData: boolean;
@@ -84,7 +87,6 @@
   tableSciDataEnabled: boolean;
   fileserverBaseURL: string;
   fileserverButtonLabel: string | undefined;
-  datasetDetailsShowMissingProposalId: boolean;
   helpMessages?: HelpMessages;
   notificationInterceptorEnabled: boolean;
   pidSearchMethod?: string;

src/app/datasets/datafiles-actions/datafiles-action.component.html

@@ -0,0 +1,14 @@
+<ng-template [ngIf]="visible">
+  <button
+    mat-raised-button
+    class="action-button"
+    type="button"
+    (click)="perform_action()"
+    color="accent"
+    [disabled]="disabled"
+  >
+    <mat-icon *ngIf="use_mat_icon">{{ actionConfig.mat_icon }}</mat-icon>
+    <img *ngIf="use_icon" src="{{ actionConfig.icon }}" />
+    {{ actionConfig.label }}
+  </button>
+</ng-template>

src/app/datasets/datafiles-actions/datafiles-action.component.scss

@@ -0,0 +1,10 @@
+button {
+  margin-left: 4px;
+  margin-right: 0;
+
+  img {
+    height: 18px;
+    width: auto;
+    vertical-align: middle;
+  }
+}

src/app/datasets/datafiles-actions/datafiles-action.component.ts

@@ -0,0 +1,130 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from "@angular/core";
+
+import { UserApi } from "shared/sdk";
+import { ActionConfig, ActionDataset } from "./datafiles-action.interfaces";
+import { DataFiles_File } from "datasets/datafiles/datafiles.interfaces";
+
+@Component({
+  selector: "datafiles-action",
+  //standalone: true,
+  //imports: [],
+  templateUrl: "./datafiles-action.component.html",
+  styleUrls: ["./datafiles-action.component.scss"],
+})
+export class DatafilesActionComponent implements OnInit, OnChanges {
+  @Input({ required: true }) actionConfig: ActionConfig;
+  @Input({ required: true }) actionDataset: ActionDataset;
+  @Input({ required: true }) files: DataFiles_File[];
+  @Input({ required: true }) maxFileSize: number;
+
+  jwt = "";
+  visible = true;
+  use_mat_icon = false;
+  use_icon = false;
+  disabled = false;
+  disabled_condition = "false";
+  selectedTotalFileSize = 0;
+  numberOfFileSelected = 0;
+
+  constructor(private userApi: UserApi) {
+    this.userApi.jwt().subscribe((jwt) => {
+      this.jwt = jwt.jwt;
+    });
+  }
+
+  ngOnInit() {
+    this.use_mat_icon = this.actionConfig.mat_icon !== undefined;
+    this.use_icon = this.actionConfig.icon !== undefined;
+    this.prepare_disabled_condition();
+    this.update_status();
+    this.compute_disabled();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    console.log(changes);
+    if (changes["files"]) {
+      this.update_status();
+      this.compute_disabled();
+    }
+  }
+
+  update_status() {
+    this.selectedTotalFileSize = this.files
+      .filter((item) => item.selected)
+      .reduce((sum, item) => sum + item.size, 0);
+    this.numberOfFileSelected = this.files.filter(
+      (item) => item.selected,
+    ).length;
+  }
+
+  prepare_disabled_condition() {
+    if (this.actionConfig.enabled) {
+      this.disabled_condition =
+        "!(" +
+        this.actionConfig.enabled
+          .replaceAll(
+            "#SizeLimit",
+            "this.maxFileSize > 0 && this.selectedTotalFileSize <= this.maxFileSize",
+          )
+          .replaceAll("#Selected", "this.numberOfFileSelected > 0") +
+        ")";
+    } else if (this.actionConfig.disabled) {
+      this.disabled_condition = this.actionConfig.enabled
+        .replaceAll(
+          "#SizeLimit",
+          "this.maxFileSize > 0 && this.selectedTotalFileSize <= this.maxFileSize",
+        )
+        .replaceAll("#Selected", "this.numberOfFileSelected > 0");
+    }
+  }
+
+  compute_disabled() {
+    this.disabled = eval(this.disabled_condition);
+  }
+
+  add_input(name, value) {
+    const input = document.createElement("input");
+    input.type = "hidden";
+    input.name = name;
+    input.value = value;
+    return input;
+  }
+
+  perform_action() {
+    const form = document.createElement("form");
+    form.target = this.actionConfig.target;
+    form.method = this.actionConfig.method;
+    form.action = this.actionConfig.url;
+
+    form.appendChild(
+      this.add_input("auth_token", this.userApi.getCurrentToken().id),
+    );
+
+    form.appendChild(this.add_input("jwt", this.jwt));
+
+    form.appendChild(this.add_input("dataset", this.actionDataset.pid));
+
+    form.appendChild(
+      this.add_input("directory", this.actionDataset.sourceFolder),
+    );
+
+    for (const [index, item] of this.files.entries()) {
+      if (
+        this.actionConfig.files === "all" ||
+        (this.actionConfig.files === "selected" && item.selected)
+      ) {
+        form.appendChild(this.add_input("files[" + index + "]", item.path));
+      }
+    }
+
+    document.body.appendChild(form);
+    form.submit();
+    window.open("", "view");
+  }
+}

src/app/datasets/datafiles-actions/datafiles-action.interfaces.ts

@@ -0,0 +1,19 @@
+export interface ActionConfig {
+  id: string;
+  order: number;
+  label: string;
+  files: string;
+  mat_icon?: string;
+  icon?: string;
+  url: string;
+  target: string;
+  authorization: string[];
+  method?: string;
+  enabled?: string;
+  disabled?: string;
+}
+
+export interface ActionDataset {
+  pid: string;
+  sourceFolder: string;
+}

src/app/datasets/datafiles-actions/datafiles-actions.component.html

@@ -0,0 +1,12 @@
+<ng-template [ngIf]="visible()">
+  <div class="dataset-datafiles-actions">
+    <datafiles-action
+      *ngFor="let actionConfig of sortedActionsConfig"
+      [actionConfig]="actionConfig"
+      [actionDataset]="actionDataset"
+      [files]="files"
+      [maxFileSize]="maxFileSize"
+    >
+    </datafiles-action>
+  </div>
+</ng-template>

src/app/datasets/datafiles-actions/datafiles-actions.component.scss

@@ -0,0 +1,3 @@
+.dataset-datafiles-actions {
+  float: right;
+}