Skip to content
Prev Previous commit
Next Next commit
emotion: TemplateVersionEditor
  • Loading branch information
aslilac committed Oct 3, 2023
commit 627d09b7fb75baba5cb6c506496e810c4f58e197
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,14 @@ export const Example: Story = {};

export const Logs = {
args: {
isBuildingNewVersion: true,
buildLogs: MockWorkspaceBuildLogs,
},
};

export const Resources: Story = {
args: {
isBuildingNewVersion: true,
buildLogs: MockWorkspaceBuildLogs,
resources: [
MockWorkspaceResource,
Expand All @@ -54,6 +56,7 @@ export const Resources: Story = {

export const ManyLogs = {
args: {
isBuildingNewVersion: true,
templateVersion: {
...MockTemplateVersion,
job: {
Expand Down
171 changes: 71 additions & 100 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import Link from "@mui/material/Link";
import { makeStyles } from "@mui/styles";
import Tooltip from "@mui/material/Tooltip";
import CreateIcon from "@mui/icons-material/AddOutlined";
import BuildIcon from "@mui/icons-material/BuildOutlined";
Expand All @@ -21,7 +20,7 @@ import { AvatarData } from "components/AvatarData/AvatarData";
import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable";
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
import { PublishVersionData } from "pages/TemplateVersionEditorPage/types";
import { FC, useCallback, useEffect, useRef, useState } from "react";
import { type FC, useCallback, useEffect, useRef, useState } from "react";
import {
createFile,
existsFile,
Expand All @@ -46,17 +45,17 @@ import {
getStatus,
TemplateVersionStatusBadge,
} from "./TemplateVersionStatusBadge";
import { Theme } from "@mui/material/styles";
import AlertTitle from "@mui/material/AlertTitle";
import { DashboardFullPage } from "components/Dashboard/DashboardLayout";
import { type Interpolation, type Theme, useTheme } from "@emotion/react";

export interface TemplateVersionEditorProps {
template: Template;
templateVersion: TemplateVersion;
isBuildingNewVersion: boolean;
defaultFileTree: FileTree;
buildLogs?: ProvisionerJobLog[];
resources?: WorkspaceResource[];
deploymentBannerVisible?: boolean;
disablePreview: boolean;
disableUpdate: boolean;
onPreview: (files: FileTree) => void;
Expand Down Expand Up @@ -92,8 +91,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
disablePreview,
disableUpdate,
template,
deploymentBannerVisible,
templateVersion,
isBuildingNewVersion,
defaultFileTree,
onPreview,
onPublish,
Expand All @@ -111,6 +110,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
onSubmitMissingVariableValues,
onCancelSubmitMissingVariableValues,
}) => {
const theme = useTheme();
// If resources are provided, show them by default!
// This is for Storybook!
const [selectedTab, setSelectedTab] = useState(() => (resources ? 1 : 0));
Expand Down Expand Up @@ -173,22 +173,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
const templateVersionSucceeded = templateVersion.job.status === "succeeded";
const showBuildLogs = Boolean(buildLogs);
const editorValue = getFileContent(activePath ?? "", fileTree) as string;
const firstTemplateVersionOnEditor = useRef(templateVersion);

useEffect(() => {
window.dispatchEvent(new Event("resize"));
}, [showBuildLogs]);
const styles = useStyles({
templateVersionSucceeded,
showBuildLogs,
deploymentBannerVisible,
});

return (
<>
<DashboardFullPage className={styles.root}>
<div className={styles.topbar} data-testid="topbar">
<div className={styles.topbarSides}>
<DashboardFullPage
css={{
background: theme.palette.background.default,
}}
>
<div css={styles.topbar} data-testid="topbar">
<div css={styles.topbarSides}>
<Link
component={RouterLink}
underline="none"
Expand Down Expand Up @@ -220,12 +218,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
</Alert>
)}

<div className={styles.topbarSides}>
{/* Only start to show the build when a new template version is building */}
{templateVersion.id !== firstTemplateVersionOnEditor.current.id && (
<div className={styles.buildStatus}>
<TemplateVersionStatusBadge version={templateVersion} />
</div>
<div css={styles.topbarSides}>
{isBuildingNewVersion && (
<TemplateVersionStatusBadge version={templateVersion} />
)}

<Button
Expand All @@ -248,11 +243,11 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
</div>
</div>

<div className={styles.sidebarAndEditor}>
<div className={styles.sidebar}>
<div className={styles.sidebarTitle}>
<div css={styles.sidebarAndEditor}>
<div css={styles.sidebar}>
<div css={styles.sidebarTitle}>
Template files
<div className={styles.sidebarActions}>
<div css={styles.sidebarActions}>
<Tooltip title="Create File" placement="top">
<IconButton
aria-label="Create File"
Expand Down Expand Up @@ -331,8 +326,16 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
/>
</div>

<div className={styles.editorPane}>
<div className={styles.editor} data-chromatic="ignore">
<div
css={{
display: "grid",
width: "100%",
gridTemplateColumns: showBuildLogs ? "1fr 1fr" : "1fr 0fr",
minHeight: "100%",
overflow: "hidden",
}}
>
<div css={styles.editor} data-chromatic="ignore">
{activePath ? (
<MonacoEditor
value={editorValue}
Expand All @@ -352,12 +355,12 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}
</div>

<div className={styles.panelWrapper}>
<div className={styles.tabs}>
<div css={styles.panelWrapper}>
<div css={styles.tabs}>
<button
className={`${styles.tab} ${
selectedTab === 0 ? "active" : ""
}`}
css={`
${styles.tab} ${selectedTab === 0 ? "active" : ""}
`}
onClick={() => {
setSelectedTab(0);
}}
Expand All @@ -372,9 +375,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({

{!disableUpdate && (
<button
className={`${styles.tab} ${
selectedTab === 1 ? "active" : ""
}`}
css={`
${styles.tab} ${selectedTab === 1 ? "active" : ""}
`}
onClick={() => {
setSelectedTab(1);
}}
Expand All @@ -386,9 +389,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
</div>

<div
className={`${styles.panel} ${styles.buildLogs} ${
selectedTab === 0 ? "" : "hidden"
}`}
css={[
styles.panel,
{
display: selectedTab !== 0 ? "none" : "flex",
flexDirection: "column",
},
]}
>
{templateVersion.job.error && (
<div>
Expand Down Expand Up @@ -419,9 +426,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
</div>

<div
className={`${styles.panel} ${styles.resources} ${
selectedTab === 1 ? "" : "hidden"
}`}
css={[
styles.panel,
{
paddingBottom: theme.spacing(2),
display: selectedTab !== 1 ? "none" : undefined,
},
]}
>
{resources && (
<TemplateResourcesTable
Expand All @@ -432,12 +443,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}
</div>
</div>

{templateVersionSucceeded && (
<>
<div className={styles.panelDivider} />
</>
)}
</div>
</div>
</DashboardFullPage>
Expand All @@ -462,48 +467,33 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
);
};

const useStyles = makeStyles<
Theme,
{
templateVersionSucceeded: boolean;
showBuildLogs: boolean;
deploymentBannerVisible?: boolean;
}
>((theme) => ({
root: {
background: theme.palette.background.default,
},
topbar: {
const styles = {
topbar: (theme) => ({
padding: theme.spacing(2),
borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
height: topbarHeight,
background: theme.palette.background.paper,
},
topbarSides: {
}),
topbarSides: (theme) => ({
display: "flex",
alignItems: "center",
gap: theme.spacing(2),
},
buildStatus: {
display: "flex",
alignItems: "center",
gap: 8,
},
}),
sidebarAndEditor: {
display: "flex",
flex: 1,
flexBasis: 0,
overflow: "hidden",
},
sidebar: {
sidebar: (theme) => ({
minWidth: 256,
backgroundColor: theme.palette.background.paper,
borderRight: `1px solid ${theme.palette.divider}`,
},
sidebarTitle: {
}),
sidebarTitle: (theme) => ({
fontSize: 10,
textTransform: "uppercase",
padding: theme.spacing(1, 2),
Expand All @@ -512,45 +502,33 @@ const useStyles = makeStyles<
letterSpacing: "0.5px",
display: "flex",
alignItems: "center",
},
sidebarActions: {
}),
sidebarActions: (theme) => ({
marginLeft: "auto",
"& svg": {
fill: theme.palette.text.primary,
},
},
editorPane: {
display: "grid",
width: "100%",
gridTemplateColumns: (props) =>
props.showBuildLogs ? "1fr 1fr" : "1fr 0fr",
minHeight: "100%",
overflow: "hidden",
},
}),
editor: {
flex: 1,
},
panelWrapper: {
panelWrapper: (theme) => ({
flex: 1,
borderLeft: `1px solid ${theme.palette.divider}`,
overflow: "hidden",
display: "flex",
flexDirection: "column",
},
}),
panel: {
overflowY: "auto",
height: "100%",

"&.hidden": {
display: "none",
},

// Hack to access customize resource-card from here
"& .resource-card": {
border: 0,
},
},
tabs: {
tabs: (theme) => ({
borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex",
boxShadow: "#000000 0 6px 6px -6px inset",
Expand All @@ -561,8 +539,8 @@ const useStyles = makeStyles<
textTransform: "none",
letterSpacing: "unset",
},
},
tab: {
}),
tab: (theme) => ({
cursor: "pointer",
padding: theme.spacing(1.5),
fontSize: 10,
Expand Down Expand Up @@ -601,8 +579,8 @@ const useStyles = makeStyles<
"&:hover": {
color: theme.palette.text.primary,
},
},
tabBar: {
}),
tabBar: (theme) => ({
padding: "8px 16px",
position: "sticky",
top: 0,
Expand All @@ -615,12 +593,5 @@ const useStyles = makeStyles<
"&.top": {
borderTop: `1px solid ${theme.palette.divider}`,
},
},
buildLogs: {
display: "flex",
flexDirection: "column",
},
resources: {
paddingBottom: theme.spacing(2),
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ export const TemplateVersionEditorPage: FC = () => {
{isSuccess && (
<TemplateVersionEditor
template={data.template}
deploymentBannerVisible={permissions.viewDeploymentStats}
templateVersion={editorState.context.version || data.version}
isBuildingNewVersion={Boolean(editorState.context.version)}
defaultFileTree={data.fileTree}
onPreview={(fileTree) => {
sendEvent({
Expand Down
Loading