Issue #919 : Show DocumentPath in Breadcrumbs at Publishing Info, instead of only showing collection's name (#920)

closes https://github.com/outline/outline/issues/919

app/components/DocumentPreview/components/PublishingInfo.js

@@ -5,6 +5,7 @@ import Collection from 'models/Collection';
 import Document from 'models/Document';
 import Flex from 'shared/components/Flex';
 import Time from 'shared/components/Time';
+import Breadcrumb from 'shared/components/Breadcrumb';
 
 const Container = styled(Flex)`
   color: ${props => props.theme.textTertiary};
@@ -75,7 +76,10 @@ function PublishingInfo({ collection, showPublished, document }: Props) {
       {content}
       {collection && (
         <span>
-          &nbsp;in <strong>{isDraft ? 'Drafts' : collection.name}</strong>
+          &nbsp;in&nbsp;
+          <strong>
+            {isDraft ? 'Drafts' : <Breadcrumb document={document} onlyText />}
+          </strong>
         </span>
       )}
     </Container>

app/scenes/Document/components/Header.js

@@ -14,7 +14,7 @@ import { documentEditUrl } from 'utils/routeHelpers';
 import { meta } from 'utils/keyboard';
 
 import Flex from 'shared/components/Flex';
-import Breadcrumb from './Breadcrumb';
+import Breadcrumb from 'shared/components/Breadcrumb';
 import DocumentMenu from 'menus/DocumentMenu';
 import NewChildDocumentMenu from 'menus/NewChildDocumentMenu';
 import DocumentShare from 'scenes/DocumentShare';

shared/components/Breadcrumb.js

@@ -14,15 +14,30 @@ import Flex from 'shared/components/Flex';
 type Props = {
   document: Document,
   collections: CollectionsStore,
+  onlyText: boolean,
 };
 
-const Breadcrumb = observer(({ document, collections }: Props) => {
+const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
   const path = document.pathToDocument.slice(0, -1);
   if (!document.collection) return null;
 
   const collection =
     collections.data.get(document.collection.id) || document.collection;
 
+  if (onlyText === true) {
+    return (
+      <React.Fragment>
+        {collection.name}
+        {path.map(n => (
+          <React.Fragment key={n.id}>
+            <SmallSlash />
+            {n.title}
+          </React.Fragment>
+        ))}
+      </React.Fragment>
+    );
+  }
+
   return (
     <Wrapper justify="flex-start" align="center">
       <CollectionName to={collectionUrl(collection.id)}>
@@ -54,6 +69,13 @@ const Wrapper = styled(Flex)`
   `};
 `;
 
+const SmallSlash = styled(GoToIcon)`
+  width: 15px;
+  height: 10px;
+  flex-shrink: 0;
+  opacity: 0.25;
+`;
+
 const Slash = styled(GoToIcon)`
   flex-shrink: 0;
   opacity: 0.25;