feat: make configurable action buttons shared component

CI/e2e/frontend.config.e2e.json

@@ -24,7 +24,6 @@
   "ingestManual": null,
   "jobsEnabled": true,
   "jsonMetadataEnabled": true,
-  "jupyterHubUrl": "",
   "landingPage": "doi.ess.eu/detail/",
   "lbBaseURL": "http://localhost:3000",
   "logbookEnabled": true,
@@ -106,6 +105,75 @@
       "authorization": ["#datasetAccess", "#datasetPublic"]
     }
   ],
+  "datasetDetailsActionsEnabled": true,
+  "datasetDetailsActions": [
+    {
+      "id": "01",
+      "order": 1,
+      "type": "xhr",
+      "method": "PATCH",
+      "description": "Publish dataset",
+      "label": "Publish",
+      "hidden": "#isPublished",
+      "mat_icon": "",
+      "url": "/api/v3/datasets/{{id}}",
+      "payload": "{\"isPublished\": true}"
+    },
+    {
+      "id": "02",
+      "order": 2,
+      "type": "xhr",
+      "method": "PATCH",
+      "description": "Unpublish published dataset",
+      "label": "Unpublish",
+      "hidden": "#!isPublished",
+      "mat_icon": "",
+      "url": "/api/v3/datasets/{{id}}",
+      "payload": "{\"isPublished\": false}"
+    },
+    {
+      "id": "03",
+      "order": 3,
+      "type": "form",
+      "method": "GET",
+      "description": "Jupyter hub",
+      "label": "Jupyter hub",
+      "mat_icon": "",
+      "url": "https://jupyterhub.esss.lu.se/",
+      "target": "_blank"
+    }
+  ],
+  "datasetSelectionActionsEnabled": true,
+  "datasetSelectionActions": [
+    {
+      "id": "01",
+      "order": 1,
+      "type": "link",
+      "description": "Publish datasets",
+      "label": "Publish",
+      "mat_icon": "school",
+      "url": "/datasets/batch/publish"
+    },
+    {
+      "id": "02",
+      "order": 2,
+      "type": "link",
+      "description": "Share datasets",
+      "label": "Share",
+      "mat_icon": "share",
+      "url": "/datasets/batch?share=true"
+    },
+    {
+      "id": "03",
+      "order": 3,
+      "type": "link",
+      "hidden": "!archiveWorkflowEnabled",
+      "description": "Retrieve datasets",
+      "label": "Retrieve",
+      "mat_icon": "cloud_download",
+      "url": "/datasets/batch?retrieve=true"
+    }
+  ],
   "labelMaps": {
     "filters": {
       "LocationFilter": "Location",

src/app/app-config.service.ts

@@ -71,8 +71,14 @@ export interface AppConfigInterface {
   datasetJsonScientificMetadata: boolean;
   datasetReduceEnabled: boolean;
   datasetDetailsShowMissingProposalId: boolean;
+  datasetActionsEnabled: boolean;
+  datasetActions: any[];
   datafilesActionsEnabled: boolean;
   datafilesActions: any[];
+  datasetDetailsActionsEnabled: boolean;
+  datasetDetailsActions: any[];
+  datasetSelectionActionsEnabled: boolean;
+  datasetSelectionActions: any[];
   editDatasetEnabled: boolean;
   editDatasetSampleEnabled: boolean;
   editMetadataEnabled: boolean;

src/app/datasets/batch-view/batch-view.component.html

@@ -1,93 +1,15 @@
 <div style="margin-top: 1em">
   <div *ngIf="hasBatch; else empty_batch">
-    <div style="text-align: right; margin-bottom: 1em">
-      <div *ngIf="editingPublishedDataDoi">
-        You are currently editing
-        <a (click)="onCancelEdit()">{{ editingPublishedDataDoi }}</a>
-        dataset list.
-      </div>
-      <button
-        *ngIf="editingPublishedDataDoi"
-        mat-button
-        id="changeSelectionButton"
-        (click)="onChangeSelection()"
-        class="button"
-        color="primary"
-      >
-        <mat-icon> edit </mat-icon>
-        Select new datasets
-      </button>
-      <button
-        *ngIf="editingPublishedDataDoi"
-        mat-button
-        id="saveChangesButton"
-        (click)="onSaveChanges()"
-        class="button"
-        color="primary"
-      >
-        <mat-icon> save </mat-icon>
-        Save Changes
-      </button>
-      <button
-        *ngIf="editingPublishedDataDoi"
-        mat-button
-        id="cancelButton"
-        (click)="onCancelEdit()"
-        class="button"
-        color="warn"
-      >
-        <mat-icon> close </mat-icon>
-        Cancel
-      </button>
-      <button
-        *ngIf="!editingPublishedDataDoi"
-        (click)="onEmpty()"
-        mat-button
-        class="button"
-        color="primary"
-      >
+    <div class="batch-actions" fxLayout="row" fxLayoutAlign="end center">
+      <configurable-actions
+        [actionsConfig]="appConfig.datasetSelectionActions"
+        [actionItems]="datasetList"
+        [visible]="appConfig.datasetSelectionActionsEnabled"
+      ></configurable-actions>
+      <button (click)="onEmpty()" mat-button class="button" color="primary">
         <mat-icon> remove_shopping_cart </mat-icon>
         Empty Cart
       </button>
-      <button
-        *ngIf="!editingPublishedDataDoi"
-        mat-button
-        id="publishButton"
-        (click)="onPublish()"
-        class="button"
-        color="primary"
-      >
-        <mat-icon> school </mat-icon>
-        Publish
-      </button>
-      <ng-container *ngIf="shareEnabled">
-        <button
-          *ngIf="!editingPublishedDataDoi"
-          mat-button
-          (click)="onShare()"
-          id="shareButton"
-          class="button"
-          color="primary"
-        >
-          <mat-icon> share </mat-icon>
-          Share
-        </button>
-      </ng-container>
-      <ng-container *ngIf="appConfig.archiveWorkflowEnabled">
-        <button mat-button (click)="onArchive()" class="button" color="primary">
-          <mat-icon> archive </mat-icon>
-          Archive
-        </button>
-        <button
-          mat-button
-          (click)="onRetrieve()"
-          class="button"
-          color="primary"
-        >
-          <mat-icon> cloud_download </mat-icon>
-          Retrieve
-        </button>
-      </ng-container>
     </div>
 
     <mat-table

src/app/datasets/batch-view/batch-view.component.ts

@@ -14,7 +14,7 @@ import { Message, MessageType } from "state-management/models";
 import { showMessageAction } from "state-management/actions/user.actions";
 import { DialogComponent } from "shared/modules/dialog/dialog.component";
 
-import { Router } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { ArchivingService } from "../archiving.service";
 import { Observable, Subscription, combineLatest } from "rxjs";
 import { MatDialog } from "@angular/material/dialog";
@@ -39,6 +39,7 @@ export class BatchViewComponent implements OnInit, OnDestroy {
   );
   userProfile$ = this.store.select(selectProfile);
   isAdmin$ = this.store.select(selectIsAdmin);
+  params$ = this.route.queryParams;
   isAdmin = false;
   userProfile: any = {};
   subscriptions: Subscription[] = [];
@@ -57,6 +58,7 @@ export class BatchViewComponent implements OnInit, OnDestroy {
     private store: Store,
     private archivingSrv: ArchivingService,
     private router: Router,
+    private route: ActivatedRoute,
   ) {}
 
   private clearBatch() {
@@ -83,6 +85,13 @@ export class BatchViewComponent implements OnInit, OnDestroy {
     this.router.navigate(["datasets", "selection", "publish"]);
   }
 
+  onShareClick() {
+    this.router.navigate([], {
+      queryParams: { share: "true" },
+      queryParamsHandling: "merge",
+    });
+  }
+
   onShare() {
     const shouldHaveInfoMessage =
       !this.isAdmin &&
@@ -157,6 +166,11 @@ export class BatchViewComponent implements OnInit, OnDestroy {
         );
         this.store.dispatch(showMessageAction({ message }));
       }
+
+      this.router.navigate([], {
+        queryParams: { share: null },
+        queryParamsHandling: "merge",
+      });
     });
   }
 
@@ -208,6 +222,11 @@ export class BatchViewComponent implements OnInit, OnDestroy {
             ),
         );
       }
+
+      this.router.navigate([], {
+        queryParams: { retrieve: null },
+        queryParamsHandling: "merge",
+      });
     });
   }
 
@@ -267,6 +286,17 @@ export class BatchViewComponent implements OnInit, OnDestroy {
         }
       }),
     );
+
+    this.subscriptions.push(
+      combineLatest([this.params$]).subscribe(([queryParams]) => {
+        if (queryParams["share"] === "true") {
+          this.onShare();
+        }
+        if (queryParams["retrieve"] === "true") {
+          this.onRetrieve();
+        }
+      }),
+    );
   }
 
   ngOnDestroy() {