feat: Editable titles in sidebar (#1544)

* feat/editable-titles

* feat: Double click to edit titles in the sidebar

* Take into account policies

* fix: Title update on another client

* Improved styling

app/components/Sidebar/components/CollectionLink.js

@@ -10,27 +10,34 @@ import CollectionIcon from "components/CollectionIcon";
 import DropToImport from "components/DropToImport";
 import Flex from "components/Flex";
 import DocumentLink from "./DocumentLink";
+import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import CollectionMenu from "menus/CollectionMenu";
 
-type Props = {
+type Props = {|
   collection: Collection,
   ui: UiStore,
+  canUpdate: boolean,
   documents: DocumentsStore,
   activeDocument: ?Document,
   prefetchDocument: (id: string) => Promise<void>,
-};
+|};
 
 @observer
 class CollectionLink extends React.Component<Props> {
   @observable menuOpen = false;
 
+  handleTitleChange = async (name: string) => {
+    await this.props.collection.save({ name });
+  };
+
   render() {
     const {
       collection,
       documents,
       activeDocument,
       prefetchDocument,
+      canUpdate,
       ui,
     } = this.props;
     const expanded = collection.id === ui.activeCollectionId;
@@ -49,7 +56,13 @@ class CollectionLink extends React.Component<Props> {
           expanded={expanded}
           hideDisclosure
           menuOpen={this.menuOpen}
-          label={collection.name}
+          label={
+            <EditableTitle
+              title={collection.name}
+              onSubmit={this.handleTitleChange}
+              canUpdate={canUpdate}
+            />
+          }
           exact={false}
           menu={
             <CollectionMenu
@@ -69,6 +82,7 @@ class CollectionLink extends React.Component<Props> {
                 collection={collection}
                 activeDocument={activeDocument}
                 prefetchDocument={prefetchDocument}
+                canUpdate={canUpdate}
                 depth={1.5}
               />
             ))}