diff --git a/src/content-tags-drawer/ContentTagsSnippet.scss b/src/content-tags-drawer/ContentTagsSnippet.scss new file mode 100644 index 0000000000..b116cd2ca9 --- /dev/null +++ b/src/content-tags-drawer/ContentTagsSnippet.scss @@ -0,0 +1,3 @@ +.tag-snippet-chip { + max-width: 260px; +} diff --git a/src/content-tags-drawer/ContentTagsSnippet.tsx b/src/content-tags-drawer/ContentTagsSnippet.tsx new file mode 100644 index 0000000000..329b5fd681 --- /dev/null +++ b/src/content-tags-drawer/ContentTagsSnippet.tsx @@ -0,0 +1,67 @@ +import { Chip, Stack } from '@openedx/paragon'; +import { Tag as TagIcon } from '@openedx/paragon/icons'; + +import { useContentTaxonomyTagsData } from './data/apiHooks'; +import { Tag } from './data/types'; + +interface ContentTagsSnippetProps { + contentId: string; +} + +const ContentTagChip = ({ tag }: { tag: Tag }) => { + let lineageStr = tag.lineage.join(' > '); + const lineageLength = tag.lineage.length; + const MAX_TAG_LENGTH = 30; + + if (lineageStr.length > MAX_TAG_LENGTH && lineageLength > 1) { + if (lineageLength > 2) { + // NOTE: If the tag lineage is too long and have more than 2 tags, we truncate it to the first and last level + // i.e "Abilities > Cognitive Abilities > Communication Abilities" becomes + // "Abilities > .. > Communication Abilities" + lineageStr = `${tag.lineage[0]} > .. > ${tag.lineage[lineageLength - 1]}`; + } + + if (lineageStr.length > MAX_TAG_LENGTH) { + // NOTE: If the tag lineage is still too long, we truncate it only to the last level + // i.e "Knowledge > .. > Administration and Management" becomes + // ".. > Administration and Management" + lineageStr = `.. > ${tag.lineage[lineageLength - 1]}`; + } + } + + return ( + + {lineageStr} + + ); +}; + +export const ContentTagsSnippet = ({ contentId }: ContentTagsSnippetProps) => { + const { + data, + } = useContentTaxonomyTagsData(contentId); + + if (!data) { + return null; + } + + return ( + + {data.taxonomies.map((taxonomy) => ( +
+

+ {`${taxonomy.name} (${taxonomy.tags.length})`} +

+
+ {taxonomy.tags.map((tag) => ( + + ))} +
+
+ ))} + + ); +}; diff --git a/src/content-tags-drawer/TagOutlineIcon.tsx b/src/content-tags-drawer/TagOutlineIcon.tsx deleted file mode 100644 index 7f9d439254..0000000000 --- a/src/content-tags-drawer/TagOutlineIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const TagOutlineIcon = (props) => ( - -); - -export default TagOutlineIcon; diff --git a/src/content-tags-drawer/data/api.js b/src/content-tags-drawer/data/api.js deleted file mode 100644 index 78ef97512c..0000000000 --- a/src/content-tags-drawer/data/api.js +++ /dev/null @@ -1,101 +0,0 @@ -// @ts-check -import { camelCaseObject, getConfig } from '@edx/frontend-platform'; -import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; - -const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL; - -/** - * Get the URL used to fetch tags data from the "taxonomy tags" REST API - * @param {number} taxonomyId - * @param {{page?: number, searchTerm?: string, parentTag?: string}} options - * @returns {string} the URL - */ -export const getTaxonomyTagsApiUrl = (taxonomyId, options = {}) => { - const url = new URL(`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`, getApiBaseUrl()); - if (options.parentTag) { - url.searchParams.append('parent_tag', options.parentTag); - } - if (options.page) { - url.searchParams.append('page', String(options.page)); - } - if (options.searchTerm) { - url.searchParams.append('search_term', options.searchTerm); - } - - // Load in the full tree if children at once, if we can: - // Note: do not combine this with page_size (we currently aren't using page_size) - url.searchParams.append('full_depth_threshold', '1000'); - - return url.href; -}; -export const getContentTaxonomyTagsApiUrl = (contentId) => new URL(`api/content_tagging/v1/object_tags/${contentId}/`, getApiBaseUrl()).href; -export const getXBlockContentDataApiURL = (contentId) => new URL(`/xblock/outline/${contentId}`, getApiBaseUrl()).href; -export const getCourseContentDataApiURL = (contentId) => new URL(`/api/contentstore/v1/course_settings/${contentId}`, getApiBaseUrl()).href; -export const getLibraryContentDataApiUrl = (contentId) => new URL(`/api/libraries/v2/blocks/${contentId}/`, getApiBaseUrl()).href; -export const getContentTaxonomyTagsCountApiUrl = (contentId) => new URL(`api/content_tagging/v1/object_tag_counts/${contentId}/?count_implicit`, getApiBaseUrl()).href; - -/** - * Get all tags that belong to taxonomy. - * @param {number} taxonomyId The id of the taxonomy to fetch tags for - * @param {{page?: number, searchTerm?: string, parentTag?: string}} options - * @returns {Promise} - */ -export async function getTaxonomyTagsData(taxonomyId, options = {}) { - const url = getTaxonomyTagsApiUrl(taxonomyId, options); - const { data } = await getAuthenticatedHttpClient().get(url); - return camelCaseObject(data); -} - -/** - * Get the tags that are applied to the content object - * @param {string} contentId The id of the content object to fetch the applied tags for - * @returns {Promise} - */ -export async function getContentTaxonomyTagsData(contentId) { - const { data } = await getAuthenticatedHttpClient().get(getContentTaxonomyTagsApiUrl(contentId)); - return camelCaseObject(data[contentId]); -} - -/** - * Get the count of tags that are applied to the content object - * @param {string} contentId The id of the content object to fetch the count of the applied tags for - * @returns {Promise} - */ -export async function getContentTaxonomyTagsCount(contentId) { - const { data } = await getAuthenticatedHttpClient().get(getContentTaxonomyTagsCountApiUrl(contentId)); - if (contentId in data) { - return camelCaseObject(data[contentId]); - } - return 0; -} - -/** - * Fetch meta data (eg: display_name) about the content object (unit/component) - * @param {string} contentId The id of the content object (unit/component) - * @returns {Promise} - */ -export async function getContentData(contentId) { - let url; - - if (contentId.startsWith('lb:')) { - url = getLibraryContentDataApiUrl(contentId); - } else if (contentId.startsWith('course-v1:')) { - url = getCourseContentDataApiURL(contentId); - } else { - url = getXBlockContentDataApiURL(contentId); - } - const { data } = await getAuthenticatedHttpClient().get(url); - return camelCaseObject(data); -} - -/** - * Update content object's applied tags - * @param {string} contentId The id of the content object (unit/component) - * @param {Promise} tagsData The list of tags (values) to set on content object - * @returns {Promise} - */ -export async function updateContentTaxonomyTags(contentId, tagsData) { - const url = getContentTaxonomyTagsApiUrl(contentId); - const { data } = await getAuthenticatedHttpClient().put(url, { tagsData }); - return camelCaseObject(data[contentId]); -} diff --git a/src/content-tags-drawer/data/api.test.js b/src/content-tags-drawer/data/api.test.ts similarity index 97% rename from src/content-tags-drawer/data/api.test.js rename to src/content-tags-drawer/data/api.test.ts index 70a02680e8..4f8a3ab0bf 100644 --- a/src/content-tags-drawer/data/api.test.js +++ b/src/content-tags-drawer/data/api.test.ts @@ -1,4 +1,3 @@ -// @ts-check import MockAdapter from 'axios-mock-adapter'; import { initializeMockApp } from '@edx/frontend-platform'; import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; @@ -44,7 +43,7 @@ describe('content tags drawer api calls', () => { }); it('should get taxonomy tags data', async () => { - const taxonomyId = 123; + const taxonomyId = '123'; axiosMock.onGet().reply(200, taxonomyTagsMock); const result = await getTaxonomyTagsData(taxonomyId); @@ -53,7 +52,7 @@ describe('content tags drawer api calls', () => { }); it('should get taxonomy tags data with parentTag', async () => { - const taxonomyId = 123; + const taxonomyId = '123'; const options = { parentTag: 'Sample Tag' }; axiosMock.onGet().reply(200, taxonomyTagsMock); const result = await getTaxonomyTagsData(taxonomyId, options); @@ -63,7 +62,7 @@ describe('content tags drawer api calls', () => { }); it('should get taxonomy tags data with page', async () => { - const taxonomyId = 123; + const taxonomyId = '123'; const options = { page: 2 }; axiosMock.onGet().reply(200, taxonomyTagsMock); const result = await getTaxonomyTagsData(taxonomyId, options); @@ -73,7 +72,7 @@ describe('content tags drawer api calls', () => { }); it('should get taxonomy tags data with searchTerm', async () => { - const taxonomyId = 123; + const taxonomyId = '123'; const options = { searchTerm: 'memo' }; axiosMock.onGet().reply(200, taxonomyTagsMock); const result = await getTaxonomyTagsData(taxonomyId, options); diff --git a/src/content-tags-drawer/data/api.ts b/src/content-tags-drawer/data/api.ts new file mode 100644 index 0000000000..30f43d746b --- /dev/null +++ b/src/content-tags-drawer/data/api.ts @@ -0,0 +1,109 @@ +import { camelCaseObject, getConfig } from '@edx/frontend-platform'; +import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; + +import type { TagListData } from '@src/taxonomy/data/types'; + +import type { ContentData, ContentTaxonomyTagsData, UpdateTagsData } from './types'; + +const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL; + +interface GetTaxonomyTagsApiUrlOptions { + parentTag?: string; + page?: number; + searchTerm?: string; +} + +/** + * Get the URL used to fetch tags data from the "taxonomy tags" REST API + */ +export const getTaxonomyTagsApiUrl = (taxonomyId: string, options: GetTaxonomyTagsApiUrlOptions = {}): string => { + const url = new URL(`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`, getApiBaseUrl()); + if (options.parentTag) { + url.searchParams.append('parent_tag', options.parentTag); + } + if (options.page) { + url.searchParams.append('page', String(options.page)); + } + if (options.searchTerm) { + url.searchParams.append('search_term', options.searchTerm); + } + + // Load in the full tree if children at once, if we can: + // Note: do not combine this with page_size (we currently aren't using page_size) + url.searchParams.append('full_depth_threshold', '1000'); + + return url.href; +}; + +export const getContentTaxonomyTagsApiUrl = (contentId: string) => new URL(`api/content_tagging/v1/object_tags/${contentId}/`, getApiBaseUrl()).href; +export const getXBlockContentDataApiURL = (contentId: string) => new URL(`/xblock/outline/${contentId}`, getApiBaseUrl()).href; +export const getCourseContentDataApiURL = (contentId: string) => new URL(`/api/contentstore/v1/course_settings/${contentId}`, getApiBaseUrl()).href; +export const getLibraryContentDataApiUrl = (contentId: string) => new URL(`/api/libraries/v2/blocks/${contentId}/`, getApiBaseUrl()).href; +export const getContentTaxonomyTagsCountApiUrl = (contentId: string) => new URL(`api/content_tagging/v1/object_tag_counts/${contentId}/?count_implicit`, getApiBaseUrl()).href; + +/** + * Get all tags that belong to taxonomy. + */ +export async function getTaxonomyTagsData( + taxonomyId: string, + options: GetTaxonomyTagsApiUrlOptions = {}, +): Promise { + const url = getTaxonomyTagsApiUrl(taxonomyId, options); + const { data } = await getAuthenticatedHttpClient().get(url); + return camelCaseObject(data); +} + +/** + * Get the tags that are applied to the content object + * @param contentId The id of the content object to fetch the applied tags for + */ +export async function getContentTaxonomyTagsData(contentId: string): Promise { + const url = getContentTaxonomyTagsApiUrl(contentId); + const { data } = await getAuthenticatedHttpClient().get(url); + return camelCaseObject(data[contentId]); +} + +/** + * Get the count of tags that are applied to the content object + * @param contentId The id of the content object to fetch the count of the applied tags for + */ +export async function getContentTaxonomyTagsCount(contentId: string): Promise { + const url = getContentTaxonomyTagsCountApiUrl(contentId); + const { data } = await getAuthenticatedHttpClient().get(url); + if (contentId in data) { + return camelCaseObject(data[contentId]); + } + return 0; +} + +/** + * Fetch meta data (eg: display_name) about the content object (unit/component) + * @param contentId The id of the content object (unit/component) + */ +export async function getContentData(contentId: string): Promise { + let url: string; + + if (contentId.startsWith('lb:')) { + url = getLibraryContentDataApiUrl(contentId); + } else if (contentId.startsWith('course-v1:')) { + url = getCourseContentDataApiURL(contentId); + } else { + url = getXBlockContentDataApiURL(contentId); + } + const { data } = await getAuthenticatedHttpClient().get(url); + return camelCaseObject(data); +} + +/** + * Update content object's applied tags + * @param contentId The id of the content object (unit/component) + * @param tagsData The list of tags (values) to set on content object + */ +export async function updateContentTaxonomyTags( + contentId: string, + tagsData: UpdateTagsData, +): Promise { + const url = getContentTaxonomyTagsApiUrl(contentId); + const { data } = await getAuthenticatedHttpClient().put(url, { tagsData }); + return camelCaseObject(data[contentId]); +} diff --git a/src/content-tags-drawer/data/types.ts b/src/content-tags-drawer/data/types.ts index 127be3dc9b..44e6711205 100644 --- a/src/content-tags-drawer/data/types.ts +++ b/src/content-tags-drawer/data/types.ts @@ -1,4 +1,4 @@ -import type { TaxonomyData } from '../../taxonomy/data/types'; +import type { TaxonomyData } from '@src/taxonomy/data/types'; /** A tag that has been applied to some content. */ export interface Tag { diff --git a/src/content-tags-drawer/index.scss b/src/content-tags-drawer/index.scss index 0713b4929b..549c3e3cce 100644 --- a/src/content-tags-drawer/index.scss +++ b/src/content-tags-drawer/index.scss @@ -1,3 +1,4 @@ @import "content-tags-drawer/TagsTree"; @import "content-tags-drawer/tags-sidebar-controls/TagsSidebarControls"; @import "content-tags-drawer/ContentTagsDrawer"; +@import "content-tags-drawer/ContentTagsSnippet"; diff --git a/src/content-tags-drawer/index.ts b/src/content-tags-drawer/index.ts index 0da1520d0c..ff18561c61 100644 --- a/src/content-tags-drawer/index.ts +++ b/src/content-tags-drawer/index.ts @@ -1,3 +1,4 @@ export { default as ContentTagsDrawer } from './ContentTagsDrawer'; export { default as ContentTagsDrawerSheet } from './ContentTagsDrawerSheet'; export { useContentTaxonomyTagsData } from './data/apiHooks'; +export { ContentTagsSnippet } from './ContentTagsSnippet'; diff --git a/src/course-outline/CourseOutline.scss b/src/course-outline/CourseOutline.scss index 101d61ff51..b072d31fb4 100644 --- a/src/course-outline/CourseOutline.scss +++ b/src/course-outline/CourseOutline.scss @@ -8,3 +8,4 @@ @import "./publish-modal/PublishModal"; @import "./xblock-status/XBlockStatus"; @import "./drag-helper/SortableItem"; +@import "./outline-sidebar"; diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx index 76d5b0d9bd..74656fdfd8 100644 --- a/src/course-outline/CourseOutline.tsx +++ b/src/course-outline/CourseOutline.tsx @@ -2,8 +2,8 @@ import { useState, useEffect, useCallback } from 'react'; import { useIntl } from '@edx/frontend-platform/i18n'; import { Container, - Layout, Row, + Stack, TransitionReplace, Toast, StandardModal, @@ -331,17 +331,11 @@ const CourseOutline = ({ courseId }: CourseOutlineProps) => { /> )} /> - - +
+
-
+
{
- - - - - +
+ +
({ @@ -16,7 +15,7 @@ let axiosMock; const mockPathname = '/foo-bar'; const courseId = '123'; -const renderComponent = (props) => render(, { path: mockPathname }); +const renderComponent = () => render(, { path: mockPathname }); describe('', () => { beforeEach(() => { diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.jsx b/src/course-outline/outline-sidebar/OutlineHelpSidebar.tsx similarity index 80% rename from src/course-outline/outline-sidebar/OutlineSidebar.jsx rename to src/course-outline/outline-sidebar/OutlineHelpSidebar.tsx index 6d659d238d..dd83f291f1 100644 --- a/src/course-outline/outline-sidebar/OutlineSidebar.jsx +++ b/src/course-outline/outline-sidebar/OutlineHelpSidebar.tsx @@ -1,13 +1,16 @@ -import React from 'react'; -import PropTypes from 'prop-types'; import { Hyperlink } from '@openedx/paragon'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { HelpSidebar } from '../../generic/help-sidebar'; -import { useHelpUrls } from '../../help-urls/hooks'; +import { HelpSidebar } from '@src/generic/help-sidebar'; +import { useHelpUrls } from '@src/help-urls/hooks'; + import { getFormattedSidebarMessages } from './utils'; -const OutlineSideBar = ({ courseId }) => { +interface OutlineHelpSidebarProps { + courseId: string; +} + +const OutlineHelpSideBar = ({ courseId }: OutlineHelpSidebarProps) => { const intl = useIntl(); const { visibility: learnMoreVisibilityUrl, @@ -40,7 +43,7 @@ const OutlineSideBar = ({ courseId }) => { {descriptions.map((description) => (

{description}

))} - {Boolean(link) && Boolean(link.href) && ( + {!!link?.href && ( { ); }; -OutlineSideBar.propTypes = { - courseId: PropTypes.string.isRequired, -}; - -export default OutlineSideBar; +export default OutlineHelpSideBar; diff --git a/src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx b/src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx new file mode 100644 index 0000000000..72001e18a5 --- /dev/null +++ b/src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx @@ -0,0 +1,41 @@ +import { useIntl } from '@edx/frontend-platform/i18n'; +import { SchoolOutline, Tag } from '@openedx/paragon/icons'; + +import { ContentTagsSnippet } from '@src/content-tags-drawer'; +import { ComponentCountSnippet } from '@src/generic/block-type-utils'; +import { useGetBlockTypes } from '@src/search-manager'; + +import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar'; + +import messages from './messages'; + +export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => { + const intl = useIntl(); + + const { data: componentData } = useGetBlockTypes( + [`context_key = "${courseId}"`], + ); + + return ( +
+ + + + {componentData && } + + + + + +
+ ); +}; diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.tsx b/src/course-outline/outline-sidebar/OutlineSidebar.tsx new file mode 100644 index 0000000000..034721b410 --- /dev/null +++ b/src/course-outline/outline-sidebar/OutlineSidebar.tsx @@ -0,0 +1,79 @@ +import { useState } from 'react'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import { + IconButton, + IconButtonToggle, + Stack, + breakpoints, + useToggle, +} from '@openedx/paragon'; +import { + FormatIndentDecrease, + FormatIndentIncrease, + HelpOutline, + Info, +} from '@openedx/paragon/icons'; +import { useMediaQuery } from 'react-responsive'; + +import { useWaffleFlags } from '@src/data/apiHooks'; + +import OutlineHelpSidebar from './OutlineHelpSidebar'; +import { OutlineInfoSidebar } from './OutlineInfoSidebar'; +import messages from './messages'; + +interface OutlineSideBarProps { + courseId: string; +} + +const COMPONENTS = { + help: OutlineHelpSidebar, + info: OutlineInfoSidebar, +}; + +const OutlineSideBar = ({ courseId }: OutlineSideBarProps) => { + const intl = useIntl(); + const { tempWaffleFlag } = useWaffleFlags(); + const [isOpen, open, , toggle] = useToggle(true); + const [currentTab, setCurrentTab] = useState('info'); + const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth }); + + // Returns the previous help sidebar component if the waffle flag is disabled + if (!tempWaffleFlag) { + // On screens smaller than medium, the help sidebar is shown below the course outline + const colSpan = isMedium ? 'col-12' : 'col-3'; + return ( +
+ +
+ ); + } + + const SidebarComponent = COMPONENTS[currentTab]; + + const onChangeIconButtonToggle = (value: string) => { + setCurrentTab(value); + open(); + }; + + return ( + + {isOpen && !!currentTab && ( +
+ +
+ )} +
+ + + + + +
+ + ); +}; + +export default OutlineSideBar; diff --git a/src/course-outline/outline-sidebar/index.scss b/src/course-outline/outline-sidebar/index.scss new file mode 100644 index 0000000000..553812de67 --- /dev/null +++ b/src/course-outline/outline-sidebar/index.scss @@ -0,0 +1,13 @@ +.sidebar-toggle { + align-self: flex-start; + + .pgn__icon-button-toggle__container { + flex-direction: column; + align-items: flex-center; + + .btn-icon + .btn-icon { + margin-top: var(--pgn-spacing-spacer-1); + margin-inline-start: unset; + } + } +} diff --git a/src/course-outline/outline-sidebar/messages.js b/src/course-outline/outline-sidebar/messages.ts similarity index 80% rename from src/course-outline/outline-sidebar/messages.js rename to src/course-outline/outline-sidebar/messages.ts index 7ef0cf0cfb..3df91c37be 100644 --- a/src/course-outline/outline-sidebar/messages.js +++ b/src/course-outline/outline-sidebar/messages.ts @@ -65,6 +65,28 @@ const messages = defineMessages({ id: 'course-authoring.course-outline.sidebar.section-4.link', defaultMessage: 'Learn more about content visibility settings', }, + sidebarButtonClose: { + id: 'course-authoring.course-outline.sidebar.sidebar-button-close', + defaultMessage: 'Close', + }, + sidebarButtonHelp: { + id: 'course-authoring.course-outline.sidebar.sidebar-button-help', + defaultMessage: 'Help', + }, + sidebarButtonInfo: { + id: 'course-authoring.course-outline.sidebar.sidebar-button-info', + defaultMessage: 'Info', + }, + sidebarSectionSummary: { + id: 'course-authoring.course-outline.sidebar.sidebar-section-summary', + defaultMessage: 'Course Content Summary', + description: 'Title of the summary section in the sidebar', + }, + sidebarSectionTaxonomy: { + id: 'course-authoring.course-outline.sidebar.sidebar-section-taxonomy', + defaultMessage: 'Taxonomy Alignments', + description: 'Title of the taxonomy section in the sidebar', + }, }); export default messages; diff --git a/src/data/api.ts b/src/data/api.ts index e9bbad7b0b..af6a90a369 100644 --- a/src/data/api.ts +++ b/src/data/api.ts @@ -61,6 +61,7 @@ export const waffleFlagDefaults = { useNewGroupConfigurationsPage: true, useReactMarkdownEditor: true, useVideoGalleryFlow: false, + tempWaffleFlag: true, // FIXME: update this to false once we have the feature flag } as const; export type WaffleFlagName = keyof typeof waffleFlagDefaults; diff --git a/src/generic/block-type-utils/index.scss b/src/generic/block-type-utils/index.scss index f0636a8ce9..0c8d607194 100644 --- a/src/generic/block-type-utils/index.scss +++ b/src/generic/block-type-utils/index.scss @@ -21,6 +21,10 @@ margin: -1px; } } + + span { + color: white; + } } .component-style-html { @@ -46,6 +50,10 @@ margin: -1px; } } + + span { + color: white; + } } .component-style-collection { @@ -71,6 +79,10 @@ margin: -1px; } } + + span { + color: black; + } } .component-style-video { @@ -96,6 +108,10 @@ margin: -1px; } } + + span { + color: white; + } } .component-style-vertical { @@ -121,6 +137,10 @@ margin: -1px; } } + + span { + color: white; + } } .component-style-sequential { @@ -146,6 +166,10 @@ margin: -1px; } } + + span { + color: white; + } } .component-style-chapter { @@ -172,6 +196,10 @@ margin: -1px; } } + + span { + color: white; + } } .component-style-other { @@ -197,6 +225,10 @@ margin: -1px; } } + + span { + color: white; + } } .component-style-import-placeholder { @@ -222,4 +254,8 @@ margin: -1px; } } + + span { + color: white; + } } diff --git a/src/generic/block-type-utils/index.tsx b/src/generic/block-type-utils/index.tsx index e88f69cb4d..34fba653fe 100644 --- a/src/generic/block-type-utils/index.tsx +++ b/src/generic/block-type-utils/index.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Icon } from '@openedx/paragon'; import { Article } from '@openedx/paragon/icons'; import { COMPONENT_TYPE_ICON_MAP, @@ -6,6 +8,8 @@ import { COMPONENT_TYPE_STYLE_COLOR_MAP, } from './constants'; +import messages from './messages'; + export function getItemIcon(blockType: string): React.ComponentType { return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article; } @@ -13,3 +17,62 @@ export function getItemIcon(blockType: string): React.ComponentType { export function getComponentStyleColor(blockType: string): string { return COMPONENT_TYPE_STYLE_COLOR_MAP[blockType] ?? COMPONENT_TYPE_STYLE_COLOR_MAP.other; } + +interface ComponentIconProps { + blockType: string; + iconTitle: string; + text?: string; + className?: string; +} + +export const ComponentIcon = ({ + blockType, + iconTitle, + text, + className, +}: ComponentIconProps) => ( +
+ + {text && {text}} +
+); + +interface ComponentCountSnippetProps { + componentData: Record; +} + +export const ComponentCountSnippet = ({ componentData }: ComponentCountSnippetProps) => { + const intl = useIntl(); + + const totalCount = componentData && Object.keys(componentData).length; + + return ( +
+ {componentData && ( +
+ + + {`${totalCount} ${intl.formatMessage(messages.componentTotal)}`} + +
+ )} + {componentData && Object.keys(componentData).map((blockType) => ( + + ))} +
+ ); +}; diff --git a/src/generic/block-type-utils/messages.ts b/src/generic/block-type-utils/messages.ts new file mode 100644 index 0000000000..ee6d3b319d --- /dev/null +++ b/src/generic/block-type-utils/messages.ts @@ -0,0 +1,11 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + componentTotal: { + id: 'course-authoring.block-type-utils.component-total', + defaultMessage: 'Total', + description: 'Total number of components', + }, +}); + +export default messages; diff --git a/src/generic/sidebar/SidebarContent.tsx b/src/generic/sidebar/SidebarContent.tsx new file mode 100644 index 0000000000..b8b6f9998f --- /dev/null +++ b/src/generic/sidebar/SidebarContent.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Stack } from '@openedx/paragon'; + +interface SidebarContentProps { + children: React.ReactNode[]; +} + +export const SidebarContent = ({ children } : SidebarContentProps) => ( + + {children.map((child, index) => ( + // eslint-disable-next-line react/no-array-index-key + + {child} + {index !== children.length - 1 &&
} + + ))} + +); diff --git a/src/generic/sidebar/SidebarSection.tsx b/src/generic/sidebar/SidebarSection.tsx new file mode 100644 index 0000000000..618d492f37 --- /dev/null +++ b/src/generic/sidebar/SidebarSection.tsx @@ -0,0 +1,19 @@ +import { Icon, Stack } from '@openedx/paragon'; + +export interface SidebarSectionProps { + title: string; + icon?: React.ComponentType; + children: React.ReactNode; +} + +export const SidebarSection = ({ title, icon, children }: SidebarSectionProps) => ( + + + {icon && } +

+ {title} +

+ + {children} + +); diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx new file mode 100644 index 0000000000..701542cd61 --- /dev/null +++ b/src/generic/sidebar/SidebarTitle.tsx @@ -0,0 +1,13 @@ +import { Icon, Stack } from '@openedx/paragon'; + +interface SidebarTitleProps { + title: string; + icon?: React.ComponentType; +} + +export const SidebarTitle = ({ title, icon }: SidebarTitleProps) => ( + + +

{title}

+ +); diff --git a/src/generic/sidebar/index.tsx b/src/generic/sidebar/index.tsx new file mode 100644 index 0000000000..34a5859bc3 --- /dev/null +++ b/src/generic/sidebar/index.tsx @@ -0,0 +1,3 @@ +export { SidebarContent } from './SidebarContent'; +export { SidebarTitle } from './SidebarTitle'; +export { SidebarSection } from './SidebarSection'; diff --git a/src/library-authoring/containers/ContainerCard.tsx b/src/library-authoring/containers/ContainerCard.tsx index 229c22b7f5..15a1cadb26 100644 --- a/src/library-authoring/containers/ContainerCard.tsx +++ b/src/library-authoring/containers/ContainerCard.tsx @@ -10,7 +10,7 @@ import { } from '@openedx/paragon'; import { MoreVert } from '@openedx/paragon/icons'; -import { getItemIcon, getComponentStyleColor } from '@src/generic/block-type-utils'; +import { ComponentIcon } from '@src/generic/block-type-utils'; import { useClipboard } from '@src/generic/clipboard'; import { getBlockType } from '@src/generic/key-utils'; import { type ContainerHit, Highlight, PublishStatus } from '@src/search-manager'; @@ -165,17 +165,14 @@ const UnitcardPreview = ({ childKeys, showMaxChildren = 5 }: UnitCardPreviewProp childKeys.slice(0, showMaxChildren).map((usageKey, idx) => { const blockType = getBlockType(usageKey); let blockPreview: ReactNode; - let classNames; if (idx < showMaxChildren - 1 || hiddenChildren <= 0) { // Show the first N-1 blocks as item icons // (or all N blocks if no hidden children) - classNames = `rounded p-1 ${getComponentStyleColor(blockType)}`; blockPreview = ( - ); } else { @@ -192,7 +189,6 @@ const UnitcardPreview = ({ childKeys, showMaxChildren = 5 }: UnitCardPreviewProp // A container can have multiple instances of the same block // eslint-disable-next-line react/no-array-index-key key={`${usageKey}-${idx}`} - className={classNames} > {blockPreview} diff --git a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx index 06682dbec4..05c4b6fc65 100644 --- a/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx +++ b/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx @@ -1,6 +1,6 @@ -import { PluginSlot } from '@openedx/frontend-plugin-framework/dist'; -import React from 'react'; -import OutlineSideBar from '../../course-outline/outline-sidebar/OutlineSidebar'; +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import OutlineSideBar from '@src/course-outline/outline-sidebar/OutlineSidebar'; export const CourseAuthoringOutlineSidebarSlot = ({ courseId, diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts index 80e4fea0d3..18e3ed7195 100644 --- a/src/search-manager/data/api.ts +++ b/src/search-manager/data/api.ts @@ -338,7 +338,9 @@ export const fetchBlockTypes = async ( }], }); - return results[0].facetDistribution?.block_type ?? {}; + const blockTypeFacet = results[0].facetDistribution?.block_type; + + return blockTypeFacet ? camelCaseObject(blockTypeFacet) : {}; }; /** Information about a single tag in the tag tree, as returned by fetchAvailableTagOptions() */