[DT-1171] Add auth domain to snapshot access

package.json

@@ -140,6 +140,7 @@
     "build": "npm run codegen && vite build",
     "build-no-code-gen": "vite build",
     "lint": "npm run codegen && eslint  --ext .js --ext .jsx --ext .ts --ext .tsx src cypress",
+    "lint-fix": "npm run codegen && eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx src cypress",
     "test": "npm run codegen && test",
     "codegen": "docker run --rm -v \"${PWD}:/local\" openapitools/openapi-generator-cli:v6.2.1 generate -g typescript-axios -i ${TDR_OPEN_API_YAML_LOCATION:=https://jade.datarepo-dev.broadinstitute.org/data-repository-openapi.yaml} -o /local/src/generated/tdr --skip-validate-spec",
     "clean": "rm -fr build src/generated/*"

src/components/WelcomeView.jsx

@@ -34,6 +34,10 @@ const SubTitle = styled(Typography)({
   fontSize: '16px',
 });
 
+const SubTitleBox = styled(Box)({
+  fontSize: '16px',
+});
+
 const MainContent = styled(Box)(({ theme }) => ({
   display: 'inline-block',
   color: theme.typography.color,
@@ -100,7 +104,7 @@ function WelcomeView({ terraUrl }) {
             Terra Data Repository is a cloud-native platform that allows data owners to{' '}
             <b>govern</b> and <b>share</b> biomedical research data.
           </SubTitle>
-          <SubTitle>
+          <SubTitleBox>
             <a
               href="https://support.terra.bio/hc/en-us/sections/4407099323675-Terra-Data-Repository"
               target="_blank"
@@ -111,7 +115,7 @@ function WelcomeView({ terraUrl }) {
                 <LaunchOutlined fontSize="small" />
               </JadeLink>
             </a>
-          </SubTitle>
+          </SubTitleBox>
           <LoginButton />
           <Header>Terra Data Repository requires a Terra account.</Header>
           <p>

src/components/dataset/data/sidebar/panels/ShareSnapshot.jsx

@@ -16,8 +16,9 @@ import {
 } from '@mui/material';
 import { MoreVert } from '@mui/icons-material';
 import { isEmail } from 'validator';
-import { createSnapshot } from 'actions/index';
+import { createSnapshot, snapshotCreateDetails } from 'actions/index';
 import SnapshotAccess from 'components/snapshot/SnapshotAccess';
+import AuthDomain from 'src/components/snapshot/AuthDomain';
 
 const drawerWidth = 600;
 const sidebarWidth = 56;
@@ -95,20 +96,40 @@ export class ShareSnapshot extends React.PureComponent {
       anchor: null,
       hasError: false,
       errorMsg: '',
+      authDomain: undefined,
     };
   }
 
   static propTypes = {
     classes: PropTypes.object,
+    dataset: PropTypes.object,
     dispatch: PropTypes.func,
+    filterData: PropTypes.object,
     isModal: PropTypes.bool,
     onDismiss: PropTypes.func,
     readers: PropTypes.arrayOf(PropTypes.string),
     setIsSharing: PropTypes.func,
+    snapshotRequest: PropTypes.object,
+  };
+
+  setAuthDomain = (domain) => {
+    this.setState({ authDomain: domain });
   };
 
   saveSnapshot = () => {
-    const { dispatch } = this.props;
+    const { dispatch, snapshotRequest, dataset, filterData } = this.props;
+    const { authDomain } = this.state;
+    dispatch(
+      snapshotCreateDetails({
+        name: snapshotRequest.name,
+        description: snapshotRequest.description,
+        mode: snapshotRequest.mode,
+        assetName: snapshotRequest.assetName,
+        dataset,
+        filterData,
+        authDomain,
+      }),
+    );
     dispatch(createSnapshot(undefined));
   };
 
@@ -126,18 +147,21 @@ export class ShareSnapshot extends React.PureComponent {
         </Typography>
         <SnapshotAccess createMode={true} />
         {!isModal && (
-          <div className={classes.bottom}>
-            <Button
-              variant="contained"
-              color="primary"
-              disableElevation
-              className={clsx(classes.button, classes.section)}
-              onClick={this.saveSnapshot}
-              data-cy="releaseDataset"
-            >
-              Create Snapshot
-            </Button>
-          </div>
+          <>
+            <AuthDomain setParentAuthDomain={this.setAuthDomain} />
+            <div className={classes.bottom}>
+              <Button
+                variant="contained"
+                color="primary"
+                disableElevation
+                className={clsx(classes.button, classes.section)}
+                onClick={this.saveSnapshot}
+                data-cy="releaseDataset"
+              >
+                Create Snapshot
+              </Button>
+            </div>
+          </>
         )}
         {isModal && (
           <div className={classes.modalBottom}>
@@ -157,6 +181,9 @@ export class ShareSnapshot extends React.PureComponent {
 function mapStateToProps(state) {
   return {
     readers: state.snapshots.snapshotRequest.readers,
+    snapshotRequest: state.snapshots.snapshotRequest,
+    dataset: state.datasets.dataset,
+    filterData: state.query.filterData,
   };
 }
 

src/components/snapshot/AuthDomain.test.tsx

@@ -0,0 +1,86 @@
+import { mount } from 'cypress/react';
+import { Router } from 'react-router-dom';
+import { ThemeProvider } from '@mui/material/styles';
+import { Provider } from 'react-redux';
+import React from 'react';
+import createMockStore from 'redux-mock-store';
+import { ManagedGroupMembershipEntry } from 'src/models/group';
+import history from '../../modules/hist';
+import AuthDomain from './AuthDomain';
+import globalTheme from '../../modules/theme';
+
+const mountAuthDomain = (userGroups: Array<ManagedGroupMembershipEntry>) => {
+  const state = {
+    user: {
+      userGroups,
+    },
+  };
+
+  const mockStore = createMockStore([]);
+  const store = mockStore(state);
+
+  cy.intercept('GET', 'https://sam.dsde-dev.broadinstitute.org/api/groups/v1').as('getUserGroups');
+
+  mount(
+    <Router history={history}>
+      <Provider store={store}>
+        <ThemeProvider theme={globalTheme}>
+          <AuthDomain
+            setParentAuthDomain={() => {
+              /* no-op */
+            }}
+          />
+        </ThemeProvider>
+      </Provider>
+    </Router>,
+  );
+};
+
+describe('Test AuthDomain component', () => {
+  it('Displays authorization domain section', () => {
+    mountAuthDomain([]);
+
+    cy.get('label[for="select-authorization-domain-select"]')
+      .should('contain.text', 'Authorization Domain')
+      .should('contain.text', '(optional)');
+  });
+
+  it('Shows authorization domain dropdown with options when user groups exist', () => {
+    const userGroups = [
+      { groupEmail: 'email1', groupName: 'group1', role: 'READER' },
+      { groupEmail: 'email2', groupName: 'group2', role: 'READER' },
+    ];
+    mountAuthDomain(userGroups);
+
+    cy.get('#select-authorization-domain-select')
+      .should('exist')
+      .should('not.be.disabled')
+      .should('have.value', '');
+
+    cy.get('#select-authorization-domain-select').parent().click();
+    cy.get('[data-cy^=menuItem]').should('have.length', userGroups.length);
+  });
+
+  it('Select an authorization domain when user groups exist', () => {
+    const userGroups = [
+      { groupEmail: 'email1', groupName: 'group1', role: 'READER' },
+      { groupEmail: 'email2', groupName: 'group2', role: 'READER' },
+    ];
+    mountAuthDomain(userGroups);
+
+    cy.get('#select-authorization-domain-select').parent().click();
+    cy.get('[data-cy=menuItem-group2]').click();
+    cy.get('#select-authorization-domain-select').should('have.value', 'group2');
+  });
+
+  it('Enables authorization domain dropdown when sufficient user groups', () => {
+    const userGroups = [{ groupEmail: 'email1', groupName: 'group1', role: 'READER' }];
+    mountAuthDomain(userGroups);
+    cy.get('#select-authorization-domain-select').should('not.be.disabled');
+  });
+
+  it('Disables authorization domain dropdown when empty user groups', () => {
+    mountAuthDomain([]);
+    cy.get('#select-authorization-domain-select').should('be.disabled');
+  });
+});

src/components/snapshot/AuthDomain.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box, FormLabel, Link, styled } from '@mui/material';
+import { ManagedGroupMembershipEntry } from 'src/models/group';
+import { AppDispatch } from 'src/store';
+import { TdrState } from 'src/reducers';
+import { useOnMount } from 'src/libs/utils';
+import { LaunchOutlined } from '@mui/icons-material';
+import { connect } from 'react-redux';
+import { getUserGroups } from 'src/actions';
+import JadeDropdown from '../dataset/data/JadeDropdown';
+
+const JadeLink = styled('span')(({ theme }) => theme.mixins.jadeLink);
+
+type AuthDomainProps = {
+  dispatch: AppDispatch;
+  userGroups: Array<ManagedGroupMembershipEntry>;
+  setParentAuthDomain: (domain: string) => void;
+};
+
+function AuthDomain({ dispatch, userGroups, setParentAuthDomain }: Readonly<AuthDomainProps>) {
+  const [selectedAuthDomain, setSelectedAuthDomain] = React.useState<string | undefined>(undefined);
+
+  useOnMount(() => {
+    dispatch(getUserGroups());
+  });
+
+  return (
+    <>
+      <FormLabel
+        sx={{ fontWeight: 700, color: '#333f52' }}
+        htmlFor="select-authorization-domain-select"
+      >
+        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.length < 1}
+        options={userGroups.map((group) => group.groupName)}
+        name="Select Authorization Domain"
+        onSelectedItem={(event) => {
+          const authDomain = event.target.value;
+          setParentAuthDomain(authDomain);
+          setSelectedAuthDomain(authDomain);
+        }}
+        value={selectedAuthDomain ?? ''}
+        includeNoneOption={true}
+      />
+    </>
+  );
+}
+
+function mapStateToProps(state: TdrState) {
+  return {
+    userGroups: state.user.userGroups,
+  };
+}
+
+export default connect(mapStateToProps)(AuthDomain);

src/components/snapshot/SnapshotAccess.tsx

@@ -94,7 +94,7 @@ function SnapshotAccess({
   ];
 
   return (
-    <Grid container spacing={1}>
+    <Grid container spacing={1} sx={{ my: 1 }}>
       <Typography variant="h6">Roles</Typography>
       {canManageUsers && (
         <Grid item xs={12}>