From 051e681701c90e436038ce62d0f823fb3406a20d Mon Sep 17 00:00:00 2001
From: Ansari <ansari_official@yahoo.com>
Date: Wed, 10 May 2023 20:13:07 +0530
Subject: [PATCH 1/5] =?UTF-8?q?Long=20filename=20fix=20=F0=9F=97=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/components/dialog/Dialog.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 07c92686b..81aa2d1f1 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -71,7 +71,9 @@ export function Dialog({
                     </DialogComponent.Title>
                     <div className="mt-2">
                       <p className="text-sm text-gray-500">
-                        {`"${document.title}" will be sent to ${unsentEmailsLength} recipients.`}
+                        {`"${document.title.length > 20 ? document.title.substring(0, 7) + "..." +
+                          document.title.substring(document.title.length - 7) : document.title}" 
+                            will be sent to ${unsentEmailsLength} recipients.`}
                       </p>
                     </div>
                   </div>

From 9b993c08f15cd316f097f23f44d09035b74963c7 Mon Sep 17 00:00:00 2001
From: Ansari <ansari_official@yahoo.com>
Date: Mon, 15 May 2023 15:39:37 +0530
Subject: [PATCH 2/5] Truncate prop added

---
 packages/ui/components/dialog/Dialog.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 81aa2d1f1..23a4821d1 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -19,6 +19,7 @@ type DialogProps = {
   formValues: FormValue[];
   setLoading: (loading: boolean) => void;
   icon: React.ReactNode;
+  trunate: boolean;
 };
 
 export function Dialog({
@@ -29,11 +30,17 @@ export function Dialog({
   formValues,
   setLoading,
   icon,
+  trunate = true,
 }: DialogProps) {
   const unsentEmailsLength = formValues.filter(
     (s: any) => s.email && s.sendStatus != "SENT"
   ).length;
 
+  if (trunate && document.title.length > 20) {
+    document.title = document.title.substring(0, 7) + "..." +
+      document.title.substring(document.title.length - 7);
+  }
+
   return (
     <Transition.Root show={open} as={Fragment}>
       <DialogComponent as="div" className="relative z-10" onClose={setOpen}>
@@ -71,9 +78,7 @@ export function Dialog({
                     </DialogComponent.Title>
                     <div className="mt-2">
                       <p className="text-sm text-gray-500">
-                        {`"${document.title.length > 20 ? document.title.substring(0, 7) + "..." +
-                          document.title.substring(document.title.length - 7) : document.title}" 
-                            will be sent to ${unsentEmailsLength} recipients.`}
+                        {`"${document.title}" will be sent to ${unsentEmailsLength} recipients.`}
                       </p>
                     </div>
                   </div>

From 8bf6594cf41aa45d498e5a22c06fa148bf023064 Mon Sep 17 00:00:00 2001
From: Ansari <ansari_official@yahoo.com>
Date: Mon, 15 May 2023 15:43:29 +0530
Subject: [PATCH 3/5] =?UTF-8?q?prop=20name=20changed=20=F0=9F=93=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/components/dialog/Dialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 23a4821d1..c1244394a 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -19,7 +19,7 @@ type DialogProps = {
   formValues: FormValue[];
   setLoading: (loading: boolean) => void;
   icon: React.ReactNode;
-  trunate: boolean;
+  trunateTitle: boolean;
 };
 
 export function Dialog({
@@ -30,13 +30,13 @@ export function Dialog({
   formValues,
   setLoading,
   icon,
-  trunate = true,
+  trunateTitle = true,
 }: DialogProps) {
   const unsentEmailsLength = formValues.filter(
     (s: any) => s.email && s.sendStatus != "SENT"
   ).length;
 
-  if (trunate && document.title.length > 20) {
+  if (trunateTitle && document.title.length > 20) {
     document.title = document.title.substring(0, 7) + "..." +
       document.title.substring(document.title.length - 7);
   }

From 748f842115b41534a9b8ca09315ae3460d4eab88 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Thu, 25 May 2023 18:43:37 +1000
Subject: [PATCH 4/5] fix: update prop typo, extract truncate method

---
 apps/web/pages/documents/[id]/signed.tsx |  3 ++-
 packages/lib/helpers/index.ts            |  1 +
 packages/lib/helpers/strings.ts          | 13 +++++++++++++
 packages/ui/components/dialog/Dialog.tsx | 14 ++++++--------
 4 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 packages/lib/helpers/index.ts
 create mode 100644 packages/lib/helpers/strings.ts

diff --git a/apps/web/pages/documents/[id]/signed.tsx b/apps/web/pages/documents/[id]/signed.tsx
index 53f375ab2..131cf734d 100644
--- a/apps/web/pages/documents/[id]/signed.tsx
+++ b/apps/web/pages/documents/[id]/signed.tsx
@@ -5,6 +5,7 @@ import prisma from "@documenso/prisma";
 import { Button, IconButton } from "@documenso/ui";
 import { NextPageWithLayout } from "../../_app";
 import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
+import { truncate } from "@documenso/lib/helpers";
 
 const Signed: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -21,7 +22,7 @@ const Signed: NextPageWithLayout = (props: any) => {
         <CheckBadgeIcon className="text-neon mr-1 inline w-10"></CheckBadgeIcon>
         <h1 className="text-neon inline align-middle text-base font-medium">It's done!</h1>
         <p className="mt-2 text-4xl font-bold tracking-tight">
-          You signed "{props.document.title}"
+          You signed "{truncate(props.document.title)}"
         </p>
         <p className="mt-2 max-w-sm text-base text-gray-500" hidden={allRecipientsSigned}>
           You will be notfied when all recipients have signed.
diff --git a/packages/lib/helpers/index.ts b/packages/lib/helpers/index.ts
new file mode 100644
index 000000000..cf29797bb
--- /dev/null
+++ b/packages/lib/helpers/index.ts
@@ -0,0 +1 @@
+export * from './strings';
\ No newline at end of file
diff --git a/packages/lib/helpers/strings.ts b/packages/lib/helpers/strings.ts
new file mode 100644
index 000000000..eaf45b7f1
--- /dev/null
+++ b/packages/lib/helpers/strings.ts
@@ -0,0 +1,13 @@
+/**
+ * Truncates a title to a given max length substituting the middle with an ellipsis.
+ */
+export const truncate = (str: string, maxLength: number = 20) => {
+    if (str.length <= maxLength) {
+        return str;
+    }
+    
+    const startLength = Math.ceil((maxLength - 3) / 2);
+    const endLength = Math.floor((maxLength - 3) / 2);
+    
+    return `${str.slice(0, startLength)}...${str.slice(-endLength)}`;
+};
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index c1244394a..9cf3b446d 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Fragment } from "react";
 import { sendSigningRequests } from "@documenso/lib/api";
+import { truncate } from "@documenso/lib/helpers";
 import { Button } from "@documenso/ui";
 import { Dialog as DialogComponent, Transition } from "@headlessui/react";
 import { Document as PrismaDocument } from "@prisma/client";
@@ -19,7 +20,7 @@ type DialogProps = {
   formValues: FormValue[];
   setLoading: (loading: boolean) => void;
   icon: React.ReactNode;
-  trunateTitle: boolean;
+  truncateTitle: boolean;
 };
 
 export function Dialog({
@@ -30,16 +31,13 @@ export function Dialog({
   formValues,
   setLoading,
   icon,
-  trunateTitle = true,
+  truncateTitle = true,
 }: DialogProps) {
   const unsentEmailsLength = formValues.filter(
     (s: any) => s.email && s.sendStatus != "SENT"
   ).length;
 
-  if (trunateTitle && document.title.length > 20) {
-    document.title = document.title.substring(0, 7) + "..." +
-      document.title.substring(document.title.length - 7);
-  }
+  const documentTitle = truncate(document.title)
 
   return (
     <Transition.Root show={open} as={Fragment}>
@@ -78,7 +76,7 @@ export function Dialog({
                     </DialogComponent.Title>
                     <div className="mt-2">
                       <p className="text-sm text-gray-500">
-                        {`"${document.title}" will be sent to ${unsentEmailsLength} recipients.`}
+                        {`"${documentTitle}" will be sent to ${unsentEmailsLength} recipients.`}
                       </p>
                     </div>
                   </div>

From 8ecd5cf215a24f909a41e56f135f51d2b7e751e7 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Mon, 29 May 2023 18:47:54 +1000
Subject: [PATCH 5/5] fix: respect truncate title prop

---
 packages/ui/components/dialog/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 9cf3b446d..1e03135af 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -37,7 +37,7 @@ export function Dialog({
     (s: any) => s.email && s.sendStatus != "SENT"
   ).length;
 
-  const documentTitle = truncate(document.title)
+  const documentTitle = truncateTitle ? truncate(document.title) : document.title;
 
   return (
     <Transition.Root show={open} as={Fragment}>