314dfa60e2
* feat: enable the problem editor for library components * fix: don't try to load "advanced settings" when editing problem in library * fix: don't fetch images when editing problem in library * docs: add a note about plans for the editor modal * fix: choosing a problem type then cancelling resulted in an error * chore: remove unused mockApi, clean up problematic 'module' self import * test: update workflow test to test problem editor * feat: show capa content summary on cards in library search results * docs: fix comment typos found in code review * refactor: add 'key-utils' to consolidate opaque key logic
102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
import React, { useContext, useState } from 'react';
|
|
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
|
|
import {
|
|
ActionRow,
|
|
Icon,
|
|
IconButton,
|
|
Dropdown,
|
|
} from '@openedx/paragon';
|
|
import { MoreVert } from '@openedx/paragon/icons';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { updateClipboard } from '../../generic/data/api';
|
|
import { ToastContext } from '../../generic/toast-context';
|
|
import { type ContentHit } from '../../search-manager';
|
|
import { LibraryContext } from '../common/context';
|
|
import messages from './messages';
|
|
import { STUDIO_CLIPBOARD_CHANNEL } from '../../constants';
|
|
import { getEditUrl } from './utils';
|
|
import BaseComponentCard from './BaseComponentCard';
|
|
|
|
type ComponentCardProps = {
|
|
contentHit: ContentHit,
|
|
blockTypeDisplayName: string,
|
|
};
|
|
|
|
export const ComponentMenu = ({ usageKey }: { usageKey: string }) => {
|
|
const intl = useIntl();
|
|
const editUrl = usageKey && getEditUrl(usageKey);
|
|
const { showToast } = useContext(ToastContext);
|
|
const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
|
|
const updateClipboardClick = () => {
|
|
updateClipboard(usageKey)
|
|
.then((clipboardData) => {
|
|
clipboardBroadcastChannel.postMessage(clipboardData);
|
|
showToast(intl.formatMessage(messages.copyToClipboardSuccess));
|
|
})
|
|
.catch(() => showToast(intl.formatMessage(messages.copyToClipboardError)));
|
|
};
|
|
|
|
return (
|
|
<Dropdown id="component-card-dropdown" onClick={(e) => e.stopPropagation()}>
|
|
<Dropdown.Toggle
|
|
id="component-card-menu-toggle"
|
|
as={IconButton}
|
|
src={MoreVert}
|
|
iconAs={Icon}
|
|
variant="primary"
|
|
alt={intl.formatMessage(messages.componentCardMenuAlt)}
|
|
data-testid="component-card-menu-toggle"
|
|
/>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item {...(editUrl ? { as: Link, to: editUrl } : { disabled: true, to: '#' })}>
|
|
<FormattedMessage {...messages.menuEdit} />
|
|
</Dropdown.Item>
|
|
<Dropdown.Item onClick={updateClipboardClick}>
|
|
<FormattedMessage {...messages.menuCopyToClipboard} />
|
|
</Dropdown.Item>
|
|
<Dropdown.Item disabled>
|
|
<FormattedMessage {...messages.menuAddToCollection} />
|
|
</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
);
|
|
};
|
|
|
|
const ComponentCard = ({ contentHit, blockTypeDisplayName } : ComponentCardProps) => {
|
|
const {
|
|
openComponentInfoSidebar,
|
|
} = useContext(LibraryContext);
|
|
|
|
const {
|
|
blockType,
|
|
formatted,
|
|
tags,
|
|
usageKey,
|
|
} = contentHit;
|
|
const description: string = (/* eslint-disable */
|
|
blockType === 'html' ? formatted?.content?.htmlContent :
|
|
blockType === 'problem' ? formatted?.content?.capaContent :
|
|
undefined
|
|
) ?? '';/* eslint-enable */
|
|
const displayName = formatted?.displayName ?? '';
|
|
|
|
return (
|
|
<BaseComponentCard
|
|
type={blockType}
|
|
displayName={displayName}
|
|
description={description}
|
|
tags={tags}
|
|
actions={(
|
|
<ActionRow>
|
|
<ComponentMenu usageKey={usageKey} />
|
|
</ActionRow>
|
|
)}
|
|
blockTypeDisplayName={blockTypeDisplayName}
|
|
openInfoSidebar={() => openComponentInfoSidebar(usageKey)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ComponentCard;
|