Merge branch 'main' into dependabot/npm_and_yarn/follow-redirects-1.15.4

openstax · Jan 9, 2024 · 3e5f690 · 3e5f690
2 parents bac881a + ef6f665
commit 3e5f690
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 40 deletions.
diff --git a/src/app/content/highlights/components/Highlights.spec.tsx b/src/app/content/highlights/components/Highlights.spec.tsx
@@ -248,6 +248,7 @@ describe('Highlights', () => {
     let [firstAnnotation] = component.root.findAllByType(HighlightAnnotation);
     expect(firstAnnotation.props.isEditing).toEqual(false);
 
+    // Test saving note
     renderer.act(() => {
       const [firstContextMenu] = component.root.findAllByType(ContextMenu);
       firstContextMenu.props.onEdit();
@@ -274,6 +275,56 @@ describe('Highlights', () => {
       },
     }));
 
+    // Test saving empty note
+    renderer.act(() => {
+      const [firstContextMenu] = component.root.findAllByType(ContextMenu);
+      firstContextMenu.props.onEdit();
+    });
+
+    [firstAnnotation] = component.root.findAllByType(HighlightAnnotation);
+    expect(firstAnnotation.props.isEditing).toEqual(true);
+
+    renderer.act(() => {
+      firstAnnotation.props.onSave('');
+    });
+
+    const confirmButton = component.root.findByProps({ 'data-testid': 'delete' });
+
+    renderer.act(() => confirmButton.props.onClick({preventDefault: () => null}));
+    expect(dispatch).toHaveBeenCalled();
+    expect(firstAnnotation.props.isEditing).toEqual(false);
+
+    // Test delete/cancel via context menu
+    renderer.act(() => {
+      const [firstContextMenu] = component.root.findAllByType(ContextMenu);
+      firstContextMenu.props.onDelete();
+    });
+    renderer.act(() => {
+      const hdw = component.root.findByType(HighlightDeleteWrapper);
+      hdw.props.onCancel();
+    });
+
+    // Test cancelling save of empty note
+    renderer.act(() => {
+      const [firstContextMenu] = component.root.findAllByType(ContextMenu);
+      firstContextMenu.props.onEdit();
+    });
+
+    [firstAnnotation] = component.root.findAllByType(HighlightAnnotation);
+    expect(firstAnnotation.props.isEditing).toEqual(true);
+
+    renderer.act(() => {
+      firstAnnotation.props.onSave('');
+    });
+
+    renderer.act(() => {
+      const hdw = component.root.findByType(HighlightDeleteWrapper);
+      hdw.props.onCancel();
+    });
+
+    expect(firstAnnotation.props.isEditing).toEqual(false);
+
+    // Test cancelling save
     renderer.act(() => {
       const [firstContextMenu] = component.root.findAllByType(ContextMenu);
       firstContextMenu.props.onEdit();
@@ -369,17 +420,20 @@ describe('Highlights', () => {
     </TestContainer>);
 
     renderer.act(() => {
-      const [firstContextMenu, secondContextMenu] = component.root.findAllByType(ContextMenu);
-      firstContextMenu.props.onDelete();
-      secondContextMenu.props.onDelete();
+      const contextMenus = component.root.findAllByType(ContextMenu);
+      for (const cm of contextMenus) {
+        cm.props.onDelete();
+      }
     });
 
-    expect(component.root.findAllByType(HighlightDeleteWrapper).length).toEqual(2);
+    expect(component.root.findAllByType(HighlightDeleteWrapper).length).toEqual(6);
 
     renderer.act(() => {
-      const [firstDeleteWrapper, secondDeleteWrapper] = component.root.findAllByType(HighlightDeleteWrapper);
+      const [firstDeleteWrapper, ...rest] = component.root.findAllByType(HighlightDeleteWrapper);
       firstDeleteWrapper.props.onDelete();
-      secondDeleteWrapper.props.onCancel();
+      for (const dw of rest) {
+        dw.props.onCancel();
+      }
 
       requestDeleteHighlightHook.hookBody({...services, getState: store.getState, dispatch: store.dispatch})(
         requestDeleteHighlight(hlBlue as HighlightData, {

diff --git a/src/app/content/highlights/components/SummaryPopup/HighlightAnnotation.tsx b/src/app/content/highlights/components/SummaryPopup/HighlightAnnotation.tsx
@@ -14,7 +14,7 @@ const HighlightNote = styled.div`
   display: flex;
   gap: 1rem;
   flex-flow: wrap;
-  align-items: center;
+  align-items: start;
 
   span {
     margin: 0 0.8rem 0 0;

diff --git a/src/app/content/highlights/components/SummaryPopup/HighlightDeleteWrapper.tsx b/src/app/content/highlights/components/SummaryPopup/HighlightDeleteWrapper.tsx
@@ -30,14 +30,14 @@ const StyledHighlightDeleteWrapper = styled.div`
 `;
 
 interface HighlightDeleteWrapperProps {
-  hasAnnotation?: boolean;
+  deletingWhat?: 'note' | 'highlight' | 'both';
   onCancel: () => void;
   onDelete: () => void;
 }
 
 // tslint:disable-next-line:variable-name
 const HighlightDeleteWrapper = ({
-  hasAnnotation,
+  deletingWhat = 'highlight',
   onDelete,
   onCancel,
 }: HighlightDeleteWrapperProps) => <StyledHighlightDeleteWrapper
@@ -46,9 +46,11 @@ const HighlightDeleteWrapper = ({
   ref={useDrawFocus()}
 >
   <FormattedMessage
-    id={hasAnnotation
+    id={deletingWhat === 'both'
       ? 'i18n:highlighting:confirmation:delete-both'
-      : 'i18n:highlighting:confirmation:delete-highlight'}
+      : deletingWhat === 'highlight' ? 'i18n:highlighting:confirmation:delete-highlight'
+      : 'i18n:highlighting:confirmation:delete-note'
+    }
   >
     {(msg) => <span>{msg}</span>}
   </FormattedMessage>

diff --git a/src/app/content/highlights/components/SummaryPopup/HighlightListElement.tsx b/src/app/content/highlights/components/SummaryPopup/HighlightListElement.tsx
@@ -76,6 +76,7 @@ interface HighlightListElementProps {
 const HighlightListElement = ({ highlight, locationFilterId, pageId }: HighlightListElementProps) => {
   const [isEditing, setIsEditing] = React.useState(false);
   const [isDeleting, setIsDeleting] = React.useState(false);
+  const [confirming, setConfirming] = React.useState(false);
   const book = useSelector(bookSelector);
   const dispatch = useDispatch();
   const linkToHighlight = useCreateHighlightLink(highlight, book);
@@ -84,28 +85,36 @@ const HighlightListElement = ({ highlight, locationFilterId, pageId }: Highlight
   const trackEditAnnotation = useAnalyticsEvent('editAnnotation');
   const trackDeleteHighlight = useAnalyticsEvent('deleteHighlight');
 
-  const updateAnnotation = (
-    annotation: string
-  ) => {
-    const addedNote = (highlight.annotation === undefined);
+  const updateAnnotation = React.useCallback(
+    (
+      annotation: string
+    ) => {
+      const addedNote = (highlight.annotation === undefined);
 
-    dispatch(updateHighlight({
-      highlight: {annotation},
-      id: highlight.id,
-    }, {
-      locationFilterId,
-      pageId,
-      preUpdateData: {
-        highlight: {
-          annotation: highlight.annotation,
-          color: highlight.color as string as HighlightUpdateColorEnum,
-        },
+      if (annotation === '' && !addedNote && confirming === false) {
+        setConfirming(true);
+        return;
+      }
+      dispatch(updateHighlight({
+        highlight: {annotation},
         id: highlight.id,
-      },
-    }));
-    trackEditAnnotation(addedNote, highlight.color, true);
-    setIsEditing(false);
-  };
+      }, {
+        locationFilterId,
+        pageId,
+        preUpdateData: {
+          highlight: {
+            annotation: highlight.annotation,
+            color: highlight.color as string as HighlightUpdateColorEnum,
+          },
+          id: highlight.id,
+        },
+      }));
+      trackEditAnnotation(addedNote, highlight.color, true);
+      setIsEditing(false);
+      setConfirming(false);
+    },
+    [dispatch, highlight, locationFilterId, pageId, trackEditAnnotation, confirming]
+  );
 
   const updateColor = (color: HighlightColorEnum) => {
     dispatch(updateHighlight({
@@ -153,9 +162,20 @@ const HighlightListElement = ({ highlight, locationFilterId, pageId }: Highlight
         onSave={updateAnnotation}
         onCancel={() => setIsEditing(false)}
       />
+      {
+        confirming === true &&
+        <HighlightDeleteWrapper
+        deletingWhat='note'
+        onCancel={() => {
+          setConfirming(false);
+          setIsEditing(false);
+        }}
+        onDelete={() => updateAnnotation('')}
+      />
+      }
     </HighlightContentWrapper>
     {isDeleting && <HighlightDeleteWrapper
-      hasAnnotation={Boolean(highlight.annotation)}
+      deletingWhat={Boolean(highlight.annotation) ? 'both' : 'highlight'}
       onCancel={() => setIsDeleting(false)}
       onDelete={confirmDelete}
     />}

diff --git a/...ontent/highlights/components/SummaryPopup/__snapshots__/HighlightAnnotation.spec.tsx.snap b/...ontent/highlights/components/SummaryPopup/__snapshots__/HighlightAnnotation.spec.tsx.snap
@@ -14,10 +14,10 @@ exports[`HighlightDeleteWrapper match snapshot when editing is set to false 1`]
   -webkit-flex-flow: wrap;
   -ms-flex-flow: wrap;
   flex-flow: wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
 }
 
 .c0 span {
@@ -155,10 +155,10 @@ exports[`HighlightDeleteWrapper match snapshot when editing is set to true 1`] =
   -webkit-flex-flow: wrap;
   -ms-flex-flow: wrap;
   flex-flow: wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: start;
 }
 
 .c0 span {