Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: allow full width content in library authoring

* chore: update header and footer versions

---------

Co-authored-by: Jillian <jill@opencraft.com>
This commit is contained in:
Rômulo Penido
2024-10-02 08:16:25 -03:00
committed by GitHub
parent b1772383f4
commit 0349188c42
7 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@@ -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",

6
package.json
View File

@@ -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",

9
src/header/Header.tsx
View File

@@ -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<typeof Container>;
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 && (
<SearchModal
isOpen={isShowSearchModalOpen}
courseId={isLibrary ? undefined : contextId}

7
src/library-authoring/LibraryAuthoringPage.tsx
View File

@@ -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">

13
src/library-authoring/LibraryRecentlyModified.tsx
View File

@@ -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;

4
src/library-authoring/components/ComponentCard.scss
View File

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

2
src/search-manager/data/api.ts
View File

@@ -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,