From 7f53a3a58a63a3ae81389bb31899f5f0787cb777 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Fri, 21 Apr 2023 10:51:43 -0500
Subject: [PATCH 01/16] add new routes placeholder

---
 backend/app/routers/users.py | 51 +++++++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/backend/app/routers/users.py b/backend/app/routers/users.py
index 9c2ee94cc..10dcc24e5 100644
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -1,11 +1,11 @@
+from datetime import timedelta
+from secrets import token_urlsafe
 from typing import List
+
 from bson import ObjectId
 from fastapi import APIRouter, HTTPException, Depends
-from pymongo import MongoClient
-from datetime import datetime, timedelta
 from itsdangerous.url_safe import URLSafeSerializer
-from itsdangerous.exc import BadSignature
-from secrets import token_urlsafe
+from pymongo import MongoClient
 
 from app import dependencies
 from app.config import settings
@@ -17,7 +17,7 @@
 
 @router.get("", response_model=List[UserOut])
 async def get_users(
-    db: MongoClient = Depends(dependencies.get_db), skip: int = 0, limit: int = 2
+        db: MongoClient = Depends(dependencies.get_db), skip: int = 0, limit: int = 2
 ):
     users = []
     for doc in await db["users"].find().skip(skip).limit(limit).to_list(length=limit):
@@ -34,18 +34,35 @@ async def get_user(user_id: str, db: MongoClient = Depends(dependencies.get_db))
 
 @router.get("/username/{username}", response_model=UserOut)
 async def get_user_by_name(
-    username: str, db: MongoClient = Depends(dependencies.get_db)
+        username: str, db: MongoClient = Depends(dependencies.get_db)
 ):
     if (user := await db["users"].find_one({"email": username})) is not None:
         return UserOut.from_mongo(user)
     raise HTTPException(status_code=404, detail=f"User {username} not found")
 
 
+@router.get("/keys", response_model=List[UserAPIKey])
+async def generate_user_api_key(
+        db: MongoClient = Depends(dependencies.get_db),
+        current_user=Depends(get_current_username),
+        skip: int = 0,
+        limit: int = 10,
+):
+    """List all api keys that user has created
+
+    Arguments:
+        skip -- number of page to skip
+        limit -- number to limit per page
+    """
+    # TODO
+    return []
+
+
 @router.post("/keys", response_model=str)
 async def generate_user_api_key(
-    mins: int = settings.local_auth_expiration,
-    db: MongoClient = Depends(dependencies.get_db),
-    current_user=Depends(get_current_username),
+        mins: int = settings.local_auth_expiration,
+        db: MongoClient = Depends(dependencies.get_db),
+        current_user=Depends(get_current_username),
 ):
     """Generate an API key that confers the user's privileges.
 
@@ -62,3 +79,19 @@ async def generate_user_api_key(
     db["user_keys"].insert_one(user_key.to_mongo())
 
     return hashed_key
+
+
+@router.delete("/keys/{key_id}", response_model=str)
+async def generate_user_api_key(
+        key_id: str,
+        db: MongoClient = Depends(dependencies.get_db),
+        current_user=Depends(get_current_username),
+):
+    """Delete API keys given ID
+
+    Arguments:
+        id -- number of minutes before expiration (0 for no expiration)
+    """
+    # TODO
+
+    return

From 082fc03ec15cb1dc04ee46f9dc256df9a468648c Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Fri, 21 Apr 2023 15:22:24 -0500
Subject: [PATCH 02/16] add list and delete endpoint; inline docs

---
 backend/app/models/users.py  |  4 +++-
 backend/app/routers/users.py | 42 ++++++++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/backend/app/models/users.py b/backend/app/models/users.py
index 21fb5322b..ce4c211fe 100644
--- a/backend/app/models/users.py
+++ b/backend/app/models/users.py
@@ -1,5 +1,6 @@
-from typing import Optional
 from datetime import datetime
+from typing import Optional
+
 from passlib.context import CryptContext
 from pydantic import Field, EmailStr, BaseModel
 from pymongo import MongoClient
@@ -43,6 +44,7 @@ class UserAPIKey(MongoModel):
     """API keys can have a reference name (e.g. 'Uploader script')"""
 
     key: str
+    name: str
     user: EmailStr
     created: datetime = Field(default_factory=datetime.utcnow)
     expires: Optional[datetime] = None
diff --git a/backend/app/routers/users.py b/backend/app/routers/users.py
index 10dcc24e5..0981749b9 100644
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -5,7 +5,7 @@
 from bson import ObjectId
 from fastapi import APIRouter, HTTPException, Depends
 from itsdangerous.url_safe import URLSafeSerializer
-from pymongo import MongoClient
+from pymongo import MongoClient, DESCENDING
 
 from app import dependencies
 from app.config import settings
@@ -51,15 +51,25 @@ async def generate_user_api_key(
     """List all api keys that user has created
 
     Arguments:
-        skip -- number of page to skip
-        limit -- number to limit per page
+        skip: number of page to skip
+        limit: number to limit per page
     """
-    # TODO
-    return []
+    apikeys = []
+    for doc in (
+            await db["user_keys"].find({"user": current_user})
+                    .sort([("created", DESCENDING)])
+                    .skip(skip)
+                    .limit(limit)
+                    .to_list(length=limit)
+    ):
+        apikeys.append(UserAPIKey.from_mongo(doc))
+
+    return apikeys
 
 
 @router.post("/keys", response_model=str)
 async def generate_user_api_key(
+        name: str,
         mins: int = settings.local_auth_expiration,
         db: MongoClient = Depends(dependencies.get_db),
         current_user=Depends(get_current_username),
@@ -67,13 +77,14 @@ async def generate_user_api_key(
     """Generate an API key that confers the user's privileges.
 
     Arguments:
-        mins -- number of minutes before expiration (0 for no expiration)
+        name: name of the api key
+        mins: number of minutes before expiration (0 for no expiration)
     """
     serializer = URLSafeSerializer(settings.local_auth_secret, salt="api_key")
     unique_key = token_urlsafe(16)
     hashed_key = serializer.dumps({"user": current_user, "key": unique_key})
 
-    user_key = UserAPIKey(user=current_user, key=unique_key)
+    user_key = UserAPIKey(user=current_user, key=unique_key, name=name)
     if mins > 0:
         user_key.expires = user_key.created + timedelta(minutes=mins)
     db["user_keys"].insert_one(user_key.to_mongo())
@@ -90,8 +101,17 @@ async def generate_user_api_key(
     """Delete API keys given ID
 
     Arguments:
