Skip to content

Commit b2e5f8f

Browse files
jog1tjog1t
committed
fix(hub): minor polishing (#2444)
<!-- Please make sure there is an issue that this PR is correlated to. --> ## Changes <!-- If there are frontend changes, please include screenshots. -->
1 parent a2aeafd commit b2e5f8f

File tree

22 files changed

+191
-52
lines changed

22 files changed

+191
-52
lines changed

‎frontend/apps/hub/src/components/command-panel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export function CommandPanel({ className }: { className?: string }) {
146146
)}
147147
>
148148
<span className="hidden @[100px]:inline-flex">Search...</span>
149-
<Kbd className="@[100px]:absolute right-[0.3rem] top-[0.3rem] hidden sm:flex">
149+
<Kbd className="@[100px]:absolute right-[0.3rem] top-1/2 -translate-y-1/2 hidden sm:flex">
150150
<Kbd.Key />K
151151
</Kbd>
152152
</Button>

‎frontend/apps/hub/src/components/header/header.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { HeaderRouteLoader } from "./header-route-loader";
1818
import { HeaderSubNav } from "./header-sub-nav";
1919
import { MobileHeaderSubNav } from "./mobile-header-sub-nav";
2020
import { NavItem } from "./nav-item";
21+
import { CommandPanel } from "../command-panel";
2122

