Merge pull request #1483 from Salman2301/fix-org-long-name

fix: truncate too long proj or org name

frontend/src/components/navigation/NavHeader.tsx

@@ -56,18 +56,20 @@ export default function NavHeader({
 
   return (
     <div className="flex flex-row items-center pt-6">
-      <div className="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm text-black">
+      <div className="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm text-black min-w-[1.25rem]">
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link passHref legacyBehavior href={`/org/${currentOrg?.id}/overview`}>
-        <a className="pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary">
+        <a className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary">
           {currentOrg?.name}
         </a>
       </Link>
       {isProjectRelated && (
         <>
           <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
-          <div className="text-sm font-semibold text-bunker-300">{currentWorkspace?.name}</div>
+          <div className="truncate text-sm font-semibold text-bunker-300">
+            {currentWorkspace?.name}
+          </div>
         </>
       )}
       {isOrganizationRelated && (

frontend/src/components/signup/UserInfoStep.tsx

@@ -245,6 +245,7 @@ export default function UserInfoStep({
             placeholder="Infisical"
             onChange={(e) => setOrganizationName(e.target.value)}
             value={organizationName}
+            maxLength={64}
             isRequired
             className="h-12"
           />

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -28,6 +28,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { twMerge } from "tailwind-merge";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -99,7 +100,7 @@ const supportOptions = [
 ];
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name").trim(),
+  name: yup.string().required().label("Project Name").trim().max(64, "Too long, maximum length is 64 characters"),
   addMembers: yup.bool().required().label("Add Members")
 });
 
@@ -273,13 +274,16 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       </Link>
                     )}
                     <DropdownMenu>
-                      <DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600">
+                      <DropdownMenuTrigger
+                        asChild
+                        className="max-w-[160px] data-[state=open]:bg-mineshaft-600"
+                      >
                         <div className="mr-auto flex items-center rounded-md py-1.5 pl-1.5 pr-2 hover:bg-mineshaft-600">
-                          <div className="flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm">
+                          <div className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-md bg-primary text-sm">
                             {currentOrg?.name.charAt(0)}
                           </div>
                           <div
-                            className="overflow-hidden text-ellipsis pl-2 text-sm text-mineshaft-100"
+                            className="overflow-hidden truncate text-ellipsis pl-2 text-sm text-mineshaft-100"
                             style={{ maxWidth: "140px" }}
                           >
                             {currentOrg?.name}
@@ -323,7 +327,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                                   )
                                 }
                               >
-                                <div className="flex w-full items-center justify-between">
+                                <div className="flex w-full max-w-[150px] items-center justify-between truncate">
                                   {org.name}
                                 </div>
                               </Button>
@@ -422,7 +426,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       <Select
                         defaultValue={currentWorkspace?.id}
                         value={currentWorkspace?.id}
-                        className="w-full truncate bg-mineshaft-600 py-2.5 font-medium"
+                        className="w-full [&>*:first-child]:truncate bg-mineshaft-600 py-2.5 font-medium"
                         onValueChange={(value) => {
                           router.push(`/project/${value}/secrets/overview`);
                           localStorage.setItem("projectData.id", value);
@@ -437,7 +441,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
                               <SelectItem
                                 key={`ws-layout-list-${id}`}
                                 value={id}
-                                className={`${currentWorkspace?.id === id && "bg-mineshaft-600"}`}
+                                className={twMerge(
+                                  currentWorkspace?.id === id && "bg-mineshaft-600",
+                                  "truncate"
+                                )}
                               >
                                 {name}
                               </SelectItem>

frontend/src/pages/org/[id]/overview/index.tsx

@@ -453,7 +453,7 @@ const LearningItemSquare = ({
 };
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name").trim(),
+  name: yup.string().required().label("Project Name").trim().max(64, "Too long, maximum length is 64 characters"),
   addMembers: yup.bool().required().label("Add Members")
 });
 
@@ -633,7 +633,7 @@ const OrganizationPage = withPermission(
                   key={workspace.id}
                   className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
                 >
-                  <div className="mt-0 text-lg text-mineshaft-100">{workspace.name}</div>
+                  <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
                   <div className="mt-0 pb-6 text-sm text-mineshaft-300">
                     {workspace.environments?.length || 0} environments
                   </div>

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -10,7 +10,11 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name")
+  name: yup
+    .string()
+    .required()
+    .label("Organization Name")
+    .max(64, "Too long, maximum length is 64 characters")
 });
 
 type FormData = yup.InferType<typeof formSchema>;

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -12,7 +12,7 @@ import { useRenameWorkspace } from "@app/hooks/api";
 import { CopyButton } from "./CopyButton";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name")
+  name: yup.string().required().label("Project Name").max(64, "Too long, maximum length is 64 characters"),
 });
 
 type FormData = yup.InferType<typeof formSchema>;

frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx

@@ -244,6 +244,7 @@ export const UserInfoSSOStep = ({
               onChange={(e) => setOrganizationName(e.target.value)}
               isRequired
               className="h-12"
+              maxLength={64}
               disabled
             />
             {organizationNameError && (