Make `AnnotationActionBar` create a new draft on edit

Let `AnnotationActionBar` handle “entering edit mode” by way of
creating a new draft for the relevant annotation. Remove this logic
from `Annotation` and the associated `prop`

src/sidebar/components/annotation-action-bar.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import useStore from '../store/use-store';
 import { isShareable, shareURI } from '../util/annotation-sharing';
-import { permits } from '../util/permissions';
+import { isPrivate, permits } from '../util/permissions';
 import { withServices } from '../util/service-context';
 
 import AnnotationShareControl from './annotation-share-control';
@@ -17,7 +17,6 @@ function AnnotationActionBar({
   annotation,
   annotationMapper,
   flash,
-  onEdit,
   onReply,
   settings,
 }) {
@@ -37,6 +36,7 @@ function AnnotationActionBar({
   const showFlagAction = userProfile.userid !== annotation.user;
   const showShareAction = isShareable(annotation, settings);
 
+  const createDraft = useStore(store => store.createDraft);
   const updateFlagFn = useStore(store => store.updateFlagStatus);
 
   const updateFlag = () => {
@@ -51,6 +51,14 @@ function AnnotationActionBar({
     }
   };
 
+  const onEdit = () => {
+    createDraft(annotation, {
+      tags: annotation.tags,
+      text: annotation.text,
+      isPrivate: isPrivate(annotation.permissions),
+    });
+  };
+
   const onFlag = () => {
     if (!userProfile.userid) {
       flash.error(
@@ -100,7 +108,6 @@ function AnnotationActionBar({
 AnnotationActionBar.propTypes = {
   annotation: propTypes.object.isRequired,
   /** Callbacks for when action buttons are clicked/tapped */
-  onEdit: propTypes.func.isRequired,
   onReply: propTypes.func.isRequired,
 
   // Injected services

src/sidebar/components/annotation-omega.js

@@ -59,7 +59,6 @@ function AnnotationOmega({
   };
 
   // TODO
-  const fakeOnEdit = () => alert('Enter edit mode: TBD');
   const fakeOnReply = () => alert('Reply: TBD');
   const fakeOnRevert = () => alert('Revert changes: TBD');
   const fakeOnSave = () => alert('Save changes: TBD');
@@ -98,7 +97,6 @@ function AnnotationOmega({
           <div className="annotation-actions">
             <AnnotationActionBar
               annotation={annotation}
-              onEdit={fakeOnEdit}
               onReply={fakeOnReply}
             />
           </div>

src/sidebar/components/test/annotation-action-bar-test.js

@@ -4,13 +4,13 @@ import { act } from 'preact/test-utils';
 
 import AnnotationActionBar from '../annotation-action-bar';
 import { $imports } from '../annotation-action-bar';
+import * as fixtures from '../../test/annotation-fixtures';
 
 import mockImportedComponents from './mock-imported-components';
 import { waitFor } from './util';
 
 describe('AnnotationActionBar', () => {
   let fakeAnnotation;
-  let fakeOnEdit;
   let fakeOnReply;
 
   let fakeUserProfile;
@@ -30,7 +30,6 @@ describe('AnnotationActionBar', () => {
         annotation={fakeAnnotation}
         annotationMapper={fakeAnnotationMapper}
         flash={fakeFlash}
-        onEdit={fakeOnEdit}
         onReply={fakeOnReply}
         settings={fakeSettings}
         {...props}
@@ -56,12 +55,7 @@ describe('AnnotationActionBar', () => {
   };
 
   beforeEach(() => {
-    fakeAnnotation = {
-      group: 'fakegroup',
-      permissions: {},
-      user: 'acct:bar@foo.com',
-    };
-
+    fakeAnnotation = fixtures.defaultAnnotation();
     fakeUserProfile = {
       userid: 'account:foo@bar.com',
     };
@@ -76,7 +70,6 @@ describe('AnnotationActionBar', () => {
       error: sinon.stub(),
     };
 
-    fakeOnEdit = sinon.stub();
     fakeOnReply = sinon.stub();
 
     fakePermits = sinon.stub().returns(true);
@@ -85,8 +78,9 @@ describe('AnnotationActionBar', () => {
     fakeIsShareable = sinon.stub().returns(true);
 
     fakeStore = {
-      profile: sinon.stub().returns(fakeUserProfile),
+      createDraft: sinon.stub(),
       getGroup: sinon.stub().returns({}),
+      profile: sinon.stub().returns(fakeUserProfile),
       updateFlagStatus: sinon.stub(),
     };
 
@@ -115,13 +109,20 @@ describe('AnnotationActionBar', () => {
       assert.isTrue(getButton(wrapper, 'edit').exists());
     });
 
-    it('invokes `onEdit` callback when edit button clicked', () => {
+    it('creates a new draft when `Edit` button clicked', () => {
       allowOnly('update');
       const button = getButton(createComponent(), 'edit');
 
       button.props().onClick();
 
-      assert.calledOnce(fakeOnEdit);
+      const call = fakeStore.createDraft.getCall(0);
+      assert.calledOnce(fakeStore.createDraft);
+      assert.equal(call.args[0], fakeAnnotation);
+      assert.include(call.args[1], {
+        isPrivate: false,
+        text: fakeAnnotation.text,
+      });
+      assert.isArray(call.args[1].tags);
     });
 
     it('does not show edit button if permissions do not allow', () => {

src/sidebar/templates/annotation.html

@@ -66,7 +66,6 @@
     <div class="annotation-actions" ng-if="!vm.isSaving && !vm.editing() && vm.id()">
       <annotation-action-bar
         annotation="vm.annotation"
-        on-edit="vm.edit()"
         on-reply="vm.reply()"></annotation-action-bar>
     </div>
   </footer>