feat: Import improvements (#3064)

* feat: Split and simplify import/export pages in prep for more options

* minor fixes

* File operations for imports

* test

* icons

app/scenes/Settings/components/FileOperationListItem.tsx

@@ -1,38 +1,54 @@
+import { observer } from "mobx-react";
+import { DoneIcon, WarningIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
 import FileOperation from "~/models/FileOperation";
 import { Action } from "~/components/Actions";
 import ListItem from "~/components/List/Item";
+import Spinner from "~/components/Spinner";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import FileOperationMenu from "~/menus/FileOperationMenu";
 
 type Props = {
   fileOperation: FileOperation;
-  handleDelete: (arg0: FileOperation) => Promise<void>;
+  handleDelete?: (arg0: FileOperation) => Promise<void>;
 };
 
 const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => {
   const { t } = useTranslation();
   const user = useCurrentUser();
+  const theme = useTheme();
   const stateMapping = {
     creating: t("Processing"),
     expired: t("Expired"),
     uploading: t("Processing"),
-    error: t("Error"),
+    error: t("Failed"),
   };
+
+  const iconMapping = {
+    creating: <Spinner />,
+    uploading: <Spinner />,
+    complete: <DoneIcon color={theme.primary} />,
+    error: <WarningIcon color={theme.danger} />,
+  };
+
+  const title =
+    fileOperation.type === "import" || fileOperation.collectionId
+      ? fileOperation.name
+      : t("All collections");
+
   return (
     <ListItem
-      title={
-        fileOperation.collection
-          ? fileOperation.collection.name
-          : t("All collections")
-      }
+      title={title}
+      image={iconMapping[fileOperation.state]}
       subtitle={
         <>
           {fileOperation.state !== "complete" && (
             <>{stateMapping[fileOperation.state]}&nbsp;•&nbsp;</>
           )}
+          {fileOperation.error && <>{fileOperation.error}&nbsp;•&nbsp;</>}
           {t(`{{userName}} requested`, {
             userName:
               user.id === fileOperation.user.id
@@ -45,7 +61,7 @@ const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => {
         </>
       }
       actions={
-        fileOperation.state === "complete" ? (
+        fileOperation.state === "complete" && handleDelete ? (
           <Action>
             <FileOperationMenu
               id={fileOperation.id}
@@ -61,4 +77,4 @@ const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => {
   );
 };
 
-export default FileOperationListItem;
+export default observer(FileOperationListItem);