src/views-components/sharing-dialog/sharing-public-access-form-component.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { Grid, StyleRulesCallback, Typography } from '@material-ui/core';
   7 import { Field, WrappedFieldProps } from 'redux-form';
   8 import { WithStyles } from '@material-ui/core/styles';
   9 import withStyles from '@material-ui/core/styles/withStyles';
  10 import { VisibilityLevelSelect } from './visibility-level-select';
  11 import { VisibilityLevel } from 'store/sharing-dialog/sharing-dialog-types';
  12
  13 const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
  14     root: {
  15         padding: `${theme.spacing.unit * 2}px 0`,
  16     },
  17     heading: {
  18         fontSize: '1.25rem',
  19     }
  20 });
  21
  22 interface AccessProps {
  23     visibility: VisibilityLevel;
  24     includePublic: boolean;
  25     onSave: () => void;
  26 }
  27
  28 const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
  29     ({ classes, visibility, includePublic, onSave }: WithStyles<'root' | 'heading'> & AccessProps) =>
  30         <>
  31             <Typography className={classes.heading}>General access</Typography>
  32             <Grid container alignItems='center' spacing={8} className={classes.root}>
  33                 <Grid item xs={8}>
  34                     <Typography variant='subtitle1'>
  35                         {renderVisibilityInfo(visibility)}
  36                     </Typography>
  37                 </Grid>
  38                 <Grid item xs={4} container wrap='nowrap'>
  39                     <Field<{ includePublic: boolean }> name='visibility' component={VisibilityLevelSelectComponent} includePublic={includePublic} onChange={onSave} />
  40                 </Grid>
  41             </Grid>
  42         </>
  43 );
  44
  45 const renderVisibilityInfo = (visibility: VisibilityLevel) => {
  46     switch (visibility) {
  47         case VisibilityLevel.PUBLIC:
  48             return 'Shared with anyone on the Internet';
  49         case VisibilityLevel.ALL_USERS:
  50             return 'Shared with all users on this cluster';
  51         case VisibilityLevel.SHARED:
  52             return 'Shared with specific people';
  53         case VisibilityLevel.PRIVATE:
  54             return 'Not shared';
  55         default:
  56             return '';
  57     }
  58 };
  59
  60 const SharingPublicAccessFormComponent = ({ visibility, includePublic, onSave }: AccessProps) =>
  61     <SharingPublicAccessForm {...{ visibility, includePublic, onSave }} />;
  62
  63 export default SharingPublicAccessFormComponent;
  64
  65 const VisibilityLevelSelectComponent = ({ input, includePublic }: { includePublic: boolean } & WrappedFieldProps) =>
  66     <VisibilityLevelSelect fullWidth disableUnderline includePublic={includePublic} {...input} />;