2223
const UserProfileButton = () => {
2324
const { profile } = useAuth();
@@ -50,7 +51,7 @@ export function Header({ variant = "opaque" }: HeaderProps) {
5051
return (
5152
<header
5253
className={cn(
53-
" sticky top-0 z-10 flex items-center gap-4 border-b py-2",
54+
" sticky top-0 z-10 flex items-center gap-4 border-b py-2 @container",
5455
{
5556
"bg-background/60 backdrop-blur": variant === "default",
5657
"bg-background": variant === "opaque",
@@ -140,6 +141,7 @@ export function Header({ variant = "opaque" }: HeaderProps) {
140141
</div>
141142
</nav>
142143
<div className="gap-6 font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm">
144+
<CommandPanel className="h-full" />
143145
<NavItem
144146
asChild
145147
className="hidden md:inline-block border px-4 py-2 rounded-md"

‎frontend/apps/hub/src/queries/global.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ const clientOptions: RivetClient.Options = {
133133
...args,
134134
withCredentials: true,
135135
maxRetries: 0,
136+
timeoutMs: 30_000 // 30 seconds
136137
});
137138

138139
return response;

‎frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/actor-versions.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,9 @@ function ProjectBuildsRoute() {
154154
</TableCell>
155155
<TableCell>
156156
<ActorTags
157+
className="max-w-[200px]"
157158
{...build}
159+
truncate={true}
158160
excludeBuiltIn="builds"
159161
/>
160162
</TableCell>

‎frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/actors.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
ActorFeature,
3+
ActorNotFound,
34
ActorsActorDetails,
45
ActorsActorEmptyDetails,
56
ActorsListFiltersSchema,
@@ -31,7 +32,16 @@ function Actor() {
3132
const actor = useAtomValue(currentActorAtom);
3233

3334
if (!actor) {
34-
return null;
35+
return (
36+
<ActorNotFound
37+
features={[
38+
ActorFeature.Config,
39+
ActorFeature.Logs,
40+
ActorFeature.State,
41+
ActorFeature.Connections,
42+
]}
43+
/>
44+
);
3545
}
3646

3747
return (

‎frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/containers.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
ActorFeature,
3+
ActorNotFound,
34
ActorsActorDetails,
45
ActorsActorEmptyDetails,
56
ActorsListFiltersSchema,
@@ -35,7 +36,11 @@ function Actor() {
3536
const actor = useAtomValue(currentActorAtom);
3637

3738
if (!actor) {
38-
return null;
39+
return (
40+
<ActorNotFound
41+
features={[ActorFeature.Config, ActorFeature.Logs]}
42+
/>
43+
);
3944
}
4045

4146
return (
@@ -68,7 +73,10 @@ const ACTORS_VIEW_CONTEXT = {
6873
selectActor: (
6974
<>
7075
No Container selected.
71-
<br /> Select a Container from the list to view its details.
76+
<br />
77+
<span className="text-sm text-muted-foreground">
78+
Select a Container from the list to view its details.
79+
</span>
7280
</>
7381
),
7482
showActorList: "Show Container list",
@@ -78,14 +86,19 @@ const ACTORS_VIEW_CONTEXT = {
7886
actorId: "Container ID",
7987
noMoreActors: "No more Containers to load.",
8088
noActorsMatchFilter: "No Containers match the filters.",
89+
showHiddenActors: "Show hidden Containers",
8190

8291
createActorModal: {
8392
title: "Create Container",
8493
description:
8594
"Choose a build to create a Container from. Container will be created using default settings.",
8695
},
96+
97+
actorNotFound: "Container not found",
98+
actorNotFoundDescription:
99+
"Change your filters to find the Container you are looking for.",
87100
},
88-
requiresManager: false,
101+
canCreate: false,
89102
};
90103

91104
function Content() {

‎frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId._v2/logs.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
CommandGroup,
2828
CommandItem,
2929
SmallText,
30+
LiveBadge,
3031
} from "@rivet-gg/components";
3132
import {
3233
useInfiniteQuery,
@@ -238,6 +239,8 @@ function ProjectFunctionsRoute() {
238239
return (
239240
<div className="flex flex-col max-w-full max-h-full w-full h-full bg-card relative">
240241
<div className="flex px-2 w-full border-b sticky top-0 min-h-[42px]">
242+
<LiveBadge className="my-2" />
243+
<div className="h-full border-l ml-2" />
241244
<input
242245
ref={searchInputRef}
243246
type="text"

‎frontend/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/_v2.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ function Sidebar() {
7878
}}
7979
>
8080
<div className="flex flex-col">
81-
<CommandPanel className="lg:w-full md:w-full mb-2" />
8281
<ul className="w-full flex flex-col gap-2">
8382
{SIDEBAR.map((item, index) => {
8483
if ("items" in item) {

‎frontend/packages/components/src/actors/actor-build.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,18 @@ export function ActorBuild({ actor }: ActorBuildProps) {
4040
<Dl>
4141
<Dt>ID</Dt>
4242
<Dd>
43-
<DiscreteCopyButton size="xs" value={data.id}>
43+
<DiscreteCopyButton
44+
size="xs"
45+
value={data.id}
46+
className="truncate"
47+
>
4448
{data.id}
4549
</DiscreteCopyButton>
4650
</Dd>
4751
<Dt>Created</Dt>
4852
<Dd>
4953
<DiscreteCopyButton
54+
className="truncate"
5055
size="xs"
5156
value={formatISO(data.createdAt)}
5257
>
@@ -63,6 +68,7 @@ export function ActorBuild({ actor }: ActorBuildProps) {
6368
>
6469
<ActorTags
6570
className="justify-start text-foreground"
71+
truncate={false}
6672
tags={data.tags}
6773
/>
6874
</Flex>

‎frontend/packages/components/src/actors/actor-context.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ export const filteredActorsAtom = atom((get) => {
220220

221221
return filter.value.includes(actor.status);
222222
}
223+
224+
return true;
223225
},
224226
);
225227

‎frontend/packages/components/src/actors/actor-general.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export function ActorGeneral({ actor }: ActorGeneralProps) {
5353
>
5454
<ActorTags
5555
className="justify-start text-foreground"
56+
truncate={false}
5657
tags={tags}
5758
/>
5859
</Flex>

‎frontend/packages/components/src/actors/actor-not-found.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Icon, faQuestionSquare } from "@rivet-gg/icons";
2+
import { useActorsView } from "./actors-view-context-provider";
3+
import { actorFiltersAtom, type ActorFeature } from "./actor-context";
4+
import { ActorTabs } from "./actors-actor-details";
5+
import { useAtomValue, useSetAtom } from "jotai";
6+
import { useCallback } from "react";
7+
import { selectAtom } from "jotai/utils";
8+
import { Button } from "../ui/button";
9+
import { FilterOp } from "../ui/filters";
10+
11+
export function ActorNotFound({
12+
features = [],
13+
}: { features?: ActorFeature[] }) {
14+
const { copy } = useActorsView();
15+
16+
const setFilters = useSetAtom(actorFiltersAtom);
17+
const hasDevMode = useAtomValue(
18+
selectAtom(
19+
actorFiltersAtom,
20+
useCallback((filters) => filters.devMode, []),
21+
),
22+
);
23+
24+
return (
25+
<div className="flex flex-col h-full flex-1 pt-2">
26+
<ActorTabs disabled features={features}>
27+
<div className="flex text-center text-foreground flex-1 justify-center items-center flex-col gap-2">
28+
<Icon icon={faQuestionSquare} className="text-4xl" />
29+
<p className="max-w-[400px]">{copy.actorNotFound}</p>
30+
<p className="max-w-[400px] text-sm text-muted-foreground">
31+
{copy.actorNotFoundDescription}
32+
</p>
33+
34+
{!hasDevMode ? (
35+
<Button
36+
className="mt-3"
37+
variant="outline"
38+
size="sm"
39+
onClick={() => {
40+
setFilters((prev) => ({
41+
...prev,
42+
devMode: {
43+
value: ["true"],
44+
operator: FilterOp.EQUAL,
45+
},
46+
}));
47+
}}
48+
>
49+
{copy.showHiddenActors}
50+
</Button>
51+
) : null}
52+
</div>
53+
</ActorTabs>
54+
</div>
55+
);
56+
}

‎frontend/packages/components/src/actors/actor-tags.tsx

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,17 @@ interface ActorTagsProps {
3030
excludeBuiltIn?: keyof typeof BUILT_IN_TAGS;
3131
className?: string;
3232
truncate?: boolean;
33+
copy?: boolean;
34+
hoverable?: boolean;
3335
}
3436

3537
export function ActorTags({
3638
tags = {},
3739
excludeBuiltIn = undefined,
3840
truncate = true,
3941
className,
42+
hoverable = true,
43+
copy = true,
4044
}: ActorTagsProps) {
4145
return (
4246
<div
@@ -54,32 +58,52 @@ export function ActorTags({
5458
: true,
5559
)
5660
.sort(([a], [b]) => a.localeCompare(b))
57-
.map(([key, value]) =>
58-
truncate ? (
59-
<WithTooltip
61+
.map(([key, value]) => {
62+
let trigger = truncate ? (
63+
<ActorTag
6064
key={key}
61-
content={`${key}=${value}`}
62-
trigger={
63-
<DiscreteCopyButton
64-
size="xs"
65-
value={`${key}=${value}`}
66-
>
67-
<ActorTag className="flex-shrink-0 truncate max-w-52 cursor-pointer">
68-
<span>
69-
{key}={value}
70-
</span>
71-
</ActorTag>
72-
</DiscreteCopyButton>
73-
}
74-
/>
75-
) : (
76-
<ActorTag key={key} className="flex-shrink-0">
65+
className="break-all truncate max-w-52 cursor-pointer inline"
66+
>
7767
<span>
7868
{key}={value}
7969
</span>
8070
</ActorTag>
81-
),
82-
)
71+
) : (
72+
<ActorTag key={key}>
73+
<span className="inline break-all max-w-full whitespace-normal">
74+
{key}={value}
75+
</span>
76+
</ActorTag>
77+
);
78+
79+
trigger = copy ? (
80+
<DiscreteCopyButton
81+
key={key}
82+
size="xs"
83+
className={cn(
84+
"h-auto py-0.5 text-left max-w-full min-w-0 break-all",
85+
truncate && "flex max-w-52",
86+
)}
87+
value={`${key}=${value}`}
88+
>
89+
<Slot className="mr-1 inline">
90+
{trigger}
91+
</Slot>
92+
</DiscreteCopyButton>
93+
) : (
94+
trigger
95+
);
96+
97+
return truncate && hoverable && !copy ? (
98+
<WithTooltip
99+
key={key}
100+
content={`${key}=${value}`}
101+
trigger={trigger}
102+
/>
103+
) : (
104+
trigger
105+
);
106+
})
83107
: null}
84108
</div>
85109
);

‎frontend/packages/components/src/actors/actors-actor-details.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const ActorsActorEmptyDetails = ({
7979
);
8080
};
8181

82-
function ActorTabs({
82+
export function ActorTabs({
8383
tab,
8484
features,
8585
onTabChange,

‎frontend/packages/components/src/actors/actors-list-row.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,10 @@ function Tags({ actor }: { actor: ActorAtom }) {
8282
<div className="relative overflow-r-gradient">
8383
<ActorTags
8484
className="flex-nowrap empty:block overflow-hidden"
85-
truncate={false}
85+
truncate={true}
86+
copy={false}
8687
tags={tags}
88+
hoverable={false}
8789
excludeBuiltIn="actors"
8890
/>
8991
</div>
@@ -94,7 +96,9 @@ function Tags({ actor }: { actor: ActorAtom }) {
9496
<ActorTags
9597
excludeBuiltIn="actors"
9698
className="empty:block"
99+
copy={false}
97100
truncate={false}
101+
hoverable={false}
98102
tags={tags}
99103
/>
100104
</>

0 commit comments

Comments
 (0)