Introduce project slug

Fixes #5847

Author: Laurie T. Malau

components/dashboard/src/projects/NewProject.tsx

@@ -170,6 +170,7 @@ export default function NewProject() {
         try {
             await getGitpodService().server.createProject({
                 name: repo.name,
+                slug: (repo.path ? repo.path : repo.name),
                 cloneUrl: repo.cloneUrl,
                 account: repo.account,
                 provider,
@@ -255,6 +256,7 @@ export default function NewProject() {
                     )}
                 </div>
                 <div className="p-6 flex-col">
+                    {console.log(filteredRepos)}
                     {filteredRepos.length > 0 && (
                         <div className="overscroll-contain max-h-80 overflow-y-auto pr-2">
                             {filteredRepos.map((r, index) => (

components/dashboard/src/projects/Projects.tsx

@@ -83,7 +83,24 @@ export default function () {
         return moment(lastPrebuilds.get(p1.id)?.info?.startedAt || '1970-01-01').diff(moment(lastPrebuilds.get(p0.id)?.info?.startedAt || '1970-01-01'));
     }
 
-    const teamOrUserSlug = !!team ? 't/'+team.slug : 'projects';
+    function renderProjectLink(project: Project): React.ReactElement {
+        let slug = '';
+        const name = project.name;
+
+        if (project.slug) {
+            slug = project.slug;
+        } else {
+            // For existing projects that don't have a slug yet
+            slug = name.replace(/ /g, "-");
+        }
+
+        return (
+            <Link to={`/${teamOrUserSlug}/${slug}`}>
+                <span className="text-xl font-semibold">{name}</span>
+            </Link>)
+    }
+
+    const teamOrUserSlug = !!team ? 't/' + team.slug : 'projects';
 
     return <>
         <Header title="Projects" subtitle="Manage recently added projects." />
@@ -119,9 +136,7 @@ export default function () {
                         <div className="h-42 border border-gray-100 dark:border-gray-800 rounded-t-xl">
                             <div className="h-32 p-6">
                                 <div className="flex text-gray-700 dark:text-gray-200 font-medium">
-                                    <Link to={`/${teamOrUserSlug}/${p.name}`}>
-                                        <span className="text-xl font-semibold">{p.name}</span>
-                                    </Link>
+                                    {renderProjectLink(p)}
                                     <span className="flex-grow" />
                                     <div className="justify-end">
                                         <ContextMenu menuEntries={[

components/gitpod-db/src/typeorm/entity/db-project.ts

@@ -18,6 +18,9 @@ export class DBProject {
   @Column()
   name: string;
 
+  @Column()
+  slug?: string;
+
   @Column()
   cloneUrl: string;
 

components/gitpod-db/src/typeorm/migration/1634894637934-AddSlugToProject.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import {MigrationInterface, QueryRunner} from "typeorm";
+import { columnExists } from "./helper/helper";
+
+export class AddSlugToProject1634894637934 implements MigrationInterface {
+
+    public async up(queryRunner: QueryRunner): Promise<any> {
+        if (!(await columnExists(queryRunner, "d_b_project", "slug"))) {
+            await queryRunner.query("ALTER TABLE d_b_project ADD COLUMN `slug` varchar(255) NULL");
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<any> {
+    }
+
+}

components/gitpod-protocol/src/gitpod-service.ts

@@ -234,6 +234,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
 
 export interface CreateProjectParams {
     name: string;
+    slug?: string;
     account: string;
     provider: string;
     cloneUrl: string;
@@ -255,6 +256,7 @@ export interface GetProviderRepositoriesParams {
 }
 export interface ProviderRepository {
     name: string;
+    path?: string;
     account: string;
     accountAvatarUrl: string;
     cloneUrl: string;

components/gitpod-protocol/src/teams-projects-protocol.ts

@@ -14,6 +14,7 @@ export interface ProjectConfig {
 export interface Project {
     id: string;
     name: string;
+    slug?: string;
     cloneUrl: string;
     teamId?: string;
     userId?: string;

components/server/ee/src/gitlab/gitlab-app-support.ts

@@ -37,6 +37,7 @@ export class GitLabAppSupport {
         const projectsWithAccess = await api.Projects.all({ min_access_level: "40", perPage: 100 });
         for (const project of projectsWithAccess) {
             const anyProject = project as any;
+            const path = anyProject.path as string;
             const fullPath = anyProject.path_with_namespace as string;
             const cloneUrl = anyProject.http_url_to_repo as string;
             const updatedAt = anyProject.last_activity_at as string;
@@ -45,6 +46,7 @@ export class GitLabAppSupport {
 
             (account === usersGitLabAccount ? ownersRepos : result).push({
                 name: project.name,
+                path,
                 account,
                 cloneUrl,
                 updatedAt,

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

@@ -90,13 +90,14 @@ export class ProjectsService {
         return result;
     }
 
-    async createProject({ name, cloneUrl, teamId, userId, appInstallationId }: CreateProjectParams): Promise<Project> {
+    async createProject({ name, slug, cloneUrl, teamId, userId, appInstallationId }: CreateProjectParams): Promise<Project> {
         const projects = await this.getProjectsByCloneUrls([cloneUrl]);
         if (projects.length > 0) {
             throw new Error("Project for repository already exists.");
         }
         const project = Project.create({
             name,
+            slug,
             cloneUrl,
             ...(!!userId ? { userId } : { teamId }),
             appInstallationId