Merge pull request #150 from The-Robin-Hood/bugfix/long_filename

Long filename fix 🗄

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.

packages/lib/helpers/index.ts

@@ -0,0 +1 @@
+export * from './strings';

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)}`;
+};

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,6 +20,7 @@ type DialogProps = {
   formValues: FormValue[];
   setLoading: (loading: boolean) => void;
   icon: React.ReactNode;
+  truncateTitle: boolean;
 };
 
 export function Dialog({
@@ -29,11 +31,14 @@ export function Dialog({
   formValues,
   setLoading,
   icon,
+  truncateTitle = true,
 }: DialogProps) {
   const unsentEmailsLength = formValues.filter(
     (s: any) => s.email && s.sendStatus != "SENT"
   ).length;
 
+  const documentTitle = truncateTitle ? truncate(document.title) : document.title;
+
   return (
     <Transition.Root show={open} as={Fragment}>
       <DialogComponent as="div" className="relative z-10" onClose={setOpen}>
@@ -71,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>