chore: restrict project creation and renaming to 240 characters or less (#7926)

* chore: implemented systemio guard for project create and rename

* fix: improving display of 239 character project name

* fix: display truncated project name

* fix: displaying project name in delete modal

* fix: auto fixes

* fix: typo

Author: nadr0

src/components/ProjectCard/ProjectCard.tsx

@@ -88,6 +88,8 @@ function ProjectCard({
     }
   }, [isEditing, inputRef.current])
 
+  const projectName = project.name?.replace(FILE_EXT, '')
+
   return (
     <li
       {...props}
@@ -127,10 +129,11 @@ function ProjectCard({
             />
           ) : (
             <h3
-              className="font-sans relative z-0 p-2"
+              className="font-sans relative z-0 p-2 truncate"
               data-testid="project-title"
+              title={projectName}
             >
-              {project.name?.replace(FILE_EXT, '')}
+              {projectName}
             </h3>
           )}
           {project.readWriteAccess && (
@@ -208,11 +211,11 @@ function ProjectCard({
           }, reportRejection)}
           onDismiss={() => setIsConfirmingDelete(false)}
         >
-          <p className="my-4">
+          <p className="my-4 text-wrap break-words">
             This will permanently delete "{project.name || 'this file'}
             ".
           </p>
-          <p className="my-4">
+          <p className="my-4 text-wrap break-words">
             Are you sure you want to delete "{project.name || 'this file'}
             "? This action cannot be undone.
           </p>

src/components/ProjectSidebarMenu.tsx

@@ -234,33 +234,43 @@ function ProjectMenuPopover({
     ]
   )
 
+  // Breadcrumb for project and file
+  const breadCrumb = {
+    projectName: project?.name || '',
+    sep: '/',
+    filename:
+      isDesktop() && file?.name
+        ? file.name.slice(file.name.lastIndexOf(window.electron.path.sep) + 1)
+        : APP_NAME,
+  }
+  const breadCrumbTooltip = `${breadCrumb.projectName}${breadCrumb.sep}${breadCrumb.filename}`
+
   return (
     <Popover className="relative">
       <Popover.Button
         className="gap-1 rounded-sm mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center  focus-visible:outline-appForeground dark:hover:bg-chalkboard-90"
         data-testid="project-sidebar-toggle"
       >
-        <div className="flex items-baseline py-0.5 text-sm gap-1">
+        <div
+          className="flex items-baseline py-0.5 text-sm gap-1"
+          title={breadCrumbTooltip}
+        >
           {isDesktop() && project?.name && (
             <>
               <span
-                className="hidden whitespace-nowrap md:block"
+                className="hidden whitespace-nowrap md:block max-w-80 truncate"
                 data-testid="app-header-project-name"
               >
-                {project.name}
+                {breadCrumb.projectName}
               </span>
-              <span className="hidden md:block">/</span>
+              <span className="hidden md:block">{breadCrumb.sep}</span>
             </>
           )}
           <span
             className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap"
             data-testid="app-header-file-name"
           >
-            {isDesktop() && file?.name
-              ? file.name.slice(
-                  file.name.lastIndexOf(window.electron.path.sep) + 1
-                )
-              : APP_NAME}
+            {breadCrumb.filename}
           </span>
         </div>
         <CustomIcon

src/lib/constants.ts

@@ -247,3 +247,5 @@ export type EnvironmentConfigurationRuntime = {
 }
 
 export const ENVIRONMENT_CONFIGURATION_FOLDER = 'envs'
+
+export const MAX_PROJECT_NAME_LENGTH = 240

src/machines/systemIO/systemIOMachine.ts

@@ -1,4 +1,7 @@
-import { DEFAULT_PROJECT_NAME } from '@src/lib/constants'
+import {
+  DEFAULT_PROJECT_NAME,
+  MAX_PROJECT_NAME_LENGTH,
+} from '@src/lib/constants'
 import type { Project } from '@src/lib/project'
 import type {
   SystemIOContext,
@@ -9,6 +12,7 @@ import {
   SystemIOMachineActions,
   SystemIOMachineActors,
   SystemIOMachineEvents,
+  SystemIOMachineGuards,
   SystemIOMachineStates,
 } from '@src/machines/systemIO/utils'
 import toast from 'react-hot-toast'
@@ -142,6 +146,19 @@ export const systemIOMachine = setup({
           }
         },
   },
+  guards: {
+    [SystemIOMachineGuards.projectNameIsValidLength]: ({
+      context,
+      event,
+    }): boolean => {
+      assertEvent(event, [
+        SystemIOMachineEvents.createProject,
+        SystemIOMachineEvents.renameProject,
+      ])
+      const { requestedProjectName } = event.data
+      return requestedProjectName.length <= MAX_PROJECT_NAME_LENGTH
+    },
+  },
   actions: {
     [SystemIOMachineActions.setFolders]: assign({
       folders: ({ event }) => {
@@ -222,6 +239,11 @@ export const systemIOMachine = setup({
         return { project: event.output.name }
       },
     }),
+    [SystemIOMachineActions.toastProjectNameTooLong]: () => {
+      toast.error(
+        `Project name is too long, must be less than or equal to ${MAX_PROJECT_NAME_LENGTH} characters`
+      )
+    },
   },
   actors: {
     [SystemIOMachineActors.readFoldersFromProjectDirectory]: fromPromise(
@@ -414,12 +436,24 @@ export const systemIOMachine = setup({
         [SystemIOMachineEvents.navigateToFile]: {
           actions: [SystemIOMachineActions.setRequestedFileName],
         },
-        [SystemIOMachineEvents.createProject]: {
-          target: SystemIOMachineStates.creatingProject,
-        },
-        [SystemIOMachineEvents.renameProject]: {
-          target: SystemIOMachineStates.renamingProject,
-        },
+        [SystemIOMachineEvents.createProject]: [
+          {
+            guard: SystemIOMachineGuards.projectNameIsValidLength,
+            target: SystemIOMachineStates.creatingProject,
+          },
+          {
+            actions: [SystemIOMachineActions.toastProjectNameTooLong],
+          },
+        ],
+        [SystemIOMachineEvents.renameProject]: [
+          {
+            target: SystemIOMachineStates.renamingProject,
+            guard: SystemIOMachineGuards.projectNameIsValidLength,
+          },
+          {
+            actions: [SystemIOMachineActions.toastProjectNameTooLong],
+          },
+        ],
         [SystemIOMachineEvents.deleteProject]: {
           target: SystemIOMachineStates.deletingProject,
         },

src/machines/systemIO/utils.ts

@@ -74,6 +74,11 @@ export enum SystemIOMachineActions {
   setReadWriteProjectDirectory = 'set read write project directory',
   setRequestedTextToCadGeneration = 'set requested text to cad generation',
   setLastProjectDeleteRequest = 'set last project delete request',
+  toastProjectNameTooLong = 'toast project name too long',
+}
+
+export enum SystemIOMachineGuards {
+  projectNameIsValidLength = 'project name is valid length',
 }
 
 export const NO_PROJECT_DIRECTORY = ''