Skip to content

fix: give more room to lonely resource metadata items #9832

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

Merged
merged 5 commits into from
Sep 25, 2023
+337 −152
Merged

fix: give more room to lonely resource metadata items #9832

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e8bb034
better story for resource metadata designs
aslilac Sep 22, 2023
185b8b0
allow single metadata items to fill entire grid width
aslilac Sep 22, 2023
05d2c0a
minor tweaks to `ResourceCard` layout
aslilac Sep 22, 2023
fe794e3
fix tests and stories
aslilac Sep 22, 2023
b449f4e
🧹
aslilac Sep 22, 2023
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
95 changes: 36 additions & 59 deletions site/src/components/Resources/ResourceCard.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -8,41 +8,14 @@ import { AgentRow } from "./AgentRow";
import { ResourceCard } from "./ResourceCard";
import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
import type { Meta, StoryObj } from "@storybook/react";
import { type WorkspaceAgent } from "api/typesGenerated";

const meta: Meta<typeof ResourceCard> = {
title: "components/ResourceCard",
title: "components/Resources/ResourceCard",
component: ResourceCard,
args: {
resource: MockWorkspaceResource,
agentRow: (agent) => (
<ProxyContext.Provider
value={{
proxyLatencies: MockProxyLatencies,
proxy: getPreferredProxy([], undefined),
proxies: [],
isLoading: false,
isFetched: true,
setProxy: () => {
return;
},
clearProxy: () => {
return;
},
refetchProxyLatencies: (): Date => {
return new Date();
},
}}
>
<AgentRow
showApps
key={agent.id}
agent={agent}
workspace={MockWorkspace}
serverVersion=""
onUpdateAgent={action("updateAgent")}
/>
</ProxyContext.Provider>
),
agentRow: getAgentRow,
},
};

@@ -96,34 +69,38 @@ export const BunchOfMetadata: Story = {
},
],
},
agentRow: (agent) => (
<ProxyContext.Provider
value={{
proxyLatencies: MockProxyLatencies,
proxy: getPreferredProxy([], undefined),
proxies: [],
isLoading: false,
isFetched: true,
setProxy: () => {
return;
},
clearProxy: () => {
return;
},
refetchProxyLatencies: (): Date => {
return new Date();
},
}}
>
<AgentRow
showApps
key={agent.id}
agent={agent}
workspace={MockWorkspace}
serverVersion=""
onUpdateAgent={action("updateAgent")}
/>
</ProxyContext.Provider>
),
agentRow: getAgentRow,
},
};

function getAgentRow(agent: WorkspaceAgent): JSX.Element {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not create a component instead of having a getAgentRow? ExampleAgentRow?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

idk, this is just the way that it's already set up. 😅

return (
<ProxyContext.Provider
value={{
proxyLatencies: MockProxyLatencies,
proxy: getPreferredProxy([], undefined),
proxies: [],
isLoading: false,
isFetched: true,
setProxy: () => {
return;
},
clearProxy: () => {
return;
},
refetchProxyLatencies: (): Date => {
return new Date();
},
}}
>
<AgentRow
showApps
key={agent.id}
agent={agent}
workspace={MockWorkspace}
serverVersion=""
onUpdateAgent={action("updateAgent")}
/>
</ProxyContext.Provider>
);
}
112 changes: 59 additions & 53 deletions site/src/components/Resources/ResourceCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -10,8 +10,8 @@ import {
} from "components/DropdownArrows/DropdownArrows";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { Maybe } from "components/Conditionals/Maybe";
import { CopyableValue } from "components/CopyableValue/CopyableValue";
import { type Theme } from "@mui/material/styles";

export interface ResourceCardProps {
resource: WorkspaceResource;
@@ -21,12 +21,20 @@ export interface ResourceCardProps {
export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
useState(false);
const styles = useStyles();
const metadataToDisplay = resource.metadata ?? [];
const visibleMetadata = shouldDisplayAllMetadata
? metadataToDisplay
: metadataToDisplay.slice(0, 4);

// Add one to `metadataLength` if the resource has a cost, and hide one
// additional metadata item, because cost is displayed in the same grid.
let metadataLength = resource.metadata?.length ?? 0;
if (resource.daily_cost > 0) {
metadataLength += 1;
visibleMetadata.pop();
}
const styles = useStyles({ metadataLength });

return (
<div key={resource.id} className={`${styles.resourceCard} resource-card`}>
<Stack
@@ -49,57 +57,52 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
</div>
</Stack>

<Stack alignItems="flex-start" direction="row" spacing={5}>
<div className={styles.metadataHeader}>
{resource.daily_cost > 0 && (
<div className={styles.metadata}>
<div className={styles.metadataLabel}>
<b>cost</b>
</div>
<div className={styles.metadataHeader}>
{resource.daily_cost > 0 && (
<div className={styles.metadata}>
<div className={styles.metadataLabel}>
<b>cost</b>
</div>
<div className={styles.metadataValue}>{resource.daily_cost}</div>
</div>
)}
{visibleMetadata.map((meta) => {
return (
<div className={styles.metadata} key={meta.key}>
<div className={styles.metadataLabel}>{meta.key}</div>
<div className={styles.metadataValue}>
{resource.daily_cost}
{meta.sensitive ? (
<SensitiveValue value={meta.value} />
) : (
<CopyableValue value={meta.value}>
{meta.value}
</CopyableValue>
)}
</div>
</div>
)}
{visibleMetadata.map((meta) => {
return (
<div className={styles.metadata} key={meta.key}>
<div className={styles.metadataLabel}>{meta.key}</div>
<div className={styles.metadataValue}>
{meta.sensitive ? (
<SensitiveValue value={meta.value} />
) : (
<CopyableValue value={meta.value}>
{meta.value}
</CopyableValue>
)}
</div>
</div>
);
})}
</div>

<Maybe condition={metadataToDisplay.length > 4}>
<Tooltip
title={
shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"
}
);
})}
</div>
{metadataLength > 4 && (
<Tooltip
title={
shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"
}
>
<IconButton
onClick={() => {
setShouldDisplayAllMetadata((value) => !value);
}}
size="large"
>
<IconButton
onClick={() => {
setShouldDisplayAllMetadata((value) => !value);
}}
size="large"
>
{shouldDisplayAllMetadata ? (
<CloseDropdown margin={false} />
) : (
<OpenDropdown margin={false} />
)}
</IconButton>
</Tooltip>
</Maybe>
</Stack>
{shouldDisplayAllMetadata ? (
<CloseDropdown margin={false} />
) : (
<OpenDropdown margin={false} />
)}
</IconButton>
</Tooltip>
)}
</Stack>

{resource.agents && resource.agents.length > 0 && (
@@ -109,7 +112,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
);
};

const useStyles = makeStyles((theme) => ({
const useStyles = makeStyles<Theme, { metadataLength: number }>((theme) => ({
resourceCard: {
background: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
@@ -141,12 +144,15 @@ const useStyles = makeStyles((theme) => ({
},
},

metadataHeader: {
metadataHeader: (props) => ({
flexGrow: 2,
display: "grid",
gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
gridTemplateColumns: `repeat(${
props.metadataLength === 1 ? 1 : 4
}, minmax(0, 1fr))`,
gap: theme.spacing(5),
rowGap: theme.spacing(3),
},
}),

metadata: {
...theme.typography.body2,
Loading