Skip to content

Commit 627d09b

Browse files
aslilacaslilac
committed
emotion: TemplateVersionEditor 
1 parent 515511c commit 627d09b

File tree

4 files changed

+76
-101
lines changed

4 files changed

+76
-101
lines changed

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,14 @@ export const Example: Story = {};
3434

3535
export const Logs = {
3636
args: {
37+
isBuildingNewVersion: true,
3738
buildLogs: MockWorkspaceBuildLogs,
3839
},
3940
};
4041

4142
export const Resources: Story = {
4243
args: {
44+
isBuildingNewVersion: true,
4345
buildLogs: MockWorkspaceBuildLogs,
4446
resources: [
4547
MockWorkspaceResource,
@@ -54,6 +56,7 @@ export const Resources: Story = {
5456

5557
export const ManyLogs = {
5658
args: {
59+
isBuildingNewVersion: true,
5760
templateVersion: {
5861
...MockTemplateVersion,
5962
job: {

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

Lines changed: 71 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Button from "@mui/material/Button";
22
import IconButton from "@mui/material/IconButton";
33
import Link from "@mui/material/Link";
4-
import { makeStyles } from "@mui/styles";
54
import Tooltip from "@mui/material/Tooltip";
65
import CreateIcon from "@mui/icons-material/AddOutlined";
76
import BuildIcon from "@mui/icons-material/BuildOutlined";
@@ -21,7 +20,7 @@ import { AvatarData } from "components/AvatarData/AvatarData";
2120
import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable";
2221
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
2322
import { PublishVersionData } from "pages/TemplateVersionEditorPage/types";
24-
import { FC, useCallback, useEffect, useRef, useState } from "react";
23+
import { type FC, useCallback, useEffect, useRef, useState } from "react";
2524
import {
2625
createFile,
2726
existsFile,
@@ -46,17 +45,17 @@ import {
4645
getStatus,
4746
TemplateVersionStatusBadge,
4847
} from "./TemplateVersionStatusBadge";
49-
import { Theme } from "@mui/material/styles";
5048
import AlertTitle from "@mui/material/AlertTitle";
5149
import { DashboardFullPage } from "components/Dashboard/DashboardLayout";
50+
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
5251

5352
export interface TemplateVersionEditorProps {
5453
template: Template;
5554
templateVersion: TemplateVersion;
55+
isBuildingNewVersion: boolean;
5656
defaultFileTree: FileTree;
5757
buildLogs?: ProvisionerJobLog[];
5858
resources?: WorkspaceResource[];
59-
deploymentBannerVisible?: boolean;
6059
disablePreview: boolean;
6160
disableUpdate: boolean;
6261
onPreview: (files: FileTree) => void;
@@ -92,8 +91,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
9291
disablePreview,
9392
disableUpdate,
9493
template,
95-
deploymentBannerVisible,
9694
templateVersion,
95+
isBuildingNewVersion,
9796
defaultFileTree,
9897
onPreview,
9998
onPublish,
@@ -111,6 +110,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
111110
onSubmitMissingVariableValues,
112111
onCancelSubmitMissingVariableValues,
113112
}) => {
113+
const theme = useTheme();
114114
// If resources are provided, show them by default!
115115
// This is for Storybook!
116116
const [selectedTab, setSelectedTab] = useState(() => (resources ? 1 : 0));
@@ -173,22 +173,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
173173
const templateVersionSucceeded = templateVersion.job.status === "succeeded";
174174
const showBuildLogs = Boolean(buildLogs);
175175
const editorValue = getFileContent(activePath ?? "", fileTree) as string;
176-
const firstTemplateVersionOnEditor = useRef(templateVersion);
177176

178177
useEffect(() => {
179178
window.dispatchEvent(new Event("resize"));
180179
}, [showBuildLogs]);
181-
const styles = useStyles({
182-
templateVersionSucceeded,
183-
showBuildLogs,
184-
deploymentBannerVisible,
185-
});
186180

187181
return (
188182
<>
189-
<DashboardFullPage className={styles.root}>
190-
<div className={styles.topbar} data-testid="topbar">
191-
<div className={styles.topbarSides}>
183+
<DashboardFullPage
184+
css={{
185+
background: theme.palette.background.default,
186+
}}
187+
>
188+
<div css={styles.topbar} data-testid="topbar">
189+
<div css={styles.topbarSides}>
192190
<Link
193191
component={RouterLink}
194192
underline="none"
@@ -220,12 +218,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
220218
</Alert>
221219
)}
222220

223-
<div className={styles.topbarSides}>
224-
{/* Only start to show the build when a new template version is building */}
225-
{templateVersion.id !== firstTemplateVersionOnEditor.current.id && (
226-
<div className={styles.buildStatus}>
227-
<TemplateVersionStatusBadge version={templateVersion} />
228-
</div>
221+
<div css={styles.topbarSides}>
222+
{isBuildingNewVersion && (
223+
<TemplateVersionStatusBadge version={templateVersion} />
229224
)}
230225

231226
<Button
@@ -248,11 +243,11 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
248243
</div>
249244
</div>
250245

251-
<div className={styles.sidebarAndEditor}>
252-
<div className={styles.sidebar}>
253-
<div className={styles.sidebarTitle}>
246+
<div css={styles.sidebarAndEditor}>
247+
<div css={styles.sidebar}>
248+
<div css={styles.sidebarTitle}>
254249
Template files
255-
<div className={styles.sidebarActions}>
250+
<div css={styles.sidebarActions}>
256251
<Tooltip title="Create File" placement="top">
257252
<IconButton
258253
aria-label="Create File"
@@ -331,8 +326,16 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
331326
/>
332327
</div>
333328

334-
<div className={styles.editorPane}>
335-
<div className={styles.editor} data-chromatic="ignore">
329+
<div
330+
css={{
331+
display: "grid",
332+
width: "100%",
333+
gridTemplateColumns: showBuildLogs ? "1fr 1fr" : "1fr 0fr",
334+
minHeight: "100%",
335+
overflow: "hidden",
336+
}}
337+
>
338+
<div css={styles.editor} data-chromatic="ignore">
336339
{activePath ? (
337340
<MonacoEditor
338341
value={editorValue}
@@ -352,12 +355,12 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
352355
)}
353356
</div>
354357

355-
<div className={styles.panelWrapper}>
356-
<div className={styles.tabs}>
358+
<div css={styles.panelWrapper}>
359+
<div css={styles.tabs}>
357360
<button
358-
className={`${styles.tab} ${
359-
selectedTab === 0 ? "active" : ""
360-
}`}
361+
css={`
362+
${styles.tab} ${selectedTab === 0 ? "active" : ""}
363+
`}
361364
onClick={() => {
362365
setSelectedTab(0);
363366
}}
@@ -372,9 +375,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
372375

373376
{!disableUpdate && (
374377
<button
375-
className={`${styles.tab} ${
376-
selectedTab === 1 ? "active" : ""
377-
}`}
378+
css={`
379+
${styles.tab} ${selectedTab === 1 ? "active" : ""}
380+
`}
378381
onClick={() => {
379382
setSelectedTab(1);
380383
}}
@@ -386,9 +389,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
386389
</div>
387390

388391
<div
389-
className={`${styles.panel} ${styles.buildLogs} ${
390-
selectedTab === 0 ? "" : "hidden"
391-
}`}
392+
css={[
393+
styles.panel,
394+
{
395+
display: selectedTab !== 0 ? "none" : "flex",
396+
flexDirection: "column",
397+
},
398+
]}
392399
>
393400
{templateVersion.job.error && (
394401
<div>
@@ -419,9 +426,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
419426
</div>
420427

421428
<div
422-
className={`${styles.panel} ${styles.resources} ${
423-
selectedTab === 1 ? "" : "hidden"
424-
}`}
429+
css={[
430+
styles.panel,
431+
{
432+
paddingBottom: theme.spacing(2),
433+
display: selectedTab !== 1 ? "none" : undefined,
434+
},
435+
]}
425436
>
426437
{resources && (
427438
<TemplateResourcesTable
@@ -432,12 +443,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
432443
)}
433444
</div>
434445
</div>
435-
436-
{templateVersionSucceeded && (
437-
<>
438-
<div className={styles.panelDivider} />
439-
</>
440-
)}
441446
</div>
442447
</div>
443448
</DashboardFullPage>
@@ -462,48 +467,33 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
462467
);
463468
};
464469

465-
const useStyles = makeStyles<
466-
Theme,
467-
{
468-
templateVersionSucceeded: boolean;
469-
showBuildLogs: boolean;
470-
deploymentBannerVisible?: boolean;
471-
}
472-
>((theme) => ({
473-
root: {
474-
background: theme.palette.background.default,
475-
},
476-
topbar: {
470+
const styles = {
471+
topbar: (theme) => ({
477472
padding: theme.spacing(2),
478473
borderBottom: `1px solid ${theme.palette.divider}`,
479474
display: "flex",
480475
alignItems: "center",
481476
justifyContent: "space-between",
482477
height: topbarHeight,
483478
background: theme.palette.background.paper,
484-
},
485-
topbarSides: {
479+
}),
480+
topbarSides: (theme) => ({
486481
display: "flex",
487482
alignItems: "center",
488483
gap: theme.spacing(2),
489-
},
490-
buildStatus: {
491-
display: "flex",
492-
alignItems: "center",
493-
gap: 8,
494-
},
484+
}),
495485
sidebarAndEditor: {
496486
display: "flex",
497487
flex: 1,
498488
flexBasis: 0,
499489
overflow: "hidden",
500490
},
501-
sidebar: {
491+
sidebar: (theme) => ({
502492
minWidth: 256,
503493
backgroundColor: theme.palette.background.paper,
504494
borderRight: `1px solid ${theme.palette.divider}`,
505-
},
506-
sidebarTitle: {
495+
}),
496+
sidebarTitle: (theme) => ({
507497
fontSize: 10,
508498
textTransform: "uppercase",
509499
padding: theme.spacing(1, 2),
@@ -512,45 +502,33 @@ const useStyles = makeStyles<
512502
letterSpacing: "0.5px",
513503
display: "flex",
514504
alignItems: "center",
515-
},
516-
sidebarActions: {
505+
}),
506+
sidebarActions: (theme) => ({
517507
marginLeft: "auto",
518508
"& svg": {
519509
fill: theme.palette.text.primary,
520510
},
521-
},
522-
editorPane: {
523-
display: "grid",
524-
width: "100%",
525-
gridTemplateColumns: (props) =>
526-
props.showBuildLogs ? "1fr 1fr" : "1fr 0fr",
527-
minHeight: "100%",
528-
overflow: "hidden",
529-
},
511+
}),
530512
editor: {
531513
flex: 1,
532514
},
533-
panelWrapper: {
515+
panelWrapper: (theme) => ({
534516
flex: 1,
535517
borderLeft: `1px solid ${theme.palette.divider}`,
536518
overflow: "hidden",
537519
display: "flex",
538520
flexDirection: "column",
539-
},
521+
}),
540522
panel: {
541523
overflowY: "auto",
542524
height: "100%",
543525

544-
"&.hidden": {
545-
display: "none",
546-
},
547-
548526
// Hack to access customize resource-card from here
549527
"& .resource-card": {
550528
border: 0,
551529
},
552530
},
553-
tabs: {
531+
tabs: (theme) => ({
554532
borderBottom: `1px solid ${theme.palette.divider}`,
555533
display: "flex",
556534
boxShadow: "#000000 0 6px 6px -6px inset",
@@ -561,8 +539,8 @@ const useStyles = makeStyles<
561539
textTransform: "none",
562540
letterSpacing: "unset",
563541
},
564-
},
565-
tab: {
542+
}),
543+
tab: (theme) => ({
566544
cursor: "pointer",
567545
padding: theme.spacing(1.5),
568546
fontSize: 10,
@@ -601,8 +579,8 @@ const useStyles = makeStyles<
601579
"&:hover": {
602580
color: theme.palette.text.primary,
603581
},
604-
},
605-
tabBar: {
582+
}),
583+
tabBar: (theme) => ({
606584
padding: "8px 16px",
607585
position: "sticky",
608586
top: 0,
@@ -615,12 +593,5 @@ const useStyles = makeStyles<
615593
"&.top": {
616594
borderTop: `1px solid ${theme.palette.divider}`,
617595
},
618-
},
619-
buildLogs: {
620-
display: "flex",
621-
flexDirection: "column",
622-
},
623-
resources: {
624-
paddingBottom: theme.spacing(2),
625-
},
626-
}));
596+
}),
597+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export const TemplateVersionEditorPage: FC = () => {
4545
{isSuccess && (
4646
<TemplateVersionEditor
4747
template={data.template}
48-
deploymentBannerVisible={permissions.viewDeploymentStats}
4948
templateVersion={editorState.context.version || data.version}
49+
isBuildingNewVersion={Boolean(editorState.context.version)}
5050
defaultFileTree={data.fileTree}
5151
onPreview={(fileTree) => {
5252
sendEvent({

0 commit comments

Comments
 (0)