113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import { NewDocumentIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import { useTranslation, Trans } from "react-i18next";
|
|
import { FileOperationType } from "@shared/types";
|
|
import { cdnPath } from "@shared/utils/urls";
|
|
import FileOperation from "~/models/FileOperation";
|
|
import Button from "~/components/Button";
|
|
import Heading from "~/components/Heading";
|
|
import OutlineIcon from "~/components/Icons/OutlineIcon";
|
|
import Item from "~/components/List/Item";
|
|
import PaginatedList from "~/components/PaginatedList";
|
|
import Scene from "~/components/Scene";
|
|
import Text from "~/components/Text";
|
|
import useStores from "~/hooks/useStores";
|
|
import FileOperationListItem from "./components/FileOperationListItem";
|
|
import ImportNotionDialog from "./components/ImportNotionDialog";
|
|
import ImportOutlineDialog from "./components/ImportOutlineDialog";
|
|
|
|
function Import() {
|
|
const { t } = useTranslation();
|
|
const { dialogs, fileOperations } = useStores();
|
|
|
|
return (
|
|
<Scene title={t("Import")} icon={<NewDocumentIcon color="currentColor" />}>
|
|
<Heading>{t("Import")}</Heading>
|
|
<Text type="secondary">
|
|
<Trans>
|
|
Quickly transfer your existing documents, pages, and files from other
|
|
tools and services into Outline. You can also drag and drop any HTML,
|
|
Markdown, and text documents directly into Collections in the app.
|
|
</Trans>
|
|
</Text>
|
|
|
|
<div>
|
|
<Item
|
|
border={false}
|
|
image={<OutlineIcon size={28} cover />}
|
|
title="Outline"
|
|
subtitle={t(
|
|
"Import a backup file that was previously exported from Outline"
|
|
)}
|
|
actions={
|
|
<Button
|
|
type="submit"
|
|
onClick={() => {
|
|
dialogs.openModal({
|
|
title: t("Import data"),
|
|
isCentered: true,
|
|
content: <ImportOutlineDialog />,
|
|
});
|
|
}}
|
|
neutral
|
|
>
|
|
{t("Import")}…
|
|
</Button>
|
|
}
|
|
/>
|
|
<Item
|
|
border={false}
|
|
image={<img src={cdnPath("/images/notion.png")} width={28} />}
|
|
title="Notion"
|
|
subtitle={t("Import pages exported from Notion")}
|
|
actions={
|
|
<Button
|
|
type="submit"
|
|
onClick={() => {
|
|
dialogs.openModal({
|
|
title: t("Import data"),
|
|
isCentered: true,
|
|
content: <ImportNotionDialog />,
|
|
});
|
|
}}
|
|
neutral
|
|
>
|
|
{t("Import")}…
|
|
</Button>
|
|
}
|
|
/>
|
|
<Item
|
|
border={false}
|
|
image={<img src={cdnPath("/images/confluence.png")} width={28} />}
|
|
title="Confluence"
|
|
subtitle={t("Import pages from a Confluence instance")}
|
|
actions={
|
|
<Button type="submit" disabled neutral>
|
|
{t("Enterprise")}
|
|
</Button>
|
|
}
|
|
/>
|
|
</div>
|
|
<br />
|
|
<PaginatedList
|
|
items={fileOperations.imports}
|
|
fetch={fileOperations.fetchPage}
|
|
options={{
|
|
type: FileOperationType.Import,
|
|
}}
|
|
heading={
|
|
<h2>
|
|
<Trans>Recent imports</Trans>
|
|
</h2>
|
|
}
|
|
renderItem={(item: FileOperation) => (
|
|
<FileOperationListItem key={item.id} fileOperation={item} />
|
|
)}
|
|
/>
|
|
</Scene>
|
|
);
|
|
}
|
|
|
|
export default observer(Import);
|