From 84bfd0bf741df5f0d72345577261ca1cd192f032 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Tue, 17 Dec 2024 03:11:57 +0000
Subject: [PATCH 01/20] DOCS: Update README with AWS deployment instructions
 and environment setup

---
 README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/README.md b/README.md
index e627bd7..aa552f9 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,54 @@
 # BGSI-GeneticAnalysisSupportPlatformIndonesia-GASPI
+
+## AMI Details for AWS based deployment
+
+```
+al2023-ami-2023.6.20241212.0-kernel-6.1-x86_64
+```
+
+## Setting up environment in EC2 (Amazon Linux 2023)
+
+Install necessary tools
+
+```bash
+RUN dnf update -y
+RUN dnf install -y git docker
+```
+
+Start docker deamon and build the container
+
+```bash
+sudo service docker start
+sudo usermod -a -G docker ec2-user
+sudo docker build --build-arg PLATFORM=linux/amd64 -t gaspi .devcontainer
+```
+
+Start the container
+
+```bash
+sudo docker run --init --rm --privileged \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  -v `pwd`:`pwd` \
+  -w `pwd` \
+  --platform linux/x86_64 \
+  -it gaspi:latest \
+  /bin/bash
+```
+
+## Clone Source Code
+
+```bash
+git clone https://github.com/GSI-Xapiens-CSIRO/BGSI-GeneticAnalysisSupportPlatformIndonesia-GASPI.git
+git submodule init
+git submodule update
+```
+
+## Initialisation
+
+Please run `init.sh` scripts in `svep` and `sbeacon` directories. Then run `pnpm install` from `webgui/webapp` directory.
+
+## Deployment
+
+```bash
+terraform apply
+```

From 993bd3bf31f64af3824ce3930aff30510d84eef8 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Tue, 17 Dec 2024 06:15:15 +0000
Subject: [PATCH 02/20] MAINT: sync sbeacon

---
 sbeacon | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sbeacon b/sbeacon
index 1939bf4..e10fda2 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit 1939bf4e49ee981663f0af751caf703885c898e7
+Subproject commit e10fda23c14e06337e6949d2510984838fdc47e5

From 6852a66fb8d2b51f7c9904977de7f6ef9e3971e3 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Wed, 18 Dec 2024 02:10:17 +0000
Subject: [PATCH 03/20] FIX: remove unnecessary mat-dialog-close attribute from
 access keys dialog

---
 .../access-keys-dialog/access-keys-dialog.component.html         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/access-keys-dialog/access-keys-dialog.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/access-keys-dialog/access-keys-dialog.component.html
index d0cdd59..2bcf8c9 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/access-keys-dialog/access-keys-dialog.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/access-keys-dialog/access-keys-dialog.component.html
@@ -41,7 +41,6 @@ <h1 mat-dialog-title>Access Keys</h1>
 
   <button
     mat-raised-button
-    mat-dialog-close
     color="primary"
     [cdkCopyToClipboard]="copyString"
     style="margin-right: 10px"

From 7f65dd65434ffbc6ce6de0ff0366239a74c04728 Mon Sep 17 00:00:00 2001
From: NickEdwards7502 <nickedwards7502@gmail.com>
Date: Thu, 19 Dec 2024 10:10:37 +0000
Subject: [PATCH 04/20] DEV: Integrate staging bucket

* Added storage service for switching file upload destination
* Direct project file uploads to staging bucket
---
 cognito/cognito.tf                             |  4 ++--
 cognito/variables.tf                           |  7 ++++++-
 main.tf                                        |  3 +++
 sbeacon                                        |  2 +-
 variables.tf                                   |  5 +++++
 webgui/terraform-aws/build_and_hash.py         |  6 ++++++
 webgui/terraform-aws/upload.tf                 |  1 +
 webgui/terraform-aws/variables.tf              |  5 +++++
 .../data-submission-form.component.ts          |  4 ++++
 .../project-updates.component.ts               |  4 ++++
 .../user-file-list/user-file-list.component.ts | 10 +++++++++-
 .../query-result-viewer-container.component.ts |  4 ++++
 .../src/app/services/storage.service.spec.ts   | 16 ++++++++++++++++
 .../webapp/src/app/services/storage.service.ts | 18 ++++++++++++++++++
 14 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 webgui/webapp/src/app/services/storage.service.spec.ts
 create mode 100644 webgui/webapp/src/app/services/storage.service.ts

diff --git a/cognito/cognito.tf b/cognito/cognito.tf
index b07e937..e33164a 100644
--- a/cognito/cognito.tf
+++ b/cognito/cognito.tf
@@ -104,7 +104,7 @@ data "aws_iam_policy_document" "admin_group_role_policy" {
       "s3:*"
     ]
     resources = [
-      "arn:aws:s3:::${var.dataportal-bucket-prefix}*/projects/*",
+      "arn:aws:s3:::${var.staging-bucket-prefix}*/projects/*",
     ]
   }
 
@@ -212,7 +212,7 @@ data "aws_iam_policy_document" "manager_group_role_policy" {
       "s3:*"
     ]
     resources = [
-      "arn:aws:s3:::${var.dataportal-bucket-prefix}*/projects/*",
+      "arn:aws:s3:::${var.staging-bucket-prefix}*/projects/*",
     ]
   }
 
