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

This button and its functionality only works if the user is the owner, so it doesn't make sense to make it possible to press it otherwise…

Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 .../deletion-moadal.test.tsx.snap             | 42 +++++++++++++++++++
 .../common/modals/deletion-moadal.test.tsx    | 26 +++++++++++-
 .../common/modals/deletion-modal.tsx          |  4 +-
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap b/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap
index b8a166cf2..7c0a478b1 100644
--- a/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap
+++ b/frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap
@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DeletionModal disables deletion when user is not owner 1`] = `
+<div
+  class="modal-dialog text-dark "
+  data-testid="commonModal"
+>
+  <div
+    class="modal-content"
+  >
+    <div
+      class="modal-header"
+    >
+      <div
+        class="modal-title h4"
+      >
+        <span />
+      </div>
+      <button
+        aria-label="Close"
+        class="btn-close"
+        type="button"
+      />
+    </div>
+    <div
+      class="text-dark modal-body"
+    >
+      testText
+    </div>
+    <div
+      class="modal-footer"
+    >
+      <button
+        class="btn btn-danger"
+        disabled=""
+        type="button"
+      >
+        testDeletionButton
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
 <div
   class="modal-dialog text-dark "
diff --git a/frontend/src/components/common/modals/deletion-moadal.test.tsx b/frontend/src/components/common/modals/deletion-moadal.test.tsx
index f4bcafee2..6d6f3e26a 100644
--- a/frontend/src/components/common/modals/deletion-moadal.test.tsx
+++ b/frontend/src/components/common/modals/deletion-moadal.test.tsx
@@ -1,15 +1,37 @@
 /*
- * 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 { mockNoteOwnership } from '../../../test-utils/note-ownership'
 import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
 import { DeletionModal } from './deletion-modal'
 import { render, screen } from '@testing-library/react'
 
 describe('DeletionModal', () => {
-  it('renders correctly with deletionButtonI18nKey', async () => {
+  beforeEach(async () => {
     await mockI18n()
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+    jest.resetModules()
+  })
+
+  it('renders correctly with deletionButtonI18nKey', async () => {
+    mockNoteOwnership('test', 'test')
+    const onConfirm = jest.fn()
+    render(
+      <DeletionModal onConfirm={onConfirm} deletionButtonI18nKey={'testDeletionButton'} show={true}>
+        testText
+      </DeletionModal>
+    )
+    const modal = await screen.findByTestId('commonModal')
+    expect(modal).toMatchSnapshot()
+  })
+
+  it('disables deletion when user is not owner', async () => {
+    mockNoteOwnership('test2', 'test')
     const onConfirm = jest.fn()
     render(
       <DeletionModal onConfirm={onConfirm} deletionButtonI18nKey={'testDeletionButton'} show={true}>
diff --git a/frontend/src/components/common/modals/deletion-modal.tsx b/frontend/src/components/common/modals/deletion-modal.tsx
index 524cd5f8f..6da54f863 100644
--- a/frontend/src/components/common/modals/deletion-modal.tsx
+++ b/frontend/src/components/common/modals/deletion-modal.tsx
@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { useIsOwner } from '../../../hooks/common/use-is-owner'
 import { cypressId } from '../../../utils/cypress-attribute'
 import type { CommonModalProps } from './common-modal'
 import { CommonModal } from './common-modal'
@@ -40,6 +41,7 @@ export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
   ...props
 }) => {
   useTranslation()
+  const isOwner = useIsOwner()
 
   return (
     <CommonModal
@@ -51,7 +53,7 @@ export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
       {...props}>
       <Modal.Body className='text-dark'>{children}</Modal.Body>
       <Modal.Footer>
-        <Button {...cypressId('deletionModal.confirmButton')} variant='danger' onClick={onConfirm}>
+        <Button {...cypressId('deletionModal.confirmButton')} variant='danger' onClick={onConfirm} disabled={!isOwner}>
           <Trans i18nKey={deletionButtonI18nKey} />
         </Button>
       </Modal.Footer>