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/components/DocumentViews.tsx

@@ -61,6 +61,7 @@ function DocumentViews({ document, isOpen }: Props) {
                 subtitle={subtitle}
                 image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
                 border={false}
+                compact
                 small
               />
             );

app/components/List/Item.tsx

@@ -10,6 +10,7 @@ type Props = {
   title: React.ReactNode;
   subtitle?: React.ReactNode;
   actions?: React.ReactNode;
+  compact?: boolean;
   border?: boolean;
   small?: boolean;
 };
@@ -49,6 +50,7 @@ const ListItem = (
       <Wrapper
         ref={ref}
         $border={border}
+        $compact={compact}
         activeStyle={{
           background: theme.primary,
         }}
@@ -62,16 +64,16 @@ const ListItem = (
   }
 
   return (
-    <Wrapper $border={border} {...rest}>
+    <Wrapper $compact={compact} $border={border} {...rest}>
       {content(false)}
     </Wrapper>
   );
 };
 
-const Wrapper = styled.div<{ $border?: boolean }>`
+const Wrapper = styled.div<{ $compact?: boolean; $border?: boolean }>`
   display: flex;
-  padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
-  margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
+  margin: ${(props) => (props.$compact === false ? 0 : "8px 0")};
+  padding: ${(props) => (props.$compact === false ? "8px 0" : 0)};
   border-bottom: 1px solid
     ${(props) =>
       props.$border === false ? "transparent" : props.theme.divider};

app/components/Sidebar/Settings.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import {
-  DocumentIcon,
+  NewDocumentIcon,
   EmailIcon,
   ProfileIcon,
   PadlockIcon,
@@ -11,6 +11,7 @@ import {
   TeamIcon,
   ExpandedIcon,
   BeakerIcon,
+  DownloadIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -118,11 +119,18 @@ function SettingsSidebar() {
               icon={<LinkIcon color="currentColor" />}
               label={t("Share Links")}
             />
+            {can.manage && (
+              <SidebarLink
+                to="/settings/import"
+                icon={<NewDocumentIcon color="currentColor" />}
+                label={t("Import")}
+              />
+            )}
             {can.export && (
               <SidebarLink
-                to="/settings/import-export"
-                icon={<DocumentIcon color="currentColor" />}
-                label={`${t("Import")} / ${t("Export")}`}
+                to="/settings/export"
+                icon={<DownloadIcon color="currentColor" />}
+                label={t("Export")}
               />
             )}
           </Section>

app/components/SocketProvider.tsx

@@ -328,15 +328,17 @@ class SocketProvider extends React.Component<Props> {
       }
     });
 
+    this.socket.on("fileOperations.create", async (event: any) => {
+      const user = auth.user;
+      if (user) {
+        fileOperations.add({ ...event, user });
+      }
+    });
+
     this.socket.on("fileOperations.update", async (event: any) => {
       const user = auth.user;
-      let collection = null;
-      if (event.collectionId) {
-        collection = await collections.fetch(event.collectionId);
-      }
-
       if (user) {
-        fileOperations.add({ ...event, user, collection });
+        fileOperations.add({ ...event, user });
       }
     });
 

app/components/Spinner.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import styled from "styled-components";
+
+export default function Spinner(props: React.HTMLAttributes<HTMLOrSVGElement>) {
+  return (
+    <SVG
+      width="16px"
+      height="16px"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <Circle
+        fill="none"
+        strokeWidth="2"
+        strokeLinecap="round"
+        cx="8"
+        cy="8"
+        r="6"
+      ></Circle>
+    </SVG>
+  );
+}
+
+const SVG = styled.svg`
+  @keyframes rotator {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(270deg);
+    }
+  }
+
+  animation: rotator 1.4s linear infinite;
+  margin: 4px;
+`;
+
+const Circle = styled.circle`
+  @keyframes dash {
+    0% {
+      stroke-dashoffset: 47;
+    }
+    50% {
+      stroke-dashoffset: 11;
+      transform: rotate(135deg);
+    }
+    100% {
+      stroke-dashoffset: 47;
+      transform: rotate(450deg);
+    }
+  }
+
+  stroke: ${(props) => props.theme.textSecondary};
+  stroke-dasharray: 46;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash 1.4s ease-in-out infinite;
+`;