feat: add auth domains to snapshot access

Author: fboulnois

src/components/snapshot/SnapshotAccess.tsx

@@ -2,10 +2,14 @@ import React from 'react';
 import { connect } from 'react-redux';
 import _ from 'lodash';
 import { withStyles } from '@mui/styles';
-import { Grid, Typography } from '@mui/material';
+import { Grid, Typography, Box, Link, FormLabel } from '@mui/material';
+import { styled } from '@mui/system';
+import { LaunchOutlined } from '@mui/icons-material';
+import { ManagedGroupMembershipEntry } from 'src/models/group';
+import { getUserGroups } from 'actions/index';
 import UserList from '../UserList';
 import { SnapshotRoles } from '../../constants';
-import { getRoleMembersFromPolicies } from '../../libs/utils';
+import { getRoleMembersFromPolicies, useOnMount } from '../../libs/utils';
 import {
   addSnapshotPolicyMember,
   removeSnapshotPolicyMember,
@@ -16,20 +20,24 @@ import { TdrState } from '../../reducers';
 import { SnapshotRequest } from '../../reducers/snapshot';
 import { AppDispatch } from '../../store';
 import AddUserAccess, { AccessPermission } from '../common/AddUserAccess';
+import JadeDropdown from '../dataset/data/JadeDropdown';
 
 const styles = () => ({
   helpContainer: {
     padding: '30px 0 10px',
   },
 });
 
+const JadeLink = styled('span')(({ theme }) => theme.mixins.jadeLink);
+
 type SnapshotAccessProps = {
   dispatch: AppDispatch;
   policies: Array<PolicyModel>;
   snapshot: SnapshotModel;
   snapshotRequest: SnapshotRequest;
   userRoles: Array<string>;
   createMode?: boolean;
+  userGroups: Array<ManagedGroupMembershipEntry>;
 };
 
 function SnapshotAccess({
@@ -39,7 +47,14 @@ function SnapshotAccess({
   snapshotRequest,
   userRoles,
   createMode,
+  userGroups,
 }: SnapshotAccessProps) {
+  const [selectedAuthDomain, setSelectedAuthDomain] = React.useState<string | undefined>(undefined);
+
+  useOnMount(() => {
+    dispatch(getUserGroups());
+  });
+
   const transformRoleToCreatePolicy = (role: string): string => `${_.camelCase(role)}s`;
 
   const addUsers = (role: string, usersToAdd: string[]) => {
@@ -94,49 +109,82 @@ function SnapshotAccess({
   ];
 
   return (
-    <Grid container spacing={1}>
-      <Typography variant="h6">Roles</Typography>
-      {canManageUsers && (
-        <Grid item xs={12}>
-          <AddUserAccess permissions={permissions} onAdd={addUsers} />
+    <>
+      <Box sx={{ my: 2 }}>
+        <Grid container spacing={1}>
+          <Typography variant="h6">Roles</Typography>
+          {canManageUsers && (
+            <Grid item xs={12}>
+              <AddUserAccess permissions={permissions} onAdd={addUsers} />
+            </Grid>
+          )}
+          <Grid item xs={12} data-cy="snapshot-stewards">
+            <UserList
+              users={stewards}
+              typeOfUsers="Stewards"
+              canManageUsers={canManageUsers}
+              removeUser={removeUser(SnapshotRoles.STEWARD)}
+            />
+          </Grid>
+          <Grid item xs={12} data-cy="snapshot-readers">
+            <UserList
+              users={readers}
+              typeOfUsers="Readers"
+              canManageUsers={canManageUsers}
+              removeUser={removeUser(SnapshotRoles.READER)}
+              defaultOpen={createMode}
+            />
+          </Grid>
+          <Grid item xs={12} data-cy="snapshot-discoverers">
+            <UserList
+              users={discoverers}
+              typeOfUsers="Discoverers"
+              canManageUsers={canManageUsers}
+              removeUser={removeUser(SnapshotRoles.DISCOVERER)}
+              defaultOpen={createMode}
+            />
+          </Grid>
+          <Grid item xs={12} data-cy="snapshot-aggregate-data-readers">
+            <UserList
+              users={aggregateDataReaders}
+              typeOfUsers="Aggregate Data Readers"
+              canManageUsers={canManageUsers}
+              removeUser={removeUser(SnapshotRoles.AGGREGATE_DATA_READER)}
+              defaultOpen={createMode}
+            />
+          </Grid>
         </Grid>
-      )}
-      <Grid item xs={12} data-cy="snapshot-stewards">
-        <UserList
-          users={stewards}
-          typeOfUsers="Stewards"
-          canManageUsers={canManageUsers}
-          removeUser={removeUser(SnapshotRoles.STEWARD)}
-        />
-      </Grid>
-      <Grid item xs={12} data-cy="snapshot-readers">
-        <UserList
-          users={readers}
-          typeOfUsers="Readers"
-          canManageUsers={canManageUsers}
-          removeUser={removeUser(SnapshotRoles.READER)}
-          defaultOpen={createMode}
-        />
-      </Grid>
-      <Grid item xs={12} data-cy="snapshot-discoverers">
-        <UserList
-          users={discoverers}
-          typeOfUsers="Discoverers"
-          canManageUsers={canManageUsers}
-          removeUser={removeUser(SnapshotRoles.DISCOVERER)}
-          defaultOpen={createMode}
-        />
-      </Grid>
-      <Grid item xs={12} data-cy="snapshot-aggregate-data-readers">
-        <UserList
-          users={aggregateDataReaders}
-          typeOfUsers="Aggregate Data Readers"
-          canManageUsers={canManageUsers}
-          removeUser={removeUser(SnapshotRoles.AGGREGATE_DATA_READER)}
-          defaultOpen={createMode}
-        />
-      </Grid>
-    </Grid>
+      </Box>
+      <FormLabel sx={{ fontWeight: 700, color: '#333f52' }} htmlFor="authorization-domain">
+        Authorization Domain
+        <span style={{ fontWeight: 400, fontStyle: 'italic' }}> - (optional)</span>
+      </FormLabel>
+      <Box sx={{ mb: 1 }}>
+        Authorization Domains restrict data access to only specified individuals in a group and are
+        intended to fulfill requirements you may have for data governed by a compliance standard,
+        such as federal controlled-access data or HIPAA protected data. They follow all snapshot
+        copies and cannot be removed. For more details, see{' '}
+        <Link
+          href="https://support.terra.bio/hc/en-us/articles/360026775691"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <JadeLink>
+            When to use an Authorization Domain
+            <LaunchOutlined fontSize="small" />
+          </JadeLink>
+        </Link>
+        .
+      </Box>
+      <JadeDropdown
+        sx={{ height: '2.5rem' }}
+        disabled={userGroups ? userGroups.length <= 1 : true}
+        options={userGroups ? userGroups.map((group) => group.groupName) : []}
+        name="authorization-domain"
+        onSelectedItem={(event) => setSelectedAuthDomain(event.target.value)}
+        value={selectedAuthDomain || ''}
+      />
+    </>
   );
 }
 
@@ -146,6 +194,7 @@ function mapStateToProps(state: TdrState) {
     snapshot: state.snapshots.snapshot,
     snapshotRequest: state.snapshots.snapshotRequest,
     userRoles: state.snapshots.userRoles,
+    userGroups: state.user.userGroups,
   };
 }