-        id -- number of minutes before expiration (0 for no expiration)
+        key_id: id of the apikey
     """
-    # TODO
-
-    return
+    apikey_doc = (await db["user_keys"].find_one({"_id": ObjectId(key_id)}))
+    if apikey_doc is not None:
+        apikey = UserAPIKey.from_mongo(apikey_doc)
+
+        # Only allow user to delete their own key
+        if apikey.user == current_user:
+            await db["user_keys"].delete_one({"_id": ObjectId(key_id)})
+            return {"deleted": apikey}
+        else:
+            raise HTTPException(status_code=403, detail=f"API key {key_id} not allowed to be deleted.")
+    else:
+        raise HTTPException(status_code=404, detail=f"API key {key_id} not found.")

From 0b9c36bfe70775b6bbbdcc60fec1551d01f91972 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Fri, 21 Apr 2023 16:19:29 -0500
Subject: [PATCH 03/16] codegen and pytest

---
 backend/app/tests/test_apikey.py              | 19 ++++++
 backend/app/tests/utils.py                    | 38 ++++++++----
 frontend/src/actions/user.js                  |  8 +--
 frontend/src/openapi/v2/index.ts              |  1 +
 frontend/src/openapi/v2/models/UserAPIKey.ts  | 15 +++++
 .../src/openapi/v2/services/UsersService.ts   | 58 ++++++++++++++++++-
 6 files changed, 122 insertions(+), 17 deletions(-)
 create mode 100644 backend/app/tests/test_apikey.py
 create mode 100644 frontend/src/openapi/v2/models/UserAPIKey.ts

diff --git a/backend/app/tests/test_apikey.py b/backend/app/tests/test_apikey.py
new file mode 100644
index 000000000..58f0deb12
--- /dev/null
+++ b/backend/app/tests/test_apikey.py
@@ -0,0 +1,19 @@
+from fastapi.testclient import TestClient
+
+from app.config import settings
+from app.tests.utils import create_apikey
+
+
+def test_create_apikey(client: TestClient, headers: dict):
+    key_id = create_apikey(client, headers).get("id")
+    response = client.get(f"{settings.API_V2_STR}/users/keys/{key_id}", headers=headers)
+    assert response.status_code == 200
+    assert response.json().get("id") is not None
+
+
+def test_list_apikeys(client: TestClient, headers: dict):
+    pass
+
+
+def test_delete_apikeys(client: TestClient, headers: dict):
+    pass
diff --git a/backend/app/tests/utils.py b/backend/app/tests/utils.py
index c7c45d32b..fcc3cfb12 100644
--- a/backend/app/tests/utils.py
+++ b/backend/app/tests/utils.py
@@ -1,5 +1,7 @@
 import os
+
 from fastapi.testclient import TestClient
+
 from app.config import settings
 
 """These are standard JSON entries to be used for creating test resources."""
@@ -69,7 +71,6 @@
     "bibtex": [],
 }
 
-
 """CONVENIENCE FUNCTIONS FOR COMMON ACTIONS REQUIRED BY TESTS."""
 
 
@@ -79,7 +80,7 @@ def create_user(client: TestClient, headers: dict, email: str = user_alt["email"
     u["email"] = email
     response = client.post(f"{settings.API_V2_STR}/users", json=u)
     assert (
-        response.status_code == 200 or response.status_code == 409
+            response.status_code == 200 or response.status_code == 409
     )  # 409 = user already exists
     return response.json()
 
@@ -95,6 +96,19 @@ def get_user_token(client: TestClient, headers: dict, email: str = user_alt["ema
     return {"Authorization": "Bearer " + token}
 
 
+def create_apikey(client: TestClient, headers: dict):
+    """create user generated API key"""
+    response = client.post(
+        f"{settings.API_V2_STR}/users/keys", json={
+            "name": "pytest API key",
+            "mins": 30  # 30 minutes
+        }, headers=headers
+    )
+    assert response.status_code == 200
+    assert response.json().get("id") is not None
+    return response.json()
+
+
 def create_group(client: TestClient, headers: dict):
     """Creates a test group (creator will be auto-added to members) and returns the JSON."""
     response = client.post(
@@ -116,11 +130,11 @@ def create_dataset(client: TestClient, headers: dict):
 
 
 def upload_file(
-    client: TestClient,
-    headers: dict,
-    dataset_id: str,
-    filename=filename_example,
-    content=file_content_example,
+        client: TestClient,
+        headers: dict,
+        dataset_id: str,
+        filename=filename_example,
+        content=file_content_example,
 ):
     """Uploads a dummy file (optionally with custom name/content) to a dataset and returns the JSON."""
     with open(filename, "w") as tempf:
@@ -138,11 +152,11 @@ def upload_file(
 
 
 def create_folder(
-    client: TestClient,
-    headers: dict,
-    dataset_id: str,
-    name="test folder",
-    parent_folder=None,
+        client: TestClient,
+        headers: dict,
+        dataset_id: str,
+        name="test folder",
+        parent_folder=None,
 ):
     """Creates a folder (optionally under an existing folder) in a dataset and returns the JSON."""
     folder_data = {"name": name}
diff --git a/frontend/src/actions/user.js b/frontend/src/actions/user.js
index 2841f3879..418d480d6 100644
--- a/frontend/src/actions/user.js
+++ b/frontend/src/actions/user.js
@@ -126,16 +126,16 @@ export function fetchAllUsers(skip = 0, limit = 101) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(fetchAllUsers((skip = 0), (limit = 21)));
+				dispatch(fetchAllUsers(skip, limit));
 			});
 	};
 }
 
 export const GENERATE_API_KEY = "GENERATE_API_KEY";
 
-export function generateApiKey(minutes = 30) {
+export function generateApiKey(name = "", minutes = 30) {
 	return (dispatch) => {
-		return V2.UsersService.generateUserApiKeyApiV2UsersKeysPost(minutes)
+		return V2.UsersService.generateUserApiKeyApiV2UsersKeysPost(name, minutes)
 			.then((json) => {
 				dispatch({
 					type: GENERATE_API_KEY,
@@ -144,7 +144,7 @@ export function generateApiKey(minutes = 30) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(generateApiKey((minutes = 30)));
+				dispatch(generateApiKey(name, minutes));
 			});
 	};
 }
diff --git a/frontend/src/openapi/v2/index.ts b/frontend/src/openapi/v2/index.ts
index 1013bfa85..03c8c1c19 100644
--- a/frontend/src/openapi/v2/index.ts
+++ b/frontend/src/openapi/v2/index.ts
@@ -52,6 +52,7 @@ export { RoleType } from './models/RoleType';
 export type { SearchCriteria } from './models/SearchCriteria';
 export type { SearchObject } from './models/SearchObject';
 export type { UserAndRole } from './models/UserAndRole';
+export type { UserAPIKey } from './models/UserAPIKey';
 export type { UserIn } from './models/UserIn';
 export type { UserLogin } from './models/UserLogin';
 export type { UserOut } from './models/UserOut';
diff --git a/frontend/src/openapi/v2/models/UserAPIKey.ts b/frontend/src/openapi/v2/models/UserAPIKey.ts
new file mode 100644
index 000000000..80d974e24
--- /dev/null
+++ b/frontend/src/openapi/v2/models/UserAPIKey.ts
@@ -0,0 +1,15 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+/**
+ * API keys can have a reference name (e.g. 'Uploader script')
+ */
+export type UserAPIKey = {
+    id?: string;
+    key: string;
+    name: string;
+    user: string;
+    created?: string;
+    expires?: string;
+}
diff --git a/frontend/src/openapi/v2/services/UsersService.ts b/frontend/src/openapi/v2/services/UsersService.ts
index 21ca92613..e7659503a 100644
--- a/frontend/src/openapi/v2/services/UsersService.ts
+++ b/frontend/src/openapi/v2/services/UsersService.ts
@@ -1,6 +1,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { UserAPIKey } from '../models/UserAPIKey';
 import type { UserOut } from '../models/UserOut';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { request as __request } from '../core/request';
@@ -67,23 +68,56 @@ export class UsersService {
         });
     }
 
+    /**
+     * Generate User Api Key
+     * List all api keys that user has created
+     *
+     * Arguments:
+     * skip: number of page to skip
+     * limit: number to limit per page
+     * @param skip
+     * @param limit
+     * @returns UserAPIKey Successful Response
+     * @throws ApiError
+     */
+    public static generateUserApiKeyApiV2UsersKeysGet(
+        skip?: number,
+        limit: number = 10,
+    ): CancelablePromise<Array<UserAPIKey>> {
+        return __request({
+            method: 'GET',
+            path: `/api/v2/users/keys`,
+            query: {
+                'skip': skip,
+                'limit': limit,
+            },
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
+
     /**
      * Generate User Api Key
      * Generate an API key that confers the user's privileges.
      *
      * Arguments:
-     * mins -- number of minutes before expiration (0 for no expiration)
+     * name: name of the api key
+     * mins: number of minutes before expiration (0 for no expiration)
+     * @param name
      * @param mins
      * @returns string Successful Response
      * @throws ApiError
      */
     public static generateUserApiKeyApiV2UsersKeysPost(
+        name: string,
         mins: number = 30,
     ): CancelablePromise<string> {
         return __request({
             method: 'POST',
             path: `/api/v2/users/keys`,
             query: {
+                'name': name,
                 'mins': mins,
             },
             errors: {
@@ -92,4 +126,26 @@ export class UsersService {
         });
     }
 
+    /**
+     * Generate User Api Key
+     * Delete API keys given ID
+     *
+     * Arguments:
+     * key_id: id of the apikey
+     * @param keyId
+     * @returns string Successful Response
+     * @throws ApiError
+     */
+    public static generateUserApiKeyApiV2UsersKeysKeyIdDelete(
+        keyId: string,
+    ): CancelablePromise<string> {
+        return __request({
+            method: 'DELETE',
+            path: `/api/v2/users/keys/${keyId}`,
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
+
 }
\ No newline at end of file

From b55d9f8d2b77bfa8c2b1934c439f6e13af2c5731 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Fri, 21 Apr 2023 16:28:49 -0500
Subject: [PATCH 04/16] ugly ui?

---
 backend/app/tests/utils.py                    |  5 +----
 frontend/src/components/users/ApiKeyModal.tsx | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/backend/app/tests/utils.py b/backend/app/tests/utils.py
index fcc3cfb12..38f5256ed 100644
--- a/backend/app/tests/utils.py
+++ b/backend/app/tests/utils.py
@@ -99,10 +99,7 @@ def get_user_token(client: TestClient, headers: dict, email: str = user_alt["ema
 def create_apikey(client: TestClient, headers: dict):
     """create user generated API key"""
     response = client.post(
-        f"{settings.API_V2_STR}/users/keys", json={
-            "name": "pytest API key",
-            "mins": 30  # 30 minutes
-        }, headers=headers
+        f"{settings.API_V2_STR}/users/keys?name=pytest&mins=30", headers=headers
     )
     assert response.status_code == 200
     assert response.json().get("id") is not None
diff --git a/frontend/src/components/users/ApiKeyModal.tsx b/frontend/src/components/users/ApiKeyModal.tsx
index b03ffb5fc..f11748128 100644
--- a/frontend/src/components/users/ApiKeyModal.tsx
+++ b/frontend/src/components/users/ApiKeyModal.tsx
@@ -19,6 +19,8 @@ import { RootState } from "../../types/data";
 import { ClowderMetadataTextField } from "../styledComponents/ClowderMetadataTextField";
 import { ClowderFootnote } from "../styledComponents/ClowderFootnote";
 import { CopyToClipboard } from "react-copy-to-clipboard";
+import { ClowderInputLabel } from "../styledComponents/ClowderInputLabel";
+import { ClowderInput } from "../styledComponents/ClowderInput";
 
 type ApiKeyModalProps = {
 	apiKeyModalOpen: boolean;
@@ -29,11 +31,12 @@ export const ApiKeyModal = (props: ApiKeyModalProps) => {
 	const { apiKeyModalOpen, setApiKeyModalOpen } = props;
 
 	const dispatch = useDispatch();
-	const generateApiKey = (minutes: number) =>
-		dispatch(generateApiKeyAction(minutes));
+	const generateApiKey = (name: string, minutes: number) =>
+		dispatch(generateApiKeyAction(name, minutes));
 	const resetApiKey = () => dispatch(resetApiKeyAction());
 	const apiKey = useSelector((state: RootState) => state.user.apiKey);
 
+	const [name, setName] = useState("");
 	const [minutes, setMinutes] = useState(30);
 
 	const handleClose = () => {
@@ -42,7 +45,7 @@ export const ApiKeyModal = (props: ApiKeyModalProps) => {
 	};
 
 	const handleGenerate = () => {
-		generateApiKey(minutes);
+		generateApiKey(name, minutes);
 	};
 
 	const handleExpirationChange = (e) => {
@@ -77,6 +80,15 @@ export const ApiKeyModal = (props: ApiKeyModalProps) => {
 					<DialogContent>
 						<ClowderFootnote>Your API key will expire</ClowderFootnote>
 						<FormControl fullWidth sx={{ marginTop: "1em" }}>
+							<ClowderInputLabel>Name</ClowderInputLabel>
+							<ClowderInput
+								required={true}
+								id="name"
+								onChange={(event) => {
+									setName(event.target.value);
+								}}
+								defaultValue={name}
+							/>
 							<InputLabel id="demo-simple-select-label">After</InputLabel>
 							<Select
 								labelId="expiration"

From 09ff07d8c3e4d22ffe0556337cdda2da2f98ac44 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Fri, 21 Apr 2023 16:36:26 -0500
Subject: [PATCH 05/16] onstart clear user keys

---
 backend/app/tests/test_apikey.py     |   8 +-
 backend/app/tests/utils.py           |   2 +-
 scripts/mongoviews/mongo-init-dev.js | 506 +++++++++++++--------------
 scripts/mongoviews/mongo-init.js     | 506 +++++++++++++--------------
 4 files changed, 490 insertions(+), 532 deletions(-)

diff --git a/backend/app/tests/test_apikey.py b/backend/app/tests/test_apikey.py
index 58f0deb12..1eded6c90 100644
--- a/backend/app/tests/test_apikey.py
+++ b/backend/app/tests/test_apikey.py
@@ -5,14 +5,12 @@
 
 
 def test_create_apikey(client: TestClient, headers: dict):
-    key_id = create_apikey(client, headers).get("id")
-    response = client.get(f"{settings.API_V2_STR}/users/keys/{key_id}", headers=headers)
-    assert response.status_code == 200
-    assert response.json().get("id") is not None
+    hashed_key = create_apikey(client, headers)
+    assert hashed_key is not None
 
 
 def test_list_apikeys(client: TestClient, headers: dict):
-    pass
+    response = client.get(f"{settings.API_V2_STR}/users/keys/{key_id}", headers=headers)
 
 
 def test_delete_apikeys(client: TestClient, headers: dict):
diff --git a/backend/app/tests/utils.py b/backend/app/tests/utils.py
index 38f5256ed..7fd5dcaaf 100644
--- a/backend/app/tests/utils.py
+++ b/backend/app/tests/utils.py
@@ -102,7 +102,7 @@ def create_apikey(client: TestClient, headers: dict):
         f"{settings.API_V2_STR}/users/keys?name=pytest&mins=30", headers=headers
     )
     assert response.status_code == 200
-    assert response.json().get("id") is not None
+    assert response.json() is not None
     return response.json()
 
 
diff --git a/scripts/mongoviews/mongo-init-dev.js b/scripts/mongoviews/mongo-init-dev.js
index d12fa6f5e..6080cda28 100644
--- a/scripts/mongoviews/mongo-init-dev.js
+++ b/scripts/mongoviews/mongo-init-dev.js
@@ -1,274 +1,254 @@
 function init(databaseName) {
-	db = db.getSiblingDB(databaseName);
+  db = db.getSiblingDB(databaseName);
 
-	db.createCollection("authorization");
-	db.createCollection("datasets");
-	db.createCollection("feeds");
-	db.createCollection("file_versions");
-	db.createCollection("files");
-	db.createCollection("folders");
-	db.createCollection("listener_job_updates");
-	db.createCollection("listener_jobs");
-	db.createCollection("listeners");
-	db.createCollection("metadata");
-	db.createCollection("metadata.definitions");
-	db.createCollection("tokens");
-	db.createCollection("users");
+  db.createCollection("authorization");
+  db.createCollection("datasets");
+  db.createCollection("feeds");
+  db.createCollection("file_versions");
+  db.createCollection("files");
+  db.createCollection("folders");
+  db.createCollection("listener_job_updates");
+  db.createCollection("listener_jobs");
+  db.createCollection("listeners");
+  db.createCollection("metadata");
+  db.createCollection("metadata.definitions");
+  db.createCollection("tokens");
+  db.createCollection("users");
+  db.createCollection("user_keys");
 
-	db.createView("datasets_view", "datasets",
-		[
-			{
-				$lookup: {
-					"from": "authorization",
-					"localField": "_id",
-					"foreignField": "dataset_id",
-					"as": "auth"
-				}
-			}
-		]
-	);
+  db.createView("datasets_view", "datasets", [
+    {
+      $lookup: {
+        from: "authorization",
+        localField: "_id",
+        foreignField: "dataset_id",
+        as: "auth",
+      },
+    },
+  ]);
 
-	db.createView("files_view", "files",
-		[
-			{
-				$lookup: {
-					"from": "authorization",
-					"localField": "dataset_id",
-					"foreignField": "dataset_id",
-					"as": "auth"
-				}
-			}
-		],
-	);
+  db.createView("files_view", "files", [
+    {
+      $lookup: {
+        from: "authorization",
+        localField: "dataset_id",
+        foreignField: "dataset_id",
+        as: "auth",
+      },
+    },
+  ]);
 
-	db.createView("folders_view", "folders",
-		[
-			{
-				$lookup: {
-					"from": "authorization",
-					"localField": "dataset_id",
-					"foreignField": "dataset_id",
-					"as": "auth"
-				}
-			}
-		],
-	);
+  db.createView("folders_view", "folders", [
+    {
+      $lookup: {
+        from: "authorization",
+        localField: "dataset_id",
+        foreignField: "dataset_id",
+        as: "auth",
+      },
+    },
+  ]);
 
-	db.createView("listener_job_updates_view", "listener_job_updates",
-		[
-			{
-				$lookup: // Equality Match
-					{
-						from: "listener_jobs",
-						localField: "job_id",
-						foreignField: "_id",
-						as: "listener_job_details"
-					}
-			},
-			{
-				$facet: {
-					"extraction_on_dataset": [
-						{
-							"$match": {
-								"listener_job_details.resource_ref.collection": {
-									"$eq": "dataset"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "listener_job_details.resource_ref.resource_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					],
-					"extraction_on_file": [
-						{
-							"$match": {
-								"listener_job_details.resource_ref.collection": {
-									"$eq": "file"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "files",
-								"localField": "listener_job_details.resource_ref.resource_id",
-								"foreignField": "_id",
-								"as": "file_details"
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "file_details.dataset_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					]
-				}
-			},
-			{
-				$project: {
-					"all": {
-						"$concatArrays": [
-							"$extraction_on_dataset",
-							"$extraction_on_file"
-						]
-					}
-				}
-			},
-			{
-				$unwind: "$all"
-			},
-			{
-				$replaceRoot: {
-					"newRoot": "$all"
-				}
-			}
-		],
-	);
+  db.createView("listener_job_updates_view", "listener_job_updates", [
+    {
+      // Equality Match
+      $lookup: {
+        from: "listener_jobs",
+        localField: "job_id",
+        foreignField: "_id",
+        as: "listener_job_details",
+      },
+    },
+    {
+      $facet: {
+        extraction_on_dataset: [
+          {
+            $match: {
+              "listener_job_details.resource_ref.collection": {
+                $eq: "dataset",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "listener_job_details.resource_ref.resource_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+        extraction_on_file: [
+          {
+            $match: {
+              "listener_job_details.resource_ref.collection": {
+                $eq: "file",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "files",
+              localField: "listener_job_details.resource_ref.resource_id",
+              foreignField: "_id",
+              as: "file_details",
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "file_details.dataset_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+      },
+    },
+    {
+      $project: {
+        all: {
+          $concatArrays: ["$extraction_on_dataset", "$extraction_on_file"],
+        },
+      },
+    },
+    {
+      $unwind: "$all",
+    },
+    {
+      $replaceRoot: {
+        newRoot: "$all",
+      },
+    },
+  ]);
 
-	db.createView("listener_jobs_view", "listener_jobs",
-		[
-			{
-				$facet: {
-					"extraction_on_dataset": [
-						{
-							"$match": {
-								"resource_ref.collection": {
-									"$eq": "dataset"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "resource_ref.resource_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					],
-					"extraction_on_file": [
-						{
-							"$match": {
-								"resource_ref.collection": {
-									"$eq": "file"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "files",
-								"localField": "resource_ref.resource_id",
-								"foreignField": "_id",
-								"as": "file_details"
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "file_details.dataset_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					]
-				}
-			},
-			{
-				$project: {
-					"all": {
-						"$concatArrays": [
-							"$extraction_on_dataset",
-							"$extraction_on_file"
-						]
-					}
-				}
-			},
-			{
-				$unwind: "$all"
-			},
-			{
-				$replaceRoot: {
-					"newRoot": "$all"
-				}
-			}
-		],
-	);
+  db.createView("listener_jobs_view", "listener_jobs", [
+    {
+      $facet: {
+        extraction_on_dataset: [
+          {
+            $match: {
+              "resource_ref.collection": {
+                $eq: "dataset",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "resource_ref.resource_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+        extraction_on_file: [
+          {
+            $match: {
+              "resource_ref.collection": {
+                $eq: "file",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "files",
+              localField: "resource_ref.resource_id",
+              foreignField: "_id",
+              as: "file_details",
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "file_details.dataset_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+      },
+    },
+    {
+      $project: {
+        all: {
+          $concatArrays: ["$extraction_on_dataset", "$extraction_on_file"],
+        },
+      },
+    },
+    {
+      $unwind: "$all",
+    },
+    {
+      $replaceRoot: {
+        newRoot: "$all",
+      },
+    },
+  ]);
 
-	db.createView("metadata_view", "metadata",
-		[
-			{
-				$facet: {
-					"metadata_on_dataset": [
-						{
-							"$match": {
-								"resource.collection": {
-									"$eq": "datasets"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "resource.resource_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					],
-					"metadata_on_file": [
-						{
-							"$match": {
-								"resource.collection": {
-									"$eq": "files"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "files",
-								"localField": "resource.resource_id",
-								"foreignField": "_id",
-								"as": "file_details"
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "file_details.dataset_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					]
-				}
-			},
-			{
-				$project: {
-					"all": {
-						"$concatArrays": [
-							"$metadata_on_dataset",
-							"$metadata_on_file"
-						]
-					}
-				}
-			},
-			{
-				$unwind: "$all"
-			},
-			{
-				$replaceRoot: {
-					"newRoot": "$all"
-				}
-			}
-		],
-	);
+  db.createView("metadata_view", "metadata", [
+    {
+      $facet: {
+        metadata_on_dataset: [
+          {
+            $match: {
+              "resource.collection": {
+                $eq: "datasets",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "resource.resource_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+        metadata_on_file: [
+          {
+            $match: {
+              "resource.collection": {
+                $eq: "files",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "files",
+              localField: "resource.resource_id",
+              foreignField: "_id",
+              as: "file_details",
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "file_details.dataset_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+      },
+    },
+    {
+      $project: {
+        all: {
+          $concatArrays: ["$metadata_on_dataset", "$metadata_on_file"],
+        },
+      },
+    },
+    {
+      $unwind: "$all",
+    },
+    {
+      $replaceRoot: {
+        newRoot: "$all",
+      },
+    },
+  ]);
 }
 
 init("clowder2");
diff --git a/scripts/mongoviews/mongo-init.js b/scripts/mongoviews/mongo-init.js
index 12096fbe2..e3fbaef84 100644
--- a/scripts/mongoviews/mongo-init.js
+++ b/scripts/mongoviews/mongo-init.js
@@ -1,274 +1,254 @@
 function init(databaseName) {
-	db = db.getSiblingDB(databaseName);
+  db = db.getSiblingDB(databaseName);
 
-	db.createCollection("authorization");
-	db.createCollection("datasets");
-	db.createCollection("feeds");
-	db.createCollection("file_versions");
-	db.createCollection("files");
-	db.createCollection("folders");
-	db.createCollection("listener_job_updates");
-	db.createCollection("listener_jobs");
-	db.createCollection("listeners");
-	db.createCollection("metadata");
-	db.createCollection("metadata.definitions");
-	db.createCollection("tokens");
-	db.createCollection("users");
+  db.createCollection("authorization");
+  db.createCollection("datasets");
+  db.createCollection("feeds");
+  db.createCollection("file_versions");
+  db.createCollection("files");
+  db.createCollection("folders");
+  db.createCollection("listener_job_updates");
+  db.createCollection("listener_jobs");
+  db.createCollection("listeners");
+  db.createCollection("metadata");
+  db.createCollection("metadata.definitions");
+  db.createCollection("tokens");
+  db.createCollection("users");
+  db.createCollection("user_keys");
 
-	db.createView("datasets_view", "datasets",
-		[
-			{
-				$lookup: {
-					"from": "authorization",
-					"localField": "_id",
-					"foreignField": "dataset_id",
-					"as": "auth"
-				}
-			}
-		]
-	);
+  db.createView("datasets_view", "datasets", [
+    {
+      $lookup: {
+        from: "authorization",
+        localField: "_id",
+        foreignField: "dataset_id",
+        as: "auth",
+      },
+    },
+  ]);
 
-	db.createView("files_view", "files",
-		[
-			{
-				$lookup: {
-					"from": "authorization",
-					"localField": "dataset_id",
-					"foreignField": "dataset_id",
-					"as": "auth"
-				}
-			}
-		],
-	);
+  db.createView("files_view", "files", [
+    {
+      $lookup: {
+        from: "authorization",
+        localField: "dataset_id",
+        foreignField: "dataset_id",
+        as: "auth",
+      },
+    },
+  ]);
 
-	db.createView("folders_view", "folders",
-		[
-			{
-				$lookup: {
-					"from": "authorization",
-					"localField": "dataset_id",
-					"foreignField": "dataset_id",
-					"as": "auth"
-				}
-			}
-		],
-	);
+  db.createView("folders_view", "folders", [
+    {
+      $lookup: {
+        from: "authorization",
+        localField: "dataset_id",
+        foreignField: "dataset_id",
+        as: "auth",
+      },
+    },
+  ]);
 
-	db.createView("listener_job_updates_view", "listener_job_updates",
-		[
-			{
-				$lookup: // Equality Match
-					{
-						from: "listener_jobs",
-						localField: "job_id",
-						foreignField: "_id",
-						as: "listener_job_details"
-					}
-			},
-			{
-				$facet: {
-					"extraction_on_dataset": [
-						{
-							"$match": {
-								"listener_job_details.resource_ref.collection": {
-									"$eq": "dataset"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "listener_job_details.resource_ref.resource_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					],
-					"extraction_on_file": [
-						{
-							"$match": {
-								"listener_job_details.resource_ref.collection": {
-									"$eq": "file"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "files",
-								"localField": "listener_job_details.resource_ref.resource_id",
-								"foreignField": "_id",
-								"as": "file_details"
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "file_details.dataset_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					]
-				}
-			},
-			{
-				$project: {
-					"all": {
-						"$concatArrays": [
-							"$extraction_on_dataset",
-							"$extraction_on_file"
-						]
-					}
-				}
-			},
-			{
-				$unwind: "$all"
-			},
-			{
-				$replaceRoot: {
-					"newRoot": "$all"
-				}
-			}
-		],
-	);
+  db.createView("listener_job_updates_view", "listener_job_updates", [
+    {
+      // Equality Match
+      $lookup: {
+        from: "listener_jobs",
+        localField: "job_id",
+        foreignField: "_id",
+        as: "listener_job_details",
+      },
+    },
+    {
+      $facet: {
+        extraction_on_dataset: [
+          {
+            $match: {
+              "listener_job_details.resource_ref.collection": {
+                $eq: "dataset",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "listener_job_details.resource_ref.resource_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+        extraction_on_file: [
+          {
+            $match: {
+              "listener_job_details.resource_ref.collection": {
+                $eq: "file",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "files",
+              localField: "listener_job_details.resource_ref.resource_id",
+              foreignField: "_id",
+              as: "file_details",
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "file_details.dataset_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+      },
+    },
+    {
+      $project: {
+        all: {
+          $concatArrays: ["$extraction_on_dataset", "$extraction_on_file"],
+        },
+      },
+    },
+    {
+      $unwind: "$all",
+    },
+    {
+      $replaceRoot: {
+        newRoot: "$all",
+      },
+    },
+  ]);
 
-	db.createView("listener_jobs_view", "listener_jobs",
-		[
-			{
-				$facet: {
-					"extraction_on_dataset": [
-						{
-							"$match": {
-								"resource_ref.collection": {
-									"$eq": "dataset"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "resource_ref.resource_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					],
-					"extraction_on_file": [
-						{
-							"$match": {
-								"resource_ref.collection": {
-									"$eq": "file"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "files",
-								"localField": "resource_ref.resource_id",
-								"foreignField": "_id",
-								"as": "file_details"
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "file_details.dataset_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					]
-				}
-			},
-			{
-				$project: {
-					"all": {
-						"$concatArrays": [
-							"$extraction_on_dataset",
-							"$extraction_on_file"
-						]
-					}
-				}
-			},
-			{
-				$unwind: "$all"
-			},
-			{
-				$replaceRoot: {
-					"newRoot": "$all"
-				}
-			}
-		],
-	);
+  db.createView("listener_jobs_view", "listener_jobs", [
+    {
+      $facet: {
+        extraction_on_dataset: [
+          {
+            $match: {
+              "resource_ref.collection": {
+                $eq: "dataset",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "resource_ref.resource_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+        extraction_on_file: [
+          {
+            $match: {
+              "resource_ref.collection": {
+                $eq: "file",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "files",
+              localField: "resource_ref.resource_id",
+              foreignField: "_id",
+              as: "file_details",
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "file_details.dataset_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+      },
+    },
+    {
+      $project: {
+        all: {
+          $concatArrays: ["$extraction_on_dataset", "$extraction_on_file"],
+        },
+      },
+    },
+    {
+      $unwind: "$all",
+    },
+    {
+      $replaceRoot: {
+        newRoot: "$all",
+      },
+    },
+  ]);
 
-	db.createView("metadata_view", "metadata",
-		[
-			{
-				$facet: {
-					"metadata_on_dataset": [
-						{
-							"$match": {
-								"resource.collection": {
-									"$eq": "datasets"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "resource.resource_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					],
-					"metadata_on_file": [
-						{
-							"$match": {
-								"resource.collection": {
-									"$eq": "files"
-								}
-							}
-						},
-						{
-							"$lookup": {
-								"from": "files",
-								"localField": "resource.resource_id",
-								"foreignField": "_id",
-								"as": "file_details"
-							}
-						},
-						{
-							"$lookup": {
-								"from": "authorization",
-								"localField": "file_details.dataset_id",
-								"foreignField": "dataset_id",
-								"as": "auth"
-							}
-						}
-					]
-				}
-			},
-			{
-				$project: {
-					"all": {
-						"$concatArrays": [
-							"$metadata_on_dataset",
-							"$metadata_on_file"
-						]
-					}
-				}
-			},
-			{
-				$unwind: "$all"
-			},
-			{
-				$replaceRoot: {
-					"newRoot": "$all"
-				}
-			}
-		],
-	);
+  db.createView("metadata_view", "metadata", [
+    {
+      $facet: {
+        metadata_on_dataset: [
+          {
+            $match: {
+              "resource.collection": {
+                $eq: "datasets",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "resource.resource_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+        metadata_on_file: [
+          {
+            $match: {
+              "resource.collection": {
+                $eq: "files",
+              },
+            },
+          },
+          {
+            $lookup: {
+              from: "files",
+              localField: "resource.resource_id",
+              foreignField: "_id",
+              as: "file_details",
+            },
+          },
+          {
+            $lookup: {
+              from: "authorization",
+              localField: "file_details.dataset_id",
+              foreignField: "dataset_id",
+              as: "auth",
+            },
+          },
+        ],
+      },
+    },
+    {
+      $project: {
+        all: {
+          $concatArrays: ["$metadata_on_dataset", "$metadata_on_file"],
+        },
+      },
+    },
+    {
+      $unwind: "$all",
+    },
+    {
+      $replaceRoot: {
+        newRoot: "$all",
+      },
+    },
+  ]);
 }
 
 init("clowder2");

From 9c50bb2a6bc54f5935a6938c9bcb52f91c7a61e8 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Fri, 21 Apr 2023 16:48:46 -0500
Subject: [PATCH 06/16] delete works but pytest doesn't work yet

---
 backend/app/models/users.py      |  9 ++++-
 backend/app/routers/users.py     | 62 ++++++++++++++++----------------
 backend/app/tests/test_apikey.py |  9 +++--
 3 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/backend/app/models/users.py b/backend/app/models/users.py
index ce4c211fe..7e5d677c0 100644
--- a/backend/app/models/users.py
+++ b/backend/app/models/users.py
@@ -42,7 +42,6 @@ class UserOut(UserBase):
 
 class UserAPIKey(MongoModel):
     """API keys can have a reference name (e.g. 'Uploader script')"""
-
     key: str
     name: str
     user: EmailStr
@@ -50,6 +49,14 @@ class UserAPIKey(MongoModel):
     expires: Optional[datetime] = None
 
 
+class UserAPIKeyOut(MongoModel):
+    # don't show the raw key
+    name: str
+    user: EmailStr
+    created: datetime = Field(default_factory=datetime.utcnow)
+    expires: Optional[datetime] = None
+
+
 class UserAndRole(BaseModel):
     user_id: str
     roleType: str
diff --git a/backend/app/routers/users.py b/backend/app/routers/users.py
index 0981749b9..50a9ed711 100644
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -10,38 +10,12 @@
 from app import dependencies
 from app.config import settings
 from app.keycloak_auth import get_current_username
-from app.models.users import UserOut, UserAPIKey
+from app.models.users import UserOut, UserAPIKey, UserAPIKeyOut
 
 router = APIRouter()
 
 
-@router.get("", response_model=List[UserOut])
-async def get_users(
-        db: MongoClient = Depends(dependencies.get_db), skip: int = 0, limit: int = 2
-):
-    users = []
-    for doc in await db["users"].find().skip(skip).limit(limit).to_list(length=limit):
-        users.append(UserOut(**doc))
-    return users
-
-
-@router.get("/{user_id}", response_model=UserOut)
-async def get_user(user_id: str, db: MongoClient = Depends(dependencies.get_db)):
-    if (user := await db["users"].find_one({"_id": ObjectId(user_id)})) is not None:
-        return UserOut.from_mongo(user)
-    raise HTTPException(status_code=404, detail=f"User {user_id} not found")
-
-
-@router.get("/username/{username}", response_model=UserOut)
-async def get_user_by_name(
-        username: str, db: MongoClient = Depends(dependencies.get_db)
-):
-    if (user := await db["users"].find_one({"email": username})) is not None:
-        return UserOut.from_mongo(user)
-    raise HTTPException(status_code=404, detail=f"User {username} not found")
-
-
-@router.get("/keys", response_model=List[UserAPIKey])
+@router.get("/keys", response_model=List[UserAPIKeyOut])
 async def generate_user_api_key(
         db: MongoClient = Depends(dependencies.get_db),
         current_user=Depends(get_current_username),
@@ -62,7 +36,7 @@ async def generate_user_api_key(
                     .limit(limit)
                     .to_list(length=limit)
     ):
-        apikeys.append(UserAPIKey.from_mongo(doc))
+        apikeys.append(UserAPIKeyOut.from_mongo(doc))
 
     return apikeys
 
@@ -92,7 +66,7 @@ async def generate_user_api_key(
     return hashed_key
 
 
-@router.delete("/keys/{key_id}", response_model=str)
+@router.delete("/keys/{key_id}", response_model=UserAPIKeyOut)
 async def generate_user_api_key(
         key_id: str,
         db: MongoClient = Depends(dependencies.get_db),
@@ -105,7 +79,7 @@ async def generate_user_api_key(
     """
     apikey_doc = (await db["user_keys"].find_one({"_id": ObjectId(key_id)}))
     if apikey_doc is not None:
