feat: Add 'Rename…' option to collection menu

app/components/Sidebar/components/CollectionLink.tsx

@@ -6,6 +6,7 @@ import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { NavigationNode } from "@shared/types";
+import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import DocumentReparent from "~/scenes/DocumentReparent";
@@ -19,7 +20,7 @@ import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import CollectionMenu from "~/menus/CollectionMenu";
 import DropToImport from "./DropToImport";
-import EditableTitle from "./EditableTitle";
+import EditableTitle, { RefHandle } from "./EditableTitle";
 import Relative from "./Relative";
 import SidebarLink, { DragObject } from "./SidebarLink";
 import { useStarredContext } from "./StarredContext";
@@ -48,6 +49,7 @@ const CollectionLink: React.FC<Props> = ({
   const { t } = useTranslation();
   const history = useHistory();
   const inStarredSection = useStarredContext();
+  const editableTitleRef = React.useRef<RefHandle>(null);
 
   const handleTitleChange = React.useCallback(
     async (name: string) => {
@@ -153,6 +155,8 @@ const CollectionLink: React.FC<Props> = ({
                 onSubmit={handleTitleChange}
                 onEditing={handleTitleEditing}
                 canUpdate={can.update}
+                maxLength={CollectionValidation.maxNameLength}
+                ref={editableTitleRef}
               />
             }
             exact={false}
@@ -171,6 +175,9 @@ const CollectionLink: React.FC<Props> = ({
                   </NudeButton>
                   <CollectionMenu
                     collection={collection}
+                    onRename={() =>
+                      editableTitleRef.current?.setIsEditing(true)
+                    }
                     onOpen={handleMenuOpen}
                     onClose={handleMenuClose}
                   />

app/menus/CollectionMenu.tsx

@@ -5,6 +5,7 @@ import {
   ExportIcon,
   AlphabeticalSortIcon,
   ManualSortIcon,
+  InputIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -38,6 +39,7 @@ type Props = {
   placement?: Placement;
   modal?: boolean;
   label?: (props: MenuButtonHTMLProps) => React.ReactNode;
+  onRename?: () => void;
   onOpen?: () => void;
   onClose?: () => void;
 };
@@ -47,6 +49,7 @@ function CollectionMenu({
   label,
   modal = true,
   placement,
+  onRename,
   onOpen,
   onClose,
 }: Props) {
@@ -166,6 +169,13 @@ function CollectionMenu({
       {
         type: "separator",
       },
+      {
+        type: "button",
+        title: `${t("Rename")}…`,
+        visible: !!can.update && !!onRename,
+        onClick: () => onRename?.(),
+        icon: <InputIcon />,
+      },
       actionToMenuItem(editCollection, context),
       actionToMenuItem(editCollectionPermissions, context),
       {

app/menus/DocumentMenu.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { EditIcon, RestoreIcon, SearchIcon } from "outline-icons";
+import { EditIcon, InputIcon, RestoreIcon, SearchIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -284,7 +284,7 @@ function DocumentMenu({
               title: `${t("Rename")}…`,
               visible: !!can.update && !user.separateEditMode && !!onRename,
               onClick: () => onRename?.(),
-              icon: <EditIcon />,
+              icon: <InputIcon />,
             },
             actionToMenuItem(createNestedDocument, context),
             actionToMenuItem(importDocument, context),

shared/i18n/locales/en_US/translation.json

@@ -421,6 +421,7 @@
   "Path to document": "Path to document",
   "Group member options": "Group member options",
   "Export collection": "Export collection",
+  "Rename": "Rename",
   "Sort in sidebar": "Sort in sidebar",
   "Alphabetical sort": "Alphabetical sort",
   "Manual sort": "Manual sort",
@@ -430,7 +431,6 @@
   "Document options": "Document options",
   "Restore": "Restore",
   "Choose a collection": "Choose a collection",
-  "Rename": "Rename",
   "Enable embeds": "Enable embeds",
   "Export options": "Export options",
   "Edit group": "Edit group",