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