fix: Library v2 info sidebar UI fixes (#1226)

Author: ChrisChV

src/library-authoring/LibraryAuthoringPage.scss

@@ -0,0 +1,11 @@
+.library-authoring-page {
+  .header-actions {
+    .normal-border {
+      border: 1px solid;
+    }
+
+    .open-border {
+      border: 2px solid;
+    }
+  }
+}

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -370,17 +370,22 @@ describe('<LibraryAuthoringPage />', () => {
     expect((await screen.findAllByText(libraryData.title))[0]).toBeInTheDocument();
     expect((await screen.findAllByText(libraryData.title))[1]).toBeInTheDocument();
 
+    // Open by default; close the library info sidebar
     const closeButton = screen.getByRole('button', { name: /close/i });
     fireEvent.click(closeButton);
-
     expect(screen.queryByText('Draft')).not.toBeInTheDocument();
     expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
 
+    // Open library info sidebar with 'Library info' button
     const libraryInfoButton = screen.getByRole('button', { name: /library info/i });
     fireEvent.click(libraryInfoButton);
-
     expect(screen.getByText('Draft')).toBeInTheDocument();
     expect(screen.getByText('(Never Published)')).toBeInTheDocument();
+
+    // CLose library info sidebar with 'Library info' button
+    fireEvent.click(libraryInfoButton);
+    expect(screen.queryByText('Draft')).not.toBeInTheDocument();
+    expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
   });
 
   it('show the "View All" button when viewing library with many components', async () => {

src/library-authoring/LibraryAuthoringPage.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect } from 'react';
+import classNames from 'classnames';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -33,7 +34,7 @@ import LibraryCollections from './LibraryCollections';
 import LibraryHome from './LibraryHome';
 import { useContentLibrary } from './data/apiHooks';
 import { LibrarySidebar } from './library-sidebar';
-import { LibraryContext } from './common/context';
+import { LibraryContext, SidebarBodyComponentId } from './common/context';
 import messages from './messages';
 
 enum TabList {
@@ -51,30 +52,49 @@ const HeaderActions = ({ canEditLibrary }: HeaderActionsProps) => {
   const {
     openAddContentSidebar,
     openInfoSidebar,
+    closeLibrarySidebar,
+    sidebarBodyComponent,
   } = useContext(LibraryContext);
 
   if (!canEditLibrary) {
     return null;
   }
 
+  const infoSidebarIsOpen = () => (
+    sidebarBodyComponent === SidebarBodyComponentId.Info
+  );
+
+  const handleOnClickInfoSidebar = () => {
+    if (infoSidebarIsOpen()) {
+      closeLibrarySidebar();
+    } else {
+      openInfoSidebar();
+    }
+  };
+
   return (
-    <>
+    <div className="header-actions">
       <Button
+        className={classNames('mr-1', {
+          'normal-border': !infoSidebarIsOpen(),
+          'open-border': infoSidebarIsOpen(),
+        })}
         iconBefore={InfoOutline}
         variant="outline-primary rounded-0"
-        onClick={openInfoSidebar}
+        onClick={handleOnClickInfoSidebar}
       >
         {intl.formatMessage(messages.libraryInfoButton)}
       </Button>
       <Button
+        className="ml-1"
         iconBefore={Add}
         variant="primary rounded-0"
         onClick={openAddContentSidebar}
         disabled={!canEditLibrary}
       >
         {intl.formatMessage(messages.newContentButton)}
       </Button>
-    </>
+    </div>
   );
 };
 
@@ -132,7 +152,7 @@ const LibraryAuthoringPage = () => {
   };
 
   return (
-    <Container>
+    <Container className="library-authoring-page">
       <Row>
         <Col>
           <Header

src/library-authoring/index.scss

@@ -1,2 +1,3 @@
 @import "library-authoring/components/ComponentCard";
 @import "library-authoring/library-info/LibraryPublishStatus";
+@import "library-authoring/LibraryAuthoringPage";

src/library-authoring/library-info/LibraryInfoHeader.tsx

@@ -66,7 +66,7 @@ const LibraryInfoHeader = ({ library } : LibraryInfoHeaderProps) => {
         )
         : (
           <>
-            <span className="font-weight-bold m-1.5">
+            <span className="font-weight-bold mt-1.5 ml-1.5">
               {library.title}
             </span>
             {library.canEditLibrary && (
@@ -75,6 +75,8 @@ const LibraryInfoHeader = ({ library } : LibraryInfoHeaderProps) => {
                 iconAs={Icon}
                 alt={intl.formatMessage(messages.editNameButtonAlt)}
                 onClick={handleClick}
+                className="mt-1"
+                size="inline"
               />
             )}
           </>

src/library-authoring/library-sidebar/LibrarySidebar.tsx

@@ -49,11 +49,13 @@ const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
       <Stack direction="horizontal" className="d-flex justify-content-between">
         {buildHeader()}
         <IconButton
+          className="mt-1"
           src={Close}
           iconAs={Icon}
           alt={intl.formatMessage(messages.closeButtonAlt)}
           onClick={closeLibrarySidebar}
           variant="black"
+          size="inline"
         />
       </Stack>
       <div>