Skip to content

Update deployment responsiveness #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Update deployment responsiveness #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
49220dd
fix alignment
waiscodes Apr 8, 2025
509506b
remove spacing
waiscodes Apr 10, 2025
f53a811
fix preview layout
waiscodes Apr 16, 2025
74a04d7
add tooltip to links
waiscodes Apr 16, 2025
2b57901
Make card clickable, prevent propagation
waiscodes Apr 16, 2025
6e210df
collapse all button
waiscodes Apr 16, 2025
bb1ed0c
collapse and expand file explorer
waiscodes Apr 16, 2025
cf91a94
add expand all icon
waiscodes Apr 16, 2025
4c56ce2
Make mobile responsive
waiscodes Apr 16, 2025
bee5789
add tooltips
waiscodes Apr 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 125 additions & 86 deletions web/src/gui/deployments/DeploymentPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Link } from '@tanstack/react-router';
import { Link, useNavigate } from '@tanstack/react-router';
import { FC } from 'react';
import { FiClock, FiFileText, FiGitCommit } from 'react-icons/fi';
import TimeAgo from 'react-timeago-i18n';
Expand Down Expand Up @@ -31,6 +31,7 @@ export const DeploymentPreview: FC<{
siteIdQuery ?? '',
deployment_id ?? ''
);
const navigate = useNavigate();

const { data: previews } = deployment_id
? useDeploymentPreviews(siteIdQuery ?? '', deployment_id ?? '')
Expand All @@ -49,18 +50,38 @@ export const DeploymentPreview: FC<{
githubContext?.data.workflow ?? ''
);

const handleCardClick = (event: any) => {
event.preventDefault();

navigate({
to: '/site/$siteId/deployment/$deploymentId',
params: {
siteId: deployment?.site_id ?? '',
deploymentId: deployment?.deployment_id ?? '',
},
});
};

