Fix template version editor overflow

kylecarbs · kylecarbs · commit 00ebe2e85b90 · 2023-03-07T01:32:43.000Z
diff --git a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx
@@ -20,6 +20,8 @@ import dayjs from "dayjs"
 import CollectedIcon from "@material-ui/icons/Compare"
 import RefreshIcon from "@material-ui/icons/Refresh"
 
+export const bannerHeight = 36
+
 export interface DeploymentBannerViewProps {
   fetchStats?: () => void
   stats?: DeploymentStats
@@ -250,6 +252,7 @@ const useStyles = makeStyles((theme) => ({
   },
   container: {
     position: "sticky",
+    height: bannerHeight,
     bottom: 0,
     zIndex: 1,
     padding: theme.spacing(1, 2),
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -13,6 +13,7 @@ import {
 } from "api/typesGenerated"
 import { Avatar } from "components/Avatar/Avatar"
 import { AvatarData } from "components/AvatarData/AvatarData"
+import { bannerHeight } from "components/DeploymentBanner/DeploymentBannerView"
 import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { FC, useCallback, useEffect, useRef, useState } from "react"
@@ -44,6 +45,7 @@ export interface TemplateVersionEditorProps {
   defaultFileTree: FileTree
   buildLogs?: ProvisionerJobLog[]
   resources?: WorkspaceResource[]
+  deploymentBannerVisible?: boolean
   disablePreview: boolean
   disableUpdate: boolean
   onPreview: (files: FileTree) => void
@@ -68,6 +70,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   disablePreview,
   disableUpdate,
   template,
+  deploymentBannerVisible,
   templateVersion,
   defaultFileTree,
   onPreview,
@@ -146,6 +149,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   const styles = useStyles({
     templateVersionSucceeded,
     showBuildLogs,
+    deploymentBannerVisible,
   })
 
   return (
@@ -385,10 +389,14 @@ const useStyles = makeStyles<
   {
     templateVersionSucceeded: boolean
     showBuildLogs: boolean
+    deploymentBannerVisible: boolean
   }
 >((theme) => ({
   root: {
-    height: `calc(100vh - ${navHeight}px)`,
+    height: (props) =>
+      `calc(100vh - ${
+        navHeight + (props.deploymentBannerVisible ? bannerHeight : 0)
+      }px)`,
     background: theme.palette.background.default,
     flex: 1,
     display: "flex",
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -1,6 +1,7 @@
 import { useMachine } from "@xstate/react"
 import { TemplateVersionEditor } from "components/TemplateVersionEditor/TemplateVersionEditor"
 import { useOrganizationId } from "hooks/useOrganizationId"
+import { usePermissions } from "hooks/usePermissions"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useParams } from "react-router-dom"
@@ -19,6 +20,7 @@ export const TemplateVersionEditorPage: FC = () => {
   const [editorState, sendEvent] = useMachine(templateVersionEditorMachine, {
     context: { orgId },
   })
+  const permissions = usePermissions()
   const { isSuccess, data } = useTemplateVersionData(
     {
       orgId,
@@ -41,6 +43,7 @@ export const TemplateVersionEditorPage: FC = () => {
       {isSuccess && (
         <TemplateVersionEditor
           template={data.template}
+          deploymentBannerVisible={permissions.viewDeploymentStats}
           templateVersion={editorState.context.version || data.version}
           defaultFileTree={data.fileTree}
           onPreview={(fileTree) => {
