refactor: Create block-type-utils with block type constants

src/course-unit/add-component/AddComponent.jsx

@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle } from '@openedx/paragon';
 
 import { getCourseSectionVertical } from '../data/selectors';
-import { COMPONENT_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import ComponentModalView from './add-component-modals/ComponentModalView';
 import AddComponentButton from './add-component-btn';
 import messages from './messages';

src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Icon } from '@openedx/paragon';
 import { EditNote as EditNoteIcon } from '@openedx/paragon/icons';
 
-import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../constants';
+import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../../generic/block-type-utils/constants';
 
 const AddComponentIcon = ({ type }) => {
   const icon = COMPONENT_TYPE_ICON_MAP[type] || EditNoteIcon;

src/course-unit/constants.js

@@ -1,53 +1,6 @@
-import {
-  BackHand as BackHandIcon,
-  BookOpen as BookOpenIcon,
-  Edit as EditIcon,
-  EditNote as EditNoteIcon,
-  FormatListBulleted as FormatListBulletedIcon,
-  HelpOutline as HelpOutlineIcon,
-  LibraryAdd as LibraryIcon,
-  Lock as LockIcon,
-  QuestionAnswerOutline as QuestionAnswerOutlineIcon,
-  Science as ScienceIcon,
-  TextFields as TextFieldsIcon,
-  VideoCamera as VideoCameraIcon,
-} from '@openedx/paragon/icons';
-
 import messages from './sidebar/messages';
 import addComponentMessages from './add-component/messages';
 
-export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
-
-export const COMPONENT_TYPES = {
-  advanced: 'advanced',
-  discussion: 'discussion',
-  library: 'library',
-  html: 'html',
-  openassessment: 'openassessment',
-  problem: 'problem',
-  video: 'video',
-  dragAndDrop: 'drag-and-drop-v2',
-};
-
-export const TYPE_ICONS_MAP = {
-  video: VideoCameraIcon,
-  other: BookOpenIcon,
-  vertical: FormatListBulletedIcon,
-  problem: EditIcon,
-  lock: LockIcon,
-};
-
-export const COMPONENT_TYPE_ICON_MAP = {
-  [COMPONENT_TYPES.advanced]: ScienceIcon,
-  [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon,
-  [COMPONENT_TYPES.library]: LibraryIcon,
-  [COMPONENT_TYPES.html]: TextFieldsIcon,
-  [COMPONENT_TYPES.openassessment]: EditNoteIcon,
-  [COMPONENT_TYPES.problem]: HelpOutlineIcon,
-  [COMPONENT_TYPES.video]: VideoCameraIcon,
-  [COMPONENT_TYPES.dragAndDrop]: BackHandIcon,
-};
-
 export const getUnitReleaseStatus = (intl) => ({
   release: intl.formatMessage(messages.releaseStatusTitle),
   released: intl.formatMessage(messages.releasedStatusTitle),

src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Icon } from '@openedx/paragon';
 import { BookOpen as BookOpenIcon } from '@openedx/paragon/icons';
 
-import { TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../constants';
+import { TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../../generic/block-type-utils/constants';
 
 const UnitIcon = ({ type }) => {
   const icon = TYPE_ICONS_MAP[type] || BookOpenIcon;

src/course-unit/course-xblock/CourseXBlock.jsx

@@ -16,7 +16,7 @@ import SortableItem from '../../generic/drag-helper/SortableItem';
 import { scrollToElement } from '../../course-outline/utils';
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import { copyToClipboard } from '../../generic/data/thunks';
-import { COMPONENT_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import XBlockMessages from './xblock-messages/XBlockMessages';
 import messages from './messages';
 

src/generic/block-type-utils/constants.js

@@ -0,0 +1,68 @@
+import {
+  BackHand as BackHandIcon,
+  BookOpen as BookOpenIcon,
+  Edit as EditIcon,
+  EditNote as EditNoteIcon,
+  FormatListBulleted as FormatListBulletedIcon,
+  HelpOutline as HelpOutlineIcon,
+  LibraryAdd as LibraryIcon,
+  Lock as LockIcon,
+  QuestionAnswerOutline as QuestionAnswerOutlineIcon,
+  Science as ScienceIcon,
+  TextFields as TextFieldsIcon,
+  VideoCamera as VideoCameraIcon,
+  Folder,
+} from '@openedx/paragon/icons';
+
+export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
+
+export const COMPONENT_TYPES = {
+  advanced: 'advanced',
+  discussion: 'discussion',
+  library: 'library',
+  html: 'html',
+  openassessment: 'openassessment',
+  problem: 'problem',
+  video: 'video',
+  dragAndDrop: 'drag-and-drop-v2',
+};
+
+export const TYPE_ICONS_MAP = {
+  video: VideoCameraIcon,
+  other: BookOpenIcon,
+  vertical: FormatListBulletedIcon,
+  problem: EditIcon,
+  lock: LockIcon,
+};
+
+export const COMPONENT_TYPE_ICON_MAP = {
+  [COMPONENT_TYPES.advanced]: ScienceIcon,
+  [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon,
+  [COMPONENT_TYPES.library]: LibraryIcon,
+  [COMPONENT_TYPES.html]: TextFieldsIcon,
+  [COMPONENT_TYPES.openassessment]: EditNoteIcon,
+  [COMPONENT_TYPES.problem]: HelpOutlineIcon,
+  [COMPONENT_TYPES.video]: VideoCameraIcon,
+  [COMPONENT_TYPES.dragAndDrop]: BackHandIcon,
+};
+
+export const STRUCTURAL_TYPE_ICONS = {
+  vertical: TYPE_ICONS_MAP.vertical,
+  sequential: Folder,
+  chapter: Folder,
+};
+
+export const COMPONENT_TYPE_COLOR_MAP = {
+  [COMPONENT_TYPES.advanced]: 'bg-other',
+  [COMPONENT_TYPES.discussion]: 'bg-component',
+  [COMPONENT_TYPES.library]: 'bg-component',
+  [COMPONENT_TYPES.html]: 'bg-html',
+  [COMPONENT_TYPES.openassessment]: 'bg-component',
+  [COMPONENT_TYPES.problem]: 'bg-component',
+  [COMPONENT_TYPES.video]: 'bg-video',
+  [COMPONENT_TYPES.dragAndDrop]: 'bg-component',
+  vertical: 'bg-vertical',
+  sequential: 'bg-component',
+  chapter: 'bg-component',
+  collection: 'bg-collection',
+};

src/generic/block-type-utils/index.jsx

@@ -0,0 +1,19 @@
+// @ts-check
+import {
+  Article,
+} from '@openedx/paragon/icons';
+import {
+  COMPONENT_TYPE_ICON_MAP,
+  STRUCTURAL_TYPE_ICONS,
+  COMPONENT_TYPE_COLOR_MAP
+} from './constants'
+
+/** @param {string} blockType */
+export function getItemIcon(blockType) {
+  return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article;
+}
+
+/** @param {string} blockType */
+export function getComponentColor(blockType) {
+  return COMPONENT_TYPE_COLOR_MAP[blockType] ?? 'bg-component';
+}

src/library-authoring/components/ComponentCard.jsx

@@ -14,8 +14,7 @@ import { MoreVert } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import TagCount from '../../generic/tag-count';
-import getItemIcon from '../../search-modal/utils';
-import getComponentColor from '../utils';
+import { getItemIcon, getComponentColor } from '../../generic/block-type-utils';
 
 const ComponentCardMenu = () => (
   <Dropdown>

src/search-modal/SearchResult.jsx

@@ -17,7 +17,7 @@ import { getStudioHomeData } from '../studio-home/data/selectors';
 import { useSearchContext } from './manager/SearchManager';
 import Highlight from './Highlight';
 import messages from './messages';
-import getItemIcon from './utils';
+import { getItemIcon } from '../generic/block-type-utils';
 
 /**
  * Returns the URL Suffix for library/library component hit