From adba64fd2bf9d040d2101c8b1ae5f79e273e55c2 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Wed, 14 Feb 2024 12:16:01 +0530 Subject: [PATCH] Fix route for adding domain in settings page (#66) * Use Namespace import instead of named import * Fix route for add domain * Fix settings tab routes on changing sub path * Fix stepper for add domain and project --------- Co-authored-by: neeraj --- .../deployments/AssignDomainDialog.tsx | 1 + .../src/pages/org-slug/projects/Id.tsx | 13 ++- .../org-slug/projects/create/Template.tsx | 32 +++-- .../org-slug/projects/id/settings/Domains.tsx | 2 +- .../domains}/add/Config.tsx | 18 ++- .../domains}/add/index.tsx | 6 +- .../domains}/add/routes.tsx | 2 +- .../src/pages/org-slug/projects/routes.tsx | 6 +- packages/gql-client/src/client.ts | 110 +++++++++--------- 9 files changed, 101 insertions(+), 89 deletions(-) rename packages/frontend/src/pages/org-slug/projects/id/{domain => settings/domains}/add/Config.tsx (84%) rename packages/frontend/src/pages/org-slug/projects/id/{domain => settings/domains}/add/index.tsx (88%) rename packages/frontend/src/pages/org-slug/projects/id/{domain => settings/domains}/add/routes.tsx (67%) diff --git a/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx b/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx index b1f5874d..79dba9c4 100644 --- a/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx +++ b/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx @@ -22,6 +22,7 @@ const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => { In order to assign a domain to your production deployments, configure it in the{' '} + {/* TODO: Fix selection of project settings tab on navigation to domains */} project settings{' '} diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx index ff86a038..f022600d 100644 --- a/packages/frontend/src/pages/org-slug/projects/Id.tsx +++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx @@ -37,8 +37,9 @@ const Id = () => { const currentTab = useMemo(() => { if (id) { - const [, tabPath] = location.pathname.split(id); - return tabPath; + const regex = /projects\/[^/]+\/([^/]+)/; + const match = location.pathname.match(regex); + return match ? match[1] : ''; } else { return ''; } @@ -90,22 +91,22 @@ const Id = () => { - + Deployments - + Database - + Integrations - + Settings diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx index e95b7c39..47e75c62 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx @@ -1,5 +1,10 @@ import React, { useMemo } from 'react'; -import { Outlet, useLocation, useSearchParams } from 'react-router-dom'; +import { + Outlet, + useLocation, + useParams, + useSearchParams, +} from 'react-router-dom'; import { Avatar } from '@material-tailwind/react'; @@ -7,13 +12,23 @@ import Stepper from '../../../../components/Stepper'; import templateDetails from '../../../../assets/templates.json'; import { GIT_TEMPLATE_LINK } from '../../../../constants'; -const STEPPER_VALUES = [ - { step: 1, route: '/projects/create/template', label: 'Create repository' }, - { step: 2, route: '/projects/create/template/deploy', label: 'Deploy' }, -]; - // TODO: Set dynamic route for template and load details from DB const CreateWithTemplate = () => { + const { orgSlug } = useParams(); + + const stepperValues = [ + { + step: 1, + route: `/${orgSlug}/projects/create/template`, + label: 'Create repository', + }, + { + step: 2, + route: `/${orgSlug}/projects/create/template/deploy`, + label: 'Deploy', + }, + ]; + const location = useLocation(); const [searchParams] = useSearchParams(); @@ -24,8 +39,7 @@ const CreateWithTemplate = () => { const activeStep = useMemo( () => - STEPPER_VALUES.find((data) => data.route === location.pathname)?.step ?? - 0, + stepperValues.find((data) => data.route === location.pathname)?.step ?? 0, [location.pathname], ); @@ -42,7 +56,7 @@ const CreateWithTemplate = () => {
- +
diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx index 5b815bc4..c5d2ca64 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx @@ -32,7 +32,7 @@ const Domains = () => { <>
Domain - + diff --git a/packages/frontend/src/pages/org-slug/projects/id/domain/add/Config.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx similarity index 84% rename from packages/frontend/src/pages/org-slug/projects/id/domain/add/Config.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx index 0e27ac03..37a84770 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/domain/add/Config.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx @@ -1,14 +1,15 @@ import React from 'react'; import toast from 'react-hot-toast'; -import { Link, useParams, useSearchParams } from 'react-router-dom'; +import { useNavigate, 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, orgSlug } = useParams(); const client = useGQLClient(); + const navigate = useNavigate(); const [searchParams] = useSearchParams(); const primaryDomainName = searchParams.get('name'); @@ -29,6 +30,7 @@ const Config = () => { if (isAdded) { toast.success('Domain added successfully'); + navigate(`/${orgSlug}/projects/${id}/settings/domains`); } else { toast.error('Error adding domain'); } @@ -70,15 +72,9 @@ const Config = () => { ^It can take up to 48 hours for these updates to reflect globally. - - - +
); }; diff --git a/packages/frontend/src/pages/org-slug/projects/id/domain/add/index.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx similarity index 88% rename from packages/frontend/src/pages/org-slug/projects/id/domain/add/index.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx index 166d5123..395baa77 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/domain/add/index.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx @@ -2,7 +2,7 @@ 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, orgSlug } = useParams(); @@ -11,12 +11,12 @@ const AddDomain = () => { const stepperValues = [ { step: 1, - route: `/projects/${id}/domain/add`, + route: `/${orgSlug}/projects/${id}/settings/domains/add`, label: 'Setup', }, { step: 2, - route: `/projects/${id}/domain/add/config`, + route: `/${orgSlug}/projects/${id}/settings/domains/add/config`, label: 'Configure DNS', }, ]; diff --git a/packages/frontend/src/pages/org-slug/projects/id/domain/add/routes.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/routes.tsx similarity index 67% rename from packages/frontend/src/pages/org-slug/projects/id/domain/add/routes.tsx rename to packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/routes.tsx index 77eccafe..8a970a55 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/domain/add/routes.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/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 = [ { diff --git a/packages/frontend/src/pages/org-slug/projects/routes.tsx b/packages/frontend/src/pages/org-slug/projects/routes.tsx index bd0af80f..993e22b3 100644 --- a/packages/frontend/src/pages/org-slug/projects/routes.tsx +++ b/packages/frontend/src/pages/org-slug/projects/routes.tsx @@ -2,10 +2,10 @@ import React from 'react'; import CreateProject from './Create'; import Id from './Id'; -import AddDomain from './id/domain/add'; +import AddDomain from './id/settings/domains/add'; import { createProjectRoutes } from './create/routes'; -import { addDomainRoutes } from './id/domain/add/routes'; import { projectTabRoutes } from './id/routes'; +import { addDomainRoutes } from './id/settings/domains/add/routes'; export const projectsRoutesWithoutSearch = [ { @@ -14,7 +14,7 @@ export const projectsRoutesWithoutSearch = [ children: createProjectRoutes, }, { - path: ':id/domain/add', + path: ':id/settings/domains/add', element: , children: addDomainRoutes, }, diff --git a/packages/gql-client/src/client.ts b/packages/gql-client/src/client.ts index fcfb7432..77c70eb7 100644 --- a/packages/gql-client/src/client.ts +++ b/packages/gql-client/src/client.ts @@ -1,8 +1,8 @@ import { ApolloClient, DefaultOptions, InMemoryCache, NormalizedCacheObject } from '@apollo/client'; -import { getUser, getOrganizations, getDeployments, getProjectMembers, searchProjects, getEnvironmentVariables, getProject, getDomains, getProjectsInOrganization } from './queries'; -import { AddEnvironmentVariableInput, AddEnvironmentVariablesResponse, GetDeploymentsResponse, GetEnvironmentVariablesResponse, GetOrganizationsResponse, GetProjectMembersResponse, SearchProjectsResponse, GetUserResponse, UpdateDeploymentToProdResponse, GetProjectResponse, UpdateProjectResponse, UpdateProjectInput, RedeployToProdResponse, DeleteProjectResponse, GetProjectsInOrganizationResponse, RollbackDeploymentResponse, AddDomainInput, AddDomainResponse, GetDomainsResponse, UpdateDomainInput, UpdateDomainResponse, AuthenticateGitHubResponse, UnauthenticateGitHubResponse, UpdateEnvironmentVariableResponse, UpdateEnvironmentVariableInput, RemoveEnvironmentVariableResponse, UpdateProjectMemberInput, RemoveProjectMemberResponse, UpdateProjectMemberResponse, DeleteDomainResponse, AddProjectMemberInput, AddProjectMemberResponse, AddProjectInput, AddProjectResponse, FilterDomainInput } from './types'; -import { removeProjectMember, addEnvironmentVariables, updateDeploymentToProd, updateProjectMutation, redeployToProd, deleteProject, addDomain, rollbackDeployment, updateDomainMutation, authenticateGitHub, unauthenticateGitHub, updateEnvironmentVariable, removeEnvironmentVariable, updateProjectMember, deleteDomain, addProjectMember, addProject } from './mutations'; +import * as queries from './queries'; +import * as types from './types'; +import * as mutations from './mutations'; export interface GraphQLConfig { gqlEndpoint: string; @@ -31,17 +31,17 @@ export class GQLClient { }); } - async getUser () : Promise { + async getUser () : Promise { const { data } = await this.client.query({ - query: getUser + query: queries.getUser }); return data; } - async getProject (projectId: string) : Promise { + async getProject (projectId: string) : Promise { const { data } = await this.client.query({ - query: getProject, + query: queries.getProject, variables: { projectId } @@ -50,9 +50,9 @@ export class GQLClient { return data; } - async getProjectsInOrganization (organizationSlug: string) : Promise { + async getProjectsInOrganization (organizationSlug: string) : Promise { const { data } = await this.client.query({ - query: getProjectsInOrganization, + query: queries.getProjectsInOrganization, variables: { organizationSlug } @@ -61,17 +61,17 @@ export class GQLClient { return data; } - async getOrganizations () : Promise { + async getOrganizations () : Promise { const { data } = await this.client.query({ - query: getOrganizations + query: queries.getOrganizations }); return data; } - async getDeployments (projectId: string) : Promise { + async getDeployments (projectId: string) : Promise { const { data } = await this.client.query({ - query: getDeployments, + query: queries.getDeployments, variables: { projectId } @@ -80,9 +80,9 @@ export class GQLClient { return data; } - async getEnvironmentVariables (projectId: string) : Promise { + async getEnvironmentVariables (projectId: string) : Promise { const { data } = await this.client.query({ - query: getEnvironmentVariables, + query: queries.getEnvironmentVariables, variables: { projectId } @@ -91,9 +91,9 @@ export class GQLClient { return data; } - async getProjectMembers (projectId: string) : Promise { + async getProjectMembers (projectId: string) : Promise { const result = await this.client.query({ - query: getProjectMembers, + query: queries.getProjectMembers, variables: { projectId } @@ -102,9 +102,9 @@ export class GQLClient { return result.data; } - async addProjectMember (projectId: string, data: AddProjectMemberInput) : Promise { + async addProjectMember (projectId: string, data: types.AddProjectMemberInput) : Promise { const result = await this.client.mutate({ - mutation: addProjectMember, + mutation: mutations.addProjectMember, variables: { projectId, data @@ -114,9 +114,9 @@ export class GQLClient { return result.data; } - async updateProjectMember (projectMemberId: string, data: UpdateProjectMemberInput): Promise { + async updateProjectMember (projectMemberId: string, data: types.UpdateProjectMemberInput): Promise { const result = await this.client.mutate({ - mutation: updateProjectMember, + mutation: mutations.updateProjectMember, variables: { projectMemberId, data @@ -126,9 +126,9 @@ export class GQLClient { return result.data; } - async removeProjectMember (projectMemberId: string): Promise { + async removeProjectMember (projectMemberId: string): Promise { const result = await this.client.mutate({ - mutation: removeProjectMember, + mutation: mutations.removeProjectMember, variables: { projectMemberId } @@ -137,9 +137,9 @@ export class GQLClient { return result.data; } - async searchProjects (searchText: string) : Promise { + async searchProjects (searchText: string) : Promise { const { data } = await this.client.query({ - query: searchProjects, + query: queries.searchProjects, variables: { searchText } @@ -148,9 +148,9 @@ export class GQLClient { return data; } - async addEnvironmentVariables (projectId: string, data: AddEnvironmentVariableInput[]): Promise { + async addEnvironmentVariables (projectId: string, data: types.AddEnvironmentVariableInput[]): Promise { const result = await this.client.mutate({ - mutation: addEnvironmentVariables, + mutation: mutations.addEnvironmentVariables, variables: { projectId, data @@ -160,9 +160,9 @@ export class GQLClient { return result.data; } - async updateEnvironmentVariable (environmentVariableId: string, data: UpdateEnvironmentVariableInput): Promise { + async updateEnvironmentVariable (environmentVariableId: string, data: types.UpdateEnvironmentVariableInput): Promise { const result = await this.client.mutate({ - mutation: updateEnvironmentVariable, + mutation: mutations.updateEnvironmentVariable, variables: { environmentVariableId, data @@ -172,9 +172,9 @@ export class GQLClient { return result.data; } - async removeEnvironmentVariable (environmentVariableId: string): Promise { + async removeEnvironmentVariable (environmentVariableId: string): Promise { const { data } = await this.client.mutate({ - mutation: removeEnvironmentVariable, + mutation: mutations.removeEnvironmentVariable, variables: { environmentVariableId } @@ -183,9 +183,9 @@ export class GQLClient { return data; } - async updateDeploymentToProd (deploymentId: string): Promise { + async updateDeploymentToProd (deploymentId: string): Promise { const { data } = await this.client.mutate({ - mutation: updateDeploymentToProd, + mutation: mutations.updateDeploymentToProd, variables: { deploymentId } @@ -194,9 +194,9 @@ export class GQLClient { return data; } - async addProject (organizationSlug: string, data: AddProjectInput): Promise { + async addProject (organizationSlug: string, data: types.AddProjectInput): Promise { const result = await this.client.mutate({ - mutation: addProject, + mutation: mutations.addProject, variables: { organizationSlug, data @@ -206,9 +206,9 @@ export class GQLClient { return result.data; } - async updateProject (projectId: string, projectDetails: UpdateProjectInput): Promise { + async updateProject (projectId: string, projectDetails: types.UpdateProjectInput): Promise { const { data } = await this.client.mutate({ - mutation: updateProjectMutation, + mutation: mutations.updateProjectMutation, variables: { projectId, projectDetails @@ -218,9 +218,9 @@ export class GQLClient { return data; } - async updateDomain (domainId: string, domainDetails: UpdateDomainInput): Promise { + async updateDomain (domainId: string, domainDetails: types.UpdateDomainInput): Promise { const { data } = await this.client.mutate({ - mutation: updateDomainMutation, + mutation: mutations.updateDomainMutation, variables: { domainId, domainDetails @@ -230,9 +230,9 @@ export class GQLClient { return data; } - async redeployToProd (deploymentId: string): Promise { + async redeployToProd (deploymentId: string): Promise { const { data } = await this.client.mutate({ - mutation: redeployToProd, + mutation: mutations.redeployToProd, variables: { deploymentId } @@ -241,9 +241,9 @@ export class GQLClient { return data; } - async deleteProject (projectId: string): Promise { + async deleteProject (projectId: string): Promise { const { data } = await this.client.mutate({ - mutation: deleteProject, + mutation: mutations.deleteProject, variables: { projectId } @@ -252,9 +252,9 @@ export class GQLClient { return data; } - async deleteDomain (domainId: string): Promise { + async deleteDomain (domainId: string): Promise { const { data } = await this.client.mutate({ - mutation: deleteDomain, + mutation: mutations.deleteDomain, variables: { domainId } @@ -263,9 +263,9 @@ export class GQLClient { return data; } - async rollbackDeployment (projectId: string, deploymentId: string): Promise { + async rollbackDeployment (projectId: string, deploymentId: string): Promise { const { data } = await this.client.mutate({ - mutation: rollbackDeployment, + mutation: mutations.rollbackDeployment, variables: { projectId, deploymentId @@ -275,9 +275,9 @@ export class GQLClient { return data; } - async addDomain (projectId: string, domainDetails: AddDomainInput): Promise { + async addDomain (projectId: string, domainDetails: types.AddDomainInput): Promise { const { data } = await this.client.mutate({ - mutation: addDomain, + mutation: mutations.addDomain, variables: { projectId, domainDetails @@ -287,9 +287,9 @@ export class GQLClient { return data; } - async getDomains (projectId: string, filter?: FilterDomainInput): Promise { + async getDomains (projectId: string, filter?: types.FilterDomainInput): Promise { const { data } = await this.client.query({ - query: getDomains, + query: queries.getDomains, variables: { projectId, filter @@ -299,9 +299,9 @@ export class GQLClient { return data; } - async authenticateGitHub (code: string): Promise { + async authenticateGitHub (code: string): Promise { const { data } = await this.client.mutate({ - mutation: authenticateGitHub, + mutation: mutations.authenticateGitHub, variables: { code } @@ -310,9 +310,9 @@ export class GQLClient { return data; } - async unauthenticateGithub (): Promise { + async unauthenticateGithub (): Promise { const { data } = await this.client.mutate({ - mutation: unauthenticateGitHub + mutation: mutations.unauthenticateGitHub }); return data;