code editor updates

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<{

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
   }
 };

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}
       />
     );
   }

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>

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;
 }
 

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'
   }
 };
 

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>
     )

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}

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';