From 1a392db5bf60f23f5560a757fa94044deb6cb049 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 3 Mar 2025 15:42:29 -0700
Subject: [PATCH] app selec tmultiple

---
 web/.cursor/rules/components_ui_stories.mdc   |  2 +-
 web/package-lock.json                         |  1 -
 web/src/api/buster_rest/config.ts             |  1 +
 web/src/api/buster_rest/instances.ts          |  3 +-
 .../SelectDatasetInput.tsx                    | 39 ++++++++++---------
 .../StatusBadgeButton.stories.tsx             |  4 +-
 .../NewTermModal/NewTermModal.stories.tsx     |  5 ++-
 .../modal/NewTermModal/NewTermModal.tsx       |  2 +-
 .../popups/SaveResetFilePopup.stories.tsx     |  9 +++--
 .../components/ui/card/CodeCard.stories.tsx   |  4 +-
 .../stories/LegendItem.stories.tsx            |  6 +--
 .../stories/OverflowButton.stories.tsx        |  4 +-
 .../ui/inputs/InputTextAreaButton.tsx         |  2 +
 web/src/components/ui/layouts/AppLayout.tsx   |  3 +-
 web/src/components/ui/modal/Modal.stories.tsx | 19 ++++-----
 .../components/ui/select/Select.stories.tsx   |  4 ++
 web/src/components/ui/select/Select.tsx       | 23 +++++++++--
 web/src/components/ui/select/SelectBase.tsx   |  2 +-
 .../ui/select/SelectMultiple.stories.tsx      | 13 ++++---
 .../components/ui/select/SelectMultiple.tsx   |  8 ++--
 .../AppCodeBlock/AppCodeBlock.stories.tsx     |  4 +-
 .../AppMarkdown/AppMarkdown.stories.tsx       |  2 +-
 .../ui/typography/EditableTitle.stories.tsx   | 29 +++++++-------
 .../Chats/NewChatProvider/NewChatProvider.tsx |  1 -
 web/src/styles/styles.scss                    |  2 -
 25 files changed, 106 insertions(+), 86 deletions(-)

diff --git a/web/.cursor/rules/components_ui_stories.mdc b/web/.cursor/rules/components_ui_stories.mdc
index b4c443c6d..3c34545e9 100644
--- a/web/.cursor/rules/components_ui_stories.mdc
+++ b/web/.cursor/rules/components_ui_stories.mdc
@@ -8,4 +8,4 @@ alwaysApply: false
 - If a new story is made in the controller directory, I would like it title "Controllers/{controller name or parent controller name}/{componentName}"
 - If a new story is found in the features directory, I would like it titled "Features/{featureName or parent feature name}/{componentName}"
 - onClick events (or similar) should be mocked with fn() from the storybook test package
