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 <neeraj.rtly@gmail.com>
2024-02-14 12:16:01 +05:30
parent 9144d42f70
commit adba64fd2b
9 changed files with 101 additions and 89 deletions
@@ -22,6 +22,7 @@ const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
      <DialogBody>
        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 */}
        <Link to="../settings/domains" className="text-light-blue-800 inline">
          project settings{' '}
        </Link>
@@ -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 = () => {
                  </Tab>
                </Link>
                <Link to="deployments">
-                  <Tab value="/deployments" className={'p-2 cursor-pointer'}>
+                  <Tab value="deployments" className={'p-2 cursor-pointer'}>
                    Deployments
                  </Tab>
                </Link>
                <Link to="database">
-                  <Tab value="/database" className={'p-2 cursor-pointer'}>
+                  <Tab value="database" className={'p-2 cursor-pointer'}>
                    Database
                  </Tab>
                </Link>
                <Link to="integrations">
-                  <Tab value="/integrations" className={'p-2 cursor-pointer'}>
+                  <Tab value="integrations" className={'p-2 cursor-pointer'}>
                    Integrations
                  </Tab>
                </Link>
                <Link to="settings">
-                  <Tab value="/settings" className={'p-2 cursor-pointer'}>
+                  <Tab value="settings" className={'p-2 cursor-pointer'}>
                    Settings
                  </Tab>
                </Link>
@@ -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 = () => {
      </div>
      <div className="grid grid-cols-3 w-5/6 p-6">
        <div>
-          <Stepper activeStep={activeStep} stepperValues={STEPPER_VALUES} />
+          <Stepper activeStep={activeStep} stepperValues={stepperValues} />
        </div>
        <div className="col-span-2">
          <Outlet />
@@ -32,7 +32,7 @@ const Domains = () => {
    <>
      <div className="flex justify-between p-2">
        <Typography variant="h3">Domain</Typography>
-        <Link to="domain/add">
+        <Link to="add">
          <Button color="blue" variant="outlined" className="rounded-full">
            <i>^</i> Add domain
          </Button>
@@ -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 = () => {
        <i>^</i>It can take up to 48 hours for these updates to reflect
        globally.
      </Alert>
-      <Link to={`/${orgSlug}/projects/${id}`}>
-        <Button
-          className="w-fit"
-          color="blue"
-          onClick={async () => await handleSubmitDomain()}
-        >
-          Finish <i>{'>'}</i>
-        </Button>
-      </Link>
+      <Button className="w-fit" color="blue" onClick={handleSubmitDomain}>
+        Finish <i>{'>'}</i>
+      </Button>
    </div>
  );
 };
@@ -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',
    },
  ];
@@ -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 = [
  {
@@ -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: <AddDomain />,
    children: addDomainRoutes,
  },