style(duplication): partial refactor to typescript

- remove duplicableItemTypes/itemSelectorPanels dependencies

Author: adi-herwana-nus

client/app/bundles/course/duplication/components/IndentedCheckbox.jsx

@@ -0,0 +1,41 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { Checkbox, CheckboxProps, FormControlLabel } from '@mui/material';
+
+const styles = {
+  tabSize: 15,
+};
+
+interface IndentedCheckboxProps extends CheckboxProps {
+  indentLevel?: number;
+  children?: ReactNode;
+  label: JSX.Element | string;
+}
+
+const IndentedCheckbox: FC<IndentedCheckboxProps> = ({
+  indentLevel = 0,
+  children = [],
+  label,
+  ...props
+}) => {
+  const checkboxStyle: CSSProperties = {
+    marginLeft: indentLevel * styles.tabSize,
+  };
+  if (children && Array.isArray(children) && children.length > 0) {
+    checkboxStyle.width = 'auto';
+  }
+
+  return (
+    <div className="flex items-center">
+      <FormControlLabel
+        className="py-2 px-0 w-auto"
+        control={
+          <Checkbox className="py-0 px-2" style={checkboxStyle} {...props} />
+        }
+        label={<b>{label}</b>}
+      />
+      {children}
+    </div>
+  );
+};
+
+export default IndentedCheckbox;

client/app/bundles/course/duplication/components/IndentedCheckbox.tsx

@@ -0,0 +1,65 @@
+import { FC } from 'react';
+import { defineMessages, MessageDescriptor } from 'react-intl';
+import { Typography } from '@mui/material';
+
+import { DuplicableItemType } from 'course/duplication/types';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations: Record<DuplicableItemType, MessageDescriptor> =
+  defineMessages({
+    ASSESSMENT: {
+      id: 'course.duplication.TypeBadge.assessment',
+      defaultMessage: 'Assessment',
+    },
+    CATEGORY: {
+      id: 'course.duplication.TypeBadge.category',
+      defaultMessage: 'Category',
+    },
+    TAB: {
+      id: 'course.duplication.TypeBadge.tab',
+      defaultMessage: 'Tab',
+    },
+    SURVEY: {
+      id: 'course.duplication.TypeBadge.survey',
+      defaultMessage: 'Survey',
+    },
+    ACHIEVEMENT: {
+      id: 'course.duplication.TypeBadge.achievement',
+      defaultMessage: 'Achievement',
+    },
+    FOLDER: {
+      id: 'course.duplication.TypeBadge.folder',
+      defaultMessage: 'Folder',
+    },
+    MATERIAL: {
+      id: 'course.duplication.TypeBadge.material',
+      defaultMessage: 'Material',
+    },
+    VIDEO: {
+      id: 'course.duplication.TypeBadge.video',
+      defaultMessage: 'Video',
+    },
+    VIDEO_TAB: {
+      id: 'course.duplication.TypeBadge.video_tab',
+      defaultMessage: 'Tab',
+    },
+  });
+
+const TypeBadge: FC<{ text?: string; itemType: DuplicableItemType }> = ({
+  text,
+  itemType,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Typography
+      className="px-2 py-1 border border-solid rounded-md mr-3"
+      fontWeight="inherit"
+      variant="caption"
+    >
+      {text || t(translations[itemType])}
+    </Typography>
+  );
+};
+
+export default TypeBadge;

client/app/bundles/course/duplication/components/TypeBadge/index.jsx

@@ -1,29 +1,5 @@
 import mirrorCreator from 'mirror-creator';
 
-// These are mirrored in app/helpers/course/object_duplications_helper.rb
-export const duplicableItemTypes = mirrorCreator([
-  'ASSESSMENT',
-  'TAB',
-  'CATEGORY',
-  'SURVEY',
-  'ACHIEVEMENT',
-  'FOLDER',
-  'MATERIAL',
-  'VIDEO',
-  'VIDEO_TAB',
-]);
-
-// These are mirrored in app/helpers/course/object_duplications_helper.rb
-export const itemSelectorPanels = mirrorCreator([
-  'ASSESSMENTS',
-  'SURVEYS',
-  'ACHIEVEMENTS',
-  'MATERIALS',
-  'VIDEOS',
-]);
-
-export const formNames = mirrorCreator(['NEW_COURSE']);
-
 const actionTypes = mirrorCreator([
   'LOAD_OBJECTS_LIST_REQUEST',
   'LOAD_OBJECTS_LIST_SUCCESS',