PR snags

ui/app/package.json

@@ -6,7 +6,6 @@
     "@azure/msal-browser": "^2.24.0",
     "@azure/msal-react": "^1.4.0",
     "@fluentui/react": "^8.68.2",
-    "@fluentui/react-northstar": "^0.64.0",
     "@rjsf/core": "^4.2.0",
     "@rjsf/fluent-ui": "^4.2.0",
     "@testing-library/jest-dom": "^5.16.1",

ui/app/src/App.tsx

@@ -18,6 +18,7 @@ import { ApiEndpoint } from './models/apiEndpoints';
 import { CreateUpdateResource } from './components/shared/create-update-resource/CreateUpdateResource';
 import { CreateUpdateResourceContext } from './contexts/CreateUpdateResourceContext';
 import { CreateFormResource, ResourceType } from './models/resourceType';
+import { Footer } from './components/shared/Footer';
 
 export const App: React.FunctionComponent = () => {
   const [appRoles, setAppRoles] = useState([] as Array<string>);
@@ -110,6 +111,9 @@ export const App: React.FunctionComponent = () => {
                         </Routes>
                       </GenericErrorBoundary>
                     </Stack.Item>
+                    <Stack.Item grow>
+                      <Footer />
+                    </Stack.Item>
                   </Stack>
                 </AppRolesContext.Provider>
               </OperationsContext.Provider>

ui/app/src/components/shared/Footer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AnimationClassNames, getTheme, mergeStyles } from '@fluentui/react';
+
+// TODO:
+// - change text to link
+// - include any small print
+
+export const Footer: React.FunctionComponent = () => {
+  return (
+      <div className={contentClass}>
+        Azure Trusted Research Environment
+      </div>
+  );
+};
+
+const theme = getTheme();
+const contentClass = mergeStyles([
+  {
+    backgroundColor: theme.palette.themeDark,
+    color: theme.palette.white,
+    lineHeight: '30px',
+    padding: '0 20px',
+  },
+  AnimationClassNames.scaleUpIn100,
+]);

ui/app/src/components/shared/TopNav.tsx

@@ -12,7 +12,7 @@ export const TopNav: React.FunctionComponent = () => {
           <Stack.Item grow={100}>
             <Link to='/' className='tre-home-link'>
               <Icon iconName="TestBeakerSolid" style={{ marginLeft: '10px', marginRight: '10px', verticalAlign: 'middle' }} />
-              <h5 style={{display: 'inline'}}>Azure TRE</h5>
+              <h5 style={{display: 'inline'}}>Azure Trusted Research Environment</h5>
             </Link>
           </Stack.Item>
           <Stack.Item>

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

@@ -7,14 +7,15 @@ import { AirlockRequest } from '../../../models/airlock';
 import moment from 'moment';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import { AirlockViewRequest } from './AirlockViewRequest';
+import { LoadingState } from '../../../models/loadingState';
 
 interface AirlockProps {
 }
 
 export const Airlock: React.FunctionComponent<AirlockProps> = (props: AirlockProps) => {
   const [airlockRequests, setAirlockRequests] = useState([] as AirlockRequest[]);
   const [requestColumns, setRequestColumns] = useState([] as IColumn[]);
-  const [loadingState, setLoadingState] = useState('loading');
+  const [loadingState, setLoadingState] = useState(LoadingState.Loading);
   const workspaceCtx = useContext(WorkspaceContext);
   const apiCall = useAuthApiCall();
   const theme = getTheme();
@@ -39,9 +40,9 @@ export const Airlock: React.FunctionComponent<AirlockProps> = (props: AirlockPro
         // Order by updatedWhen for initial view
         requests.sort((a, b) => a.updatedWhen < b.updatedWhen ? 1 : -1);
         setAirlockRequests(requests);
-        setLoadingState('ok');
+        setLoadingState(LoadingState.Ok);
       } catch (error) {
-        setLoadingState('error');
+        setLoadingState(LoadingState.Error);
       }
     }
     getAirlockRequests();
@@ -149,7 +150,7 @@ export const Airlock: React.FunctionComponent<AirlockProps> = (props: AirlockPro
 
   let requestsList;
   switch (loadingState) {
-    case 'ok':
+    case LoadingState.Ok:
       if (airlockRequests.length > 0) {
         requestsList = (
           <DetailsList
@@ -170,7 +171,7 @@ export const Airlock: React.FunctionComponent<AirlockProps> = (props: AirlockPro
         )
       }
       break;
-    case 'error':
+    case LoadingState.Error:
       requestsList = (
         <MessageBar
           messageBarType={MessageBarType.error}

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

@@ -129,7 +129,7 @@ export const AirlockViewRequest: React.FunctionComponent<AirlockViewRequestProps
         }
         <div style={{textAlign: 'end'}}>
           {
-            request.status !== AirlockRequestStatus.Cancelled && <DefaultButton onClick={() => setHideCancelDialog(false)} styles={cancelButtonStyles}>Cancel</DefaultButton>
+            request.status !== AirlockRequestStatus.Cancelled && <DefaultButton onClick={() => setHideCancelDialog(false)} styles={cancelButtonStyles}>Cancel Request</DefaultButton>
           }
           {
             request.status === AirlockRequestStatus.Draft && <PrimaryButton onClick={() => setHideSubmitDialog(false)}>Submit</PrimaryButton>
@@ -143,8 +143,9 @@ export const AirlockViewRequest: React.FunctionComponent<AirlockViewRequestProps
   return (
     <>
       <Panel
-        headerText="View request"
+        headerText="View Airlock Request"
         isOpen={true}
+        isLightDismiss={true}
         onDismiss={dismissPanel}
         onRenderFooterContent={renderFooter}
         isFooterAtBottom={true}
@@ -275,8 +276,8 @@ export const AirlockViewRequest: React.FunctionComponent<AirlockViewRequestProps
           hidden={hideCancelDialog}
           onDismiss={() => setHideCancelDialog(true)}
           dialogContentProps={{
-            title: 'Cancel request?',
-            subText: 'Are you sure you want to cancel this request?',
+            title: 'Cancel Airlock Request?',
+            subText: 'Are you sure you want to cancel this airlock request?',
           }}
         >
           {
@@ -286,7 +287,7 @@ export const AirlockViewRequest: React.FunctionComponent<AirlockViewRequestProps
             cancelling
             ? <Spinner label="Cancelling..." ariaLive="assertive" labelPosition="top" size={SpinnerSize.large} />
             : <DialogFooter>
-              <PrimaryButton onClick={cancelRequest} text="Cancel" styles={cancelButtonStyles} />
+              <PrimaryButton onClick={cancelRequest} text="Cancel Request" styles={cancelButtonStyles} />
               <DefaultButton onClick={() => setHideCancelDialog(true)} text="Back" />
             </DialogFooter>
           }