New: Favorite folders in Manual Import

(cherry picked from commit 3ddc6ac6de5c27a9aab915672321c8818dc5da48)

Closes #10630

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
@@ -14,14 +14,23 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import { executeCommand } from 'Store/Actions/commandActions';
-import {
-  addRecentFolder,
-  removeRecentFolder,
-} from 'Store/Actions/interactiveImportActions';
+import { addRecentFolder } from 'Store/Actions/interactiveImportActions';
 import translate from 'Utilities/String/translate';
+import FavoriteFolderRow from './FavoriteFolderRow';
 import RecentFolderRow from './RecentFolderRow';
 import styles from './InteractiveImportSelectFolderModalContent.css';
 
+const favoriteFoldersColumns = [
+  {
+    name: 'folder',
+    label: () => translate('Folder'),
+  },
+  {
+    name: 'actions',
+    label: '',
+  },
+];
+
 const recentFoldersColumns = [
   {
     name: 'folder',
@@ -49,15 +58,22 @@ function InteractiveImportSelectFolderModalContent(
   const { modalTitle, onFolderSelect, onModalClose } = props;
   const [folder, setFolder] = useState('');
   const dispatch = useDispatch();
-  const recentFolders = useSelector(
+  const { favoriteFolders, recentFolders } = useSelector(
     createSelector(
-      (state: AppState) => state.interactiveImport.recentFolders,
-      (recentFolders) => {
-        return recentFolders;
+      (state: AppState) => state.interactiveImport,
+      (interactiveImport) => {
+        return {
+          favoriteFolders: interactiveImport.favoriteFolders,
+          recentFolders: interactiveImport.recentFolders,
+        };
       }
     )
   );
 
+  const favoriteFolderMap = useMemo(() => {
+    return new Map(favoriteFolders.map((f) => [f.folder, f]));
+  }, [favoriteFolders]);
+
   const onPathChange = useCallback(
     ({ value }: { value: string }) => {
       setFolder(value);
@@ -90,13 +106,6 @@ function InteractiveImportSelectFolderModalContent(
     onFolderSelect(folder);
   }, [folder, onFolderSelect, dispatch]);
 
-  const onRemoveRecentFolderPress = useCallback(
-    (folderToRemove: string) => {
-      dispatch(removeRecentFolder({ folder: folderToRemove }));
-    },
-    [dispatch]
-  );
-
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
@@ -110,8 +119,34 @@ function InteractiveImportSelectFolderModalContent(
           onChange={onPathChange}
         />
 
+        {favoriteFolders.length ? (
+          <div className={styles.foldersContainer}>
+            <div className={styles.foldersTitle}>
+              {translate('FavoriteFolders')}
+            </div>
+
+            <Table columns={favoriteFoldersColumns}>
+              <TableBody>
+                {favoriteFolders.map((favoriteFolder) => {
+                  return (
+                    <FavoriteFolderRow
+                      key={favoriteFolder.folder}
+                      folder={favoriteFolder.folder}
+                      onPress={onRecentPathPress}
+                    />
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        ) : null}
+
         {recentFolders.length ? (
-          <div className={styles.recentFoldersContainer}>
+          <div className={styles.foldersContainer}>
+            <div className={styles.foldersTitle}>
+              {translate('RecentFolders')}
+            </div>
+
             <Table columns={recentFoldersColumns}>
               <TableBody>
                 {recentFolders
@@ -123,8 +158,8 @@ function InteractiveImportSelectFolderModalContent(
                         key={recentFolder.folder}
                         folder={recentFolder.folder}
                         lastUsed={recentFolder.lastUsed}
+                        isFavorite={favoriteFolderMap.has(recentFolder.folder)}
                         onPress={onRecentPathPress}
-                        onRemoveRecentFolderPress={onRemoveRecentFolderPress}
                       />
                     );
                   })}