Text only save feedback based on jori/actions

frontend/scenes/Document/components/Breadcrumbs/Breadcrumbs.js

@@ -1,35 +0,0 @@
-// @flow
-import React from 'react';
-import { Link } from 'react-router-dom';
-import type { Document, NavigationNode } from 'types';
-
-type Props = {
-  document: Document,
-  pathToDocument: Array<NavigationNode>,
-};
-
-const Breadcrumbs = ({ document, pathToDocument }: Props) => {
-  if (document && document.collection) {
-    const titleSections = pathToDocument
-      ? pathToDocument.map(node => (
-          <Link key={node.id} to={node.url}>{node.title}</Link>
-        ))
-      : [];
-    titleSections.unshift(
-      <Link key={document.collection.id} to={document.collection.url}>
-        {document.collection.name}
-      </Link>
-    );
-
-    return (
-      <span>
-        &nbsp;/&nbsp;
-        {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
-        {` / ${document.title}`}
-      </span>
-    );
-  }
-  return null;
-};
-
-export default Breadcrumbs;

frontend/scenes/Document/components/Breadcrumbs/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Breadcrumbs from './Breadcrumbs';
-export default Breadcrumbs;

frontend/scenes/Document/components/SaveAction/SaveAction.js

@@ -0,0 +1,47 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  onClick: Function,
+  disabled?: boolean,
+  isNew?: boolean,
+  isSaving?: boolean,
+};
+
+class SaveAction extends React.Component {
+  props: Props;
+
+  onClick = (ev: MouseEvent) => {
+    if (this.props.disabled) return;
+
+    ev.preventDefault();
+    this.props.onClick();
+  };
+
+  render() {
+    const { isSaving, isNew, disabled } = this.props;
+
+    return (
+      <Link
+        onClick={this.onClick}
+        title="Save changes (Cmd+Enter)"
+        disabled={disabled}
+      >
+        {isNew
+          ? isSaving ? 'Publishing…' : 'Publish'
+          : isSaving ? 'Saving…' : 'Save'}
+      </Link>
+    );
+  }
+}
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  opacity: ${props => (props.disabled ? 0.5 : 1)};
+  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
+  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
+`;
+
+export default SaveAction;

frontend/scenes/Document/components/SaveAction/index.js

@@ -0,0 +1,3 @@
+// @flow
+import SaveAction from './SaveAction';
+export default SaveAction;