From ca7d919b94bb6cf7195d315b3146f6e6d5bf4509 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 3 Feb 2024 16:53:39 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Add=20'Rename=E2=80=A6'=20option=20to?=
 =?UTF-8?q?=20collection=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/Sidebar/components/CollectionLink.tsx |  9 ++++++++-
 app/menus/CollectionMenu.tsx                         | 10 ++++++++++
 app/menus/DocumentMenu.tsx                           |  4 ++--
 shared/i18n/locales/en_US/translation.json           |  2 +-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/components/Sidebar/components/CollectionLink.tsx b/app/components/Sidebar/components/CollectionLink.tsx
index beeb5e531..b46908dfc 100644
--- a/app/components/Sidebar/components/CollectionLink.tsx
+++ b/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}
                   />
diff --git a/app/menus/CollectionMenu.tsx b/app/menus/CollectionMenu.tsx
index 65671ab0d..fca327bc2 100644
--- a/app/menus/CollectionMenu.tsx
+++ b/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),
       {
diff --git a/app/menus/DocumentMenu.tsx b/app/menus/DocumentMenu.tsx
index 29320e3c0..d0cb614dd 100644
--- a/app/menus/DocumentMenu.tsx
+++ b/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),
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 9aef516b8..7d499d399 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/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",