Show instructions for authenticated/not

If not authenticated, show login button
If no annotation, show instruction box
If annotation or edit-highight sequence has happened, show edit card

Author: RoyEJohnson

src/app/content/highlights/components/EditCard.tsx

@@ -75,20 +75,18 @@ function LoginOrEdit({
       aria-label={formatMessage({id: 'i18n:highlighter:edit-note:label'})}
     >
       {
-        (authenticated || props.shouldFocusCard || props.data?.annotation) ?
-          <form
-            ref={mergeRefs(fref, element)}
-            data-analytics-region='edit-note'
-            data-highlight-card
-          >
-            {authenticated ? (
-              <ActiveEditCard props={props} element={element}
-              />
-            ) : (
-              <LoginConfirmation onBlur={props.onBlur} />
-            )}
-          </form> :
+        authenticated ? (
+          (props.shouldFocusCard || props.data?.annotation) ? (
+            <form
+              ref={mergeRefs(fref, element)}
+              data-analytics-region='edit-note'
+              data-highlight-card
+            >
+              <ActiveEditCard props={props} element={element} />
+            </form>
+          ) :
           <i>Press Enter or double-click highlight to edit highlight</i>
+        ) : <LoginConfirmation onBlur={props.onBlur} />
       }
     </div>
   );

src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap

@@ -182,25 +182,20 @@ exports[`EditCard matches snapshot when focused 1`] = `
   className="c0"
   role="dialog"
 >
-  <form
-    data-analytics-region="edit-note"
-    data-highlight-card={true}
-  >
-    <div
-      data-props={
-        Object {
-          "confirmLink": "/accounts/login?r=/",
-          "confirmMessage": "i18n:highlighting:login:link",
-          "data-analytics-label": "login",
-          "data-analytics-region": "highlighting-login",
-          "drawFocus": false,
-          "message": "i18n:highlighting:login:prompt",
-          "onCancel": [MockFunction],
-        }
+  <div
+    data-props={
+      Object {
+        "confirmLink": "/accounts/login?r=/",
+        "confirmMessage": "i18n:highlighting:login:link",
+        "data-analytics-label": "login",
+        "data-analytics-region": "highlighting-login",
+        "drawFocus": false,
+        "message": "i18n:highlighting:login:prompt",
+        "onCancel": [MockFunction],
       }
-      mock-confirmation="true"
-    />
-  </form>
+    }
+    mock-confirmation="true"
+  />
 </div>
 `;
 
@@ -278,8 +273,19 @@ exports[`EditCard matches snapshot without data 1`] = `
   className="c0"
   role="dialog"
 >
-  <i>
-    Press Enter or double-click highlight to edit highlight
-  </i>
+  <div
+    data-props={
+      Object {
+        "confirmLink": "/accounts/login?r=/",
+        "confirmMessage": "i18n:highlighting:login:link",
+        "data-analytics-label": "login",
+        "data-analytics-region": "highlighting-login",
+        "drawFocus": false,
+        "message": "i18n:highlighting:login:prompt",
+        "onCancel": [MockFunction],
+      }
+    }
+    mock-confirmation="true"
+  />
 </div>
 `;