Skip to content

Commit dcf8f32

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Change workspace build data
1 parent 1110997 commit dcf8f32

File tree

8 files changed

+54
-171
lines changed

8 files changed

+54
-171
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -560,10 +560,11 @@ const styles = {
560560
}),
561561

562562
agentInfo: (theme) => ({
563-
padding: "16px 32px",
563+
padding: 32,
564564
display: "flex",
565-
alignItems: "center",
566-
gap: 48,
565+
flexDirection: "column",
566+
gap: 16,
567+
alignItems: "flex-start",
567568
flexWrap: "wrap",
568569
backgroundColor: theme.palette.background.paper,
569570

‎site/src/components/WorkspaceBuild/WorkspaceBuildData.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Interpolation, Theme, useTheme } from "@emotion/react";
22
import Skeleton from "@mui/material/Skeleton";
33
import { WorkspaceBuild } from "api/typesGenerated";
44
import { BuildIcon } from "components/BuildIcon/BuildIcon";
5+
import { createDayString } from "utils/createDayString";
56
import {
67
getDisplayWorkspaceBuildStatus,
78
getDisplayWorkspaceBuildInitiatedBy,
@@ -44,7 +45,7 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
4445
marginTop: 2,
4546
}}
4647
>
47-
{displayWorkspaceBuildDuration(build)}
48+
{createDayString(build.created_at)}
4849
</div>
4950
</div>
5051
</div>

‎site/src/pages/WorkspacePage/BuildsTable.stories.tsx

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎site/src/pages/WorkspacePage/BuildsTable.tsx

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎site/src/pages/WorkspacePage/HistorySidebar.tsx

