feat(frontend): deactivate permissions buttons if user is not owner

These buttons and their functionality only work if the user is the owner, so it doesn't make sense to make it possible to press them otherwise…

Signed-off-by: Philip Molares <philip.molares@udo.edu>

frontend/src/components/editor-page/document-bar/permissions/permission-section-users.tsx

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,22 +8,27 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
 import { setNotePermissionsFromServer } from '../../../../redux/note-details/methods'
 import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
 import { PermissionAddEntryField } from './permission-add-entry-field'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import { PermissionEntryUser } from './permission-entry-user'
 import React, { Fragment, useCallback, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Section of the permission modal for managing user access to the note.
+ *
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionSectionUsers: React.FC = () => {
+export const PermissionSectionUsers: React.FC<PermissionDisabledProps> = ({ disabled }) => {
   useTranslation()
   const userPermissions = useApplicationState((state) => state.noteDetails.permissions.sharedToUsers)
   const noteId = useApplicationState((state) => state.noteDetails.primaryAddress)
   const { showErrorNotification } = useUiNotifications()
 
   const userEntries = useMemo(() => {
-    return userPermissions.map((entry) => <PermissionEntryUser key={entry.username} entry={entry} />)
-  }, [userPermissions])
+    return userPermissions.map((entry) => (
+      <PermissionEntryUser key={entry.username} entry={entry} disabled={disabled} />
+    ))
+  }, [userPermissions, disabled])
 
   const onAddEntry = useCallback(
     (username: string) => {
@@ -43,7 +48,11 @@ export const PermissionSectionUsers: React.FC = () => {
       </h5>
       <ul className={'list-group'}>
         {userEntries}
-        <PermissionAddEntryField onAddEntry={onAddEntry} i18nKey={'editor.modal.permissions.addUser'} />
+        <PermissionAddEntryField
+          onAddEntry={onAddEntry}
+          i18nKey={'editor.modal.permissions.addUser'}
+          disabled={disabled}
+        />
       </ul>
     </Fragment>
   )