From 6e8f217233104feb541d75caef822b749f5422bb Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 27 Feb 2025 13:54:32 -0700
Subject: [PATCH] code editor updates

---
 .../[datasetId]/editor/EditorContent.tsx      |  2 +-
 .../AppVerticalCodeSplitter.stories.tsx       | 24 +++++++++++++------
 .../AppVerticalCodeSplitter.tsx               |  5 +++-
 .../AppVerticalCodeSplitter/DataContainer.tsx |  0
 .../AppVerticalCodeSplitter/SQLContainer.tsx  |  3 ++-
 .../AppVerticalCodeSplitter/index.ts          |  0
 .../ui/inputs/AppCodeEditor/AppCodeEditor.tsx |  2 +-
 .../themes/github_light_theme.ts              |  3 ++-
 .../AppSplitter/AppSplitter.stories.tsx       |  2 +-
 .../ui/layout/AppSplitter/AppSplitter.tsx     |  3 +--
 .../MetricViewResultsController.tsx           |  2 +-
 11 files changed, 30 insertions(+), 16 deletions(-)
 rename web/src/components/features/{ => layout}/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx (70%)
 rename web/src/components/features/{ => layout}/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx (95%)
 rename web/src/components/features/{ => layout}/AppVerticalCodeSplitter/DataContainer.tsx (100%)
 rename web/src/components/features/{ => layout}/AppVerticalCodeSplitter/SQLContainer.tsx (98%)
 rename web/src/components/features/{ => layout}/AppVerticalCodeSplitter/index.ts (100%)

diff --git a/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx b/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx
index b1bf59006..70953959d 100644
--- a/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx
+++ b/web/src/app/app/datasets/[datasetId]/editor/EditorContent.tsx
@@ -10,7 +10,7 @@ import { runSQL } from '@/api/buster_rest';
 import type { RustApiError } from '@/api/buster_rest/errors';
 import isEmpty from 'lodash/isEmpty';
 import type { AppSplitterRef } from '@/components/ui/layout/AppSplitter';
