Switch Popover after Highlight is created

Fixes MS-878 #Complete

client/cypress/e2e/frontend/modules/highlights.cy.ts

@@ -45,21 +45,35 @@ const contentListContents = [
 ];
 
 const contentBlockId = window.btoa('ContentBlockNode:1');
+let lastHighlight;
 const operations = {
   ...defaultModuleQueriesandMutations,
   ModuleDetailsQuery: {
     module: getModule(defaultContents),
   },
   AddHighlight: ({ input: { highlight } }) => {
+    lastHighlight = {
+      ...highlight,
+      id: 'new-highlight-id',
+      contentBlock: {
+        id: contentBlockId,
+      },
+    };
     return {
       addHighlight: {
-        highlight: {
-          ...highlight,
-          id: 'new-highlight-id',
-          contentBlock: {
-            id: contentBlockId,
-          },
-        },
+        highlight: lastHighlight,
+      },
+    };
+  },
+  UpdateHighlight: ({ input: { note, color } }) => {
+    lastHighlight = {
+      ...lastHighlight,
+      note,
+      color,
+    };
+    return {
+      updateHighlight: {
+        highlight: lastHighlight,
       },
     };
   },
@@ -116,8 +130,12 @@ describe('Highlights', () => {
 
     markText();
 
+    // delete doesn't make sense before the highlight exists
+    cy.getByDataCy('highlight-delete').should('not.exist');
+
     // mark the text with yellow and check the text
     cy.getByDataCy('highlight-alpha').click();
+    cy.wait('@AddHighlight');
     cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');
 
     // we only want to have one of each element and not accidentally create multiple
@@ -126,7 +144,9 @@ describe('Highlights', () => {
 
     // mark the text with yellow and check the text
     cy.getByDataCy('highlight-beta').click();
+    cy.wait('@UpdateHighlight');
     cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');
+    cy.getByDataCy('highlight-mark').should('have.class', 'highlight--beta');
     //
     // we only want to have one of each element and not accidentally create multiple
     cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
@@ -167,7 +187,7 @@ describe('Highlights', () => {
     cy.getByDataCy('highlight-mark').should('not.exist');
   });
 
-  it.only('visits a module with a ContentListItem and highlights some text', () => {
+  it('visits a module with a ContentListItem and highlights some text', () => {
     cy.mockGraphqlOps({
       operations: {
         ...operations,

client/src/components/ContentBlock.vue

@@ -351,7 +351,20 @@ onMounted(() => {
       el: element,
       contentBlock: props.contentBlock,
       onChangeColor: (newHighlight: AddHighlightArgument) => {
-        createHighlight(newHighlight);
+        createHighlight(newHighlight).then(
+          ({
+            data: {
+              addHighlight: { highlight },
+            },
+          }) => {
+            // we need to replace the Popover after the Highlight is created
+            // todo: is there a cleaner way than to look for the element and click it?
+            const mark = document.querySelector(`mark[data-id="${highlight.id}"]`);
+            if (mark) {
+              mark.click();
+            }
+          }
+        );
       },
       onCreateNote: (newHighlight: AddHighlightArgument) => {
         // we also open the sidebar when clicking on the note icon

client/src/components/highlights/HighlightPopover.vue

@@ -26,7 +26,10 @@
         @click="$emit('note')"
       />
     </section>
-    <section class="highlight-popover__section">
+    <section
+      class="highlight-popover__section"
+      v-if="showDelete"
+    >
       <trash-icon
         class="highlight-popover__icon"
         data-cy="highlight-delete"
@@ -42,6 +45,7 @@ import TrashIcon from '@/components/icons/TrashIcon.vue';
 import modal from '@/helpers/modalService';
 export interface Props {
   top: string;
+  showDelete: boolean;
 }
 
 const emit = defineEmits(['close', 'confirm', 'choose-color', 'delete']);

client/src/helpers/popover.ts

@@ -33,6 +33,7 @@ export default {
 
     const popover = createApp(HighlightPopover, {
       top: `${Math.floor(offsetTop)}px`,
+      showDelete: !!onDelete,
       onConfirm() {
         cleanUp();
       },