Change "Move" dialog appearance to match that of "Publish" dialog (#4787)

* refactor: receive items as props in DocumentExplore

* refactor: leverage DocumentExplorer for DocumentMove

* fix: keyboard shortcut for moving document

* refactor: cleanup

* Revert "refactor: cleanup"

This reverts commit 9a0a98eff22934aeffa48d0bf899629b6e61617c.

* fix: get rid of extra parent container

* Revert "fix: get rid of extra parent container"

This reverts commit 908eaf2bba5c8d6d1f4eeeaeb9674bc906af08f4.

* refactor: remove PathToDocument component

app/scenes/DocumentMove.tsx

@@ -1,194 +1,132 @@
-import FuzzySearch from "fuzzy-search";
-import { last } from "lodash";
+import { flatten } from "lodash";
 import { observer } from "mobx-react";
-import { useMemo, useState } from "react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import AutoSizer from "react-virtualized-auto-sizer";
-import { FixedSizeList as List } from "react-window";
+import { useTranslation, Trans } from "react-i18next";
 import styled from "styled-components";
-import { DocumentPath } from "~/stores/CollectionsStore";
+import { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
+import Button from "~/components/Button";
+import DocumentExplorer from "~/components/DocumentExplorer";
 import Flex from "~/components/Flex";
-import { Outline } from "~/components/Input";
-import InputSearch from "~/components/InputSearch";
-import Labeled from "~/components/Labeled";
-import PathToDocument from "~/components/PathToDocument";
+import Text from "~/components/Text";
+import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
+import { flattenTree } from "~/utils/tree";
 
 type Props = {
   document: Document;
-  onRequestClose: () => void;
 };
 
-function DocumentMove({ document, onRequestClose }: Props) {
-  const [searchTerm, setSearchTerm] = useState<string>();
-  const { collections, documents } = useStores();
+function DocumentMove({ document }: Props) {
+  const { dialogs } = useStores();
   const { showToast } = useToasts();
   const { t } = useTranslation();
+  const collectionTrees = useCollectionTrees();
+  const [selectedPath, selectPath] = React.useState<NavigationNode | null>(
+    null
+  );
 
-  const searchIndex = useMemo(() => {
-    const paths = collections.pathsToDocuments;
-
-    // Build index
-    const indexeableDocuments: DocumentPath[] = [];
-
-    paths.forEach((path) => {
-      const doc = documents.get(path.id);
-
-      if (!doc || !doc.isTemplate) {
-        indexeableDocuments.push(path);
-      }
-    });
-
-    return new FuzzySearch<DocumentPath>(indexeableDocuments, ["title"], {
-      caseSensitive: false,
-      sort: true,
-    });
-  }, [documents, collections.pathsToDocuments]);
-
-  const results = useMemo(() => {
-    const onlyShowCollections = document.isTemplate;
-    let results: DocumentPath[] = [];
-
-    if (collections.isLoaded) {
-      if (searchTerm) {
-        results = searchIndex.search(searchTerm);
-      } else {
-        results = searchIndex.haystack;
-      }
-    }
-
-    if (onlyShowCollections) {
-      results = results.filter((result) => result.type === "collection");
-    } else {
-      // Exclude document if on the path to result, or the same result
-      results = results.filter(
-        (result) =>
-          !result.path.map((doc) => doc.id).includes(document.id) &&
-          last(result.path.map((doc) => doc.id)) !== document.parentDocumentId
-      );
-    }
-
-    return results;
-  }, [document, collections, searchTerm, searchIndex]);
-
-  const handleSuccess = () => {
-    showToast(t("Document moved"), {
-      type: "info",
-    });
-    onRequestClose();
-  };
-
-  const handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(ev.target.value);
-  };
-
-  const renderPathToCurrentDocument = () => {
-    const result = collections.getPathForDocument(document.id);
-
-    if (result) {
-      return (
-        <PathToDocument
-          result={result}
-          collection={collections.get(result.collectionId)}
-        />
-      );
-    }
-
-    return null;
-  };
-
-  const row = ({
-    index,
-    data,
-    style,
-  }: {
-    index: number;
-    data: DocumentPath[];
-    style: React.CSSProperties;
-  }) => {
-    const result = data[index];
-    return (
-      <PathToDocument
-        result={result}
-        document={document}
-        collection={collections.get(result.collectionId)}
-        onSuccess={handleSuccess}
-        style={style}
-      />
+  const moveOptions = React.useMemo(() => {
+    // filter out the document itself and also its parent doc if any
+    const nodes = flatten(collectionTrees.map(flattenTree)).filter(
+      (node) => node.id !== document.id && node.id !== document.parentDocumentId
     );
+    if (document.isTemplate) {
+      // only show collections with children stripped off to prevent node expansion
+      return nodes
+        .filter((node) => node.type === "collection")
+        .map((node) => ({ ...node, children: [] }));
+    }
+    return nodes;
+  }, [
+    collectionTrees,
+    document.id,
+    document.parentDocumentId,
+    document.isTemplate,
+  ]);
+
+  const move = async () => {
+    if (!selectedPath) {
+      showToast(t("Select a location to move"), {
+        type: "info",
+      });
+      return;
+    }
+
+    try {
+      const { type, id: parentDocumentId } = selectedPath;
+
+      const collectionId = selectedPath.collectionId as string;
+
+      if (type === "document") {
+        await document.move(collectionId, parentDocumentId);
+      } else {
+        await document.move(collectionId);
+      }
+
+      showToast(t("Document moved"), {
+        type: "success",
+      });
+
+      dialogs.closeAllModals();
+    } catch (err) {
+      showToast(t("Couldn’t move the document, try again?"), {
+        type: "error",
+      });
+    }
   };
 
-  const data = results;
-
-  if (!document || !collections.isLoaded) {
-    return null;
-  }
-
   return (
-    <Flex column>
-      <Section>
-        <Labeled label={t("Current location")}>
-          {renderPathToCurrentDocument()}
-        </Labeled>
-      </Section>
-
-      <Section column>
-        <Labeled label={t("Choose a new location")} />
-        <Input
-          type="search"
-          onChange={handleFilter}
-          placeholder={`${t("Search collections & documents")}…`}
-          label={t("Choose a new location")}
-          labelHidden
-          required
-          autoFocus
-        />
-        <Results>
-          <AutoSizer>
-            {({ width, height }: { width: number; height: number }) => (
-              <Flex role="listbox" column>
-                <List
-                  key={data.length}
-                  width={width}
-                  height={height}
-                  itemData={data}
-                  itemCount={data.length}
-                  itemSize={40}
-                  itemKey={(index, data) => data[index].id}
-                >
-                  {row}
-                </List>
-              </Flex>
-            )}
-          </AutoSizer>
-        </Results>
-      </Section>
-    </Flex>
+    <FlexContainer column>
+      <DocumentExplorer
+        items={moveOptions}
+        onSubmit={move}
+        onSelect={selectPath}
+      />
+      <Footer justify="space-between" align="center" gap={8}>
+        <StyledText type="secondary">
+          {selectedPath ? (
+            <Trans
+              defaults="Move to <em>{{ location }}</em>"
+              values={{
+                location: selectedPath.title,
+              }}
+              components={{
+                em: <strong />,
+              }}
+            />
+          ) : (
+            t("Select a location to move")
+          )}
+        </StyledText>
+        <Button disabled={!selectedPath} onClick={move}>
+          {t("Move")}
+        </Button>
+      </Footer>
+    </FlexContainer>
   );
 }
 
-const Input = styled(InputSearch)`
-  ${Outline} {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    padding: 4px 0;
-  }
+const FlexContainer = styled(Flex)`
+  margin-left: -24px;
+  margin-right: -24px;
+  margin-bottom: -24px;
+  outline: none;
 `;
 
-const Results = styled.div`
-  padding: 0;
-  height: 40vh;
-  border: 1px solid ${(props) => props.theme.inputBorder};
-  border-top: 0;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+const Footer = styled(Flex)`
+  height: 64px;
+  border-top: 1px solid ${(props) => props.theme.horizontalRule};
+  padding-left: 24px;
+  padding-right: 24px;
 `;
 
-const Section = styled(Flex)`
-  margin-bottom: 24px;
+const StyledText = styled(Text)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 0;
 `;
 
 export default observer(DocumentMove);