fix: Add better handlers for closing drawer

Include tests for new functionality

src/library-authoring/author-library/LibraryAuthoringPage.jsx

@@ -115,6 +115,7 @@ export const BlockPreviewBase = ({
                   iconBefore={Tag}
                   className="tags-count-manage-button"
                   onClick={() => setOpenContentTagsDrawer(block.id)}
+                  data-testid="tags-count-manage-tags-button"
                 >
                   { block.tags_count }
                 </Button>
@@ -492,17 +493,29 @@ const ContentTagsDrawer = ({ openContentTagsDrawer, setOpenContentTagsDrawer })
   }
 
   useEffect(() => {
-    const handleClose = (event) => {
+    const handleCloseMessage = (event) => {
       if (event.data === 'closeManageTagsDrawer') {
         setOpenContentTagsDrawer('');
       }
     };
 
-    // Add event listen to close drawer when close button is clicked from within the Iframe
-    window.addEventListener('message', handleClose);
+    const handleCloseEsc = (event) => {
+      if (event.key === 'Escape' || event.keyCode === 27) {
+        setOpenContentTagsDrawer('');
+      }
+    };
+
+    // Add event listener to close drawer when close button is clicked or ESC pressed
+    // from within the Iframe
+    window.addEventListener('message', handleCloseMessage);
+    // Add event listern to close the drawer when ESC pressed and focus outside iframe
+    // If ESC is pressed while the Iframe is in focus, it will send the close message
+    // to the parent window and it will be handled with the above event listener
+    window.addEventListener('keyup', handleCloseEsc);
 
     return () => {
-      window.removeEventListener('message', handleClose);
+      window.removeEventListener('message', handleCloseMessage);
+      window.removeEventListener('keyup', handleCloseEsc);
     };
   }, []);
 

src/library-authoring/author-library/specs/LibraryAuthoringPage.spec.jsx

@@ -392,4 +392,49 @@ testSuite('<LibraryAuthoringPageContainer />', () => {
       () => expect(updateLibrary.fn).toHaveBeenCalledWith({ data: { title: 'New title', libraryId: library.id } }),
     );
   });
+
+  it('Opens (and closes) block tags drawer', async () => {
+    const library = libraryFactory();
+    const block = blockFactory(undefined, { library });
+    await render(library, genState(library, [block]));
+    const moreActionsButton = screen.getByLabelText('More actions');
+    act(() => {
+      moreActionsButton.click();
+    });
+    const manageTagsAction = await screen.getByLabelText('Manage tags');
+    // Open the tags drawer
+    act(() => {
+      manageTagsAction.click();
+    });
+
+    const testExistingManageTagsIFrame = await screen.getByTitle('manage-tags-drawer');
+    expect(testExistingManageTagsIFrame).not.toBeNull();
+
+    // Close the tags drawer
+    fireEvent.keyUp(testExistingManageTagsIFrame, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    });
+
+    const testMissingManageTagsIFrame = await screen.queryByTitle('manage-tags-drawer');
+    expect(testMissingManageTagsIFrame).toBeNull();
+  });
+
+  it('Shows tags count button in block that opens tags drawer', async () => {
+    const library = libraryFactory();
+    const block = blockFactory({ tags_count: 2 }, { library });
+    await render(library, genState(library, [block]));
+
+    const manageTagsCountButton = screen.getByTestId('tags-count-manage-tags-button');
+    expect(manageTagsCountButton).not.toBeNull();
+    expect(manageTagsCountButton.textContent).toContain('2');
+    act(() => {
+      manageTagsCountButton.click();
+    });
+
+    const testExistingManageTagsIFrame = await screen.getByTitle('manage-tags-drawer');
+    expect(testExistingManageTagsIFrame).not.toBeNull();
+  });
 });