Implement routes for project settings tab (#64)

* Add routes to settings tab panel * Refactor code to move settings tab components to pages * Rename registry fields in project and deployment entity * Use kebab case for routes --------- Co-authored-by: neeraj <neeraj.rtly@gmail.com>
2024-02-12 15:18:00 +05:30 · 2024-02-12 15:18:00 +05:30 · 76dfd3bb76
commit 76dfd3bb76
parent 559e0f8934
18 changed files with 215 additions and 198 deletions
--- a/packages/backend/src/entity/Deployment.ts
+++ b/packages/backend/src/entity/Deployment.ts
@ -63,10 +63,10 @@ export class Deployment {
    url!: string;

  @Column('varchar')
-    recordId!: string;
+    registryRecordId!: string;

  @Column('simple-json')
-    recordData!: ApplicationRecord;
+    registryRecordData!: ApplicationRecord;

  @Column({
    enum: Environment
--- a/packages/backend/src/entity/Project.ts
+++ b/packages/backend/src/entity/Project.ts
@ -56,10 +56,10 @@ export class Project {
    prodBranch!: string;

  @Column('varchar', { nullable: true })
-    recordId!: string | null;
+    registryRecordId!: string | null;

  @Column('simple-json', { nullable: true })
-    recordData!: ApplicationDeploymentRequest | null;
+    registryRecordData!: ApplicationDeploymentRequest | null;

  @Column('text', { default: '' })
    description!: string;
--- a/packages/backend/src/registry.ts
+++ b/packages/backend/src/registry.ts
@ -13,6 +13,7 @@ const APP_RECORD_TYPE = 'ApplicationRecord';
 const DEPLOYMENT_RECORD_TYPE = 'ApplicationDeploymentRequest';
 const AUTHORITY_NAME = 'snowball';

+// TODO: Move registry code to laconic-sdk/watcher-ts
 export class Registry {
  private registry: LaconicRegistry;
  private registryConfig: RegistryConfig;
@ -22,7 +23,7 @@ export class Registry {
    this.registry = new LaconicRegistry(registryConfig.gqlEndpoint, registryConfig.restEndpoint, registryConfig.chainId);
  }

-  async createApplicationRecord (data: { recordName: string, appType: string }): Promise<{recordId: string, recordData: ApplicationRecord}> {
+  async createApplicationRecord (data: { recordName: string, appType: string }): Promise<{registryRecordId: string, registryRecordData: ApplicationRecord}> {
    // TODO: Get record name from repo package.json name
    const recordName = data.recordName;

@ -77,10 +78,10 @@ export class Registry {
    await this.registry.setName({ cid: result.data.id, crn: `${crn}@${applicationRecord.app_version}` }, this.registryConfig.privateKey, this.registryConfig.fee);
    await this.registry.setName({ cid: result.data.id, crn: `${crn}@${applicationRecord.repository_ref}` }, this.registryConfig.privateKey, this.registryConfig.fee);

-    return { recordId: result.data.id, recordData: applicationRecord };
+    return { registryRecordId: result.data.id, registryRecordData: applicationRecord };
  }

-  async createApplicationDeploymentRequest (data: { appName: string }): Promise<{recordId: string, recordData: ApplicationDeploymentRequest}> {
+  async createApplicationDeploymentRequest (data: { appName: string }): Promise<{registryRecordId: string, registryRecordData: ApplicationDeploymentRequest}> {
    const crn = this.getCrn(data.appName);
    const records = await this.registry.resolveNames([crn]);
    const applicationRecord = records[0];
@ -124,7 +125,7 @@ export class Registry {
    log(`Application deployment request record published: ${result.data.id}`);
    log('Application deployment request data:', applicationDeploymentRequest);

-    return { recordId: result.data.id, recordData: applicationDeploymentRequest };
+    return { registryRecordId: result.data.id, registryRecordData: applicationDeploymentRequest };
  }

  getCrn (appName: string): string {
--- a/packages/backend/src/service.ts
+++ b/packages/backend/src/service.ts
@ -214,7 +214,7 @@ export class Service {
  }

  async createDeployment (userId: string, data: DeepPartial<Deployment>): Promise<Deployment> {
-    const { recordId, recordData } = await this.registry.createApplicationRecord({
+    const { registryRecordId, registryRecordData } = await this.registry.createApplicationRecord({
      recordName: data.project?.name ?? '',
      appType: data.project?.template ?? ''
    });
@ -226,15 +226,15 @@ export class Service {
      environment: data.environment,
      isCurrent: data.isCurrent,
      status: DeploymentStatus.Building,
-      recordId,
-      recordData,
+      registryRecordId,
+      registryRecordData,
      domain: data.domain,
      createdBy: Object.assign(new User(), {
        id: userId
      })
    });

-    log(`Application record ${recordId} published for deployment ${newDeployement.id}`);
+    log(`Application record ${registryRecordId} published for deployment ${newDeployement.id}`);
    return newDeployement;
  }

@ -262,10 +262,10 @@ export class Service {
        domain: null
      });

-    const { recordId, recordData } = await this.registry.createApplicationDeploymentRequest({ appName: project.name });
+    const { registryRecordId, registryRecordData } = await this.registry.createApplicationDeploymentRequest({ appName: project.name });
    await this.db.updateProjectById(project.id, {
-      recordId,
-      recordData
+      registryRecordId,
+      registryRecordData
    });

    return project;
--- a/packages/backend/test/fixtures/deployments.json
+++ b/packages/backend/test/fixtures/deployments.json
@ -7,8 +7,8 @@
    "status": "Building",
    "environment": "Production",
    "isCurrent": true,
-    "recordId": "qbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "qbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "main",
    "commitHash": "testXyz",
    "url": "testProject-ffhae3zq.snowball.xyz"
@ -21,8 +21,8 @@
    "status": "Ready",
    "environment": "Preview",
    "isCurrent": false,
-    "recordId": "wbafyreihvzya6ovp4yfpkqnddkui2iw7thbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "wbafyreihvzya6ovp4yfpkqnddkui2iw7thbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "test",
    "commitHash": "testXyz",
    "url": "testProject-vehagei8.snowball.xyz"
@ -35,8 +35,8 @@
    "status": "Error",
    "environment": "Development",
    "isCurrent": false,
-    "recordId": "ebafyreihvzya6ovp4yfpkqnddkui2iw7t6bhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "ebafyreihvzya6ovp4yfpkqnddkui2iw7t6bhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "test",
    "commitHash": "testXyz",
    "url": "testProject-qmgekyte.snowball.xyz"
@ -49,8 +49,8 @@
    "status": "Ready",
    "environment": "Production",
    "isCurrent": false,
-    "recordId": "rbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhw74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "rbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhw74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "prod",
    "commitHash": "testXyz",
    "url": "testProject-f8wsyim6.snowball.xyz"
@ -63,8 +63,8 @@
    "status": "Building",
    "environment": "Production",
    "isCurrent": true,
-    "recordId": "tbafyreihvzya6ovp4yfpqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "tbafyreihvzya6ovp4yfpqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "main",
    "commitHash": "testXyz",
    "url": "testProject-2-eO8cckxk.snowball.xyz"
@ -77,8 +77,8 @@
    "status": "Ready",
    "environment": "Preview",
    "isCurrent": false,
-    "recordId": "ybafyreihvzya6ovp4yfpkqnddkui2iw7t6bhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "ybafyreihvzya6ovp4yfpkqnddkui2iw7t6bhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "test",
    "commitHash": "testXyz",
    "url": "testProject-2-yaq0t5yw.snowball.xyz"
@ -91,8 +91,8 @@
    "status": "Error",
    "environment": "Development",
    "isCurrent": false,
-    "recordId": "ubafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvfhrowoi",
-    "recordData": {},
+    "registryRecordId": "ubafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvfhrowoi",
+    "registryRecordData": {},
    "branch": "test",
    "commitHash": "testXyz",
    "url": "testProject-2-hwwr6sbx.snowball.xyz"
@ -105,8 +105,8 @@
    "status": "Building",
    "environment": "Production",
    "isCurrent": true,
-    "recordId": "ibayreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "ibayreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "main",
    "commitHash": "testXyz",
    "url": "iglootools-ndxje48a.snowball.xyz"
@ -119,8 +119,8 @@
    "status": "Ready",
    "environment": "Preview",
    "isCurrent": false,
-    "recordId": "obafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "obafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "branch": "test",
    "commitHash": "testXyz",
    "url": "iglootools-gtgpgvei.snowball.xyz"
@ -133,8 +133,8 @@
    "status": "Error",
    "environment": "Development",
    "isCurrent": false,
-    "recordId": "pbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowo",
-    "recordData": {},
+    "registryRecordId": "pbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowo",
+    "registryRecordData": {},
    "branch": "test",
    "commitHash": "testXyz",
    "url": "iglootools-b4bpthjr.snowball.xyz"
--- a/packages/backend/test/fixtures/projects.json
+++ b/packages/backend/test/fixtures/projects.json
@ -10,8 +10,8 @@
    "framework": "test",
    "webhooks": [],
    "icon": "",
-    "recordId": "hbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "hbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "subDomain": "testProject.snowball.xyz"
  },
  {
@ -25,8 +25,8 @@
    "framework": "test-2",
    "webhooks": [],
    "icon": "",
-    "recordId": "gbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "gbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "subDomain": "testProject-2.snowball.xyz"
  },
  {
@ -40,8 +40,8 @@
    "framework": "test-3",
    "webhooks": [],
    "icon": "",
-    "recordId": "ebafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "ebafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "subDomain": "iglootools.snowball.xyz"
  },
  {
@ -55,8 +55,8 @@
    "framework": "test-4",
    "webhooks": [],
    "icon": "",
-    "recordId": "qbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "qbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "subDomain": "iglootools-2.snowball.xyz"
  },
  {
@ -70,8 +70,8 @@
    "framework": "test-5",
    "webhooks": [],
    "icon": "",
-    "recordId": "xbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "recordData": {},
+    "registryRecordId": "xbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "registryRecordData": {},
    "subDomain": "snowball-2.snowball.xyz"
  }
 ]
--- a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx
+++ b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx
@ -3,7 +3,7 @@ import { UseFormRegister } from 'react-hook-form';

 import { Typography, Input, IconButton } from '@material-tailwind/react';

-import { EnvironmentVariablesFormValues } from './EnvironmentVariablesTabPanel';
+import { EnvironmentVariablesFormValues } from '../../../../types/project';

 interface AddEnvironmentVariableRowProps {
  onDelete: () => void;
--- a/packages/frontend/src/pages/org-slug/projects/id/DeploymentsTabPanel.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/DeploymentsTabPanel.tsx
--- a/packages/frontend/src/pages/org-slug/projects/id/OverviewTabPanel.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/OverviewTabPanel.tsx
--- a/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+import { Link, Outlet, useLocation, useOutletContext } from 'react-router-dom';
+
+import { Tabs, TabsHeader, TabsBody, Tab } from '@material-tailwind/react';
+
+import { OutletContextType } from '../../../../types/project';
+
+const tabsData = [
+  {
+    label: 'General',
+    icon: '^',
+    value: 'general',
+  },
+  {
+    label: 'Domains',
+    icon: '^',
+    value: 'domains',
+  },
+  {
+    label: 'Git',
+    icon: '^',
+    value: 'git',
+  },
+  {
+    label: 'Environment variables',
+    icon: '^',
+    value: 'environment-variables',
+  },
+  {
+    label: 'Members',
+    icon: '^',
+    value: 'members',
+  },
+];
+
+const SettingsTabPanel = () => {
+  const { project, onUpdate } = useOutletContext<OutletContextType>();
+
+  const location = useLocation();
+
+  const currentTab = useMemo(() => {
+    if (project) {
+      const currTabArr = location.pathname.split('settings');
+      return currTabArr[currTabArr.length - 1];
+    } else {
+      return;
+    }
+  }, [location, project]);
+
+  return (
+    <>
+      <Tabs
+        value={currentTab}
+        orientation="vertical"
+        className="grid grid-cols-4"
+      >
+        <TabsHeader
+          className="bg-transparent col-span-1"
+          indicatorProps={{
+            className: 'bg-gray-900/10 shadow-none !text-gray-900',
+          }}
+        >
+          {tabsData.map(({ label, value, icon }) => (
+            <Link key={value} to={value === 'general' ? '' : value}>
+              <Tab
+                value={value === 'general' ? '' : `/${value}`}
+                className="flex justify-start"
+              >
+                <div className="flex gap-2">
+                  <div>{icon}</div>
+                  <div>{label}</div>
+                </div>
+              </Tab>
+            </Link>
+          ))}
+        </TabsHeader>
+        <TabsBody className="col-span-2">
+          <Outlet context={{ project, onUpdate }} />
+        </TabsBody>
+      </Tabs>
+    </>
+  );
+};
+
+export default SettingsTabPanel;
--- a/packages/frontend/src/pages/org-slug/projects/id/SettingsTabPanel.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/SettingsTabPanel.tsx
@ -1,92 +0,0 @@
-import React, { createElement } from 'react';
-import { useOutletContext } from 'react-router-dom';
-
-import {
-  Tabs,
-  TabsHeader,
-  TabsBody,
-  Tab,
-  TabPanel,
-} from '@material-tailwind/react';
-
-import Domains from '../../../../components/projects/project/settings/Domains';
-import GeneralTabPanel from '../../../../components/projects/project/settings/GeneralTabPanel';
-import { EnvironmentVariablesTabPanel } from '../../../../components/projects/project/settings/EnvironmentVariablesTabPanel';
-import GitTabPanel from '../../../../components/projects/project/settings/GitTabPanel';
-import MembersTabPanel from '../../../../components/projects/project/settings/MembersTabPanel';
-import { OutletContextType } from '../../../../types/project';
-
-const tabsData = [
-  {
-    label: 'General',
-    icon: '^',
-    value: 'general',
-    component: GeneralTabPanel,
-  },
-  {
-    label: 'Domains',
-    icon: '^',
-    value: 'domains',
-    component: Domains,
-  },
-  {
-    label: 'Git',
-    icon: '^',
-    value: 'git',
-    component: GitTabPanel,
-  },
-  {
-    label: 'Environment variables',
-    icon: '^',
-    value: 'environmentVariables',
-    component: EnvironmentVariablesTabPanel,
-  },
-  {
-    label: 'Members',
-    icon: '^',
-    value: 'members',
-    component: MembersTabPanel,
-  },
-];
-
-const SettingsTabPanel = () => {
-  const { project, onUpdate } = useOutletContext<OutletContextType>();
-
-  return (
-    <>
-      <Tabs
-        value={'general'}
-        orientation="vertical"
-        className="grid grid-cols-4"
-      >
-        <TabsHeader
-          className="bg-transparent col-span-1"
-          indicatorProps={{
-            className: 'bg-gray-900/10 shadow-none !text-gray-900',
-          }}
-        >
-          {tabsData.map(({ label, value, icon }) => (
-            <Tab key={value} value={value} className="flex justify-start">
-              <div className="flex gap-2">
-                <div>{icon}</div>
-                <div>{label}</div>
-              </div>
-            </Tab>
-          ))}
-        </TabsHeader>
-        <TabsBody className="col-span-2">
-          {tabsData.map(({ value, component }) => (
-            <TabPanel key={value} value={value} className="p-2">
-              {createElement(component, {
-                project: project,
-                onUpdate: onUpdate,
-              })}
-            </TabPanel>
-          ))}
-        </TabsBody>
-      </Tabs>
-    </>
-  );
-};
-
-export default SettingsTabPanel;
--- a/packages/frontend/src/pages/org-slug/projects/id/routes.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/routes.tsx
@ -1,8 +1,13 @@
 import React from 'react';

-import OverviewTabPanel from './OverviewTabPanel';
-import DeploymentsTabPanel from './DeploymentsTabPanel';
-import SettingsTabPanel from './SettingsTabPanel';
+import OverviewTabPanel from './Overview';
+import DeploymentsTabPanel from './Deployments';
+import SettingsTabPanel from './Settings';
+import GeneralTabPanel from './settings/General';
+import GitTabPanel from './settings/Git';
+import { EnvironmentVariablesTabPanel } from './settings/EnvironmentVariables';
+import MembersTabPanel from './settings/Members';
+import Domains from './settings/Domains';

 const Database = () => (
  <div>
@ -23,6 +28,29 @@ const Integrations = () => (
  </div>
 );

+export const settingsTabRoutes = [
+  {
+    index: true,
+    element: <GeneralTabPanel />,
+  },
+  {
+    path: 'domains',
+    element: <Domains />,
+  },
+  {
+    path: 'git',
+    element: <GitTabPanel />,
+  },
+  {
+    path: 'environment-variables',
+    element: <EnvironmentVariablesTabPanel />,
+  },
+  {
+    path: 'members',
+    element: <MembersTabPanel />,
+  },
+];
+
 export const projectTabRoutes = [
  {
    index: true,
@ -43,5 +71,6 @@ export const projectTabRoutes = [
  {
    path: 'settings',
    element: <SettingsTabPanel />,
+    children: settingsTabRoutes,
  },
 ];
--- a/packages/frontend/src/components/projects/project/settings/Domains.tsx
+++ b/packages/frontend/src/components/projects/project/settings/Domains.tsx
@ -1,15 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { Domain, Project } from 'gql-client';
+import { Link, useOutletContext } from 'react-router-dom';
+import { Domain } from 'gql-client';

 import { Button, Typography } from '@material-tailwind/react';

-import DomainCard from './DomainCard';
-import { useGQLClient } from '../../../../context/GQLClientContext';
-import repositories from '../../../../assets/repositories.json';
+import DomainCard from '../../../../../components/projects/project/settings/DomainCard';
+import { useGQLClient } from '../../../../../context/GQLClientContext';
+import repositories from '../../../../../assets/repositories.json';
+import { OutletContextType } from '../../../../../types/project';

-const Domains = ({ project }: { project: Project }) => {
+const Domains = () => {
  const client = useGQLClient();
+  const { project } = useOutletContext<OutletContextType>();
+
  const [domains, setDomains] = useState<Domain[]>([]);

  const fetchDomains = async () => {
--- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx
@ -13,22 +13,11 @@ import {
  Chip,
 } from '@material-tailwind/react';

-import AddEnvironmentVariableRow from './AddEnvironmentVariableRow';
-import DisplayEnvironmentVariables from './DisplayEnvironmentVariables';
-import HorizontalLine from '../../../HorizontalLine';
-import { useGQLClient } from '../../../../context/GQLClientContext';
-
-export type EnvironmentVariablesFormValues = {
-  variables: {
-    key: string;
-    value: string;
-  }[];
-  environment: {
-    development: boolean;
-    preview: boolean;
-    production: boolean;
-  };
-};
+import AddEnvironmentVariableRow from '../../../../../components/projects/project/settings/AddEnvironmentVariableRow';
+import DisplayEnvironmentVariables from '../../../../../components/projects/project/settings/DisplayEnvironmentVariables';
+import HorizontalLine from '../../../../../components/HorizontalLine';
+import { useGQLClient } from '../../../../../context/GQLClientContext';
+import { EnvironmentVariablesFormValues } from '../../../../../types/project';

 export const EnvironmentVariablesTabPanel = () => {
  const { id } = useParams();
--- a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
@ -1,15 +1,16 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useOutletContext } from 'react-router-dom';
 import { useForm, Controller } from 'react-hook-form';
 import toast from 'react-hot-toast';
-import { Organization, Project } from 'gql-client';
+import { Organization } from 'gql-client';

 import { Button, Typography, Input, Option } from '@material-tailwind/react';

-import DeleteProjectDialog from './DeleteProjectDialog';
-import ConfirmDialog from '../../../shared/ConfirmDialog';
-import { useGQLClient } from '../../../../context/GQLClientContext';
-import AsyncSelect from '../../../shared/AsyncSelect';
+import DeleteProjectDialog from '../../../../../components/projects/project/settings/DeleteProjectDialog';
+import ConfirmDialog from '../../../../../components/shared/ConfirmDialog';
+import { useGQLClient } from '../../../../../context/GQLClientContext';
+import AsyncSelect from '../../../../../components/shared/AsyncSelect';
+import { OutletContextType } from '../../../../../types/project';

 const CopyIcon = ({ value }: { value: string }) => {
  return (
@ -25,14 +26,10 @@ const CopyIcon = ({ value }: { value: string }) => {
  );
 };

-const GeneralTabPanel = ({
-  project,
-  onUpdate,
-}: {
-  project: Project;
-  onUpdate: () => Promise<void>;
-}) => {
+const GeneralTabPanel = () => {
  const client = useGQLClient();
+  const { project, onUpdate } = useOutletContext<OutletContextType>();
+
  const [transferOrganizations, setTransferOrganizations] = useState<
    Organization[]
  >([]);
--- a/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx
@ -1,12 +1,13 @@
 import React, { useCallback, useEffect } from 'react';
+import { useOutletContext } from 'react-router-dom';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
-import { Project } from 'gql-client';

 import { Button, Input, Switch, Typography } from '@material-tailwind/react';

-import WebhookCard from './WebhookCard';
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import WebhookCard from '../../../../../components/projects/project/settings/WebhookCard';
+import { useGQLClient } from '../../../../../context/GQLClientContext';
+import { OutletContextType } from '../../../../../types/project';

 type UpdateProdBranchValues = {
  prodBranch: string;
@ -16,14 +17,9 @@ type UpdateWebhooksValues = {
  webhookUrl: string;
 };

-const GitTabPanel = ({
-  project,
-  onUpdate,
-}: {
-  project: Project;
-  onUpdate: () => Promise<void>;
-}) => {
+const GitTabPanel = () => {
  const client = useGQLClient();
+  const { project, onUpdate } = useOutletContext<OutletContextType>();

  const {
    register: registerProdBranch,
--- a/packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx
@ -1,22 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import toast, { Toaster } from 'react-hot-toast';
-import {
-  Permission,
-  Project,
-  AddProjectMemberInput,
-  ProjectMember,
-} from 'gql-client';
+import { useOutletContext } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import { Permission, AddProjectMemberInput, ProjectMember } from 'gql-client';

 import { Chip, Button, Typography } from '@material-tailwind/react';

-import MemberCard from './MemberCard';
-import AddMemberDialog from './AddMemberDialog';
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import MemberCard from '../../../../../components/projects/project/settings/MemberCard';
+import AddMemberDialog from '../../../../../components/projects/project/settings/AddMemberDialog';
+import { useGQLClient } from '../../../../../context/GQLClientContext';
+import { OutletContextType } from '../../../../../types/project';

 const FIRST_MEMBER_CARD = 0;

-const MembersTabPanel = ({ project }: { project: Project }) => {
+const MembersTabPanel = () => {
  const client = useGQLClient();
+  const { project } = useOutletContext<OutletContextType>();

  const [addmemberDialogOpen, setAddMemberDialogOpen] = useState(false);

@ -127,7 +125,6 @@ const MembersTabPanel = ({ project }: { project: Project }) => {
        open={addmemberDialogOpen}
        handleAddMember={addMemberHandler}
      />
-      <Toaster />
    </div>
  );
 };
--- a/packages/frontend/src/types/project.ts
+++ b/packages/frontend/src/types/project.ts
@ -65,3 +65,15 @@ export type OutletContextType = {
  project: Project;
  onUpdate: () => Promise<void>;
 };
+
+export type EnvironmentVariablesFormValues = {
+  variables: {
+    key: string;
+    value: string;
+  }[];
+  environment: {
+    development: boolean;
+    preview: boolean;
+    production: boolean;
+  };
+};