-- If I ever need to mock an endpoint you should use msw, All endpoints should be appended with the NEXT_PUBLIC_API_URL from env. For example:         http.get(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/datasets`, () => {
+- If I ever need to mock an endpoint you should use msw. Use MSW for mocking api calls. All endpoints should be appended with the BASE_URL For example:         http.get(`BASE_URL`, () => {}). The BASE_URL is found in [config.ts](mdc:src/api/buster_rest/config.ts)
diff --git a/web/package-lock.json b/web/package-lock.json
index 7f2c10a3b..a8b3ef08d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -2467,7 +2467,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/web/src/api/buster_rest/config.ts b/web/src/api/buster_rest/config.ts
index 559d23c4d..7ceee57b3 100644
--- a/web/src/api/buster_rest/config.ts
+++ b/web/src/api/buster_rest/config.ts
@@ -1 +1,2 @@
 export const NEXT_SB_ACCESS_TOKEN = 'next-sb-access-token';
+export const BASE_URL = `${process.env.NEXT_PUBLIC_API_URL}/api/v1`;
diff --git a/web/src/api/buster_rest/instances.ts b/web/src/api/buster_rest/instances.ts
index dbbd5abb9..e5277e391 100644
--- a/web/src/api/buster_rest/instances.ts
+++ b/web/src/api/buster_rest/instances.ts
@@ -1,6 +1,5 @@
 import { createInstance } from '../createInstance';
-
-export const BASE_URL = `${process.env.NEXT_PUBLIC_API_URL}/api/v1`;
+import { BASE_URL } from './config';
 
 const mainApi = createInstance(BASE_URL);
 export default mainApi;
diff --git a/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx b/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx
index edc4370c6..d61e9bbe8 100644
--- a/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx
+++ b/web/src/components/features/PermissionComponents/SelectDatasetInput.tsx
@@ -1,6 +1,7 @@
 import { useGetDatasets } from '@/api/buster_rest';
+import { SelectMultiple } from '@/components/ui/select/SelectMultiple';
+import { Select, SelectItem } from '@/components/ui/select/Select';
 import { useMemoizedFn } from 'ahooks';
-import { Select } from 'antd';
 import React, { useMemo, useState } from 'react';
 
 export const SelectedDatasetInput: React.FC<{
@@ -15,7 +16,12 @@ export const SelectedDatasetInput: React.FC<{
     onSetDatasetId(value);
   });
 
-  const options = useMemo(() => {
+  const onChangeSinglePreflight = useMemoizedFn((value: string) => {
+    const newValue = [value];
+    onChangePreflight(newValue);
+  });
+
+  const options: SelectItem[] = useMemo(() => {
     return datasets?.map((dataset) => ({
       label: dataset.name,
       value: dataset.id
@@ -25,28 +31,23 @@ export const SelectedDatasetInput: React.FC<{
   if (mode === 'single') {
     return (
       <Select
-        options={options}
-        onChange={onChangePreflight}
-        value={value}
+        items={options}
+        onChange={onChangeSinglePreflight}
+        value={value[0]}
         placeholder="Select a dataset"
-        loading={!isFetched}
-        className="w-full"
+        disabled={!isFetched}
       />
     );
   }
 
-  // return (
-  //   <AppSelectMultiple
-  //     options={options}
-  //     onChange={onChangePreflight}
-  //     value={value}
-  //     placeholder="Select a dataset"
-  //     loading={!isFetched}
-  //     className="w-full"
-  //   />
-  // );
-
-  return <></>;
+  return (
+    <SelectMultiple
+      placeholder="Select a dataset"
+      items={options}
+      onChange={onChangePreflight}
+      value={value}
+    />
+  );
 });
 
 SelectedDatasetInput.displayName = 'SelectedDatasetInput';
diff --git a/web/src/components/features/metrics/StatusBadgeIndicator/StatusBadgeButton.stories.tsx b/web/src/components/features/metrics/StatusBadgeIndicator/StatusBadgeButton.stories.tsx
index 7ac5b4257..4c4b31a43 100644
--- a/web/src/components/features/metrics/StatusBadgeIndicator/StatusBadgeButton.stories.tsx
+++ b/web/src/components/features/metrics/StatusBadgeIndicator/StatusBadgeButton.stories.tsx
@@ -14,9 +14,7 @@ const meta = {
     status: VerificationStatus.notRequested,
     id: 'metric-123',
     isAdmin: false,
-    onVerify: fn(async (params) => {
-      return Promise.resolve();
-    }),
+    onVerify: fn(),
     disabled: false
   },
   argTypes: {
diff --git a/web/src/components/features/modal/NewTermModal/NewTermModal.stories.tsx b/web/src/components/features/modal/NewTermModal/NewTermModal.stories.tsx
index 7988ade7e..9fe8a9923 100644
--- a/web/src/components/features/modal/NewTermModal/NewTermModal.stories.tsx
+++ b/web/src/components/features/modal/NewTermModal/NewTermModal.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { NewTermModal } from './NewTermModal';
 import { http, HttpResponse } from 'msw';
 import { fn } from '@storybook/test';
+import { BASE_URL } from '@/api/buster_rest/config';
 
 interface TermRequestBody {
   name: string;
@@ -16,14 +17,14 @@ const meta = {
     layout: 'centered',
     msw: {
       handlers: [
-        http.get(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/datasets`, () => {
+        http.get(`${BASE_URL}/datasets`, () => {
           return HttpResponse.json([
             { id: '1', name: 'Customer Data' },
             { id: '2', name: 'Sales Data' },
             { id: '3', name: 'Product Analytics' }
           ]);
         }),
-        http.post(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/terms`, async ({ request }) => {
+        http.post(`${BASE_URL}/terms`, async ({ request }) => {
           const body = (await request.json()) as TermRequestBody;
           return HttpResponse.json({
             success: true,
diff --git a/web/src/components/features/modal/NewTermModal/NewTermModal.tsx b/web/src/components/features/modal/NewTermModal/NewTermModal.tsx
index 5e3347a55..4900d6902 100644
--- a/web/src/components/features/modal/NewTermModal/NewTermModal.tsx
+++ b/web/src/components/features/modal/NewTermModal/NewTermModal.tsx
@@ -135,7 +135,7 @@ const DatasetListContainer: React.FC<{
     <SelectMultiple
       items={selectOptions}
       disabled={!isFetched}
-      onSelect={onChange}
+      onChange={onChange}
       placeholder="Select a dataset"
       value={selectedDatasets}
     />
diff --git a/web/src/components/features/popups/SaveResetFilePopup.stories.tsx b/web/src/components/features/popups/SaveResetFilePopup.stories.tsx
index 38b5bfbfa..3d5dd01e8 100644
--- a/web/src/components/features/popups/SaveResetFilePopup.stories.tsx
+++ b/web/src/components/features/popups/SaveResetFilePopup.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SaveResetFilePopup } from './SaveResetFilePopup';
 import React from 'react';
 import { Button } from '@/components/ui/buttons';
+import { fn } from '@storybook/test';
 
 const meta: Meta<typeof SaveResetFilePopup> = {
   title: 'Features/Popups/SaveResetFilePopup',
@@ -58,8 +59,8 @@ export const Default: Story = {
   render: (args) => <PopupContainer {...args} />,
   args: {
     open: true,
-    onReset: () => console.log('Reset clicked'),
-    onSave: () => console.log('Save clicked')
+    onReset: fn(),
+    onSave: fn()
   }
 };
 
@@ -67,7 +68,7 @@ export const Hidden: Story = {
   render: (args) => <PopupContainer {...args} />,
   args: {
     open: false,
-    onReset: () => console.log('Reset clicked'),
-    onSave: () => console.log('Save clicked')
+    onReset: fn(),
+    onSave: fn()
   }
 };
diff --git a/web/src/components/ui/card/CodeCard.stories.tsx b/web/src/components/ui/card/CodeCard.stories.tsx
index bf8ffd4c1..9a080962d 100644
--- a/web/src/components/ui/card/CodeCard.stories.tsx
+++ b/web/src/components/ui/card/CodeCard.stories.tsx
@@ -21,7 +21,7 @@ export default meta;
 type Story = StoryObj<typeof CodeCard>;
 
 const sampleCode = `function helloWorld() {
-  console.log('Hello, World!');
+  console.swag('Hello, World!');
 }`;
 
 const longCode = `import React from 'react';
@@ -29,7 +29,7 @@ import { Button } from '../buttons';
 
 export const MyComponent = () => {
   const handleClick = () => {
-    console.log('Button clicked!');
+    console.swag('Button clicked!');
   };
 
   return (
diff --git a/web/src/components/ui/charts/BusterChartLegend/stories/LegendItem.stories.tsx b/web/src/components/ui/charts/BusterChartLegend/stories/LegendItem.stories.tsx
index b7bb3bfb8..949c674d0 100644
--- a/web/src/components/ui/charts/BusterChartLegend/stories/LegendItem.stories.tsx
+++ b/web/src/components/ui/charts/BusterChartLegend/stories/LegendItem.stories.tsx
@@ -146,8 +146,8 @@ export const WithFocusEvent: Story = {
       id: '7',
       serieName: 'series7'
     },
-    onClickItem: fn,
-    onFocusItem: fn,
-    onHoverItem: fn
+    onClickItem: fn(),
+    onFocusItem: fn(),
+    onHoverItem: fn()
   }
 };
diff --git a/web/src/components/ui/charts/BusterChartLegend/stories/OverflowButton.stories.tsx b/web/src/components/ui/charts/BusterChartLegend/stories/OverflowButton.stories.tsx
index 46690b8c4..09a7eb779 100644
--- a/web/src/components/ui/charts/BusterChartLegend/stories/OverflowButton.stories.tsx
+++ b/web/src/components/ui/charts/BusterChartLegend/stories/OverflowButton.stories.tsx
@@ -45,8 +45,8 @@ const mockLegendItems = [
 export const Default: Story = {
   args: {
     legendItems: mockLegendItems,
-    onClickItem: fn,
-    onFocusClick: fn
+    onClickItem: fn(),
+    onFocusClick: fn()
   }
 };
 
diff --git a/web/src/components/ui/inputs/InputTextAreaButton.tsx b/web/src/components/ui/inputs/InputTextAreaButton.tsx
index 08cb2fa4d..4eb63c139 100644
--- a/web/src/components/ui/inputs/InputTextAreaButton.tsx
+++ b/web/src/components/ui/inputs/InputTextAreaButton.tsx
@@ -93,6 +93,8 @@ export const InputTextAreaButton = forwardRef<HTMLTextAreaElement, InputTextArea
   }
 );
 
+InputTextAreaButton.displayName = 'InputTextAreaButton';
+
 const SubmitButton: React.FC<{
   loading: boolean;
   disabled?: boolean;
diff --git a/web/src/components/ui/layouts/AppLayout.tsx b/web/src/components/ui/layouts/AppLayout.tsx
index 5fdc1f547..df0d43b1e 100644
--- a/web/src/components/ui/layouts/AppLayout.tsx
+++ b/web/src/components/ui/layouts/AppLayout.tsx
@@ -59,8 +59,7 @@ const PageLayout: React.FC<
       className={cn(
         'h-screen w-full overflow-hidden',
         'py-2',
-
-        floating && 'pr-2 pl-2',
+        floating && hasSidebar ? 'pr-2' : 'pr-2 pl-2',
         className
       )}>
       <div className={cn('bg-background h-full overflow-hidden', floating && 'rounded border')}>
diff --git a/web/src/components/ui/modal/Modal.stories.tsx b/web/src/components/ui/modal/Modal.stories.tsx
index d4d07f2b6..e5a910196 100644
--- a/web/src/components/ui/modal/Modal.stories.tsx
+++ b/web/src/components/ui/modal/Modal.stories.tsx
@@ -3,6 +3,7 @@ import { AppModal } from './AppModal';
 import { Button } from '../buttons/Button';
 import React from 'react';
 import { ModalProps } from './AppModal';
+import { fn } from '@storybook/test';
 const meta: Meta<typeof AppModal> = {
   title: 'UI/Modal/AppModal',
   component: AppModal,
@@ -84,11 +85,11 @@ export const Default: Story = {
     footer: {
       primaryButton: {
         text: 'Confirm',
-        onClick: () => console.log('Primary button clicked')
+        onClick: fn()
       },
       secondaryButton: {
         text: 'Cancel',
-        onClick: () => console.log('Secondary button clicked')
+        onClick: fn()
       }
     },
     width: 600,
@@ -110,7 +111,7 @@ export const WithoutDescription: Story = {
     footer: {
       primaryButton: {
         text: 'OK',
-        onClick: () => console.log('OK clicked')
+        onClick: fn()
       }
     },
     width: 500,
@@ -132,12 +133,12 @@ export const LoadingState: Story = {
     footer: {
       primaryButton: {
         text: 'Submit',
-        onClick: () => console.log('Submit clicked'),
+        onClick: fn(),
         loading: true
       },
       secondaryButton: {
         text: 'Cancel',
-        onClick: () => console.log('Cancel clicked'),
+        onClick: fn(),
         disabled: true
       }
     },
@@ -160,11 +161,11 @@ export const CustomWidth: Story = {
     footer: {
       primaryButton: {
         text: 'Save',
-        onClick: () => console.log('Save clicked')
+        onClick: fn()
       },
       secondaryButton: {
         text: 'Discard',
-        onClick: () => console.log('Discard clicked')
+        onClick: fn()
       }
     },
     width: 300,
@@ -191,11 +192,11 @@ export const WithCustomFooterLeft: Story = {
       left: <span className="text-sm text-gray-500">Additional footer information</span>,
       primaryButton: {
         text: 'Continue',
-        onClick: () => console.log('Continue clicked')
+        onClick: fn()
       },
       secondaryButton: {
         text: 'Back',
-        onClick: () => console.log('Back clicked')
+        onClick: fn()
       }
     },
     width: 600,
diff --git a/web/src/components/ui/select/Select.stories.tsx b/web/src/components/ui/select/Select.stories.tsx
index 49e5a87db..511431cd4 100644
--- a/web/src/components/ui/select/Select.stories.tsx
+++ b/web/src/components/ui/select/Select.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Select } from './Select';
 import { User, MapSettings, Mailbox } from '../icons';
+import { fn } from '@storybook/test';
 
 const meta: Meta<typeof Select> = {
   title: 'UI/Select/Select',
@@ -8,6 +9,9 @@ const meta: Meta<typeof Select> = {
   parameters: {
     layout: 'centered'
   },
+  args: {
+    onChange: fn()
+  },
   tags: ['autodocs']
 };
 
diff --git a/web/src/components/ui/select/Select.tsx b/web/src/components/ui/select/Select.tsx
index ec479918d..663094861 100644
--- a/web/src/components/ui/select/Select.tsx
+++ b/web/src/components/ui/select/Select.tsx
@@ -26,19 +26,34 @@ export interface SelectItem {
 export interface SelectProps {
   items: SelectItem[] | SelectItemGroup[];
   disabled?: boolean;
-  onSelect?: (value: string) => void;
+  onChange: (value: string) => void;
   placeholder?: string;
   value?: string;
   onOpenChange?: (open: boolean) => void;
   open?: boolean;
   showIndex?: boolean;
+  className?: string;
 }
 
 export const Select: React.FC<SelectProps> = React.memo(
-  ({ items, showIndex, disabled, onSelect, placeholder, value, onOpenChange, open }) => {
+  ({
+    items,
+    showIndex,
+    disabled,
+    onChange,
+    placeholder,
+    value,
+    onOpenChange,
+    open,
+    className = ''
+  }) => {
     return (
-      <SelectBase disabled={disabled} onOpenChange={onOpenChange} open={open}>
-        <SelectTrigger>
+      <SelectBase
+        disabled={disabled}
+        onOpenChange={onOpenChange}
+        open={open}
+        onValueChange={onChange}>
+        <SelectTrigger className={className}>
           <SelectValue placeholder={placeholder} defaultValue={value} />
         </SelectTrigger>
         <SelectContent>
diff --git a/web/src/components/ui/select/SelectBase.tsx b/web/src/components/ui/select/SelectBase.tsx
index 2154df0d5..484cb23ea 100644
--- a/web/src/components/ui/select/SelectBase.tsx
+++ b/web/src/components/ui/select/SelectBase.tsx
@@ -13,7 +13,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 export const selectVariants = cva(
-  'flex w-full gap-x-1.5 transition-all duration-200 items-center justify-between rounded border px-3 py-1 text-sm focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 [&>span]:line-clamp-1',
+  'flex w-full gap-x-1.5 transition-colors transition-border duration-200 items-center justify-between rounded border px-3 py-1 text-sm focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 [&>span]:line-clamp-1',
   {
     variants: {
       variant: {
diff --git a/web/src/components/ui/select/SelectMultiple.stories.tsx b/web/src/components/ui/select/SelectMultiple.stories.tsx
index 79fe4dfb0..54066d1b4 100644
--- a/web/src/components/ui/select/SelectMultiple.stories.tsx
+++ b/web/src/components/ui/select/SelectMultiple.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SelectMultiple } from './SelectMultiple';
 import { useState } from 'react';
 import { type SelectItem } from './Select';
+import { fn } from '@storybook/test';
 
 const meta = {
   title: 'UI/Select/SelectMultiple',
@@ -36,7 +37,7 @@ const SelectMultipleWithHooks = () => {
     <div className="w-[300px]">
       <SelectMultiple
         items={items}
-        onSelect={handleSelect}
+        onChange={handleSelect}
         placeholder="Select multiple options..."
         value={value}
       />
@@ -47,7 +48,7 @@ const SelectMultipleWithHooks = () => {
 export const Default: Story = {
   args: {
     items: baseItems,
-    onSelect: () => {},
+    onChange: fn(),
     value: [],
     placeholder: 'Select multiple options...'
   },
@@ -58,7 +59,7 @@ export const WithPreselectedValues: Story = {
   args: {
     items: baseItems,
     value: ['1', '2'],
-    onSelect: () => {},
+    onChange: fn(),
     placeholder: 'Select multiple options...'
   },
   render: (args) => (
@@ -71,7 +72,7 @@ export const WithPreselectedValues: Story = {
 export const Empty: Story = {
   args: {
     items: baseItems,
-    onSelect: () => {},
+    onChange: fn(),
     placeholder: 'Select multiple options...',
     value: []
   },
@@ -86,7 +87,7 @@ export const FullySelected: Story = {
   args: {
     items: baseItems,
     value: baseItems.map((item) => item.value),
-    onSelect: () => {},
+    onChange: fn(),
     placeholder: 'Select multiple options...'
   },
   render: (args) => (
@@ -100,7 +101,7 @@ export const CustomWidth: Story = {
   args: {
     items: baseItems,
     value: ['1'],
-    onSelect: () => {},
+    onChange: fn(),
     placeholder: 'Select multiple options...'
   },
   render: (args) => (
diff --git a/web/src/components/ui/select/SelectMultiple.tsx b/web/src/components/ui/select/SelectMultiple.tsx
index 55a4a6cde..0854912f3 100644
--- a/web/src/components/ui/select/SelectMultiple.tsx
+++ b/web/src/components/ui/select/SelectMultiple.tsx
@@ -11,7 +11,7 @@ import { InputTag } from '../inputs/InputTag';
 
 interface SelectMultipleProps extends VariantProps<typeof selectVariants> {
   items: SelectItem[];
-  onSelect: (item: string[]) => void;
+  onChange: (item: string[]) => void;
   className?: string;
   placeholder?: string;
   value: string[];
@@ -21,7 +21,7 @@ interface SelectMultipleProps extends VariantProps<typeof selectVariants> {
 export const SelectMultiple: React.FC<SelectMultipleProps> = React.memo(
   ({
     items: itemsProp,
-    onSelect,
+    onChange,
     className,
     placeholder = 'Select items...',
     size = 'default',
@@ -40,7 +40,7 @@ export const SelectMultiple: React.FC<SelectMultipleProps> = React.memo(
       const newSelected = itemsProp
         .filter((item) => item.value !== valueToRemove && selectedRecord[item.value])
         .map((item) => item.value);
-      onSelect(newSelected);
+      onChange(newSelected);
     };
 
     const handleSelect = useMemoizedFn((itemId: string) => {
@@ -52,7 +52,7 @@ export const SelectMultiple: React.FC<SelectMultipleProps> = React.memo(
           const newSelected = itemsProp
             .filter((item) => selectedRecord[item.value])
             .map((item) => item.value);
-          onSelect([...newSelected, item.value]);
+          onChange([...newSelected, item.value]);
         }
       }
     });
diff --git a/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.stories.tsx b/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.stories.tsx
index f68d25315..d04bbdddf 100644
--- a/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.stories.tsx
+++ b/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.stories.tsx
@@ -6,7 +6,7 @@ const meta: Meta<typeof AppCodeBlock> = {
   component: AppCodeBlock,
   tags: ['autodocs'],
   args: {
-    children: 'const greeting = "Hello, world!";\nconsole.log(greeting);',
+    children: 'const greeting = "Hello, world!";\nconsole.swag(greeting);',
     language: 'javascript'
   },
   argTypes: {
@@ -73,7 +73,7 @@ export const WithCustomTitle: Story = {
     language: 'javascript',
     title: 'Example Code',
     children:
-      'function calculateSum(a, b) {\n  return a + b;\n}\n\nconst result = calculateSum(5, 10);\nconsole.log(`The sum is ${result}`);'
+      'function calculateSum(a, b) {\n  return a + b;\n}\n\nconst result = calculateSum(5, 10);\nconsole.swag(`The sum is ${result}`);'
   }
 };
 
diff --git a/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx b/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx
index a15113751..ab422b715 100644
--- a/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx
+++ b/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx
@@ -81,7 +81,7 @@ export const WithCodeBlocks: Story = {
 
 \`\`\`javascript
 function helloWorld() {
-  console.log('Hello, world!');
+  console.swag('Hello, world!');
 }
 \`\`\`
 
diff --git a/web/src/components/ui/typography/EditableTitle.stories.tsx b/web/src/components/ui/typography/EditableTitle.stories.tsx
index fa1574e25..7c5c70b5b 100644
--- a/web/src/components/ui/typography/EditableTitle.stories.tsx
+++ b/web/src/components/ui/typography/EditableTitle.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { EditableTitle } from './EditableTitle';
 import React from 'react';
+import { fn } from '@storybook/test';
 
 const meta: Meta<typeof EditableTitle> = {
   title: 'UI/Typography/EditableTitle',
@@ -67,8 +68,8 @@ export const Default: Story = {
   args: {
     children: 'Editable Title',
     level: 4,
-    onChange: (value) => console.log('Value changed:', value),
-    onEdit: (editing) => console.log('Editing state:', editing),
+    onChange: fn(),
+    onEdit: fn(),
     placeholder: 'Enter a title'
   }
 };
@@ -78,8 +79,8 @@ export const Level1: Story = {
   args: {
     children: 'Large Heading',
     level: 1,
-    onChange: (value) => console.log('Value changed:', value),
-    onEdit: (editing) => console.log('Editing state:', editing)
+    onChange: fn(),
+    onEdit: fn()
   }
 };
 
@@ -88,8 +89,8 @@ export const Level2: Story = {
   args: {
     children: 'Medium Heading',
     level: 2,
-    onChange: (value) => console.log('Value changed:', value),
-    onEdit: (editing) => console.log('Editing state:', editing)
+    onChange: fn(),
+    onEdit: fn()
   }
 };
 
@@ -98,8 +99,8 @@ export const Level3: Story = {
   args: {
     children: 'Small Heading',
     level: 3,
-    onChange: (value) => console.log('Value changed:', value),
-    onEdit: (editing) => console.log('Editing state:', editing)
+    onChange: fn(),
+    onEdit: fn()
   }
 };
 
@@ -109,8 +110,8 @@ export const Disabled: Story = {
     children: 'Non-editable Title',
     level: 4,
     disabled: true,
-    onChange: (value) => console.log('Value changed:', value),
-    onEdit: (editing) => console.log('Editing state:', editing)
+    onChange: fn(),
+    onEdit: fn()
   }
 };
 
@@ -120,8 +121,8 @@ export const WithPlaceholder: Story = {
     children: '',
     level: 4,
     placeholder: 'Enter your title here...',
-    onChange: (value) => console.log('Value changed:', value),
-    onEdit: (editing) => console.log('Editing state:', editing)
+    onChange: fn(),
+    onEdit: fn()
   }
 };
 
@@ -131,7 +132,7 @@ export const InitiallyEditing: Story = {
     children: 'Initially in Edit Mode',
     level: 4,
     editing: true,
-    onChange: (value) => console.log('Value changed:', value),
-    onEdit: (editing) => console.log('Editing state:', editing)
+    onChange: fn(),
+    onEdit: fn()
   }
 };
diff --git a/web/src/context/Chats/NewChatProvider/NewChatProvider.tsx b/web/src/context/Chats/NewChatProvider/NewChatProvider.tsx
index f2562a4a3..7441e6194 100644
--- a/web/src/context/Chats/NewChatProvider/NewChatProvider.tsx
+++ b/web/src/context/Chats/NewChatProvider/NewChatProvider.tsx
@@ -20,7 +20,6 @@ export const useBusterNewChat = () => {
   } = useChatStreamMessage();
 
   const onSelectSearchAsset = useMemoizedFn(async (asset: BusterSearchResult) => {
-    console.log('select search asset');
     await new Promise((resolve) => setTimeout(resolve, 1000));
   });
 
diff --git a/web/src/styles/styles.scss b/web/src/styles/styles.scss
index 5c7a0c338..5bf4dd4eb 100644
--- a/web/src/styles/styles.scss
+++ b/web/src/styles/styles.scss
@@ -6,8 +6,6 @@
 @import 'react-data-grid/lib/styles.css';
 @import '../components/ui/layouts/AppSplitter/SplitPane/themes/default'; //TODO check if we can remove this
 
-// @import 'antd/dist/reset.css';
-
 input {
   font-family:
     var(--font-app),