Skip to content

Commit f7300f4

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Fix tests and fix mobile
1 parent 212c4ef commit f7300f4

File tree

6 files changed

+123
-34
lines changed

6 files changed

+123
-34
lines changed

‎site/src/components/AppLink/AppPreviewLink.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const useStyles = makeStyles((theme) => ({
3333
border: `1px solid ${theme.palette.divider}`,
3434
color: theme.palette.text.primary,
3535
background: theme.palette.background.paper,
36+
flexShrink: 0,
37+
width: "fit-content",
3638

3739
"& img, & svg": {
3840
width: 14,

‎site/src/components/Resources/AgentRow.stories.tsx

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Story } from "@storybook/react"
2-
import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities"
2+
import {
3+
MockWorkspace,
4+
MockWorkspaceAgent,
5+
MockWorkspaceApp,
6+
} from "testHelpers/entities"
37
import { AgentRow, AgentRowProps } from "./AgentRow"
48

59
export default {
@@ -33,3 +37,24 @@ NotShowingApps.args = {
3337
applicationsHost: "",
3438
showApps: false,
3539
}
40+
41+
export const BunchOfApps = Template.bind({})
42+
BunchOfApps.args = {
43+
...Example.args,
44+
agent: {
45+
...MockWorkspaceAgent,
46+
apps: [
47+
MockWorkspaceApp,
48+
MockWorkspaceApp,
49+
MockWorkspaceApp,
50+
MockWorkspaceApp,
51+
MockWorkspaceApp,
52+
MockWorkspaceApp,
53+
MockWorkspaceApp,
54+
MockWorkspaceApp,
55+
],
56+
},
57+
workspace: MockWorkspace,
58+
applicationsHost: "",
59+
showApps: true,
60+
}

‎site/src/components/Resources/AgentRow.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const AgentRow: FC<AgentRowProps> = ({
3838
alignItems="center"
3939
justifyContent="space-between"
4040
className={styles.agentRow}
41+
spacing={4}
4142
>
4243
<Stack direction="row" alignItems="baseline">
4344
<div className={styles.agentStatusWrapper}>

‎site/src/components/Resources/AgentRowPreview.stories.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Story } from "@storybook/react"
2+
import { MockWorkspaceAgent, MockWorkspaceApp } from "testHelpers/entities"
3+
import { AgentRowPreview, AgentRowPreviewProps } from "./AgentRowPreview"
4+
5+
export default {
6+
title: "components/AgentRowPreview",
7+
component: AgentRowPreview,
8+
}
9+
10+
const Template: Story<AgentRowPreviewProps> = (args) => (
11+
<AgentRowPreview {...args} />
12+
)
13+
14+
export const Example = Template.bind({})
15+
Example.args = {
16+
agent: MockWorkspaceAgent,
17+
}
18+
19+
export const BunchOfApps = Template.bind({})
20+
BunchOfApps.args = {
21+
...Example.args,
22+
agent: {
23+
...MockWorkspaceAgent,
24+
apps: [
25+
MockWorkspaceApp,
26+
MockWorkspaceApp,
27+
MockWorkspaceApp,
28+
MockWorkspaceApp,
29+
MockWorkspaceApp,
30+
MockWorkspaceApp,
31+
MockWorkspaceApp,
32+
MockWorkspaceApp,
33+
],
34+
},
35+
}

‎site/src/components/Resources/AgentRowPreview.tsx

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,22 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
3030
spacing={4}
3131
className={styles.agentData}
3232
>
33-
<Stack direction="row" alignItems="baseline" spacing={1}>
33+
<Stack
34+
direction="row"
35+
alignItems="baseline"
36+
spacing={1}
37+
className={combineClasses([styles.noShrink, styles.agentDataItem])}
38+
>
3439
<span>Agent:</span>
3540
<span className={styles.agentDataValue}>{agent.name}</span>
3641
</Stack>
3742

38-
<Stack direction="row" alignItems="baseline" spacing={1}>
43+
<Stack
44+
direction="row"
45+
alignItems="baseline"
46+
spacing={1}
47+
className={combineClasses([styles.noShrink, styles.agentDataItem])}
48+
>
3949
<span>OS:</span>
4050
<span
4151
className={combineClasses([
@@ -47,7 +57,12 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
4757
</span>
4858
</Stack>
4959

50-
<Stack direction="row" alignItems="baseline" spacing={1}>
60+
<Stack
61+
direction="row"
62+
alignItems="center"
63+
spacing={1}
64+
className={styles.agentDataItem}
65+
>
5166
<span>Apps:</span>
5267
<Stack
5368
direction="row"
@@ -92,6 +107,7 @@ const useStyles = makeStyles((theme) => ({
92107
width: theme.spacing(4.5),
93108
display: "flex",
94109
justifyContent: "center",
110+
flexShrink: 0,
95111
},
96112

97113
agentStatusPreview: {
@@ -117,9 +133,27 @@ const useStyles = makeStyles((theme) => ({
117133
agentData: {
118134
fontSize: 14,
119135
color: theme.palette.text.secondary,
136+
137+
[theme.breakpoints.down("md")]: {
138+
gap: theme.spacing(2),
139+
flexWrap: "wrap",
140+
},
120141
},
121142

122143
agentDataValue: {
123144
color: theme.palette.text.primary,
124145
},
146+
147+
noShrink: {
148+
flexShrink: 0,
149+
},
150+
151+
agentDataItem: {
152+
[theme.breakpoints.down("md")]: {
153+
flexDirection: "column",
154+
alignItems: "flex-start",
155+
gap: theme.spacing(1),
156+
width: "fit-content",
157+
},
158+
},
125159
}))

‎site/src/components/Resources/ResourceCard.stories.tsx

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { Story } from "@storybook/react"
2-
import {
3-
MockWorkspaceAgent,
4-
MockWorkspaceApp,
5-
MockWorkspaceResource,
6-
} from "testHelpers/entities"
7-
import { AgentRowPreview } from "./AgentRowPreview"
2+
import { MockWorkspace, MockWorkspaceResource } from "testHelpers/entities"
3+
import { AgentRow } from "./AgentRow"
84
import { ResourceCard, ResourceCardProps } from "./ResourceCard"
95

106
export default {
@@ -17,30 +13,16 @@ const Template: Story<ResourceCardProps> = (args) => <ResourceCard {...args} />
1713
export const Example = Template.bind({})
1814
Example.args = {
1915
resource: MockWorkspaceResource,
20-
agentRow: (agent) => <AgentRowPreview key={agent.id} agent={agent} />,
21-
}
22-
23-
export const BunchOfApps = Template.bind({})
24-
BunchOfApps.args = {
25-
...Example.args,
26-
resource: {
27-
...MockWorkspaceResource,
28-
agents: [
29-
{
30-
...MockWorkspaceAgent,
31-
apps: [
32-
MockWorkspaceApp,
33-
MockWorkspaceApp,
34-
MockWorkspaceApp,
35-
MockWorkspaceApp,
36-
MockWorkspaceApp,
37-
MockWorkspaceApp,
38-
MockWorkspaceApp,
39-
MockWorkspaceApp,
40-
],
41-
},
42-
],
43-
},
16+
agentRow: (agent) => (
17+
<AgentRow
18+
showApps
19+
key={agent.id}
20+
agent={agent}
21+
workspace={MockWorkspace}
22+
applicationsHost=""
23+
serverVersion=""
24+
/>
25+
),
4426
}
4527

4628
export const BunchOfMetadata = Template.bind({})
@@ -86,4 +68,14 @@ BunchOfMetadata.args = {
8668
},
8769
],
8870
},
71+
agentRow: (agent) => (
72+
<AgentRow
73+
showApps
74+
key={agent.id}
75+
agent={agent}
76+
workspace={MockWorkspace}
77+
applicationsHost=""
78+
serverVersion=""
79+
/>
80+
),
8981
}

0 commit comments

Comments
 (0)