diff --git a/cognito/variables.tf b/cognito/variables.tf
index 0da2886..9f7f78a 100644
--- a/cognito/variables.tf
+++ b/cognito/variables.tf
@@ -30,5 +30,10 @@ variable "gaspi-admin-password" {
 
 variable "dataportal-bucket-prefix" {
   type        = string
-  description = "Prefix for bucket names"
+  description = "Prefix for dataportal bucket names"
+}
+
+variable "staging-bucket-prefix" {
+  type        = string
+  description = "Prefix for staging bucket names"
 }
\ No newline at end of file
diff --git a/main.tf b/main.tf
index d0edecf..ca8b228 100644
--- a/main.tf
+++ b/main.tf
@@ -6,6 +6,7 @@ module "cognito" {
   gaspi-admin-username     = var.gaspi-admin-username
   gaspi-admin-password     = var.gaspi-admin-password
   dataportal-bucket-prefix = var.dataportal-bucket-prefix
+  staging-bucket-prefix    = var.staging-bucket-prefix
 
   common-tags = merge(var.common-tags, {
     "NAME" = "cognito-infrastructure"
@@ -19,6 +20,7 @@ module "sbeacon" {
   metadata-bucket-prefix      = var.metadata-bucket-prefix
   lambda-layers-bucket-prefix = var.lambda-layers-bucket-prefix
   dataportal-bucket-prefix    = var.dataportal-bucket-prefix
+  staging-bucket-prefix       = var.staging-bucket-prefix
   beacon-ui-url               = module.webgui.cloudfront-url
   cognito-user-pool-arn       = module.cognito.cognito_user_pool_arn
   cognito-user-pool-id        = module.cognito.cognito_user_pool_id
@@ -50,6 +52,7 @@ module "webgui" {
   identity_pool_id             = module.cognito.cognito_identity_pool_id
   user_pool_web_client_id      = module.cognito.cognito_client_id
   data_portal_bucket           = module.sbeacon.data-portal-bucket
+  staging_bucket               = module.sbeacon.staging-bucket
   api_endpoint_sbeacon         = "${module.sbeacon.api_url}${module.sbeacon.api_stage}/"
   api_endpoint_svep            = module.svep.api_url
 
diff --git a/sbeacon b/sbeacon
index 5268462..b6aa1cd 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit 52684623a024f02c622eb0cdcbca45b8138148b6
+Subproject commit b6aa1cd6c6e51ad4c02ea1851c7cb339724917a4
diff --git a/variables.tf b/variables.tf
index 28b3ab5..fea7fff 100644
--- a/variables.tf
+++ b/variables.tf
@@ -52,6 +52,11 @@ variable "dataportal-bucket-prefix" {
   description = "Prefix for the dataportal S3 bucket"
 }
 
+variable "staging-bucket-prefix" {
+  type        = string
+  description = "Prefix for the staging S3 bucket"
+}
+
 variable "ses-source-email" {
   type        = string
   description = "Address from which to send SES emails"
diff --git a/webgui/terraform-aws/build_and_hash.py b/webgui/terraform-aws/build_and_hash.py
index 6c5ff7e..2731ebe 100644
--- a/webgui/terraform-aws/build_and_hash.py
+++ b/webgui/terraform-aws/build_and_hash.py
@@ -17,6 +17,7 @@
   }},
   storage: {{
     dataPortalBucket: '{data_portal_bucket}',
+    stagingBucket: '{staging_bucket}',
   }},
   api_endpoint_sbeacon: {{
     name: 'sbeacon',
@@ -82,6 +83,7 @@ def setup_env(
     identity_pool_id: str,
     user_pool_web_client_id: str,
     data_portal_bucket: str,
+    staging_bucket: str,
     api_endpoint_sbeacon: str,
     api_endpoint_svep: str,
     dir: str,
@@ -97,6 +99,7 @@ def setup_env(
                 user_pool_id=user_pool_id,
                 identity_pool_id=identity_pool_id,
                 data_portal_bucket=data_portal_bucket,
+                staging_bucket=staging_bucket,
                 user_pool_web_client_id=user_pool_web_client_id,
                 api_endpoint_sbeacon=api_endpoint_sbeacon,
                 api_endpoint_svep=api_endpoint_svep,
@@ -111,6 +114,7 @@ def setup_env(
                 user_pool_id=user_pool_id,
                 identity_pool_id=identity_pool_id,
                 data_portal_bucket=data_portal_bucket,
+                staging_bucket=staging_bucket,
                 user_pool_web_client_id=user_pool_web_client_id,
                 api_endpoint_sbeacon=api_endpoint_sbeacon,
                 api_endpoint_svep=api_endpoint_svep,
@@ -132,6 +136,7 @@ def setup_env(
     api_endpoint_sbeacon = args["api_endpoint_sbeacon"]
     api_endpoint_svep = args["api_endpoint_svep"]
     data_portal_bucket = args["data_portal_bucket"]
+    staging_bucket = args["staging_bucket"]
 
     setup_env(
         base_range,
@@ -140,6 +145,7 @@ def setup_env(
         identity_pool_id,
         user_pool_web_client_id,
         data_portal_bucket,
+        staging_bucket,
         api_endpoint_sbeacon,
         api_endpoint_svep,
         webapp_dir,
diff --git a/webgui/terraform-aws/upload.tf b/webgui/terraform-aws/upload.tf
index 57c1d9f..71ae3b2 100644
--- a/webgui/terraform-aws/upload.tf
+++ b/webgui/terraform-aws/upload.tf
@@ -11,6 +11,7 @@ data "external" "build" {
     identity_pool_id             = var.identity_pool_id
     user_pool_web_client_id      = var.user_pool_web_client_id
     data_portal_bucket           = var.data_portal_bucket
+    staging_bucket               = var.staging_bucket
     api_endpoint_sbeacon         = var.api_endpoint_sbeacon
     api_endpoint_svep            = var.api_endpoint_svep
   }
diff --git a/webgui/terraform-aws/variables.tf b/webgui/terraform-aws/variables.tf
index ee14be0..ee02e66 100644
--- a/webgui/terraform-aws/variables.tf
+++ b/webgui/terraform-aws/variables.tf
@@ -55,6 +55,11 @@ variable "data_portal_bucket" {
   description = "Bucket name of the data portal."
 }
 
+variable "staging_bucket" {
+  type        = string
+  description = "Bucket name of the staging location."
+}
+
 variable "user_pool_web_client_id" {
   type        = string
   description = "User pool web client ID for authentication."
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
index 41b332f..88e24cd 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
@@ -10,6 +10,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { DportalService } from '../../../../../services/dportal.service';
+import { StorageService } from '../../../../../services/storage.service';
 import { catchError, of, switchMap, map, defaultIfEmpty } from 'rxjs';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { FileDropperComponent } from '../../file-dropper/file-dropper.component';
@@ -18,6 +19,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { forkJoin } from 'rxjs';
 import { MatIconModule } from '@angular/material/icon';
 import { DecimalPipe } from '@angular/common';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-data-submission-form',
@@ -48,6 +50,7 @@ export class DataSubmissionFormComponent {
   constructor(
     private fb: FormBuilder,
     private dps: DportalService,
+    private sts: StorageService,
     private sb: MatSnackBar,
   ) {
     this.dataSubmissionForm = this.fb.group({
@@ -60,6 +63,7 @@ export class DataSubmissionFormComponent {
   }
 
   async uploadFile(path: string, file: File): Promise<string> {
+    this.sts.setBucket(environment.storage.stagingBucket, environment.auth.region);
     this.fileProgress.set(file.name, 0);
     try {
       await Storage.put(`projects/${path}/${file.name}`, file, {
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
index e7d06b2..ac20365 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
@@ -19,6 +19,7 @@ import {
   Validators,
 } from '@angular/forms';
 import { DportalService } from 'src/app/services/dportal.service';
+import { StorageService } from 'src/app/services/storage.service';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { DecimalPipe } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -27,6 +28,7 @@ import { Storage } from 'aws-amplify';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatInputModule } from '@angular/material/input';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-project-updates',
@@ -61,6 +63,7 @@ export class ProjectUpdatesComponent implements OnChanges {
   constructor(
     private fb: FormBuilder,
     private dps: DportalService,
+    private sts: StorageService,
     private sb: MatSnackBar,
     private dg: MatDialog,
   ) {}
@@ -164,6 +167,7 @@ export class ProjectUpdatesComponent implements OnChanges {
   }
 
   async uploadFile(path: string, file: File): Promise<string> {
+    this.sts.setBucket(environment.storage.stagingBucket, environment.auth.region);
     this.fileProgress.set(file.name, 0);
     try {
       await Storage.put(`projects/${path}/${file.name}`, file, {
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts
index f18ce15..939c7b6 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts
@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { StorageService } from 'src/app/services/storage.service';
 import { Storage } from 'aws-amplify';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-user-file-list',
@@ -15,13 +17,17 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 export class UserFileListComponent implements OnInit {
   myFiles: any[] = [];
 
-  constructor(private dg: MatDialog) {}
+  constructor(
+    private dg: MatDialog,
+    private sts: StorageService,
+  ) {}
 
   ngOnInit(): void {
     this.list();
   }
 
   async list() {
+    this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
     const res = await Storage.list(``, {
       pageSize: 'ALL',
       level: 'private',
@@ -30,6 +36,7 @@ export class UserFileListComponent implements OnInit {
   }
 
   async copy(file: any) {
+    this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
     const url = await Storage.get(file.key, {
       expires: 3600,
       level: 'private',
@@ -58,6 +65,7 @@ export class UserFileListComponent implements OnInit {
     });
     dialog.afterClosed().subscribe(async (result) => {
       if (result) {
+        this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
         await Storage.remove(file.key, { level: 'private' });
         this.myFiles = this.myFiles.filter((f) => f.key !== file.key);
       }
diff --git a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts
index acf38f2..8a6f7a6 100644
--- a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts
@@ -9,11 +9,13 @@ import { VisualQueryResultsViewerComponent } from '../visual-query-results-viewe
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { DportalService } from 'src/app/services/dportal.service';
+import { StorageService } from 'src/app/services/storage.service';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { SpinnerService } from 'src/app/services/spinner.service';
 import { catchError, from, of } from 'rxjs';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { Storage } from 'aws-amplify';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-query-result-viewer-container',
@@ -48,6 +50,7 @@ export class QueryResultViewerContainerComponent implements OnChanges {
   protected words: any[] = [];
 
   constructor(
+    private sts: StorageService,
     private dg: MatDialog,
     private ss: SpinnerService,
     private sb: MatSnackBar,
@@ -94,6 +97,7 @@ export class QueryResultViewerContainerComponent implements OnChanges {
     dialog.afterClosed().subscribe((name) => {
       if (name) {
         this.ss.start();
+        this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
         from(
           Storage.put(`saved-queries/${name}.json`, content, {
             level: 'private',
diff --git a/webgui/webapp/src/app/services/storage.service.spec.ts b/webgui/webapp/src/app/services/storage.service.spec.ts
new file mode 100644
index 0000000..e7fe5b5
--- /dev/null
+++ b/webgui/webapp/src/app/services/storage.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StorageService } from './storage.service';
+
+describe('StorageService', () => {
+  let service: StorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/webgui/webapp/src/app/services/storage.service.ts b/webgui/webapp/src/app/services/storage.service.ts
new file mode 100644
index 0000000..eb830fb
--- /dev/null
+++ b/webgui/webapp/src/app/services/storage.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Storage } from 'aws-amplify';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StorageService {
+  constructor() {}
+
+  setBucket(bucket: string, region: string) {
+    Storage.configure({
+      AWSS3: {
+        bucket,
+        region,
+      },
+    });
+  }
+}

From 0a210f3e6a5332344e04a64d6d1a9e40a108d0b6 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Thu, 19 Dec 2024 23:23:25 +0000
Subject: [PATCH 05/20] MAINT: update subproject commit reference

---
 sbeacon | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sbeacon b/sbeacon
index e10fda2..e02c224 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit e10fda23c14e06337e6949d2510984838fdc47e5
+Subproject commit e02c22469e6df7c4d5dad89d01958a54058bc696

From 9284f0b562bb13348304ce65fb6b05931e563e40 Mon Sep 17 00:00:00 2001
From: NickEdwards7502 <nickedwards7502@gmail.com>
Date: Fri, 20 Dec 2024 05:10:07 +0000
Subject: [PATCH 06/20] Revert "DEV: Integrate staging bucket"

* Reference to sBeacon submodule not reverted

This reverts commit 7f65dd65434ffbc6ce6de0ff0366239a74c04728.
---
 cognito/cognito.tf                             |  4 ++--
 cognito/variables.tf                           |  7 +------
 main.tf                                        |  3 ---
 variables.tf                                   |  5 -----
 webgui/terraform-aws/build_and_hash.py         |  6 ------
 webgui/terraform-aws/upload.tf                 |  1 -
 webgui/terraform-aws/variables.tf              |  5 -----
 .../data-submission-form.component.ts          |  4 ----
 .../project-updates.component.ts               |  4 ----
 .../user-file-list/user-file-list.component.ts | 10 +---------
 .../query-result-viewer-container.component.ts |  4 ----
 .../src/app/services/storage.service.spec.ts   | 16 ----------------
 .../webapp/src/app/services/storage.service.ts | 18 ------------------
 13 files changed, 4 insertions(+), 83 deletions(-)
 delete mode 100644 webgui/webapp/src/app/services/storage.service.spec.ts
 delete mode 100644 webgui/webapp/src/app/services/storage.service.ts

diff --git a/cognito/cognito.tf b/cognito/cognito.tf
index e33164a..b07e937 100644
--- a/cognito/cognito.tf
+++ b/cognito/cognito.tf
@@ -104,7 +104,7 @@ data "aws_iam_policy_document" "admin_group_role_policy" {
       "s3:*"
     ]
     resources = [
-      "arn:aws:s3:::${var.staging-bucket-prefix}*/projects/*",
+      "arn:aws:s3:::${var.dataportal-bucket-prefix}*/projects/*",
     ]
   }
 
@@ -212,7 +212,7 @@ data "aws_iam_policy_document" "manager_group_role_policy" {
       "s3:*"
     ]
     resources = [
-      "arn:aws:s3:::${var.staging-bucket-prefix}*/projects/*",
+      "arn:aws:s3:::${var.dataportal-bucket-prefix}*/projects/*",
     ]
   }
 
diff --git a/cognito/variables.tf b/cognito/variables.tf
index 9f7f78a..0da2886 100644
--- a/cognito/variables.tf
+++ b/cognito/variables.tf
@@ -30,10 +30,5 @@ variable "gaspi-admin-password" {
 
 variable "dataportal-bucket-prefix" {
   type        = string
-  description = "Prefix for dataportal bucket names"
-}
-
-variable "staging-bucket-prefix" {
-  type        = string
-  description = "Prefix for staging bucket names"
+  description = "Prefix for bucket names"
 }
\ No newline at end of file
diff --git a/main.tf b/main.tf
index ca8b228..d0edecf 100644
--- a/main.tf
+++ b/main.tf
@@ -6,7 +6,6 @@ module "cognito" {
   gaspi-admin-username     = var.gaspi-admin-username
   gaspi-admin-password     = var.gaspi-admin-password
   dataportal-bucket-prefix = var.dataportal-bucket-prefix
-  staging-bucket-prefix    = var.staging-bucket-prefix
 
   common-tags = merge(var.common-tags, {
     "NAME" = "cognito-infrastructure"
@@ -20,7 +19,6 @@ module "sbeacon" {
   metadata-bucket-prefix      = var.metadata-bucket-prefix
   lambda-layers-bucket-prefix = var.lambda-layers-bucket-prefix
   dataportal-bucket-prefix    = var.dataportal-bucket-prefix
-  staging-bucket-prefix       = var.staging-bucket-prefix
   beacon-ui-url               = module.webgui.cloudfront-url
   cognito-user-pool-arn       = module.cognito.cognito_user_pool_arn
   cognito-user-pool-id        = module.cognito.cognito_user_pool_id
@@ -52,7 +50,6 @@ module "webgui" {
   identity_pool_id             = module.cognito.cognito_identity_pool_id
   user_pool_web_client_id      = module.cognito.cognito_client_id
   data_portal_bucket           = module.sbeacon.data-portal-bucket
-  staging_bucket               = module.sbeacon.staging-bucket
   api_endpoint_sbeacon         = "${module.sbeacon.api_url}${module.sbeacon.api_stage}/"
   api_endpoint_svep            = module.svep.api_url
 
diff --git a/variables.tf b/variables.tf
index fea7fff..28b3ab5 100644
--- a/variables.tf
+++ b/variables.tf
@@ -52,11 +52,6 @@ variable "dataportal-bucket-prefix" {
   description = "Prefix for the dataportal S3 bucket"
 }
 
-variable "staging-bucket-prefix" {
-  type        = string
-  description = "Prefix for the staging S3 bucket"
-}
-
 variable "ses-source-email" {
   type        = string
   description = "Address from which to send SES emails"
diff --git a/webgui/terraform-aws/build_and_hash.py b/webgui/terraform-aws/build_and_hash.py
index 2731ebe..6c5ff7e 100644
--- a/webgui/terraform-aws/build_and_hash.py
+++ b/webgui/terraform-aws/build_and_hash.py
@@ -17,7 +17,6 @@
   }},
   storage: {{
     dataPortalBucket: '{data_portal_bucket}',
-    stagingBucket: '{staging_bucket}',
   }},
   api_endpoint_sbeacon: {{
     name: 'sbeacon',
@@ -83,7 +82,6 @@ def setup_env(
     identity_pool_id: str,
     user_pool_web_client_id: str,
     data_portal_bucket: str,
-    staging_bucket: str,
     api_endpoint_sbeacon: str,
     api_endpoint_svep: str,
     dir: str,
@@ -99,7 +97,6 @@ def setup_env(
                 user_pool_id=user_pool_id,
                 identity_pool_id=identity_pool_id,
                 data_portal_bucket=data_portal_bucket,
-                staging_bucket=staging_bucket,
                 user_pool_web_client_id=user_pool_web_client_id,
                 api_endpoint_sbeacon=api_endpoint_sbeacon,
                 api_endpoint_svep=api_endpoint_svep,
@@ -114,7 +111,6 @@ def setup_env(
                 user_pool_id=user_pool_id,
                 identity_pool_id=identity_pool_id,
                 data_portal_bucket=data_portal_bucket,
-                staging_bucket=staging_bucket,
                 user_pool_web_client_id=user_pool_web_client_id,
                 api_endpoint_sbeacon=api_endpoint_sbeacon,
                 api_endpoint_svep=api_endpoint_svep,
@@ -136,7 +132,6 @@ def setup_env(
     api_endpoint_sbeacon = args["api_endpoint_sbeacon"]
     api_endpoint_svep = args["api_endpoint_svep"]
     data_portal_bucket = args["data_portal_bucket"]
-    staging_bucket = args["staging_bucket"]
 
     setup_env(
         base_range,
@@ -145,7 +140,6 @@ def setup_env(
         identity_pool_id,
         user_pool_web_client_id,
         data_portal_bucket,
-        staging_bucket,
         api_endpoint_sbeacon,
         api_endpoint_svep,
         webapp_dir,
diff --git a/webgui/terraform-aws/upload.tf b/webgui/terraform-aws/upload.tf
index 71ae3b2..57c1d9f 100644
--- a/webgui/terraform-aws/upload.tf
+++ b/webgui/terraform-aws/upload.tf
@@ -11,7 +11,6 @@ data "external" "build" {
     identity_pool_id             = var.identity_pool_id
     user_pool_web_client_id      = var.user_pool_web_client_id
     data_portal_bucket           = var.data_portal_bucket
-    staging_bucket               = var.staging_bucket
     api_endpoint_sbeacon         = var.api_endpoint_sbeacon
     api_endpoint_svep            = var.api_endpoint_svep
   }
diff --git a/webgui/terraform-aws/variables.tf b/webgui/terraform-aws/variables.tf
index ee02e66..ee14be0 100644
--- a/webgui/terraform-aws/variables.tf
+++ b/webgui/terraform-aws/variables.tf
@@ -55,11 +55,6 @@ variable "data_portal_bucket" {
   description = "Bucket name of the data portal."
 }
 
-variable "staging_bucket" {
-  type        = string
-  description = "Bucket name of the staging location."
-}
-
 variable "user_pool_web_client_id" {
   type        = string
   description = "User pool web client ID for authentication."
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
index 88e24cd..41b332f 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
@@ -10,7 +10,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { DportalService } from '../../../../../services/dportal.service';
-import { StorageService } from '../../../../../services/storage.service';
 import { catchError, of, switchMap, map, defaultIfEmpty } from 'rxjs';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { FileDropperComponent } from '../../file-dropper/file-dropper.component';
@@ -19,7 +18,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { forkJoin } from 'rxjs';
 import { MatIconModule } from '@angular/material/icon';
 import { DecimalPipe } from '@angular/common';
-import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-data-submission-form',
@@ -50,7 +48,6 @@ export class DataSubmissionFormComponent {
   constructor(
     private fb: FormBuilder,
     private dps: DportalService,
-    private sts: StorageService,
     private sb: MatSnackBar,
   ) {
     this.dataSubmissionForm = this.fb.group({
@@ -63,7 +60,6 @@ export class DataSubmissionFormComponent {
   }
 
   async uploadFile(path: string, file: File): Promise<string> {
-    this.sts.setBucket(environment.storage.stagingBucket, environment.auth.region);
     this.fileProgress.set(file.name, 0);
     try {
       await Storage.put(`projects/${path}/${file.name}`, file, {
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
index ac20365..e7d06b2 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
@@ -19,7 +19,6 @@ import {
   Validators,
 } from '@angular/forms';
 import { DportalService } from 'src/app/services/dportal.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { DecimalPipe } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -28,7 +27,6 @@ import { Storage } from 'aws-amplify';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatInputModule } from '@angular/material/input';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-project-updates',
@@ -63,7 +61,6 @@ export class ProjectUpdatesComponent implements OnChanges {
   constructor(
     private fb: FormBuilder,
     private dps: DportalService,
-    private sts: StorageService,
     private sb: MatSnackBar,
     private dg: MatDialog,
   ) {}
@@ -167,7 +164,6 @@ export class ProjectUpdatesComponent implements OnChanges {
   }
 
   async uploadFile(path: string, file: File): Promise<string> {
-    this.sts.setBucket(environment.storage.stagingBucket, environment.auth.region);
     this.fileProgress.set(file.name, 0);
     try {
       await Storage.put(`projects/${path}/${file.name}`, file, {
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts
index 939c7b6..f18ce15 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.ts
@@ -1,11 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { StorageService } from 'src/app/services/storage.service';
 import { Storage } from 'aws-amplify';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-user-file-list',
@@ -17,17 +15,13 @@ import { environment } from 'src/environments/environment';
 export class UserFileListComponent implements OnInit {
   myFiles: any[] = [];
 
-  constructor(
-    private dg: MatDialog,
-    private sts: StorageService,
-  ) {}
+  constructor(private dg: MatDialog) {}
 
   ngOnInit(): void {
     this.list();
   }
 
   async list() {
-    this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
     const res = await Storage.list(``, {
       pageSize: 'ALL',
       level: 'private',
@@ -36,7 +30,6 @@ export class UserFileListComponent implements OnInit {
   }
 
   async copy(file: any) {
-    this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
     const url = await Storage.get(file.key, {
       expires: 3600,
       level: 'private',
@@ -65,7 +58,6 @@ export class UserFileListComponent implements OnInit {
     });
     dialog.afterClosed().subscribe(async (result) => {
       if (result) {
-        this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
         await Storage.remove(file.key, { level: 'private' });
         this.myFiles = this.myFiles.filter((f) => f.key !== file.key);
       }
diff --git a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts
index 8a6f7a6..acf38f2 100644
--- a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-result-viewer-container/query-result-viewer-container.component.ts
@@ -9,13 +9,11 @@ import { VisualQueryResultsViewerComponent } from '../visual-query-results-viewe
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { DportalService } from 'src/app/services/dportal.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { SpinnerService } from 'src/app/services/spinner.service';
 import { catchError, from, of } from 'rxjs';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { Storage } from 'aws-amplify';
-import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-query-result-viewer-container',
@@ -50,7 +48,6 @@ export class QueryResultViewerContainerComponent implements OnChanges {
   protected words: any[] = [];
 
   constructor(
-    private sts: StorageService,
     private dg: MatDialog,
     private ss: SpinnerService,
     private sb: MatSnackBar,
@@ -97,7 +94,6 @@ export class QueryResultViewerContainerComponent implements OnChanges {
     dialog.afterClosed().subscribe((name) => {
       if (name) {
         this.ss.start();
-        this.sts.setBucket(environment.storage.dataPortalBucket, environment.auth.region);
         from(
           Storage.put(`saved-queries/${name}.json`, content, {
             level: 'private',
diff --git a/webgui/webapp/src/app/services/storage.service.spec.ts b/webgui/webapp/src/app/services/storage.service.spec.ts
deleted file mode 100644
index e7fe5b5..0000000
--- a/webgui/webapp/src/app/services/storage.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { StorageService } from './storage.service';
-
-describe('StorageService', () => {
-  let service: StorageService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(StorageService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/webgui/webapp/src/app/services/storage.service.ts b/webgui/webapp/src/app/services/storage.service.ts
deleted file mode 100644
index eb830fb..0000000
--- a/webgui/webapp/src/app/services/storage.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Storage } from 'aws-amplify';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class StorageService {
-  constructor() {}
-
-  setBucket(bucket: string, region: string) {
-    Storage.configure({
-      AWSS3: {
-        bucket,
-        region,
-      },
-    });
-  }
-}

From 42192dd76d536afbbecd0bb0ca8bb583e33474ec Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Fri, 20 Dec 2024 06:21:29 +0000
Subject: [PATCH 07/20] DEV: add identity_id attribute to Cognito user pool and
 update user attributes on identity change

---
 cognito/cognito.tf                             |  8 ++++++++
 webgui/webapp/src/app/app.component.ts         |  6 ------
 webgui/webapp/src/app/services/auth.service.ts | 18 ++++++++++++++----
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/cognito/cognito.tf b/cognito/cognito.tf
index b07e937..726d45c 100644
--- a/cognito/cognito.tf
+++ b/cognito/cognito.tf
@@ -32,6 +32,14 @@ resource "aws_cognito_user_pool" "gaspi_user_pool" {
     mutable                  = false
     required                 = false
   }
+
+  schema {
+    name                     = "identity_id"
+    attribute_data_type      = "String"
+    developer_only_attribute = false
+    mutable                  = true
+    required                 = false
+  }
 }
 
 resource "aws_cognito_user_pool_client" "gaspi_user_pool_client" {
diff --git a/webgui/webapp/src/app/app.component.ts b/webgui/webapp/src/app/app.component.ts
index d6b7733..79a825b 100644
--- a/webgui/webapp/src/app/app.component.ts
+++ b/webgui/webapp/src/app/app.component.ts
@@ -89,12 +89,6 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     this.isCollapsed = this.el.nativeElement.offsetWidth < 1200;
-    // TODO - check if this is really necessary
-    // this prevents users from reloading and landing on same page even when they are logged in
-    // route security is enabled by the authguards
-    (async () => {
-      await this.auth.refresh();
-    })();
   }
 
   @HostListener('window:resize', ['event'])
diff --git a/webgui/webapp/src/app/services/auth.service.ts b/webgui/webapp/src/app/services/auth.service.ts
index f34cd3d..10380b5 100644
--- a/webgui/webapp/src/app/services/auth.service.ts
+++ b/webgui/webapp/src/app/services/auth.service.ts
@@ -1,16 +1,15 @@
 import { Injectable } from '@angular/core';
 import { Auth, Hub } from 'aws-amplify';
-import { CognitoUser } from 'amazon-cognito-identity-js';
 import { BehaviorSubject } from 'rxjs';
 import { Router } from '@angular/router';
-import _, { identity } from 'lodash';
+import _ from 'lodash';
 import { CustomReuseStrategy } from '../app.config';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
-  public user = new BehaviorSubject<CognitoUser | null>(null);
+  public user = new BehaviorSubject<any | null>(null);
   public userGroups = new BehaviorSubject<Set<string>>(new Set([]));
   private tempUser: any = null;
 
@@ -72,7 +71,18 @@ export class AuthService {
 
   async refresh() {
     try {
-      const user = await Auth.currentAuthenticatedUser();
+      const creds = await Auth.currentCredentials();
+      let user = await Auth.currentAuthenticatedUser();
+      console.log(user);
+
+      if (user.attributes['custom:identity_id'] != creds.identityId) {
+        console.log('Updating identity_id');
+        await Auth.updateUserAttributes(user, {
+          'custom:identity_id': creds.identityId,
+        });
+        user = await Auth.currentAuthenticatedUser();
+      }
+
       this.userGroups.next(
         new Set(user.signInUserSession.idToken.payload['cognito:groups']),
       );

From bf3e73298853a88ed4be9ec070f6fdeb9f61e024 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Mon, 23 Dec 2024 01:08:34 +0000
Subject: [PATCH 08/20] FIX: prevent cognito pool modification

---
 cognito/cognito.tf | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/cognito/cognito.tf b/cognito/cognito.tf
index 726d45c..0471ba5 100644
--- a/cognito/cognito.tf
+++ b/cognito/cognito.tf
@@ -39,6 +39,8 @@ resource "aws_cognito_user_pool" "gaspi_user_pool" {
     developer_only_attribute = false
     mutable                  = true
     required                 = false
+
+    string_attribute_constraints {}
   }
 }
 

From 13b7d9fe0daceea8e08066be694f13af438f8d41 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Mon, 23 Dec 2024 03:54:03 +0000
Subject: [PATCH 09/20] FEAT: add admin folder management component and
 integrate into admin section

---
 sbeacon                                       |  2 +-
 .../admin-folder-list.component.html          | 67 +++++++++++++++
 .../admin-folder-list.component.scss          |  0
 .../admin-folder-list.component.spec.ts       | 23 +++++
 .../admin-folder-list.component.ts            | 83 +++++++++++++++++++
 .../admin-section.component.html              | 11 ++-
 .../admin-section/admin-section.component.ts  |  2 +
 .../webapp/src/app/services/auth.service.ts   |  3 +-
 .../src/app/services/dportal.service.ts       | 23 +++++
 9 files changed, 208 insertions(+), 6 deletions(-)
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.scss
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.spec.ts
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.ts

diff --git a/sbeacon b/sbeacon
index e02c224..cec42ea 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit e02c22469e6df7c4d5dad89d01958a54058bc696
+Subproject commit cec42ea02517a06ccd01ebb758c09f78c2fdd689
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html
new file mode 100644
index 0000000..e0015bd
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html
@@ -0,0 +1,67 @@
+<div class="flex flex-row justify-between w-full items-center">
+  <h2 class="flex">Folders tracked under users</h2>
+  <button
+    mat-mini-fab
+    color="primary"
+    class="flex items-center"
+    (click)="list()"
+  >
+    <mat-icon>refresh</mat-icon>
+  </button>
+</div>
+<p>These folders are held by active users.</p>
+<table mat-table [dataSource]="dataSource">
+  <!-- Given Name Column -->
+  <ng-container matColumnDef="given_name">
+    <th mat-header-cell *matHeaderCellDef>Given Name</th>
+    <td mat-cell *matCellDef="let element">{{ element.given_name }}</td>
+  </ng-container>
+
+  <!-- Family Name Column -->
+  <ng-container matColumnDef="family_name">
+    <th mat-header-cell *matHeaderCellDef>Family Name</th>
+    <td mat-cell *matCellDef="let element">{{ element.family_name }}</td>
+  </ng-container>
+
+  <!-- Email Column -->
+  <ng-container matColumnDef="email">
+    <th mat-header-cell *matHeaderCellDef>Email</th>
+    <td mat-cell *matCellDef="let element">{{ element.email }}</td>
+  </ng-container>
+
+  <!-- Actions Column -->
+  <ng-container matColumnDef="action">
+    <th mat-header-cell *matHeaderCellDef>Action</th>
+    <td mat-cell *matCellDef="let element">
+      <button
+        mat-mini-fab
+        color="primary"
+        (click)="deleteFolder(element['custom:identity_id'])"
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>
+
+@if (inactiveIdentities.length) {
+  <h2>Folders not tracked under users</h2>
+  <p>
+    These folders either belong to past users and currently does not belong to
+    anyone.
+  </p>
+
+  <div class="flex flex-col space-y-1">
+    @for (identity of inactiveIdentities; track identity) {
+      <div class="flex flex-row space-x-2 items-center">
+        <button mat-mini-fab color="primary" (click)="deleteFolder(identity)">
+          <mat-icon>delete</mat-icon>
+        </button>
+        <div class="flex font-semibold">{{ identity }}</div>
+      </div>
+    }
+  </div>
+}
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.scss b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.spec.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.spec.ts
new file mode 100644
index 0000000..79e2a8a
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminFolderListComponent } from './admin-folder-list.component';
+
+describe('AdminFolderListComponent', () => {
+  let component: AdminFolderListComponent;
+  let fixture: ComponentFixture<AdminFolderListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminFolderListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AdminFolderListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.ts
new file mode 100644
index 0000000..6ed685b
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.ts
@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import { catchError, of } from 'rxjs';
+import { DportalService } from 'src/app/services/dportal.service';
+
+@Component({
+  selector: 'app-admin-folder-list',
+  standalone: true,
+  imports: [
+    MatSnackBarModule,
+    MatTableModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDialogModule,
+  ],
+  templateUrl: './admin-folder-list.component.html',
+  styleUrl: './admin-folder-list.component.scss',
+})
+export class AdminFolderListComponent implements OnInit {
+  displayedColumns: string[] = ['given_name', 'family_name', 'email', 'action'];
+  dataSource: any[] = [];
+  inactiveIdentities: any[] = [];
+
+  constructor(
+    private dps: DportalService,
+    private sb: MatSnackBar,
+    private dg: MatDialog,
+  ) {}
+
+  ngOnInit(): void {
+    this.list();
+  }
+
+  list() {
+    this.dps
+      .adminGetUserFolders()
+      .pipe(catchError(() => of(null)))
+      .subscribe((data) => {
+        if (!data) {
+          this.sb.open('Error fetching folders', 'close', {
+            duration: 60000,
+          });
+        } else {
+          this.dataSource = data.active;
+          this.inactiveIdentities = data.inactive;
+        }
+      });
+  }
+
+  async deleteFolder(folder: string) {
+    const { ActionConfirmationDialogComponent } = await import(
+      'src/app/components/action-confirmation-dialog/action-confirmation-dialog.component'
+    );
+
+    const dialog = this.dg.open(ActionConfirmationDialogComponent, {
+      data: {
+        title: 'Delete User Folder',
+        message: 'Are you sure you want to delete this user folder?',
+      },
+    });
+
+    dialog.afterClosed().subscribe((result) => {
+      if (result) {
+        this.dps
+          .adminDeleteUserFolder(folder)
+          .pipe(catchError(() => of(null)))
+          .subscribe((data) => {
+            if (!data) {
+              this.sb.open('Error deleting folder', 'close', {
+                duration: 60000,
+              });
+            } else {
+              this.list();
+            }
+          });
+      }
+    });
+  }
+}
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.html
index cdde9d7..93f4df6 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.html
@@ -1,18 +1,16 @@
 <mat-card>
   <mat-card-content>
-    <h2>Project Management</h2>
-
     <mat-tab-group
       dynamicHeight="true"
       [(selectedIndex)]="selectedIndex"
       (selectedIndexChange)="onSubTabChange($event)"
     >
-      <mat-tab label="Onboarding">
+      <mat-tab label="Project Onboarding">
         <ng-template matTabContent>
           <app-data-submission-form />
         </ng-template>
       </mat-tab>
-      <mat-tab label="Projects">
+      <mat-tab label="Project Management">
         <ng-template matTabContent>
           <app-projects-list />
         </ng-template>
@@ -22,6 +20,11 @@ <h2>Project Management</h2>
           <app-notebooks />
         </ng-template>
       </mat-tab>
+      <mat-tab label="File Management">
+        <ng-template matTabContent>
+          <app-admin-folder-list />
+        </ng-template>
+      </mat-tab>
     </mat-tab-group>
   </mat-card-content>
 </mat-card>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.ts
index f4d64e4..f798b29 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-section.component.ts
@@ -5,6 +5,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { ProjectsListComponent } from './projects-list/projects-list.component';
 import { NotebooksComponent } from './admin-notebooks-list/admin-notebooks-list.component';
 import { Router } from '@angular/router';
+import { AdminFolderListComponent } from './admin-folder-list/admin-folder-list.component';
 
 @Component({
   selector: 'app-admin-section',
@@ -15,6 +16,7 @@ import { Router } from '@angular/router';
     MatTabsModule,
     ProjectsListComponent,
     NotebooksComponent,
+    AdminFolderListComponent,
   ],
   templateUrl: './admin-section.component.html',
   styleUrl: './admin-section.component.scss',
diff --git a/webgui/webapp/src/app/services/auth.service.ts b/webgui/webapp/src/app/services/auth.service.ts
index 10380b5..51bbf41 100644
--- a/webgui/webapp/src/app/services/auth.service.ts
+++ b/webgui/webapp/src/app/services/auth.service.ts
@@ -73,7 +73,8 @@ export class AuthService {
     try {
       const creds = await Auth.currentCredentials();
       let user = await Auth.currentAuthenticatedUser();
-      console.log(user);
+      console.log('User', user);
+      console.log('Identity', creds.identityId);
 
       if (user.attributes['custom:identity_id'] != creds.identityId) {
         console.log('Updating identity_id');
diff --git a/webgui/webapp/src/app/services/dportal.service.ts b/webgui/webapp/src/app/services/dportal.service.ts
index b841309..af26382 100644
--- a/webgui/webapp/src/app/services/dportal.service.ts
+++ b/webgui/webapp/src/app/services/dportal.service.ts
@@ -9,6 +9,29 @@ import { environment } from 'src/environments/environment';
 export class DportalService {
   constructor() {}
 
+  // data portal admin user file actions
+  adminGetUserFolders() {
+    console.log('get user folders');
+    return from(
+      API.get(
+        environment.api_endpoint_sbeacon.name,
+        'dportal/admin/folders',
+        {},
+      ),
+    );
+  }
+
+  adminDeleteUserFolder(folder: string) {
+    console.log('delete user folder');
+    return from(
+      API.del(
+        environment.api_endpoint_sbeacon.name,
+        `dportal/admin/folders/${folder}`,
+        {},
+      ),
+    );
+  }
+
   // data portal admin project actions
   adminCreateProject(name: string, description: string) {
     console.log('create project');

From c0d185c4aa6b73b25da3b957e56112d0cccb3e2e Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Mon, 23 Dec 2024 05:12:41 +0000
Subject: [PATCH 10/20] DEV: implement project management aspects as dialogs

---
 .../project-assignments-dialog.component.html |  38 +++++
 ...project-assignments-dialog.component.scss} |   0
 ...ject-assignments-dialog.component.spec.ts} |  10 +-
 .../project-assignments-dialog.component.ts}  |  21 ++-
 .../project-assignments.component.html        |  38 -----
 .../project-update-dialog.component.html      | 144 ++++++++++++++++++
 .../project-update-dialog.component.scss      |   4 +
 .../project-update-dialog.component.spec.ts   |  22 +++
 .../project-update-dialog.component.ts}       |  33 ++--
 .../project-updates.component.html            | 133 ----------------
 .../project-updates.component.spec.ts         |  22 ---
 .../project-users-dialog.component.html       |  48 ++++++
 .../project-users-dialog.component.scss}      |   0
 .../project-users-dialog.component.spec.ts    |  22 +++
 .../project-users-dialog.component.ts}        |  25 +--
 .../project-users.component.html              |  56 -------
 .../project-users.component.spec.ts           |  22 ---
 .../projects-list.component.html              |  69 +++++----
 .../projects-list/projects-list.component.ts  |  50 +++++-
 .../user-management-dialog.component.html     |   1 +
 .../user-management-dialog.component.scss}    |   0
 .../user-management-dialog.component.spec.ts  |  23 +++
 .../user-management-dialog.component.ts       |  12 ++
 23 files changed, 449 insertions(+), 344 deletions(-)
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.html
 rename webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/{project-assignments/project-assignments.component.scss => project-assignments-dialog/project-assignments-dialog.component.scss} (100%)
 rename webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/{project-assignments/project-assignments.component.spec.ts => project-assignments-dialog/project-assignments-dialog.component.spec.ts} (52%)
 rename webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/{project-assignments/project-assignments.component.ts => project-assignments-dialog/project-assignments-dialog.component.ts} (71%)
 delete mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.html
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.scss
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.spec.ts
 rename webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/{project-updates/project-updates.component.ts => project-update-dialog/project-update-dialog.component.ts} (91%)
 delete mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.html
 delete mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.spec.ts
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html
 rename webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/{project-updates/project-updates.component.scss => project-users-dialog/project-users-dialog.component.scss} (100%)
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.spec.ts
 rename webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/{project-users/project-users.component.ts => project-users-dialog/project-users-dialog.component.ts} (82%)
 delete mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.html
 delete mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.spec.ts
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.html
 rename webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/{project-users/project-users.component.scss => user-management-dialog/user-management-dialog.component.scss} (100%)
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.spec.ts
 create mode 100644 webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.ts

diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.html
new file mode 100644
index 0000000..64e48d5
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.html
@@ -0,0 +1,38 @@
+<h1 mat-dialog-title>Add new user to: {{ data.project }}</h1>
+<div mat-dialog-content>
+  <form [formGroup]="emailForm">
+    <mat-form-field class="w-full">
+      <mat-label>Email</mat-label>
+      <input
+        matInput
+        formControlName="email"
+        type="email"
+        required
+        autocomplete="off"
+      />
+      <mat-error> A valid email is required </mat-error>
+    </mat-form-field>
+    <div class="flex flex-row space-x-1">
+      <button
+        mat-raised-button
+        type="button"
+        mat-dialog-close
+        color="primary"
+        class="w-[110px]"
+      >
+        close
+      </button>
+      <button
+        mat-raised-button
+        type="button"
+        [disabled]="emailForm.invalid"
+        autocomplete="off"
+        color="primary"
+        class="w-[110px]"
+        (click)="submit(emailForm.value.email)"
+      >
+        Submit
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.scss b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.scss
similarity index 100%
rename from webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.scss
rename to webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.scss
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.spec.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.spec.ts
similarity index 52%
rename from webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.spec.ts
rename to webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.spec.ts
index fce118e..bdc0e11 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.spec.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ProjectAssignmentsComponent } from './project-assignments.component';
+import { ProjectAssignmentsDialogComponent } from './project-assignments-dialog.component';
 
 describe('ProjectAssignmentsComponent', () => {
-  let component: ProjectAssignmentsComponent;
-  let fixture: ComponentFixture<ProjectAssignmentsComponent>;
+  let component: ProjectAssignmentsDialogComponent;
+  let fixture: ComponentFixture<ProjectAssignmentsDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ProjectAssignmentsComponent],
+      imports: [ProjectAssignmentsDialogComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ProjectAssignmentsComponent);
+    fixture = TestBed.createComponent(ProjectAssignmentsDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.ts
similarity index 71%
rename from webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.ts
rename to webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.ts
index 6542f67..f70384f 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments-dialog/project-assignments-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Inject, Input, Output } from '@angular/core';
 import {
   FormControl,
   FormGroup,
@@ -7,6 +7,11 @@ import {
   Validators,
 } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -25,25 +30,28 @@ import { DportalService } from 'src/app/services/dportal.service';
     MatButtonModule,
     MatIconModule,
     MatSnackBarModule,
+    MatDialogModule,
   ],
-  templateUrl: './project-assignments.component.html',
-  styleUrl: './project-assignments.component.scss',
+  templateUrl: './project-assignments-dialog.component.html',
+  styleUrl: './project-assignments-dialog.component.scss',
 })
-export class ProjectAssignmentsComponent {
-  @Input({ required: true }) project!: string;
+export class ProjectAssignmentsDialogComponent {
+  project: string;
   emailForm: FormGroup;
 
   constructor(
     private dps: DportalService,
     private sb: MatSnackBar,
+    public dialogRef: MatDialogRef<ProjectAssignmentsDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { project: string },
   ) {
+    this.project = data.project;
     this.emailForm = new FormGroup({
       email: new FormControl('', [Validators.required, Validators.email]),
     });
   }
 
   submit(email: string) {
-    console.log(this.project, email);
     this.dps
       .adminAddUserToProject(this.project, email)
       .pipe(catchError(() => of(null)))
@@ -57,6 +65,7 @@ export class ProjectAssignmentsComponent {
             duration: 60000,
           });
           this.emailForm.reset();
+          this.dialogRef.close();
         }
       });
   }
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.html
deleted file mode 100644
index 0ac2232..0000000
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-assignments/project-assignments.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<h3>Add new user</h3>
-<br />
-<form [formGroup]="emailForm">
-  <mat-form-field class="w-full">
-    <mat-label>Email</mat-label>
-    <input
-      matInput
-      formControlName="email"
-      type="email"
-      required
-      autocomplete="off"
-    />
-    <mat-error> A valid email is required </mat-error>
-  </mat-form-field>
-  <div class="flex flex-row space-x-1">
-    <button
-      mat-raised-button
-      type="button"
-      (click)="emailForm.reset()"
-      color="primary"
-      class="w-[110px]"
-    >
-      Reset
-    </button>
-    <button
-      mat-raised-button
-      type="button"
-      [disabled]="emailForm.invalid"
-      autocomplete="off"
-      color="primary"
-      class="w-[110px]"
-      (click)="submit(emailForm.value.email)"
-    >
-      Submit
-    </button>
-  </div>
-</form>
-<br />
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html
new file mode 100644
index 0000000..d7b8337
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html
@@ -0,0 +1,144 @@
+<h1 mat-dialog-title>View and update: {{ data.project.name }}</h1>
+<div mat-dialog-content>
+  <div class="flex flex-col space-y-1">
+    @for (file of project.files; track file) {
+      <div class="flex flex-row items-center space-x-2">
+        <button mat-mini-fab color="primary" (click)="removeFile(file)">
+          <mat-icon>delete</mat-icon>
+        </button>
+        <div class="flex">{{ file }}</div>
+      </div>
+    } @empty {
+      <h4>No files added to the project yet</h4>
+    }
+  </div>
+  <br />
+  <hr />
+  <h3>Ingested datasets from the project to sBeacon</h3>
+  <div class="flex flex-col space-y-1">
+    @for (dataset of project.ingestedDatasets; track dataset) {
+      <div class="flex flex-row items-center space-x-2">
+        <button
+          mat-mini-fab
+          color="primary"
+          (click)="unIngest(project.name, dataset)"
+        >
+          <mat-icon>delete</mat-icon>
+        </button>
+        <div class="flex">{{ dataset }}</div>
+      </div>
+    } @empty {
+      <h4>No datasets ingested yet</h4>
+    }
+  </div>
+  <br />
+  <hr />
+  <h3>Change project description and add extra files</h3>
+  <form [formGroup]="dataSubmissionForm">
+    <br />
+    <div class="flex flex-col space-y-2 w-full">
+      <mat-form-field class="w-full">
+        <mat-label>Project description</mat-label>
+        <textarea
+          matInput
+          formControlName="projectDescription"
+          placeholder="Enter project description"
+        ></textarea>
+        <mat-error> A description is required. </mat-error>
+      </mat-form-field>
+      <app-file-dropper
+        (dropped)="patchFiles($event)"
+        [disabled]="dataSubmissionForm.disabled"
+        #fileDropper
+      />
+    </div>
+    <br />
+    <h4>Following files will be added</h4>
+    @for (file of addedFiles; track $index) {
+      <div class="flex flex-row items-center space-x-2 mb-1">
+        <button
+          mat-mini-fab
+          color="primary"
+          type="button"
+          (click)="removeFileFromForm($index)"
+          [disabled]="dataSubmissionForm.disabled"
+        >
+          <mat-icon>delete</mat-icon>
+        </button>
+        <div class="flex flex-row space-x-2">
+          <span>{{ file.name }}</span>
+          <span class="font-bold">
+            {{ file.size / (1024 * 1024) | number: "1.3-3" }} MB</span
+          >
+        </div>
+      </div>
+    } @empty {
+      <span class="text-sm text-gray-500 italic">
+        Added files will appear here. Please use unique file names within each
+        project.
+      </span>
+      <br />
+    }
+    <h4>Following files will be removed</h4>
+    @for (file of removedFiles; track $index) {
+      <div class="flex flex-row items-center space-x-2 mb-1">
+        <button
+          mat-mini-fab
+          color="primary"
+          type="button"
+          (click)="undoRemoveFile($index)"
+          [disabled]="dataSubmissionForm.disabled"
+        >
+          <mat-icon>close</mat-icon>
+        </button>
+        <div class="flex flex-row space-x-2 text-red-600">
+          {{ file }}
+        </div>
+      </div>
+    } @empty {
+      <span class="text-sm text-gray-500 italic">
+        Removed files will appear here.
+      </span>
+      <br />
+    }
+    <br />
+    <div class="flex flex-row space-x-[10px]">
+      <button
+        class="w-[100px]"
+        mat-raised-button
+        mat-dialog-close
+        color="primary"
+        type="button"
+        [disabled]="dataSubmissionForm.disabled"
+      >
+        close
+      </button>
+      <button
+        class="w-[100px]"
+        mat-raised-button
+        color="primary"
+        type="button"
+        (click)="reset()"
+        [disabled]="dataSubmissionForm.disabled"
+      >
+        Reset
+      </button>
+      <button
+        class="w-[100px]"
+        mat-raised-button
+        color="primary"
+        type="button"
+        (click)="onSubmit(dataSubmissionForm.value)"
+        [disabled]="submitDisabled(dataSubmissionForm.value)"
+      >
+        Submit
+      </button>
+      <mat-spinner
+        class="w-[100px]"
+        diameter="36"
+        mode="determinate"
+        [value]="(progress / totalSize) * 100"
+      ></mat-spinner>
+    </div>
+  </form>
+</div>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.scss b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.scss
new file mode 100644
index 0000000..33ff03c
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.scss
@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 800px;
+}
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.spec.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.spec.ts
new file mode 100644
index 0000000..94abe12
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectUpdateDialogComponent } from './project-update-dialog.component';
+
+describe('ProjectUpdateDialogComponent', () => {
+  let component: ProjectUpdateDialogComponent;
+  let fixture: ComponentFixture<ProjectUpdateDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectUpdateDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectUpdateDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.ts
similarity index 91%
rename from webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
rename to webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.ts
index e7d06b2..4f3aa4f 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.ts
@@ -1,9 +1,7 @@
 import {
   Component,
-  EventEmitter,
-  Input,
+  Inject,
   OnChanges,
-  Output,
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
@@ -26,7 +24,12 @@ import { catchError, defaultIfEmpty, forkJoin, map, of, switchMap } from 'rxjs';
 import { Storage } from 'aws-amplify';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatInputModule } from '@angular/material/input';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-project-updates',
@@ -44,13 +47,12 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
     MatProgressSpinnerModule,
     MatDialogModule,
   ],
-  templateUrl: './project-updates.component.html',
-  styleUrl: './project-updates.component.scss',
+  templateUrl: './project-update-dialog.component.html',
+  styleUrl: './project-update-dialog.component.scss',
 })
-export class ProjectUpdatesComponent implements OnChanges {
-  @Input({ required: true }) project!: Project;
-  @Output() projectUpdated = new EventEmitter<void>();
+export class ProjectUpdateDialogComponent {
   @ViewChild(FileDropperComponent) fileDroppper!: FileDropperComponent;
+  project: Project;
   dataSubmissionForm!: FormGroup;
   totalSize = 0;
   progress = 0;
@@ -63,12 +65,13 @@ export class ProjectUpdatesComponent implements OnChanges {
     private dps: DportalService,
     private sb: MatSnackBar,
     private dg: MatDialog,
-  ) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
+    public dialogRef: MatDialogRef<ProjectUpdateDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { project: Project },
+  ) {
+    this.project = data.project;
     this.dataSubmissionForm = this.fb.group({
       projectDescription: this.fb.control(
-        changes['project'].currentValue.description,
+        this.project.description,
         Validators.required,
       ),
     });
@@ -110,7 +113,6 @@ export class ProjectUpdatesComponent implements OnChanges {
                 },
               );
             }
-            this.projectUpdated.emit();
           });
       }
     });
@@ -216,9 +218,8 @@ export class ProjectUpdatesComponent implements OnChanges {
           this.sb.open('Project update failed', 'Okay', { duration: 60000 });
         } else {
           this.sb.open('Project updated', 'Okay', { duration: 60000 });
-          this.reset();
-          this.projectUpdated.emit();
         }
+        this.reset();
       });
   }
 }
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.html
deleted file mode 100644
index f93edc4..0000000
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<h3>View project content and update</h3>
-<div class="flex flex-col space-y-1">
-  @for (file of project.files; track file) {
-    <div class="flex flex-row items-center space-x-2">
-      <button mat-mini-fab color="primary" (click)="removeFile(file)">
-        <mat-icon>delete</mat-icon>
-      </button>
-      <div class="flex">{{ file }}</div>
-    </div>
-  } @empty {
-    <h4>No files added to the project yet</h4>
-  }
-</div>
-<br />
-<hr />
-<h3>Ingested datasets from the project to sBeacon</h3>
-<div class="flex flex-col space-y-1">
-  @for (dataset of project.ingestedDatasets; track dataset) {
-    <div class="flex flex-row items-center space-x-2">
-      <button
-        mat-mini-fab
-        color="primary"
-        (click)="unIngest(project.name, dataset)"
-      >
-        <mat-icon>delete</mat-icon>
-      </button>
-      <div class="flex">{{ dataset }}</div>
-    </div>
-  } @empty {
-    <h4>No datasets ingested yet</h4>
-  }
-</div>
-<br />
-<hr />
-<h3>Change project description and add extra files</h3>
-<form [formGroup]="dataSubmissionForm">
-  <br />
-  <div class="flex flex-col space-y-2 w-full">
-    <mat-form-field class="w-full">
-      <mat-label>Project description</mat-label>
-      <textarea
-        matInput
-        formControlName="projectDescription"
-        placeholder="Enter project description"
-      ></textarea>
-      <mat-error> A description is required. </mat-error>
-    </mat-form-field>
-    <app-file-dropper
-      (dropped)="patchFiles($event)"
-      [disabled]="dataSubmissionForm.disabled"
-      #fileDropper
-    />
-  </div>
-  <br />
-  <h4>Following files will be added</h4>
-  @for (file of addedFiles; track $index) {
-    <div class="flex flex-row items-center space-x-2 mb-1">
-      <button
-        mat-mini-fab
-        color="primary"
-        type="button"
-        (click)="removeFileFromForm($index)"
-        [disabled]="dataSubmissionForm.disabled"
-      >
-        <mat-icon>delete</mat-icon>
-      </button>
-      <div class="flex flex-row space-x-2">
-        <span>{{ file.name }}</span>
-        <span class="font-bold">
-          {{ file.size / (1024 * 1024) | number: "1.3-3" }} MB</span
-        >
-      </div>
-    </div>
-  } @empty {
-    <span class="text-sm text-gray-500 italic">
-      Added files will appear here. Please use unique file names within each
-      project.
-    </span>
-    <br />
-  }
-  <h4>Following files will be removed</h4>
-  @for (file of removedFiles; track $index) {
-    <div class="flex flex-row items-center space-x-2 mb-1">
-      <button
-        mat-mini-fab
-        color="primary"
-        type="button"
-        (click)="undoRemoveFile($index)"
-        [disabled]="dataSubmissionForm.disabled"
-      >
-        <mat-icon>close</mat-icon>
-      </button>
-      <div class="flex flex-row space-x-2 text-red-600">
-        {{ file }}
-      </div>
-    </div>
-  } @empty {
-    <span class="text-sm text-gray-500 italic">
-      Removed files will appear here.
-    </span>
-    <br />
-  }
-  <br />
-  <div class="flex flex-row space-x-[10px]">
-    <button
-      class="w-[100px]"
-      mat-raised-button
-      color="primary"
-      type="button"
-      (click)="reset()"
-      [disabled]="dataSubmissionForm.disabled"
-    >
-      Reset
-    </button>
-    <button
-      class="w-[100px]"
-      mat-raised-button
-      color="primary"
-      type="button"
-      (click)="onSubmit(dataSubmissionForm.value)"
-      [disabled]="submitDisabled(dataSubmissionForm.value)"
-    >
-      Submit
-    </button>
-    <mat-spinner
-      class="w-[100px]"
-      diameter="36"
-      mode="determinate"
-      [value]="(progress / totalSize) * 100"
-    ></mat-spinner>
-  </div>
-</form>
-<br />
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.spec.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.spec.ts
deleted file mode 100644
index 7acfe28..0000000
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProjectUpdatesComponent } from './project-updates.component';
-
-describe('ProjectUpdatesComponent', () => {
-  let component: ProjectUpdatesComponent;
-  let fixture: ComponentFixture<ProjectUpdatesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ProjectUpdatesComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ProjectUpdatesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html
new file mode 100644
index 0000000..b5b30a5
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html
@@ -0,0 +1,48 @@
+<h1 mat-dialog-title>Current users of: {{ data.project }}</h1>
+<div mat-dialog-content>
+  @if (dataSource.data.length > 0) {
+    <table mat-table [dataSource]="dataSource">
+      <!-- First Name Column -->
+      <ng-container matColumnDef="firstName">
+        <th mat-header-cell *matHeaderCellDef>First Name</th>
+        <td mat-cell *matCellDef="let element">{{ element.firstName }}</td>
+      </ng-container>
+
+      <!-- Last Name Column -->
+      <ng-container matColumnDef="lastName">
+        <th mat-header-cell *matHeaderCellDef>Last Name</th>
+        <td mat-cell *matCellDef="let element">{{ element.lastName }}</td>
+      </ng-container>
+
+      <!-- Email Column -->
+      <ng-container matColumnDef="email">
+        <th mat-header-cell *matHeaderCellDef>Email</th>
+        <td mat-cell *matCellDef="let element">{{ element.email }}</td>
+      </ng-container>
+
+      <!-- Actions Column -->
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="flex flex-col space-y-1 py-1">
+            <button
+              mat-raised-button
+              (click)="unAssignUser(element.email)"
+              color="warn"
+            >
+              Remove
+            </button>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  } @else {
+    <h4>No users added to the project</h4>
+  }
+  <button mat-raised-button mat-dialog-close color="primary" class="w-[110px]">
+    close
+  </button>
+</div>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.scss b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.scss
similarity index 100%
rename from webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.scss
rename to webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.scss
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.spec.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.spec.ts
new file mode 100644
index 0000000..b805a81
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectUsersDialogComponent } from './project-users-dialog.component';
+
+describe('ProjectUsersDialogComponent', () => {
+  let component: ProjectUsersDialogComponent;
+  let fixture: ComponentFixture<ProjectUsersDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectUsersDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectUsersDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.ts
similarity index 82%
rename from webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.ts
rename to webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.ts
index 53317eb..f28fb2e 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.ts
@@ -1,6 +1,7 @@
 import {
   Component,
   EventEmitter,
+  Inject,
   Input,
   OnChanges,
   OnInit,
@@ -8,7 +9,12 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -30,13 +36,13 @@ interface User {
     MatTableModule,
     MatSnackBarModule,
     MatDialogModule,
+    MatDialogModule,
   ],
-  templateUrl: './project-users.component.html',
-  styleUrl: './project-users.component.scss',
+  templateUrl: './project-users-dialog.component.html',
+  styleUrl: './project-users-dialog.component.scss',
 })
-export class ProjectsUsersComponent implements OnChanges {
-  @Input({ required: true }) project!: string;
-
+export class ProjectUsersDialogComponent {
+  project: string;
   displayedColumns: string[] = ['firstName', 'lastName', 'email', 'actions'];
   dataSource = new MatTableDataSource<User>();
 
@@ -44,9 +50,10 @@ export class ProjectsUsersComponent implements OnChanges {
     private dps: DportalService,
     private sb: MatSnackBar,
     private dg: MatDialog,
-  ) {}
-
-  ngOnChanges(_: SimpleChanges): void {
+    public dialogRef: MatDialogRef<ProjectUsersDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { project: string },
+  ) {
+    this.project = data.project;
     this.list();
   }
 
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.html
deleted file mode 100644
index 878d824..0000000
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<h3>Current users</h3>
-<div class="flex flex-row space-x-1">
-  <button
-    mat-mini-fab
-    type="button"
-    color="primary"
-    class="w-[110px]"
-    (click)="list()"
-  >
-    <mat-icon>refresh</mat-icon>
-  </button>
-</div>
-<br />
-@if (dataSource.data.length > 0) {
-  <table mat-table [dataSource]="dataSource">
-    <!-- First Name Column -->
-    <ng-container matColumnDef="firstName">
-      <th mat-header-cell *matHeaderCellDef>First Name</th>
-      <td mat-cell *matCellDef="let element">{{ element.firstName }}</td>
-    </ng-container>
-
-    <!-- Last Name Column -->
-    <ng-container matColumnDef="lastName">
-      <th mat-header-cell *matHeaderCellDef>Last Name</th>
-      <td mat-cell *matCellDef="let element">{{ element.lastName }}</td>
-    </ng-container>
-
-    <!-- Email Column -->
-    <ng-container matColumnDef="email">
-      <th mat-header-cell *matHeaderCellDef>Email</th>
-      <td mat-cell *matCellDef="let element">{{ element.email }}</td>
-    </ng-container>
-
-    <!-- Actions Column -->
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef>Actions</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="flex flex-col space-y-1 py-1">
-          <button
-            mat-raised-button
-            (click)="unAssignUser(element.email)"
-            color="warn"
-          >
-            Remove
-          </button>
-        </div>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-  </table>
-} @else {
-  <h4>No users added to the project</h4>
-}
-<br />
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.spec.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.spec.ts
deleted file mode 100644
index 62f2684..0000000
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProjectsUsersComponent } from './project-users.component';
-
-describe('ProjectsUsersComponent', () => {
-  let component: ProjectsUsersComponent;
-  let fixture: ComponentFixture<ProjectsUsersComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ProjectsUsersComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ProjectsUsersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html
index 9fa2d48..c03710f 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html
@@ -42,21 +42,51 @@
 
     <!-- Assignments Column -->
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef>Assignments</th>
+      <th mat-header-cell *matHeaderCellDef>
+        <span class="text-center">Actions</span>
+      </th>
       <td mat-cell *matCellDef="let element">
-        <div class="flex flex-col space-y-1 py-1">
+        <div class="flex flex-row flex-wrap space-x-1 py-1 justify-center">
           <button
-            mat-raised-button
-            (click)="setActive(element)"
+            mat-mini-fab
+            (click)="addUserDialog(element)"
             color="primary"
+            matTooltip="Add user"
           >
-            Add/Remove Users or Files
+            <mat-icon>person_add</mat-icon>
           </button>
-          <button mat-raised-button (click)="ingest(element)" color="primary">
-            Ingest to sBeacon
+          <button
+            mat-mini-fab
+            (click)="manageUsersDialog(element)"
+            color="primary"
+            matTooltip="Manage users"
+          >
+            <mat-icon>manage_accounts</mat-icon>
+          </button>
+          <button
+            mat-mini-fab
+            (click)="updateProject(element)"
+            color="primary"
+            matTooltip="Edit project"
+          >
+            <mat-icon>folder_managed</mat-icon>
+          </button>
+
+          <button
+            mat-mini-fab
+            (click)="ingest(element)"
+            color="primary"
+            matTooltip="Ingest files to sBeacon"
+          >
+            <mat-icon>publish</mat-icon>
           </button>
-          <button mat-raised-button (click)="delete(element.name)" color="warn">
-            Delete
+          <button
+            mat-mini-fab
+            (click)="delete(element.name)"
+            color="warn"
+            matTooltip="Delete project"
+          >
+            <mat-icon>delete</mat-icon>
           </button>
         </div>
       </td>
@@ -83,24 +113,3 @@ <h3>No projects found</h3>
     <mat-icon>refresh</mat-icon>
   </button>
 </div>
-<br />
-@if (active) {
-  <h3 id="addRemoveUsers">Manage users of project: {{ active.name }}</h3>
-  <button
-    mat-mini-fab
-    type="button"
-    color="primary"
-    class="w-[110px]"
-    (click)="active = null"
-  >
-    <mat-icon>close</mat-icon>
-  </button>
-  <hr />
-
-  <app-project-assignments [project]="active.name" />
-  <hr />
-
-  <app-projects-users [project]="active.name" />
-  <hr />
-  <app-project-updates [project]="active" (projectUpdated)="list()" />
-}
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts
index 07a3caa..44bbd71 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts
@@ -5,12 +5,10 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatButtonModule } from '@angular/material/button';
 import { SpinnerService } from 'src/app/services/spinner.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { catchError, of, tap } from 'rxjs';
+import { catchError, of } from 'rxjs';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { ProjectAssignmentsComponent } from './project-assignments/project-assignments.component';
-import { ProjectsUsersComponent } from './project-users/project-users.component';
-import { ProjectUpdatesComponent } from './project-updates/project-updates.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 export interface Project {
   name: string;
@@ -29,9 +27,7 @@ export interface Project {
     MatButtonModule,
     MatIconModule,
     MatDialogModule,
-    ProjectAssignmentsComponent,
-    ProjectsUsersComponent,
-    ProjectUpdatesComponent,
+    MatTooltipModule,
   ],
   templateUrl: './projects-list.component.html',
   styleUrl: './projects-list.component.scss',
@@ -97,6 +93,22 @@ export class ProjectsListComponent {
       });
   }
 
+  async updateProject(project: Project) {
+    const { ProjectUpdateDialogComponent } = await import(
+      './project-update-dialog/project-update-dialog.component'
+    );
+
+    const dialog = this.dg.open(ProjectUpdateDialogComponent, {
+      data: {
+        project,
+      },
+    });
+
+    dialog.afterClosed().subscribe((result) => {
+      this.list();
+    });
+  }
+
   async index() {
     const { ActionConfirmationDialogComponent } = await import(
       '../../../../../components/action-confirmation-dialog/action-confirmation-dialog.component'
@@ -161,6 +173,30 @@ export class ProjectsListComponent {
     });
   }
 
+  async addUserDialog(project: any) {
+    const { ProjectAssignmentsDialogComponent } = await import(
+      './project-assignments-dialog/project-assignments-dialog.component'
+    );
+
+    this.dg.open(ProjectAssignmentsDialogComponent, {
+      data: {
+        project: project.name,
+      },
+    });
+  }
+
+  async manageUsersDialog(project: any) {
+    const { ProjectUsersDialogComponent } = await import(
+      './project-users-dialog/project-users-dialog.component'
+    );
+
+    this.dg.open(ProjectUsersDialogComponent, {
+      data: {
+        project: project.name,
+      },
+    });
+  }
+
   async ingest(project: any) {
     const { BeaconIngestDialogComponent } = await import(
       './beacon-ingest-dialog/beacon-ingest-dialog.component'
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.html
new file mode 100644
index 0000000..eaf4d7c
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.html
@@ -0,0 +1 @@
+<p>user-management-dialog works!</p>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.scss b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.scss
similarity index 100%
rename from webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users/project-users.component.scss
rename to webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.scss
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.spec.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.spec.ts
new file mode 100644
index 0000000..ffa111b
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserManagementDialogComponent } from './user-management-dialog.component';
+
+describe('UserManagementDialogComponent', () => {
+  let component: UserManagementDialogComponent;
+  let fixture: ComponentFixture<UserManagementDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserManagementDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(UserManagementDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.ts
new file mode 100644
index 0000000..650f95f
--- /dev/null
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/user-management-dialog/user-management-dialog.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-management-dialog',
+  standalone: true,
+  imports: [],
+  templateUrl: './user-management-dialog.component.html',
+  styleUrl: './user-management-dialog.component.scss'
+})
+export class UserManagementDialogComponent {
+
+}

From 91300beb4fbd5703e61589fee358fb3a0ff1a1e7 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Mon, 23 Dec 2024 05:47:33 +0000
Subject: [PATCH 11/20] FIX: change button color from primary to warn for
 delete actions

---
 .../filter-editor/filter-editor.component.html         |  6 +++---
 .../admin-folder-list/admin-folder-list.component.html |  4 ++--
 .../admin-notebook-item.component.html                 |  4 ++--
 .../data-submission-form.component.html                |  2 +-
 .../project-update-dialog.component.html               |  6 +++---
 .../project-users-dialog.component.html                | 10 ++++++----
 .../user-file-list/user-file-list.component.html       |  3 +--
 .../notebook-item/notebook-item.component.html         |  4 ++--
 .../components/query-tab/query-tab.component.html      |  2 +-
 9 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/webgui/webapp/src/app/components/filter-editor/filter-editor.component.html b/webgui/webapp/src/app/components/filter-editor/filter-editor.component.html
index d764878..5a76bd0 100644
--- a/webgui/webapp/src/app/components/filter-editor/filter-editor.component.html
+++ b/webgui/webapp/src/app/components/filter-editor/filter-editor.component.html
@@ -61,12 +61,12 @@
     <mat-label>Filter Value</mat-label>
     <input matInput formControlName="value" required />
   </mat-form-field>
-  <div class="flex md:justify-end">
+  <div class="flex md:justify-end items-center h-[56px]">
     <button
       type="button"
       (click)="removeFilterClicked.emit()"
-      mat-fab
-      color="primary"
+      mat-mini-fab
+      color="warn"
     >
       <mat-icon>delete</mat-icon>
     </button>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html
index e0015bd..a578d7a 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-folder-list/admin-folder-list.component.html
@@ -35,7 +35,7 @@ <h2 class="flex">Folders tracked under users</h2>
     <td mat-cell *matCellDef="let element">
       <button
         mat-mini-fab
-        color="primary"
+        color="warn"
         (click)="deleteFolder(element['custom:identity_id'])"
       >
         <mat-icon>delete</mat-icon>
@@ -57,7 +57,7 @@ <h2>Folders not tracked under users</h2>
   <div class="flex flex-col space-y-1">
     @for (identity of inactiveIdentities; track identity) {
       <div class="flex flex-row space-x-2 items-center">
-        <button mat-mini-fab color="primary" (click)="deleteFolder(identity)">
+        <button mat-mini-fab color="warn" (click)="deleteFolder(identity)">
           <mat-icon>delete</mat-icon>
         </button>
         <div class="flex font-semibold">{{ identity }}</div>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-notebooks-list/admin-notebook-item/admin-notebook-item.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-notebooks-list/admin-notebook-item/admin-notebook-item.component.html
index 8bfa0c8..cc74bc1 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-notebooks-list/admin-notebook-item/admin-notebook-item.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/admin-notebooks-list/admin-notebook-item/admin-notebook-item.component.html
@@ -21,12 +21,12 @@
   @if (cachedStatus) {
     <div class="flex flex-col space-y-1">
       @if (cachedStatus.status == Status.IN_SERVICE) {
-        <button mat-mini-fab color="primary" (click)="stop()">
+        <button mat-mini-fab color="warn" (click)="stop()">
           <mat-icon>stop_circle</mat-icon>
         </button>
       }
       @if (cachedStatus.status == Status.STOPPED) {
-        <button mat-mini-fab color="primary" (click)="delete()">
+        <button mat-mini-fab color="warn" (click)="delete()">
           <mat-icon>cancel</mat-icon>
         </button>
       }
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.html
index 730051a..1db1de6 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.html
@@ -29,7 +29,7 @@
     <div class="flex flex-row items-center space-x-2 mb-1">
       <button
         mat-mini-fab
-        color="primary"
+        color="warn"
         type="button"
         (click)="removeFile($index)"
         [disabled]="dataSubmissionForm.disabled"
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html
index d7b8337..4dd7e01 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-update-dialog/project-update-dialog.component.html
@@ -3,7 +3,7 @@ <h1 mat-dialog-title>View and update: {{ data.project.name }}</h1>
   <div class="flex flex-col space-y-1">
     @for (file of project.files; track file) {
       <div class="flex flex-row items-center space-x-2">
-        <button mat-mini-fab color="primary" (click)="removeFile(file)">
+        <button mat-mini-fab color="warn" (click)="removeFile(file)">
           <mat-icon>delete</mat-icon>
         </button>
         <div class="flex">{{ file }}</div>
@@ -20,7 +20,7 @@ <h3>Ingested datasets from the project to sBeacon</h3>
       <div class="flex flex-row items-center space-x-2">
         <button
           mat-mini-fab
-          color="primary"
+          color="warn"
           (click)="unIngest(project.name, dataset)"
         >
           <mat-icon>delete</mat-icon>
@@ -58,7 +58,7 @@ <h4>Following files will be added</h4>
       <div class="flex flex-row items-center space-x-2 mb-1">
         <button
           mat-mini-fab
-          color="primary"
+          color="warn"
           type="button"
           (click)="removeFileFromForm($index)"
           [disabled]="dataSubmissionForm.disabled"
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html
index b5b30a5..d5704c4 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-users-dialog/project-users-dialog.component.html
@@ -22,15 +22,17 @@ <h1 mat-dialog-title>Current users of: {{ data.project }}</h1>
 
       <!-- Actions Column -->
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <th mat-header-cell *matHeaderCellDef>
+          <span class="text-center">Actions</span>
+        </th>
         <td mat-cell *matCellDef="let element">
-          <div class="flex flex-col space-y-1 py-1">
+          <div class="flex items-center justify-center">
             <button
-              mat-raised-button
+              mat-mini-fab
               (click)="unAssignUser(element.email)"
               color="warn"
             >
-              Remove
+              <mat-icon>delete</mat-icon>
             </button>
           </div>
         </td>
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.html
index e981284..c5343d6 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-file-list/user-file-list.component.html
@@ -23,7 +23,6 @@ <h2 class="flex">My Data</h2>
     </div>
   </div>
 
-
   @for (file of myFiles; track file) {
     <div class="flex flex-row justify-between w-full items-center">
       <div class="flex">{{ file.key }}</div>
@@ -39,7 +38,7 @@ <h2 class="flex">My Data</h2>
         </button>
         <button
           mat-mini-fab
-          color="primary"
+          color="warn"
           class="flex items-center"
           (click)="delete(file)"
           matTooltip="Delete file"
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/notebook-item/notebook-item.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/notebook-item/notebook-item.component.html
index 185434c..beb1157 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/notebook-item/notebook-item.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/user-section/user-notebook-list/notebook-item/notebook-item.component.html
@@ -15,7 +15,7 @@
     <div class="flex flex-row justify-between">
       <div class="flex flex-row space-x-1">
         @if (status.status == Status.IN_SERVICE) {
-          <button mat-mini-fab color="primary" (click)="stop()">
+          <button mat-mini-fab color="warn" (click)="stop()">
             <mat-icon>stop_circle</mat-icon>
           </button>
         }
@@ -24,7 +24,7 @@
             <mat-icon>play_circle</mat-icon>
           </button>
 
-          <button mat-mini-fab color="primary" (click)="delete()">
+          <button mat-mini-fab color="warn" (click)="delete()">
             <mat-icon>cancel</mat-icon>
           </button>
         }
diff --git a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.html b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.html
index 4c904bb..d470237 100644
--- a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.html
@@ -115,7 +115,7 @@ <h2>Select on from saved queries</h2>
                     style="transform: scale(0.7)"
                     mat-mini-fab
                     [routerLink]="[]"
-                    color="primary"
+                    color="warn"
                     (click)="deleteSavedQuery(i)"
                   >
                     <mat-icon>delete</mat-icon>

From c359336221768fddc0200eeb8f43baaed367c616 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Tue, 24 Dec 2024 00:51:08 +0000
Subject: [PATCH 12/20] FIX: Fix colour of id copyable button text in result
 tables

---
 .../filters-result-viewer.component.html                     | 5 +++--
 .../filters-result-viewer.component.scss                     | 3 +++
 .../tabular-query-results-viewer.component.html              | 5 +++--
 .../tabular-query-results-viewer.component.scss              | 3 +++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.html b/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.html
index a82dc7f..72302d4 100644
--- a/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.html
@@ -63,9 +63,10 @@ <h2>Filters</h2>
                         mat-button
                         cdkCopyToClipboard="{{ element[column] }}"
                         matTooltip="Click to copy"
+                        class="w-full"
                       >
-                        <pre>{{ element[column] }}</pre>
-                        <mat-icon iconPositionEnd>content_copy</mat-icon>
+                        <mat-icon class="text-black">content_copy</mat-icon>
+                        <pre class="text-black">{{ element[column] }}</pre>
                       </button>
                     } @else {
                       <pre>{{ element[column] }}</pre>
diff --git a/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.scss b/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.scss
index e69de29..f72c434 100644
--- a/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.scss
+++ b/webgui/webapp/src/app/pages/portal-page/filters-page/components/filters-result-viewer/filters-result-viewer.component.scss
@@ -0,0 +1,3 @@
+[mat-button] {
+  justify-content: flex-start;
+}
diff --git a/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.html b/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.html
index 742de80..bec1d12 100644
--- a/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.html
@@ -10,9 +10,10 @@
                 mat-button
                 cdkCopyToClipboard="{{ element[column] }}"
                 matTooltip="Click to copy"
+                class="w-full"
               >
-                <pre>{{ element[column] }}</pre>
-                <mat-icon iconPositionEnd>content_copy</mat-icon>
+                <mat-icon class="text-black">content_copy</mat-icon>
+                <pre class="text-black">{{ element[column] }}</pre>
               </button>
             } @else if (
               _.isString(element[column]) || _.isNumber(element[column])
diff --git a/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.scss b/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.scss
index e69de29..f72c434 100644
--- a/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.scss
+++ b/webgui/webapp/src/app/pages/portal-page/query-page/components/tabular-query-results-viewer/tabular-query-results-viewer.component.scss
@@ -0,0 +1,3 @@
+[mat-button] {
+  justify-content: flex-start;
+}

From 69892f8fbc29ed4063dbe168a775e6c588d71268 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Tue, 24 Dec 2024 01:40:07 +0000
Subject: [PATCH 13/20] FIX: filter selection to accept projects from query
 view

---
 .../filter-selection-dialog.component.html    | 23 ++++++++++++++-----
 .../filter-selection-dialog.component.ts      |  9 ++++++--
 .../query-tab/query-tab.component.ts          |  3 ++-
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html b/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html
index d4f31fa..1ab827e 100644
--- a/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html
+++ b/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html
@@ -1,8 +1,6 @@
-<div>
-  <h1 mat-dialog-title>
-    Select <em>{{ _.startCase(data.type) }}</em> filters for
-    <em>{{ _.startCase(data.scope) }}</em>
-  </h1>
+<!-- prettier-ignore -->
+<h1 mat-dialog-title>Select <em>{{ _.startCase(data.type) }}</em> filters for <em>{{ _.startCase(data.scope) }}</em></h1>
+@if (data.projects.length > 0) {
   <app-component-spinner [loading]="loading"></app-component-spinner>
   <div mat-dialog-content>
     <mat-form-field>
@@ -64,4 +62,17 @@ <h1 mat-dialog-title>
       <button mat-raised-button color="primary" (click)="done()">Done</button>
     </div>
   </div>
-</div>
+} @else {
+  <div mat-dialog-content>
+    <p>Please select some projects.</p>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="cancel()"
+      style="margin-right: 10px"
+    >
+      Cancel
+    </button>
+    <button mat-raised-button color="primary" (click)="done()">Done</button>
+  </div>
+}
diff --git a/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.ts b/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.ts
index bf9e2a6..9e15b0a 100644
--- a/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.ts
+++ b/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.ts
@@ -89,17 +89,21 @@ export class FilterSelectionDialogComponent implements AfterViewInit {
   protected dataSourceFilters = new MatTableDataSource<any>([]);
   protected displayedColumnsFilters = ['selected', 'id', 'label', 'type'];
   protected selected: { [key: string]: any } = {};
-  protected filter = '';
+  protected filter: string = '';
 
   constructor(
     public dialogRef: MatDialogRef<FilterSelectionDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA)
+    public data: { scope: string; projects: string[]; type: string },
     private fs: FilterService,
     private cd: ChangeDetectorRef,
     private sb: MatSnackBar,
   ) {}
 
   ngAfterViewInit(): void {
+    if (this.data.projects.length === 0) {
+      return;
+    }
     this.paginatorFilters.page
       .pipe(
         startWith({}),
@@ -111,6 +115,7 @@ export class FilterSelectionDialogComponent implements AfterViewInit {
             .fetch_by_scope(this.data.scope, {
               skip: this.limit * this.paginatorFilters.pageIndex,
               limit: this.limit,
+              projects: this.data.projects.join(','),
             })
             .pipe(catchError(() => of(null)));
         }),
diff --git a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts
index d3c8c92..b5e9e32 100644
--- a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts
@@ -580,11 +580,12 @@ export class QueryTabComponent implements OnInit, AfterViewInit, OnDestroy {
   async searchFilters(filter: FormGroup, index: number) {
     const scope = filter.get('scope')!.value;
     const type = filter.get('type')!.value;
+    const projects = this.form.get('projects')!.value;
     const { FilterSelectionDialogComponent } = await import(
       'src/app/components/filter-selection-dialog/filter-selection-dialog.component'
     );
     const dialog = this.dg.open(FilterSelectionDialogComponent, {
-      data: { scope, type },
+      data: { scope, type, projects },
     });
 
     dialog.afterClosed().subscribe((filters) => {

From 989759d04987f7e3a5c93c032be760b566be1120 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Tue, 24 Dec 2024 02:07:35 +0000
Subject: [PATCH 14/20] FIX: enable ID with project list flowing to entity
 selection dialog

---
 .../entry-id-selection-dialog.component.html  | 31 ++++++++++++-------
 .../entry-id-selection-dialog.component.ts    | 11 ++++---
 .../filter-selection-dialog.component.html    |  1 -
 .../query-tab/query-tab.component.ts          |  5 +--
 4 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.html b/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.html
index a86ccc9..047ae12 100644
--- a/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.html
+++ b/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.html
@@ -1,11 +1,10 @@
-<div>
-  <h1 mat-dialog-title>
-    Select a <em>{{ _.startCase(data.scope) }}</em> entry
-  </h1>
+<!-- prettier-ignore -->
+<h1 mat-dialog-title>Select a <em>{{ _.startCase(data.scope) }}</em> entry</h1>
+@if (data.projects.length > 0) {
   <app-component-spinner [loading]="loading"></app-component-spinner>
   <div mat-dialog-content>
     <div class="bui-filter-selection-table">
-      <table mat-table [dataSource]="entries">
+      <table mat-table [dataSource]="dataSourceEntries">
         @for (column of displayedColumnsEntries; track column) {
           <ng-container [matColumnDef]="column">
             <th
@@ -24,15 +23,12 @@ <h1 mat-dialog-title>
                     ) {
                       <pre>{{ element[column] }}</pre>
                     } @else {
-                      #showJSON;|
-                    }
-                    <ng-template #showJSON>
                       <ngx-json-viewer
                         style="text-wrap: nowrap"
                         [expanded]="false"
                         [json]="element[column]"
                       ></ngx-json-viewer>
-                    </ng-template>
+                    }
                   </div>
                 }
                 @case ("selected") {
@@ -55,12 +51,13 @@ <h1 mat-dialog-title>
       <br />
     </div>
     <mat-paginator
+      [style.display]="dataSourceEntries.data.length ? '' : 'none'"
       #paginator
       [pageSizeOptions]="[10, 50, 100]"
       [length]="total"
       page
     ></mat-paginator>
-    @if (!entries.length && !loading) {
+    @if (!dataSourceEntries.data.length && !loading) {
       <p>No entries available in the selected scope</p>
     }
     <div>
@@ -75,4 +72,16 @@ <h1 mat-dialog-title>
       <button mat-raised-button color="primary" (click)="done()">Done</button>
     </div>
   </div>
-</div>
+} @else {
+  <div mat-dialog-content>
+    <p>Please select some projects.</p>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="cancel()"
+      style="margin-right: 10px"
+    >
+      Cancel
+    </button>
+  </div>
+}
diff --git a/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.ts b/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.ts
index ac3cfdd..d1f2647 100644
--- a/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.ts
+++ b/webgui/webapp/src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component.ts
@@ -57,19 +57,21 @@ export class EntryIdSelectionDialogComponent {
   protected skip = 0;
   protected limit = 0;
   protected total = 0;
-  protected entries: any = [];
   protected dataSourceEntries = new MatTableDataSource<any>([]);
   protected displayedColumnsEntries: string[] = [];
   protected selected: string | null = null;
 
   constructor(
     public dialogRef: MatDialogRef<EntryIdSelectionDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA) public data: { scope: string; projects: string[] },
     private qs: QueryService,
     private cd: ChangeDetectorRef,
   ) {}
 
   ngAfterViewInit(): void {
+    if (this.data.projects.length === 0) {
+      return;
+    }
     this.paginator.page
       .pipe(
         startWith({}),
@@ -79,6 +81,7 @@ export class EntryIdSelectionDialogComponent {
           this.limit = this.paginator.pageSize;
           return this.qs
             .fetch(this.data.scope, {
+              projects: this.data.projects,
               query: {
                 filters: [],
                 requestedGranularity: 'record',
@@ -109,7 +112,7 @@ export class EntryIdSelectionDialogComponent {
           ? results.response.collections
           : results.response.resultSets[0].results;
 
-        if (this.entries.length && _.isEmpty(resultsArray)) {
+        if (this.dataSourceEntries.data.length && _.isEmpty(resultsArray)) {
           this.paginator.pageIndex -= 1;
           console.log('page out of bounds');
         } else {
@@ -121,7 +124,7 @@ export class EntryIdSelectionDialogComponent {
             idName,
             ..._.filter(_.keys(resultsArray[0]), (item) => item != idName),
           ];
-          this.entries = resultsArray;
+          this.dataSourceEntries = new MatTableDataSource(resultsArray);
         }
       });
   }
diff --git a/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html b/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html
index 1ab827e..7ddb8a3 100644
--- a/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html
+++ b/webgui/webapp/src/app/components/filter-selection-dialog/filter-selection-dialog.component.html
@@ -73,6 +73,5 @@ <h1 mat-dialog-title>Select <em>{{ _.startCase(data.type) }}</em> filters for <e
     >
       Cancel
     </button>
-    <button mat-raised-button color="primary" (click)="done()">Done</button>
   </div>
 }
diff --git a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts
index b5e9e32..3b7371a 100644
--- a/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/query-page/components/query-tab/query-tab.component.ts
@@ -580,7 +580,7 @@ export class QueryTabComponent implements OnInit, AfterViewInit, OnDestroy {
   async searchFilters(filter: FormGroup, index: number) {
     const scope = filter.get('scope')!.value;
     const type = filter.get('type')!.value;
-    const projects = this.form.get('projects')!.value;
+    const projects = this.form.value.projects;
     const { FilterSelectionDialogComponent } = await import(
       'src/app/components/filter-selection-dialog/filter-selection-dialog.component'
     );
@@ -610,6 +610,7 @@ export class QueryTabComponent implements OnInit, AfterViewInit, OnDestroy {
 
   async searchEntries() {
     const scope = this.form.value.scope;
+    const projects = this.form.value.projects;
 
     if (scope === ScopeTypes.GENOMIC_VARIANTS) {
       alert(
@@ -621,7 +622,7 @@ export class QueryTabComponent implements OnInit, AfterViewInit, OnDestroy {
       'src/app/components/entry-id-selection-dialog/entry-id-selection-dialog.component'
     );
     const dialog = this.dg.open(EntryIdSelectionDialogComponent, {
-      data: { scope },
+      data: { scope, projects },
     });
 
     dialog.afterClosed().subscribe((entry) => {

From ae61febcc1ff5b2daeaf43252e537babc62b4480 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Thu, 2 Jan 2025 00:12:55 +0000
Subject: [PATCH 15/20] FIX: enable preloading of all modules in router
 configuration

---
 webgui/webapp/src/app/app.config.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webgui/webapp/src/app/app.config.ts b/webgui/webapp/src/app/app.config.ts
index 7760484..f0bdf4c 100644
--- a/webgui/webapp/src/app/app.config.ts
+++ b/webgui/webapp/src/app/app.config.ts
@@ -4,6 +4,8 @@ import {
   DetachedRouteHandle,
   RouteReuseStrategy,
   provideRouter,
+  withPreloading,
+  PreloadAllModules,
 } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -64,7 +66,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideRouter(routes),
+    provideRouter(routes, withPreloading(PreloadAllModules)),
     provideAnimations(),
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,

From f44688c7a67cf0ccc68c6d2e3d9a83ccd47a0046 Mon Sep 17 00:00:00 2001
From: NickEdwards7502 <nickedwards7502@gmail.com>
Date: Tue, 7 Jan 2025 03:05:34 +0000
Subject: [PATCH 16/20] DEV: Upload project files with staging prefix from
 frontend

* Sync with sbeacon upstream
---
 sbeacon                                                         | 2 +-
 .../data-submission-form/data-submission-form.component.ts      | 2 +-
 .../projects-list/project-updates/project-updates.component.ts  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/sbeacon b/sbeacon
index b6aa1cd..b6ce582 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit b6aa1cd6c6e51ad4c02ea1851c7cb339724917a4
+Subproject commit b6ce582bd7e012673d266344e5a1b415a4e69380
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
index 41b332f..269f244 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
@@ -62,7 +62,7 @@ export class DataSubmissionFormComponent {
   async uploadFile(path: string, file: File): Promise<string> {
     this.fileProgress.set(file.name, 0);
     try {
-      await Storage.put(`projects/${path}/${file.name}`, file, {
+      await Storage.put(`/staging/projects/${path}/${file.name}`, file, {
         customPrefix: { public: '' },
         progressCallback: (progress: { loaded: number; total: number }) => {
           this.fileProgress.set(file.name, progress.loaded);
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
index e7d06b2..14c8050 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/project-updates/project-updates.component.ts
@@ -166,7 +166,7 @@ export class ProjectUpdatesComponent implements OnChanges {
   async uploadFile(path: string, file: File): Promise<string> {
     this.fileProgress.set(file.name, 0);
     try {
-      await Storage.put(`projects/${path}/${file.name}`, file, {
+      await Storage.put(`staging/projects/${path}/${file.name}`, file, {
         customPrefix: { public: '' },
         progressCallback: (progress: { loaded: number; total: number }) => {
           this.fileProgress.set(file.name, progress.loaded);

From 6a552062dfe4bf2693b07588c6224f2a2883df15 Mon Sep 17 00:00:00 2001
From: NickEdwards7502 <nickedwards7502@gmail.com>
Date: Fri, 10 Jan 2025 00:22:05 +0000
Subject: [PATCH 17/20] MAINT: Sync with sBeacon upstream

---
 sbeacon | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sbeacon b/sbeacon
index b6ce582..c683636 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit b6ce582bd7e012673d266344e5a1b415a4e69380
+Subproject commit c6836369c6122e1b7663f35363fde19c4aa775ab

From bbd38f9b858fa7dea5dc7e7a870aa952047fe336 Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Fri, 10 Jan 2025 01:13:20 +0000
Subject: [PATCH 18/20] MAINT: Update subproject commit reference in sbeacon

---
 sbeacon | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sbeacon b/sbeacon
index c683636..5df56d5 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit c6836369c6122e1b7663f35363fde19c4aa775ab
+Subproject commit 5df56d553073c34fa80e00d164b40dbdb3243a48

From 1dbd75cf9d0c2d2f7986763966cca88dcbc1186d Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Fri, 10 Jan 2025 01:21:27 +0000
Subject: [PATCH 19/20] FIX: Add managers field to admin user click dialog form

---
 .../admin-user-click-dialog.component.ts                       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/webgui/webapp/src/app/pages/admin-page/components/admin-user-click-dialog/admin-user-click-dialog.component.ts b/webgui/webapp/src/app/pages/admin-page/components/admin-user-click-dialog/admin-user-click-dialog.component.ts
index 7ce2471..bc5b86d 100644
--- a/webgui/webapp/src/app/pages/admin-page/components/admin-user-click-dialog/admin-user-click-dialog.component.ts
+++ b/webgui/webapp/src/app/pages/admin-page/components/admin-user-click-dialog/admin-user-click-dialog.component.ts
@@ -74,6 +74,7 @@ export class AdminUserClickDialogComponent implements OnInit {
   ) {
     this.form = this.fb.group({
       administrators: [false],
+      managers: [false],
       quotaSize: ['', [Validators.required, Validators.min(0)]],
       quotaQueryCount: ['', [Validators.required, Validators.min(0)]],
     });
@@ -204,7 +205,7 @@ export class AdminUserClickDialogComponent implements OnInit {
   }
 
   updateUser() {
-    const groups = _.pick(this.form.value, ['administrators']);
+    const groups = _.pick(this.form.value, ['administrators', 'managers']);
     return this.as
       .updateUsersGroups(this.data.email, groups)
       .pipe(catchError(() => of(null)));

From 6ba252eb4f953b15a2abb0a2fdad11663991e58a Mon Sep 17 00:00:00 2001
From: NickEdwards7502 <nickedwards7502@gmail.com>
Date: Fri, 10 Jan 2025 03:58:46 +0000
Subject: [PATCH 20/20] FIX: Correct staging prefix for file upload on project
 creation

* Sync with sbeacon upstream
---
 sbeacon                                                         | 2 +-
 .../data-submission-form/data-submission-form.component.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/sbeacon b/sbeacon
index 5df56d5..6eaff40 160000
--- a/sbeacon
+++ b/sbeacon
@@ -1 +1 @@
-Subproject commit 5df56d553073c34fa80e00d164b40dbdb3243a48
+Subproject commit 6eaff40d91c737f14169971027f8d2e9ec56271c
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
index 16f85e1..65c5db2 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/data-submission-form/data-submission-form.component.ts
@@ -63,7 +63,7 @@ export class DataSubmissionFormComponent {
   async uploadFile(path: string, file: File): Promise<string> {
     this.fileProgress.set(file.name, 0);
     try {
-      await Storage.put(`/staging/projects/${path}/${file.name}`, file, {
+      await Storage.put(`staging/projects/${path}/${file.name}`, file, {
         customPrefix: { public: '' },
         progressCallback: (progress: { loaded: number; total: number }) => {
           this.fileProgress.set(file.name, progress.loaded);