X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/527f2f9488f6f3a795bf70964921107d0ac10c12..a48138fa7227595bba0db267a4c37832cba9afa2:/src/views-components/sharing-dialog/permission-select.tsx

diff --git a/src/views-components/sharing-dialog/permission-select.tsx b/src/views-components/sharing-dialog/permission-select.tsx
index c16c483771..90b4f83d04 100644
--- a/src/views-components/sharing-dialog/permission-select.tsx
+++ b/src/views-components/sharing-dialog/permission-select.tsx
@@ -3,12 +3,13 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { MenuItem, Grid, Select, withStyles, StyleRulesCallback } from '@material-ui/core';
+import { MenuItem, Select } from '@material-ui/core';
 import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
 import Edit from '@material-ui/icons/Edit';
 import Computer from '@material-ui/icons/Computer';
-import { WithStyles } from '@material-ui/core/styles';
 import { SelectProps } from '@material-ui/core/Select';
+import { SelectItem } from './select-item';
+import { PermissionLevel } from '../../models/permission';
 
 export enum PermissionSelectValue {
     READ = 'Read',
@@ -16,56 +17,50 @@ export enum PermissionSelectValue {
     MANAGE = 'Manage',
 }
 
-type PermissionSelectClasses = 'value';
-
-const PermissionSelectStyles: StyleRulesCallback<PermissionSelectClasses> = theme => ({
-    value: {
-        marginLeft: theme.spacing.unit,
+export const parsePermissionLevel = (value: PermissionSelectValue) => {
+    switch (value) {
+        case PermissionSelectValue.READ:
+            return PermissionLevel.CAN_READ;
+        case PermissionSelectValue.WRITE:
+            return PermissionLevel.CAN_WRITE;
+        case PermissionSelectValue.MANAGE:
+            return PermissionLevel.CAN_MANAGE;
+        default:
+            return PermissionLevel.NONE;
     }
-});
-
-export const PermissionSelect = withStyles(PermissionSelectStyles)(
-    ({ classes, ...props }: SelectProps & WithStyles<PermissionSelectClasses>) =>
-        <Select
-            {...props}
-            renderValue={renderPermissionItem}
-            inputProps={{ classes }}>
-            <MenuItem value={PermissionSelectValue.READ}>
-                {renderPermissionItem(PermissionSelectValue.READ)}
-            </MenuItem>
-            <MenuItem value={PermissionSelectValue.WRITE}>
-                {renderPermissionItem(PermissionSelectValue.WRITE)}
-            </MenuItem>
-            <MenuItem value={PermissionSelectValue.MANAGE}>
-                {renderPermissionItem(PermissionSelectValue.MANAGE)}
-            </MenuItem>
-        </Select>);
+};
 
-const renderPermissionItem = (value: string) =>
-    <PermissionItem {...{ value }} />;
+export const formatPermissionLevel = (value: PermissionLevel) => {
+    switch (value) {
+        case PermissionLevel.CAN_READ:
+            return PermissionSelectValue.READ;
+        case PermissionLevel.CAN_WRITE:
+            return PermissionSelectValue.WRITE;
+        case PermissionLevel.CAN_MANAGE:
+            return PermissionSelectValue.MANAGE;
+        default:
+            return PermissionSelectValue.READ;
+    }
+};
 
-type PermissionItemClasses = 'value' | 'icon';
 
-const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
-    value: {
-        marginLeft: theme.spacing.unit,
-    },
-    icon: {
-        margin: `-${theme.spacing.unit / 2}px 0`
-    }
-});
+export const PermissionSelect = (props: SelectProps) =>
+    <Select
+        {...props}
+        renderValue={renderPermissionItem}>
+        <MenuItem value={PermissionSelectValue.READ}>
+            {renderPermissionItem(PermissionSelectValue.READ)}
+        </MenuItem>
+        <MenuItem value={PermissionSelectValue.WRITE}>
+            {renderPermissionItem(PermissionSelectValue.WRITE)}
+        </MenuItem>
+        <MenuItem value={PermissionSelectValue.MANAGE}>
+            {renderPermissionItem(PermissionSelectValue.MANAGE)}
+        </MenuItem>
+    </Select>;
 
-const PermissionItem = withStyles(permissionItemStyles)(
-    ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) => {
-        const Icon = getIcon(value);
-        return (
-            <Grid container alignItems='center'>
-                <Icon className={classes.icon} />
-                <span className={classes.value}>
-                    {value}
-                </span>
-            </Grid>);
-    });
+const renderPermissionItem = (value: string) =>
+    <SelectItem {...{ value, icon: getIcon(value) }} />;
 
 const getIcon = (value: string) => {
     switch (value) {