From c71d2ea818b1027ca0ba5006cb9057f8092d1464 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 25 Aug 2023 19:18:50 +0000
Subject: [PATCH 1/2] Fix vertical overflow

---
 .../TemplateVersionEditor.stories.tsx         | 378 ++++++++++++++++--
 .../TemplateVersionEditor.tsx                 |  23 +-
 2 files changed, 360 insertions(+), 41 deletions(-)

diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.stories.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.stories.tsx
index 24a40ad4d4fae..8255e0fa1eeb6 100644
--- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.stories.tsx
+++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.stories.tsx
@@ -1,4 +1,3 @@
-import { Story } from "@storybook/react"
 import {
   MockTemplate,
   MockTemplateVersion,
@@ -8,49 +7,362 @@ import {
   MockWorkspaceResource2,
   MockWorkspaceResource3,
 } from "testHelpers/entities"
-import {
-  TemplateVersionEditor,
-  TemplateVersionEditorProps,
-} from "./TemplateVersionEditor"
+import { TemplateVersionEditor } from "./TemplateVersionEditor"
+import type { Meta, StoryObj } from "@storybook/react"
 
-export default {
+const meta: Meta<typeof TemplateVersionEditor> = {
   title: "components/TemplateVersionEditor",
   component: TemplateVersionEditor,
+  args: {
+    template: MockTemplate,
+    templateVersion: MockTemplateVersion,
+    defaultFileTree: MockTemplateVersionFileTree,
+  },
   parameters: {
     layout: "fullscreen",
   },
 }
 
-const Template: Story<TemplateVersionEditorProps> = (
-  args: TemplateVersionEditorProps,
-) => <TemplateVersionEditor {...args} />
-
-export const Example = Template.bind({})
-Example.args = {
-  template: MockTemplate,
-  templateVersion: MockTemplateVersion,
-  defaultFileTree: MockTemplateVersionFileTree,
-}
+export default meta
+type Story = StoryObj<typeof TemplateVersionEditor>
 
-export const Logs = Template.bind({})
+export const Example: Story = {}
 
-Logs.args = {
-  template: MockTemplate,
-  templateVersion: MockTemplateVersion,
-  defaultFileTree: MockTemplateVersionFileTree,
-  buildLogs: MockWorkspaceBuildLogs,
+export const Logs = {
+  args: {
+    buildLogs: MockWorkspaceBuildLogs,
+  },
 }
 
-export const Resources = Template.bind({})
+export const Resources: Story = {
+  args: {
+    buildLogs: MockWorkspaceBuildLogs,
+    resources: [
+      MockWorkspaceResource,
+      MockWorkspaceResource2,
+      MockWorkspaceResource3,
+    ],
+  },
+}
 
-Resources.args = {
-  template: MockTemplate,
-  templateVersion: MockTemplateVersion,
-  defaultFileTree: MockTemplateVersionFileTree,
-  buildLogs: MockWorkspaceBuildLogs,
-  resources: [
-    MockWorkspaceResource,
-    MockWorkspaceResource2,
-    MockWorkspaceResource3,
-  ],
+export const ManyLogs = {
+  args: {
+    templateVersion: {
+      ...MockTemplateVersion,
+      job: {
+        ...MockTemplateVersion.job,
+        error:
+          "template import provision for start: terraform plan: exit status 1",
+      },
+    },
+    buildLogs: [
+      {
+        id: 938494,
+        created_at: "2023-08-25T19:07:43.331Z",
+        log_source: "provisioner_daemon",
+        log_level: "info",
+        stage: "Setting up",
+        output: "",
+      },
+      {
+        id: 938495,
+        created_at: "2023-08-25T19:07:43.331Z",
+        log_source: "provisioner_daemon",
+        log_level: "info",
+        stage: "Parsing template parameters",
+        output: "",
+      },
+      {
+        id: 938496,
+        created_at: "2023-08-25T19:07:43.339Z",
+        log_source: "provisioner_daemon",
+        log_level: "info",
+        stage: "Detecting persistent resources",
+        output: "",
+      },
+      {
+        id: 938497,
+        created_at: "2023-08-25T19:07:44.15Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: "Initializing the backend...",
+      },
+      {
+        id: 938498,
+        created_at: "2023-08-25T19:07:44.215Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: "Initializing provider plugins...",
+      },
+      {
+        id: 938499,
+        created_at: "2023-08-25T19:07:44.216Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: '- Finding coder/coder versions matching "~> 0.11.0"...',
+      },
+      {
+        id: 938500,
+        created_at: "2023-08-25T19:07:44.668Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: '- Finding kreuzwerker/docker versions matching "~> 3.0.1"...',
+      },
+      {
+        id: 938501,
+        created_at: "2023-08-25T19:07:44.722Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: "- Using coder/coder v0.11.1 from the shared cache directory",
+      },
+      {
+        id: 938502,
+        created_at: "2023-08-25T19:07:44.857Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          "- Using kreuzwerker/docker v3.0.2 from the shared cache directory",
+      },
+      {
+        id: 938503,
+        created_at: "2023-08-25T19:07:45.081Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          "Terraform has created a lock file .terraform.lock.hcl to record the provider",
+      },
+      {
+        id: 938504,
+        created_at: "2023-08-25T19:07:45.081Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          "selections it made above. Include this file in your version control repository",
+      },
+      {
+        id: 938505,
+        created_at: "2023-08-25T19:07:45.081Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          "so that Terraform can guarantee to make the same selections by default when",
+      },
+      {
+        id: 938506,
+        created_at: "2023-08-25T19:07:45.082Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: 'you run "terraform init" in the future.',
+      },
+      {
+        id: 938507,
+        created_at: "2023-08-25T19:07:45.083Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: "Terraform has been successfully initialized!",
+      },
+      {
+        id: 938508,
+        created_at: "2023-08-25T19:07:45.084Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          'You may now begin working with Terraform. Try running "terraform plan" to see',
+      },
+      {
+        id: 938509,
+        created_at: "2023-08-25T19:07:45.084Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          "any changes that are required for your infrastructure. All Terraform commands",
+      },
+      {
+        id: 938510,
+        created_at: "2023-08-25T19:07:45.084Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: "should now work.",
+      },
+      {
+        id: 938511,
+        created_at: "2023-08-25T19:07:45.084Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          "If you ever set or change modules or backend configuration for Terraform,",
+      },
+      {
+        id: 938512,
+        created_at: "2023-08-25T19:07:45.084Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output:
+          "rerun this command to reinitialize your working directory. If you forget, other",
+      },
+      {
+        id: 938513,
+        created_at: "2023-08-25T19:07:45.084Z",
+        log_source: "provisioner",
+        log_level: "debug",
+        stage: "Detecting persistent resources",
+        output: "commands will detect it and remind you to do so if necessary.",
+      },
+      {
+        id: 938514,
+        created_at: "2023-08-25T19:07:45.143Z",
+        log_source: "provisioner",
+        log_level: "info",
+        stage: "Detecting persistent resources",
+        output: "Terraform 1.1.9",
+      },
+      {
+        id: 938515,
+        created_at: "2023-08-25T19:07:46.297Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: "Warning: Argument is deprecated",
+      },
+      {
+        id: 938516,
+        created_at: "2023-08-25T19:07:46.297Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: 'on devcontainer-on-docker.tf line 15, in provider "coder":',
+      },
+      {
+        id: 938517,
+        created_at: "2023-08-25T19:07:46.297Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: "  15:   feature_use_managed_variables = true",
+      },
+      {
+        id: 938518,
+        created_at: "2023-08-25T19:07:46.297Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: "",
+      },
+      {
+        id: 938519,
+        created_at: "2023-08-25T19:07:46.297Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output:
+          "Terraform variables are now exclusively utilized for template-wide variables after the removal of support for legacy parameters.",
+      },
+      {
+        id: 938520,
+        created_at: "2023-08-25T19:07:46.3Z",
+        log_source: "provisioner",
+        log_level: "error",
+        stage: "Detecting persistent resources",
+        output: "Error: ephemeral parameter requires the default property",
+      },
+      {
+        id: 938521,
+        created_at: "2023-08-25T19:07:46.3Z",
+        log_source: "provisioner",
+        log_level: "error",
+        stage: "Detecting persistent resources",
+        output:
+          'on devcontainer-on-docker.tf line 27, in data "coder_parameter" "another_one":',
+      },
+      {
+        id: 938522,
+        created_at: "2023-08-25T19:07:46.3Z",
+        log_source: "provisioner",
+        log_level: "error",
+        stage: "Detecting persistent resources",
+        output: '  27: data "coder_parameter" "another_one" {',
+      },
+      {
+        id: 938523,
+        created_at: "2023-08-25T19:07:46.301Z",
+        log_source: "provisioner",
+        log_level: "error",
+        stage: "Detecting persistent resources",
+        output: "",
+      },
+      {
+        id: 938524,
+        created_at: "2023-08-25T19:07:46.301Z",
+        log_source: "provisioner",
+        log_level: "error",
+        stage: "Detecting persistent resources",
+        output: "",
+      },
+      {
+        id: 938525,
+        created_at: "2023-08-25T19:07:46.303Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: "Warning: Argument is deprecated",
+      },
+      {
+        id: 938526,
+        created_at: "2023-08-25T19:07:46.303Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: 'on devcontainer-on-docker.tf line 15, in provider "coder":',
+      },
+      {
+        id: 938527,
+        created_at: "2023-08-25T19:07:46.303Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: "  15:   feature_use_managed_variables = true",
+      },
+      {
+        id: 938528,
+        created_at: "2023-08-25T19:07:46.303Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output: "",
+      },
+      {
+        id: 938529,
+        created_at: "2023-08-25T19:07:46.303Z",
+        log_source: "provisioner",
+        log_level: "warn",
+        stage: "Detecting persistent resources",
+        output:
+          "Terraform variables are now exclusively utilized for template-wide variables after the removal of support for legacy parameters.",
+      },
+      {
+        id: 938530,
+        created_at: "2023-08-25T19:07:46.311Z",
+        log_source: "provisioner_daemon",
+        log_level: "info",
+        stage: "Cleaning Up",
+        output: "",
+      },
+    ],
+  },
 }
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
index 9ffe7e0e41b4c..8bca93050064e 100644
--- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
+++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -376,7 +376,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               >
                 {templateVersion.job.error && (
                   <div>
-                    <Alert severity="error">
+                    <Alert
+                      severity="error"
+                      sx={{
+                        borderRadius: 0,
+                        border: 0,
+                        borderBottom: (theme) =>
+                          `1px solid ${theme.palette.divider}`,
+                        borderLeft: (theme) =>
+                          `2px solid ${theme.palette.error.main}`,
+                      }}
+                    >
                       <AlertTitle>Error during the build</AlertTitle>
                       <AlertDetail>{templateVersion.job.error}</AlertDetail>
                     </Alert>
@@ -385,7 +395,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
                 {buildLogs && buildLogs.length > 0 && (
                   <WorkspaceBuildLogs
-                    sx={{ borderRadius: 0 }}
+                    sx={{ borderRadius: 0, border: 0 }}
                     hideTimestamps
                     logs={buildLogs}
                   />
@@ -470,6 +480,7 @@ const useStyles = makeStyles<
     display: "flex",
     flex: 1,
     flexBasis: 0,
+    overflow: "hidden",
   },
   sidebar: {
     minWidth: 256,
@@ -505,14 +516,10 @@ const useStyles = makeStyles<
   },
   panelWrapper: {
     flex: 1,
-    display: "flex",
-    flexDirection: "column",
     borderLeft: `1px solid ${theme.palette.divider}`,
-    overflowY: "auto",
+    overflow: "hidden",
   },
   panel: {
-    padding: theme.spacing(1),
-
     "&.hidden": {
       display: "none",
     },
@@ -587,6 +594,6 @@ const useStyles = makeStyles<
     display: "flex",
     flexDirection: "column",
     overflowY: "auto",
-    gap: theme.spacing(1),
+    height: "100%",
   },
 }))

From 8f1f6c1dc691adb07cfa8457ec535d17869dcd6a Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 25 Aug 2023 19:33:04 +0000
Subject: [PATCH 2/2] fix(site): make right panel scrollable on template editor

---
 site/src/components/Resources/ResourceCard.tsx  |  2 +-
 .../TemplateVersionEditor.tsx                   | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index f951cb0a4d2be..e3667e95bf587 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -28,7 +28,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
     : metadataToDisplay.slice(0, 4)
 
   return (
-    <div key={resource.id} className={styles.resourceCard}>
+    <div key={resource.id} className={`${styles.resourceCard} resource-card`}>
       <Stack
         direction="row"
         alignItems="flex-start"
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
index 8bca93050064e..33577ea4488c4 100644
--- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
+++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -403,7 +403,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               </div>
 
               <div
-                className={`${styles.panel} ${
+                className={`${styles.panel} ${styles.resources} ${
                   selectedTab === 1 ? "" : "hidden"
                 }`}
               >
@@ -518,11 +518,21 @@ const useStyles = makeStyles<
     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: {
     borderBottom: `1px solid ${theme.palette.divider}`,
@@ -593,7 +603,8 @@ const useStyles = makeStyles<
   buildLogs: {
     display: "flex",
     flexDirection: "column",
-    overflowY: "auto",
-    height: "100%",
+  },
+  resources: {
+    paddingBottom: theme.spacing(2),
   },
 }))