refactor(table): add columnPicker functionality

Author: LWS49

client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/AssessmentsListing.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { Card, CardContent, ListSubheader } from '@mui/material';
 
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
@@ -12,6 +11,7 @@ import {
   DuplicationTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/MaterialsListing.tsx

@@ -2,14 +2,14 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { Card, CardContent, ListSubheader } from '@mui/material';
 
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import {
   DuplicationFolderData,
   DuplicationMaterialData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/VideosListing.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { Card, CardContent, ListSubheader } from '@mui/material';
 
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
@@ -11,6 +10,7 @@ import {
   DuplicationVideoTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/AchievementsSelector.tsx

@@ -2,15 +2,15 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import { actions } from 'course/duplication/store';
 import { DuplicationAchievementData } from 'course/duplication/types';
 import { getAchievementBadgeUrl } from 'course/helper/achievements';
 import componentTranslations from 'course/translations';
+import BulkSelectors from 'lib/components/core/BulkSelectors';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import Thumbnail from 'lib/components/core/Thumbnail';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/AssessmentsSelector.tsx

@@ -2,8 +2,6 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import {
@@ -17,6 +15,8 @@ import {
   DuplicationTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import BulkSelectors from 'lib/components/core/BulkSelectors';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/MaterialsSelector.tsx

@@ -2,8 +2,6 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import { actions } from 'course/duplication/store';
@@ -12,6 +10,8 @@ import {
   DuplicationMaterialData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import BulkSelectors from 'lib/components/core/BulkSelectors';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/SurveysSelector.tsx

@@ -2,14 +2,14 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
 import { actions } from 'course/duplication/store';
 import { DuplicationSurveyData } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import BulkSelectors from 'lib/components/core/BulkSelectors';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

client/app/bundles/course/duplication/pages/Duplication/ItemsSelector/VideosSelector.tsx

@@ -2,8 +2,6 @@ import { FC } from 'react';
 import { defineMessages } from 'react-intl';
 import { ListSubheader, Typography } from '@mui/material';
 
-import BulkSelectors from 'course/duplication/components/BulkSelectors';
-import IndentedCheckbox from 'course/duplication/components/IndentedCheckbox';
 import TypeBadge from 'course/duplication/components/TypeBadge';
 import UnpublishedIcon from 'course/duplication/components/UnpublishedIcon';
 import { selectDuplicationStore } from 'course/duplication/selectors';
@@ -13,6 +11,8 @@ import {
   DuplicationVideoTabData,
 } from 'course/duplication/types';
 import componentTranslations from 'course/translations';
+import BulkSelectors from 'lib/components/core/BulkSelectors';
+import IndentedCheckbox from 'lib/components/core/IndentedCheckbox';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 

…duplication/components/BulkSelectors.jsx …pp/lib/components/core/BulkSelectors.tsxclient/app/bundles/course/duplication/components/BulkSelectors.jsx renamed to client/app/lib/components/core/BulkSelectors.tsx client/app/bundles/course/duplication/components/BulkSelectors.jsx renamed to client/app/lib/components/core/BulkSelectors.tsx

@@ -1,50 +1,53 @@
+import { CSSProperties, FC } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
 
 import Link from 'lib/components/core/Link';
 
 const translations = defineMessages({
   selectAll: {
-    id: 'course.duplication.BulkSelectors.selectAll',
+    id: 'lib.components.core.BulkSelectors.selectAll',
     defaultMessage: 'Select All',
   },
   deselectAll: {
-    id: 'course.duplication.BulkSelectors.deselectAll',
+    id: 'lib.components.core.BulkSelectors.deselectAll',
     defaultMessage: 'Deselect All',
   },
 });
 
-const styles = {
+const defaultStyles = {
   selectLink: {
     marginLeft: 20,
     lineHeight: '24px',
-  },
+  } as CSSProperties,
   deselectLink: {
     marginLeft: 10,
     lineHeight: '24px',
-  },
+  } as CSSProperties,
 };
 
-const BulkSelectors = ({ callback, styles: userStyles = {} }) => (
+interface BulkSelectorsProps {
+  callback: (value: boolean) => void;
+  styles?: {
+    selectLink?: CSSProperties;
+    deselectLink?: CSSProperties;
+  };
+}
+
+const BulkSelectors: FC<BulkSelectorsProps> = ({ callback, styles = {} }) => (
   <>
     <Link
       onClick={() => callback(true)}
-      style={{ ...styles.selectLink, ...userStyles.selectLink }}
+      style={{ ...defaultStyles.selectLink, ...styles.selectLink }}
     >
       <FormattedMessage {...translations.selectAll} />
     </Link>
     <Link
       onClick={() => callback(false)}
-      style={{ ...styles.deselectLink, ...userStyles.deselectLink }}
+      style={{ ...defaultStyles.deselectLink, ...styles.deselectLink }}
     >
       <FormattedMessage {...translations.deselectAll} />
     </Link>
   </>
 );
 
-BulkSelectors.propTypes = {
-  callback: PropTypes.func,
-  styles: PropTypes.object,
-};
-
 export default BulkSelectors;