From 59fc59f324194f2762dae92cf94bd4a05e33cb09 Mon Sep 17 00:00:00 2001 From: Michal Klobukowski Date: Tue, 30 Oct 2018 11:24:44 +0100 Subject: [PATCH] Create visibility level select Feature #14365 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- .../sharing-dialog/sharing-dialog-actions.ts | 20 +++---- .../sharing-dialog/sharing-dialog-types.ts | 9 ++- .../sharing-dialog/permission-select.tsx | 37 +++++-------- .../sharing-public-access-form-component.tsx | 42 +++----------- .../visibility-level-select.tsx | 55 +++++++++++++++++++ 5 files changed, 94 insertions(+), 69 deletions(-) create mode 100644 src/views-components/sharing-dialog/visibility-level-select.tsx diff --git a/src/store/sharing-dialog/sharing-dialog-actions.ts b/src/store/sharing-dialog/sharing-dialog-actions.ts index f118c70fce..2b28668867 100644 --- a/src/store/sharing-dialog/sharing-dialog-actions.ts +++ b/src/store/sharing-dialog/sharing-dialog-actions.ts @@ -4,7 +4,7 @@ import { dialogActions } from "~/store/dialog/dialog-actions"; import { withDialog } from "~/store/dialog/with-dialog"; -import { SHARING_DIALOG_NAME, SharingPublicAccessFormData, SHARING_PUBLIC_ACCESS_FORM_NAME, SHARING_INVITATION_FORM_NAME, SharingManagementFormData, SharingInvitationFormData } from './sharing-dialog-types'; +import { SHARING_DIALOG_NAME, SharingPublicAccessFormData, SHARING_PUBLIC_ACCESS_FORM_NAME, SHARING_INVITATION_FORM_NAME, SharingManagementFormData, SharingInvitationFormData, VisibilityLevel } from './sharing-dialog-types'; import { Dispatch } from 'redux'; import { ServiceRepository } from "~/services/services"; import { FilterBuilder } from '~/services/api/filter-builder'; @@ -95,13 +95,13 @@ const initializePublicAccessForm = (permissionLinks: PermissionResource[]) => const publicAccessFormData: SharingPublicAccessFormData = publicPermission ? { - enabled: publicPermission.name !== PermissionLevel.NONE, - permissions: publicPermission.name as PermissionLevel, + visibility: VisibilityLevel.PUBLIC, permissionUuid: publicPermission.uuid, } : { - enabled: false, - permissions: PermissionLevel.CAN_READ, + visibility: permissionLinks.length > 0 + ? VisibilityLevel.SHARED + : VisibilityLevel.PRIVATE, permissionUuid: '', }; @@ -113,24 +113,24 @@ const savePublicPermissionChanges = async (_: Dispatch, getState: () => RootStat const { user } = state.auth; const dialog = getDialog(state.dialog, SHARING_DIALOG_NAME); if (dialog && user) { - const { permissionUuid, enabled, permissions } = getFormValues(SHARING_PUBLIC_ACCESS_FORM_NAME)(state) as SharingPublicAccessFormData; + const { permissionUuid, visibility } = getFormValues(SHARING_PUBLIC_ACCESS_FORM_NAME)(state) as SharingPublicAccessFormData; if (permissionUuid) { - if (enabled) { + if (visibility === VisibilityLevel.PUBLIC) { await permissionService.update(permissionUuid, { - name: enabled ? permissions : PermissionLevel.NONE + name: PermissionLevel.CAN_READ }); } else { await permissionService.delete(permissionUuid); } - } else if (enabled) { + } else if (visibility === VisibilityLevel.PUBLIC) { await permissionService.create({ ownerUuid: user.uuid, headUuid: dialog.data, tailUuid: getPublicGroupUuid(state), - name: permissions, + name: PermissionLevel.CAN_READ, }); } } diff --git a/src/store/sharing-dialog/sharing-dialog-types.ts b/src/store/sharing-dialog/sharing-dialog-types.ts index ad0239617a..b897a9e67d 100644 --- a/src/store/sharing-dialog/sharing-dialog-types.ts +++ b/src/store/sharing-dialog/sharing-dialog-types.ts @@ -9,9 +9,14 @@ export const SHARING_PUBLIC_ACCESS_FORM_NAME = 'SHARING_PUBLIC_ACCESS_FORM_NAME' export const SHARING_MANAGEMENT_FORM_NAME = 'SHARING_MANAGEMENT_FORM_NAME'; export const SHARING_INVITATION_FORM_NAME = 'SHARING_INVITATION_FORM_NAME'; +export enum VisibilityLevel { + PRIVATE = 'Private', + SHARED = 'Shared', + PUBLIC = 'Public', +} + export interface SharingPublicAccessFormData { - enabled: boolean; - permissions: PermissionLevel; + visibility: VisibilityLevel; permissionUuid: string; } diff --git a/src/views-components/sharing-dialog/permission-select.tsx b/src/views-components/sharing-dialog/permission-select.tsx index 07a1662d0f..da5cd01244 100644 --- a/src/views-components/sharing-dialog/permission-select.tsx +++ b/src/views-components/sharing-dialog/permission-select.tsx @@ -44,30 +44,21 @@ export const formatPermissionLevel = (value: PermissionLevel) => { } }; -type PermissionSelectClasses = 'value'; -const PermissionSelectStyles: StyleRulesCallback = theme => ({ - value: { - marginLeft: theme.spacing.unit, - } -}); - -export const PermissionSelect = withStyles(PermissionSelectStyles)( - ({ classes, ...props }: SelectProps & WithStyles) => - ); +export const PermissionSelect = (props: SelectProps) => + ; const renderPermissionItem = (value: string) => ; diff --git a/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx b/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx index 6f70c2df87..5f57a927d6 100644 --- a/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx +++ b/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx @@ -3,16 +3,15 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { Grid, StyleRulesCallback, Divider, Switch, Typography } from '@material-ui/core'; -import { Field, WrappedFieldProps, formValues, formValueSelector } from 'redux-form'; -import { PermissionSelect, formatPermissionLevel, parsePermissionLevel } from './permission-select'; +import { Grid, StyleRulesCallback, Divider, Typography } from '@material-ui/core'; +import { Field, WrappedFieldProps } from 'redux-form'; import { WithStyles } from '@material-ui/core/styles'; import withStyles from '@material-ui/core/styles/withStyles'; -import { connect } from 'react-redux'; +import { VisibilityLevelSelect } from './visibility-level-select'; const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({ root: { - padding: `${theme.spacing.unit}px 0`, + padding: `${theme.spacing.unit * 2}px 0`, } }); @@ -22,16 +21,10 @@ const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)( - Public access + Public visibility - - + @@ -39,24 +32,5 @@ const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)( export default () => ; -const PublicAccessSwitch = (props: WrappedFieldProps) => - ; - -const publicAccessSwitchStyles: StyleRulesCallback<'root'> = theme => ({ - root: { - margin: `0 -7px`, - } -}); - -const PublicAccessSwitchComponent = withStyles(publicAccessSwitchStyles)( - ({ input, classes }: WrappedFieldProps & WithStyles<'root'>) => - -); - -const PermissionSelectComponent = connect( - (state: any, props: WrappedFieldProps) => ({ - disabled: !formValueSelector(props.meta.form)(state, 'enabled'), - }) -)(({ input, disabled }: WrappedFieldProps & { disabled: boolean }) => { - return ; -}); +const VisibilityLevelSelectComponent = ({ input }: WrappedFieldProps) => + ; diff --git a/src/views-components/sharing-dialog/visibility-level-select.tsx b/src/views-components/sharing-dialog/visibility-level-select.tsx new file mode 100644 index 0000000000..f03b5e99a7 --- /dev/null +++ b/src/views-components/sharing-dialog/visibility-level-select.tsx @@ -0,0 +1,55 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { MenuItem, Select, withStyles, StyleRulesCallback } from '@material-ui/core'; +import Lock from '@material-ui/icons/Lock'; +import People from '@material-ui/icons/People'; +import Public from '@material-ui/icons/Public'; +import { WithStyles } from '@material-ui/core/styles'; +import { SelectProps } from '@material-ui/core/Select'; +import { SelectItem } from './select-item'; +import { VisibilityLevel } from '~/store/sharing-dialog/sharing-dialog-types'; + + +type VisibilityLevelSelectClasses = 'value'; + +const VisibilityLevelSelectStyles: StyleRulesCallback = theme => ({ + value: { + marginLeft: theme.spacing.unit, + } +}); + +export const VisibilityLevelSelect = withStyles(VisibilityLevelSelectStyles)( + ({ classes, ...props }: SelectProps & WithStyles) => + ); + +const renderPermissionItem = (value: string) => + ; + +const getIcon = (value: string) => { + switch (value) { + case VisibilityLevel.PUBLIC: + return Public; + case VisibilityLevel.SHARED: + return People; + case VisibilityLevel.PRIVATE: + return Lock; + default: + return Lock; + } +}; -- 2.30.2