From 79d80e8c222322c0a6339f0242d3efb0f5764c88 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Thu, 14 Jan 2021 18:13:21 -0700
Subject: [PATCH] admin(ui): add radio buttons to MountEditContainer

---
 .../admin/mounts/MountEditContainer.tsx       | 66 +++++++++++++++++--
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/resources/scripts/components/admin/mounts/MountEditContainer.tsx b/resources/scripts/components/admin/mounts/MountEditContainer.tsx
index fbf90efe7..8f3329663 100644
--- a/resources/scripts/components/admin/mounts/MountEditContainer.tsx
+++ b/resources/scripts/components/admin/mounts/MountEditContainer.tsx
@@ -14,8 +14,9 @@ import AdminBox from '@/components/admin/AdminBox';
 import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Form, Formik, FormikHelpers } from 'formik';
+import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
 import MountDeleteButton from '@/components/admin/mounts/MountDeleteButton';
+import Label from '@/components/elements/Label';
 
 interface ctx {
     mount: Mount | undefined;
@@ -35,8 +36,8 @@ interface Values {
     description: string;
     source: string;
     target: string;
-    readOnly: boolean;
-    userMountable: boolean;
+    readOnly: string;
+    userMountable: string;
 }
 
 const EditInformationContainer = () => {
@@ -56,8 +57,8 @@ const EditInformationContainer = () => {
     const submit = ({ name, description, source, target, readOnly, userMountable }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('mount');
 
-        updateMount(mount.id, name, description, source, target, readOnly, userMountable)
-            .then(() => setMount({ ...mount, name, description, source, target, readOnly, userMountable }))
+        updateMount(mount.id, name, description, source, target, readOnly === '1', userMountable === '1')
+            .then(() => setMount({ ...mount, name, description, source, target, readOnly: readOnly === '1', userMountable: userMountable === '1' }))
             .catch(error => {
                 console.error(error);
                 clearAndAddHttpError({ key: 'mount', error });
@@ -73,8 +74,8 @@ const EditInformationContainer = () => {
                 description: mount.description || '',
                 source: mount.source,
                 target: mount.target,
-                readOnly: mount.readOnly,
-                userMountable: mount.userMountable,
+                readOnly: mount.readOnly ? '1' : '0',
+                userMountable: mount.userMountable ? '1' : '0',
             }}
             validationSchema={object().shape({
                 name: string().required().min(1),
@@ -130,6 +131,57 @@ const EditInformationContainer = () => {
                                     </div>
                                 </div>
 
+                                <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                        <Label htmlFor={'readOnly'}>Permissions</Label>
+
+                                        <div>
+                                            <label css={tw`inline-flex items-center mr-2`}>
+                                                <FormikField
+                                                    name={'readOnly'}
+                                                    type={'radio'}
+                                                    value={'0'}
+                                                />
+                                                <span css={tw`ml-2`}>Writable</span>
+                                            </label>
+
+                                            <label css={tw`inline-flex items-center ml-2`}>
+                                                <FormikField
+                                                    name={'readOnly'}
+                                                    type={'radio'}
+                                                    value={'1'}
+                                                />
+                                                <span css={tw`ml-2`}>Read Only</span>
+                                            </label>
+                                        </div>
+                                    </div>
+
+                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                        <Label htmlFor={'userMountable'}>User Mountable</Label>
+
+                                        <div>
+                                            <label css={tw`inline-flex items-center mr-2`}>
+                                                <FormikField
+                                                    name={'userMountable'}
+                                                    type={'radio'}
+                                                    value={'0'}
+                                                />
+                                                <span css={tw`ml-2`}>Admin Only</span>
+                                            </label>
+
+                                            <label css={tw`inline-flex items-center ml-2`}>
+                                                <FormikField
+                                                    name={'userMountable'}
+                                                    type={'radio'}
+                                                    value={'1'}
+
+                                                />
+                                                <span css={tw`ml-2`}>Users</span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+
                                 <div css={tw`w-full flex flex-row items-center mt-6`}>
                                     <div css={tw`flex`}>
                                         <MountDeleteButton