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,

components/dashboard/src/projects/Project.tsx

@@ -26,7 +26,7 @@ export default function () {
     const team = getCurrentTeam(location, teams);
 
     const match = useRouteMatch<{ team: string, resource: string }>("/(t/)?:team/:resource");
-    const projectName = match?.params?.resource;
+    const projectSlug = match?.params?.resource;
 
     const [project, setProject] = useState<Project | undefined>();
 
@@ -61,14 +61,18 @@ export default function () {
     }, [project]);
 
     const updateProject = async () => {
-        if (!teams || !projectName) {
+        if (!teams || !projectSlug) {
             return;
         }
         const projects = (!!team
             ? await getGitpodService().server.getTeamProjects(team.id)
             : await getGitpodService().server.getUserProjects());
 
-        const project = projectName && projects.find(p => p.name === projectName);
+        // Find project matching with slug, otherwise with name
+        const project = projectSlug && projects.find(
+            p => p.slug ? p.slug === projectSlug :
+            p.name === projectSlug);
+
         if (!project) {
             return;
         }
@@ -239,7 +243,7 @@ export default function () {
                                 </div>
                             </ItemField>
                             <ItemField className="flex items-center">
-                                <a className="text-base text-gray-900 dark:text-gray-50 font-medium uppercase mb-1 cursor-pointer" href={prebuild ? `/${!!team ? 't/' + team.slug : 'projects'}/${projectName}/${prebuild.info.id}` : 'javascript:void(0)'}>
+                                <a className="text-base text-gray-900 dark:text-gray-50 font-medium uppercase mb-1 cursor-pointer" href={prebuild ? `/${!!team ? 't/' + team.slug : 'projects'}/${projectSlug}/${prebuild.info.id}` : 'javascript:void(0)'}>
                                     {prebuild ? (<><div className="inline-block align-text-bottom mr-2 w-4 h-4">{statusIcon}</div>{status}</>) : (<span> </span>)}
                                 </a>
                                 <span className="flex-grow" />

components/dashboard/src/projects/Projects.tsx

@@ -85,11 +85,29 @@ 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';
     let [ isRemoveModalVisible, setRemoveModalVisible ] = useState(false);
     let [ removeProjectHandler, setRemoveProjectHandler ] = useState<() => void>(()=> () => {})
     let [ willRemoveProject, setWillRemoveProject ] = useState<Project>()
 
+    function renderProjectLink(project: Project): React.ReactElement {
+        let slug = '';
+        const name = project.name;
+
+        if (project.slug) {
+            slug = project.slug;
+        } else {
+            // For existing GitLab projects that don't have a slug yet
+            slug = name;
+        }
+
+        return (
+            <Link to={`/${teamOrUserSlug}/${slug}`}>
+                <span className="text-xl font-semibold">{name}</span>
+            </Link>)
+    }
+
+    const teamOrUserSlug = !!team ? 't/' + team.slug : 'projects';
+
     return <>
 
         {isRemoveModalVisible && <ConfirmationModal
@@ -137,9 +155,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,24 @@
+/**
+ * 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");
+        }
+        if (await columnExists(queryRunner, "d_b_project", "slug")) {
+            await queryRunner.query("UPDATE d_b_project SET slug = name WHERE cloneUrl LIKE '%github%' AND slug IS NULL;");
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<any> {
+    }
+
+}

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

@@ -235,6 +235,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
 
 export interface CreateProjectParams {
     name: string;
+    slug?: string;
     account: string;
     provider: string;
     cloneUrl: string;
@@ -256,6 +257,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