feat: allow full width content in library authoring [FC-0062] (#1258)

* feat: allow full width content in library authoring

* chore: update header and footer versions

---------

Co-authored-by: Jillian <[email protected]>

Author: rpenido

package-lock.json

@@ -48,8 +48,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-footer": "^14.0.3",
-    "@edx/frontend-component-header": "^5.3.3",
+    "@edx/frontend-component-footer": "^14.1.0",
+    "@edx/frontend-component-header": "^5.5.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
     "@edx/frontend-platform": "^8.0.3",
     "@edx/openedx-atlas": "^0.6.0",
@@ -65,7 +65,7 @@
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
     "@openedx/frontend-build": "^14.0.14",
     "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/paragon": "^22.5.1",
+    "@openedx/paragon": "^22.8.1",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",

package.json

@@ -2,20 +2,23 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioHeader } from '@edx/frontend-component-header';
-import { useToggle } from '@openedx/paragon';
+import { type Container, useToggle } from '@openedx/paragon';
 import { generatePath, useHref } from 'react-router-dom';
 
 import { SearchModal } from '../search-modal';
 import { useContentMenuItems, useSettingMenuItems, useToolsMenuItems } from './hooks';
 import messages from './messages';
 
+type ContainerPropsType = React.ComponentProps<typeof Container>;
+
 interface HeaderProps {
   contextId?: string,
   number?: string,
   org?: string,
   title?: string,
   isHiddenMainMenu?: boolean,
   isLibrary?: boolean,
+  containerProps?: ContainerPropsType,
 }
 
 const Header = ({
@@ -25,6 +28,7 @@ const Header = ({
   title = '',
   isHiddenMainMenu = false,
   isLibrary = false,
+  containerProps = {},
 }: HeaderProps) => {
   const intl = useIntl();
   const libraryHref = useHref('/library/:libraryId');
@@ -69,8 +73,9 @@ const Header = ({
         mainMenuDropdowns={mainMenuDropdowns}
         outlineLink={outlineLink}
         searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
+        containerProps={containerProps}
       />
-      { meiliSearchEnabled && (
+      {meiliSearchEnabled && (
         <SearchModal
           isOpen={isShowSearchModalOpen}
           courseId={isLibrary ? undefined : contextId}

src/header/Header.tsx

@@ -164,8 +164,11 @@ const LibraryAuthoringPage = () => {
           org={libraryData.org}
           contextId={libraryId}
           isLibrary
+          containerProps={{
+            size: undefined,
+          }}
         />
-        <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
+        <Container className="px-4 mt-4 mb-5 library-authoring-page">
           <SearchContextProvider
             extraFilter={`context_key = "${libraryId}"`}
           >
@@ -218,7 +221,7 @@ const LibraryAuthoringPage = () => {
             </Routes>
           </SearchContextProvider>
         </Container>
-        <StudioFooter />
+        <StudioFooter containerProps={{ size: undefined }} />
       </div>
       { !!sidebarBodyComponent && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">

src/library-authoring/LibraryAuthoringPage.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { orderBy } from 'lodash';
-import { CardGrid } from '@openedx/paragon';
 
 import { SearchContextProvider, useSearchContext } from '../search-manager';
 import { type CollectionHit, type ContentHit, SearchSortOption } from '../search-manager/data/api';
@@ -48,15 +47,7 @@ const RecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId }) => {
         title={intl.formatMessage(messages.recentlyModifiedTitle)}
         contentCount={componentCount}
       >
-        <CardGrid
-          columnSizes={{
-            sm: 12,
-            md: 6,
-            lg: 4,
-            xl: 3,
-          }}
-          hasEqualColumnHeights
-        >
+        <div className="library-cards-grid">
           {recentItems.map((contentHit) => (
             contentHit.type === 'collection' ? (
               <CollectionCard
@@ -71,7 +62,7 @@ const RecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId }) => {
               />
             )
           ))}
-        </CardGrid>
+        </div>
       </LibrarySection>
     )
     : null;

src/library-authoring/LibraryRecentlyModified.tsx

@@ -1,4 +1,8 @@
 .library-component-card {
+  .pgn__card {
+    height: 100%
+  }
+
   .library-component-header {
     border-top-left-radius: .375rem;
     border-top-right-radius: .375rem;

src/library-authoring/components/ComponentCard.scss

@@ -246,7 +246,6 @@ export async function fetchSearchResults({
     highlightPreTag: HIGHLIGHT_PRE_TAG,
     highlightPostTag: HIGHLIGHT_POST_TAG,
     attributesToCrop: ['content'],
-    cropLength: 20,
     sort,
     offset,
     limit,
@@ -281,7 +280,6 @@ export async function fetchSearchResults({
     highlightPreTag: HIGHLIGHT_PRE_TAG,
     highlightPostTag: HIGHLIGHT_POST_TAG,
     attributesToCrop: ['description'],
-    cropLength: 15,
     sort,
     offset,
     limit,