Skip to content

Commit f7d25ca

Browse files
ajhaiajhai
committed
Move SheetHeader into its own component
1 parent 9df029d commit f7d25ca

File tree

2 files changed

+138
-139
lines changed

2 files changed

+138
-139
lines changed

‎llmstack/client/src/components/sheets/Sheet.jsx‎

Lines changed: 2 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,15 @@
11
import { useCallback, useEffect, useRef, useState } from "react";
2-
import {
3-
Box,
4-
Button,
5-
Stack,
6-
Typography,
7-
CircularProgress,
8-
IconButton,
9-
Tooltip,
10-
} from "@mui/material";
2+
import { Box, Stack, CircularProgress } from "@mui/material";
113
import {
124
DataEditor,
135
GridCellKind,
146
GridColumnIcon,
157
} from "@glideapps/glide-data-grid";
16-
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
17-
import { useNavigate } from "react-router-dom";
188
import { SheetColumnMenu, SheetColumnMenuButton } from "./SheetColumnMenu";
199
import { axios } from "../../data/axios";
2010
import { Ws } from "../../data/ws";
2111
import { enqueueSnackbar } from "notistack";
22-
import SaveIcon from "@mui/icons-material/Save";
23-
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
24-
import PauseIcon from "@mui/icons-material/Pause";
25-
import DownloadIcon from "@mui/icons-material/Download";
12+
import SheetHeader from "./SheetHeader";
2613

2714
import "@glideapps/glide-data-grid/dist/index.css";
2815

@@ -52,130 +39,6 @@ const gridCellToCellId = (gridCell, columns) => {
5239
return `${colLetter}${rowIndex + 1}`;
5340
};
5441

