From e7e81cf67088c74e87d420f8b6e073e6b7f725b3 Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Fri, 24 Mar 2023 18:13:39 +0100
Subject: [PATCH] feat(frontend): deactivate permissions buttons if user is not
 owner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../permission-add-entry-field.tsx            | 24 +++++++++++++++----
 .../permissions/permission-disabled.prop.ts   |  9 +++++++
 .../permissions/permission-entry-buttons.tsx  | 12 +++++++---
 .../permission-entry-special-group.tsx        | 13 ++++++++--
 .../permissions/permission-entry-user.tsx     | 10 ++++++--
 .../permissions/permission-modal.tsx          |  8 ++++---
 .../permissions/permission-owner-info.tsx     | 10 ++++++--
 .../permissions/permission-section-owner.tsx  |  9 ++++---
 .../permission-section-special-groups.tsx     | 21 ++++++++++++----
 .../permissions/permission-section-users.tsx  | 19 +++++++++++----
 10 files changed, 107 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/editor-page/document-bar/permissions/permission-disabled.prop.ts

diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
index 53802af8c..f4e71e666 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
@@ -1,10 +1,11 @@
 /*
- * 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
  */
 import { useOnInputChange } from '../../../../hooks/common/use-on-input-change'
 import { UiIcon } from '../../../common/icons/ui-icon'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import React, { useCallback, useState } from 'react'
 import { Button, FormControl, InputGroup } from 'react-bootstrap'
 import { Plus as IconPlus } from 'react-bootstrap-icons'
