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/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;