From eb27507e9a4c67e9add380244e19ddd64f04012b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?E=CC=81ric=20D?= <15271+edas@users.noreply.github.com>
Date: Mon, 27 Jan 2020 11:48:57 +0100
Subject: [PATCH 1/2] feat: Allows to turn the editor read-only

---
 src/components/notes/editor-view.jsx      |  37 ++++-
 src/components/notes/editor-view.spec.jsx | 154 +++++++++++++++++++
 src/components/notes/editor.jsx           | 172 +++++++++++-----------
 src/hooks/useCollabProvider.js            |  29 ++--
 src/lib/collab/provider.js                |  52 ++++++-
 src/lib/collab/provider.spec.js           |  89 +++++++++++
 6 files changed, 420 insertions(+), 113 deletions(-)
 create mode 100644 src/components/notes/editor-view.spec.jsx

diff --git a/src/components/notes/editor-view.jsx b/src/components/notes/editor-view.jsx
index 8f5e1950..bc01504e 100644
--- a/src/components/notes/editor-view.jsx
+++ b/src/components/notes/editor-view.jsx
@@ -1,10 +1,10 @@
-import React, { useCallback, useRef, useEffect } from 'react'
+import React, { useCallback, useRef, useEffect, useMemo } from 'react'
 
 import { Editor, WithEditorActions } from '@atlaskit/editor-core'
 
 import { MainTitle } from 'cozy-ui/react/Text'
 import Textarea from 'cozy-ui/react/Textarea'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/react/I18n'
 import useEventListener from 'cozy-ui/react/hooks/useEventListener'
 
 import editorConfig from 'components/notes/editor_config'
@@ -12,7 +12,7 @@ import HeaderMenu from 'components/header_menu'
 import styles from 'components/notes/editor-view.styl'
 
 function updateTextareaHeight(target) {
-  target.style.height = `${target.scrollHeight}px`
+  if (target) target.style.height = `${target.scrollHeight}px`
 }
 
 const nullCallback = () => {}
@@ -28,8 +28,9 @@ function EditorView(props) {
     leftComponent,
     rightComponent,
     onContentChange,
-    t
+    readOnly
   } = props
+  const { t } = useI18n()
 
   const titleEl = useRef(null)
 
@@ -42,6 +43,24 @@ function EditorView(props) {
     [onTitleChange]
   )
 
+  // put the provider in readonly mode if requested and react to changes of values
+  useMemo(() => collabProvider && collabProvider.setReadOnly(!!readOnly), [
+    readOnly,
+    collabProvider
+  ])
+
+  const collabEdit = useMemo(
+    () =>
+      collabProvider && {
+        useNativePlugin: true,
+        provider: Promise.resolve(collabProvider),
+        inviteToEditHandler: () => undefined,
+        isInviteToEditButtonSelected: false,
+        userId: collabProvider.serviceClient.getSessionId()
+      },
+    [collabProvider]
+  )
+
   useEffect(() => updateTextareaHeight(titleEl.current), [])
 
   useEventListener(titleEl.current, 'blur', onTitleBlur)