if (githubContext) {
return (
<div className="card flex flex-wrap items-stretch justify-stretch gap-4">
<div
onClick={handleCardClick}
onKeyDown={handleCardClick}
role="button"
tabIndex={0}
className="card flex flex-wrap items-stretch justify-stretch gap-4"
>
<Link
to="/site/$siteId/deployment/$deploymentId"
params={{
deploymentId: deployment?.deployment_id ?? '',
siteId: deployment?.site_id ?? '',
}}
className="block h-fit w-full cursor-pointer md:h-screen md:max-h-32 md:w-fit"
title="View deployment details"
onClick={(event) => event.stopPropagation()}
>
<div className="bg-secondary aspect-video h-full min-h-24 rounded-md border drop-shadow-sm md:max-h-48">
<div className="aspect-video h-full min-h-24 rounded-md border bg-secondary drop-shadow-sm md:max-h-48">
{previews && previews.length > 0 && (
<img
alt="Deployment Preview"
Expand All @@ -70,98 +91,115 @@ export const DeploymentPreview: FC<{
)}
</div>
</Link>
<div className="w-full py-2 md:w-fit md:grow">
<div className="flex w-fit items-center gap-2">
<Link
to="/site/$siteId/deployment/$deploymentId"
params={{
deploymentId: deployment?.deployment_id ?? '',
siteId: deployment?.site_id ?? '',
}}
className="hover:text-link flex w-fit items-center gap-2 hover:underline"
>
{githubContext.data.commit.message}
</Link>
<WorkflowStatusIndicator
status={githubContext.data.workflow_status}
/>
<div className="flex grow flex-wrap justify-between">
<div className="md:w-fit md:grow">
<div className="flex w-fit items-center gap-2">
<Link
to="/site/$siteId/deployment/$deploymentId"
params={{
deploymentId:
deployment?.deployment_id ?? '',
siteId: deployment?.site_id ?? '',
}}
className="flex w-fit items-center gap-2 hover:text-link hover:underline"
title="View deployment details"
onClick={(event) => event.stopPropagation()}
>
{githubContext.data.commit.message}
</Link>
<WorkflowStatusIndicator
status={githubContext.data.workflow_status}
/>
</div>
<div className="w-fit">
<Link
to={githubContext.data.commit.url}
className="flex w-fit items-center gap-1 text-muted hover:text-link hover:underline"
target="_blank"
title="View commit on GitHub"
onClick={(event) => event.stopPropagation()}
>
<FiGitCommit />
{githubContext.data.commit.id.slice(0, 7)}
</Link>
<Link
to={githubContext.workflowUrl}
className="flex w-fit items-center gap-1 text-muted hover:text-link hover:underline"
target="_blank"
title="View workflow on GitHub"
onClick={(event) => event.stopPropagation()}
>
{!workflowStartsWithEmoji && <FiFileText />}
{githubContext.data.workflow}
</Link>
{githubContext.duration &&
match(githubContext.duration)
.with({ type: 'completed' }, (duration) => (
<div className="flex items-center gap-1 text-muted">
<FiClock />
{secondsToDuration(
duration.duration
)}
</div>
))
.with({ type: 'pending' }, (duration) => (
<div className="flex animate-pulse items-center gap-1 text-muted">
<FiClock className="animate-spin" />
<LiveAgo
date={
new Date(duration.startedAt)
}
/>
</div>
))
.otherwise(() => <></>)}
</div>
</div>
<div className="w-fit">
<div className="flex flex-col items-end gap-2">
<Link
to={githubContext.data.commit.url}
className="hover:text-link text-muted flex w-fit items-center gap-1 hover:underline"
to={githubContext.workflowUrl}
className="w-fit rounded-md bg-secondary px-2 py-0"
target="_blank"
title="View workflow run on GitHub"
onClick={(event) => event.stopPropagation()}
>
<FiGitCommit />
{githubContext.data.commit.id.slice(0, 7)}
{githubContext.data.event} #{' '}
{githubContext.data.runNumber}
</Link>
<Link
to={githubContext.workflowUrl}
className="hover:text-link text-muted flex w-fit items-center gap-1 hover:underline"
to={
`https://github.com/${githubContext.data.commit.author.username}` as any
}
className="flex items-center gap-2 hover:text-link hover:underline"
target="_blank"
title="View author's GitHub profile"
onClick={(event) => event.stopPropagation()}
>
{!workflowStartsWithEmoji && <FiFileText />}
{githubContext.data.workflow}
</Link>
{githubContext.duration &&
match(githubContext.duration)
.with({ type: 'completed' }, (duration) => (
<div className="text-muted flex items-center gap-1">
<FiClock />
{secondsToDuration(duration.duration)}
</div>
))
.with({ type: 'pending' }, (duration) => (
<div className="text-muted flex animate-pulse items-center gap-1">
<FiClock className="animate-spin" />
<LiveAgo
date={new Date(duration.startedAt)}
/>
</div>
))
.otherwise(() => <></>)}
</div>
</div>
<div className="flex flex-col items-end justify-center gap-2 ">
<Link
to={githubContext.workflowUrl}
className="bg-secondary w-fit rounded-md border px-2 py-0"
target="_blank"
>
{githubContext.data.event} #{' '}
{githubContext.data.runNumber}
</Link>
<Link
to={
`https://github.com/${githubContext.data.commit.author.username}` as any
}
className="hover:text-link flex items-center gap-2 hover:underline"
target="_blank"
>
<span>{githubContext.data.commit.author.name}</span>
<img
src={`https://github.com/${githubContext.data.commit.author.username}.png`}
className="size-6 rounded-sm"
alt={githubContext.data.commit.author.name}
/>
</Link>
{githubContext.data.commit.timestamp && (
<div className="text-muted">
<TimeAgo
date={
new Date(
githubContext.data.commit.timestamp
)
}
formatOptions={{
numeric: 'always',
style: 'long',
}}
<span>{githubContext.data.commit.author.name}</span>
<img
src={`https://github.com/${githubContext.data.commit.author.username}.png`}
className="size-6 rounded-sm"
alt={githubContext.data.commit.author.name}
/>
</div>
)}
</Link>
{githubContext.data.commit.timestamp && (
<div className="text-muted">
<TimeAgo
date={
new Date(
githubContext.data.commit.timestamp
)
}
formatOptions={{
numeric: 'always',
style: 'long',
}}
/>
</div>
)}

{/* <div>{githubContext.data.commit.timestamp}</div> */}
{/* <div>{githubContext.data.commit.timestamp}</div> */}
</div>
</div>
</div>
);
Expand All @@ -176,8 +214,9 @@ export const DeploymentPreview: FC<{
siteId: deployment?.site_id ?? '',
}}
className="block h-fit w-full cursor-pointer md:h-screen md:max-h-32 md:w-fit"
title="View deployment details"
>
<div className="bg-secondary aspect-video h-full min-h-24 overflow-hidden rounded-md border drop-shadow-sm md:max-h-48">
<div className="aspect-video h-full min-h-24 overflow-hidden rounded-md border bg-secondary drop-shadow-sm md:max-h-48">
{previews && previews.length > 0 && (
<img
alt="Deployment Preview"
Expand Down
2 changes: 1 addition & 1 deletion web/src/gui/deployments/DeploymentPreviewCover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const DeploymentPreviewCover: FC<{
return (
<div className="flex">
<ModalRoot>
<div className="aspect-video h-fit w-full max-w-sm overflow-hidden rounded-md border border-gray-200 bg-gray-100">
<div className="aspect-video h-fit w-full overflow-hidden rounded-md border border-gray-200 bg-gray-100 md:max-w-md">
<ModalTrigger>
{previews && previews.length > 0 && (
<img
Expand Down
2 changes: 1 addition & 1 deletion web/src/gui/deployments/context/context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const DeploymentContext: FC<{
);

return (
<div className="card no-padding flex gap-4 p-4">
<div className="card no-padding flex flex-col gap-4 p-4 md:flex-row">
<div className="">
<DeploymentPreviewCover
siteId={siteId}
Expand Down
21 changes: 13 additions & 8 deletions web/src/gui/deployments/context/github.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,25 +105,27 @@ export const GithubDeploymentContext: FC<{
return (
<div className="flex grow flex-col justify-center gap-2">
<div className="flex grow items-start justify-between gap-4">
<div className="flex h-full flex-col justify-center gap-1">
<div className="flex h-full flex-col justify-center gap-1 md:justify-start">
<div className="flex items-center gap-2">
<div className="font-bold">
{context.data.commit.message}
</div>
{decoratedContext.workflowUrl && (
<Link
to={decoratedContext.workflowUrl}
className="hover:text-link flex items-center gap-2 hover:underline"
className="flex items-center gap-2 hover:text-link hover:underline"
target="_blank"
title="View workflow run"
>
<FiFileText />
</Link>
)}
{decoratedContext.data.commit.url && (
<Link
to={decoratedContext.data.commit.url}
className="hover:text-link flex items-center gap-2 hover:underline"
className="flex items-center gap-2 hover:text-link hover:underline"
target="_blank"
title="View commit details"
>
<FiGitCommit />
</Link>
Expand All @@ -132,16 +134,17 @@ export const GithubDeploymentContext: FC<{
<div className="space-y-2">
<Link
to={decoratedContext.repoUrl}
className="hover:text-link text-muted flex w-fit items-center gap-1 hover:underline"
className="flex w-fit items-center gap-1 text-muted hover:text-link hover:underline"
target="_blank"
title="View repository"
>
<FiGitCommit />
{decoratedContext.data.commit.id.slice(0, 7)}
</Link>
</div>
</div>
<div className="flex flex-col items-end justify-center">
<div className="bg-secondary w-fit rounded-md border px-2 py-0">
<div className="w-fit rounded-md border bg-secondary px-2 py-0">
{context.data.event}
</div>
<div>
Expand All @@ -151,15 +154,16 @@ export const GithubDeploymentContext: FC<{
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid gap-2 sm:grid-cols-1 lg:grid-cols-2">
<div className="mt-auto space-y-1">
<div className="text-muted">Created by</div>
<Link
to={
`https://github.com/${context.data.commit.author.username}` as any
}
className="hover:text-link flex items-center gap-2 hover:underline"
className="flex items-center gap-2 hover:text-link hover:underline"
target="_blank"
title={`View ${context.data.commit.author.name}'s GitHub profile`}
>
<img
src={`https://github.com/${context.data.commit.author.username}.png`}
Expand All @@ -183,7 +187,7 @@ export const GithubDeploymentContext: FC<{
<div className="text-muted">Duration</div>
{match(decoratedContext.duration)
.with({ type: 'completed' }, (duration) => (
<div className="text-default flex items-center gap-1.5">
<div className="flex items-center gap-1.5 text-default">
<FiClock />
{secondsToDuration(duration.duration)}
</div>
Expand All @@ -208,6 +212,7 @@ export const GithubDeploymentContext: FC<{
to={decoratedContext.workflowUrl}
className="flex items-center gap-1.5 hover:underline"
target="_blank"
title="View workflow details"
>
{!workflowStartsWithEmoji && <FiFileText />}
<span>{decoratedContext.data.workflow}</span>
Expand Down
Loading