Separate message for create or edit

Author: RoyEJohnson

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

@@ -106,6 +106,26 @@ describe('EditCard', () => {
     mockSpyUser.mockClear();
   });
 
+  it('shows create highlight message for new highlight', () => {
+    const newHighlight = {...highlight, elements: []};
+    const mockSpyUser = jest.spyOn(selectAuth, 'user')
+      .mockReturnValue(formatUser(testAccountsUser));
+    const component = renderer.create(
+      <TestContainer services={services} store={store}>
+        <EditCard
+          {...{...editCardProps, highlight: newHighlight}}
+          data={highlightData}
+          isActive={true}
+          shouldFocusCard={false}
+        />
+      </TestContainer>
+    );
+
+    const button = component.root.findByType('button');
+    expect(button.props.children.props.id).toBe('i18n:highlighting:create-instructions');
+    mockSpyUser.mockClear();
+  });
+
   it('matches snapshot without data', () => {
     const component = renderer.create(
       <TestContainer services={services} store={store}>

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

@@ -74,6 +74,7 @@ function LoginOrEdit({
       document?.dispatchEvent(new CustomEvent('showCardEvent', { bubbles: true }));
     }
   }, []);
+  const isNewSelection = props.highlight.elements.length === 0;
 
   return (
     <div
@@ -95,7 +96,11 @@ function LoginOrEdit({
                 </form>
               ) :
               <button type='button' onMouseDown={showCard}>
-                <FormattedMessage id='i18n:highlighting:instructions' />
+                <FormattedMessage id={
+                  isNewSelection
+                    ? 'i18n:highlighting:create-instructions'
+                    : 'i18n:highlighting:instructions'
+                } />
               </button>
             }
           </HiddenOnMobile>

src/app/messages/en/messages.json

@@ -72,6 +72,7 @@
   "i18n:highlighter:highlight:end:search": "End of search result",
   "i18n:highlighter:highlight:start:search": "Start search result",
   "i18n:highlighter:highlight:start-selected:search": "Start selected search result",
+  "i18n:highlighting:create-instructions": "Press Enter or click here to create highlight",
   "i18n:highlighting:instructions": "Press Enter or click here to edit highlight",
   "i18n:highlighting:button:cancel": "Cancel",
   "i18n:highlighting:button:delete": "Delete",

src/app/messages/es/messages.json

@@ -69,6 +69,7 @@
   "i18n:highlighter:highlight:end:search": "Final de resultado de búsqueda",
   "i18n:highlighter:highlight:start:search": "Comienzo de resultado de búsqueda",
   "i18n:highlighter:highlight:start-selected:search": "Comienzo de resultado de búsqueda seleccionado",
+  "i18n:highlighting:create-instructions": "Presione Enter o haga clic aquí para crear lo resaltado",
   "i18n:highlighting:instructions": "Presione Enter o haga clic aquí para editar lo resaltado",
   "i18n:highlighting:button:cancel": "Cancelar",
   "i18n:highlighting:button:delete": "Eliminar",

src/app/messages/pl/messages.json

@@ -69,6 +69,7 @@
   "i18n:highlighter:highlight:end:search": "Koniec zakreślenia wyniku wyszukiwania",
   "i18n:highlighter:highlight:start:search": "Początek zakreślenia wyniku wyszukiwania",
   "i18n:highlighter:highlight:start-selected:search": "Początek wybranego wyniku wyszukiwania",
+  "i18n:highlighting:create-instructions": "Naciśnij Enter lub kliknij tutaj, aby utworzyć wyróżnienie.",
   "i18n:highlighting:instructions": "Naciśnij Enter lub kliknij tutaj, aby edytować wyróżnienie",
   "i18n:highlighting:button:cancel": "Anuluj",
   "i18n:highlighting:button:delete": "Usuń",