Oct 5, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx

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

 export const Resources: Story = {
  args: {
    isBuildingNewVersion: true,
    buildLogs: MockWorkspaceBuildLogs,
    resources: [
      MockWorkspaceResource,

 export const ManyLogs = {
  args: {
    isBuildingNewVersion: true,
    templateVersion: {
      ...MockTemplateVersion,
      job: {
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
 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";
 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 {typeFC, useCallback, useEffect, useRef, useState } from "react";
 import {
  createFile,
  existsFile,
  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;
  disablePreview,
  disableUpdate,
  template,
  deploymentBannerVisible,
  templateVersion,
  isBuildingNewVersion,
  defaultFileTree,
  onPreview,
  onPublish,
  onSubmitMissingVariableValues,
  onCancelSubmitMissingVariableValues,
 }) => {
  const theme = useTheme();
  // If resources are provided, show them by default!
  // This is for Storybook!
  const [selectedTab, setSelectedTab] = useState(() => (resources ? 1 : 0));
  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"
            </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
          </div>
        </div>

        <divclassName={styles.sidebarAndEditor}>
          <divclassName={styles.sidebar}>
            <divclassName={styles.sidebarTitle}>
        <divcss={styles.sidebarAndEditor}>
          <divcss={styles.sidebar}>
            <divcss={styles.sidebarTitle}>
              Template files
              <divclassName={styles.sidebarActions}>
              <divcss={styles.sidebarActions}>
                <Tooltip title="Create File" placement="top">
                  <IconButton
                    aria-label="Create File"
            />
          </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}
              )}
            </div>

            <divclassName={styles.panelWrapper}>
              <divclassName={styles.tabs}>
            <divcss={styles.panelWrapper}>
              <divcss={styles.tabs}>
                <button
 className={`${styles.tab} ${
                    selectedTab === 0 ? "active" : ""
 }`}
 css={`
 ${styles.tab} ${selectedTab === 0 ? "active" : ""}
                  `}
                  onClick={() => {
                    setSelectedTab(0);
                  }}

                {!disableUpdate && (
                  <button
 className={`${styles.tab} ${
                      selectedTab === 1 ? "active" : ""
 }`}
 css={`
 ${styles.tab} ${selectedTab === 1 ? "active" : ""}
                    `}
                    onClick={() => {
                      setSelectedTab(1);
                    }}
              </div>

              <div
                className={`${styles.panel} ${styles.buildLogs} ${
                  selectedTab === 0 ? "" : "hidden"
                }`}
                css={[
                  styles.panel,
                  {
                    display: selectedTab !== 0 ? "none" : "flex",
                    flexDirection: "column",
                  },
                ]}
              >
                {templateVersion.job.error && (
                  <div>
              </div>

              <div
                className={`${styles.panel} ${styles.resources} ${
                  selectedTab === 1 ? "" : "hidden"
                }`}
                css={[
                  styles.panel,
                  {
                    paddingBottom: theme.spacing(2),
                    display: selectedTab !== 1 ? "none" : undefined,
                  },
                ]}
              >
                {resources && (
                  <TemplateResourcesTable
                )}
              </div>
            </div>

            {templateVersionSucceeded && (
              <>
                <div className={styles.panelDivider} />
              </>
            )}
          </div>
        </div>
      </DashboardFullPage>
  );
 };

 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),
    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",
      textTransform: "none",
      letterSpacing: "unset",
    },
  },
  tab: {
  }),
  tab:(theme) => ({
    cursor: "pointer",
    padding: theme.spacing(1.5),
    fontSize: 10,
    "&:hover": {
      color: theme.palette.text.primary,
    },
  },
  tabBar: {
  }),
  tabBar:(theme) => ({
    padding: "8px 16px",
    position: "sticky",
    top: 0,
    "&.top": {
      borderTop: `1px solid ${theme.palette.divider}`,
    },
  },
  buildLogs: {
    display: "flex",
    flexDirection: "column",
  },
  resources: {
    paddingBottom: theme.spacing(2),
  },
 }));
  }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
      {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({
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
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 {typeFC, 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 DownExpand 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 DownExpand 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 DownExpand 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>

		<divclassName={styles.sidebarAndEditor}>
		<divclassName={styles.sidebar}>
		<divclassName={styles.sidebarTitle}>
		<divcss={styles.sidebarAndEditor}>
		<divcss={styles.sidebar}>
		<divcss={styles.sidebarTitle}>
		Template files
		<divclassName={styles.sidebarActions}>
		<divcss={styles.sidebarActions}>
		<Tooltip title="Create File" placement="top">
		<IconButton
		aria-label="Create File"
Expand DownExpand 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>

		<divclassName={styles.panelWrapper}>
		<divclassName={styles.tabs}>
		<divcss={styles.panelWrapper}>
		<divcss={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 DownExpand 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 DownExpand 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