@@ -56,13 +75,14 @@ function EditorView(props) {
       />
       <section className="note-editor-container">
         <Editor
-          collabEdit={collabProvider}
+          disabled={collabProvider ? false : readOnly}
+          collabEdit={collabEdit}
           onChange={onContentChange || nullCallback}
           defaultValue={defaultValue}
           {...editorConfig}
           appearance="full-page"
           placeholder={t('Notes.EditorView.main_placeholder')}
-          shouldFocus={true}
+          shouldFocus={!readOnly}
           contentComponents={
             <WithEditorActions
               render={() => (
@@ -70,9 +90,10 @@ function EditorView(props) {
                   <Textarea
                     ref={titleEl}
                     rows="1"
+                    readOnly={!!readOnly}
                     fullwidth={true}
                     value={title}
-                    onChange={onTitleEvent}
+                    onChange={readOnly ? nullCallback : onTitleEvent}
                     placeholder={defaultTitle}
                     className="note-title-input"
                   />
@@ -86,4 +107,4 @@ function EditorView(props) {
   )
 }
 
-export default translate()(EditorView)
+export default EditorView
diff --git a/src/components/notes/editor-view.spec.jsx b/src/components/notes/editor-view.spec.jsx
new file mode 100644
index 00000000..3592b297
--- /dev/null
+++ b/src/components/notes/editor-view.spec.jsx
@@ -0,0 +1,154 @@
+import React from 'react'
+import { I18n } from 'cozy-ui/react/I18n'
+import { mount } from 'enzyme'
+
+import EditorView from './editor-view'
+import CollabProvider from 'lib/collab/provider'
+import en from '../../locales/en.json'
+
+import { MainTitle } from 'cozy-ui/react/Text'
+import Textarea from 'cozy-ui/react/Textarea'
+
+// eslint-disable-next-line no-unused-vars
+import { Editor, WithEditorActions } from '@atlaskit/editor-core'
+jest.mock('@atlaskit/editor-core', () => ({
+  Editor: function Editor(props) {
+    return (
+      <div>
+        {props.contentComponents}
+        {props.children}
+      </div>
+    )
+  },
+  WithEditorActions: function WithEditorActions(props) {
+    return (
+      <div>
+        {props.render()}
+        {props.children}
+      </div>
+    )
+  }
+}))
+
+function setupCollabProvider() {
+  const noteId = 'myDocId'
+  const version = 96
+  const channel = {
+    on: jest.fn(),
+    connect: jest.fn(),
+    sendSteps: jest.fn(),
+    sendTelepointer: jest.fn(),
+    getSteps: jest.fn()
+  }
+  const service = {
+    getSessionId: jest.fn(),
+    getUserId: jest.fn(),
+    pushSteps: jest.fn(),
+    onStepsCreated: jest.fn(),
+    onTelepointerUpdated: jest.fn(),
+    join: jest.fn(),
+    getSteps: jest.fn(),
+    pushTelepointer: jest.fn()
+  }
+  const config = { noteId, version, channel }
+  return new CollabProvider(config, service)
+}
+
+function mountEditorView({ readOnly, collabProvider }) {
+  return mount(
+    <EditorView
+      readOnly={readOnly}
+      collabProvider={collabProvider}
+      defaultTitle="placeholder"
+      defaultValue={{ doc: {}, version: 42 }}
+      title="title"
+    />,
+    {
+      wrappingComponent: I18n,
+      wrappingComponentProps: {
+        lang: 'en',
+        dictRequire: () => en
+      }
+    }
+  )
+}
+
+describe('EditorView', () => {
+  describe('readOnly', () => {
+    describe('when true', () => {
+      const readOnly = true
+      it('should have a readonly title', async () => {
+        const collabProvider = setupCollabProvider()
+        const editorView = mountEditorView({ collabProvider, readOnly })
+        const title = editorView
+          .find(MainTitle)
+          .first()
+          .find(Textarea)
+          .first()
+        expect(title.prop('readOnly')).toBeTruthy()
+      })
+
+      it('should not focus the editor', async () => {
+        const collabProvider = setupCollabProvider()
+        const editorView = mountEditorView({ collabProvider, readOnly })
+        const editor = editorView.find(Editor).first()
+        expect(editor.prop('shouldFocus')).toBeFalsy()
+      })
+
+      describe('with a collabProvider', () => {
+        it('should set the provider readonly', async () => {
+          const collabProvider = setupCollabProvider()
+          mountEditorView({ collabProvider, readOnly })
+          expect(collabProvider.isReadOnly()).toBeTruthy()
+        })
+      })
+
+      describe('without a collabProvider', () => {
+        it('should disable the editor', async () => {
+          const collabProvider = undefined
+          const editorView = mountEditorView({ collabProvider, readOnly })
+          const editor = editorView.find(Editor).first()
+          expect(editor.prop('disabled')).toBeTruthy()
+        })
+      })
+    })
+
+    describe('when false', () => {
+      const readOnly = false
+      it('should not have a readonly title', async () => {
+        const collabProvider = setupCollabProvider()
+        const editorView = mountEditorView({ collabProvider, readOnly })
+        const title = editorView
+          .find(MainTitle)
+          .first()
+          .find(Textarea)
+          .first()
+        expect(title.prop('readOnly')).toBeFalsy()
+      })
+
+      it('should focus the editor', async () => {
+        const collabProvider = setupCollabProvider()
+        const editorView = mountEditorView({ collabProvider, readOnly })
+        const editor = editorView.find(Editor).first()
+        expect(editor.prop('shouldFocus')).toBeTruthy()
+      })
+
+      describe('with a collabProvider', () => {
+        it('should not set the provider readonly', async () => {
+          const collabProvider = setupCollabProvider()
+          mountEditorView({ collabProvider, readOnly })
+          expect(collabProvider.isReadOnly()).toBeFalsy()
+        })
+      })
+
+      describe('without a collabProvider', () => {
+        it('should not disable the editor', async () => {
+          const collabProvider = undefined
+          const editorView = mountEditorView({ collabProvider, readOnly })
+          const editor = editorView.find(Editor).first()
+          expect(editor.prop('disabled')).toBeFalsy()
+        })
+      })
+    })
+  })
+})
diff --git a/src/components/notes/editor.jsx b/src/components/notes/editor.jsx
index 87c2d736..6d6f5f50 100644
--- a/src/components/notes/editor.jsx
+++ b/src/components/notes/editor.jsx
@@ -19,97 +19,95 @@ import useUser from 'hooks/useUser'
 import { useDebugValue } from 'lib/debug'
 
 import useConfirmExit from 'cozy-ui/react/hooks/useConfirmExit'
-import { translate } from 'cozy-ui/react/I18n'
+import { useI18n } from 'cozy-ui/react/I18n'
 
-const Editor = translate()(
-  withClient(function(props) {
-    // base parameters
-    const { client: cozyClient, noteId, t } = props
+const Editor = withClient(function(props) {
+  // base parameters
+  const { client: cozyClient, noteId, readOnly } = props
+  const { t } = useI18n()
 
-    // plugins and config
-    const isPublic = useContext(IsPublicContext)
-    const { userName, userId } = useUser({
-      userName: props.userName,
-      cozyClient
-    })
-    const serviceClient = useServiceClient({ userId, userName, cozyClient })
-    const { loading, title, doc, setTitle } = useNote({ serviceClient, noteId })
-    const returnUrl = useReturnUrl({
-      returnUrl: props.returnUrl,
-      cozyClient,
-      doc
-    })
-    const { collabProvider, collabProviderPlugin } = useCollabProvider({
-      noteId,
-      serviceClient,
-      docVersion: doc && doc.version
-    })
+  // plugins and config
+  const isPublic = useContext(IsPublicContext)
+  const { userName, userId } = useUser({
+    userName: props.userName,
+    cozyClient
+  })
+  const serviceClient = useServiceClient({ userId, userName, cozyClient })
+  const { loading, title, doc, setTitle } = useNote({ serviceClient, noteId })
+  const returnUrl = useReturnUrl({
+    returnUrl: props.returnUrl,
+    cozyClient,
+    doc
+  })
+  const collabProvider = useCollabProvider({
+    noteId,
+    serviceClient,
+    docVersion: doc && doc.version
+  })
 
-    // callbacks
-    const { onLocalTitleChange } = useTitleChanges({
-      noteId,
-      title,
-      setTitle,
-      serviceClient
-    })
-    const { forceSync, emergencySync } = useForceSync({
-      doc,
-      collabProvider
-    })
-    // when leaving the component or changing doc
-    useEffect(() => forceSync, [noteId, doc, forceSync])
-    // when quitting the webpage
-    const activate = useCallback(() => collabProvider.isDirty(), [
-      collabProvider
-    ])
-    const { exitConfirmationModal, requestToLeave } = useConfirmExit({
-      activate,
-      onLeave: emergencySync,
-      title: t('Notes.Editor.exit_confirmation_title'),
-      message: t('Notes.Editor.exit_confirmation_message'),
-      leaveLabel: t('Notes.Editor.exit_confirmation_leave'),
-      cancelLabel: t('Notes.Editor.exit_confirmation_cancel')
-    })
+  // callbacks
+  const { onLocalTitleChange } = useTitleChanges({
+    noteId,
+    title,
+    setTitle,
+    serviceClient
+  })
+  const { forceSync, emergencySync } = useForceSync({
+    doc,
+    collabProvider
+  })
+  // when leaving the component or changing doc
+  useEffect(() => forceSync, [noteId, doc, forceSync])
+  // when quitting the webpage
+  const activate = useCallback(() => collabProvider.isDirty(), [collabProvider])
+  const { exitConfirmationModal, requestToLeave } = useConfirmExit({
+    activate,
+    onLeave: emergencySync,
+    title: t('Notes.Editor.exit_confirmation_title'),
+    message: t('Notes.Editor.exit_confirmation_message'),
+    leaveLabel: t('Notes.Editor.exit_confirmation_leave'),
+    cancelLabel: t('Notes.Editor.exit_confirmation_cancel')
+  })
 
-    useDebugValue('client', cozyClient)
-    useDebugValue('notes.service', serviceClient)
-    useDebugValue('notes.collabProvider', collabProvider)
-    useDebugValue('notes.channel', collabProvider && collabProvider.channel)
-    useDebugValue('notes.noteId', noteId)
-    useDebugValue('notes.doc', doc && { ...doc.doc, version: doc.version })
-    useDebugValue('notes.file', doc && doc.file)
-    useDebugValue('notes.returnUrl', returnUrl)
+  useDebugValue('client', cozyClient)
+  useDebugValue('notes.service', serviceClient)
+  useDebugValue('notes.collabProvider', collabProvider)
+  useDebugValue('notes.channel', collabProvider && collabProvider.channel)
+  useDebugValue('notes.noteId', noteId)
+  useDebugValue('notes.doc', doc && { ...doc.doc, version: doc.version })
+  useDebugValue('notes.file', doc && doc.file)
+  useDebugValue('notes.returnUrl', returnUrl)
 
-    // rendering
-    if (loading) {
-      return <EditorLoading />
-    } else if (doc) {
-      return (
-        <>
-          <EditorView
-            onTitleChange={onLocalTitleChange}
-            onTitleBlur={emergencySync}
-            collabProvider={collabProviderPlugin}
-            defaultTitle={t('Notes.Editor.title_placeholder')}
-            defaultValue={{ ...doc.doc, version: doc.version }}
-            title={title && title.length > 0 ? title : undefined}
-            leftComponent={
-              <BackFromEditing
-                returnUrl={returnUrl}
-                file={doc.file}
-                requestToLeave={requestToLeave}
-              />
-            }
-            rightComponent={!isPublic && <SharingWidget file={doc.file} />}
-          />
-          <SavingIndicator collabProvider={collabProvider} />
-          {exitConfirmationModal}
-        </>
-      )
-    } else {
-      return <EditorLoadingError returnUrl={returnUrl} />
-    }
-  })
-)
+  // rendering
+  if (loading) {
+    return <EditorLoading />
+  } else if (doc) {
+    return (
+      <>
+        <EditorView
+          readOnly={readOnly}
+          onTitleChange={onLocalTitleChange}
+          onTitleBlur={emergencySync}
+          collabProvider={collabProvider}
+          defaultTitle={t('Notes.Editor.title_placeholder')}
+          defaultValue={{ ...doc.doc, version: doc.version }}
+          title={title && title.length > 0 ? title : undefined}
+          leftComponent={
+            <BackFromEditing
+              returnUrl={returnUrl}
+              file={doc.file}
+              requestToLeave={requestToLeave}
+            />
+          }
+          rightComponent={!isPublic && <SharingWidget file={doc.file} />}
+        />
+        <SavingIndicator collabProvider={collabProvider} />
+        {exitConfirmationModal}
+      </>
+    )
+  } else {
+    return <EditorLoadingError returnUrl={returnUrl} />
+  }
+})
 
 export default Editor
diff --git a/src/hooks/useCollabProvider.js b/src/hooks/useCollabProvider.js
index c97a154a..9fd728d6 100644
--- a/src/hooks/useCollabProvider.js
+++ b/src/hooks/useCollabProvider.js
@@ -1,6 +1,19 @@
 import { useMemo } from 'react'
 import CollabProvider from 'lib/collab/provider'
 
+/**
+ * @typedef {object} useCollabProviderParams
+ * @property {integer|undefined} docVersion - current version of the doc
+ * @property {string} noteId - uuid of the io.cozy.files for the note
+ * @property {ServiceClient|undefined} serviceClient - ServiceClient instance
+ */
+
+/**
+ * Initialize a CollabProvider
+ *
+ * @param {useCollabProviderParams} params
+ * @returns {CollabProvider|undefined}
+ */
 function useCollabProvider({ docVersion, noteId, serviceClient }) {
   return useMemo(
     () => {
@@ -9,21 +22,7 @@ function useCollabProvider({ docVersion, noteId, serviceClient }) {
           { version: docVersion, noteId },
           serviceClient
         )
-        return {
-          collabProvider: provider,
-          // The following `collabProviderPlugin` object is defined
-          // in an Atlassian API. The attribute `provider` is expected
-          // to be a Promise, even if we don't need one ourselves here.
-          collabProviderPlugin: {
-            useNativePlugin: true,
-            provider: Promise.resolve(provider),
-            inviteToEditHandler: () => undefined,
-            isInviteToEditButtonSelected: false,
-            userId: serviceClient.getSessionId()
-          }
-        }
-      } else {
-        return {}
+        return provider
       }
     },
     [noteId, docVersion, serviceClient]
diff --git a/src/lib/collab/provider.js b/src/lib/collab/provider.js
index 22f3191a..083cf47d 100644
--- a/src/lib/collab/provider.js
+++ b/src/lib/collab/provider.js
@@ -3,6 +3,8 @@ import { getVersion, sendableSteps } from 'prosemirror-collab'
 import { JSONTransformer } from '@atlaskit/editor-json-transformer'
 import { Channel } from './channel'
 import { getParticipant } from './participant'
+import get from 'lodash/get'
+import debounce from 'lodash/debounce'
 
 const jsonTransformer = new JSONTransformer()
 
@@ -19,6 +21,11 @@ export class CollabProvider {
     this.config = { ...config }
     this.config['sessionId'] = serviceClient.getSessionId()
     this.config['userId'] = serviceClient.getUserId()
+    // this debounce is primary here to introduce a short delay so that
+    // the local step is definitively applied in the editor. The debounce
+    // is the optional additional value to avoid reseting the state too much
+    this.cancelLocalChanges = debounce(this.cancelLocalChanges.bind(this), 100)
+    this.setReadOnly(!!this.config['readOnly'])
     this.serviceClient = serviceClient
     this.channel = config.channel || new Channel(this.config, serviceClient)
     this.eventEmitter = new EventEmitter2()
@@ -63,7 +70,11 @@ export class CollabProvider {
    */
   send(tr, oldState, newState) {
     // Ignore transactions without steps
-    if (!tr.steps || !tr.steps.length) {
+    if (!tr.steps || !tr.steps.length) return
+
+    // cancel changes on a readonly document
+    if (this.isReadOnly()) {
+      this.cancelLocalChanges()
       return
     }
 
@@ -74,7 +85,7 @@ export class CollabProvider {
    * Send messages, such as telepointers, to other participants.
    */
   sendMessage(data) {
-    if (!data) {
+    if (!data || this.isReadOnly()) {
       return
     }
 
@@ -133,7 +144,7 @@ export class CollabProvider {
         // get local steps and re-emit them after reinit the whole document
         const { steps: localSteps = [] } = sendableSteps(this.getState()) || {}
         this.emit('init', { sid: sessionId, doc, version })
-        if (localSteps.length) {
+        if (localSteps.length && !this.isReadOnly()) {
           this.emit('local-steps', { steps: localSteps })
         }
       } else if (steps.length > 0) {
@@ -418,6 +429,41 @@ export class CollabProvider {
     this.on('data', this.onRemoteSync.bind(this))
     this.on('init', this.onRemoteSync.bind(this))
   }
+
+  /**
+   * Checks if the editor should be readonly
+   *
+   * @returns {bool}
+   */
+  isReadOnly() {
+    return this.readOnly
+  }
+
+  /**
+   * Set the editor readonly or readwrite
+   *
+   * @param {bool} readOnly - true by default
+   */
+  setReadOnly(readOnly = true) {
+    this.readOnly = !!readOnly
+    if (this.readOnly) this.cancelLocalChanges()
+  }
+
+  /**
+   * Remove all local changes  and go back to the server state
+   */
+  cancelLocalChanges() {
+    const currentState = this.getState && this.getState()
+    if (currentState) {
+      const rawDoc = get(currentState, 'collab$.unconfirmed[0].origin.docs[0]')
+      const version = get(currentState, 'collab$.version')
+      const sid = this.config['sessionId']
+      if (rawDoc && version && sid) {
+        const doc = rawDoc.toJSON()
+        this.emit('init', { doc, version, sid })
+      }
+    }
+  }
 }
 
 export default CollabProvider
diff --git a/src/lib/collab/provider.spec.js b/src/lib/collab/provider.spec.js
index 459a8c15..27e3b653 100644
--- a/src/lib/collab/provider.spec.js
+++ b/src/lib/collab/provider.spec.js
@@ -575,4 +575,93 @@ describe('CollabProvider', () => {
       })
     })
   })
+
+  describe('setReadOnly', () => {
+    const setup = (readOnly, callback) => {
+      const collab = new CollabProvider(config, service)
+      collab.initialize(getState)
+      callback && callback(collab)
+      collab.setReadOnly(readOnly)
+      return collab
+    }
+
+    describe('when true', () => {
+      it('does not send local steps to the channel', async () => {
+        const collab = setup(true)
+        collab.send({ steps }, { doc }, { doc })
+        expect(channel.sendSteps).not.toHaveBeenCalled()
+      })
+
+      it('does not send telepointers', async () => {
+        const collab = setup(true)
+        collab.sendMessage({ type: 'telepointer' })
+        expect(channel.sendTelepointer).not.toHaveBeenCalled()
+      })
+
+      it('cancels local steps when there are any', async () => {
+        const collab = setup(true, collab => {
+          collab.cancelLocalChanges = jest.fn()
+        })
+        expect(collab.cancelLocalChanges).toHaveBeenCalled()
+      })
+
+      it('should return true to isReadOnly', async () => {
+        const collab = setup(true)
+        expect(collab.isReadOnly()).toBeTruthy()
+      })
+    })
+
+    describe('when false', () => {
+      it('does send local steps to the channel', async () => {
+        const collab = setup(false)
+        collab.send({ steps }, { doc }, { doc })
+        expect(channel.sendSteps).toHaveBeenCalled()
+      })
+
+      it('does send telepointers', async () => {
+        const collab = setup(false)
+        collab.sendMessage({ type: 'telepointer' })
+        expect(channel.sendTelepointer).toHaveBeenCalled()
+      })
+
+      it('does not cancel local steps when there are any', async () => {
+        const collab = setup(false, collab => {
+          collab.cancelLocalChanges = jest.fn()
+        })
+        expect(collab.cancelLocalChanges).not.toHaveBeenCalled()
+      })
+
+      it('should not return true to isReadOnly', async () => {
+        const collab = setup(false)
+        expect(collab.isReadOnly()).toBeFalsy()
+      })
+    })
+
+    describe('cancelLocalChanges', () => {
+      it('re-init the document', async () => {
+        const collab = new CollabProvider(config, service)
+        collab.initialize(getState)
+
+        getState.mockImplementation(() => ({
+          collab$: {
+            version: 456,
+            unconfirmed: [
+              {
+                origin: {
+                  docs: [{ my: 'state', toJSON: jest.fn() }]
+                }
+              }
+            ]
+          }
+        }))
+
+        const init = jest.fn()
+        collab.on('init', init)
+
+        collab.cancelLocalChanges()
+        await wait(120)
+        expect(init).toHaveBeenCalled()
+      })
+    })
+  })
 })

From b7be7b9f87bffebdc7adf48990529aaf2f4e4d59 Mon Sep 17 00:00:00 2001
From: Yannick Lohse <contact@yannick-lohse.fr>
Date: Fri, 31 Jan 2020 11:47:09 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20Make=20"=E2=80=A6"=20click=20area=20?=
 =?UTF-8?q?bigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/notes/List/NoteRow.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/notes/List/NoteRow.jsx b/src/components/notes/List/NoteRow.jsx
index f91a2ded..b55ccfe4 100644
--- a/src/components/notes/List/NoteRow.jsx
+++ b/src/components/notes/List/NoteRow.jsx
@@ -65,8 +65,8 @@ const NoteRow = ({ note, f, t, client, breakpoints: { isMobile } }) => {
             <TableCell className={styles.tableCell}>—</TableCell>
             <TableCell className={styles.tableCell}>
               <span ref={menuTriggerRef}>
-                <IconButton>
-                  <Icon onClick={openMenu} icon="dots" />
+                <IconButton onClick={openMenu}>
+                  <Icon icon="dots" />
                 </IconButton>
               </span>
             </TableCell>