From f542eaace02904f1e44bbf93adbe26e1634a9426 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 14:13:14 +0000 Subject: [PATCH 01/13] Remove error logic from Resources --- .../components/BuildsTable/BuildsTable.tsx | 4 +-- site/src/components/Resources/Resources.tsx | 8 +---- site/src/components/Workspace/Workspace.tsx | 35 ++++++++----------- 3 files changed, 17 insertions(+), 30 deletions(-) diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 483af405a5a60..6bf20ef3d2a92 100644 --- a/site/src/components/BuildsTable/BuildsTable.tsx +++ b/site/src/components/BuildsTable/BuildsTable.tsx @@ -22,7 +22,6 @@ export const Language = { export interface BuildsTableProps { builds?: TypesGen.WorkspaceBuild[] - className?: string } const groupBuildsByDate = (builds?: TypesGen.WorkspaceBuild[]) => { @@ -48,13 +47,12 @@ const groupBuildsByDate = (builds?: TypesGen.WorkspaceBuild[]) => { export const BuildsTable: FC> = ({ builds, - className, }) => { const isLoading = !builds const buildsByDate = groupBuildsByDate(builds) return ( - + {isLoading && } diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index 8e7957d15b0f0..d87327b154f4c 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -11,7 +11,6 @@ import { WorkspaceResource, } from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" -import { AlertBanner } from "components/AlertBanner/AlertBanner" import { ResourceCard } from "./ResourceCard" const countAgents = (resource: WorkspaceResource) => { @@ -20,7 +19,6 @@ const countAgents = (resource: WorkspaceResource) => { interface ResourcesProps { resources: WorkspaceResource[] - getResourcesError?: Error | unknown workspace: Workspace canUpdateWorkspace: boolean buildInfo?: BuildInfoResponse | undefined @@ -30,7 +28,7 @@ interface ResourcesProps { export const Resources: FC> = ({ resources, - getResourcesError, + workspace, canUpdateWorkspace, hideSSHButton, @@ -49,10 +47,6 @@ export const Resources: FC> = ({ .sort((a, b) => countAgents(b) - countAgents(a)) const hasHideResources = resources.some((r) => r.hide) - if (getResourcesError) { - return - } - return ( {displayResources.map((resource) => { diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 2353e30d74689..f8a987564f603 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -16,7 +16,6 @@ import { WorkspaceActions } from "../WorkspaceActions/WorkspaceActions" import { WorkspaceDeletedBanner } from "../WorkspaceDeletedBanner/WorkspaceDeletedBanner" import { WorkspaceScheduleBanner } from "../WorkspaceScheduleBanner/WorkspaceScheduleBanner" import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceScheduleButton" -import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection" import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats" import { AlertBanner } from "../AlertBanner/AlertBanner" import { useTranslation } from "react-i18next" @@ -207,12 +206,16 @@ export const Workspace: FC> = ({ /> )} + {Boolean(workspaceErrors[WorkspaceErrors.GET_RESOURCES_ERROR]) && ( + + )} + {typeof resources !== "undefined" && resources.length > 0 && ( > = ({ /> )} - - {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? ( - - ) : ( - - )} - + {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? ( + + ) : ( + + )} ) @@ -276,9 +275,5 @@ export const useStyles = makeStyles((theme) => { timelineContents: { margin: 0, }, - - timelineTable: { - border: 0, - }, } }) From 3f499e9150fdf884ee2f86cc08b0fb8e61269f5c Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 14:20:56 +0000 Subject: [PATCH 02/13] Accept different resource card --- site/src/components/Resources/Resources.tsx | 36 +++------------------ site/src/components/Workspace/Workspace.tsx | 18 ++++++++--- 2 files changed, 17 insertions(+), 37 deletions(-) diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index d87327b154f4c..dba5dc744f5c4 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -5,13 +5,8 @@ import { OpenDropdown, } from "components/DropdownArrows/DropdownArrows" import { FC, useState } from "react" -import { - BuildInfoResponse, - Workspace, - WorkspaceResource, -} from "../../api/typesGenerated" +import { WorkspaceResource } from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" -import { ResourceCard } from "./ResourceCard" const countAgents = (resource: WorkspaceResource) => { return resource.agents ? resource.agents.length : 0 @@ -19,23 +14,13 @@ const countAgents = (resource: WorkspaceResource) => { interface ResourcesProps { resources: WorkspaceResource[] - workspace: Workspace - canUpdateWorkspace: boolean - buildInfo?: BuildInfoResponse | undefined - hideSSHButton?: boolean - applicationsHost?: string + resourceCard: (resource: WorkspaceResource) => JSX.Element } export const Resources: FC> = ({ resources, - - workspace, - canUpdateWorkspace, - hideSSHButton, - applicationsHost, - buildInfo, + resourceCard, }) => { - const serverVersion = buildInfo?.version || "" const styles = useStyles() const [shouldDisplayHideResources, setShouldDisplayHideResources] = useState(false) @@ -49,20 +34,7 @@ export const Resources: FC> = ({ return ( - {displayResources.map((resource) => { - return ( - - ) - })} - + {displayResources.map(resourceCard)} {hasHideResources && (
) @@ -270,34 +156,4 @@ const useStyles = makeStyles((theme) => ({ overflow: "hidden", whiteSpace: "nowrap", }, - - agentRow: { - padding: theme.spacing(3, 4), - backgroundColor: theme.palette.background.paperLight, - fontSize: 16, - - "&:not(:last-child)": { - borderBottom: `1px solid ${theme.palette.divider}`, - }, - }, - - agentStatusWrapper: { - width: theme.spacing(4.5), - display: "flex", - justifyContent: "center", - }, - - agentName: { - fontWeight: 600, - }, - - agentOS: { - textTransform: "capitalize", - }, - - agentData: { - fontSize: 14, - color: theme.palette.text.secondary, - marginTop: theme.spacing(0.5), - }, })) diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index dba5dc744f5c4..b1337ca728f65 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -5,8 +5,9 @@ import { OpenDropdown, } from "components/DropdownArrows/DropdownArrows" import { FC, useState } from "react" -import { WorkspaceResource } from "../../api/typesGenerated" +import { WorkspaceAgent, WorkspaceResource } from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" +import { ResourceCard } from "./ResourceCard" const countAgents = (resource: WorkspaceResource) => { return resource.agents ? resource.agents.length : 0 @@ -14,12 +15,12 @@ const countAgents = (resource: WorkspaceResource) => { interface ResourcesProps { resources: WorkspaceResource[] - resourceCard: (resource: WorkspaceResource) => JSX.Element + agentRow: (agent: WorkspaceAgent) => JSX.Element } export const Resources: FC> = ({ resources, - resourceCard, + agentRow, }) => { const styles = useStyles() const [shouldDisplayHideResources, setShouldDisplayHideResources] = @@ -34,7 +35,13 @@ export const Resources: FC> = ({ return ( - {displayResources.map(resourceCard)} + {displayResources.map((resource) => ( + + ))} {hasHideResources && (
) @@ -120,7 +92,7 @@ export const AppLink: FC> = ({ event.preventDefault() window.open( href, - Language.appTitle(appName, generateRandomString(12)), + Language.appTitle(app.name, generateRandomString(12)), "width=900,height=600", ) } diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx new file mode 100644 index 0000000000000..0cbd8abff6f77 --- /dev/null +++ b/site/src/components/AppLink/AppPreviewLink.tsx @@ -0,0 +1,36 @@ +import Button from "@material-ui/core/Button" +import { makeStyles } from "@material-ui/core/styles" +import { FC } from "react" +import * as TypesGen from "../../api/typesGenerated" +import { BaseIcon } from "./BaseIcon" +import { ShareIcon } from "./ShareIcon" + +export interface AppPreviewProps { + app: TypesGen.WorkspaceApp +} + +export const AppPreviewLink: FC = ({ app }) => { + const styles = useStyles() + + return ( + + ) +} + +const useStyles = makeStyles((theme) => ({ + button: { + whiteSpace: "nowrap", + cursor: "default", + }, + + appName: { + marginRight: theme.spacing(1), + }, +})) diff --git a/site/src/components/AppLink/BaseIcon.tsx b/site/src/components/AppLink/BaseIcon.tsx new file mode 100644 index 0000000000000..9343817e9c536 --- /dev/null +++ b/site/src/components/AppLink/BaseIcon.tsx @@ -0,0 +1,11 @@ +import { WorkspaceApp } from "api/typesGenerated" +import { FC } from "react" +import ComputerIcon from "@material-ui/icons/Computer" + +export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => { + return app.icon ? ( + {`${app.name} + ) : ( + + ) +} diff --git a/site/src/components/AppLink/ShareIcon.tsx b/site/src/components/AppLink/ShareIcon.tsx new file mode 100644 index 0000000000000..7bfbc91560446 --- /dev/null +++ b/site/src/components/AppLink/ShareIcon.tsx @@ -0,0 +1,25 @@ +import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined" +import LockOutlinedIcon from "@material-ui/icons/LockOutlined" +import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined" +import { FC } from "react" +import * as TypesGen from "../../api/typesGenerated" +import Tooltip from "@material-ui/core/Tooltip" + +export interface ShareIconProps { + app: TypesGen.WorkspaceApp +} + +export const ShareIcon: FC = ({ app }) => { + let shareIcon = + let shareTooltip = "Private, only accessible by you" + if (app.sharing_level === "authenticated") { + shareIcon = + shareTooltip = "Shared with all authenticated users" + } + if (app.sharing_level === "public") { + shareIcon = + shareTooltip = "Shared publicly" + } + + return {shareIcon} +} diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index 740c68681cacc..80eb9b78c726b 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -75,15 +75,9 @@ export const AgentRow: FC = ({ ))} diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx new file mode 100644 index 0000000000000..b24b27a970bd1 --- /dev/null +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -0,0 +1,98 @@ +import { makeStyles } from "@material-ui/core/styles" +import { AppPreviewLink } from "components/AppLink/AppPreviewLink" +import { FC } from "react" +import { WorkspaceAgent } from "../../api/typesGenerated" +import { Stack } from "../Stack/Stack" + +export interface AgentRowPreviewProps { + agent: WorkspaceAgent +} + +export const AgentRowPreview: FC = ({ agent }) => { + const styles = useStyles() + + return ( + + +
+
+
+ +
{agent.name}
+ {agent.operating_system} + + + + + {agent.apps.map((app) => ( + + ))} + + + ) +} + +const useStyles = makeStyles((theme) => ({ + agentRow: { + padding: theme.spacing(2, 4), + backgroundColor: theme.palette.background.paperLight, + fontSize: 16, + position: "relative", + + "&:not(:last-child)": { + paddingBottom: 0, + }, + + "&:after": { + content: "''", + height: "100%", + width: 2, + backgroundColor: theme.palette.divider, + position: "absolute", + top: 0, + left: 49, + }, + }, + + agentStatusWrapper: { + width: theme.spacing(4.5), + display: "flex", + justifyContent: "center", + }, + + agentStatusPreview: { + width: 10, + height: 10, + border: `2px solid ${theme.palette.text.secondary}`, + borderRadius: "100%", + position: "relative", + zIndex: 1, + background: theme.palette.background.paper, + }, + + agentName: { + fontWeight: 600, + }, + + agentOS: { + textTransform: "capitalize", + fontSize: 14, + color: theme.palette.text.secondary, + }, + + appsColumn: { + minWidth: "50%", + }, +})) diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx index 757bc7d2bc38d..99b9120e5a090 100644 --- a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx +++ b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx @@ -1,23 +1,7 @@ -import { makeStyles } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" -import { AvatarData } from "components/AvatarData/AvatarData" -import { ResourceAvatar } from "components/Resources/ResourceAvatar" +import { AgentRowPreview } from "components/Resources/AgentRowPreview" +import { Resources } from "components/Resources/Resources" import { FC } from "react" import { WorkspaceResource } from "../../api/typesGenerated" -import { Stack } from "../Stack/Stack" -import { TableHeaderRow } from "../TableHeaders/TableHeaders" -import { AgentHelpTooltip } from "../Tooltips/AgentHelpTooltip" -import { ResourcesHelpTooltip } from "../Tooltips/ResourcesHelpTooltip" - -export const Language = { - resourceLabel: "Resource", - agentLabel: "Agent", -} export interface TemplateResourcesProps { resources: WorkspaceResource[] @@ -26,109 +10,10 @@ export interface TemplateResourcesProps { export const TemplateResourcesTable: FC< React.PropsWithChildren > = ({ resources }) => { - const styles = useStyles() - return ( - -
- - - - - {Language.resourceLabel} - - - - - - {Language.agentLabel} - - - - - - - {resources.map((resource) => { - // We need to initialize the agents to display the resource - const agents = resource.agents ?? [null] - return agents.map((agent, agentIndex) => { - // If there is no agent, just display the resource name - if (!agent) { - return ( - - - } - /> - - - - ) - } - - return ( - - {/* We only want to display the name in the first row because we are using rowSpan */} - {/* The rowspan should be the same than the number of agents */} - {agentIndex === 0 && ( - - } - /> - - )} - - - {agent.name} - - {agent.operating_system} - - - - ) - }) - })} - -
- + } + /> ) } - -const useStyles = makeStyles((theme) => ({ - sectionContents: { - margin: 0, - }, - - resourceNameCell: { - borderRight: `1px solid ${theme.palette.divider}`, - }, - - resourceType: { - fontSize: 14, - color: theme.palette.text.secondary, - marginTop: theme.spacing(0.5), - display: "block", - }, - - // Adds some left spacing - agentColumn: { - paddingLeft: `${theme.spacing(2)}px !important`, - }, - - operatingSystem: { - fontSize: 14, - color: theme.palette.text.secondary, - marginTop: theme.spacing(0.5), - display: "block", - textTransform: "capitalize", - }, -})) From 49c3a4ef3bdc110fc4463374730170ae5b643ddb Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 17:04:03 +0000 Subject: [PATCH 05/13] Fix stories --- .../components/AppLink/AppLink.stories.tsx | 6 ++++ .../components/Resources/AgentRow.stories.tsx | 35 +++++++++++++++++++ .../Resources/ResourceCard.stories.tsx | 20 ++--------- 3 files changed, 43 insertions(+), 18 deletions(-) create mode 100644 site/src/components/Resources/AgentRow.stories.tsx diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx index 121520219680a..12ac47e5b3341 100644 --- a/site/src/components/AppLink/AppLink.stories.tsx +++ b/site/src/components/AppLink/AppLink.stories.tsx @@ -1,6 +1,7 @@ import { Story } from "@storybook/react" import { MockWorkspace, + MockWorkspaceAgent, MockWorkspaceApp, } from "../../testHelpers/renderHelpers" import { AppLink, AppLinkProps } from "./AppLink" @@ -22,6 +23,7 @@ WithIcon.args = { sharing_level: "owner", health: "healthy", }, + agent: MockWorkspaceAgent, } export const WithoutIcon = Template.bind({}) @@ -33,6 +35,7 @@ WithoutIcon.args = { sharing_level: "owner", health: "healthy", }, + agent: MockWorkspaceAgent, } export const HealthDisabled = Template.bind({}) @@ -44,6 +47,7 @@ HealthDisabled.args = { sharing_level: "owner", health: "disabled", }, + agent: MockWorkspaceAgent, } export const HealthInitializing = Template.bind({}) @@ -54,6 +58,7 @@ HealthInitializing.args = { name: "code-server", health: "initializing", }, + agent: MockWorkspaceAgent, } export const HealthUnhealthy = Template.bind({}) @@ -64,4 +69,5 @@ HealthUnhealthy.args = { name: "code-server", health: "unhealthy", }, + agent: MockWorkspaceAgent, } diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx new file mode 100644 index 0000000000000..aaa5d322da261 --- /dev/null +++ b/site/src/components/Resources/AgentRow.stories.tsx @@ -0,0 +1,35 @@ +import { Story } from "@storybook/react" +import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities" +import { AgentRow, AgentRowProps } from "./AgentRow" + +export default { + title: "components/AgentRow", + component: AgentRow, +} + +const Template: Story = (args) => + +export const Example = Template.bind({}) +Example.args = { + agent: MockWorkspaceAgent, + workspace: MockWorkspace, + applicationsHost: "", + showApps: true, +} + +export const HideSSHButton = Template.bind({}) +HideSSHButton.args = { + agent: MockWorkspaceAgent, + workspace: MockWorkspace, + applicationsHost: "", + showApps: true, + hideSSHButton: true, +} + +export const NotShowingApps = Template.bind({}) +NotShowingApps.args = { + agent: MockWorkspaceAgent, + workspace: MockWorkspace, + applicationsHost: "", + showApps: false, +} diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx index 25c47aaa21efe..f3b2aa076cfa2 100644 --- a/site/src/components/Resources/ResourceCard.stories.tsx +++ b/site/src/components/Resources/ResourceCard.stories.tsx @@ -1,10 +1,10 @@ import { Story } from "@storybook/react" import { - MockWorkspace, MockWorkspaceAgent, MockWorkspaceApp, MockWorkspaceResource, } from "testHelpers/entities" +import { AgentRowPreview } from "./AgentRowPreview" import { ResourceCard, ResourceCardProps } from "./ResourceCard" export default { @@ -17,23 +17,7 @@ const Template: Story = (args) => export const Example = Template.bind({}) Example.args = { resource: MockWorkspaceResource, - workspace: MockWorkspace, - applicationsHost: "https://dev.coder.com", - hideSSHButton: false, - showApps: true, - serverVersion: MockWorkspaceAgent.version, -} - -export const NotShowingApps = Template.bind({}) -NotShowingApps.args = { - ...Example.args, - showApps: false, -} - -export const HideSSHButton = Template.bind({}) -HideSSHButton.args = { - ...Example.args, - hideSSHButton: true, + agentRow: (agent) => , } export const BunchOfApps = Template.bind({}) From 212c4efed668828de29a144dd6ab234e88959dda Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 17:42:47 +0000 Subject: [PATCH 06/13] Refactor --- .../src/components/AppLink/AppPreviewLink.tsx | 33 +++++----- .../components/Resources/AgentRowPreview.tsx | 61 +++++++++++++------ .../TemplateResourcesTable.test.tsx | 44 ------------- 3 files changed, 63 insertions(+), 75 deletions(-) delete mode 100644 site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx index 0cbd8abff6f77..8f342487eb256 100644 --- a/site/src/components/AppLink/AppPreviewLink.tsx +++ b/site/src/components/AppLink/AppPreviewLink.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" import { makeStyles } from "@material-ui/core/styles" +import { Stack } from "components/Stack/Stack" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { BaseIcon } from "./BaseIcon" @@ -13,24 +13,29 @@ export const AppPreviewLink: FC = ({ app }) => { const styles = useStyles() return ( - + + {app.name} + + ) } const useStyles = makeStyles((theme) => ({ - button: { - whiteSpace: "nowrap", - cursor: "default", - }, + appPreviewLink: { + padding: theme.spacing(0.25, 1.5), + borderRadius: 9999, + border: `1px solid ${theme.palette.divider}`, + color: theme.palette.text.primary, + background: theme.palette.background.paper, - appName: { - marginRight: theme.spacing(1), + "& img, & svg": { + width: 14, + }, }, })) diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index b24b27a970bd1..7830d42447921 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -1,6 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" import { AppPreviewLink } from "components/AppLink/AppPreviewLink" import { FC } from "react" +import { combineClasses } from "util/combineClasses" import { WorkspaceAgent } from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" @@ -23,22 +24,43 @@ export const AgentRowPreview: FC = ({ agent }) => {
- -
{agent.name}
- {agent.operating_system} - - + + + Agent: + {agent.name} + - - {agent.apps.map((app) => ( - - ))} + + OS: + + {agent.operating_system} + + + + + Apps: + + {agent.apps.map((app) => ( + + ))} + + + ) @@ -92,7 +114,12 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.text.secondary, }, - appsColumn: { - minWidth: "50%", + agentData: { + fontSize: 14, + color: theme.palette.text.secondary, + }, + + agentDataValue: { + color: theme.palette.text.primary, }, })) diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx deleted file mode 100644 index b96738d63cbfa..0000000000000 --- a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { fireEvent, render, screen } from "@testing-library/react" -import { FC } from "react" -import { WrapperComponent } from "../../testHelpers/renderHelpers" -import { Language as AgentTooltipLanguage } from "../Tooltips/AgentHelpTooltip" -import { Language as ResourceTooltipLanguage } from "../Tooltips/ResourcesHelpTooltip" -import { - TemplateResourcesProps, - TemplateResourcesTable, -} from "./TemplateResourcesTable" - -const Component: FC> = ( - props, -) => ( - - - -) - -describe("TemplateResourcesTable", () => { - it("displays resources tooltip", () => { - const props: TemplateResourcesProps = { - resources: [], - } - render() - const resourceTooltipButton = screen.getAllByRole("button")[0] - fireEvent.click(resourceTooltipButton) - const resourceTooltipTitle = screen.getByText( - ResourceTooltipLanguage.resourceTooltipTitle, - ) - expect(resourceTooltipTitle).toBeDefined() - }) - it("displays agent tooltip", () => { - const props: TemplateResourcesProps = { - resources: [], - } - render() - const agentTooltipButton = screen.getAllByRole("button")[1] - fireEvent.click(agentTooltipButton) - const agentTooltipTitle = screen.getByText( - AgentTooltipLanguage.agentTooltipTitle, - ) - expect(agentTooltipTitle).toBeDefined() - }) -}) From f7300f419c338132f03b0ae031878b3b1673ad19 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 18:20:55 +0000 Subject: [PATCH 07/13] Fix tests and fix mobile --- .../src/components/AppLink/AppPreviewLink.tsx | 2 + .../components/Resources/AgentRow.stories.tsx | 27 +++++++++- site/src/components/Resources/AgentRow.tsx | 1 + .../Resources/AgentRowPreview.stories.tsx | 35 +++++++++++++ .../components/Resources/AgentRowPreview.tsx | 40 ++++++++++++-- .../Resources/ResourceCard.stories.tsx | 52 ++++++++----------- 6 files changed, 123 insertions(+), 34 deletions(-) create mode 100644 site/src/components/Resources/AgentRowPreview.stories.tsx diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx index 8f342487eb256..2a1415df9770d 100644 --- a/site/src/components/AppLink/AppPreviewLink.tsx +++ b/site/src/components/AppLink/AppPreviewLink.tsx @@ -33,6 +33,8 @@ const useStyles = makeStyles((theme) => ({ border: `1px solid ${theme.palette.divider}`, color: theme.palette.text.primary, background: theme.palette.background.paper, + flexShrink: 0, + width: "fit-content", "& img, & svg": { width: 14, diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx index aaa5d322da261..f5c6b8246c0d0 100644 --- a/site/src/components/Resources/AgentRow.stories.tsx +++ b/site/src/components/Resources/AgentRow.stories.tsx @@ -1,5 +1,9 @@ import { Story } from "@storybook/react" -import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities" +import { + MockWorkspace, + MockWorkspaceAgent, + MockWorkspaceApp, +} from "testHelpers/entities" import { AgentRow, AgentRowProps } from "./AgentRow" export default { @@ -33,3 +37,24 @@ NotShowingApps.args = { applicationsHost: "", showApps: false, } + +export const BunchOfApps = Template.bind({}) +BunchOfApps.args = { + ...Example.args, + agent: { + ...MockWorkspaceAgent, + apps: [ + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + ], + }, + workspace: MockWorkspace, + applicationsHost: "", + showApps: true, +} diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index 80eb9b78c726b..40acef8e737e0 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -38,6 +38,7 @@ export const AgentRow: FC = ({ alignItems="center" justifyContent="space-between" className={styles.agentRow} + spacing={4} >
diff --git a/site/src/components/Resources/AgentRowPreview.stories.tsx b/site/src/components/Resources/AgentRowPreview.stories.tsx new file mode 100644 index 0000000000000..86a92319e737e --- /dev/null +++ b/site/src/components/Resources/AgentRowPreview.stories.tsx @@ -0,0 +1,35 @@ +import { Story } from "@storybook/react" +import { MockWorkspaceAgent, MockWorkspaceApp } from "testHelpers/entities" +import { AgentRowPreview, AgentRowPreviewProps } from "./AgentRowPreview" + +export default { + title: "components/AgentRowPreview", + component: AgentRowPreview, +} + +const Template: Story = (args) => ( + +) + +export const Example = Template.bind({}) +Example.args = { + agent: MockWorkspaceAgent, +} + +export const BunchOfApps = Template.bind({}) +BunchOfApps.args = { + ...Example.args, + agent: { + ...MockWorkspaceAgent, + apps: [ + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + MockWorkspaceApp, + ], + }, +} diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index 7830d42447921..fb5e0671d6c10 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -30,12 +30,22 @@ export const AgentRowPreview: FC = ({ agent }) => { spacing={4} className={styles.agentData} > - + Agent: {agent.name} - + OS: = ({ agent }) => { - + Apps: ({ width: theme.spacing(4.5), display: "flex", justifyContent: "center", + flexShrink: 0, }, agentStatusPreview: { @@ -117,9 +133,27 @@ const useStyles = makeStyles((theme) => ({ agentData: { fontSize: 14, color: theme.palette.text.secondary, + + [theme.breakpoints.down("md")]: { + gap: theme.spacing(2), + flexWrap: "wrap", + }, }, agentDataValue: { color: theme.palette.text.primary, }, + + noShrink: { + flexShrink: 0, + }, + + agentDataItem: { + [theme.breakpoints.down("md")]: { + flexDirection: "column", + alignItems: "flex-start", + gap: theme.spacing(1), + width: "fit-content", + }, + }, })) diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx index f3b2aa076cfa2..d131db78f1a3e 100644 --- a/site/src/components/Resources/ResourceCard.stories.tsx +++ b/site/src/components/Resources/ResourceCard.stories.tsx @@ -1,10 +1,6 @@ import { Story } from "@storybook/react" -import { - MockWorkspaceAgent, - MockWorkspaceApp, - MockWorkspaceResource, -} from "testHelpers/entities" -import { AgentRowPreview } from "./AgentRowPreview" +import { MockWorkspace, MockWorkspaceResource } from "testHelpers/entities" +import { AgentRow } from "./AgentRow" import { ResourceCard, ResourceCardProps } from "./ResourceCard" export default { @@ -17,30 +13,16 @@ const Template: Story = (args) => export const Example = Template.bind({}) Example.args = { resource: MockWorkspaceResource, - agentRow: (agent) => , -} - -export const BunchOfApps = Template.bind({}) -BunchOfApps.args = { - ...Example.args, - resource: { - ...MockWorkspaceResource, - agents: [ - { - ...MockWorkspaceAgent, - apps: [ - MockWorkspaceApp, - MockWorkspaceApp, - MockWorkspaceApp, - MockWorkspaceApp, - MockWorkspaceApp, - MockWorkspaceApp, - MockWorkspaceApp, - MockWorkspaceApp, - ], - }, - ], - }, + agentRow: (agent) => ( + + ), } export const BunchOfMetadata = Template.bind({}) @@ -86,4 +68,14 @@ BunchOfMetadata.args = { }, ], }, + agentRow: (agent) => ( + + ), } From 6197cf77078a46634a6a9960d283bf7a0ee04714 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 19:26:21 +0000 Subject: [PATCH 08/13] Fix mobile breakpoints --- site/src/components/Resources/AgentRowPreview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index fb5e0671d6c10..c7e528aff1196 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -134,7 +134,7 @@ const useStyles = makeStyles((theme) => ({ fontSize: 14, color: theme.palette.text.secondary, - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down("sm")]: { gap: theme.spacing(2), flexWrap: "wrap", }, @@ -149,7 +149,7 @@ const useStyles = makeStyles((theme) => ({ }, agentDataItem: { - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down("sm")]: { flexDirection: "column", alignItems: "flex-start", gap: theme.spacing(1), From 927a68e46e666030221b1b0eb611b410b82840b0 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 16:55:58 -0300 Subject: [PATCH 09/13] Apply suggestions from code review Co-authored-by: Kira Pilot --- site/src/components/AppLink/AppPreviewLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx index 2a1415df9770d..4d434f8963a9e 100644 --- a/site/src/components/AppLink/AppPreviewLink.tsx +++ b/site/src/components/AppLink/AppPreviewLink.tsx @@ -1,7 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" import { Stack } from "components/Stack/Stack" import { FC } from "react" -import * as TypesGen from "../../api/typesGenerated" +import * as TypesGen from "api/typesGenerated" import { BaseIcon } from "./BaseIcon" import { ShareIcon } from "./ShareIcon" From 6c5cfd555154df540aab5a1abaeb346decdcd786 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 20:03:41 +0000 Subject: [PATCH 10/13] Add translation --- site/src/components/AppLink/ShareIcon.tsx | 9 ++++++--- site/src/i18n/en/agent.json | 7 +++++++ site/src/i18n/en/index.ts | 2 ++ 3 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 site/src/i18n/en/agent.json diff --git a/site/src/components/AppLink/ShareIcon.tsx b/site/src/components/AppLink/ShareIcon.tsx index 7bfbc91560446..64e657b3a2420 100644 --- a/site/src/components/AppLink/ShareIcon.tsx +++ b/site/src/components/AppLink/ShareIcon.tsx @@ -4,21 +4,24 @@ import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import Tooltip from "@material-ui/core/Tooltip" +import { useTranslation } from "react-i18next" export interface ShareIconProps { app: TypesGen.WorkspaceApp } export const ShareIcon: FC = ({ app }) => { + const { t } = useTranslation("agent") + let shareIcon = - let shareTooltip = "Private, only accessible by you" + let shareTooltip = t("shareTooltip.private") if (app.sharing_level === "authenticated") { shareIcon = - shareTooltip = "Shared with all authenticated users" + shareTooltip = t("shareTooltip.authenticated") } if (app.sharing_level === "public") { shareIcon = - shareTooltip = "Shared publicly" + shareTooltip = t("shareTooltip.public") } return {shareIcon} diff --git a/site/src/i18n/en/agent.json b/site/src/i18n/en/agent.json new file mode 100644 index 0000000000000..189837945bd74 --- /dev/null +++ b/site/src/i18n/en/agent.json @@ -0,0 +1,7 @@ +{ + "shareTooltip": { + "private": "Private, only accessible by you", + "authenticated": "Shared with all authenticated users", + "public": "Shared publicly" + } +} diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts index 7fd2c233630fb..f5a8efe7f2be2 100644 --- a/site/src/i18n/en/index.ts +++ b/site/src/i18n/en/index.ts @@ -4,6 +4,7 @@ import createWorkspacePage from "./createWorkspacePage.json" import templatePage from "./templatePage.json" import templatesPage from "./templatesPage.json" import workspacePage from "./workspacePage.json" +import agent from "./agent.json" export const en = { common, @@ -12,4 +13,5 @@ export const en = { templatePage, templatesPage, createWorkspacePage, + agent, } From e1b3b9181c5b677fbc0e4518e3e5d4ff27327947 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 17:04:41 -0300 Subject: [PATCH 11/13] Update site/src/components/AppLink/AppLink.stories.tsx Co-authored-by: Kira Pilot --- site/src/components/AppLink/AppLink.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx index 12ac47e5b3341..a95732b521728 100644 --- a/site/src/components/AppLink/AppLink.stories.tsx +++ b/site/src/components/AppLink/AppLink.stories.tsx @@ -3,7 +3,7 @@ import { MockWorkspace, MockWorkspaceAgent, MockWorkspaceApp, -} from "../../testHelpers/renderHelpers" +} from "testHelpers/renderHelpers" import { AppLink, AppLinkProps } from "./AppLink" export default { From ecb41a9bd4da666fd2b5900faaf7cfff648a3104 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Thu, 27 Oct 2022 20:12:49 +0000 Subject: [PATCH 12/13] Add translations to preview card --- site/src/components/Resources/AgentRowPreview.tsx | 8 +++++--- site/src/i18n/en/agent.json | 5 +++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index c7e528aff1196..d6ca1a550a1d3 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -1,6 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" import { AppPreviewLink } from "components/AppLink/AppPreviewLink" import { FC } from "react" +import { useTranslation } from "react-i18next" import { combineClasses } from "util/combineClasses" import { WorkspaceAgent } from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" @@ -11,6 +12,7 @@ export interface AgentRowPreviewProps { export const AgentRowPreview: FC = ({ agent }) => { const styles = useStyles() + const { t } = useTranslation("agent") return ( = ({ agent }) => { spacing={1} className={combineClasses([styles.noShrink, styles.agentDataItem])} > - Agent: + {t("label.agent").toString()}: {agent.name} @@ -46,7 +48,7 @@ export const AgentRowPreview: FC = ({ agent }) => { spacing={1} className={combineClasses([styles.noShrink, styles.agentDataItem])} > - OS: + {t("label.os").toString()}: = ({ agent }) => { spacing={1} className={styles.agentDataItem} > - Apps: + {t("label.apps").toString()}: Date: Thu, 27 Oct 2022 20:14:19 +0000 Subject: [PATCH 13/13] Fix translations --- site/src/components/Resources/AgentRowPreview.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index d6ca1a550a1d3..53e6ce0a139b4 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -38,7 +38,7 @@ export const AgentRowPreview: FC = ({ agent }) => { spacing={1} className={combineClasses([styles.noShrink, styles.agentDataItem])} > - {t("label.agent").toString()}: + {t("labels.agent").toString()}: {agent.name} @@ -48,7 +48,7 @@ export const AgentRowPreview: FC = ({ agent }) => { spacing={1} className={combineClasses([styles.noShrink, styles.agentDataItem])} > - {t("label.os").toString()}: + {t("labels.os").toString()}: = ({ agent }) => { spacing={1} className={styles.agentDataItem} > - {t("label.apps").toString()}: + {t("labels.apps").toString()}: