From 76dfd3bb76ba60c1f682c3169cce5d529139b304 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Mon, 12 Feb 2024 15:18:00 +0530 Subject: [PATCH] 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 --- packages/backend/src/entity/Deployment.ts | 4 +- packages/backend/src/entity/Project.ts | 4 +- packages/backend/src/registry.ts | 9 +- packages/backend/src/service.ts | 14 +-- .../backend/test/fixtures/deployments.json | 40 ++++---- packages/backend/test/fixtures/projects.json | 20 ++-- .../settings/AddEnvironmentVariableRow.tsx | 2 +- ...eploymentsTabPanel.tsx => Deployments.tsx} | 0 .../id/{OverviewTabPanel.tsx => Overview.tsx} | 0 .../pages/org-slug/projects/id/Settings.tsx | 85 +++++++++++++++++ .../org-slug/projects/id/SettingsTabPanel.tsx | 92 ------------------- .../src/pages/org-slug/projects/id/routes.tsx | 35 ++++++- .../projects/id}/settings/Domains.tsx | 15 +-- .../id/settings/EnvironmentVariables.tsx} | 21 +---- .../projects/id/settings/General.tsx} | 23 ++--- .../org-slug/projects/id/settings/Git.tsx} | 16 ++-- .../projects/id/settings/Members.tsx} | 21 ++--- packages/frontend/src/types/project.ts | 12 +++ 18 files changed, 215 insertions(+), 198 deletions(-) rename packages/frontend/src/pages/org-slug/projects/id/{DeploymentsTabPanel.tsx => Deployments.tsx} (100%) rename packages/frontend/src/pages/org-slug/projects/id/{OverviewTabPanel.tsx => Overview.tsx} (100%) create mode 100644 packages/frontend/src/pages/org-slug/projects/id/Settings.tsx delete mode 100644 packages/frontend/src/pages/org-slug/projects/id/SettingsTabPanel.tsx rename packages/frontend/src/{components/projects/project => pages/org-slug/projects/id}/settings/Domains.tsx (71%) rename packages/frontend/src/{components/projects/project/settings/EnvironmentVariablesTabPanel.tsx => pages/org-slug/projects/id/settings/EnvironmentVariables.tsx} (93%) rename packages/frontend/src/{components/projects/project/settings/GeneralTabPanel.tsx => pages/org-slug/projects/id/settings/General.tsx} (92%) rename packages/frontend/src/{components/projects/project/settings/GitTabPanel.tsx => pages/org-slug/projects/id/settings/Git.tsx} (92%) rename packages/frontend/src/{components/projects/project/settings/MembersTabPanel.tsx => pages/org-slug/projects/id/settings/Members.tsx} (85%) diff --git a/packages/backend/src/entity/Deployment.ts b/packages/backend/src/entity/Deployment.ts index f53a7b82..c766fbee 100644 --- 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 diff --git a/packages/backend/src/entity/Project.ts b/packages/backend/src/entity/Project.ts index 93374155..aa76c5d8 100644 --- 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; diff --git a/packages/backend/src/registry.ts b/packages/backend/src/registry.ts index a193df6d..a88bac7a 100644 --- 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 { diff --git a/packages/backend/src/service.ts b/packages/backend/src/service.ts index d1001330..f46c1a52 100644 --- 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): Promise { - 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; diff --git a/packages/backend/test/fixtures/deployments.json b/packages/backend/test/fixtures/deployments.json index c67f3152..63c5adf2 100644 --- 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" diff --git a/packages/backend/test/fixtures/projects.json b/packages/backend/test/fixtures/projects.json index 7f59d260..a390f486 100644 --- 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" } ] diff --git a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx index 2ba7450c..1d88c37a 100644 --- 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; diff --git a/packages/frontend/src/pages/org-slug/projects/id/DeploymentsTabPanel.tsx b/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx similarity index 100% rename from packages/frontend/src/pages/org-slug/projects/id/DeploymentsTabPanel.tsx rename to packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx diff --git a/packages/frontend/src/pages/org-slug/projects/id/OverviewTabPanel.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx similarity index 100% rename from packages/frontend/src/pages/org-slug/projects/id/OverviewTabPanel.tsx rename to packages/frontend/src/pages/org-slug/projects/id/Overview.tsx diff --git a/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx b/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx new file mode 100644 index 00000000..f162b9fb --- /dev/null +++ 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(); + + const location = useLocation(); + + const currentTab = useMemo(() => { + if (project) { + const currTabArr = location.pathname.split('settings'); + return currTabArr[currTabArr.length - 1]; + } else { + return; + } + }, [location, project]); + + return ( + <> + + + {tabsData.map(({ label, value, icon }) => ( + + +
+
{icon}
+
{label}
+
+ + + ))} + + + + + + + ); +}; + +export default SettingsTabPanel; diff --git a/packages/frontend/src/pages/org-slug/projects/id/SettingsTabPanel.tsx b/packages/frontend/src/pages/org-slug/projects/id/SettingsTabPanel.tsx deleted file mode 100644 index 1648c176..00000000 --- a/packages/frontend/src/pages/org-slug/projects/id/SettingsTabPanel.tsx +++ /dev/null @@ -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(); - - return ( - <> - - - {tabsData.map(({ label, value, icon }) => ( - -
-
{icon}
-
{label}
-
- - ))} - - - {tabsData.map(({ value, component }) => ( - - {createElement(component, { - project: project, - onUpdate: onUpdate, - })} - - ))} - - - - ); -}; - -export default SettingsTabPanel; diff --git a/packages/frontend/src/pages/org-slug/projects/id/routes.tsx b/packages/frontend/src/pages/org-slug/projects/id/routes.tsx index b72d682a..7cfd0a93 100644 --- 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 = () => (
@@ -23,6 +28,29 @@ const Integrations = () => (
); +export const settingsTabRoutes = [ + { + index: true, + element: , + }, + { + path: 'domains', + element: , + }, + { + path: 'git', + element: , + }, + { + path: 'environment-variables', + element: , + }, + { + path: 'members', + element: , + }, +]; + export const projectTabRoutes = [ { index: true, @@ -43,5 +71,6 @@ export const projectTabRoutes = [ { path: 'settings', element: , + children: settingsTabRoutes, }, ]; diff --git a/packages/frontend/src/components/projects/project/settings/Domains.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx similarity index 71% rename from packages/frontend/src/components/projects/project/settings/Domains.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx index b95cc885..5b815bc4 100644 --- a/packages/frontend/src/components/projects/project/settings/Domains.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/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(); + const [domains, setDomains] = useState([]); const fetchDomains = async () => { diff --git a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx similarity index 93% rename from packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx index 0c4af5a8..92b31147 100644 --- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.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(); diff --git a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx similarity index 92% rename from packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx index 377d77f5..dbdd1de8 100644 --- a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/General.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; -}) => { +const GeneralTabPanel = () => { const client = useGQLClient(); + const { project, onUpdate } = useOutletContext(); + const [transferOrganizations, setTransferOrganizations] = useState< Organization[] >([]); diff --git a/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/Git.tsx similarity index 92% rename from packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/Git.tsx index 6d88cbb3..7c801bc5 100644 --- a/packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/Git.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; -}) => { +const GitTabPanel = () => { const client = useGQLClient(); + const { project, onUpdate } = useOutletContext(); const { register: registerProdBranch, diff --git a/packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/Members.tsx similarity index 85% rename from packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/Members.tsx index 9ddf9e7a..00f01214 100644 --- a/packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/Members.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(); const [addmemberDialogOpen, setAddMemberDialogOpen] = useState(false); @@ -127,7 +125,6 @@ const MembersTabPanel = ({ project }: { project: Project }) => { open={addmemberDialogOpen} handleAddMember={addMemberHandler} /> - ); }; diff --git a/packages/frontend/src/types/project.ts b/packages/frontend/src/types/project.ts index 3fedabeb..3dd8b0dd 100644 --- 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; }; + +export type EnvironmentVariablesFormValues = { + variables: { + key: string; + value: string; + }[]; + environment: { + development: boolean; + preview: boolean; + production: boolean; + }; +};