fix: Unable to view all possible locations when moving document (#1490)

* fix: Remove limit of displayed results on Move dialog

* fix: Filter templates from results

* Show final document location on hover/active, reduces visual noise

app/components/PathToDocument.js

@@ -42,20 +42,23 @@ class PathToDocument extends React.Component<Props> {
     return (
       <Component ref={ref} onClick={this.handleClick} href="" selectable>
         {collection && <CollectionIcon collection={collection} />}
+        &nbsp;
         {result.path
           .map((doc) => <Title key={doc.id}>{doc.title}</Title>)
           .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
         {document && (
-          <Flex>
+          <DocumentTitle>
             {" "}
             <StyledGoToIcon /> <Title>{document.title}</Title>
-          </Flex>
+          </DocumentTitle>
         )}
       </Component>
     );
   }
 }
 
+const DocumentTitle = styled(Flex)``;
+
 const Title = styled.span`
   white-space: nowrap;
   overflow: hidden;
@@ -79,13 +82,20 @@ const ResultWrapper = styled.div`
 const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))`
   margin: 0 -8px;
   padding: 8px 4px;
-  border-radius: 8px;
+
+  ${DocumentTitle} {
+    display: none;
+  }
 
   &:hover,
   &:active,
   &:focus {
     background: ${(props) => props.theme.listItemHoverBackground};
     outline: none;
+
+    ${DocumentTitle} {
+      display: flex;
+    }
   }
 `;
 

app/scenes/Document/components/DocumentMove.js

@@ -13,13 +13,11 @@ import DocumentsStore from "stores/DocumentsStore";
 import UiStore from "stores/UiStore";
 import Document from "models/Document";
 import Flex from "components/Flex";
-import Input from "components/Input";
+import { Outline } from "components/Input";
 import Labeled from "components/Labeled";
 import Modal from "components/Modal";
 import PathToDocument from "components/PathToDocument";
 
-const MAX_RESULTS = 8;
-
 type Props = {|
   document: Document,
   documents: DocumentsStore,
@@ -36,14 +34,19 @@ class DocumentMove extends React.Component<Props> {
 
   @computed
   get searchIndex() {
-    const { collections } = this.props;
+    const { collections, documents } = this.props;
     const paths = collections.pathsToDocuments;
     const index = new Search("id");
     index.addIndex("title");
 
     // Build index
     const indexeableDocuments = [];
-    paths.forEach((path) => indexeableDocuments.push(path));
+    paths.forEach((path) => {
+      const doc = documents.get(path.id);
+      if (!doc || !doc.isTemplate) {
+        indexeableDocuments.push(path);
+      }
+    });
     index.addDocuments(indexeableDocuments);
 
     return index;
@@ -136,7 +139,9 @@ class DocumentMove extends React.Component<Props> {
             </Section>
 
             <Section column>
-              <Labeled label="Choose a new location">
+              <Labeled label="Choose a new location" />
+              <NewLocation>
+                <InputWrapper>
                   <Input
                     type="search"
                     placeholder="Search collections & documents…"
@@ -145,13 +150,15 @@ class DocumentMove extends React.Component<Props> {
                     required
                     autoFocus
                   />
-              </Labeled>
+                </InputWrapper>
+
+                <Results>
                   <Flex column>
                     <StyledArrowKeyNavigation
                       mode={ArrowKeyNavigation.mode.VERTICAL}
                       defaultActiveChildIndex={0}
                     >
-                  {this.results.slice(0, MAX_RESULTS).map((result, index) => (
+                      {this.results.map((result, index) => (
                         <PathToDocument
                           key={result.id}
                           result={result}
@@ -165,6 +172,8 @@ class DocumentMove extends React.Component<Props> {
                       ))}
                     </StyledArrowKeyNavigation>
                   </Flex>
+                </Results>
+              </NewLocation>
             </Section>
           </Flex>
         )}
@@ -173,6 +182,37 @@ class DocumentMove extends React.Component<Props> {
   }
 }
 
+const InputWrapper = styled("div")`
+  padding: 8px;
+  width: 100%;
+`;
+
+const Input = styled("input")`
+  width: 100%;
+  outline: none;
+  background: none;
+  border-radius: 4px;
+  height: 30px;
+  border: 0;
+  color: ${(props) => props.theme.text};
+
+  &::placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+`;
+
+const NewLocation = styled(Outline)`
+  flex-direction: column;
+`;
+
+const Results = styled(Flex)`
+  display: block;
+  width: 100%;
+  max-height: 40vh;
+  overflow-y: auto;
+  padding: 8px;
+`;
+
 const Section = styled(Flex)`
   margin-bottom: 24px;
 `;