@@ -20,8 +21,13 @@ export interface PermissionAddEntryFieldProps {
  *
  * @param onAddEntry Callback that is fired with the entered username as identifier of the entry to add.
  * @param i18nKey The localization key for the submit button.
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps> = ({ onAddEntry, i18nKey }) => {
+export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps & PermissionDisabledProps> = ({
+  onAddEntry,
+  i18nKey,
+  disabled
+}) => {
   const { t } = useTranslation()
 
   const [newEntryIdentifier, setNewEntryIdentifier] = useState('')
@@ -34,8 +40,18 @@ export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps> = (
   return (
     <li className={'list-group-item'}>
       <InputGroup className={'me-1 mb-1'}>
-        <FormControl value={newEntryIdentifier} placeholder={t(i18nKey) ?? undefined} onChange={onChange} />
-        <Button variant='light' className={'text-secondary ms-2'} title={t(i18nKey) ?? undefined} onClick={onSubmit}>
+        <FormControl
+          value={newEntryIdentifier}
+          placeholder={t(i18nKey) ?? undefined}
+          onChange={onChange}
+          disabled={disabled}
+        />
+        <Button
+          variant='light'
+          className={'text-secondary ms-2'}
+          title={t(i18nKey) ?? undefined}
+          onClick={onSubmit}
+          disabled={disabled}>
           <UiIcon icon={IconPlus} />
         </Button>
       </InputGroup>
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-disabled.prop.ts b/frontend/src/components/editor-page/document-bar/permissions/permission-disabled.prop.ts
new file mode 100644
index 000000000..b7f6724f4
--- /dev/null
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-disabled.prop.ts
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export interface PermissionDisabledProps {
+  disabled: boolean
+}
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
index a899f0087..a45df0a95 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
@@ -1,9 +1,10 @@
 /*
- * 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
  */
 import { UiIcon } from '../../../common/icons/ui-icon'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import { AccessLevel } from './types'
 import React, { useMemo } from 'react'
 import { Button, ToggleButtonGroup } from 'react-bootstrap'
@@ -41,14 +42,16 @@ export interface PermissionEntryButtonsProps {
  * @param onSetReadOnly Callback that is fired when the entry is changed to read-only permission.
  * @param onSetWriteable Callback that is fired when the entry is changed to writeable permission.
  * @param onRemove Callback that is fired when the entry is removed.
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps> = ({
+export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps & PermissionDisabledProps> = ({
   name,
   type,
   currentSetting,
   onSetReadOnly,
   onSetWriteable,
-  onRemove
+  onRemove,
+  disabled
 }) => {
   const { t } = useTranslation()
 
@@ -74,18 +77,21 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps> = ({
       <Button
         variant='light'
         className={'text-danger me-2'}
+        disabled={disabled}
         title={t(i18nKeys.remove, { name }) ?? undefined}
         onClick={onRemove}>
         <UiIcon icon={IconX} />
       </Button>
       <ToggleButtonGroup type='radio' name='edit-mode' value={currentSetting}>
         <Button
+          disabled={disabled}
           title={t(i18nKeys.setReadOnly, { name }) ?? undefined}
           variant={currentSetting === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
           onClick={onSetReadOnly}>
           <UiIcon icon={IconEye} />
         </Button>
         <Button
+          disabled={disabled}
           title={t(i18nKeys.setWriteable, { name }) ?? undefined}
           variant={currentSetting === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
           onClick={onSetWriteable}>
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
index 2f72b36ea..e4d63f96a 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-special-group.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,6 +8,7 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
 import { setNotePermissionsFromServer } from '../../../../redux/note-details/methods'
 import { IconButton } from '../../../common/icon-button/icon-button'
 import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import { AccessLevel, SpecialGroup } from './types'
 import React, { useCallback, useMemo } from 'react'
 import { ToggleButtonGroup } from 'react-bootstrap'
@@ -26,8 +27,13 @@ export interface PermissionEntrySpecialGroupProps {
  *
  * @param level The access level that is currently set for the group.
  * @param type The type of the special group. Must be either {@link SpecialGroup.EVERYONE} or {@link SpecialGroup.LOGGED_IN}.
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupProps> = ({ level, type }) => {
+export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupProps & PermissionDisabledProps> = ({
+  level,
+  type,
+  disabled
+}) => {
   const noteId = useApplicationState((state) => state.noteDetails.primaryAddress)
   const { t } = useTranslation()
   const { showErrorNotification } = useUiNotifications()
@@ -75,6 +81,7 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
             title={t('editor.modal.permissions.denyGroup', { name }) ?? undefined}
             variant={level === AccessLevel.NONE ? 'secondary' : 'outline-secondary'}
             onClick={onSetEntryDenied}
+            disabled={disabled}
             className={'p-1'}
           />
           <IconButton
@@ -82,6 +89,7 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
             title={t('editor.modal.permissions.viewOnlyGroup', { name }) ?? undefined}
             variant={level === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
             onClick={onSetEntryReadOnly}
+            disabled={disabled}
             className={'p-1'}
           />
           <IconButton
@@ -89,6 +97,7 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
             title={t('editor.modal.permissions.editGroup', { name }) ?? undefined}
             variant={level === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
             onClick={onSetEntryWriteable}
+            disabled={disabled}
             className={'p-1'}
           />
         </ToggleButtonGroup>
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx
index 4eb2e8cb8..db2fd17a5 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-entry-user.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
  */
@@ -11,6 +11,7 @@ import { setNotePermissionsFromServer } from '../../../../redux/note-details/met
 import { ShowIf } from '../../../common/show-if/show-if'
 import { UserAvatarForUser } from '../../../common/user-avatar/user-avatar-for-user'
 import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import { PermissionEntryButtons, PermissionType } from './permission-entry-buttons'
 import { AccessLevel } from './types'
 import React, { useCallback } from 'react'
@@ -24,8 +25,12 @@ export interface PermissionEntryUserProps {
  * Permission entry for a user that can be set to read-only or writeable and can be removed.
  *
  * @param entry The permission entry.
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionEntryUser: React.FC<PermissionEntryUserProps> = ({ entry }) => {
+export const PermissionEntryUser: React.FC<PermissionEntryUserProps & PermissionDisabledProps> = ({
+  entry,
+  disabled
+}) => {
   const noteId = useApplicationState((state) => state.noteDetails.primaryAddress)
   const { showErrorNotification } = useUiNotifications()
 
@@ -72,6 +77,7 @@ export const PermissionEntryUser: React.FC<PermissionEntryUserProps> = ({ entry
           onSetReadOnly={onSetEntryReadOnly}
           onSetWriteable={onSetEntryWriteable}
           onRemove={onRemoveEntry}
+          disabled={disabled}
         />
       </li>
     </ShowIf>
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
index d4898fc58..5cf8e015c 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-modal.tsx
@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { useIsOwner } from '../../../../hooks/common/use-is-owner'
 import type { ModalVisibilityProps } from '../../../common/modals/common-modal'
 import { CommonModal } from '../../../common/modals/common-modal'
 import { PermissionSectionOwner } from './permission-section-owner'
@@ -18,12 +19,13 @@ import { Modal } from 'react-bootstrap'
  * @param onHide Callback that is fired when the modal is about to be closed.
  */
 export const PermissionModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
+  const isOwner = useIsOwner()
   return (
     <CommonModal show={show} onHide={onHide} showCloseButton={true} titleI18nKey={'editor.modal.permissions.title'}>
       <Modal.Body>
-        <PermissionSectionOwner />
-        <PermissionSectionUsers />
-        <PermissionSectionSpecialGroups />
+        <PermissionSectionOwner disabled={!isOwner} />
+        <PermissionSectionUsers disabled={!isOwner} />
+        <PermissionSectionSpecialGroups disabled={!isOwner} />
       </Modal.Body>
     </CommonModal>
   )
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
index 4ffacc033..0d4047520 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
@@ -1,11 +1,12 @@
 /*
- * 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
  */
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import { UiIcon } from '../../../common/icons/ui-icon'
 import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import React, { Fragment } from 'react'
 import { Button } from 'react-bootstrap'
 import { Pencil as IconPencil } from 'react-bootstrap-icons'
@@ -19,8 +20,12 @@ export interface PermissionOwnerInfoProps {
  * Content for the owner section of the permission modal that shows the current note owner.
  *
  * @param onEditOwner Callback that is fired when the user chooses to change the note owner.
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps> = ({ onEditOwner }) => {
+export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps & PermissionDisabledProps> = ({
+  onEditOwner,
+  disabled
+}) => {
   const { t } = useTranslation()
   const noteOwner = useApplicationState((state) => state.noteDetails.permissions.owner)
 
@@ -29,6 +34,7 @@ export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps> = ({ onEdit
       <UserAvatarForUsername username={noteOwner} />
       <Button
         variant='light'
+        disabled={disabled}
         title={t('editor.modal.permissions.ownerChange.button') ?? undefined}
         onClick={onEditOwner}>
         <UiIcon icon={IconPencil} />
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-section-owner.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-section-owner.tsx
index 4f038c9a2..2a1685d93 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-section-owner.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-section-owner.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
  */
@@ -7,6 +7,7 @@ import { setNoteOwner } from '../../../../api/permissions'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import { setNotePermissionsFromServer } from '../../../../redux/note-details/methods'
 import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import { PermissionOwnerChange } from './permission-owner-change'
 import { PermissionOwnerInfo } from './permission-owner-info'
 import React, { Fragment, useCallback, useState } from 'react'
@@ -14,8 +15,10 @@ import { Trans } from 'react-i18next'
 
 /**
  * Section in the permissions modal for managing the owner of a note.
+ *
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionSectionOwner: React.FC = () => {
+export const PermissionSectionOwner: React.FC<PermissionDisabledProps> = ({ disabled }) => {
   const noteId = useApplicationState((state) => state.noteDetails.primaryAddress)
   const [changeOwner, setChangeOwner] = useState(false)
   const { showErrorNotification } = useUiNotifications()
@@ -48,7 +51,7 @@ export const PermissionSectionOwner: React.FC = () => {
           {changeOwner ? (
             <PermissionOwnerChange onConfirmOwnerChange={onOwnerChange} />
           ) : (
-            <PermissionOwnerInfo onEditOwner={onSetChangeOwner} />
+            <PermissionOwnerInfo onEditOwner={onSetChangeOwner} disabled={disabled} />
           )}
         </li>
       </ul>
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-section-special-groups.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-section-special-groups.tsx
index 433e4575f..985fee502 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-section-special-groups.tsx
+++ b/frontend/src/components/editor-page/document-bar/permissions/permission-section-special-groups.tsx
@@ -1,9 +1,11 @@
 /*
- * 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
  */
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { useIsOwner } from '../../../../hooks/common/use-is-owner'
+import type { PermissionDisabledProps } from './permission-disabled.prop'
 import { PermissionEntrySpecialGroup } from './permission-entry-special-group'
 import { AccessLevel, SpecialGroup } from './types'
 import React, { Fragment, useMemo } from 'react'
@@ -11,10 +13,13 @@ import { Trans, useTranslation } from 'react-i18next'
 
 /**
  * Section of the permission modal for managing special group access to the note.
+ *
+ * @param disabled If the user is not the owner, functionality is disabled.
  */
-export const PermissionSectionSpecialGroups: React.FC = () => {
+export const PermissionSectionSpecialGroups: React.FC<PermissionDisabledProps> = ({ disabled }) => {
   useTranslation()
   const groupPermissions = useApplicationState((state) => state.noteDetails.permissions.sharedToGroups)
+  const isOwner = useIsOwner()
 
   const specialGroupEntries = useMemo(() => {
     const groupEveryone = groupPermissions.find((entry) => entry.groupName === SpecialGroup.EVERYONE)
@@ -40,8 +45,16 @@ export const PermissionSectionSpecialGroups: React.FC = () => {
         <Trans i18nKey={'editor.modal.permissions.sharedWithElse'} />
       </h5>
       <ul className={'list-group'}>
-        <PermissionEntrySpecialGroup level={specialGroupEntries.loggedIn} type={SpecialGroup.LOGGED_IN} />
-        <PermissionEntrySpecialGroup level={specialGroupEntries.everyone} type={SpecialGroup.EVERYONE} />
+        <PermissionEntrySpecialGroup
+          level={specialGroupEntries.loggedIn}
+          type={SpecialGroup.LOGGED_IN}
+          disabled={!isOwner}
+        />
+        <PermissionEntrySpecialGroup
+          level={specialGroupEntries.everyone}
+          type={SpecialGroup.EVERYONE}
+          disabled={disabled}
+        />
       </ul>
     </Fragment>
   )
diff --git a/frontend/src/components/editor-page/document-bar/permissions/permission-section-users.tsx b/frontend/src/components/editor-page/document-bar/permissions/permission-section-users.tsx
index 5d5c1e824..18ce6a360 100644
--- a/frontend/src/components/editor-page/document-bar/permissions/permission-section-users.tsx
+++ b/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>
   )