Lines changed: 30 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { useTheme } from "@mui/material/styles";
1+
import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
2+
import LoadingButton from "@mui/lab/LoadingButton";
23
import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
34
import { Workspace } from "api/typesGenerated";
45
import {
@@ -7,15 +8,13 @@ import {
78
SidebarItem,
89
SidebarLink,
910
} from "components/FullPageLayout/Sidebar";
10-
import { Timeline } from "components/Timeline/Timeline";
1111
import {
1212
WorkspaceBuildData,
1313
WorkspaceBuildDataSkeleton,
1414
} from "components/WorkspaceBuild/WorkspaceBuildData";
1515
import { useInfiniteQuery } from "react-query";
1616

1717
export const HistorySidebar = ({ workspace }: { workspace: Workspace }) => {
18-
const theme = useTheme();
1918
const buildsQuery = useInfiniteQuery({
2019
...infiniteWorkspaceBuilds(workspace?.id ?? ""),
2120
enabled: workspace !== undefined,
@@ -25,53 +24,40 @@ export const HistorySidebar = ({ workspace }: { workspace: Workspace }) => {
2524
return (
2625
<Sidebar>
2726
<SidebarCaption>History</SidebarCaption>
28-
{builds ? (
29-
<Timeline
30-
items={builds}
31-
getDate={(build) => new Date(build.created_at)}
32-
dateRow={({ displayDate }) => (
33-
<div
34-
css={{
35-
fontSize: 12,
36-
color: theme.palette.text.secondary,
37-
padding: "0 16px 4px",
38-
39-
"&:not(:first-of-type)": {
40-
marginTop: "8px",
41-
},
42-
43-
"&::first-letter": {
44-
textTransform: "uppercase",
45-
},
46-
}}
47-
>
48-
{displayDate}
49-
</div>
50-
)}
51-
row={(build) => (
27+
{builds
28+
? builds.map((build) => (
5229
<SidebarLink
30+
target="_blank"
5331
key={build.id}
5432
to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
5533
>
5634
<WorkspaceBuildData build={build} />
5735
</SidebarLink>
58-
)}
59-
/>
60-
) : (
61-
// builds.map((build) => (
62-
// <SidebarLink
63-
// key={build.id}
64-
// to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
65-
// >
66-
// <WorkspaceBuildData build={build} />
67-
// </SidebarLink>
68-
69-
// ))
70-
Array.from({ length: 15 }, (_, i) => (
71-
<SidebarItem key={i}>
72-
<WorkspaceBuildDataSkeleton />
73-
</SidebarItem>
74-
))
36+
))
37+
: Array.from({ length: 15 }, (_, i) => (
38+
<SidebarItem key={i}>
39+
<WorkspaceBuildDataSkeleton />
40+
</SidebarItem>
41+
))}
42+
{buildsQuery.hasNextPage && (
43+
<div css={{ padding: 16 }}>
44+
<LoadingButton
45+
fullWidth
46+
onClick={() => buildsQuery.fetchNextPage()}
47+
loading={buildsQuery.isFetchingNextPage}
48+
loadingPosition="start"
49+
variant="outlined"
50+
color="neutral"
51+
startIcon={<ArrowDownwardOutlined />}
52+
css={{
53+
display: "inline-flex",
54+
borderRadius: "9999px",
55+
fontSize: 13,
56+
}}
57+
>
58+
Show more builds
59+
</LoadingButton>
60+
</div>
7561
)}
7662
</Sidebar>
7763
);

‎site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const WorkspaceBuildLogsSection: FC<WorkspaceBuildLogsSectionProps> = ({
3232
borderRadius: 8,
3333
border: `1px solid ${theme.palette.divider}`,
3434
overflow: "hidden",
35+
background: theme.palette.background.default,
3536
}}
3637
>
3738
<header

‎site/src/pages/WorkspacePage/WorkspacePage.tsx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { WorkspaceReadyPage } from "./WorkspaceReadyPage";
55
import { ErrorAlert } from "components/Alert/ErrorAlert";
66
import { useOrganizationId } from "hooks";
77
import { Margins } from "components/Margins/Margins";
8-
import { useInfiniteQuery, useQuery, useQueryClient } from "react-query";
9-
import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
8+
import { useQuery, useQueryClient } from "react-query";
9+
import { workspaceBuildsKey } from "api/queries/workspaceBuilds";
1010
import { templateByName } from "api/queries/templates";
1111
import { workspaceByOwnerAndName } from "api/queries/workspaces";
1212
import { checkAuthorization } from "api/queries/authCheck";
@@ -52,18 +52,26 @@ export const WorkspacePage: FC = () => {
5252
// Watch workspace changes
5353
const updateWorkspaceData = useEffectEvent(
5454
async (newWorkspaceData: Workspace) => {
55+
if (!workspace) {
56+
throw new Error(
57+
"Applying an update for a workspace that is undefined.",
58+
);
59+
}
60+
5561
queryClient.setQueryData(
5662
workspaceQueryOptions.queryKey,
5763
newWorkspaceData,
5864
);
5965

6066
const hasNewBuild =
61-
newWorkspaceData.latest_build.id !== workspace!.latest_build.id;
67+
newWorkspaceData.latest_build.id !== workspace.latest_build.id;
6268
const lastBuildHasChanged =
63-
newWorkspaceData.latest_build.status !== workspace!.latest_build.status;
69+
newWorkspaceData.latest_build.status !== workspace.latest_build.status;
6470

6571
if (hasNewBuild || lastBuildHasChanged) {
66-
//await buildsQuery.refetch();
72+
await queryClient.invalidateQueries(
73+
workspaceBuildsKey(newWorkspaceData.id),
74+
);
6775
}
6876
},
6977
);
@@ -114,13 +122,6 @@ export const WorkspacePage: FC = () => {
114122
workspace={workspace}
115123
template={template}
116124
permissions={permissions}
117-
// builds={buildsQuery.data?.pages.flat()}
118-
// buildsError={buildsQuery.error}
119-
// isLoadingMoreBuilds={buildsQuery.isFetchingNextPage}
120-
// onLoadMoreBuilds={async () => {
121-
// await buildsQuery.fetchNextPage();
122-
// }}
123-
// hasMoreBuilds={Boolean(buildsQuery.hasNextPage)}
124125
/>
125126
);
126127
};

‎site/src/theme/mui.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@ export const components = {
9494
"& .MuiLoadingButton-loadingIndicator": {
9595
width: 14,
9696
height: 14,
97+
// Idk why but I found the loading indicator in the loading buttons
98+
// does not align with the start icon from the regular button so this
99+
// is a visual adjustment.
100+
left: -6,
97101
},
98102

99103
"& .MuiLoadingButton-loadingIndicator .MuiCircularProgress-root": {

0 commit comments

Comments
 (0)