From 0349188c42ec7c42f8975f01a468ff1f2847564e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Wed, 2 Oct 2024 08:16:25 -0300 Subject: [PATCH] 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 --- package-lock.json | 26 +++++++++++-------- package.json | 6 ++--- src/header/Header.tsx | 9 +++++-- .../LibraryAuthoringPage.tsx | 7 +++-- .../LibraryRecentlyModified.tsx | 13 ++-------- .../components/ComponentCard.scss | 4 +++ src/search-manager/data/api.ts | 2 -- 7 files changed, 36 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e67189716..cb7b9e098f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,8 +20,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", @@ -37,7 +37,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", @@ -2153,16 +2153,16 @@ } }, "node_modules/@edx/frontend-component-footer": { - "version": "14.0.10", - "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.0.10.tgz", - "integrity": "sha512-Gde3gZjxWJJrgkNKo46RZySVJ9RILUPoJOw1AUthPOih9jPFB7h768CUFWbFuhSuz/0WzPScNzesxoNm54Xgug==", - "license": "AGPL-3.0", + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.1.0.tgz", + "integrity": "sha512-hdQEGbZosa5Lp8d4sLCu7+e0+X2dQDQZgd5stABbGNbDD1UPU7Efb3duJ5HhcNscpCHMhtYeNbajfUU5K+tKrg==", "dependencies": { "@fortawesome/fontawesome-svg-core": "6.6.0", "@fortawesome/free-brands-svg-icons": "6.6.0", "@fortawesome/free-regular-svg-icons": "6.6.0", "@fortawesome/free-solid-svg-icons": "6.6.0", "@fortawesome/react-fontawesome": "0.2.2", + "classnames": "^2.5.1", "jest-environment-jsdom": "^29.7.0", "lodash": "^4.17.21", "ts-jest": "^29.1.2" @@ -2176,16 +2176,19 @@ } }, "node_modules/@edx/frontend-component-header": { - "version": "5.3.4", - "license": "AGPL-3.0", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-5.5.0.tgz", + "integrity": "sha512-nvpuTIx1o27LUGJ17HpOOm+PX0gg/YumWUMsrl1gSjbrTksyDLOxS1Y4thqlrWzD+dAgk5YKMowZM2BLiRDguQ==", "dependencies": { "@fortawesome/fontawesome-svg-core": "6.6.0", "@fortawesome/free-brands-svg-icons": "6.6.0", "@fortawesome/free-regular-svg-icons": "6.6.0", "@fortawesome/free-solid-svg-icons": "6.6.0", "@fortawesome/react-fontawesome": "^0.2.0", + "@openedx/frontend-plugin-framework": "^1.3.0", "axios-mock-adapter": "1.22.0", "babel-polyfill": "6.26.0", + "classnames": "^2.5.1", "jest-environment-jsdom": "^29.7.0", "react-responsive": "8.2.0", "react-transition-group": "4.4.5" @@ -4000,8 +4003,9 @@ } }, "node_modules/@openedx/frontend-plugin-framework": { - "version": "1.2.3", - "license": "AGPL-3.0", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.3.0.tgz", + "integrity": "sha512-qLtX/4HIuWXiIhBdtBuL6mPVbV2un0rsFYx3I5+3tIUf7+T7WRq81a6JHU5QGyAmZy9dfiv7QwbqwiEQOVXVuQ==", "dependencies": { "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2", "classnames": "^2.3.2", diff --git a/package.json b/package.json index 1b62ce3159..27bc40d4b7 100644 --- a/package.json +++ b/package.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", diff --git a/src/header/Header.tsx b/src/header/Header.tsx index 6bb916c397..80991c78d5 100644 --- a/src/header/Header.tsx +++ b/src/header/Header.tsx @@ -2,13 +2,15 @@ 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; + interface HeaderProps { contextId?: string, number?: string, @@ -16,6 +18,7 @@ interface HeaderProps { 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 && ( { org={libraryData.org} contextId={libraryId} isLibrary + containerProps={{ + size: undefined, + }} /> - + @@ -218,7 +221,7 @@ const LibraryAuthoringPage = () => { - + { !!sidebarBodyComponent && (
diff --git a/src/library-authoring/LibraryRecentlyModified.tsx b/src/library-authoring/LibraryRecentlyModified.tsx index 57828871ef..4d5696ec05 100644 --- a/src/library-authoring/LibraryRecentlyModified.tsx +++ b/src/library-authoring/LibraryRecentlyModified.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} > - +
{recentItems.map((contentHit) => ( contentHit.type === 'collection' ? ( = ({ libraryId }) => { /> ) ))} - +
) : null; diff --git a/src/library-authoring/components/ComponentCard.scss b/src/library-authoring/components/ComponentCard.scss index fd902fb33b..cdf72300e6 100644 --- a/src/library-authoring/components/ComponentCard.scss +++ b/src/library-authoring/components/ComponentCard.scss @@ -1,4 +1,8 @@ .library-component-card { + .pgn__card { + height: 100% + } + .library-component-header { border-top-left-radius: .375rem; border-top-right-radius: .375rem; diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts index 5feeb2456a..fe73a7d3fc 100644 --- a/src/search-manager/data/api.ts +++ b/src/search-manager/data/api.ts @@ -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,