Airlock UI: add title to airlock request (#2731)

* added title textbox

* modified airlock request models to add title

* added requestTitle to UI

* modified airlock_request api model

* additions for airlock import title task

Co-authored-by: James Griffin <jjgriff93@users.noreply.github.com>

* added request title to db

* added request title to sample airlock req

* Added title field to table

* Fix warnings

* Amended tests

* Update version & changelog

Co-authored-by: Hizni Salih <hizni.salih@gmail.com>
Co-authored-by: James Griffin <jjgriff93@users.noreply.github.com>
Co-authored-by: Hizni Salih <4255268+hizni@users.noreply.github.com>
Co-authored-by: jjgriff93 <jamesgr@microsoft.com>

Author: jjgriff93

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 FEATURES:
 * Added filtering and sorting to Airlock UI ([#2511](https://github.com/microsoft/AzureTRE/issues/2511))
+* Added title field to Airlock requests ([#2731](https://github.com/microsoft/AzureTRE/pull/2731))
 
 ENHANCEMENTS:
 

api_app/_version.py

@@ -1 +1 @@
-__version__ = "0.4.52"
+__version__ = "0.4.53"

api_app/db/repositories/airlock_requests.py

@@ -92,6 +92,7 @@ def create_airlock_request_item(self, airlock_request_input: AirlockRequestInCre
         airlock_request = AirlockRequest(
             id=full_airlock_request_id,
             workspaceId=workspace_id,
+            requestTitle=airlock_request_input.requestTitle,
             businessJustification=airlock_request_input.businessJustification,
             requestType=airlock_request_input.requestType,
             creationTime=datetime.utcnow().timestamp(),

api_app/models/domain/airlock_request.py

@@ -78,6 +78,7 @@ class AirlockRequest(AzureTREModel):
     workspaceId: str = Field("", title="Workspace ID", description="Service target Workspace id")
     requestType: AirlockRequestType = Field("", title="Airlock request type")
     files: List[AirlockFile] = Field([], title="Files of the request")
+    requestTitle: str = Field("Airlock Request", title="Brief title for the request")
     businessJustification: str = Field("Business Justifications", title="Explanation that will be provided to the request reviewer")
     status = AirlockRequestStatus.Draft
     creationTime: float = Field(None, title="Creation time of the request")

api_app/models/schemas/airlock_request.py

@@ -20,6 +20,7 @@ def get_sample_airlock_request(workspace_id: str, airlock_request_id: str) -> di
         "status": "draft",
         "requestType": "import",
         "files": [],
+        "requestTitle": "a request title",
         "businessJustification": "some business justification",
         "creationTime": datetime.utcnow().timestamp(),
         "reviews": [
@@ -72,13 +73,15 @@ class Config:
 
 class AirlockRequestInCreate(BaseModel):
     requestType: AirlockRequestType = Field("", title="Airlock request type", description="Specifies if this is an import or an export request")
+    requestTitle: str = Field("Airlock Request", title="Brief title for the request")
     businessJustification: str = Field("Business Justifications", title="Explanation that will be provided to the request reviewer")
     properties: dict = Field({}, title="Airlock request parameters", description="Values for the parameters required by the Airlock request specification")
 
     class Config:
         schema_extra = {
             "example": {
                 "requestType": "import",
+                "requestTitle": "a request title",
                 "businessJustification": "some business justification"
             }
         }

api_app/tests_ma/test_api/test_routes/test_airlock.py

@@ -34,6 +34,7 @@ def sample_airlock_request_object(status=AirlockRequestStatus.Draft, airlock_req
     airlock_request = AirlockRequest(
         id=airlock_request_id,
         workspaceId=workspace_id,
+        requestTitle="test title",
         businessJustification="test business justification",
         requestType="import",
         status=status
@@ -45,6 +46,7 @@ def sample_airlock_request_object_with_review(status=AirlockRequestStatus.Draft,
     airlock_request = AirlockRequest(
         id=airlock_request_id,
         workspaceId=workspace_id,
+        requestTitle="test title",
         businessJustification="test business justification",
         requestType="import",
         status=status,

ui/app/package.json

@@ -6,6 +6,7 @@
     "@azure/msal-browser": "^2.24.0",
     "@azure/msal-react": "^1.4.0",
     "@fluentui/react": "^8.68.2",
+    "@fluentui/react-file-type-icons": "^8.7.9",
     "@reduxjs/toolkit": "^1.8.6",
     "@rjsf/core": "^4.2.0",
     "@rjsf/fluent-ui": "^4.2.0",

ui/app/src/App.scss

@@ -106,6 +106,17 @@ ul.tre-notifications-steps-list li {
   }
 }
 
+.tre-table {
+  .ms-Persona-primaryText {
+    font-size: 12px;
+    color: rgb(108, 108, 108);
+  }
+
+  .ms-DetailsRow-cell {
+    align-self: baseline;
+  }
+}
+
 .tre-hide-chevron i[data-icon-name=ChevronDown] {
   display: none;
 }
@@ -158,12 +169,6 @@ ul.tre-notifications-steps-list li {
   background-color: #fff;
 }
 
-.tre-table-rows-align-centre {
-  .ms-DetailsRow-cell {
-    align-self: baseline;
-  }
-}
-
 .ms-Pivot {
   margin-bottom: 10px;
 }

ui/app/src/App.tsx

@@ -17,6 +17,7 @@ import { CreateUpdateResource } from './components/shared/create-update-resource
 import { CreateUpdateResourceContext } from './contexts/CreateUpdateResourceContext';
 import { CreateFormResource, ResourceType } from './models/resourceType';
 import { Footer } from './components/shared/Footer';
+import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
 
 export const App: React.FunctionComponent = () => {
   const [appRoles, setAppRoles] = useState([] as Array<string>);
@@ -38,6 +39,9 @@ export const App: React.FunctionComponent = () => {
     setAppRolesOnLoad();
   }, [apiCall]);
 
+  // initiliase filetype icons
+  useEffect(() => initializeFileTypeIcons(), []);
+
   return (
     <>
       <Routes>

ui/app/src/components/shared/airlock/Airlock.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { ColumnActionsMode, CommandBar, CommandBarButton, ContextualMenu, DirectionalHint, getTheme, IColumn, ICommandBarItemProps, IContextualMenuItem, IContextualMenuProps, Label, Persona, PersonaSize, SelectionMode, ShimmeredDetailsList, Stack } from '@fluentui/react';
+import { ColumnActionsMode, CommandBar, CommandBarButton, ContextualMenu, DirectionalHint, getTheme, IColumn, ICommandBarItemProps, Icon, IContextualMenuItem, IContextualMenuProps, Persona, PersonaSize, SelectionMode, ShimmeredDetailsList, Stack } from '@fluentui/react';
 import { HttpMethod, useAuthApiCall } from '../../../hooks/useAuthApiCall';
 import { ApiEndpoint } from '../../../models/apiEndpoints';
 import { WorkspaceContext } from '../../../contexts/WorkspaceContext';
@@ -13,6 +13,7 @@ import { ExceptionLayout } from '../ExceptionLayout';
 import { AirlockNewRequest } from './AirlockNewRequest';
 import { WorkspaceRoleName } from '../../../models/roleNames';
 import { useAccount, useMsal } from '@azure/msal-react';
+import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
 
 export const Airlock: React.FunctionComponent = () => {
   const [airlockRequests, setAirlockRequests] = useState([] as AirlockRequest[]);
@@ -27,7 +28,7 @@ export const Airlock: React.FunctionComponent = () => {
   const apiCall = useAuthApiCall();
   const theme = getTheme();
   const navigate = useNavigate();
-  const { instance, accounts } = useMsal();
+  const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});
 
   // Get the airlock request data from API
@@ -151,15 +152,31 @@ export const Airlock: React.FunctionComponent = () => {
 
     const columns: IColumn[] = [
       {
-        key: 'avatar',
-        name: '',
+        key: 'fileIcon',
+        name: 'fileIcon',
         minWidth: 16,
         maxWidth: 16,
         isIconOnly: true,
         onRender: (request: AirlockRequest) => {
-          return <Persona size={ PersonaSize.size24 } text={ request.user?.name } />
+          if (request.status === AirlockRequestStatus.Draft) {
+            return <Icon iconName="FolderOpen" style={{verticalAlign:'bottom', fontSize: 14}} />
+          } else if (request.files?.length > 0 && request.files[0].name) {
+            const fileType = request.files[0].name.split('.').pop();
+            return <Icon {...getFileTypeIconProps({ extension: fileType })} style={{verticalAlign:'bottom'}} />
+          } else {
+            return <Icon iconName="Page" style={{verticalAlign:'bottom', fontSize: 14}} />
+          }
         }
       },
+      {
+        key: 'title',
+        name: 'Title',
+        ariaLabel: 'Title of the airlock request',
+        minWidth: 150,
+        maxWidth: 300,
+        isResizable: true,
+        fieldName: 'requestTitle'
+      },
       {
         key: 'creator_user_id',
         name: 'Initiator',
@@ -168,7 +185,7 @@ export const Airlock: React.FunctionComponent = () => {
         maxWidth: 200,
         isResizable: true,
         fieldName: 'initiator',
-        onRender: (request: AirlockRequest) => request.user?.name,
+        onRender: (request: AirlockRequest) => <Persona size={ PersonaSize.size24 } text={ request.user?.name } />,
         isFiltered: filters.has('creator_user_id')
       },
       {
@@ -310,7 +327,7 @@ export const Airlock: React.FunctionComponent = () => {
           selectionMode={SelectionMode.none}
           getKey={(item) => item?.id}
           onItemInvoked={(item) => navigate(item.id)}
-          className="tre-table-rows-align-centre"
+          className="tre-table"
           enableShimmer={loadingState === LoadingState.Loading}
         />
         {