feat: Templates (#1399)

* Migrations
* New from template
* fix: Don't allow public share of template
* chore: Template badges
* fix: Collection active
* feat: New doc button on template list item
* feat: New template menu
* fix: Sorting
* feat: Templates onboarding notice
* fix: New doc button showing on archived/deleted templates

app/components/DocumentPreview/DocumentPreview.js

@@ -2,15 +2,17 @@
 import * as React from "react";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
-import { StarredIcon } from "outline-icons";
+import { StarredIcon, PlusIcon } from "outline-icons";
 import styled, { withTheme } from "styled-components";
 import Flex from "components/Flex";
 import Badge from "components/Badge";
+import Button from "components/Button";
 import Tooltip from "components/Tooltip";
 import Highlight from "components/Highlight";
 import PublishingInfo from "components/PublishingInfo";
 import DocumentMenu from "menus/DocumentMenu";
 import Document from "models/Document";
+import { newDocumentUrl } from "utils/routeHelpers";
 
 type Props = {
   document: Document,
@@ -20,8 +22,117 @@ type Props = {
   showPublished?: boolean,
   showPin?: boolean,
   showDraft?: boolean,
+  showTemplate?: boolean,
 };
 
+const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
+
+@observer
+class DocumentPreview extends React.Component<Props> {
+  handleStar = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.star();
+  };
+
+  handleUnstar = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.unstar();
+  };
+
+  replaceResultMarks = (tag: string) => {
+    // don't use SEARCH_RESULT_REGEX here as it causes
+    // an infinite loop to trigger a regex inside it's own callback
+    return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
+  };
+
+  render() {
+    const {
+      document,
+      showCollection,
+      showPublished,
+      showPin,
+      showDraft = true,
+      showTemplate,
+      highlight,
+      context,
+      ...rest
+    } = this.props;
+
+    const queryIsInTitle =
+      !!highlight &&
+      !!document.title.toLowerCase().includes(highlight.toLowerCase());
+
+    return (
+      <DocumentLink
+        to={{
+          pathname: document.url,
+          state: { title: document.titleWithDefault },
+        }}
+        {...rest}
+      >
+        <Heading>
+          <Title text={document.titleWithDefault} highlight={highlight} />
+          {!document.isDraft &&
+            !document.isArchived &&
+            !document.isTemplate && (
+              <Actions>
+                {document.isStarred ? (
+                  <StyledStar onClick={this.handleUnstar} solid />
+                ) : (
+                  <StyledStar onClick={this.handleStar} />
+                )}
+              </Actions>
+            )}
+          {document.isDraft &&
+            showDraft && (
+              <Tooltip
+                tooltip="Only visible to you"
+                delay={500}
+                placement="top"
+              >
+                <Badge>Draft</Badge>
+              </Tooltip>
+            )}
+          {document.isTemplate &&
+            showTemplate && <Badge primary>Template</Badge>}
+          <SecondaryActions>
+            {document.isTemplate &&
+              !document.isArchived &&
+              !document.isDeleted && (
+                <Button
+                  as={Link}
+                  to={newDocumentUrl(document.collectionId, {
+                    templateId: document.id,
+                  })}
+                  icon={<PlusIcon />}
+                  neutral
+                >
+                  New doc
+                </Button>
+              )}&nbsp;
+            <DocumentMenu document={document} showPin={showPin} />
+          </SecondaryActions>
+        </Heading>
+
+        {!queryIsInTitle && (
+          <ResultContext
+            text={context}
+            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+            processResult={this.replaceResultMarks}
+          />
+        )}
+        <PublishingInfo
+          document={document}
+          showCollection={showCollection}
+          showPublished={showPublished}
+        />
+      </DocumentLink>
+    );
+  }
+}
+
 const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
   <StarredIcon color={theme.text} {...props} />
 ))`
@@ -37,7 +148,8 @@ const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
   }
 `);
 
-const StyledDocumentMenu = styled(DocumentMenu)`
+const SecondaryActions = styled(Flex)`
+  align-items: center;
   position: absolute;
   right: 16px;
   top: 50%;
@@ -54,7 +166,7 @@ const DocumentLink = styled(Link)`
   overflow: hidden;
   position: relative;
 
-  ${StyledDocumentMenu} {
+  ${SecondaryActions} {
     opacity: 0;
   }
 
@@ -64,7 +176,11 @@ const DocumentLink = styled(Link)`
     background: ${props => props.theme.listItemHoverBackground};
     outline: none;
 
-    ${StyledStar}, ${StyledDocumentMenu} {
+    ${SecondaryActions} {
+      opacity: 1;
+    }
+
+    ${StyledStar} {
       opacity: 0.5;
 
       &:hover {
@@ -106,91 +222,4 @@ const ResultContext = styled(Highlight)`
   margin-bottom: 0.25em;
 `;
 
-const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
-
-@observer
-class DocumentPreview extends React.Component<Props> {
-  star = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.document.star();
-  };
-
-  unstar = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.document.unstar();
-  };
-
-  replaceResultMarks = (tag: string) => {
-    // don't use SEARCH_RESULT_REGEX here as it causes
-    // an infinite loop to trigger a regex inside it's own callback
-    return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
-  };
-
-  render() {
-    const {
-      document,
-      showCollection,
-      showPublished,
-      showPin,
-      showDraft = true,
-      highlight,
-      context,
-      ...rest
-    } = this.props;
-
-    const queryIsInTitle =
-      !!highlight &&
-      !!document.title.toLowerCase().includes(highlight.toLowerCase());
-
-    return (
-      <DocumentLink
-        to={{
-          pathname: document.url,
-          state: { title: document.title },
-        }}
-        {...rest}
-      >
-        <Heading>
-          <Title text={document.title || "Untitled"} highlight={highlight} />
-          {!document.isDraft &&
-            !document.isArchived && (
-              <Actions>
-                {document.isStarred ? (
-                  <StyledStar onClick={this.unstar} solid />
-                ) : (
-                  <StyledStar onClick={this.star} />
-                )}
-              </Actions>
-            )}
-          {document.isDraft &&
-            showDraft && (
-              <Tooltip
-                tooltip="Only visible to you"
-                delay={500}
-                placement="top"
-              >
-                <Badge>Draft</Badge>
-              </Tooltip>
-            )}
-          <StyledDocumentMenu document={document} showPin={showPin} />
-        </Heading>
-        {!queryIsInTitle && (
-          <ResultContext
-            text={context}
-            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
-            processResult={this.replaceResultMarks}
-          />
-        )}
-        <PublishingInfo
-          document={document}
-          showCollection={showCollection}
-          showPublished={showPublished}
-        />
-      </DocumentLink>
-    );
-  }
-}
-
 export default DocumentPreview;