Check permissions for playlists

ui/src/playlist/PlaylistList.js

@@ -1,15 +1,16 @@
 import React from 'react'
 import {
-  Datagrid,
-  TextField,
   BooleanField,
-  NumberField,
+  Datagrid,
   DateField,
-  Filter,
-  SearchInput,
   EditButton,
+  Filter,
+  NumberField,
+  SearchInput,
+  TextField,
 } from 'react-admin'
 import { DurationField, List } from '../common'
+import Writable, { isWritable } from './Writable'
 
 const PlaylistFilter = (props) => (
   <Filter {...props}>
@@ -19,14 +20,17 @@ const PlaylistFilter = (props) => (
 
 const PlaylistList = (props) => (
   <List {...props} exporter={false} filters={<PlaylistFilter />}>
-    <Datagrid rowClick="show">
+    <Datagrid rowClick="show" isRowSelectable={(r) => isWritable(r.owner)}>
       <TextField source="name" />
       <TextField source="owner" />
       <BooleanField source="public" />
       <NumberField source="songCount" />
       <DurationField source="duration" />
       <DateField source="updatedAt" />
-      <EditButton />
+      <Writable>
+        <EditButton />
+      </Writable>
+      />
     </Datagrid>
   </List>
 )

ui/src/playlist/PlaylistShow.js

@@ -6,6 +6,7 @@ import { Title } from '../common'
 import PlaylistSongs from './PlaylistSongs'
 import PlaylistActions from './PlaylistActions'
 import PlaylistSongBulkActions from './PlaylistSongBulkActions'
+import { isReadOnly } from './Writable'
 
 const PlaylistShow = (props) => {
   const viewVersion = useSelector((s) => s.admin.ui && s.admin.ui.viewVersion)
@@ -23,6 +24,7 @@ const PlaylistShow = (props) => {
       <PlaylistSongs
         {...props}
         playlistId={props.id}
+        readOnly={isReadOnly(record && record.owner)}
         title={<Title subTitle={record && record.name} />}
         actions={<PlaylistActions />}
         filter={{ playlist_id: props.id }}

ui/src/playlist/PlaylistSongs.js

@@ -49,7 +49,7 @@ const useStyles = makeStyles(
     },
     noResults: { padding: 20 },
     row: {
-      cursor: 'move',
+      cursor: (props) => (props.readOnly ? 'arrow' : 'move'),
     },
   }),
   { name: 'RaList' }
@@ -61,6 +61,13 @@ const useStylesListToolbar = makeStyles({
   },
 })
 
+const ReorderableList = ({ readOnly, children, ...rest }) => {
+  if (readOnly) {
+    return children
+  }
+  return <ReactDragListView {...rest}>{children}</ReactDragListView>
+}
+
 const PlaylistSongs = (props) => {
   const classes = useStyles(props)
   const classesToolbar = useStylesListToolbar(props)
@@ -70,7 +77,7 @@ const PlaylistSongs = (props) => {
   const dataProvider = useDataProvider()
   const refresh = useRefresh()
   const notify = useNotify()
-  const { bulkActionButtons, expand, className, playlistId } = props
+  const { bulkActionButtons, expand, className, playlistId, readOnly } = props
   const { data, ids, version } = controllerProps
 
   const anySong = data[ids[0]]
@@ -136,7 +143,11 @@ const PlaylistSongs = (props) => {
               size={'small'}
             />
           ) : (
-            <ReactDragListView onDragEnd={handleDragEnd} nodeSelector={'tr'}>
+            <ReorderableList
+              readOnly={readOnly}
+              onDragEnd={handleDragEnd}
+              nodeSelector={'tr'}
+            >
               <SongDatagrid
                 classes={classes}
                 expand={!isXsmall && <SongDetails />}
@@ -158,7 +169,7 @@ const PlaylistSongs = (props) => {
                   showStar={false}
                 />
               </SongDatagrid>
-            </ReactDragListView>
+            </ReorderableList>
           )}
         </Card>
       </div>

ui/src/playlist/Writable.js

@@ -0,0 +1,22 @@
+import { cloneElement } from 'react'
+
+export const isWritable = (owner) => {
+  return (
+    localStorage.getItem('username') === owner ||
+    localStorage.getItem('role') === 'admin'
+  )
+}
+
+export const isReadOnly = (owner) => {
+  return !isWritable(owner)
+}
+
+const Writable = (props) => {
+  const { record, children } = props
+  if (isWritable(record.owner)) {
+    return cloneElement(children, props)
+  }
+  return null
+}
+
+export default Writable