Increase project name max length (#18941)

* Increase project name max length

* 💄

* 💄

Author: jeanp413

components/dashboard/src/components/Header.tsx

@@ -29,7 +29,7 @@ export default function Header(p: HeaderProps) {
     return (
         <div className="app-container border-gray-200 dark:border-gray-800">
             <div className="flex pb-8 pt-6">
-                <div>
+                <div className="w-full">
                     {p.complexTitle ? p.complexTitle : <Heading1 tracking="tight">{p.title}</Heading1>}
                     {typeof p.subtitle === "string" ? (
                         <Subheading tracking="wide">{p.subtitle}</Subheading>

components/dashboard/src/components/typography/headings.tsx

@@ -18,7 +18,12 @@ export const Heading1: FC<HeadingProps> = ({ id, color, tracking, className, chi
     return (
         <h1
             id={id}
-            className={classNames(getHeadingColor(color), getTracking(tracking), "font-bold text-4xl", className)}
+            className={classNames(
+                getHeadingColor(color),
+                getTracking(tracking),
+                "font-bold text-4xl truncate",
+                className,
+            )}
         >
             {children}
         </h1>

components/dashboard/src/projects/ProjectListItem.tsx

@@ -136,7 +136,7 @@ type ProjectLinkProps = {
 };
 const ProjectLink: FunctionComponent<ProjectLinkProps> = ({ project }) => {
     return (
-        <Link to={`/projects/${project.id}`}>
+        <Link to={`/projects/${project.id}`} className="truncate" title={project.name}>
             <span className="text-xl font-semibold">{project.name}</span>
         </Link>
     );

components/dashboard/src/projects/ProjectSettings.tsx

@@ -24,6 +24,8 @@ import { InputField } from "../components/forms/InputField";
 import { SelectInputField } from "../components/forms/SelectInputField";
 import debounce from "lodash.debounce";
 
+const MAX_PROJECT_NAME_LENGTH = 100;
+
 export function ProjectSettingsPage(props: { project?: Project; children?: React.ReactNode }) {
     return (
         <PageWithSubMenu
@@ -49,8 +51,8 @@ export default function ProjectSettingsView() {
     let badProjectName: string | undefined;
     if (project) {
         badProjectName = projectName.length > 0 ? undefined : "Project name can not be blank.";
-        if (projectName.length > 32) {
-            badProjectName = "Project name can not be longer than 32 characters.";
+        if (projectName.length > MAX_PROJECT_NAME_LENGTH) {
+            badProjectName = `Project name can not be longer than ${MAX_PROJECT_NAME_LENGTH} characters.`;
         }
     }
     const history = useHistory();
@@ -221,7 +223,7 @@ export default function ProjectSettingsView() {
             <Heading2>Project Name</Heading2>
             <form onSubmit={updateProjectName}>
                 <TextInputField
-                    hint="The name can be up to 32 characters long."
+                    hint={`The name can be up to ${MAX_PROJECT_NAME_LENGTH} characters long.`}
                     value={projectName}
                     error={badProjectName}
                     onChange={setProjectName}

components/server/src/projects/projects-service.ts

@@ -32,6 +32,8 @@ import { TransactionalContext } from "@gitpod/gitpod-db/lib/typeorm/transactiona
 import { ScmService } from "./scm-service";
 import { daysBefore, isDateSmaller } from "@gitpod/gitpod-protocol/lib/util/timeutil";
 
+const MAX_PROJECT_NAME_LENGTH = 100;
+
 @injectable()
 export class ProjectsService {
     constructor(
@@ -205,8 +207,11 @@ export class ProjectsService {
             throw new ApplicationError(ErrorCodes.BAD_REQUEST, "Clone URL must be less than 1k characters.");
         }
 
-        if (name.length > 32) {
-            throw new ApplicationError(ErrorCodes.BAD_REQUEST, "Project name cannot be longer than 32 characters.");
+        if (name.length > MAX_PROJECT_NAME_LENGTH) {
+            throw new ApplicationError(
+                ErrorCodes.BAD_REQUEST,
+                `Project name cannot be longer than ${MAX_PROJECT_NAME_LENGTH} characters.`,
+            );
         }
 
         try {
@@ -245,7 +250,7 @@ export class ProjectsService {
 
         const project = Project.create({
             // Default to repository name
-            name: name || parsedUrl.repo.substring(0, 32),
+            name: name || parsedUrl.repo.substring(0, MAX_PROJECT_NAME_LENGTH),
             cloneUrl,
             teamId,
             appInstallationId,
@@ -369,9 +374,11 @@ export class ProjectsService {
         const partial: PartialProject = { id: partialProject.id };
         if (partialProject.name) {
             partialProject.name = partialProject.name.trim();
-            // check it is between 0 and 32 characters
-            if (partialProject.name.length > 32) {
-                throw new ApplicationError(ErrorCodes.BAD_REQUEST, "Project name must be less than 32 characters.");
+            if (partialProject.name.length > MAX_PROJECT_NAME_LENGTH) {
+                throw new ApplicationError(
+                    ErrorCodes.BAD_REQUEST,
+                    `Project name must be less than ${MAX_PROJECT_NAME_LENGTH} characters.`,
+                );
             }
             if (partialProject.name.length === 0) {
                 throw new ApplicationError(ErrorCodes.BAD_REQUEST, "Project name must not be empty.");