Implement organization switcher and use slug in URL (#59)

* Implement dropdown for organizations switcher

* Add dynamic route for organization id

* Update routes for organization slug

* Use organization slug for adding project

* Refactor to fetch organizations at sidebar component

* Update organization switcher based on searched project

* Refactor types in frontend

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/backend/src/database.ts

@@ -56,6 +56,13 @@ export class Database {
     return updateResult.affected > 0;
   }
 
+  async getOrganization (options: FindOneOptions<Organization>): Promise<Organization | null> {
+    const organizationRepository = this.dataSource.getRepository(Organization);
+    const organization = await organizationRepository.findOne(options);
+
+    return organization;
+  }
+
   async getOrganizationsByUserId (userId: string): Promise<Organization[]> {
     const organizationRepository = this.dataSource.getRepository(Organization);
 
@@ -108,7 +115,7 @@ export class Database {
     return project;
   }
 
-  async getProjectsInOrganization (userId: string, organizationId: string): Promise<Project[]> {
+  async getProjectsInOrganization (userId: string, organizationSlug: string): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
 
     const projects = await projectRepository
@@ -116,9 +123,10 @@ export class Database {
       .leftJoinAndSelect('project.deployments', 'deployments', 'deployments.isCurrent = true')
       .leftJoinAndSelect('deployments.domain', 'domain')
       .leftJoin('project.projectMembers', 'projectMembers')
-      .where('(project.ownerId = :userId OR projectMembers.userId = :userId) AND project.organizationId = :organizationId', {
+      .leftJoin('project.organization', 'organization')
+      .where('(project.ownerId = :userId OR projectMembers.userId = :userId) AND organization.slug = :organizationSlug', {
         userId,
-        organizationId
+        organizationSlug
       })
       .getMany();
 
@@ -297,7 +305,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async addProject (userId: string, projectDetails: DeepPartial<Project>): Promise<Project> {
+  async addProject (userId: string, organizationId: string, projectDetails: DeepPartial<Project>): Promise<Project> {
     const projectRepository = this.dataSource.getRepository(Project);
 
     // TODO: Check if organization exists
@@ -312,7 +320,7 @@ export class Database {
     });
 
     newProject.organization = Object.assign(new Organization(), {
-      id: projectDetails.organizationId
+      id: organizationId
     });
 
     newProject.subDomain = `${newProject.name}.${PROJECT_DOMAIN}`;

packages/backend/src/entity/Organization.ts

@@ -4,11 +4,13 @@ import {
   Column,
   CreateDateColumn,
   UpdateDateColumn,
-  OneToMany
+  OneToMany,
+  Unique
 } from 'typeorm';
 import { UserOrganization } from './UserOrganization';
 
 @Entity()
+@Unique(['slug'])
 export class Organization {
   @PrimaryGeneratedColumn('uuid')
     id!: string;
@@ -16,6 +18,9 @@ export class Organization {
   @Column('varchar', { length: 255 })
     name!: string;
 
+  @Column('varchar')
+    slug!: string;
+
   @CreateDateColumn()
     createdAt!: Date;
 

packages/backend/src/resolvers.ts

@@ -29,8 +29,8 @@ export const createResolvers = async (db: Database, app: OAuthApp, service: Serv
         return service.getProjectById(projectId);
       },
 
-      projectsInOrganization: async (_: any, { organizationId }: {organizationId: string }, context: any) => {
-        return service.getProjectsInOrganization(context.userId, organizationId);
+      projectsInOrganization: async (_: any, { organizationSlug }: {organizationSlug: string }, context: any) => {
+        return service.getProjectsInOrganization(context.userId, organizationSlug);
       },
 
       deployments: async (_: any, { projectId }: { projectId: string }) => {
@@ -130,9 +130,9 @@ export const createResolvers = async (db: Database, app: OAuthApp, service: Serv
         }
       },
 
-      addProject: async (_: any, { data }: { data: DeepPartial<Project> }, context: any) => {
+      addProject: async (_: any, { organizationSlug, data }: { organizationSlug: string, data: DeepPartial<Project> }, context: any) => {
         try {
-          return service.addProject(context.userId, data);
+          return service.addProject(context.userId, organizationSlug, data);
         } catch (err) {
           log(err);
         }

packages/backend/src/schema.gql

@@ -41,6 +41,7 @@ type User {
 type Organization {
   id: String!
   name: String!
+  slug: String!
   projects: [Project!]
   createdAt: String!
   updatedAt: String!
@@ -129,7 +130,6 @@ input AddEnvironmentVariableInput {
 }
 
 input AddProjectInput {
-  organizationId: String!
   name: String!
   repository: String!
   prodBranch: String!
@@ -176,7 +176,7 @@ type Query {
   user: User!
   organizations: [Organization!]
   projects: [Project!]
-  projectsInOrganization(organizationId: String!): [Project!]
+  projectsInOrganization(organizationSlug: String!): [Project!]
   project(projectId: String!): Project
   deployments(projectId: String!): [Deployment!]
   environmentVariables(projectId: String!): [EnvironmentVariable!]
@@ -193,7 +193,7 @@ type Mutation {
   updateEnvironmentVariable(environmentVariableId: String!, data: UpdateEnvironmentVariableInput!): Boolean!
   removeEnvironmentVariable(environmentVariableId: String!): Boolean!
   updateDeploymentToProd(deploymentId: String!): Boolean!
-  addProject(data: AddProjectInput): Project!
+  addProject(organizationSlug: String!, data: AddProjectInput): Project!
   updateProject(projectId: String!, projectDetails: UpdateProjectInput): Boolean!
   redeployToProd(deploymentId: String!): Boolean!
   deleteProject(projectId: String!): Boolean!

packages/backend/src/service.ts

@@ -40,8 +40,8 @@ export class Service {
     return dbProject;
   }
 
-  async getProjectsInOrganization (userId:string, organizationId: string): Promise<Project[]> {
-    const dbProjects = await this.db.getProjectsInOrganization(userId, organizationId);
+  async getProjectsInOrganization (userId:string, organizationSlug: string): Promise<Project[]> {
+    const dbProjects = await this.db.getProjectsInOrganization(userId, organizationSlug);
     return dbProjects;
   }
 
@@ -182,8 +182,17 @@ export class Service {
     return updateResult;
   }
 
-  async addProject (userId: string, data: DeepPartial<Project>): Promise<Project | undefined> {
-    return this.db.addProject(userId, data);
+  async addProject (userId: string, organizationSlug: string, data: DeepPartial<Project>): Promise<Project | undefined> {
+    const organization = await this.db.getOrganization({
+      where: {
+        slug: organizationSlug
+      }
+    });
+    if (!organization) {
+      throw new Error('Organization does not exist');
+    }
+
+    return this.db.addProject(userId, organization.id, data);
   }
 
   async updateProject (projectId: string, data: DeepPartial<Project>): Promise<boolean> {

packages/backend/test/fixtures/organizations.json

@@ -1,8 +1,10 @@
 [
   {
-    "name": "Snowball Tools"
+    "name": "Snowball Tools",
+    "slug": "snowball-tools"
   },
   {
-    "name": "AirFoil"
+    "name": "AirFoil",
+    "slug": "airfoil"
   }
 ]

packages/frontend/src/App.tsx

@@ -1,26 +1,28 @@
 import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import DashboardLayout from './layouts/Dashboard';
-import Home from './pages/index';
-import Settings from './pages/Settings';
+import OrgSlug from './pages/OrgSlug';
+import Projects from './pages/org-slug';
+import Settings from './pages/org-slug/Settings';
 import {
   projectsRoutesWithSearch,
   projectsRoutesWithoutSearch,
-} from './pages/projects/routes';
+} from './pages/org-slug/projects/routes';
 import ProjectSearchLayout from './layouts/ProjectSearch';
 import { OctokitProvider } from './context/OctokitContext';
+import Index from './pages';
 
 const router = createBrowserRouter([
   {
-    element: <DashboardLayout />,
+    path: ':orgSlug',
+    element: <OrgSlug />,
     children: [
       {
         element: <ProjectSearchLayout />,
         children: [
           {
-            path: '/',
-            element: <Home />,
+            path: '',
+            element: <Projects />,
           },
           {
             path: 'projects',
@@ -38,6 +40,10 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: '/',
+    element: <Index />,
+  },
 ]);
 
 function App() {

packages/frontend/src/components/Sidebar.tsx

@@ -1,30 +1,66 @@
-import React from 'react';
-import { Link, NavLink } from 'react-router-dom';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Link, NavLink, useNavigate, useParams } from 'react-router-dom';
 import { Organization } from 'gql-client';
 
-import { Card, CardBody, Typography } from '@material-tailwind/react';
+import { Typography, Option } from '@material-tailwind/react';
+
+import { useGQLClient } from '../context/GQLClientContext';
+import AsyncSelect from './shared/AsyncSelect';
+
+const Sidebar = () => {
+  const { orgSlug } = useParams();
+  const navigate = useNavigate();
+  const client = useGQLClient();
+
+  const [selectedOrgSlug, setSelectedOrgSlug] = useState(orgSlug);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+
+  const fetchUserOrganizations = useCallback(async () => {
+    const { organizations } = await client.getOrganizations();
+    setOrganizations(organizations);
+  }, [orgSlug]);
+
+  useEffect(() => {
+    fetchUserOrganizations();
+    setSelectedOrgSlug(orgSlug);
+  }, [orgSlug]);
 
-const Sidebar = ({ organization }: { organization: Organization }) => {
   return (
     <div className="flex flex-col h-full p-4">
       <div className="grow">
         <div>
-          <Link to="/">
+          <Link to={`/${orgSlug}`}>
             <h3 className="text-black text-2xl">Snowball</h3>
           </Link>
         </div>
-        <Card className="-ml-1 my-2">
-          <CardBody className="p-1 py-2 flex gap-2">
-            <div>^</div>
-            <div>
-              <Typography>{organization.name}</Typography>
-              <Typography>Organization</Typography>
+        <AsyncSelect
+          className="bg-white py-2"
+          value={selectedOrgSlug}
+          onChange={(value) => {
+            setSelectedOrgSlug(value!);
+            navigate(`/${value}`);
+          }}
+          selected={(_, index) => (
+            <div className="flex gap-2">
+              <div>^</div>
+              <div>
+                <span>{organizations[index!]?.name}</span>
+                <Typography>Organization</Typography>
+              </div>
             </div>
-          </CardBody>
-        </Card>
+          )}
+        >
+          {/* TODO: Show label organization and manage in option */}
+          {organizations.map((org) => (
+            <Option key={org.id} value={org.slug}>
+              ^ {org.name}
+              {org.slug === selectedOrgSlug && <p className="float-right">^</p>}
+            </Option>
+          ))}
+        </AsyncSelect>
         <div>
           <NavLink
-            to="/"
+            to={`/${orgSlug}`}
             className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
           >
             <Typography>Projects</Typography>
@@ -32,7 +68,7 @@ const Sidebar = ({ organization }: { organization: Organization }) => {
         </div>
         <div>
           <NavLink
-            to="/settings"
+            to={`/${orgSlug}/settings`}
             className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
           >
             <Typography>Settings</Typography>

packages/frontend/src/components/projects/create/Deploy.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { Button, Typography } from '@material-tailwind/react';
 
@@ -11,9 +11,10 @@ const Deploy = () => {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(!open);
   const navigate = useNavigate();
+  const { orgSlug } = useParams();
 
   const handleCancel = useCallback(() => {
-    navigate('/projects/create');
+    navigate(`/${orgSlug}/projects/create`);
   }, []);
 
   return (

packages/frontend/src/components/projects/create/TemplateCard.tsx

@@ -34,7 +34,7 @@ const TemplateCard: React.FC<TemplateCardProps> = ({
   isGitAuth,
 }) => {
   return isGitAuth ? (
-    <Link to="/projects/create/template">
+    <Link to="template">
       <CardDetails framework={framework} />
     </Link>
   ) : (

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { Environment, Project, Domain, DeploymentStatus } from 'gql-client';
 
 import {
   Menu,
@@ -9,14 +11,12 @@ import {
   Chip,
   ChipProps,
 } from '@material-tailwind/react';
-import toast from 'react-hot-toast';
-import { Environment, Project, Domain } from 'gql-client';
 
 import { relativeTimeMs } from '../../../../utils/time';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
 import AssignDomainDialog from './AssignDomainDialog';
-import { DeploymentDetails, Status } from '../../../../types/project';
+import { DeploymentDetails } from '../../../../types/project';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 
 interface DeployDetailsCardProps {
@@ -27,10 +27,10 @@ interface DeployDetailsCardProps {
   prodBranchDomains: Domain[];
 }
 
-const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = {
-  [Status.BUILDING]: 'blue',
-  [Status.READY]: 'green',
-  [Status.ERROR]: 'red',
+const STATUS_COLORS: { [key in DeploymentStatus]: ChipProps['color'] } = {
+  [DeploymentStatus.Building]: 'blue',
+  [DeploymentStatus.Ready]: 'green',
+  [DeploymentStatus.Error]: 'red',
 };
 
 const DeploymentDetailsCard = ({
@@ -125,14 +125,12 @@ const DeploymentDetailsCard = ({
             >
               ^ Assign domain
             </MenuItem>
-            {!(deployment.environment === Environment.Production) && (
-              <MenuItem
-                onClick={() => setChangeToProduction(!changeToProduction)}
-              >
-                ^ Change to production
-              </MenuItem>
-            )}
-
+            <MenuItem
+              onClick={() => setChangeToProduction(!changeToProduction)}
+              disabled={!(deployment.environment !== Environment.Production)}
+            >
+              ^ Change to production
+            </MenuItem>
             <hr className="my-3" />
             <MenuItem
               onClick={() => setRedeployToProduction(!redeployToProduction)}
@@ -145,14 +143,15 @@ const DeploymentDetailsCard = ({
             >
               ^ Redeploy to production
             </MenuItem>
-            {deployment.environment === Environment.Production && (
-              <MenuItem
-                onClick={() => setRollbackDeployment(!rollbackDeployment)}
-                disabled={deployment.isCurrent}
-              >
-                ^ Rollback to this version
-              </MenuItem>
-            )}
+            <MenuItem
+              onClick={() => setRollbackDeployment(!rollbackDeployment)}
+              disabled={
+                deployment.isCurrent ||
+                deployment.environment !== Environment.Production
+              }
+            >
+              ^ Rollback to this version
+            </MenuItem>
           </MenuList>
         </Menu>
       </div>

packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { Project } from 'gql-client';
@@ -26,6 +26,7 @@ const DeleteProjectDialog = ({
   handleOpen,
   project,
 }: DeleteProjectDialogProp) => {
+  const { orgSlug } = useParams();
   const navigate = useNavigate();
   const client = useGQLClient();
 
@@ -43,7 +44,7 @@ const DeleteProjectDialog = ({
     const { deleteProject } = await client.deleteProject(project.id);
 
     if (deleteProject) {
-      navigate('/');
+      navigate(`/${orgSlug}`);
     } else {
       toast.error('Project not deleted');
     }

packages/frontend/src/layouts/Dashboard.tsx

@@ -1,44 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Organization } from 'gql-client';
-
-import { Outlet } from 'react-router-dom';
-
-import Sidebar from '../components/Sidebar';
-import { useGQLClient } from '../context/GQLClientContext';
-
-// TODO: Implement organization switcher
-// TODO: Projects get organization details through routes instead of context
-const USER_ORGANIZATION_INDEX = 0;
-
-const Dashboard = () => {
-  const client = useGQLClient();
-  const [organizations, setOrganizations] = useState<Organization[]>([]);
-
-  const fetchUserOrganizations = useCallback(async () => {
-    const { organizations } = await client.getOrganizations();
-    setOrganizations(organizations);
-  }, []);
-
-  useEffect(() => {
-    fetchUserOrganizations();
-  }, []);
-
-  return (
-    <div className="grid grid-cols-5 h-screen bg-light-blue-50">
-      {organizations.length > 0 && (
-        <>
-          <div className="h-full">
-            <Sidebar organization={organizations[USER_ORGANIZATION_INDEX]} />
-          </div>
-          <div className="col-span-4 h-full p-3 overflow-y-hidden">
-            <div className="bg-white rounded-3xl h-full overflow-y-auto">
-              <Outlet context={organizations[USER_ORGANIZATION_INDEX]} />
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default Dashboard;

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Outlet, useNavigate, useOutletContext } from 'react-router-dom';
-import { Organization } from 'gql-client';
+import { Outlet, useNavigate } from 'react-router-dom';
 
 import { IconButton, Typography } from '@material-tailwind/react';
 
@@ -9,7 +8,7 @@ import ProjectSearchBar from '../components/projects/ProjectSearchBar';
 
 const ProjectSearch = () => {
   const navigate = useNavigate();
-  const organization = useOutletContext<Organization>();
+
   return (
     <div>
       <div className="sticky top-0 bg-white z-30">
@@ -17,7 +16,9 @@ const ProjectSearch = () => {
           <div className="grow mr-2">
             <ProjectSearchBar
               onChange={(project) => {
-                navigate(`/projects/${project.id}`);
+                navigate(
+                  `/${project.organization.slug}/projects/${project.id}`,
+                );
               }}
             />
           </div>
@@ -34,7 +35,7 @@ const ProjectSearch = () => {
         <HorizontalLine />
       </div>
       <div className="z-0">
-        <Outlet context={organization} />
+        <Outlet />
       </div>
     </div>
   );

packages/frontend/src/pages/OrgSlug.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+import Sidebar from '../components/Sidebar';
+
+const OrgSlug = () => {
+  return (
+    <div className="grid grid-cols-5 h-screen bg-light-blue-50">
+      <>
+        <div className="h-full">
+          <Sidebar />
+        </div>
+        <div className="col-span-4 h-full p-3 overflow-y-hidden">
+          <div className="bg-white rounded-3xl h-full overflow-y-auto">
+            <Outlet />
+          </div>
+        </div>
+      </>
+    </div>
+  );
+};
+
+export default OrgSlug;

packages/frontend/src/pages/index.tsx

@@ -1,69 +1,31 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Link, useOutletContext } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
+import { useGQLClient } from '../context/GQLClientContext';
 import { Organization } from 'gql-client';
 
-import { Button, Typography, Chip } from '@material-tailwind/react';
-
-import ProjectCard from '../components/projects/ProjectCard';
-import { useGQLClient } from '../context/GQLClientContext';
-import { ProjectDetails } from '../types/project';
-import { COMMIT_DETAILS } from '../constants';
-
-const Projects = () => {
+const Index = () => {
   const client = useGQLClient();
-  const organization = useOutletContext<Organization>();
+  const [organization, setOrganization] = useState<Organization>();
 
-  const [projects, setProjects] = useState<ProjectDetails[]>([]);
-
-  const fetchProjects = useCallback(async () => {
-    const { projectsInOrganization } = await client.getProjectsInOrganization(
-      organization.id,
-    );
-
-    const updatedProjects = projectsInOrganization.map((project) => {
-      return {
-        ...project,
-        // TODO: Populate from github API
-        latestCommit: COMMIT_DETAILS,
-      };
-    });
-
-    setProjects(updatedProjects);
+  const fetchUserOrganizations = useCallback(async () => {
+    const { organizations } = await client.getOrganizations();
+    // By default information of first organization displayed
+    setOrganization(organizations[0]);
   }, []);
 
   useEffect(() => {
-    fetchProjects();
+    fetchUserOrganizations();
   }, []);
 
   return (
-    <div>
-      <div className="flex p-5">
-        <div className="grow">
-          <div className="flex gap-2 items-center">
-            <Typography variant="h4">Projects</Typography>
-            <Chip
-              className="bg-gray-300 rounded-full static"
-              value={projects.length}
-              size="sm"
-            />
-          </div>
-        </div>
-        <div>
-          <Link to="/projects/create">
-            <Button className="rounded-full" color="blue">
-              Create project
-            </Button>
-          </Link>
-        </div>
-      </div>
-      <div className="grid grid-cols-3 gap-5 p-5">
-        {projects.length !== 0 &&
-          projects.map((project, key) => {
-            return <ProjectCard project={project} key={key} />;
-          })}
-      </div>
-    </div>
+    <>
+      {Boolean(organization) ? (
+        <Navigate to={organization!.slug} />
+      ) : (
+        <>Loading</>
+      )}
+    </>
   );
 };
 
-export default Projects;
+export default Index;

packages/frontend/src/pages/org-slug/index.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+import { Button, Typography, Chip } from '@material-tailwind/react';
+
+import ProjectCard from '../../components/projects/ProjectCard';
+import { useGQLClient } from '../../context/GQLClientContext';
+import { ProjectDetails } from '../../types/project';
+import { COMMIT_DETAILS } from '../../constants';
+
+const Projects = () => {
+  const client = useGQLClient();
+  const { orgSlug } = useParams();
+  const [projects, setProjects] = useState<ProjectDetails[]>([]);
+
+  const fetchProjects = useCallback(async () => {
+    const { projectsInOrganization } = await client.getProjectsInOrganization(
+      orgSlug!,
+    );
+
+    const updatedProjects = projectsInOrganization.map((project) => {
+      return {
+        ...project,
+        // TODO: Populate from github API
+        latestCommit: COMMIT_DETAILS,
+      };
+    });
+
+    setProjects(updatedProjects);
+  }, [orgSlug]);
+
+  useEffect(() => {
+    fetchProjects();
+  }, [orgSlug]);
+
+  return (
+    <div>
+      <div className="flex p-5">
+        <div className="grow">
+          <div className="flex gap-2 items-center">
+            <Typography variant="h4">Projects</Typography>
+            <Chip
+              className="bg-gray-300 rounded-full static"
+              value={projects.length}
+              size="sm"
+            />
+          </div>
+        </div>
+        <div>
+          <Link to="projects/create">
+            <Button className="rounded-full" color="blue">
+              Create project
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-5 p-5">
+        {projects.length !== 0 &&
+          projects.map((project, key) => {
+            return <ProjectCard project={project} key={key} />;
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default Projects;

packages/frontend/src/pages/org-slug/projects/Create.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Outlet, Link } from 'react-router-dom';
+import { Outlet, Link, useParams } from 'react-router-dom';
 
 import { IconButton } from '@material-tailwind/react';
 
-import HorizontalLine from '../../components/HorizontalLine';
+import HorizontalLine from '../../../components/HorizontalLine';
 
 const CreateProject = () => {
+  const { orgSlug } = useParams();
   return (
     <div className="h-full">
       <div className="flex p-4 items-center">
@@ -13,7 +14,7 @@ const CreateProject = () => {
           <h3 className="text-gray-750 text-2xl">Create new project</h3>
         </div>
         <div>
-          <Link to="/">
+          <Link to={`/${orgSlug}`}>
             <IconButton className="rounded-full" variant="outlined">
               X
             </IconButton>

packages/frontend/src/pages/org-slug/projects/Id.tsx

@@ -4,9 +4,9 @@ import { Project as ProjectType } from 'gql-client';
 
 import { Button, Typography } from '@material-tailwind/react';
 
-import HorizontalLine from '../../components/HorizontalLine';
-import ProjectTabs from '../../components/projects/project/ProjectTabs';
-import { useGQLClient } from '../../context/GQLClientContext';
+import HorizontalLine from '../../../components/HorizontalLine';
+import ProjectTabs from '../../../components/projects/project/ProjectTabs';
+import { useGQLClient } from '../../../context/GQLClientContext';
 
 const Id = () => {
   const { id } = useParams();

packages/frontend/src/pages/org-slug/projects/create/Import.tsx

@@ -1,15 +1,16 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import { Button } from '@material-tailwind/react';
 
-import { useOctokit } from '../../../context/OctokitContext';
-import { GitRepositoryDetails } from '../../../types/project';
-import Deploy from '../../../components/projects/create/Deploy';
-import { useGQLClient } from '../../../context/GQLClientContext';
+import { useOctokit } from '../../../../context/OctokitContext';
+import { GitRepositoryDetails } from '../../../../types/project';
+import Deploy from '../../../../components/projects/create/Deploy';
+import { useGQLClient } from '../../../../context/GQLClientContext';
 
 const Import = () => {
   const [searchParams] = useSearchParams();
+  const { orgSlug } = useParams();
   const navigate = useNavigate();
   const { octokit } = useOctokit();
   const client = useGQLClient();
@@ -37,16 +38,14 @@ const Import = () => {
       return;
     }
 
-    const { addProject } = await client.addProject({
+    const { addProject } = await client.addProject(orgSlug!, {
       // TODO: Implement form for setting project name
       name: `${gitRepo.owner!.login}-${gitRepo.name}`,
-      // TODO: Get organization id from context or URL
-      organizationId: String(1),
       prodBranch: gitRepo.default_branch ?? 'main',
       repository: gitRepo.full_name,
     });
 
-    navigate(`/projects/create/success/${addProject.id}`);
+    navigate(`/${orgSlug}/projects/create/success/${addProject.id}`);
   }, [client, gitRepo]);
 
   return (

packages/frontend/src/pages/org-slug/projects/create/Template.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
-import Stepper from '../../../components/Stepper';
+import Stepper from '../../../../components/Stepper';
 
 const STEPPER_VALUES = [
   { step: 1, route: '/projects/create/template', label: 'Create repository' },

packages/frontend/src/pages/org-slug/projects/create/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import templateDetails from '../../../assets/templates.json';
-import TemplateCard from '../../../components/projects/create/TemplateCard';
-import RepositoryList from '../../../components/projects/create/RepositoryList';
-import ConnectAccount from '../../../components/projects/create/ConnectAccount';
-import { useOctokit } from '../../../context/OctokitContext';
+import templateDetails from '../../../../assets/templates.json';
+import TemplateCard from '../../../../components/projects/create/TemplateCard';
+import RepositoryList from '../../../../components/projects/create/RepositoryList';
+import ConnectAccount from '../../../../components/projects/create/ConnectAccount';
+import { useOctokit } from '../../../../context/OctokitContext';
 
 const NewProject = () => {
   const { octokit, updateAuth } = useOctokit();

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -4,7 +4,7 @@ import { Link, useParams } from 'react-router-dom';
 import { Button } from '@material-tailwind/react';
 
 const Id = () => {
-  const { id } = useParams();
+  const { id, orgSlug } = useParams();
   return (
     <div className="flex justify-center">
       <div className="w-1/2">
@@ -57,7 +57,7 @@ const Id = () => {
             </Link>
           </div>
           <div>
-            <Link to={`/projects/${id}`}>
+            <Link to={`/${orgSlug}/projects/${id}`}>
               <Button className="rounded-full" variant="gradient" color="blue">
                 View project
               </Button>

packages/frontend/src/pages/org-slug/projects/create/template/Deploy.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import DeployComponent from '../../../../components/projects/create/Deploy';
+import DeployComponent from '../../../../../components/projects/create/Deploy';
 
 const Deploy = () => {
   return <DeployComponent />;

packages/frontend/src/pages/org-slug/projects/create/template/index.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { Typography } from '@material-tailwind/react';
 
-import Dropdown from '../../../../components/Dropdown';
+import Dropdown from '../../../../../components/Dropdown';
 
 const USER_OPTIONS = [
   { value: 'saugatyadav1', label: 'saugatyadav1' },
@@ -93,7 +93,7 @@ const CreateRepo = () => {
         </label>
       </div>
       <div className="mb-2">
-        <Link to={'/projects/create/template/deploy'}>
+        <Link to="deploy">
           <button className="bg-blue-500 rounded-xl p-2" type="submit">
             Deploy ^
           </button>

packages/frontend/src/pages/org-slug/projects/id/domain/add/Config.tsx

@@ -4,10 +4,10 @@ import toast from 'react-hot-toast';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 import { Typography, Alert, Button } from '@material-tailwind/react';
 
-import { useGQLClient } from '../../../../../context/GQLClientContext';
+import { useGQLClient } from '../../../../../../context/GQLClientContext';
 
 const Config = () => {
-  const { id } = useParams();
+  const { id, orgSlug } = useParams();
   const client = useGQLClient();
   const [searchParams] = useSearchParams();
   const primaryDomainName = searchParams.get('name');
@@ -70,8 +70,7 @@ const Config = () => {
         <i>^</i>It can take up to 48 hours for these updates to reflect
         globally.
       </Alert>
-
-      <Link to={`/projects/${id}`}>
+      <Link to={`/${orgSlug}/projects/${id}`}>
         <Button
           className="w-fit"
           color="blue"

packages/frontend/src/pages/org-slug/projects/id/domain/add/index.tsx

@@ -2,10 +2,10 @@ import React, { useMemo } from 'react';
 import { useParams, useLocation, Outlet, Link } from 'react-router-dom';
 import { Typography, IconButton } from '@material-tailwind/react';
 
-import Stepper from '../../../../../components/Stepper';
+import Stepper from '../../../../../../components/Stepper';
 
 const AddDomain = () => {
-  const { id } = useParams();
+  const { id, orgSlug } = useParams();
   const location = useLocation();
 
   const stepperValues = [
@@ -31,7 +31,7 @@ const AddDomain = () => {
     <div className="p-4">
       <div className="flex justify-between">
         <Typography variant="h3">Add Domain</Typography>
-        <Link to={`/projects/${id}`}>
+        <Link to={`/${orgSlug}/projects/${id}`}>
           <IconButton className="rounded-full" variant="outlined">
             X
           </IconButton>

packages/frontend/src/pages/org-slug/projects/id/domain/add/routes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Config from './Config';
-import SetupDomain from '../../../../../components/projects/project/settings/SetupDomain';
+import SetupDomain from '../../../../../../components/projects/project/settings/SetupDomain';
 
 export const addDomainRoutes = [
   {

packages/frontend/src/types/project.ts

@@ -2,10 +2,6 @@ import { Project, Deployment } from 'gql-client';
 
 export interface ProjectDetails extends Project {
   latestCommit: Commit;
-
-  // TODO: Move out of project
-  repositories?: RepositoryDetails[];
-  repositoryId?: number;
 }
 
 export interface DeploymentDetails extends Deployment {
@@ -13,12 +9,6 @@ export interface DeploymentDetails extends Deployment {
   author: string;
 }
 
-export enum Status {
-  BUILDING = 'Building',
-  READY = 'Ready',
-  ERROR = 'Error',
-}
-
 export interface GitOrgDetails {
   id: number;
   login: string;
@@ -65,27 +55,6 @@ export enum GitSelect {
   NONE = 'none',
 }
 
-export enum DomainStatus {
-  LIVE = 'Live',
-  PENDING = 'Pending',
-}
-
-export interface DomainDetails {
-  id: string;
-  projectid: string;
-  name: string;
-  status: DomainStatus;
-  record: {
-    type: string;
-    name: string;
-    value: string;
-  };
-}
-
-export interface ProjectSearchOutletContext {
-  projects: ProjectDetails[];
-}
-
 export interface Commit {
   message: string;
   createdAt: string;

packages/gql-client/src/client.ts

@@ -50,11 +50,11 @@ export class GQLClient {
     return data;
   }
 
-  async getProjectsInOrganization (organizationId: string) : Promise<GetProjectsInOrganizationResponse> {
+  async getProjectsInOrganization (organizationSlug: string) : Promise<GetProjectsInOrganizationResponse> {
     const { data } = await this.client.query({
       query: getProjectsInOrganization,
       variables: {
-        organizationId
+        organizationSlug
       }
     });
 
@@ -194,10 +194,11 @@ export class GQLClient {
     return data;
   }
 
-  async addProject (data: AddProjectInput): Promise<AddProjectResponse> {
+  async addProject (organizationSlug: string, data: AddProjectInput): Promise<AddProjectResponse> {
     const result = await this.client.mutate({
       mutation: addProject,
       variables: {
+        organizationSlug,
         data
       }
     });

packages/gql-client/src/mutations.ts

@@ -43,8 +43,8 @@ mutation ($deploymentId: String!) {
 `;
 
 export const addProject = gql`
-mutation ($data: AddProjectInput) {
-  addProject(data: $data) {
+mutation ($organizationSlug: String!, $data: AddProjectInput) {
+  addProject(organizationSlug: $organizationSlug, data: $data) {
     id
   }
 }`;

packages/gql-client/src/queries.ts

@@ -65,8 +65,8 @@ query ($projectId: String!) {
 `;
 
 export const getProjectsInOrganization = gql`
-query ($organizationId: String!) {
-  projectsInOrganization(organizationId: $organizationId) {
+query ($organizationSlug: String!) {
+  projectsInOrganization(organizationSlug: $organizationSlug) {
     id
     name
     createdAt
@@ -106,6 +106,7 @@ query {
   organizations {
     id
     name
+    slug
     createdAt
     updatedAt
   }
@@ -191,6 +192,7 @@ query ($searchText: String!) {
     organization {
       id
       name
+      slug
       createdAt
       updatedAt
     }

packages/gql-client/src/types.ts

@@ -109,6 +109,7 @@ export type OrganizationProject = {
 export type Organization = {
   id: string
   name: string
+  slug: string
   projects: OrganizationProject[]
   createdAt: string
   updatedAt: string
@@ -240,7 +241,6 @@ export type DeleteDomainResponse = {
 }
 
 export type AddProjectInput = {
-  organizationId: string;
   name: string;
   repository: string;
   prodBranch: string;