55-
const SheetHeader = ({
56-
sheet,
57-
setRunId,
58-
hasChanges,
59-
onSave,
60-
sheetRunning,
61-
runId,
62-
}) => {
63-
const navigate = useNavigate();
64-
65-
const saveSheet = () => {
66-
onSave();
67-
};
68-
69-
const runSheet = () => {
70-
const runSheetAction = () => {
71-
axios()
72-
.post(`/api/sheets/${sheet.uuid}/run`)
73-
.then((response) => {
74-
setRunId(response.data.run_id);
75-
})
76-
.catch((error) => {
77-
console.error(error);
78-
enqueueSnackbar(
79-
`Error running sheet: ${
80-
error?.response?.data?.detail || error.message
81-
}`,
82-
{ variant: "error" },
83-
);
84-
});
85-
};
86-
87-
if (hasChanges) {
88-
onSave().then(runSheetAction);
89-
} else {
90-
runSheetAction();
91-
}
92-
};
93-
94-
const downloadSheet = () => {
95-
window.open(`/api/sheets/${sheet.uuid}/download`, "_blank");
96-
};
97-
98-
return (
99-
<Stack>
100-
<Typography variant="h5" className="section-header">
101-
<Stack
102-
direction={"row"}
103-
sx={{ justifyContent: "space-between", alignItems: "center" }}
104-
>
105-
<Stack direction="row" alignItems="center" spacing={2}>
106-
<Tooltip title="Back to Sheets List">
107-
<IconButton
108-
onClick={() => navigate("/sheets")}
109-
sx={{ color: "action.disabled", padding: 0 }}
110-
>
111-
<ArrowBackIcon
112-
fontSize="small"
113-
sx={{
114-
color: "action.disabled",
115-
padding: 0,
116-
}}
117-
/>
118-
</IconButton>
119-
</Tooltip>
120-
<Stack>
121-
{sheet?.name}
122-
<Typography variant="caption" sx={{ color: "#666" }}>
123-
{sheet?.description || sheet?.data?.description || ""}
124-
</Typography>
125-
</Stack>
126-
</Stack>
127-
<Stack direction={"row"} gap={1}>
128-
<Tooltip title="Save changes">
129-
<Button
130-
onClick={saveSheet}
131-
disabled={!hasChanges}
132-
color="primary"
133-
variant="outlined"
134-
sx={{ minWidth: "40px", padding: "5px", borderRadius: "4px" }}
135-
>
136-
<SaveIcon />
137-
</Button>
138-
</Tooltip>
139-
{!sheetRunning && (
140-
<Tooltip title="Download CSV">
141-
<Button
142-
onClick={downloadSheet}
143-
color="primary"
144-
variant="outlined"
145-
sx={{ minWidth: "40px", padding: "5px", borderRadius: "4px" }}
146-
>
147-
<DownloadIcon />
148-
</Button>
149-
</Tooltip>
150-
)}
151-
<Tooltip
152-
title={
153-
sheetRunning ? "Sheet is already running" : "Run the sheet"
154-
}
155-
>
156-
<Button
157-
variant="contained"
158-
size="medium"
159-
onClick={runSheet}
160-
disabled={sheetRunning}
161-
sx={{
162-
bgcolor: "success.main",
163-
"&:hover": { bgcolor: "success.dark" },
164-
minWidth: "40px",
165-
padding: "5px",
166-
borderRadius: "4px !important",
167-
}}
168-
>
169-
{sheetRunning ? <PauseIcon /> : <PlayArrowIcon />}
170-
</Button>
171-
</Tooltip>
172-
</Stack>
173-
</Stack>
174-
</Typography>
175-
</Stack>
176-
);
177-
};
178-
17942
function Sheet(props) {
18043
const { sheetId } = props;
18144
const [sheetRunning, setSheetRunning] = useState(false);

‎llmstack/client/src/components/sheets/SheetHeader.jsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from "react";
2+
import { Stack, Typography, Button, IconButton, Tooltip } from "@mui/material";
3+
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
4+
import SaveIcon from "@mui/icons-material/Save";
5+
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
6+
import PauseIcon from "@mui/icons-material/Pause";
7+
import DownloadIcon from "@mui/icons-material/Download";
8+
import { useNavigate } from "react-router-dom";
9+
import { enqueueSnackbar } from "notistack";
10+
import { axios } from "../../data/axios";
11+
12+
const SheetHeader = ({
13+
sheet,
14+
setRunId,
15+
hasChanges,
16+
onSave,
17+
sheetRunning,
18+
runId,
19+
}) => {
20+
const navigate = useNavigate();
21+
22+
const saveSheet = () => {
23+
onSave();
24+
};
25+
26+
const runSheet = () => {
27+
const runSheetAction = () => {
28+
axios()
29+
.post(`/api/sheets/${sheet.uuid}/run`)
30+
.then((response) => {
31+
setRunId(response.data.run_id);
32+
})
33+
.catch((error) => {
34+
console.error(error);
35+
enqueueSnackbar(
36+
`Error running sheet: ${
37+
error?.response?.data?.detail || error.message
38+
}`,
39+
{ variant: "error" },
40+
);
41+
});
42+
};
43+
44+
if (hasChanges) {
45+
onSave().then(runSheetAction);
46+
} else {
47+
runSheetAction();
48+
}
49+
};
50+
51+
const downloadSheet = () => {
52+
window.open(`/api/sheets/${sheet.uuid}/download`, "_blank");
53+
};
54+
55+
return (
56+
<Stack>
57+
<Typography variant="h5" className="section-header">
58+
<Stack
59+
direction={"row"}
60+
sx={{ justifyContent: "space-between", alignItems: "center" }}
61+
>
62+
<Stack direction="row" alignItems="center" spacing={2}>
63+
<Tooltip title="Back to Sheets List">
64+
<IconButton
65+
onClick={() => navigate("/sheets")}
66+
sx={{ color: "action.disabled", padding: 0 }}
67+
>
68+
<ArrowBackIcon
69+
fontSize="small"
70+
sx={{
71+
color: "action.disabled",
72+
padding: 0,
73+
}}
74+
/>
75+
</IconButton>
76+
</Tooltip>
77+
<Stack>
78+
{sheet?.name}
79+
<Typography variant="caption" sx={{ color: "#666" }}>
80+
{sheet?.description || sheet?.data?.description || ""}
81+
</Typography>
82+
</Stack>
83+
</Stack>
84+
<Stack direction={"row"} gap={1}>
85+
<Tooltip title="Save changes">
86+
<Button
87+
onClick={saveSheet}
88+
disabled={!hasChanges}
89+
color="primary"
90+
variant="outlined"
91+
sx={{ minWidth: "40px", padding: "5px", borderRadius: "4px" }}
92+
>
93+
<SaveIcon />
94+
</Button>
95+
</Tooltip>
96+
{!sheetRunning && (
97+
<Tooltip title="Download CSV">
98+
<Button
99+
onClick={downloadSheet}
100+
color="primary"
101+
variant="outlined"
102+
sx={{ minWidth: "40px", padding: "5px", borderRadius: "4px" }}
103+
>
104+
<DownloadIcon />
105+
</Button>
106+
</Tooltip>
107+
)}
108+
<Tooltip
109+
title={
110+
sheetRunning ? "Sheet is already running" : "Run the sheet"
111+
}
112+
>
113+
<Button
114+
variant="contained"
115+
size="medium"
116+
onClick={runSheet}
117+
disabled={sheetRunning}
118+
sx={{
119+
bgcolor: "success.main",
120+
"&:hover": { bgcolor: "success.dark" },
121+
minWidth: "40px",
122+
padding: "5px",
123+
borderRadius: "4px !important",
124+
}}
125+
>
126+
{sheetRunning ? <PauseIcon /> : <PlayArrowIcon />}
127+
</Button>
128+
</Tooltip>
129+
</Stack>
130+
</Stack>
131+
</Typography>
132+
</Stack>
133+
);
134+
};
135+
136+
export default SheetHeader;

0 commit comments

Comments
 (0)