+ {apiError &&
}
+
{
className="tre-table"
enableShimmer={loadingState === LoadingState.Loading}
/>
- {
- contextMenuProps &&
- }
- {
- airlockRequests.length === 0 && loadingState !== LoadingState.Loading &&
-
No requests found
- {
- filters.size > 0
- ? There are no requests matching your selected filter(s).
- : Looks like there are no airlock requests yet. Create a new request to get started.
- }
-
- }
+ {contextMenuProps && }
+ {airlockRequests.length === 0 &&
+ loadingState !== LoadingState.Loading && (
+
+
No requests found
+ {filters.size > 0 ? (
+
+ There are no requests matching your selected filter(s).
+
+ ) : (
+
+ Looks like there are no airlock requests yet. Create a new
+ request to get started.
+
+ )}
+
+ )}
-
- } />
-
- } />
+ }
+ />
+
+ }
+ />
);
};
-
diff --git a/ui/app/src/components/shared/airlock/AirlockNewRequest.tsx b/ui/app/src/components/shared/airlock/AirlockNewRequest.tsx
index 4b774e73d8..bd1b2ba644 100644
--- a/ui/app/src/components/shared/airlock/AirlockNewRequest.tsx
+++ b/ui/app/src/components/shared/airlock/AirlockNewRequest.tsx
@@ -1,9 +1,33 @@
-import { DefaultButton, Dialog, DialogFooter, DocumentCard, DocumentCardDetails, DocumentCardPreview, DocumentCardTitle, DocumentCardType, getTheme, Icon, IDocumentCardPreviewProps, IStackTokens, Panel, PanelType, PrimaryButton, Spinner, SpinnerSize, Stack, TextField } from "@fluentui/react";
+import {
+ DefaultButton,
+ Dialog,
+ DialogFooter,
+ DocumentCard,
+ DocumentCardDetails,
+ DocumentCardPreview,
+ DocumentCardTitle,
+ DocumentCardType,
+ getTheme,
+ Icon,
+ IDocumentCardPreviewProps,
+ IStackTokens,
+ Panel,
+ PanelType,
+ PrimaryButton,
+ Spinner,
+ SpinnerSize,
+ Stack,
+ TextField,
+} from "@fluentui/react";
import { useCallback, useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { WorkspaceContext } from "../../../contexts/WorkspaceContext";
import { HttpMethod, useAuthApiCall } from "../../../hooks/useAuthApiCall";
-import { AirlockRequest, AirlockRequestType, NewAirlockRequest } from "../../../models/airlock";
+import {
+ AirlockRequest,
+ AirlockRequestType,
+ NewAirlockRequest,
+} from "../../../models/airlock";
import { ApiEndpoint } from "../../../models/apiEndpoints";
import { APIError } from "../../../models/exceptions";
import { ExceptionLayout } from "../ExceptionLayout";
@@ -12,8 +36,12 @@ interface AirlockNewRequestProps {
onCreateRequest: (request: AirlockRequest) => void;
}
-export const AirlockNewRequest: React.FunctionComponent
= (props: AirlockNewRequestProps) => {
- const [newRequest, setNewRequest] = useState({} as NewAirlockRequest);
+export const AirlockNewRequest: React.FunctionComponent<
+ AirlockNewRequestProps
+> = (props: AirlockNewRequestProps) => {
+ const [newRequest, setNewRequest] = useState(
+ {} as NewAirlockRequest,
+ );
const [requestValid, setRequestValid] = useState(false);
const [hideCreateDialog, setHideCreateDialog] = useState(true);
const [creating, setCreating] = useState(false);
@@ -24,35 +52,42 @@ export const AirlockNewRequest: React.FunctionComponent
const apiCall = useAuthApiCall();
const onChangetitle = useCallback(
- (event: React.FormEvent, newValue?: string) => {
- setNewRequest(request => {
+ (
+ event: React.FormEvent,
+ newValue?: string,
+ ) => {
+ setNewRequest((request) => {
return {
...request,
- title: newValue || ''
- }
+ title: newValue || "",
+ };
});
},
- [setNewRequest]
+ [setNewRequest],
);
const onChangeBusinessJustification = useCallback(
- (event: React.FormEvent, newValue?: string) => {
- setNewRequest(request => {
+ (
+ event: React.FormEvent,
+ newValue?: string,
+ ) => {
+ setNewRequest((request) => {
return {
...request,
- businessJustification: newValue || ''
- }
+ businessJustification: newValue || "",
+ };
});
},
- [setNewRequest]
+ [setNewRequest],
);
useEffect(
- () => setRequestValid(
- newRequest.title?.length > 0 &&
- newRequest.businessJustification?.length > 0
- ),
- [newRequest, setRequestValid]
+ () =>
+ setRequestValid(
+ newRequest.title?.length > 0 &&
+ newRequest.businessJustification?.length > 0,
+ ),
+ [newRequest, setRequestValid],
);
// Submit Airlock request to API
@@ -65,12 +100,12 @@ export const AirlockNewRequest: React.FunctionComponent
`${ApiEndpoint.Workspaces}/${workspaceCtx.workspace.id}/${ApiEndpoint.AirlockRequests}`,
HttpMethod.Post,
workspaceCtx.workspaceApplicationIdURI,
- newRequest
+ newRequest,
);
props.onCreateRequest(response.airlockRequest);
setHideCreateDialog(true);
} catch (err: any) {
- err.userMessage = 'Error submitting airlock request';
+ err.userMessage = "Error submitting airlock request";
setApiSubmitError(err);
setCreateError(true);
}
@@ -78,17 +113,29 @@ export const AirlockNewRequest: React.FunctionComponent
}
}, [apiCall, newRequest, props, workspaceCtx, requestValid]);
- const dismissPanel = useCallback(() => navigate('../'), [navigate]);
+ const dismissPanel = useCallback(() => navigate("../"), [navigate]);
const renderFooter = useCallback(() => {
- let footer = <>
+ let footer = <>;
if (newRequest.type) {
- footer = <>
-
-
setNewRequest({} as NewAirlockRequest)} styles={{root:{marginRight: 8}}}>Back
-
setHideCreateDialog(false)} disabled={!requestValid}>Create
-
+
setNewRequest({} as NewAirlockRequest)}
+ styles={{ root: { marginRight: 8 } }}
+ >
+ Back
+
+
setHideCreateDialog(false)}
+ disabled={!requestValid}
+ >
+ Create
+
+
-
+
+
{workspaceCtx.workspace?.properties?.display_name}
- { currentStep }
-
+ {currentStep}
+
- )
-}
+ );
+};
const stackTokens: IStackTokens = { childrenGap: 20 };
const { palette, fonts } = getTheme();
@@ -201,11 +275,11 @@ const importPreviewGraphic: IDocumentCardPreviewProps = {
previewImages: [
{
previewIconProps: {
- iconName: 'ReleaseGate',
+ iconName: "ReleaseGate",
styles: {
root: {
fontSize: fonts.superLarge.fontSize,
- color: '#0078d7',
+ color: "#0078d7",
backgroundColor: palette.neutralLighterAlt,
},
},
@@ -222,11 +296,11 @@ const exportPreviewGraphic: IDocumentCardPreviewProps = {
previewImages: [
{
previewIconProps: {
- iconName: 'Leave',
+ iconName: "Leave",
styles: {
root: {
fontSize: fonts.superLarge.fontSize,
- color: '#0078d7',
+ color: "#0078d7",
backgroundColor: palette.neutralLighterAlt,
},
},
@@ -239,4 +313,4 @@ const exportPreviewGraphic: IDocumentCardPreviewProps = {
},
};
-const cardTitleStyles = { root: { fontWeight: '600', paddingTop: 15 } };
+const cardTitleStyles = { root: { fontWeight: "600", paddingTop: 15 } };
diff --git a/ui/app/src/components/shared/airlock/AirlockRequestFilesSection.tsx b/ui/app/src/components/shared/airlock/AirlockRequestFilesSection.tsx
index 8f19cf4520..cb7c2ff680 100644
--- a/ui/app/src/components/shared/airlock/AirlockRequestFilesSection.tsx
+++ b/ui/app/src/components/shared/airlock/AirlockRequestFilesSection.tsx
@@ -1,4 +1,13 @@
-import { MessageBar, MessageBarType, Pivot, PivotItem, PrimaryButton, Stack, TextField, TooltipHost } from "@fluentui/react";
+import {
+ MessageBar,
+ MessageBarType,
+ Pivot,
+ PivotItem,
+ PrimaryButton,
+ Stack,
+ TextField,
+ TooltipHost,
+} from "@fluentui/react";
import React, { useCallback, useEffect, useState } from "react";
import { HttpMethod, useAuthApiCall } from "../../../hooks/useAuthApiCall";
import { AirlockRequest, AirlockRequestStatus } from "../../../models/airlock";
@@ -12,11 +21,14 @@ interface AirlockRequestFilesSectionProps {
workspaceApplicationIdURI: string;
}
-export const AirlockRequestFilesSection: React.FunctionComponent = (props: AirlockRequestFilesSectionProps) => {
+export const AirlockRequestFilesSection: React.FunctionComponent<
+ AirlockRequestFilesSectionProps
+> = (props: AirlockRequestFilesSectionProps) => {
+ const COPY_TOOL_TIP_DEFAULT_MESSAGE = "Copy to clipboard";
- const COPY_TOOL_TIP_DEFAULT_MESSAGE = "Copy to clipboard"
-
- const [copyToolTipMessage, setCopyToolTipMessage] = useState(COPY_TOOL_TIP_DEFAULT_MESSAGE);
+ const [copyToolTipMessage, setCopyToolTipMessage] = useState(
+ COPY_TOOL_TIP_DEFAULT_MESSAGE,
+ );
const [sasUrl, setSasUrl] = useState();
const [sasUrlError, setSasUrlError] = useState(false);
@@ -30,11 +42,11 @@ export const AirlockRequestFilesSection: React.FunctionComponent {
- const match = sasUrl.match(/https:\/\/(.*?).blob.core.windows.net\/(.*)\?(.*)$/);
+ const match = sasUrl.match(
+ /https:\/\/(.*?).blob.core.windows.net\/(.*)\?(.*)$/,
+ );
if (!match) {
- return
+ return;
}
return {
StorageAccountName: match[1],
containerName: match[2],
- sasToken: match[3]
- }
+ sasToken: match[3],
+ };
};
const handleCopySasUrl = () => {
@@ -59,28 +73,31 @@ export const AirlockRequestFilesSection: React.FunctionComponent setCopyToolTipMessage(COPY_TOOL_TIP_DEFAULT_MESSAGE), 3000);
- }
+ setCopyToolTipMessage("Copied");
+ setTimeout(
+ () => setCopyToolTipMessage(COPY_TOOL_TIP_DEFAULT_MESSAGE),
+ 3000,
+ );
+ };
const getAzureCliCommand = (sasUrl: string) => {
- let containerDetails = parseSasUrl(sasUrl)
+ let containerDetails = parseSasUrl(sasUrl);
if (!containerDetails) {
- return '';
+ return "";
}
let cliCommand = "";
if (props.request.status === AirlockRequestStatus.Draft) {
- cliCommand = `az storage blob upload --file --name --account-name ${containerDetails.StorageAccountName} --type block --container-name ${containerDetails.containerName} --sas-token "${containerDetails.sasToken}"`
+ cliCommand = `az storage blob upload --file --name --account-name ${containerDetails.StorageAccountName} --type block --container-name ${containerDetails.containerName} --sas-token "${containerDetails.sasToken}"`;
} else {
- cliCommand = `az storage blob download-batch --destination --source ${containerDetails.containerName} --account-name ${containerDetails.StorageAccountName} --sas-token "${containerDetails.sasToken}"`
+ cliCommand = `az storage blob download-batch --destination --source ${containerDetails.containerName} --account-name ${containerDetails.StorageAccountName} --sas-token "${containerDetails.sasToken}"`;
}
return cliCommand;
};
useEffect(() => {
- generateSasUrl()
+ generateSasUrl();
}, [generateSasUrl]);
return (
@@ -88,51 +105,68 @@ export const AirlockRequestFilesSection: React.FunctionComponent
-
- {
- props.request.status === AirlockRequestStatus.Draft
- ? Use the storage container SAS URL to upload your request file.
- : Use the storage container SAS URL to view the request file.
- }
-
+
+ {props.request.status === AirlockRequestStatus.Draft ? (
+
+ Use the storage container SAS URL to upload your request file.
+
+ ) : (
+
+ Use the storage container SAS URL to view the request file.
+
+ )}
+
{ handleCopySasUrl() }}
+ iconProps={{ iconName: "copy" }}
+ styles={{ root: { minWidth: "40px" } }}
+ onClick={() => {
+ handleCopySasUrl();
+ }}
/>
- {
- props.request.status === AirlockRequestStatus.Draft &&
- Please upload a single file. Only single-file imports (including zip files) are supported.
+ {props.request.status === AirlockRequestStatus.Draft && (
+
+ Please upload a single file. Only single-file imports (including
+ zip files) are supported.
- }
+ )}
-
- Use Azure command-line interface (Azure CLI) to interact with the storage container.
-
+
+
+ Use Azure command-line interface (Azure CLI) to interact with
+ the storage container.
+
+
-
+
- {
- sasUrlError &&
- }
+ {sasUrlError && }
);
};
diff --git a/ui/app/src/components/shared/airlock/AirlockReviewRequest.tsx b/ui/app/src/components/shared/airlock/AirlockReviewRequest.tsx
index a5e80069b5..4dc62213b1 100644
--- a/ui/app/src/components/shared/airlock/AirlockReviewRequest.tsx
+++ b/ui/app/src/components/shared/airlock/AirlockReviewRequest.tsx
@@ -1,4 +1,23 @@
-import { DefaultButton, DialogFooter, FontWeights, getTheme, IButtonStyles, IconButton, IIconProps, IStackItemStyles, IStackStyles, mergeStyleSets, MessageBar, MessageBarType, PrimaryButton, Shimmer, Spinner, SpinnerSize, Stack, TextField } from "@fluentui/react";
+import {
+ DefaultButton,
+ DialogFooter,
+ FontWeights,
+ getTheme,
+ IButtonStyles,
+ IconButton,
+ IIconProps,
+ IStackItemStyles,
+ IStackStyles,
+ mergeStyleSets,
+ MessageBar,
+ MessageBarType,
+ PrimaryButton,
+ Shimmer,
+ Spinner,
+ SpinnerSize,
+ Stack,
+ TextField,
+} from "@fluentui/react";
import { useCallback, useContext, useEffect, useState } from "react";
import { WorkspaceContext } from "../../../contexts/WorkspaceContext";
import { HttpMethod, useAuthApiCall } from "../../../hooks/useAuthApiCall";
@@ -7,11 +26,20 @@ import { ApiEndpoint } from "../../../models/apiEndpoints";
import { APIError } from "../../../models/exceptions";
import { destructiveButtonStyles, successButtonStyles } from "../../../styles";
import { ExceptionLayout } from "../ExceptionLayout";
-import { UserResource } from '../../../models/userResource';
+import { UserResource } from "../../../models/userResource";
import { PowerStateBadge } from "../PowerStateBadge";
import { useComponentManager } from "../../../hooks/useComponentManager";
-import { ComponentAction, Resource, VMPowerStates } from "../../../models/resource";
-import { actionsDisabledStates, failedStates, inProgressStates, successStates } from "../../../models/operation";
+import {
+ ComponentAction,
+ Resource,
+ VMPowerStates,
+} from "../../../models/resource";
+import {
+ actionsDisabledStates,
+ failedStates,
+ inProgressStates,
+ successStates,
+} from "../../../models/operation";
import { useAppDispatch } from "../../../hooks/customReduxHooks";
import { addUpdateOperation } from "../notifications/operationsSlice";
import { StatusBadge } from "../StatusBadge";
@@ -19,19 +47,24 @@ import vmImage from "../../../assets/virtual_machine.svg";
import { useAccount, useMsal } from "@azure/msal-react";
interface AirlockReviewRequestProps {
- request: AirlockRequest | undefined,
- onUpdateRequest: (request: AirlockRequest) => void,
- onReviewRequest: (request: AirlockRequest) => void,
- onClose: () => void
+ request: AirlockRequest | undefined;
+ onUpdateRequest: (request: AirlockRequest) => void;
+ onReviewRequest: (request: AirlockRequest) => void;
+ onClose: () => void;
}
-export const AirlockReviewRequest: React.FunctionComponent = (props: AirlockReviewRequestProps) => {
+export const AirlockReviewRequest: React.FunctionComponent<
+ AirlockReviewRequestProps
+> = (props: AirlockReviewRequestProps) => {
const [request, setRequest] = useState();
- const [reviewExplanation, setReviewExplanation] = useState('');
+ const [reviewExplanation, setReviewExplanation] = useState("");
const [reviewing, setReviewing] = useState(false);
const [reviewError, setReviewError] = useState(false);
- const [reviewResourcesConfigured, setReviewResourcesConfigured] = useState(false);
- const [reviewResourceStatus, setReviewResourceStatus] = useState<'notCreated' | 'creating' | 'created' | 'failed'>();
+ const [reviewResourcesConfigured, setReviewResourcesConfigured] =
+ useState(false);
+ const [reviewResourceStatus, setReviewResourceStatus] = useState<
+ "notCreated" | "creating" | "created" | "failed"
+ >();
const [reviewResourceError, setReviewResourceError] = useState(false);
const [apiError, setApiError] = useState({} as APIError);
const [proceedToReview, setProceedToReview] = useState(false);
@@ -49,9 +82,9 @@ export const AirlockReviewRequest: React.FunctionComponent {
if (
- request
- && workspaceCtx.workspace?.properties.airlock_review_config
- && workspaceCtx.workspace?.properties.airlock_review_config[request.type]
+ request &&
+ workspaceCtx.workspace?.properties.airlock_review_config &&
+ workspaceCtx.workspace?.properties.airlock_review_config[request.type]
) {
setReviewResourcesConfigured(true);
} else {
@@ -65,16 +98,26 @@ export const AirlockReviewRequest: React.FunctionComponent id !== userId);
+ const otherReviewers = Object.keys(request.reviewUserResources).filter(
+ (id) => id !== userId,
+ );
setOtherReviewers(otherReviewers);
}
- }, [apiCall, request, workspaceCtx.workspace.id, workspaceCtx.workspaceApplicationIdURI, reviewResourcesConfigured, account]);
+ }, [
+ apiCall,
+ request,
+ workspaceCtx.workspace.id,
+ workspaceCtx.workspaceApplicationIdURI,
+ reviewResourcesConfigured,
+ account,
+ ]);
// Get the latest updates to the review resource to track deployment
const latestUpdate = useComponentManager(
reviewResource,
- (r: Resource) => { setReviewResource(r as UserResource) },
- () => { setReviewResource({} as UserResource) },
- reviewWorkspaceScope // Pass this so component manager knows it might be different to the workspace context
+ (r: Resource) => {
+ setReviewResource(r as UserResource);
+ },
+ () => {
+ setReviewResource({} as UserResource);
+ },
+ reviewWorkspaceScope, // Pass this so component manager knows it might be different to the workspace context
);
// Set the review resource status
useEffect(() => {
if (reviewResource && latestUpdate) {
- if (inProgressStates.includes(latestUpdate.operation?.status) || inProgressStates.includes(reviewResource.deploymentStatus)) {
- setReviewResourceStatus('creating');
- } else if (failedStates.includes(latestUpdate.operation?.status) || failedStates.includes(reviewResource.deploymentStatus)) {
- setReviewResourceStatus('failed');
+ if (
+ inProgressStates.includes(latestUpdate.operation?.status) ||
+ inProgressStates.includes(reviewResource.deploymentStatus)
+ ) {
+ setReviewResourceStatus("creating");
+ } else if (
+ failedStates.includes(latestUpdate.operation?.status) ||
+ failedStates.includes(reviewResource.deploymentStatus)
+ ) {
+ setReviewResourceStatus("failed");
const err = new Error(latestUpdate.operation?.message) as any;
- err.userMessage = 'An issue occurred while deploying the review resource.'
+ err.userMessage =
+ "An issue occurred while deploying the review resource.";
setApiError(new Error(latestUpdate.operation?.message));
setReviewResourceError(true);
- } else if (successStates.includes(latestUpdate.operation?.status) || successStates.includes(reviewResource.deploymentStatus)) {
- setReviewResourceStatus('created');
+ } else if (
+ successStates.includes(latestUpdate.operation?.status) ||
+ successStates.includes(reviewResource.deploymentStatus)
+ ) {
+ setReviewResourceStatus("created");
}
}
- }, [latestUpdate, reviewResource, request])
+ }, [latestUpdate, reviewResource, request]);
// Create a review resource
const createReviewResource = useCallback(async () => {
setReviewResourceError(false);
- setReviewResourceStatus('creating');
+ setReviewResourceStatus("creating");
try {
const response = await apiCall(
`${ApiEndpoint.Workspaces}/${workspaceCtx.workspace.id}/${ApiEndpoint.AirlockRequests}/${request?.id}/${ApiEndpoint.AirlockCreateReviewResource}`,
HttpMethod.Post,
- workspaceCtx.workspaceApplicationIdURI
+ workspaceCtx.workspaceApplicationIdURI,
);
dispatch(addUpdateOperation(response.operation));
props.onUpdateRequest(response.airlockRequest);
@@ -147,41 +215,57 @@ export const AirlockReviewRequest: React.FunctionComponent {
- if (request && reviewExplanation) {
- setReviewing(true);
- setReviewError(false);
- try {
- const review = {
- approval: isApproved,
- decisionExplanation: reviewExplanation
- };
- const response = await apiCall(
- `${ApiEndpoint.Workspaces}/${request.workspaceId}/${ApiEndpoint.AirlockRequests}/${request.id}/${ApiEndpoint.AirlockReview}`,
- HttpMethod.Post,
- workspaceCtx.workspaceApplicationIdURI,
- review
- );
- props.onReviewRequest(response.airlockRequest);
- } catch (err: any) {
- err.userMessage = 'Error reviewing airlock request';
- setApiError(err);
- setReviewError(true);
+ const reviewRequest = useCallback(
+ async (isApproved: boolean) => {
+ if (request && reviewExplanation) {
+ setReviewing(true);
+ setReviewError(false);
+ try {
+ const review = {
+ approval: isApproved,
+ decisionExplanation: reviewExplanation,
+ };
+ const response = await apiCall(
+ `${ApiEndpoint.Workspaces}/${request.workspaceId}/${ApiEndpoint.AirlockRequests}/${request.id}/${ApiEndpoint.AirlockReview}`,
+ HttpMethod.Post,
+ workspaceCtx.workspaceApplicationIdURI,
+ review,
+ );
+ props.onReviewRequest(response.airlockRequest);
+ } catch (err: any) {
+ err.userMessage = "Error reviewing airlock request";
+ setApiError(err);
+ setReviewError(true);
+ }
+ setReviewing(false);
}
- setReviewing(false);
- }
- }, [apiCall, request, workspaceCtx.workspaceApplicationIdURI, reviewExplanation, props]);
+ },
+ [
+ apiCall,
+ request,
+ workspaceCtx.workspaceApplicationIdURI,
+ reviewExplanation,
+ props,
+ ],
+ );
let statusBadge = ;
- let action = ;
+ let action = ;
// Get connection property for review userResource
- let connectUri = '';
+ let connectUri = "";
if (reviewResource?.properties && reviewResource.properties.connection_uri) {
connectUri = reviewResource.properties.connection_uri;
}
@@ -189,128 +273,165 @@ export const AirlockReviewRequest: React.FunctionComponent;
+ case "creating":
+ statusBadge = (
+
+ );
break;
- case 'notCreated':
+ case "notCreated":
statusBadge = Not created;
action = ;
break;
- case 'failed':
- statusBadge = ;
+ case "failed":
+ statusBadge = (
+
+ );
action = ;
break;
- case 'created':
- statusBadge = ;
+ case "created":
+ statusBadge = (
+
+ );
if (resourceNotConnectable) {
- action = ;
+ action = (
+
+ );
} else {
- action = window.open(connectUri)}
- text="View data"
- title="Connect to resource"
- />;
+ action = (
+ window.open(connectUri)}
+ text="View data"
+ title="Connect to resource"
+ />
+ );
}
break;
}
- const currentStep = !proceedToReview ? <>
-
- To securely review the request's data, you need to create a review VM. Click "Create" and a VM will be created with the data
- automatically downloaded onto it. Once you've viewed the data, click "Proceed to review" to make your decision.
-
- {
- reviewResourcesConfigured ? <>
-
-
- 
-
-
Review VM
- { statusBadge }
-
-
-
- { action }
-
-
- {
- otherReviewers && otherReviewers.length > 0 &&
- {
- otherReviewers.length === 1
- ? <>1 other person is reviewing this request.
- : <>{otherReviewers.length} other people are reviewing this request.
- }
+ const currentStep = !proceedToReview ? (
+ <>
+
+ To securely review the request's data, you need to create a review VM.
+ Click "Create" and a VM will be created with the data automatically
+ downloaded onto it. Once you've viewed the data, click "Proceed to
+ review" to make your decision.
+
+ {reviewResourcesConfigured ? (
+ <>
+
+
+
+
+
Review VM
+ {statusBadge}
+
+
+ {action}
+
+ {otherReviewers && otherReviewers.length > 0 && (
+
+ {otherReviewers.length === 1 ? (
+ <>
+ 1 other person is reviewing this request.
+
+ ) : (
+ <>
+ {otherReviewers.length} other people are reviewing this
+ request.
+
+ )}
+
+ )}
+ {reviewResourceError && }
+
+ ) : (
+ <>
+
+ It looks like review VMs aren't set up in your workspace. Please
+ contact your Workspace Owner.
- }
- { reviewResourceError && }
- : <>
-
- It looks like review VMs aren't set up in your workspace. Please contact your Workspace Owner.
-
-
- }
-
-
- setProceedToReview(true)} text="Proceed to review" />
-
- : <>
- setReviewExplanation(newValue || '')}
- multiline
- rows={6}
- required
- />
- {
- reviewError &&
- }
- {
- reviewing
- ?
- :
- setProceedToReview(false)}
- text="Back"
- styles={{root:{float:'left'}}}
- />
- reviewRequest(false)}
- text="Reject"
- styles={destructiveButtonStyles}
- disabled={reviewExplanation.length <= 0}
- />
- reviewRequest(true)}
- text="Approve"
- styles={successButtonStyles}
- disabled={reviewExplanation.length <= 0}
+
+ )}
+
+
+ setProceedToReview(true)}
+ text="Proceed to review"
/>
- }
-
+
+ ) : (
+ <>
+
+ setReviewExplanation(newValue || "")
+ }
+ multiline
+ rows={6}
+ required
+ />
+ {reviewError && }
+ {reviewing ? (
+
+ ) : (
+
+ setProceedToReview(false)}
+ text="Back"
+ styles={{ root: { float: "left" } }}
+ />
+ reviewRequest(false)}
+ text="Reject"
+ styles={destructiveButtonStyles}
+ disabled={reviewExplanation.length <= 0}
+ />
+ reviewRequest(true)}
+ text="Approve"
+ styles={successButtonStyles}
+ disabled={reviewExplanation.length <= 0}
+ />
+
+ )}
+
+ );
return (
<>
@@ -323,66 +444,64 @@ export const AirlockReviewRequest: React.FunctionComponent