feat: dynamic project success page and update links (#220)
### TL;DR Integrates project data fetching for dynamic subdomain display on the Project Deployment Success page and the OverviewTabPanel. ### What changed? - Updated `Id.tsx` to fetch project data and dynamically display project's subdomain after deployment. - Modified `Overview.tsx` to make project's subdomain a clickable link. ### How to test? 1. Deploy a new project and check the deployment success page for correct subdomain display. 2. Open a project's overview tab and click the subdomain link to ensure it navigates correctly. ### Why make this change? Improves user experience by displaying the actual subdomain and making it clickable, ensuring users can conveniently verify their deployment and access project domain. ---
This commit is contained in:
Vivian Phung
GitHub
parent
44015d5451
commit
dee84f18cb
@ -11,98 +11,128 @@ import {
|
|||||||
import { Heading } from 'components/shared/Heading';
|
import { Heading } from 'components/shared/Heading';
|
||||||
|
|
||||||
import logoAnimation from 'components/../../public/lottie/logo.json';
|
import logoAnimation from 'components/../../public/lottie/logo.json';
|
||||||
|
import { useGQLClient } from 'context/GQLClientContext';
|
||||||
|
import { Project } from 'gql-client';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
const Id = () => {
|
const Id = () => {
|
||||||
const { id, orgSlug } = useParams();
|
const { id, orgSlug } = useParams();
|
||||||
|
const client = useGQLClient();
|
||||||
|
const [project, setProject] = useState<Project | null>(null);
|
||||||
|
|
||||||
const handleSetupDomain = () => {
|
const handleSetupDomain = async () => {
|
||||||
//TODO: Implement this
|
if (id) {
|
||||||
|
// console.log('id', id);
|
||||||
|
// console.log('getting project for id', id);
|
||||||
|
const project = await client.getProject(id);
|
||||||
|
// console.log('project found:', project);
|
||||||
|
if (project && project.project) {
|
||||||
|
// console.log('project:', project.project);
|
||||||
|
setProject(project.project);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
handleSetupDomain();
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
|
<>
|
||||||
{/* Icon */}
|
{project ? (
|
||||||
<div className="flex justify-center">
|
<div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
|
||||||
<Lottie animationData={logoAnimation} loop={false} size={40} />
|
{/* Icon */}
|
||||||
</div>
|
<div className="flex justify-center">
|
||||||
|
<Lottie animationData={logoAnimation} loop={false} size={40} />
|
||||||
{/* Heading */}
|
|
||||||
<div className="flex flex-col items-center gap-1.5">
|
|
||||||
<Heading as="h3" className="font-medium text-xl">
|
|
||||||
Project deployed successfully.
|
|
||||||
</Heading>
|
|
||||||
<p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
|
|
||||||
Your project has been deployed at{' '}
|
|
||||||
<Button
|
|
||||||
className="no-underline text-elements-link"
|
|
||||||
// TODO: use dynamic value
|
|
||||||
href="https://www.iglootools.snowballtools.xyz"
|
|
||||||
as="a"
|
|
||||||
variant="link-emphasized"
|
|
||||||
external
|
|
||||||
leftIcon={<LinkChainIcon />}
|
|
||||||
>
|
|
||||||
{/* // TODO: use dynamic value */}
|
|
||||||
www.iglootools.snowballtools.xyz
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Card */}
|
|
||||||
<div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
|
|
||||||
{/* Trigger question */}
|
|
||||||
<div className="flex gap-2 justify-center items-center py-3">
|
|
||||||
<div className="h-5 w-5">
|
|
||||||
<QuestionMarkRoundFilledIcon size={18} />
|
|
||||||
</div>
|
</div>
|
||||||
<Heading as="h5" className="font-sans font-medium text-sm">
|
|
||||||
{`Wondering what's next?`}
|
|
||||||
</Heading>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CTA card */}
|
{/* Heading */}
|
||||||
<div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
|
<div className="flex flex-col items-center gap-1.5">
|
||||||
<div className="flex gap-2">
|
<Heading as="h3" className="font-medium text-xl">
|
||||||
<Badge variant="secondary">1</Badge>
|
Project deployed successfully.
|
||||||
<div className="space-y-3">
|
</Heading>
|
||||||
<div className="flex flex-col gap-1">
|
<p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
|
||||||
<Heading as="h6" className="text-sm font-sans">
|
Your project has been deployed at{' '}
|
||||||
Add a custom domain
|
<Button
|
||||||
</Heading>
|
className="no-underline text-elements-link"
|
||||||
<p className="text-xs text-elements-low-em font-sans">
|
// TODO: use dynamic value
|
||||||
Make it easy for your visitors to remember your URL with a
|
href={project ? `https://${project.subDomain}` : ''}
|
||||||
custom domain.
|
as="a"
|
||||||
</p>
|
variant="link-emphasized"
|
||||||
</div>
|
external
|
||||||
<Button onClick={handleSetupDomain} variant="tertiary" size="sm">
|
leftIcon={<LinkChainIcon />}
|
||||||
Setup domain
|
>
|
||||||
|
{project.subDomain}
|
||||||
</Button>
|
</Button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card */}
|
||||||
|
<div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
|
||||||
|
{/* Trigger question */}
|
||||||
|
<div className="flex gap-2 justify-center items-center py-3">
|
||||||
|
<div className="h-5 w-5">
|
||||||
|
<QuestionMarkRoundFilledIcon size={18} />
|
||||||
|
</div>
|
||||||
|
<Heading as="h5" className="font-sans font-medium text-sm">
|
||||||
|
{`Wondering what's next?`}
|
||||||
|
</Heading>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA card */}
|
||||||
|
<div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Badge variant="secondary">1</Badge>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<Heading as="h6" className="text-sm font-sans">
|
||||||
|
Add a custom domain
|
||||||
|
</Heading>
|
||||||
|
<p className="text-xs text-elements-low-em font-sans">
|
||||||
|
Make it easy for your visitors to remember your URL with a
|
||||||
|
custom domain.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={handleSetupDomain}
|
||||||
|
variant="tertiary"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Setup domain
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA Buttons */}
|
||||||
|
<div className="flex flex-col lg:flex-row justify-center gap-3">
|
||||||
|
<div className="w-full lg:w-fit">
|
||||||
|
<Link to="/">
|
||||||
|
<Button
|
||||||
|
leftIcon={<ArrowLeftCircleFilledIcon />}
|
||||||
|
fullWidth
|
||||||
|
variant="tertiary"
|
||||||
|
>
|
||||||
|
Back to projects
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="w-full lg:w-fit">
|
||||||
|
<Link to={`/${orgSlug}/projects/${id}`}>
|
||||||
|
<Button fullWidth variant="primary">
|
||||||
|
View project
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<></>
|
||||||
{/* CTA Buttons */}
|
)}
|
||||||
<div className="flex flex-col lg:flex-row justify-center gap-3">
|
</>
|
||||||
<div className="w-full lg:w-fit">
|
|
||||||
<Link to="/">
|
|
||||||
<Button
|
|
||||||
leftIcon={<ArrowLeftCircleFilledIcon />}
|
|
||||||
fullWidth
|
|
||||||
variant="tertiary"
|
|
||||||
>
|
|
||||||
Back to projects
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="w-full lg:w-fit">
|
|
||||||
<Link to={`/${orgSlug}/projects/${id}`}>
|
|
||||||
<Button fullWidth variant="primary">
|
|
||||||
View project
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -131,9 +131,12 @@ const OverviewTabPanel = () => {
|
|||||||
<Heading className="text-lg leading-6 font-medium truncate">
|
<Heading className="text-lg leading-6 font-medium truncate">
|
||||||
{project.name}
|
{project.name}
|
||||||
</Heading>
|
</Heading>
|
||||||
<p className="text-sm text-elements-low-em tracking-tight truncate">
|
<a
|
||||||
|
href={`https://${project.subDomain}`}
|
||||||
|
className="text-sm text-elements-low-em tracking-tight truncate"
|
||||||
|
>
|
||||||
{project.subDomain}
|
{project.subDomain}
|
||||||
</p>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<OverviewInfo label="Domain" icon={<GlobeIcon />}>
|
<OverviewInfo label="Domain" icon={<GlobeIcon />}>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user