-        apikey = UserAPIKey.from_mongo(apikey_doc)
+        apikey = UserAPIKeyOut.from_mongo(apikey_doc)
 
         # Only allow user to delete their own key
         if apikey.user == current_user:
@@ -115,3 +89,29 @@ async def generate_user_api_key(
             raise HTTPException(status_code=403, detail=f"API key {key_id} not allowed to be deleted.")
     else:
         raise HTTPException(status_code=404, detail=f"API key {key_id} not found.")
+
+
+@router.get("", response_model=List[UserOut])
+async def get_users(
+        db: MongoClient = Depends(dependencies.get_db), skip: int = 0, limit: int = 2
+):
+    users = []
+    for doc in await db["users"].find().skip(skip).limit(limit).to_list(length=limit):
+        users.append(UserOut(**doc))
+    return users
+
+
+@router.get("/{user_id}", response_model=UserOut)
+async def get_user(user_id: str, db: MongoClient = Depends(dependencies.get_db)):
+    if (user := await db["users"].find_one({"_id": ObjectId(user_id)})) is not None:
+        return UserOut.from_mongo(user)
+    raise HTTPException(status_code=404, detail=f"User {user_id} not found")
+
+
+@router.get("/username/{username}", response_model=UserOut)
+async def get_user_by_name(
+        username: str, db: MongoClient = Depends(dependencies.get_db)
+):
+    if (user := await db["users"].find_one({"email": username})) is not None:
+        return UserOut.from_mongo(user)
+    raise HTTPException(status_code=404, detail=f"User {username} not found")
diff --git a/backend/app/tests/test_apikey.py b/backend/app/tests/test_apikey.py
index 1eded6c90..2a8daf0b9 100644
--- a/backend/app/tests/test_apikey.py
+++ b/backend/app/tests/test_apikey.py
@@ -10,8 +10,13 @@ def test_create_apikey(client: TestClient, headers: dict):
 
 
 def test_list_apikeys(client: TestClient, headers: dict):
-    response = client.get(f"{settings.API_V2_STR}/users/keys/{key_id}", headers=headers)
+    response = client.get(f"{settings.API_V2_STR}/users/keys", headers=headers)
+    assert response.status_code == 200
 
 
 def test_delete_apikeys(client: TestClient, headers: dict):
-    pass
+    create_apikey(client, headers)
+    get_response = client.get(f"{settings.API_V2_STR}/users/keys", headers=headers)
+    key_id = get_response.json()[0].get("id")
+    delete_response = client.delete(f"{settings.API_V2_STR}/users/keys/{key_id}", headers=headers)
+    assert delete_response.status_code == 200

From f40796c9a88a72fc734f373b23bcf254cb80f893 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 10:28:42 -0500
Subject: [PATCH 07/16] pytest all works

---
 backend/app/routers/users.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/app/routers/users.py b/backend/app/routers/users.py
index 50a9ed711..0e9cfa38d 100644
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -66,7 +66,7 @@ async def generate_user_api_key(
     return hashed_key
 
 
-@router.delete("/keys/{key_id}", response_model=UserAPIKeyOut)
+@router.delete("/keys/{key_id}")
 async def generate_user_api_key(
         key_id: str,
         db: MongoClient = Depends(dependencies.get_db),
@@ -84,7 +84,7 @@ async def generate_user_api_key(
         # Only allow user to delete their own key
         if apikey.user == current_user:
             await db["user_keys"].delete_one({"_id": ObjectId(key_id)})
-            return {"deleted": apikey}
+            return {"deleted": key_id}
         else:
             raise HTTPException(status_code=403, detail=f"API key {key_id} not allowed to be deleted.")
     else:

From fcf11bdccbb2b7ba9c9857a6487a0c30767ba25e Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 10:41:09 -0500
Subject: [PATCH 08/16] codegen

---
 frontend/src/openapi/v2/index.ts              |  2 +-
 .../{UserAPIKey.ts => UserAPIKeyOut.ts}       |  6 +-
 .../src/openapi/v2/services/UsersService.ts   | 82 +++++++++----------
 3 files changed, 43 insertions(+), 47 deletions(-)
 rename frontend/src/openapi/v2/models/{UserAPIKey.ts => UserAPIKeyOut.ts} (59%)

diff --git a/frontend/src/openapi/v2/index.ts b/frontend/src/openapi/v2/index.ts
index 03c8c1c19..fb6759aae 100644
--- a/frontend/src/openapi/v2/index.ts
+++ b/frontend/src/openapi/v2/index.ts
@@ -52,7 +52,7 @@ export { RoleType } from './models/RoleType';
 export type { SearchCriteria } from './models/SearchCriteria';
 export type { SearchObject } from './models/SearchObject';
 export type { UserAndRole } from './models/UserAndRole';
-export type { UserAPIKey } from './models/UserAPIKey';
+export type { UserAPIKeyOut } from './models/UserAPIKeyOut';
 export type { UserIn } from './models/UserIn';
 export type { UserLogin } from './models/UserLogin';
 export type { UserOut } from './models/UserOut';
diff --git a/frontend/src/openapi/v2/models/UserAPIKey.ts b/frontend/src/openapi/v2/models/UserAPIKeyOut.ts
similarity index 59%
rename from frontend/src/openapi/v2/models/UserAPIKey.ts
rename to frontend/src/openapi/v2/models/UserAPIKeyOut.ts
index 80d974e24..cb7161ca7 100644
--- a/frontend/src/openapi/v2/models/UserAPIKey.ts
+++ b/frontend/src/openapi/v2/models/UserAPIKeyOut.ts
@@ -2,12 +2,8 @@
 /* tslint:disable */
 /* eslint-disable */
 
-/**
- * API keys can have a reference name (e.g. 'Uploader script')
- */
-export type UserAPIKey = {
+export type UserAPIKeyOut = {
     id?: string;
-    key: string;
     name: string;
     user: string;
     created?: string;
diff --git a/frontend/src/openapi/v2/services/UsersService.ts b/frontend/src/openapi/v2/services/UsersService.ts
index e7659503a..55daa8f25 100644
--- a/frontend/src/openapi/v2/services/UsersService.ts
+++ b/frontend/src/openapi/v2/services/UsersService.ts
@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { UserAPIKey } from '../models/UserAPIKey';
+import type { UserAPIKeyOut } from '../models/UserAPIKeyOut';
 import type { UserOut } from '../models/UserOut';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { request as __request } from '../core/request';
@@ -32,42 +32,6 @@ export class UsersService {
         });
     }
 
-    /**
-     * Get User
-     * @param userId
-     * @returns UserOut Successful Response
-     * @throws ApiError
-     */
-    public static getUserApiV2UsersUserIdGet(
-        userId: string,
-    ): CancelablePromise<UserOut> {
-        return __request({
-            method: 'GET',
-            path: `/api/v2/users/${userId}`,
-            errors: {
-                422: `Validation Error`,
-            },
-        });
-    }
-
-    /**
-     * Get User By Name
-     * @param username
-     * @returns UserOut Successful Response
-     * @throws ApiError
-     */
-    public static getUserByNameApiV2UsersUsernameUsernameGet(
-        username: string,
-    ): CancelablePromise<UserOut> {
-        return __request({
-            method: 'GET',
-            path: `/api/v2/users/username/${username}`,
-            errors: {
-                422: `Validation Error`,
-            },
-        });
-    }
-
     /**
      * Generate User Api Key
      * List all api keys that user has created
@@ -77,13 +41,13 @@ export class UsersService {
      * limit: number to limit per page
      * @param skip
      * @param limit
-     * @returns UserAPIKey Successful Response
+     * @returns UserAPIKeyOut Successful Response
      * @throws ApiError
      */
     public static generateUserApiKeyApiV2UsersKeysGet(
         skip?: number,
         limit: number = 10,
-    ): CancelablePromise<Array<UserAPIKey>> {
+    ): CancelablePromise<Array<UserAPIKeyOut>> {
         return __request({
             method: 'GET',
             path: `/api/v2/users/keys`,
@@ -133,12 +97,12 @@ export class UsersService {
      * Arguments:
      * key_id: id of the apikey
      * @param keyId
-     * @returns string Successful Response
+     * @returns any Successful Response
      * @throws ApiError
      */
     public static generateUserApiKeyApiV2UsersKeysKeyIdDelete(
         keyId: string,
-    ): CancelablePromise<string> {
+    ): CancelablePromise<any> {
         return __request({
             method: 'DELETE',
             path: `/api/v2/users/keys/${keyId}`,
@@ -148,4 +112,40 @@ export class UsersService {
         });
     }
 
+    /**
+     * Get User
+     * @param userId
+     * @returns UserOut Successful Response
+     * @throws ApiError
+     */
+    public static getUserApiV2UsersUserIdGet(
+        userId: string,
+    ): CancelablePromise<UserOut> {
+        return __request({
+            method: 'GET',
+            path: `/api/v2/users/${userId}`,
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
+
+    /**
+     * Get User By Name
+     * @param username
+     * @returns UserOut Successful Response
+     * @throws ApiError
+     */
+    public static getUserByNameApiV2UsersUsernameUsernameGet(
+        username: string,
+    ): CancelablePromise<UserOut> {
+        return __request({
+            method: 'GET',
+            path: `/api/v2/users/username/${username}`,
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
+
 }
\ No newline at end of file

From 04be749c78a8fba7ba97f59f0308c7cc9981a775 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 11:21:16 -0500
Subject: [PATCH 09/16] redux

---
 backend/app/routers/users.py                  |   4 +-
 frontend/src/actions/user.js                  |  36 +++
 frontend/src/components/ApiKeys/ApiKey.tsx    | 222 ++++++++++++++++++
 .../CreateApiKeyModal.tsx}                    |   2 +-
 frontend/src/components/Layout.tsx            |  14 +-
 .../src/openapi/v2/services/UsersService.ts   |   4 +-
 frontend/src/routes.tsx                       | 211 ++++++++++++-----
 7 files changed, 413 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/components/ApiKeys/ApiKey.tsx
 rename frontend/src/components/{users/ApiKeyModal.tsx => ApiKeys/CreateApiKeyModal.tsx} (98%)

diff --git a/backend/app/routers/users.py b/backend/app/routers/users.py
index 0e9cfa38d..a274e1a90 100644
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -66,7 +66,7 @@ async def generate_user_api_key(
     return hashed_key
 
 
-@router.delete("/keys/{key_id}")
+@router.delete("/keys/{key_id}", response_model=UserAPIKeyOut)
 async def generate_user_api_key(
         key_id: str,
         db: MongoClient = Depends(dependencies.get_db),
@@ -84,7 +84,7 @@ async def generate_user_api_key(
         # Only allow user to delete their own key
         if apikey.user == current_user:
             await db["user_keys"].delete_one({"_id": ObjectId(key_id)})
-            return {"deleted": key_id}
+            return apikey
         else:
             raise HTTPException(status_code=403, detail=f"API key {key_id} not allowed to be deleted.")
     else:
diff --git a/frontend/src/actions/user.js b/frontend/src/actions/user.js
index 418d480d6..2fafd33ff 100644
--- a/frontend/src/actions/user.js
+++ b/frontend/src/actions/user.js
@@ -131,6 +131,24 @@ export function fetchAllUsers(skip = 0, limit = 101) {
 	};
 }
 
+export const LIST_API_KEYS = "LIST_API_KEYS";
+
+export function listApiKeys(skip = 0, limit = 10) {
+	return (dispatch) => {
+		return V2.UsersService.generateUserApiKeyApiV2UsersKeysGet(skip, limit)
+			.then((json) => {
+				dispatch({
+					type: LIST_API_KEYS,
+					apiKeys: json,
+					receivedAt: Date.now(),
+				});
+			})
+			.catch((reason) => {
+				dispatch(listApiKeys(skip, limit));
+			});
+	};
+}
+
 export const GENERATE_API_KEY = "GENERATE_API_KEY";
 
 export function generateApiKey(name = "", minutes = 30) {
@@ -149,6 +167,24 @@ export function generateApiKey(name = "", minutes = 30) {
 	};
 }
 
+export const DELETE_API_KEY = "DELETE_API_KEY";
+
+export function deleteApiKey(keyId) {
+	return (dispatch) => {
+		return V2.UsersService.generateUserApiKeyApiV2UsersKeysKeyIdDelete(keyId)
+			.then((json) => {
+				dispatch({
+					type: DELETE_API_KEY,
+					apiKey: json,
+					receivedAt: Date.now(),
+				});
+			})
+			.catch((reason) => {
+				dispatch(deleteApiKey(keyId));
+			});
+	};
+}
+
 export const RESET_API_KEY = "RESET_API_KEY";
 
 export function resetApiKey() {
diff --git a/frontend/src/components/ApiKeys/ApiKey.tsx b/frontend/src/components/ApiKeys/ApiKey.tsx
new file mode 100644
index 000000000..3cd0142cf
--- /dev/null
+++ b/frontend/src/components/ApiKeys/ApiKey.tsx
@@ -0,0 +1,222 @@
+import React, { useEffect, useState } from "react";
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	Grid,
+	IconButton,
+	InputBase,
+} from "@mui/material";
+import { RootState } from "../../types/data";
+import { useDispatch, useSelector } from "react-redux";
+import {
+	fetchGroups,
+	searchGroups as searchGroupsAction,
+} from "../../actions/group";
+import { ArrowBack, ArrowForward, SearchOutlined } from "@material-ui/icons";
+import { Link } from "react-router-dom";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import TableBody from "@mui/material/TableBody";
+import TableContainer from "@mui/material/TableContainer";
+import GroupsIcon from "@mui/icons-material/Groups";
+import { theme } from "../../theme";
+import Layout from "../Layout";
+import { MainBreadcrumbs } from "../navigation/BreadCrumb";
+
+export function ApiKeys() {
+	// Redux connect equivalent
+	const dispatch = useDispatch();
+	const listGroups = (skip: number | undefined, limit: number | undefined) =>
+		dispatch(fetchGroups(skip, limit));
+	const searchGroups = (
+		searchTerm: string,
+		skip: number | undefined,
+		limit: number | undefined
+	) => dispatch(searchGroupsAction(searchTerm, skip, limit));
+
+	const groups = useSelector((state: RootState) => state.group.groups);
+
+	// TODO add option to determine limit number; default show 5 groups each time
+	const [currPageNum, setCurrPageNum] = useState<number>(0);
+	const [limit] = useState<number>(20);
+	const [skip, setSkip] = useState<number | undefined>(0);
+	const [prevDisabled, setPrevDisabled] = useState<boolean>(true);
+	const [nextDisabled, setNextDisabled] = useState<boolean>(false);
+	const [searchTerm, setSearchTerm] = useState<string>("");
+
+	// for breadcrumb
+	const paths = [
+		{
+			name: "Explore",
+			url: "/",
+		},
+		{
+			name: "Groups",
+			url: "/groups",
+		},
+	];
+
+	// component did mount
+	useEffect(() => {
+		listGroups(skip, limit);
+	}, []);
+
+	useEffect(() => {
+		// disable flipping if reaches the last page
+		if (groups.length < limit) setNextDisabled(true);
+		else setNextDisabled(false);
+	}, [groups]);
+
+	// search
+	useEffect(() => {
+		if (searchTerm !== "") searchGroups(searchTerm, skip, limit);
+		else listGroups(skip, limit);
+	}, [searchTerm]);
+
+	useEffect(() => {
+		if (skip !== null && skip !== undefined) {
+			listGroups(skip, limit);
+			if (skip === 0) setPrevDisabled(true);
+			else setPrevDisabled(false);
+		}
+	}, [skip]);
+
+	const previous = () => {
+		if (currPageNum - 1 >= 0) {
+			setSkip((currPageNum - 1) * limit);
+			setCurrPageNum(currPageNum - 1);
+		}
+	};
+	const next = () => {
+		if (groups.length === limit) {
+			setSkip((currPageNum + 1) * limit);
+			setCurrPageNum(currPageNum + 1);
+		}
+	};
+
+	return (
+		<Layout>
+			{/*breadcrumb*/}
+			<Grid container>
+				<Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
+					<MainBreadcrumbs paths={paths} />
+				</Grid>
+			</Grid>
+			<br />
+			<Grid container>
+				<Grid item xs={3}>
+					<Box
+						component="form"
+						sx={{
+							p: "2px 4px",
+							display: "flex",
+							alignItems: "left",
+							backgroundColor: theme.palette.primary.contrastText,
+							width: "80%",
+						}}
+					>
+						<InputBase
+							sx={{ ml: 1, flex: 1 }}
+							placeholder="keyword for group"
+							inputProps={{
+								"aria-label": "Type in keyword to search for group",
+							}}
+							onChange={(e) => {
+								setSearchTerm(e.target.value);
+							}}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") {
+									e.preventDefault();
+									searchGroups(searchTerm, skip, limit);
+								}
+							}}
+							value={searchTerm}
+						/>
+						<IconButton
+							type="button"
+							sx={{ p: "10px" }}
+							aria-label="search"
+							onClick={() => {
+								searchGroups(searchTerm, skip, limit);
+							}}
+						>
+							<SearchOutlined />
+						</IconButton>
+					</Box>
+				</Grid>
+				<Grid item xs={9}>
+					<TableContainer component={Paper}>
+						<Table sx={{ minWidth: 650 }} aria-label="simple table">
+							<TableHead>
+								<TableRow>
+									<TableCell>Group Name</TableCell>
+									<TableCell align="right">Description</TableCell>
+									<TableCell align="right">
+										<GroupsIcon />
+									</TableCell>
+								</TableRow>
+							</TableHead>
+							<TableBody>
+								{groups.map((group) => {
+									return (
+										<TableRow
+											key={group.id}
+											sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+										>
+											<TableCell component="th" scope="row" key={group.id}>
+												<Button component={Link} to={`/groups/${group.id}`}>
+													{group.name}
+												</Button>
+											</TableCell>
+											<TableCell
+												component="th"
+												scope="row"
+												key={group.id}
+												align="right"
+											>
+												{group.description}
+											</TableCell>
+											<TableCell
+												component="th"
+												scope="row"
+												key={group.id}
+												align="right"
+											>
+												{group.users !== undefined ? group.users.length : 0}
+											</TableCell>
+										</TableRow>
+									);
+								})}
+							</TableBody>
+						</Table>
+						<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
+							<ButtonGroup
+								variant="contained"
+								aria-label="previous next buttons"
+							>
+								<Button
+									aria-label="previous"
+									onClick={previous}
+									disabled={prevDisabled}
+								>
+									<ArrowBack /> Prev
+								</Button>
+								<Button
+									aria-label="next"
+									onClick={next}
+									disabled={nextDisabled}
+								>
+									Next <ArrowForward />
+								</Button>
+							</ButtonGroup>
+						</Box>
+					</TableContainer>
+				</Grid>
+			</Grid>
+		</Layout>
+	);
+}
diff --git a/frontend/src/components/users/ApiKeyModal.tsx b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
similarity index 98%
rename from frontend/src/components/users/ApiKeyModal.tsx
rename to frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
index f11748128..9d5171daf 100644
--- a/frontend/src/components/users/ApiKeyModal.tsx
+++ b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
@@ -27,7 +27,7 @@ type ApiKeyModalProps = {
 	setApiKeyModalOpen: any;
 };
 
-export const ApiKeyModal = (props: ApiKeyModalProps) => {
+export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 	const { apiKeyModalOpen, setApiKeyModalOpen } = props;
 
 	const dispatch = useDispatch();
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index d3175c92c..0246866ff 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -31,7 +31,6 @@ import PersonIcon from "@mui/icons-material/Person";
 import { getCurrEmail } from "../utils/common";
 import VpnKeyIcon from "@mui/icons-material/VpnKey";
 import LogoutIcon from "@mui/icons-material/Logout";
-import { ApiKeyModal } from "./users/ApiKeyModal";
 
 const cookies = new Cookies();
 
@@ -108,7 +107,6 @@ export default function PersistentDrawerLeft(props) {
 	const [open, setOpen] = React.useState(false);
 	const [embeddedSearchHidden, setEmbeddedSearchHidden] = React.useState(false);
 	const [anchorEl, setAnchorEl] = React.useState(null);
-	const [apiKeyModalOpen, setApiKeyModalOpen] = React.useState(false);
 	const isMenuOpen = Boolean(anchorEl);
 
 	const handleDrawerOpen = () => {
@@ -224,11 +222,7 @@ export default function PersistentDrawerLeft(props) {
 					open={isMenuOpen}
 					onClose={handleProfileMenuClose}
 				>
-					<MenuItem
-						onClick={() => {
-							setApiKeyModalOpen(true);
-						}}
-					>
+					<MenuItem component={RouterLink} to="/apikeys">
 						<ListItemIcon>
 							<VpnKeyIcon fontSize="small" />
 						</ListItemIcon>
@@ -339,12 +333,6 @@ export default function PersistentDrawerLeft(props) {
 			<Main open={open}>
 				<DrawerHeader />
 				{children}
-
-				{/*modals*/}
-				<ApiKeyModal
-					apiKeyModalOpen={apiKeyModalOpen}
-					setApiKeyModalOpen={setApiKeyModalOpen}
-				/>
 			</Main>
 		</Box>
 		// </ReactiveBase>
diff --git a/frontend/src/openapi/v2/services/UsersService.ts b/frontend/src/openapi/v2/services/UsersService.ts
index 55daa8f25..a4c3b4f8c 100644
--- a/frontend/src/openapi/v2/services/UsersService.ts
+++ b/frontend/src/openapi/v2/services/UsersService.ts
@@ -97,12 +97,12 @@ export class UsersService {
      * Arguments:
      * key_id: id of the apikey
      * @param keyId
-     * @returns any Successful Response
+     * @returns UserAPIKeyOut Successful Response
      * @throws ApiError
      */
     public static generateUserApiKeyApiV2UsersKeysKeyIdDelete(
         keyId: string,
-    ): CancelablePromise<any> {
+    ): CancelablePromise<UserAPIKeyOut> {
         return __request({
             method: 'DELETE',
             path: `/api/v2/users/keys/${keyId}`,
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index cdec7ed77..f0bef4435 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -1,31 +1,39 @@
-import React, {useEffect} from "react";
-import {Route, Navigate, Routes, BrowserRouter, useNavigate, useParams} from "react-router-dom";
+import React, { useEffect } from "react";
+import {
+	BrowserRouter,
+	Navigate,
+	Route,
+	Routes,
+	useNavigate,
+	useParams,
+} from "react-router-dom";
 
-import {CreateMetadataDefinitionPage} from "./components/metadata/CreateMetadataDefinition";
-import {Dataset as DatasetComponent} from "./components/datasets/Dataset";
-import {File as FileComponent} from "./components/files/File";
-import {CreateDataset} from "./components/datasets/CreateDataset";
-import {Groups as GroupListComponent} from "./components/groups/Groups"
-import {Group as GroupComponent} from "./components/groups/Group"
+import { CreateMetadataDefinitionPage } from "./components/metadata/CreateMetadataDefinition";
+import { Dataset as DatasetComponent } from "./components/datasets/Dataset";
+import { File as FileComponent } from "./components/files/File";
+import { CreateDataset } from "./components/datasets/CreateDataset";
+import { Groups as GroupListComponent } from "./components/groups/Groups";
+import { Group as GroupComponent } from "./components/groups/Group";
 
-import {RedirectRegister as RedirectRegisterComponent} from "./components/auth/RedirectRegister";
-import {Auth as AuthComponent} from "./components/auth/Auth";
-import {RedirectLogin as RedirectLoginComponent} from "./components/auth/RedirectLogin";
-import {RedirectLogout as RedirectLogoutComponent} from "./components/auth/RedirectLogout";
-import {Search} from "./components/search/Search";
-import {isAuthorized} from "./utils/common";
-import {useDispatch, useSelector} from "react-redux";
-import {RootState} from "./types/data";
-import {resetLogout} from "./actions/common";
-import {Explore} from "./components/Explore";
-import {ExtractionHistory} from "./components/listeners/ExtractionHistory";
-import {fetchDatasetRole, fetchFileRole} from "./actions/authorization";
+import { RedirectRegister as RedirectRegisterComponent } from "./components/auth/RedirectRegister";
+import { Auth as AuthComponent } from "./components/auth/Auth";
+import { RedirectLogin as RedirectLoginComponent } from "./components/auth/RedirectLogin";
+import { RedirectLogout as RedirectLogoutComponent } from "./components/auth/RedirectLogout";
+import { Search } from "./components/search/Search";
+import { isAuthorized } from "./utils/common";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "./types/data";
+import { resetLogout } from "./actions/common";
+import { Explore } from "./components/Explore";
+import { ExtractionHistory } from "./components/listeners/ExtractionHistory";
+import { fetchDatasetRole, fetchFileRole } from "./actions/authorization";
 import { PageNotFound } from "./components/errors/PageNotFound";
-import {Forbidden} from "./components/errors/Forbidden";
+import { Forbidden } from "./components/errors/Forbidden";
+import { ApiKeys } from "./components/ApiKeys/ApiKey";
 
 // https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5
 const PrivateRoute = (props): JSX.Element => {
-	const {children} = props;
+	const { children } = props;
 
 	const history = useNavigate();
 
@@ -34,10 +42,12 @@ const PrivateRoute = (props): JSX.Element => {
 	const reason = useSelector((state: RootState) => state.error.reason);
 	const dismissLogout = () => dispatch(resetLogout());
 
-	const listDatasetRole = (datasetId: string | undefined) => dispatch(fetchDatasetRole(datasetId));
-	const listFileRole = (fileId: string | undefined) => dispatch(fetchFileRole(fileId));
-	const {datasetId} = useParams<{ datasetId?: string }>();
-	const {fileId} = useParams<{ fileId?: string }>();
+	const listDatasetRole = (datasetId: string | undefined) =>
+		dispatch(fetchDatasetRole(datasetId));
+	const listFileRole = (fileId: string | undefined) =>
+		dispatch(fetchFileRole(fileId));
+	const { datasetId } = useParams<{ datasetId?: string }>();
+	const { fileId } = useParams<{ fileId?: string }>();
 
 	// log user out if token expired/unauthorized
 	useEffect(() => {
@@ -50,53 +60,130 @@ const PrivateRoute = (props): JSX.Element => {
 
 	// not found or unauthorized
 	useEffect(() => {
-			if (reason == "Forbidden"){
-        		history("/forbidden");
-			}
-        	else if (reason == "Not Found") {
-				history("/not-found");
-        	}
+		if (reason == "Forbidden") {
+			history("/forbidden");
+		} else if (reason == "Not Found") {
+			history("/not-found");
+		}
 	}, [reason]);
 
 	// get roles if authorized
-	useEffect(() =>{
+	useEffect(() => {
 		if (datasetId && reason === "") listDatasetRole(datasetId);
-	}, [datasetId, reason])
+	}, [datasetId, reason]);
 
-	useEffect(() =>{
+	useEffect(() => {
 		if (fileId && reason === "") listFileRole(fileId);
-	}, [fileId, reason])
+	}, [fileId, reason]);
 
-	return (
-		<>
-			{
-				isAuthorized() ?
-					children : <Navigate to="/auth/login"/>
-			}
-		</>
-	)
-}
+	return <>{isAuthorized() ? children : <Navigate to="/auth/login" />}</>;
+};
 
 export const AppRoutes = (): JSX.Element => {
 	return (
 		<BrowserRouter>
 			<Routes>
-				<Route path="/" element={<PrivateRoute><Explore/></PrivateRoute>} />
-                <Route path="/new-metadata-definition" element={<PrivateRoute><CreateMetadataDefinitionPage/></PrivateRoute>} />
-				<Route path="/create-dataset/" element={<PrivateRoute><CreateDataset/></PrivateRoute>} />
-				<Route path="/datasets/:datasetId" element={<PrivateRoute><DatasetComponent/></PrivateRoute>} />
-				<Route path="/files/:fileId" element={<PrivateRoute><FileComponent/></PrivateRoute>} />
-				<Route path="/auth/register" element={<RedirectRegisterComponent/>} />
-				<Route path="/auth/login" element={<RedirectLoginComponent/>} />
-				<Route path="/auth/logout" element={<RedirectLogoutComponent/>} />
-				<Route path="/groups" element={<PrivateRoute><GroupListComponent/></PrivateRoute>} />
-				<Route path="/groups/:groupId" element={<PrivateRoute><GroupComponent/></PrivateRoute>} />
-				<Route path="/auth" element={<AuthComponent/>} />
-				<Route path="/search" element={<PrivateRoute><Search/></PrivateRoute>} />
-				<Route path="/extractions" element={<PrivateRoute><ExtractionHistory/></PrivateRoute>} />
-				<Route path="/forbidden" element={<PrivateRoute><Forbidden/></PrivateRoute>} />
-				<Route path="*" element={<PrivateRoute><PageNotFound/></PrivateRoute>} />
+				<Route
+					path="/"
+					element={
+						<PrivateRoute>
+							<Explore />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/apikeys"
+					element={
+						<PrivateRoute>
+							<ApiKeys />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/new-metadata-definition"
+					element={
+						<PrivateRoute>
+							<CreateMetadataDefinitionPage />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/create-dataset/"
+					element={
+						<PrivateRoute>
+							<CreateDataset />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/datasets/:datasetId"
+					element={
+						<PrivateRoute>
+							<DatasetComponent />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/files/:fileId"
+					element={
+						<PrivateRoute>
+							<FileComponent />
+						</PrivateRoute>
+					}
+				/>
+				<Route path="/auth/register" element={<RedirectRegisterComponent />} />
+				<Route path="/auth/login" element={<RedirectLoginComponent />} />
+				<Route path="/auth/logout" element={<RedirectLogoutComponent />} />
+				<Route
+					path="/groups"
+					element={
+						<PrivateRoute>
+							<GroupListComponent />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/groups/:groupId"
+					element={
+						<PrivateRoute>
+							<GroupComponent />
+						</PrivateRoute>
+					}
+				/>
+				<Route path="/auth" element={<AuthComponent />} />
+				<Route
+					path="/search"
+					element={
+						<PrivateRoute>
+							<Search />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/extractions"
+					element={
+						<PrivateRoute>
+							<ExtractionHistory />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="/forbidden"
+					element={
+						<PrivateRoute>
+							<Forbidden />
+						</PrivateRoute>
+					}
+				/>
+				<Route
+					path="*"
+					element={
+						<PrivateRoute>
+							<PageNotFound />
+						</PrivateRoute>
+					}
+				/>
 			</Routes>
 		</BrowserRouter>
-	)
-}
+	);
+};

From 5d4aa16494b30af9265484aa2eb903d66c095625 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 11:38:55 -0500
Subject: [PATCH 10/16] reducer and types

---
 frontend/src/actions/user.js                    |  2 +-
 .../components/ApiKeys/CreateApiKeyModal.tsx    |  6 +++---
 frontend/src/reducers/user.ts                   | 17 ++++++++++++++---
 frontend/src/types/action.ts                    | 15 ++++++++++++++-
 frontend/src/types/data.ts                      |  4 +++-
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/frontend/src/actions/user.js b/frontend/src/actions/user.js
index 2fafd33ff..c403b86c8 100644
--- a/frontend/src/actions/user.js
+++ b/frontend/src/actions/user.js
@@ -157,7 +157,7 @@ export function generateApiKey(name = "", minutes = 30) {
 			.then((json) => {
 				dispatch({
 					type: GENERATE_API_KEY,
-					apiKey: json,
+					hashedKey: json,
 					receivedAt: Date.now(),
 				});
 			})
diff --git a/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
index 9d5171daf..0efd2911f 100644
--- a/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
+++ b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
@@ -34,7 +34,7 @@ export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 	const generateApiKey = (name: string, minutes: number) =>
 		dispatch(generateApiKeyAction(name, minutes));
 	const resetApiKey = () => dispatch(resetApiKeyAction());
-	const apiKey = useSelector((state: RootState) => state.user.apiKey);
+	const hashedKey = useSelector((state: RootState) => state.user.hashedKey);
 
 	const [name, setName] = useState("");
 	const [minutes, setMinutes] = useState(30);
@@ -55,7 +55,7 @@ export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 	return (
 		<Dialog open={apiKeyModalOpen} onClose={handleClose} fullWidth={true}>
 			<DialogTitle>Your API Key</DialogTitle>
-			{apiKey ? (
+			{hashedKey ? (
 				<>
 					<DialogContent>
 						<ClowderFootnote>
@@ -63,7 +63,7 @@ export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 							this again.
 						</ClowderFootnote>
 						<ClowderMetadataTextField
-							value={apiKey}
+							value={hashedKey}
 							disabled={true}
 							fullWidth
 						/>
diff --git a/frontend/src/reducers/user.ts b/frontend/src/reducers/user.ts
index a0f2a76c0..b06571f55 100644
--- a/frontend/src/reducers/user.ts
+++ b/frontend/src/reducers/user.ts
@@ -1,5 +1,7 @@
 import {
+	DELETE_API_KEY,
 	GENERATE_API_KEY,
+	LIST_API_KEYS,
 	LOGIN_ERROR,
 	REGISTER_ERROR,
 	REGISTER_USER,
@@ -14,7 +16,8 @@ const defaultState: UserState = {
 	loginError: false,
 	registerSucceeded: false,
 	errorMsg: "",
-	apiKey: "",
+	hashedKey: "",
+	apikeys: [],
 };
 
 const user = (state = defaultState, action: DataAction) => {
@@ -37,10 +40,18 @@ const user = (state = defaultState, action: DataAction) => {
 				registerSucceeded: false,
 				errorMsg: action.errorMsg,
 			});
+		case LIST_API_KEYS:
+			return Object.assign({}, state, { apiKeys: action.apikeys });
+		case DELETE_API_KEY:
+			return Object.assign({}, state, {
+				apiKeys: state.apikeys.filter(
+					(apikey) => apikey.id !== action.apikey.id
+				),
+			});
 		case GENERATE_API_KEY:
-			return Object.assign({}, state, { apiKey: action.apiKey });
+			return Object.assign({}, state, { hashedKey: action.hashedKey });
 		case RESET_API_KEY:
-			return Object.assign({}, state, { apiKey: "" });
+			return Object.assign({}, state, { hashedKey: "" });
 		default:
 			return state;
 	}
diff --git a/frontend/src/types/action.ts b/frontend/src/types/action.ts
index 0505fc6ed..1920f677b 100644
--- a/frontend/src/types/action.ts
+++ b/frontend/src/types/action.ts
@@ -15,6 +15,7 @@ import {
 	MetadataOut as Metadata,
 	RoleType,
 	UserAndRole,
+	UserAPIKeyOut,
 	UserOut,
 } from "../openapi/v2";
 import { LIST_USERS } from "../actions/user";
@@ -114,9 +115,19 @@ interface REGISTER_USER {
 	type: "REGISTER_USER";
 }
 
+interface LIST_API_KEYS {
+	type: "LIST_API_KEYS";
+	apikeys: UserAPIKeyOut[];
+}
+
+interface DELETE_API_KEY {
+	type: "DELETE_API_KEY";
+	apikey: UserAPIKeyOut;
+}
+
 interface GENERATE_API_KEY {
 	type: "GENERATE_API_KEY";
-	apiKey: string;
+	hashedKey: string;
 }
 
 interface RESET_API_KEY {
@@ -350,6 +361,8 @@ export type DataAction =
 	| LOGOUT
 	| REGISTER_ERROR
 	| REGISTER_USER
+	| LIST_API_KEYS
+	| DELETE_API_KEY
 	| GENERATE_API_KEY
 	| RESET_API_KEY
 	| CREATE_DATASET
diff --git a/frontend/src/types/data.ts b/frontend/src/types/data.ts
index 6ccecb314..282beeeb9 100644
--- a/frontend/src/types/data.ts
+++ b/frontend/src/types/data.ts
@@ -10,6 +10,7 @@ import {
 	MetadataOut as Metadata,
 	RoleType,
 	UserAndRole,
+	UserAPIKeyOut,
 	UserOut,
 } from "../openapi/v2";
 
@@ -185,7 +186,8 @@ export interface UserState {
 	loginError: boolean;
 	registerSucceeded: boolean;
 	errorMsg: string;
-	apiKey: string;
+	hashedKey: string;
+	apikeys: UserAPIKeyOut[];
 }
 
 export interface ErrorState {

From ea2d6b50df44bcf25ad7ddb41b763aa0c192da20 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 13:46:39 -0500
Subject: [PATCH 11/16] write the table

---
 frontend/src/components/ApiKeys/ApiKey.tsx | 239 ++++++++-------------
 1 file changed, 95 insertions(+), 144 deletions(-)

diff --git a/frontend/src/components/ApiKeys/ApiKey.tsx b/frontend/src/components/ApiKeys/ApiKey.tsx
index 3cd0142cf..edc603bf1 100644
--- a/frontend/src/components/ApiKeys/ApiKey.tsx
+++ b/frontend/src/components/ApiKeys/ApiKey.tsx
@@ -1,19 +1,8 @@
 import React, { useEffect, useState } from "react";
-import {
-	Box,
-	Button,
-	ButtonGroup,
-	Grid,
-	IconButton,
-	InputBase,
-} from "@mui/material";
+import { Box, Button, ButtonGroup, Grid, IconButton } from "@mui/material";
 import { RootState } from "../../types/data";
 import { useDispatch, useSelector } from "react-redux";
-import {
-	fetchGroups,
-	searchGroups as searchGroupsAction,
-} from "../../actions/group";
-import { ArrowBack, ArrowForward, SearchOutlined } from "@material-ui/icons";
+import { ArrowBack, ArrowForward } from "@material-ui/icons";
 import { Link } from "react-router-dom";
 import Paper from "@mui/material/Paper";
 import Table from "@mui/material/Table";
@@ -22,23 +11,21 @@ import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
-import GroupsIcon from "@mui/icons-material/Groups";
-import { theme } from "../../theme";
 import Layout from "../Layout";
 import { MainBreadcrumbs } from "../navigation/BreadCrumb";
 
+import { listApiKeys as listApiKeysAction } from "../../actions/user";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { theme } from "../../theme";
+
 export function ApiKeys() {
 	// Redux connect equivalent
 	const dispatch = useDispatch();
-	const listGroups = (skip: number | undefined, limit: number | undefined) =>
-		dispatch(fetchGroups(skip, limit));
-	const searchGroups = (
-		searchTerm: string,
-		skip: number | undefined,
-		limit: number | undefined
-	) => dispatch(searchGroupsAction(searchTerm, skip, limit));
+	const listApiKeys = (skip: number | undefined, limit: number | undefined) =>
+		dispatch(listApiKeysAction(skip, limit));
+	// const deleteApiKey = (keyId: string) => dispatch(deleteApiKeyAction(keyId));
 
-	const groups = useSelector((state: RootState) => state.group.groups);
+	const apikeys = useSelector((state: RootState) => state.user.apikeys);
 
 	// TODO add option to determine limit number; default show 5 groups each time
 	const [currPageNum, setCurrPageNum] = useState<number>(0);
@@ -46,7 +33,8 @@ export function ApiKeys() {
 	const [skip, setSkip] = useState<number | undefined>(0);
 	const [prevDisabled, setPrevDisabled] = useState<boolean>(true);
 	const [nextDisabled, setNextDisabled] = useState<boolean>(false);
-	const [searchTerm, setSearchTerm] = useState<string>("");
+	const [selectedApikey, setSelectApikey] = useState("");
+	const [deleteApikeyConfirmOpen, setDeleteApikeyConfirmOpen] = useState(false);
 
 	// for breadcrumb
 	const paths = [
@@ -54,37 +42,32 @@ export function ApiKeys() {
 			name: "Explore",
 			url: "/",
 		},
-		{
-			name: "Groups",
-			url: "/groups",
-		},
 	];
 
 	// component did mount
 	useEffect(() => {
-		listGroups(skip, limit);
+		listApiKeys(skip, limit);
 	}, []);
 
 	useEffect(() => {
 		// disable flipping if reaches the last page
-		if (groups.length < limit) setNextDisabled(true);
+		if (apikeys.length < limit) setNextDisabled(true);
 		else setNextDisabled(false);
-	}, [groups]);
-
-	// search
-	useEffect(() => {
-		if (searchTerm !== "") searchGroups(searchTerm, skip, limit);
-		else listGroups(skip, limit);
-	}, [searchTerm]);
+	}, [apikeys]);
 
 	useEffect(() => {
 		if (skip !== null && skip !== undefined) {
-			listGroups(skip, limit);
+			listApiKeys(skip, limit);
 			if (skip === 0) setPrevDisabled(true);
 			else setPrevDisabled(false);
 		}
 	}, [skip]);
 
+	// delete
+	// const handleDelete = () => {
+	// 	deleteApiKey();
+	// };
+
 	const previous = () => {
 		if (currPageNum - 1 >= 0) {
 			setSkip((currPageNum - 1) * limit);
@@ -92,7 +75,7 @@ export function ApiKeys() {
 		}
 	};
 	const next = () => {
-		if (groups.length === limit) {
+		if (apikeys.length === limit) {
 			setSkip((currPageNum + 1) * limit);
 			setCurrPageNum(currPageNum + 1);
 		}
@@ -108,114 +91,82 @@ export function ApiKeys() {
 			</Grid>
 			<br />
 			<Grid container>
-				<Grid item xs={3}>
-					<Box
-						component="form"
-						sx={{
-							p: "2px 4px",
-							display: "flex",
-							alignItems: "left",
-							backgroundColor: theme.palette.primary.contrastText,
-							width: "80%",
-						}}
-					>
-						<InputBase
-							sx={{ ml: 1, flex: 1 }}
-							placeholder="keyword for group"
-							inputProps={{
-								"aria-label": "Type in keyword to search for group",
-							}}
-							onChange={(e) => {
-								setSearchTerm(e.target.value);
-							}}
-							onKeyDown={(e) => {
-								if (e.key === "Enter") {
-									e.preventDefault();
-									searchGroups(searchTerm, skip, limit);
-								}
-							}}
-							value={searchTerm}
-						/>
-						<IconButton
-							type="button"
-							sx={{ p: "10px" }}
-							aria-label="search"
-							onClick={() => {
-								searchGroups(searchTerm, skip, limit);
-							}}
-						>
-							<SearchOutlined />
-						</IconButton>
-					</Box>
-				</Grid>
-				<Grid item xs={9}>
-					<TableContainer component={Paper}>
-						<Table sx={{ minWidth: 650 }} aria-label="simple table">
-							<TableHead>
-								<TableRow>
-									<TableCell>Group Name</TableCell>
-									<TableCell align="right">Description</TableCell>
-									<TableCell align="right">
-										<GroupsIcon />
-									</TableCell>
-								</TableRow>
-							</TableHead>
-							<TableBody>
-								{groups.map((group) => {
-									return (
-										<TableRow
-											key={group.id}
-											sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+				<TableContainer component={Paper}>
+					<Table sx={{ minWidth: 650 }} aria-label="simple table">
+						<TableHead>
+							<TableRow>
+								<TableCell>API Key Name</TableCell>
+								<TableCell align="right">Created at</TableCell>
+								<TableCell align="right">Expired at</TableCell>
+								<TableCell align="right"></TableCell>
+							</TableRow>
+						</TableHead>
+						<TableBody>
+							{apikeys.map((apikey) => {
+								return (
+									<TableRow
+										key={apikey.id}
+										sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+									>
+										<TableCell component="th" scope="row" key={apikey.id}>
+											<Button component={Link} to={`/groups/${apikey.id}`}>
+												{apikey.name}
+											</Button>
+										</TableCell>
+										<TableCell
+											component="th"
+											scope="row"
+											key={apikey.id}
+											align="right"
 										>
-											<TableCell component="th" scope="row" key={group.id}>
-												<Button component={Link} to={`/groups/${group.id}`}>
-													{group.name}
-												</Button>
-											</TableCell>
-											<TableCell
-												component="th"
-												scope="row"
-												key={group.id}
-												align="right"
-											>
-												{group.description}
-											</TableCell>
-											<TableCell
-												component="th"
-												scope="row"
-												key={group.id}
-												align="right"
+											{apikey.created}
+										</TableCell>
+										<TableCell
+											component="th"
+											scope="row"
+											key={apikey.id}
+											align="right"
+										>
+											{apikey.expires}
+										</TableCell>
+										<TableCell align="right">
+											<IconButton
+												type="button"
+												sx={{ p: "10px" }}
+												aria-label="delete"
+												onClick={() => {
+													setSelectApikey(apikey.id);
+													setDeleteApikeyConfirmOpen(true);
+												}}
 											>
-												{group.users !== undefined ? group.users.length : 0}
-											</TableCell>
-										</TableRow>
-									);
-								})}
-							</TableBody>
-						</Table>
-						<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
-							<ButtonGroup
-								variant="contained"
-								aria-label="previous next buttons"
+												<DeleteIcon
+													sx={{
+														verticalAlign: "middle",
+														color: theme.palette.primary.main,
+													}}
+												/>
+											</IconButton>
+										</TableCell>
+									</TableRow>
+								);
+							})}
+						</TableBody>
+					</Table>
+					<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
+						<ButtonGroup variant="contained" aria-label="previous next buttons">
+							<Button
+								aria-label="previous"
+								onClick={previous}
+								disabled={prevDisabled}
 							>
-								<Button
-									aria-label="previous"
-									onClick={previous}
-									disabled={prevDisabled}
-								>
-									<ArrowBack /> Prev
-								</Button>
-								<Button
-									aria-label="next"
-									onClick={next}
-									disabled={nextDisabled}
-								>
-									Next <ArrowForward />
-								</Button>
-							</ButtonGroup>
-						</Box>
-					</TableContainer>
-				</Grid>
+								<ArrowBack /> Prev
+							</Button>
+							<Button aria-label="next" onClick={next} disabled={nextDisabled}>
+								Next <ArrowForward />
+							</Button>
+						</ButtonGroup>
+					</Box>
+				</TableContainer>
 			</Grid>
 		</Layout>
 	);

From 01b63786d6e8a185fbe1f22182690b9cdf7f3cf2 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 14:02:05 -0500
Subject: [PATCH 12/16] correctly wire in the apikey and error handling

---
 frontend/src/actions/user.js               |  7 +++---
 frontend/src/components/ApiKeys/ApiKey.tsx | 28 +++++++++++-----------
 frontend/src/reducers/user.ts              |  8 +++----
 frontend/src/types/action.ts               |  4 ++--
 frontend/src/types/data.ts                 |  2 +-
 5 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/frontend/src/actions/user.js b/frontend/src/actions/user.js
index c403b86c8..247fc1657 100644
--- a/frontend/src/actions/user.js
+++ b/frontend/src/actions/user.js
@@ -1,6 +1,7 @@
 import { V2 } from "../openapi";
 import Cookies from "universal-cookie";
 import config from "../app.config";
+import { handleErrors } from "./common";
 
 const cookies = new Cookies();
 
@@ -144,7 +145,7 @@ export function listApiKeys(skip = 0, limit = 10) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(listApiKeys(skip, limit));
+				dispatch(handleErrors(listApiKeys(skip, limit)));
 			});
 	};
 }
@@ -162,7 +163,7 @@ export function generateApiKey(name = "", minutes = 30) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(generateApiKey(name, minutes));
+				dispatch(handleErrors(generateApiKey(name, minutes)));
 			});
 	};
 }
@@ -180,7 +181,7 @@ export function deleteApiKey(keyId) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(deleteApiKey(keyId));
+				dispatch(handleErrors(deleteApiKey(keyId)));
 			});
 	};
 }
diff --git a/frontend/src/components/ApiKeys/ApiKey.tsx b/frontend/src/components/ApiKeys/ApiKey.tsx
index edc603bf1..ddc50c182 100644
--- a/frontend/src/components/ApiKeys/ApiKey.tsx
+++ b/frontend/src/components/ApiKeys/ApiKey.tsx
@@ -25,7 +25,7 @@ export function ApiKeys() {
 		dispatch(listApiKeysAction(skip, limit));
 	// const deleteApiKey = (keyId: string) => dispatch(deleteApiKeyAction(keyId));
 
-	const apikeys = useSelector((state: RootState) => state.user.apikeys);
+	const apiKeys = useSelector((state: RootState) => state.user.apiKeys);
 
 	// TODO add option to determine limit number; default show 5 groups each time
 	const [currPageNum, setCurrPageNum] = useState<number>(0);
@@ -51,9 +51,9 @@ export function ApiKeys() {
 
 	useEffect(() => {
 		// disable flipping if reaches the last page
-		if (apikeys.length < limit) setNextDisabled(true);
+		if (apiKeys.length < limit) setNextDisabled(true);
 		else setNextDisabled(false);
-	}, [apikeys]);
+	}, [apiKeys]);
 
 	useEffect(() => {
 		if (skip !== null && skip !== undefined) {
@@ -75,7 +75,7 @@ export function ApiKeys() {
 		}
 	};
 	const next = () => {
-		if (apikeys.length === limit) {
+		if (apiKeys.length === limit) {
 			setSkip((currPageNum + 1) * limit);
 			setCurrPageNum(currPageNum + 1);
 		}
@@ -102,32 +102,32 @@ export function ApiKeys() {
 							</TableRow>
 						</TableHead>
 						<TableBody>
-							{apikeys.map((apikey) => {
+							{apiKeys.map((apiKey) => {
 								return (
 									<TableRow
-										key={apikey.id}
+										key={apiKey.id}
 										sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
 									>
-										<TableCell component="th" scope="row" key={apikey.id}>
-											<Button component={Link} to={`/groups/${apikey.id}`}>
-												{apikey.name}
+										<TableCell component="th" scope="row" key={apiKey.id}>
+											<Button component={Link} to={`/groups/${apiKey.id}`}>
+												{apiKey.name}
 											</Button>
 										</TableCell>
 										<TableCell
 											component="th"
 											scope="row"
-											key={apikey.id}
+											key={apiKey.id}
 											align="right"
 										>
-											{apikey.created}
+											{apiKey.created}
 										</TableCell>
 										<TableCell
 											component="th"
 											scope="row"
-											key={apikey.id}
+											key={apiKey.id}
 											align="right"
 										>
-											{apikey.expires}
+											{apiKey.expires}
 										</TableCell>
 										<TableCell align="right">
 											<IconButton
@@ -135,7 +135,7 @@ export function ApiKeys() {
 												sx={{ p: "10px" }}
 												aria-label="delete"
 												onClick={() => {
-													setSelectApikey(apikey.id);
+													setSelectApikey(apiKey.id);
 													setDeleteApikeyConfirmOpen(true);
 												}}
 											>
diff --git a/frontend/src/reducers/user.ts b/frontend/src/reducers/user.ts
index b06571f55..34208b230 100644
--- a/frontend/src/reducers/user.ts
+++ b/frontend/src/reducers/user.ts
@@ -17,7 +17,7 @@ const defaultState: UserState = {
 	registerSucceeded: false,
 	errorMsg: "",
 	hashedKey: "",
-	apikeys: [],
+	apiKeys: [],
 };
 
 const user = (state = defaultState, action: DataAction) => {
@@ -41,11 +41,11 @@ const user = (state = defaultState, action: DataAction) => {
 				errorMsg: action.errorMsg,
 			});
 		case LIST_API_KEYS:
-			return Object.assign({}, state, { apiKeys: action.apikeys });
+			return Object.assign({}, state, { apiKeys: action.apiKeys });
 		case DELETE_API_KEY:
 			return Object.assign({}, state, {
-				apiKeys: state.apikeys.filter(
-					(apikey) => apikey.id !== action.apikey.id
+				apiKeys: state.apiKeys.filter(
+					(apikey) => apikey.id !== action.apiKey.id
 				),
 			});
 		case GENERATE_API_KEY:
diff --git a/frontend/src/types/action.ts b/frontend/src/types/action.ts
index 1920f677b..00c5a9b1e 100644
--- a/frontend/src/types/action.ts
+++ b/frontend/src/types/action.ts
@@ -117,12 +117,12 @@ interface REGISTER_USER {
 
 interface LIST_API_KEYS {
 	type: "LIST_API_KEYS";
-	apikeys: UserAPIKeyOut[];
+	apiKeys: UserAPIKeyOut[];
 }
 
 interface DELETE_API_KEY {
 	type: "DELETE_API_KEY";
-	apikey: UserAPIKeyOut;
+	apiKey: UserAPIKeyOut;
 }
 
 interface GENERATE_API_KEY {
diff --git a/frontend/src/types/data.ts b/frontend/src/types/data.ts
index 282beeeb9..742111dc4 100644
--- a/frontend/src/types/data.ts
+++ b/frontend/src/types/data.ts
@@ -187,7 +187,7 @@ export interface UserState {
 	registerSucceeded: boolean;
 	errorMsg: string;
 	hashedKey: string;
-	apikeys: UserAPIKeyOut[];
+	apiKeys: UserAPIKeyOut[];
 }
 
 export interface ErrorState {

From 7cad69755aa5c819ef172676510ac8cb13ccf5b8 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 14:11:56 -0500
Subject: [PATCH 13/16] wire in the delete modal of apikeys

---
 frontend/src/actions/user.js               |  6 +--
 frontend/src/components/ApiKeys/ApiKey.tsx | 44 +++++++++++++++-------
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/frontend/src/actions/user.js b/frontend/src/actions/user.js
index 247fc1657..8838ae907 100644
--- a/frontend/src/actions/user.js
+++ b/frontend/src/actions/user.js
@@ -145,7 +145,7 @@ export function listApiKeys(skip = 0, limit = 10) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(handleErrors(listApiKeys(skip, limit)));
+				dispatch(handleErrors(reason, listApiKeys(skip, limit)));
 			});
 	};
 }
@@ -163,7 +163,7 @@ export function generateApiKey(name = "", minutes = 30) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(handleErrors(generateApiKey(name, minutes)));
+				dispatch(handleErrors(reason, generateApiKey(name, minutes)));
 			});
 	};
 }
@@ -181,7 +181,7 @@ export function deleteApiKey(keyId) {
 				});
 			})
 			.catch((reason) => {
-				dispatch(handleErrors(deleteApiKey(keyId)));
+				dispatch(handleErrors(reason, deleteApiKey(keyId)));
 			});
 	};
 }
diff --git a/frontend/src/components/ApiKeys/ApiKey.tsx b/frontend/src/components/ApiKeys/ApiKey.tsx
index ddc50c182..083333127 100644
--- a/frontend/src/components/ApiKeys/ApiKey.tsx
+++ b/frontend/src/components/ApiKeys/ApiKey.tsx
@@ -3,7 +3,6 @@ import { Box, Button, ButtonGroup, Grid, IconButton } from "@mui/material";
 import { RootState } from "../../types/data";
 import { useDispatch, useSelector } from "react-redux";
 import { ArrowBack, ArrowForward } from "@material-ui/icons";
-import { Link } from "react-router-dom";
 import Paper from "@mui/material/Paper";
 import Table from "@mui/material/Table";
 import TableHead from "@mui/material/TableHead";
@@ -14,16 +13,21 @@ import TableContainer from "@mui/material/TableContainer";
 import Layout from "../Layout";
 import { MainBreadcrumbs } from "../navigation/BreadCrumb";
 
-import { listApiKeys as listApiKeysAction } from "../../actions/user";
+import {
+	deleteApiKey as deleteApiKeyAction,
+	listApiKeys as listApiKeysAction,
+} from "../../actions/user";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { theme } from "../../theme";
+import { parseDate } from "../../utils/common";
+import { ActionModal } from "../dialog/ActionModal";
 
 export function ApiKeys() {
 	// Redux connect equivalent
 	const dispatch = useDispatch();
 	const listApiKeys = (skip: number | undefined, limit: number | undefined) =>
 		dispatch(listApiKeysAction(skip, limit));
-	// const deleteApiKey = (keyId: string) => dispatch(deleteApiKeyAction(keyId));
+	const deleteApiKey = (keyId: string) => dispatch(deleteApiKeyAction(keyId));
 
 	const apiKeys = useSelector((state: RootState) => state.user.apiKeys);
 
@@ -63,11 +67,6 @@ export function ApiKeys() {
 		}
 	}, [skip]);
 
-	// delete
-	// const handleDelete = () => {
-	// 	deleteApiKey();
-	// };
-
 	const previous = () => {
 		if (currPageNum - 1 >= 0) {
 			setSkip((currPageNum - 1) * limit);
@@ -91,6 +90,20 @@ export function ApiKeys() {
 			</Grid>
 			<br />
 			<Grid container>
+				{/*action modal*/}
+				<ActionModal
+					actionOpen={deleteApikeyConfirmOpen}
+					actionTitle="Are you sure?"
+					actionText="Do you really want to delete this API Key? This process cannot be undone."
+					actionBtnName="Delete"
+					handleActionBtnClick={() => {
+						deleteApiKey(selectedApikey);
+						setDeleteApikeyConfirmOpen(false);
+					}}
+					handleActionCancel={() => {
+						setDeleteApikeyConfirmOpen(false);
+					}}
+				/>
 				<TableContainer component={Paper}>
 					<Table sx={{ minWidth: 650 }} aria-label="simple table">
 						<TableHead>
@@ -108,10 +121,13 @@ export function ApiKeys() {
 										key={apiKey.id}
 										sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
 									>
-										<TableCell component="th" scope="row" key={apiKey.id}>
-											<Button component={Link} to={`/groups/${apiKey.id}`}>
-												{apiKey.name}
-											</Button>
+										<TableCell
+											component="th"
+											scope="row"
+											key={apiKey.id}
+											sx={{ textTransform: "uppercase" }}
+										>
+											{apiKey.name}
 										</TableCell>
 										<TableCell
 											component="th"
@@ -119,7 +135,7 @@ export function ApiKeys() {
 											key={apiKey.id}
 											align="right"
 										>
-											{apiKey.created}
+											{parseDate(apiKey.created)}
 										</TableCell>
 										<TableCell
 											component="th"
@@ -127,7 +143,7 @@ export function ApiKeys() {
 											key={apiKey.id}
 											align="right"
 										>
-											{apiKey.expires}
+											{parseDate(apiKey.expires)}
 										</TableCell>
 										<TableCell align="right">
 											<IconButton

From 8035ba6911013fa4f2169fa1cb982c04892a3a0b Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 14:32:51 -0500
Subject: [PATCH 14/16] wire in the creation api key

---
 frontend/src/components/ApiKeys/ApiKey.tsx    | 23 ++++++++++++++++++-
 .../components/ApiKeys/CreateApiKeyModal.tsx  |  2 +-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ApiKeys/ApiKey.tsx b/frontend/src/components/ApiKeys/ApiKey.tsx
index 083333127..b72d61d82 100644
--- a/frontend/src/components/ApiKeys/ApiKey.tsx
+++ b/frontend/src/components/ApiKeys/ApiKey.tsx
@@ -21,6 +21,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { theme } from "../../theme";
 import { parseDate } from "../../utils/common";
 import { ActionModal } from "../dialog/ActionModal";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import { CreateApiKeyModal } from "./CreateApiKeyModal";
 
 export function ApiKeys() {
 	// Redux connect equivalent
@@ -39,6 +41,7 @@ export function ApiKeys() {
 	const [nextDisabled, setNextDisabled] = useState<boolean>(false);
 	const [selectedApikey, setSelectApikey] = useState("");
 	const [deleteApikeyConfirmOpen, setDeleteApikeyConfirmOpen] = useState(false);
+	const [createApiKeyModalOpen, setCreateApiKeyModalOpen] = useState(false);
 
 	// for breadcrumb
 	const paths = [
@@ -84,9 +87,21 @@ export function ApiKeys() {
 		<Layout>
 			{/*breadcrumb*/}
 			<Grid container>
-				<Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
+				<Grid item xs={8} sx={{ display: "flex", alignItems: "center" }}>
 					<MainBreadcrumbs paths={paths} />
 				</Grid>
+				<Grid item xs={4}>
+					<Button
+						variant="contained"
+						onClick={() => {
+							setCreateApiKeyModalOpen(true);
+						}}
+						endIcon={<VpnKeyIcon />}
+						sx={{ float: "right" }}
+					>
+						New API Key
+					</Button>
+				</Grid>
 			</Grid>
 			<br />
 			<Grid container>
@@ -104,6 +119,12 @@ export function ApiKeys() {
 						setDeleteApikeyConfirmOpen(false);
 					}}
 				/>
+				{/*create api key modal*/}
+				<CreateApiKeyModal
+					apiKeyModalOpen={createApiKeyModalOpen}
+					setApiKeyModalOpen={setCreateApiKeyModalOpen}
+				/>
+				{/*api key table*/}
 				<TableContainer component={Paper}>
 					<Table sx={{ minWidth: 650 }} aria-label="simple table">
 						<TableHead>
diff --git a/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
index 0efd2911f..d4169fd5b 100644
--- a/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
+++ b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
@@ -69,7 +69,7 @@ export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 						/>
 					</DialogContent>
 					<DialogActions>
-						<CopyToClipboard text={apiKey}>
+						<CopyToClipboard text={hashedKey}>
 							<Button variant={"contained"}>Copy</Button>
 						</CopyToClipboard>
 						<Button onClick={handleClose}>Close</Button>

From 245ebf92553b5c56ae7fccbf126bdc483814dc14 Mon Sep 17 00:00:00 2001
From: Chen Wang <cwang138@illinois.edu>
Date: Mon, 24 Apr 2023 14:52:25 -0500
Subject: [PATCH 15/16] everything working in the gui

---
 frontend/src/components/ApiKeys/ApiKey.tsx    | 10 +++++---
 .../components/ApiKeys/CreateApiKeyModal.tsx  | 25 ++++++++++++++-----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ApiKeys/ApiKey.tsx b/frontend/src/components/ApiKeys/ApiKey.tsx
index b72d61d82..a9b3769e7 100644
--- a/frontend/src/components/ApiKeys/ApiKey.tsx
+++ b/frontend/src/components/ApiKeys/ApiKey.tsx
@@ -33,9 +33,9 @@ export function ApiKeys() {
 
 	const apiKeys = useSelector((state: RootState) => state.user.apiKeys);
 
-	// TODO add option to determine limit number; default show 5 groups each time
+	// TODO add option to determine limit number; default show 5 tokens each time
 	const [currPageNum, setCurrPageNum] = useState<number>(0);
-	const [limit] = useState<number>(20);
+	const [limit] = useState<number>(5);
 	const [skip, setSkip] = useState<number | undefined>(0);
 	const [prevDisabled, setPrevDisabled] = useState<boolean>(true);
 	const [nextDisabled, setNextDisabled] = useState<boolean>(false);
@@ -121,6 +121,8 @@ export function ApiKeys() {
 				/>
 				{/*create api key modal*/}
 				<CreateApiKeyModal
+					skip={skip}
+					limit={limit}
 					apiKeyModalOpen={createApiKeyModalOpen}
 					setApiKeyModalOpen={setCreateApiKeyModalOpen}
 				/>
@@ -164,7 +166,9 @@ export function ApiKeys() {
 											key={apiKey.id}
 											align="right"
 										>
-											{parseDate(apiKey.expires)}
+											{apiKey.expires === null
+												? "Never"
+												: parseDate(apiKey.expires)}
 										</TableCell>
 										<TableCell align="right">
 											<IconButton
diff --git a/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
index d4169fd5b..dd3295860 100644
--- a/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
+++ b/frontend/src/components/ApiKeys/CreateApiKeyModal.tsx
@@ -6,12 +6,12 @@ import {
 	DialogContent,
 	DialogTitle,
 	FormControl,
-	InputLabel,
 	MenuItem,
 	Select,
 } from "@mui/material";
 import {
 	generateApiKey as generateApiKeyAction,
+	listApiKeys as listApiKeysAction,
 	resetApiKey as resetApiKeyAction,
 } from "../../actions/user";
 import { useDispatch, useSelector } from "react-redux";
@@ -23,16 +23,20 @@ import { ClowderInputLabel } from "../styledComponents/ClowderInputLabel";
 import { ClowderInput } from "../styledComponents/ClowderInput";
 
 type ApiKeyModalProps = {
+	skip: number | undefined;
+	limit: number;
 	apiKeyModalOpen: boolean;
 	setApiKeyModalOpen: any;
 };
 
 export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
-	const { apiKeyModalOpen, setApiKeyModalOpen } = props;
+	const { skip, limit, apiKeyModalOpen, setApiKeyModalOpen } = props;
 
 	const dispatch = useDispatch();
 	const generateApiKey = (name: string, minutes: number) =>
 		dispatch(generateApiKeyAction(name, minutes));
+	const listApiKeys = (skip: number | undefined, limit: number | undefined) =>
+		dispatch(listApiKeysAction(skip, limit));
 	const resetApiKey = () => dispatch(resetApiKeyAction());
 	const hashedKey = useSelector((state: RootState) => state.user.hashedKey);
 
@@ -40,8 +44,14 @@ export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 	const [minutes, setMinutes] = useState(30);
 
 	const handleClose = () => {
-		resetApiKey();
 		setApiKeyModalOpen(false);
+
+		// fetch latest api key list
+		listApiKeys(skip, limit);
+		resetApiKey();
+		// reset
+		setName("");
+		setMinutes(30);
 	};
 
 	const handleGenerate = () => {
@@ -78,7 +88,6 @@ export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 			) : (
 				<>
 					<DialogContent>
-						<ClowderFootnote>Your API key will expire</ClowderFootnote>
 						<FormControl fullWidth sx={{ marginTop: "1em" }}>
 							<ClowderInputLabel>Name</ClowderInputLabel>
 							<ClowderInput
@@ -89,12 +98,16 @@ export const CreateApiKeyModal = (props: ApiKeyModalProps) => {
 								}}
 								defaultValue={name}
 							/>
-							<InputLabel id="demo-simple-select-label">After</InputLabel>
+						</FormControl>
+						<FormControl fullWidth sx={{ marginTop: "1em" }}>
+							<ClowderInputLabel id="expiration">
+								Expire after
+							</ClowderInputLabel>
 							<Select
 								labelId="expiration"
 								id="expiration"
 								value={minutes}
-								label="Expiration"
+								label="After"
 								onChange={handleExpirationChange}
 							>
 								<MenuItem value={30}>30 Minutes</MenuItem>

From 2c032c6f824d90e293f05199a4af750f38193033 Mon Sep 17 00:00:00 2001
From: toddn <tcnichol@illinois.edu>
Date: Mon, 24 Apr 2023 16:54:18 -0500
Subject: [PATCH 16/16] formatting

---
 backend/app/models/users.py      |  1 +
 backend/app/routers/users.py     | 43 +++++++++++++++++---------------
 backend/app/tests/test_apikey.py |  4 ++-
 backend/app/tests/utils.py       | 22 ++++++++--------
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/backend/app/models/users.py b/backend/app/models/users.py
index 7e5d677c0..cadb7c900 100644
--- a/backend/app/models/users.py
+++ b/backend/app/models/users.py
@@ -42,6 +42,7 @@ class UserOut(UserBase):
 
 class UserAPIKey(MongoModel):
     """API keys can have a reference name (e.g. 'Uploader script')"""
+
     key: str
     name: str
     user: EmailStr
diff --git a/backend/app/routers/users.py b/backend/app/routers/users.py
index a274e1a90..478b6b14e 100644
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -17,10 +17,10 @@
 
 @router.get("/keys", response_model=List[UserAPIKeyOut])
 async def generate_user_api_key(
-        db: MongoClient = Depends(dependencies.get_db),
-        current_user=Depends(get_current_username),
-        skip: int = 0,
-        limit: int = 10,
+    db: MongoClient = Depends(dependencies.get_db),
+    current_user=Depends(get_current_username),
+    skip: int = 0,
+    limit: int = 10,
 ):
     """List all api keys that user has created
 
@@ -30,11 +30,12 @@ async def generate_user_api_key(
     """
     apikeys = []
     for doc in (
-            await db["user_keys"].find({"user": current_user})
-                    .sort([("created", DESCENDING)])
-                    .skip(skip)
-                    .limit(limit)
-                    .to_list(length=limit)
+        await db["user_keys"]
+        .find({"user": current_user})
+        .sort([("created", DESCENDING)])
+        .skip(skip)
+        .limit(limit)
+        .to_list(length=limit)
     ):
         apikeys.append(UserAPIKeyOut.from_mongo(doc))
 
@@ -43,10 +44,10 @@ async def generate_user_api_key(
 
 @router.post("/keys", response_model=str)
 async def generate_user_api_key(
-        name: str,
-        mins: int = settings.local_auth_expiration,
-        db: MongoClient = Depends(dependencies.get_db),
-        current_user=Depends(get_current_username),
+    name: str,
+    mins: int = settings.local_auth_expiration,
+    db: MongoClient = Depends(dependencies.get_db),
+    current_user=Depends(get_current_username),
 ):
     """Generate an API key that confers the user's privileges.
 
@@ -68,16 +69,16 @@ async def generate_user_api_key(
 
 @router.delete("/keys/{key_id}", response_model=UserAPIKeyOut)
 async def generate_user_api_key(
-        key_id: str,
-        db: MongoClient = Depends(dependencies.get_db),
-        current_user=Depends(get_current_username),
+    key_id: str,
+    db: MongoClient = Depends(dependencies.get_db),
+    current_user=Depends(get_current_username),
 ):
     """Delete API keys given ID
 
     Arguments:
         key_id: id of the apikey
     """
-    apikey_doc = (await db["user_keys"].find_one({"_id": ObjectId(key_id)}))
+    apikey_doc = await db["user_keys"].find_one({"_id": ObjectId(key_id)})
     if apikey_doc is not None:
         apikey = UserAPIKeyOut.from_mongo(apikey_doc)
 
@@ -86,14 +87,16 @@ async def generate_user_api_key(
             await db["user_keys"].delete_one({"_id": ObjectId(key_id)})
             return apikey
         else:
-            raise HTTPException(status_code=403, detail=f"API key {key_id} not allowed to be deleted.")
+            raise HTTPException(
+                status_code=403, detail=f"API key {key_id} not allowed to be deleted."
+            )
     else:
         raise HTTPException(status_code=404, detail=f"API key {key_id} not found.")
 
 
 @router.get("", response_model=List[UserOut])
 async def get_users(
-        db: MongoClient = Depends(dependencies.get_db), skip: int = 0, limit: int = 2
+    db: MongoClient = Depends(dependencies.get_db), skip: int = 0, limit: int = 2
 ):
     users = []
     for doc in await db["users"].find().skip(skip).limit(limit).to_list(length=limit):
@@ -110,7 +113,7 @@ async def get_user(user_id: str, db: MongoClient = Depends(dependencies.get_db))
 
 @router.get("/username/{username}", response_model=UserOut)
 async def get_user_by_name(
-        username: str, db: MongoClient = Depends(dependencies.get_db)
+    username: str, db: MongoClient = Depends(dependencies.get_db)
 ):
     if (user := await db["users"].find_one({"email": username})) is not None:
         return UserOut.from_mongo(user)
diff --git a/backend/app/tests/test_apikey.py b/backend/app/tests/test_apikey.py
index 2a8daf0b9..a525f03ab 100644
--- a/backend/app/tests/test_apikey.py
+++ b/backend/app/tests/test_apikey.py
@@ -18,5 +18,7 @@ def test_delete_apikeys(client: TestClient, headers: dict):
     create_apikey(client, headers)
     get_response = client.get(f"{settings.API_V2_STR}/users/keys", headers=headers)
     key_id = get_response.json()[0].get("id")
-    delete_response = client.delete(f"{settings.API_V2_STR}/users/keys/{key_id}", headers=headers)
+    delete_response = client.delete(
+        f"{settings.API_V2_STR}/users/keys/{key_id}", headers=headers
+    )
     assert delete_response.status_code == 200
diff --git a/backend/app/tests/utils.py b/backend/app/tests/utils.py
index 7fd5dcaaf..cef6bf3df 100644
--- a/backend/app/tests/utils.py
+++ b/backend/app/tests/utils.py
@@ -80,7 +80,7 @@ def create_user(client: TestClient, headers: dict, email: str = user_alt["email"
     u["email"] = email
     response = client.post(f"{settings.API_V2_STR}/users", json=u)
     assert (
-            response.status_code == 200 or response.status_code == 409
+        response.status_code == 200 or response.status_code == 409
     )  # 409 = user already exists
     return response.json()
 
@@ -127,11 +127,11 @@ def create_dataset(client: TestClient, headers: dict):
 
 
 def upload_file(
-        client: TestClient,
-        headers: dict,
-        dataset_id: str,
-        filename=filename_example,
-        content=file_content_example,
+    client: TestClient,
+    headers: dict,
+    dataset_id: str,
+    filename=filename_example,
+    content=file_content_example,
 ):
     """Uploads a dummy file (optionally with custom name/content) to a dataset and returns the JSON."""
     with open(filename, "w") as tempf:
@@ -149,11 +149,11 @@ def upload_file(
 
 
 def create_folder(
-        client: TestClient,
-        headers: dict,
-        dataset_id: str,
-        name="test folder",
-        parent_folder=None,
+    client: TestClient,
+    headers: dict,
+    dataset_id: str,
+    name="test folder",
+    parent_folder=None,
 ):
     """Creates a folder (optionally under an existing folder) in a dataset and returns the JSON."""
     folder_data = {"name": name}