Skip to content

Commit 3c0639e

Browse files
samejrsamejr
committed
Updates the Deploy page inspector table to the new style
1 parent 46b979e commit 3c0639e

File tree

1 file changed

+106
-96
lines changed
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam

1 file changed

+106
-96
lines changed

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx

Lines changed: 106 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
44
import { ExitIcon } from "~/assets/icons/ExitIcon";
55
import { UserAvatar } from "~/components/UserProfilePhoto";
66
import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
7-
import { CodeBlock } from "~/components/code/CodeBlock";
87
import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
98
import { Badge } from "~/components/primitives/Badge";
109
import { LinkButton } from "~/components/primitives/Buttons";
@@ -108,107 +107,118 @@ export default function Page() {
108107

109108
<LinkButton
110109
to={`${v3DeploymentsPath(organization, project)}${page ? `?page=${page}` : ""}`}
111-
variant="minimal/medium"
112-
LeadingIcon={ExitIcon}
110+
variant="minimal/small"
111+
TrailingIcon={ExitIcon}
113112
shortcut={{ key: "esc" }}
113+
shortcutPosition="before-trailing-icon"
114+
className="pl-1"
114115
/>
115116
</div>
116-
<div className="overflow-y-auto px-3 pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
117-
<div className="flex flex-col gap-4">
118-
<Property.Table>
119-
<Property.Item>
120-
<Property.Label>Deploy</Property.Label>
121-
<Property.Value className="flex items-center gap-2">
122-
<span>{deployment.shortCode}</span>
123-
{deployment.label && <Badge variant="outline-rounded">{deployment.label}</Badge>}
124-
</Property.Value>
125-
</Property.Item>
126-
<Property.Item>
127-
<Property.Label>Environment</Property.Label>
128-
<Property.Value>
129-
<EnvironmentLabel environment={deployment.environment} userName={usernameForEnv} />
130-
</Property.Value>
131-
</Property.Item>
132-
<Property.Item>
133-
<Property.Label>Version</Property.Label>
134-
<Property.Value>{deployment.version}</Property.Value>
135-
</Property.Item>
136-
<Property.Item>
137-
<Property.Label>Status</Property.Label>
138-
<Property.Value>
139-
<DeploymentStatus
140-
status={deployment.status}
141-
isBuilt={deployment.isBuilt}
142-
className="text-sm"
143-
/>
144-
</Property.Value>
145-
</Property.Item>
146-
<Property.Item>
147-
<Property.Label>Tasks</Property.Label>
148-
<Property.Value>{deployment.tasks ? deployment.tasks.length : "–"}</Property.Value>
149-
</Property.Item>
150-
<Property.Item>
151-
<Property.Label>SDK Version</Property.Label>
152-
<Property.Value>{deployment.sdkVersion ? deployment.sdkVersion : "–"}</Property.Value>
153-
</Property.Item>
154-
<Property.Item>
155-
<Property.Label>CLI Version</Property.Label>
156-
<Property.Value>{deployment.cliVersion ? deployment.cliVersion : "–"}</Property.Value>
157-
</Property.Item>
158-
<Property.Item>
159-
<Property.Label>Started at</Property.Label>
160-
<Property.Value>
161-
<DateTimeAccurate date={deployment.createdAt} /> UTC
162-
</Property.Value>
163-
</Property.Item>
164-
<Property.Item>
165-
<Property.Label>Built at</Property.Label>
166-
<Property.Value>
167-
{deployment.builtAt ? (
168-
<>
169-
<DateTimeAccurate date={deployment.builtAt} /> UTC
170-
</>
171-
) : (
172-
"–"
173-
)}
174-
</Property.Value>
175-
</Property.Item>
176-
<Property.Item>
177-
<Property.Label>Deployed at</Property.Label>
178-
<Property.Value>
179-
{deployment.deployedAt ? (
180-
<>
181-
<DateTimeAccurate date={deployment.deployedAt} /> UTC
182-
</>
183-
) : (
184-
"–"
185-
)}
186-
</Property.Value>
187-
</Property.Item>
188-
<Property.Item>
189-
<Property.Label>Deployed by</Property.Label>
190-
<Property.Value>
191-
{deployment.deployedBy ? (
192-
<div className="flex items-center gap-1">
193-
<UserAvatar
194-
avatarUrl={deployment.deployedBy.avatarUrl}
195-
name={deployment.deployedBy.name ?? deployment.deployedBy.displayName}
196-
className="h-4 w-4"
197-
/>
198-
<Paragraph variant="small">
199-
{deployment.deployedBy.name ?? deployment.deployedBy.displayName}
200-
</Paragraph>
201-
</div>
202-
) : (
203-
"–"
204-
)}
205-
</Property.Value>
206-
</Property.Item>
207-
</Property.Table>
117+
<div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
118+
<div className="flex flex-col">
119+
<div className="p-3">
120+
<Property.Table>
121+
<Property.Item>
122+
<Property.Label>Deploy</Property.Label>
123+
<Property.Value className="flex items-center gap-2">
124+
<span>{deployment.shortCode}</span>
125+
{deployment.label && <Badge variant="outline-rounded">{deployment.label}</Badge>}
126+
</Property.Value>
127+
</Property.Item>
128+
<Property.Item>
129+
<Property.Label>Environment</Property.Label>
130+
<Property.Value>
131+
<EnvironmentLabel
132+
environment={deployment.environment}
133+
userName={usernameForEnv}
134+
/>
135+
</Property.Value>
136+
</Property.Item>
137+
<Property.Item>
138+
<Property.Label>Version</Property.Label>
139+
<Property.Value>{deployment.version}</Property.Value>
140+
</Property.Item>
141+
<Property.Item>
142+
<Property.Label>Status</Property.Label>
143+
<Property.Value>
144+
<DeploymentStatus
145+
status={deployment.status}
146+
isBuilt={deployment.isBuilt}
147+
className="text-sm"
148+
/>
149+
</Property.Value>
150+
</Property.Item>
151+
<Property.Item>
152+
<Property.Label>Tasks</Property.Label>
153+
<Property.Value>{deployment.tasks ? deployment.tasks.length : "–"}</Property.Value>
154+
</Property.Item>
155+
<Property.Item>
156+
<Property.Label>SDK Version</Property.Label>
157+
<Property.Value>
158+
{deployment.sdkVersion ? deployment.sdkVersion : "–"}
159+
</Property.Value>
160+
</Property.Item>
161+
<Property.Item>
162+
<Property.Label>CLI Version</Property.Label>
163+
<Property.Value>
164+
{deployment.cliVersion ? deployment.cliVersion : "–"}
165+
</Property.Value>
166+
</Property.Item>
167+
<Property.Item>
168+
<Property.Label>Started at</Property.Label>
169+
<Property.Value>
170+
<DateTimeAccurate date={deployment.createdAt} /> UTC
171+
</Property.Value>
172+
</Property.Item>
173+
<Property.Item>
174+
<Property.Label>Built at</Property.Label>
175+
<Property.Value>
176+
{deployment.builtAt ? (
177+
<>
178+
<DateTimeAccurate date={deployment.builtAt} /> UTC
179+
</>
180+
) : (
181+
"–"
182+
)}
183+
</Property.Value>
184+
</Property.Item>
185+
<Property.Item>
186+
<Property.Label>Deployed at</Property.Label>
187+
<Property.Value>
188+
{deployment.deployedAt ? (
189+
<>
190+
<DateTimeAccurate date={deployment.deployedAt} /> UTC
191+
</>
192+
) : (
193+
"–"
194+
)}
195+
</Property.Value>
196+
</Property.Item>
197+
<Property.Item>
198+
<Property.Label>Deployed by</Property.Label>
199+
<Property.Value>
200+
{deployment.deployedBy ? (
201+
<div className="flex items-center gap-1">
202+
<UserAvatar
203+
avatarUrl={deployment.deployedBy.avatarUrl}
204+
name={deployment.deployedBy.name ?? deployment.deployedBy.displayName}
205+
className="h-4 w-4"
206+
/>
207+
<Paragraph variant="small">
208+
{deployment.deployedBy.name ?? deployment.deployedBy.displayName}
209+
</Paragraph>
210+
</div>
211+
) : (
212+
"–"
213+
)}
214+
</Property.Value>
215+
</Property.Item>
216+
</Property.Table>
217+
</div>
208218

209219
{deployment.tasks ? (
210220
<div className="divide-y divide-charcoal-800 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
211-
<Table>
221+
<Table variant="bright">
212222
<TableHeader>
213223
<TableHeaderCell className="px-2">Task</TableHeaderCell>
214224
<TableHeaderCell className="px-2">File path</TableHeaderCell>

0 commit comments

Comments
 (0)