-import { AppVerticalCodeSplitter } from '@/components/features/AppVerticalCodeSplitter';
+import { AppVerticalCodeSplitter } from '@/components/features/layout/AppVerticalCodeSplitter';
 import { useDatasetPageContextSelector } from '../_DatasetsLayout/DatasetPageContext';
 
 export const EditorContent: React.FC<{
diff --git a/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx b/web/src/components/features/layout/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
similarity index 70%
rename from web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
rename to web/src/components/features/layout/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
index 0dd5537ee..f3e10ddb0 100644
--- a/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
+++ b/web/src/components/features/layout/AppVerticalCodeSplitter/AppVerticalCodeSplitter.stories.tsx
@@ -2,12 +2,22 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppVerticalCodeSplitter } from './AppVerticalCodeSplitter';
 
 const meta: Meta<typeof AppVerticalCodeSplitter> = {
-  title: 'UI/Layouts/AppVerticalCodeSplitter',
+  title: 'Features/Layout/AppVerticalCodeSplitter',
   component: AppVerticalCodeSplitter,
   parameters: {
     layout: 'fullscreen'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  args: {
+    className: 'min-h-[600px] min-w-[600px]'
+  },
+  decorators: [
+    (Story) => (
+      <div className="" style={{ height: '500px' }}>
+        <Story />
+      </div>
+    )
+  ]
 };
 
 export default meta;
@@ -21,13 +31,13 @@ const mockData: Record<string, string | number | null>[] = [
 export const Default: Story = {
   args: {
     sql: 'SELECT * FROM sample_table',
-    setSQL: (sql: string) => console.log('SQL changed:', sql),
+    setSQL: (sql: string) => alert('SQL changed: ' + sql),
     runSQLError: null,
-    onRunQuery: async () => console.log('Running query...'),
+    onRunQuery: async () => alert('Running query...'),
     data: mockData,
     fetchingData: false,
     defaultLayout: ['50%', '50%'],
-    autoSaveId: 'default-splitter'
+    autoSaveId: 'default-split-for-code-splitter'
   }
 };
 
@@ -62,14 +72,14 @@ export const CustomGap: Story = {
 export const WithSaveButton: Story = {
   args: {
     ...Default.args,
-    onSaveSQL: async () => console.log('Saving SQL...')
+    onSaveSQL: async () => alert('Saving SQL...')
   }
 };
 
 export const DisabledSave: Story = {
   args: {
     ...Default.args,
-    onSaveSQL: async () => console.log('Saving SQL...'),
+    onSaveSQL: async () => alert('Saving SQL...'),
     disabledSave: true
   }
 };
diff --git a/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx b/web/src/components/features/layout/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
similarity index 95%
rename from web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
rename to web/src/components/features/layout/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
index 8a5f679ee..093e9a30d 100644
--- a/web/src/components/features/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
+++ b/web/src/components/features/layout/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx
@@ -17,6 +17,7 @@ export interface AppVerticalCodeSplitterProps {
   onSaveSQL?: () => Promise<void>;
   disabledSave?: boolean;
   gapAmount?: number;
+  className?: string;
 }
 
 export const AppVerticalCodeSplitter = forwardRef<AppSplitterRef, AppVerticalCodeSplitterProps>(
@@ -33,7 +34,8 @@ export const AppVerticalCodeSplitter = forwardRef<AppSplitterRef, AppVerticalCod
       autoSaveId,
       disabledSave = false,
       topHidden = false,
-      gapAmount = 3
+      gapAmount = 3,
+      className
     },
     ref
   ) => {
@@ -69,6 +71,7 @@ export const AppVerticalCodeSplitter = forwardRef<AppSplitterRef, AppVerticalCod
         rightPanelMinSize={'80px'}
         leftPanelMinSize={'120px'}
         leftHidden={topHidden}
+        className={className}
       />
     );
   }
diff --git a/web/src/components/features/AppVerticalCodeSplitter/DataContainer.tsx b/web/src/components/features/layout/AppVerticalCodeSplitter/DataContainer.tsx
similarity index 100%
rename from web/src/components/features/AppVerticalCodeSplitter/DataContainer.tsx
rename to web/src/components/features/layout/AppVerticalCodeSplitter/DataContainer.tsx
diff --git a/web/src/components/features/AppVerticalCodeSplitter/SQLContainer.tsx b/web/src/components/features/layout/AppVerticalCodeSplitter/SQLContainer.tsx
similarity index 98%
rename from web/src/components/features/AppVerticalCodeSplitter/SQLContainer.tsx
rename to web/src/components/features/layout/AppVerticalCodeSplitter/SQLContainer.tsx
index c00a4d519..a8f306bd3 100644
--- a/web/src/components/features/AppVerticalCodeSplitter/SQLContainer.tsx
+++ b/web/src/components/features/layout/AppVerticalCodeSplitter/SQLContainer.tsx
@@ -46,6 +46,7 @@ export const SQLContainer: React.FC<{
           value={sql}
           onChange={setDatasetSQL}
           onMetaEnter={onRunQueryPreflight}
+          variant={null}
         />
         <div className="bg-border-color my-0! h-[0.5px] w-full" />
         <div className="relative flex items-center justify-between px-4 py-2.5">
@@ -68,7 +69,7 @@ export const SQLContainer: React.FC<{
               className="flex items-center space-x-0"
               onClick={onRunQueryPreflight}
               suffix={
-                <div className="flex items-center">
+                <div className="flex items-center gap-x-1 text-sm">
                   <Command />
                   <ReturnKey />
                 </div>
diff --git a/web/src/components/features/AppVerticalCodeSplitter/index.ts b/web/src/components/features/layout/AppVerticalCodeSplitter/index.ts
similarity index 100%
rename from web/src/components/features/AppVerticalCodeSplitter/index.ts
rename to web/src/components/features/layout/AppVerticalCodeSplitter/index.ts
diff --git a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
index b2d2414c8..e8cd78860 100644
--- a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
+++ b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
@@ -33,7 +33,7 @@ export interface AppCodeEditorProps {
   readOnlyMessage?: string;
   defaultValue?: string;
   monacoEditorOptions?: editor.IStandaloneEditorConstructionOptions;
-  variant?: 'bordered';
+  variant?: 'bordered' | null;
   onMetaEnter?: () => void;
 }
 
diff --git a/web/src/components/ui/inputs/AppCodeEditor/themes/github_light_theme.ts b/web/src/components/ui/inputs/AppCodeEditor/themes/github_light_theme.ts
index 67e7028a3..f6c37bc52 100644
--- a/web/src/components/ui/inputs/AppCodeEditor/themes/github_light_theme.ts
+++ b/web/src/components/ui/inputs/AppCodeEditor/themes/github_light_theme.ts
@@ -355,7 +355,8 @@ const theme: editor.IStandaloneThemeData = {
     'editorWhitespace.foreground': '#959da5',
     'editorIndentGuide.background': '#959da5',
     'editorIndentGuide.activeBackground': '#24292e',
-    'editor.selectionHighlightBorder': '#fafbfc'
+    'editor.selectionHighlightBorder': '#fafbfc',
+    focusBorder: '#00000000'
   }
 };
 
diff --git a/web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx b/web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx
index 360c7d691..4b52bc992 100644
--- a/web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx
+++ b/web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx
@@ -10,7 +10,7 @@ const meta = {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <div className="" style={{ height: '400px' }}>
+      <div className="p-2" style={{ height: '400px' }}>
         <Story />
       </div>
     )
diff --git a/web/src/components/ui/layout/AppSplitter/AppSplitter.tsx b/web/src/components/ui/layout/AppSplitter/AppSplitter.tsx
index 9ec2de95a..fabf7d777 100644
--- a/web/src/components/ui/layout/AppSplitter/AppSplitter.tsx
+++ b/web/src/components/ui/layout/AppSplitter/AppSplitter.tsx
@@ -235,12 +235,11 @@ export const AppSplitter = React.memo(
       useImperativeHandle(ref, imperativeHandleMethods);
 
       return (
-        <div className="h-full w-full" ref={containerRef}>
+        <div className={cn('h-full w-full', className)} ref={containerRef}>
           <SplitPane
             autoSizeId={autoSaveId}
             initialReady={initialReady}
             split={split}
-            className={`${className}`}
             sizes={_sizes}
             style={style}
             allowResize={_allowResize}
diff --git a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
index 44b101670..3e8c70edd 100644
--- a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
+++ b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import type { MetricViewProps } from '../config';
 import { useMetricIndividual } from '@/context/Metrics';
-import { AppVerticalCodeSplitter } from '@/components/features/AppVerticalCodeSplitter';
+import { AppVerticalCodeSplitter } from '@/components/features/layout/AppVerticalCodeSplitter';
 import { useMemoizedFn, useUnmount } from 'ahooks';
 import { IDataResult } from '@/api/asset_interfaces';
 import { useMetricLayout } from '../useMetricLayout';