Skip to content

Commit dc82133

Browse files
fboulnoisfboulnois
authored
[DT-1171] Add auth domain to snapshot access (#1752)
1 parent 46f7c74 commit dc82133

File tree

6 files changed

+211
-17
lines changed

6 files changed

+211
-17
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"build": "npm run codegen && vite build",
141141
"build-no-code-gen": "vite build",
142142
"lint": "npm run codegen && eslint --ext .js --ext .jsx --ext .ts --ext .tsx src cypress",
143+
"lint-fix": "npm run codegen && eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx src cypress",
143144
"test": "npm run codegen && test",
144145
"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",
145146
"clean": "rm -fr build src/generated/*"

‎src/components/WelcomeView.jsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ const SubTitle = styled(Typography)({
3434
fontSize: '16px',
3535
});
3636

37+
const SubTitleBox = styled(Box)({
38+
fontSize: '16px',
39+
});
40+
3741
const MainContent = styled(Box)(({ theme }) => ({
3842
display: 'inline-block',
3943
color: theme.typography.color,
@@ -100,7 +104,7 @@ function WelcomeView({ terraUrl }) {
100104
Terra Data Repository is a cloud-native platform that allows data owners to{' '}
101105
<b>govern</b> and <b>share</b> biomedical research data.
102106
</SubTitle>
103-
<SubTitle>
107+
<SubTitleBox>
104108
<a
105109
href="https://support.terra.bio/hc/en-us/sections/4407099323675-Terra-Data-Repository"
106110
target="_blank"
@@ -111,7 +115,7 @@ function WelcomeView({ terraUrl }) {
111115
<LaunchOutlined fontSize="small" />
112116
</JadeLink>
113117
</a>
114-
</SubTitle>
118+
</SubTitleBox>
115119
<LoginButton />
116120
<Header>Terra Data Repository requires a Terra account.</Header>
117121
<p>

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

+41-14
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ import {
1616
} from '@mui/material';
1717
import { MoreVert } from '@mui/icons-material';
1818
import { isEmail } from 'validator';
19-
import { createSnapshot } from 'actions/index';
19+
import { createSnapshot, snapshotCreateDetails } from 'actions/index';
2020
import SnapshotAccess from 'components/snapshot/SnapshotAccess';
21+
import AuthDomain from 'src/components/snapshot/AuthDomain';
2122

2223
const drawerWidth = 600;
2324
const sidebarWidth = 56;
@@ -95,20 +96,40 @@ export class ShareSnapshot extends React.PureComponent {
9596
anchor: null,
9697
hasError: false,
9798
errorMsg: '',
99+
authDomain: undefined,
98100
};
99101
}
100102

101103
static propTypes = {
102104
classes: PropTypes.object,
105+
dataset: PropTypes.object,
103106
dispatch: PropTypes.func,
107+
filterData: PropTypes.object,
104108
isModal: PropTypes.bool,
105109
onDismiss: PropTypes.func,
106110
readers: PropTypes.arrayOf(PropTypes.string),
107111
setIsSharing: PropTypes.func,
112+
snapshotRequest: PropTypes.object,
113+
};
114+
115+
setAuthDomain = (domain) => {
116+
this.setState({ authDomain: domain });
108117
};
109118

110119
saveSnapshot = () => {
111-
const { dispatch } = this.props;
120+
const { dispatch, snapshotRequest, dataset, filterData } = this.props;
121+
const { authDomain } = this.state;
122+
dispatch(
123+
snapshotCreateDetails({
124+
name: snapshotRequest.name,
125+
description: snapshotRequest.description,
126+
mode: snapshotRequest.mode,
127+
assetName: snapshotRequest.assetName,
128+
dataset,
129+
filterData,
130+
authDomain,
131+
}),
132+
);
112133
dispatch(createSnapshot(undefined));
113134
};
114135

@@ -126,18 +147,21 @@ export class ShareSnapshot extends React.PureComponent {
126147
</Typography>
127148
<SnapshotAccess createMode={true} />
128149
{!isModal && (
129-
<div className={classes.bottom}>
130-
<Button
131-
variant="contained"
132-
color="primary"
133-
disableElevation
134-
className={clsx(classes.button, classes.section)}
135-
onClick={this.saveSnapshot}
136-
data-cy="releaseDataset"
137-
>
138-
Create Snapshot
139-
</Button>
140-
</div>
150+
<>
151+
<AuthDomain setParentAuthDomain={this.setAuthDomain} />
152+
<div className={classes.bottom}>
153+
<Button
154+
variant="contained"
155+
color="primary"
156+
disableElevation
157+
className={clsx(classes.button, classes.section)}
158+
onClick={this.saveSnapshot}
159+
data-cy="releaseDataset"
160+
>
161+
Create Snapshot
162+
</Button>
163+
</div>
164+
</>
141165
)}
142166
{isModal && (
143167
<div className={classes.modalBottom}>
@@ -157,6 +181,9 @@ export class ShareSnapshot extends React.PureComponent {
157181
function mapStateToProps(state) {
158182
return {
159183
readers: state.snapshots.snapshotRequest.readers,
184+
snapshotRequest: state.snapshots.snapshotRequest,
185+
dataset: state.datasets.dataset,
186+
filterData: state.query.filterData,
160187
};
161188
}
162189

‎src/components/snapshot/AuthDomain.test.tsx

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { mount } from 'cypress/react';
2+
import { Router } from 'react-router-dom';
3+
import { ThemeProvider } from '@mui/material/styles';
4+
import { Provider } from 'react-redux';
5+
import React from 'react';
6+
import createMockStore from 'redux-mock-store';
7+
import { ManagedGroupMembershipEntry } from 'src/models/group';
8+
import history from '../../modules/hist';
9+
import AuthDomain from './AuthDomain';
10+
import globalTheme from '../../modules/theme';
11+
12+
const mountAuthDomain = (userGroups: Array<ManagedGroupMembershipEntry>) => {
13+
const state = {
14+
user: {
15+
userGroups,
16+
},
17+
};
18+
19+
const mockStore = createMockStore([]);
20+
const store = mockStore(state);
21+
22+
cy.intercept('GET', 'https://sam.dsde-dev.broadinstitute.org/api/groups/v1').as('getUserGroups');
23+
24+
mount(
25+
<Router history={history}>
26+
<Provider store={store}>
27+
<ThemeProvider theme={globalTheme}>
28+
<AuthDomain
29+
setParentAuthDomain={() => {
30+
/* no-op */
31+
}}
32+
/>
33+
</ThemeProvider>
34+
</Provider>
35+
</Router>,
36+
);
37+
};
38+
39+
describe('Test AuthDomain component', () => {
40+
it('Displays authorization domain section', () => {
41+
mountAuthDomain([]);
42+
43+
cy.get('label[for="select-authorization-domain-select"]')
44+
.should('contain.text', 'Authorization Domain')
45+
.should('contain.text', '(optional)');
46+
});
47+
48+
it('Shows authorization domain dropdown with options when user groups exist', () => {
49+
const userGroups = [
50+
{ groupEmail: 'email1', groupName: 'group1', role: 'READER' },
51+
{ groupEmail: 'email2', groupName: 'group2', role: 'READER' },
52+
];
53+
mountAuthDomain(userGroups);
54+
55+
cy.get('#select-authorization-domain-select')
56+
.should('exist')
57+
.should('not.be.disabled')
58+
.should('have.value', '');
59+
60+
cy.get('#select-authorization-domain-select').parent().click();
61+
cy.get('[data-cy^=menuItem]').should('have.length', userGroups.length);
62+
});
63+
64+
it('Select an authorization domain when user groups exist', () => {
65+
const userGroups = [
66+
{ groupEmail: 'email1', groupName: 'group1', role: 'READER' },
67+
{ groupEmail: 'email2', groupName: 'group2', role: 'READER' },
68+
];
69+
mountAuthDomain(userGroups);
70+
71+
cy.get('#select-authorization-domain-select').parent().click();
72+
cy.get('[data-cy=menuItem-group2]').click();
73+
cy.get('#select-authorization-domain-select').should('have.value', 'group2');
74+
});
75+
76+
it('Enables authorization domain dropdown when sufficient user groups', () => {
77+
const userGroups = [{ groupEmail: 'email1', groupName: 'group1', role: 'READER' }];
78+
mountAuthDomain(userGroups);
79+
cy.get('#select-authorization-domain-select').should('not.be.disabled');
80+
});
81+
82+
it('Disables authorization domain dropdown when empty user groups', () => {
83+
mountAuthDomain([]);
84+
cy.get('#select-authorization-domain-select').should('be.disabled');
85+
});
86+
});

‎src/components/snapshot/AuthDomain.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import { Box, FormLabel, Link, styled } from '@mui/material';
3+
import { ManagedGroupMembershipEntry } from 'src/models/group';
4+
import { AppDispatch } from 'src/store';
5+
import { TdrState } from 'src/reducers';
6+
import { useOnMount } from 'src/libs/utils';
7+
import { LaunchOutlined } from '@mui/icons-material';
8+
import { connect } from 'react-redux';
9+
import { getUserGroups } from 'src/actions';
10+
import JadeDropdown from '../dataset/data/JadeDropdown';
11+
12+
const JadeLink = styled('span')(({ theme }) => theme.mixins.jadeLink);
13+
14+
type AuthDomainProps = {
15+
dispatch: AppDispatch;
16+
userGroups: Array<ManagedGroupMembershipEntry>;
17+
setParentAuthDomain: (domain: string) => void;
18+
};
19+
20+
function AuthDomain({ dispatch, userGroups, setParentAuthDomain }: Readonly<AuthDomainProps>) {
21+
const [selectedAuthDomain, setSelectedAuthDomain] = React.useState<string | undefined>(undefined);
22+
23+
useOnMount(() => {
24+
dispatch(getUserGroups());
25+
});
26+
27+
return (
28+
<>
29+
<FormLabel
30+
sx={{ fontWeight: 700, color: '#333f52' }}
31+
htmlFor="select-authorization-domain-select"
32+
>
33+
Authorization Domain
34+
<span style={{ fontWeight: 400, fontStyle: 'italic' }}> - (optional)</span>
35+
</FormLabel>
36+
<Box sx={{ mb: 1 }}>
37+
Authorization Domains restrict data access to only specified individuals in a group and are
38+
intended to fulfill requirements you may have for data governed by a compliance standard,
39+
such as federal controlled-access data or HIPAA protected data. They follow all snapshot
40+
copies and cannot be removed. For more details, see{' '}
41+
<Link
42+
href="https://support.terra.bio/hc/en-us/articles/360026775691"
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
>
46+
<JadeLink>
47+
When to use an Authorization Domain
48+
<LaunchOutlined fontSize="small" />
49+
</JadeLink>
50+
</Link>
51+
.
52+
</Box>
53+
<JadeDropdown
54+
sx={{ height: '2.5rem' }}
55+
disabled={userGroups.length < 1}
56+
options={userGroups.map((group) => group.groupName)}
57+
name="Select Authorization Domain"
58+
onSelectedItem={(event) => {
59+
const authDomain = event.target.value;
60+
setParentAuthDomain(authDomain);
61+
setSelectedAuthDomain(authDomain);
62+
}}
63+
value={selectedAuthDomain ?? ''}
64+
includeNoneOption={true}
65+
/>
66+
</>
67+
);
68+
}
69+
70+
function mapStateToProps(state: TdrState) {
71+
return {
72+
userGroups: state.user.userGroups,
73+
};
74+
}
75+
76+
export default connect(mapStateToProps)(AuthDomain);

‎src/components/snapshot/SnapshotAccess.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function SnapshotAccess({
9494
];
9595

9696
return (
97-
<Grid container spacing={1}>
97+
<Grid container spacing={1} sx={{ my: 1 }}>
9898
<Typography variant="h6">Roles</Typography>
9999
{canManageUsers && (
100100
<Grid item xs={12}>

0 commit comments

Comments
 (0)