= React.memo(
({ hideDropzone, top, id, active, allowEdit, setIsDraggingResizeId, index, sizes, onResize }) => {
- const { styles } = useStyles();
const { setNodeRef, isOver, over } = useDroppable({
id: `${NEW_ROW_ID}_${id}}`,
disabled: !allowEdit,
@@ -193,24 +190,3 @@ const ResizeRowHandle: React.FC<{
);
ResizeRowHandle.displayName = 'ResizeRowHandle';
-
-const useStyles = createStyles(({ css, token }) => ({
- hitArea: css`
- left: 0;
- right: 0;
- height: 54px; // Reduced from 54px to be more reasonable
- position: absolute;
- z-index: 9;
- pointer-events: none;
-
- opacity: 0.2;
-
- &.top {
- top: -36px; // Position the hit area to straddle the dragger
- }
-
- &:not(.top) {
- bottom: -15px; // Position the hit area to straddle the dragger
- }
- `
-}));
diff --git a/web/src/components/ui/grid/BusterResizeableGrid.stories.tsx b/web/src/components/ui/grid/BusterResizeableGrid.stories.tsx
index 930884d54..54fbbc5ed 100644
--- a/web/src/components/ui/grid/BusterResizeableGrid.stories.tsx
+++ b/web/src/components/ui/grid/BusterResizeableGrid.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { BusterResizeableGrid } from './BusterResizeableGrid';
import { v4 as uuidv4 } from 'uuid';
diff --git a/web/src/components/ui/icons/AppDataSourceIcons.stories.tsx b/web/src/components/ui/icons/AppDataSourceIcons.stories.tsx
new file mode 100644
index 000000000..83cdf615a
--- /dev/null
+++ b/web/src/components/ui/icons/AppDataSourceIcons.stories.tsx
@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppDataSourceIcon } from './AppDataSourceIcons';
+import { DataSourceTypes } from '@/api/asset_interfaces';
+
+const meta: Meta
= {
+ title: 'Base/Icons/DataSourceIcon',
+ component: AppDataSourceIcon,
+ parameters: {
+ layout: 'centered'
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ type: {
+ control: 'select',
+ options: Object.values(DataSourceTypes),
+ description: 'The type of data source to display'
+ },
+ size: {
+ control: 'number',
+ description: 'Size of the icon in pixels'
+ },
+ onClick: {
+ description: 'Optional click handler'
+ },
+ className: {
+ description: 'Optional CSS class name'
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+// Base story showing all data source icons
+export const AllDataSourceIcons: Story = {
+ render: () => (
+
+ {Object.values(DataSourceTypes).map((type) => (
+
+ ))}
+
-
-
+
+
+ )
+ ]
+};
+
+export default meta;
+type Story = StoryObj;
+
+const sampleSQLCode = `SELECT users.name, orders.order_date
+FROM users
+JOIN orders ON users.id = orders.user_id
+WHERE orders.status = 'completed'
+ORDER BY orders.order_date DESC;`;
+
+const sampleYAMLCode = `version: '3'
+services:
+ web:
+ image: nginx:latest
+ ports:
+ - "80:80"
+ volumes:
+ - ./src:/usr/share/nginx/html`;
+
+export const Default: Story = {
+ args: {
+ value: sampleSQLCode,
+ height: '300px',
+ language: 'pgsql',
+ variant: 'bordered'
+ }
+};
+
+export const ReadOnly: Story = {
+ args: {
+ value: sampleSQLCode,
+ height: '300px',
+ language: 'pgsql',
+ readOnly: true,
+ variant: 'bordered',
+ readOnlyMessage: 'This is a read-only view'
+ }
+};
+
+export const YAMLEditor: Story = {
+ args: {
+ value: sampleYAMLCode,
+ height: '300px',
+ language: 'yaml',
+ variant: 'bordered'
+ }
+};
+
+export const CustomHeight: Story = {
+ args: {
+ value: sampleSQLCode,
+ height: '500px',
+ language: 'pgsql',
+ variant: 'bordered'
+ }
+};
+
+export const EmptyEditor: Story = {
+ args: {
+ height: '200px',
+ language: 'pgsql',
+ variant: 'bordered'
+ }
+};
diff --git a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
index dab5bdb7a..b2d2414c8 100644
--- a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
+++ b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
@@ -6,8 +6,8 @@
import React, { forwardRef, useMemo } from 'react';
import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
import { CircleSpinnerLoaderContainer } from '../../loaders/CircleSpinnerLoaderContainer';
-import { createStyles } from 'antd-style';
import { useMemoizedFn } from 'ahooks';
+import { cn } from '@/lib/classMerge';
import './MonacoWebWorker';
import { configureMonacoToUseYaml } from './yamlHelper';
@@ -19,19 +19,6 @@ import { configureMonacoToUseYaml } from './yamlHelper';
import { Editor as DynamicEditor } from '@monaco-editor/react';
import { useTheme } from 'next-themes';
-const useStyles = createStyles(({ token }) => ({
- code: {
- fontSize: '13px',
- fontFamily: 'Menlo, Monaco, "Courier New", monospace',
- '--font-app': 'Menlo, Monaco, "Courier New", monospace'
- },
- bordered: {
- border: `0.5px solid ${token.colorBorder}`,
- borderRadius: `${token.borderRadiusLG}px`,
- overflow: 'hidden'
- }
-}));
-
export interface AppCodeEditorProps {
className?: string;
onChangeEditorHeight?: (height: number) => void;
@@ -75,7 +62,7 @@ export const AppCodeEditor = forwardRef
},
ref
) => {
- const { cx, styles } = useStyles();
+ // const { cx, styles } = useStyles();
const isDarkModeContext = useTheme()?.theme === 'dark';
const useDarkMode = isDarkMode ?? isDarkModeContext;
@@ -148,9 +135,11 @@ export const AppCodeEditor = forwardRef
return (
void;
- onBlur?: (value: string) => void;
- onPressEnter?: (value: string) => void;
- onSearch: (e?: string) => void;
- enterButton?: string | ReactNode | boolean;
- loading?: boolean;
- size?: 'large' | 'middle' | 'small';
- disabled?: boolean;
- placeholder?: string;
-}
-
-export const AppSearchInput: React.FC = ({
- size = 'middle',
- onChange,
- onSearch,
- ...props
-}) => {
- const onBlurEvent = useMemoizedFn((e: React.FocusEvent) => {
- props.onBlur?.(e.target.value);
- });
-
- const onPressEnterEvent = useMemoizedFn((e: React.KeyboardEvent) => {
- props.onPressEnter && props.onPressEnter(props.value);
- });
-
- return (
- onPressEnterEvent(e)}
- onChange={(e) => onChange(e.target.value)}
- size={size}
- onSearch={(e) => onSearch(e)}
- />
- );
-};
-
-AppSearchInput.displayName = 'AppSearchInput';
diff --git a/web/src/components/ui/inputs/SearchInput.tsx b/web/src/components/ui/inputs/SearchInput.tsx
deleted file mode 100644
index 80d389726..000000000
--- a/web/src/components/ui/inputs/SearchInput.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client';
-
-import React, { ChangeEvent } from 'react';
-import { Input, InputProps, InputRef } from 'antd';
-import { useMemoizedFn } from 'ahooks';
-import { AppMaterialIcons } from '../icons';
-
-interface SearchInputProps extends Omit {
- placeholder: string;
- onChange: (value: string) => void;
-}
-
-export const SearchInput = React.forwardRef(
- ({ onChange, ...rest }, ref) => {
- const onChangePreflight = useMemoizedFn((e: ChangeEvent) => {
- onChange(e.target.value);
- });
- return (
- }
- onChange={onChangePreflight}
- {...rest}
- />
- );
- }
-);
-
-SearchInput.displayName = 'SearchInput';
diff --git a/web/src/components/ui/inputs/index.ts b/web/src/components/ui/inputs/index.ts
index 498972c79..ba9fe7ebc 100644
--- a/web/src/components/ui/inputs/index.ts
+++ b/web/src/components/ui/inputs/index.ts
@@ -1,2 +1 @@
-export * from './AppSearchInput';
-export * from './SearchInput';
+export * from './Input';
diff --git a/web/src/controllers/CollectionIndividualController/CollectionIndividualContent.tsx b/web/src/controllers/CollectionIndividualController/CollectionIndividualContent.tsx
index 9a1b3b059..0e439bc30 100644
--- a/web/src/controllers/CollectionIndividualController/CollectionIndividualContent.tsx
+++ b/web/src/controllers/CollectionIndividualController/CollectionIndividualContent.tsx
@@ -1,11 +1,9 @@
'use client';
-import {
- useBusterCollectionIndividualContextSelector,
- useCollectionIndividual
-} from '@/context/Collections';
+import { useBusterCollectionIndividualContextSelector } from '@/context/Collections';
import React, { useMemo, useState } from 'react';
-import { AppMaterialIcons, BusterUserAvatar } from '@/components/ui';
+import { AppMaterialIcons } from '@/components/ui';
+import { Avatar } from '@/components/ui/avatar';
import { createBusterRoute, BusterRoutes } from '@/routes';
import { formatDate } from '@/lib';
import {
@@ -93,11 +91,7 @@ const columns: BusterListColumn[] = [
width: 50,
render: (created_by: BusterCollectionListItem['owner']) => {
return (
-
+
);
}
}
diff --git a/web/src/controllers/CollectionListController/CollectionsListContent.tsx b/web/src/controllers/CollectionListController/CollectionsListContent.tsx
index 709f566b6..44559ef31 100644
--- a/web/src/controllers/CollectionListController/CollectionsListContent.tsx
+++ b/web/src/controllers/CollectionListController/CollectionsListContent.tsx
@@ -1,7 +1,8 @@
'use client';
import React, { useMemo, useState } from 'react';
-import { AppContent, BusterUserAvatar } from '@/components/ui';
+import { AppContent } from '@/components/ui';
+import { Avatar } from '@/components/ui/avatar';
import { formatDate, makeHumanReadble } from '@/lib';
import { BusterRoutes, createBusterRoute } from '@/routes';
import { useBusterCollectionListContextSelector } from '@/context/Collections';
@@ -74,9 +75,7 @@ const columns: BusterListColumn[] = [
title: 'Owner',
width: 50,
render: (owner: BusterCollectionListItem['owner']) => {
- return (
-
- );
+ return ;
}
}
];
diff --git a/web/src/controllers/DashboardListController/DashboardListContent.tsx b/web/src/controllers/DashboardListController/DashboardListContent.tsx
index 8481890ac..3139f191c 100644
--- a/web/src/controllers/DashboardListController/DashboardListContent.tsx
+++ b/web/src/controllers/DashboardListController/DashboardListContent.tsx
@@ -3,7 +3,7 @@
import React, { useMemo, useState } from 'react';
import { AppContent } from '@/components/ui/layout/AppContent';
import { useBusterDashboardContextSelector } from '@/context/Dashboards';
-import { BusterUserAvatar } from '@/components/ui';
+import { Avatar } from '@/components/ui/avatar';
import { formatDate } from '@/lib';
import { BusterList, BusterListColumn, BusterListRow } from '@/components/ui/list';
import { BusterRoutes, createBusterRoute } from '@/routes';
@@ -45,7 +45,7 @@ const columns: BusterListColumn[] = [
title: 'Owner',
width: 55,
render: (_, data) => {
- return ;
+ return ;
}
}
];
diff --git a/web/src/controllers/DatasetsListController/DatasetListContent.tsx b/web/src/controllers/DatasetsListController/DatasetListContent.tsx
index eea3999d6..0e96eb18a 100644
--- a/web/src/controllers/DatasetsListController/DatasetListContent.tsx
+++ b/web/src/controllers/DatasetsListController/DatasetListContent.tsx
@@ -2,7 +2,7 @@
import React, { useState, useMemo } from 'react';
import { AppContent } from '@/components/ui/layout/AppContent';
-import { BusterUserAvatar } from '@/components/ui';
+import { Avatar } from '@/components/ui/avatar';
import { formatDate } from '@/lib';
import { BusterList, BusterListColumn, BusterListRow } from '@/components/ui/list';
import { BusterRoutes, createBusterRoute } from '@/routes';
@@ -45,11 +45,7 @@ const columns: BusterListColumn[] = [
width: 60,
render: (_, dataset: BusterDatasetListItem) => (
)
}
diff --git a/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx b/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx
index b485183e5..3f339d256 100644
--- a/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx
+++ b/web/src/controllers/MetricListContainer/MetricItemsContainer.tsx
@@ -2,7 +2,8 @@ import { ShareAssetType, VerificationStatus, BusterMetricListItem } from '@/api/
import { makeHumanReadble, formatDate } from '@/lib';
import React, { memo, useMemo, useRef, useState } from 'react';
import { StatusBadgeIndicator, getShareStatus } from '@/components/features/Lists';
-import { BusterUserAvatar, Text } from '@/components/ui';
+import { Text } from '@/components/ui';
+import { Avatar } from '@/components/ui/avatar';
import { BusterRoutes, createBusterRoute } from '@/routes';
import { useMemoizedFn } from 'ahooks';
import { BusterListColumn, BusterListRow } from '@/components/ui/list';
@@ -196,7 +197,7 @@ TitleCell.displayName = 'TitleCell';
const OwnerCell = memo<{ name: string; image: string | undefined }>(({ name, image }) => (
));
OwnerCell.displayName = 'OwnerCell';
diff --git a/web/src/controllers/TermIndividualController/TermDatasetSelect.tsx b/web/src/controllers/TermIndividualController/TermDatasetSelect.tsx
index 24090e0e2..350241f2f 100644
--- a/web/src/controllers/TermIndividualController/TermDatasetSelect.tsx
+++ b/web/src/controllers/TermIndividualController/TermDatasetSelect.tsx
@@ -1,11 +1,12 @@
import { BusterTerm } from '@/api/buster_rest';
import { AppTooltip, AppMaterialIcons } from '@/components/ui';
-import { AppDropdownSelectProps, AppDropdownSelect } from '@/components/ui/dropdown';
+import { Dropdown, type DropdownProps } from '@/components/ui/dropdown';
import { createStyles } from 'antd-style';
import React, { useMemo } from 'react';
import { Button } from 'antd';
import { Text } from '@/components/ui';
import { useGetDatasets } from '@/api/buster_rest/datasets';
+import { useMemoizedFn } from 'ahooks';
const useStyles = createStyles(({ token, css }) => ({
datasetItem: css`
@@ -64,20 +65,18 @@ export const DatasetList: React.FC<{
});
DatasetList.displayName = 'DatasetList';
-const memoizedTrigger: AppDropdownSelectProps['trigger'] = ['click'];
-
const DropdownSelect: React.FC<{
children: React.ReactNode;
datasets: BusterTerm['datasets'];
onChange: (datasets: string[]) => void;
- placement?: AppDropdownSelectProps['placement'];
-}> = ({ onChange, children, datasets, placement = 'bottomRight' }) => {
+}> = ({ onChange, children, datasets }) => {
const { data: datasetsList } = useGetDatasets();
- const itemsDropdown = useMemo(() => {
- return datasetsList.map((item) => ({
- key: item.id,
+ const itemsDropdown: DropdownProps['items'] = useMemo(() => {
+ return datasetsList.map((item) => ({
label: item.name,
+ value: item.id,
+ selected: datasets.some((i) => i.id === item.id),
onClick: async () => {
const isSelected = datasets.find((i) => i.id === item.id);
const newDatasets = isSelected
@@ -88,20 +87,20 @@ const DropdownSelect: React.FC<{
}));
}, [datasets, datasetsList]);
- const selectedItems = useMemo(() => {
- return datasets.map((item) => item.id);
- }, [datasets]);
+ const onSelect = useMemoizedFn((itemId: string) => {
+ alert('This feature is not implemented yet');
+ });
return (
-
+ onSelect={onSelect}
+ menuHeader={'Related datasets...'}>
{children}
-
+
);
};
diff --git a/web/src/controllers/TermIndividualController/TermIndividualContentSider.tsx b/web/src/controllers/TermIndividualController/TermIndividualContentSider.tsx
index 57d458c0d..0505d565e 100644
--- a/web/src/controllers/TermIndividualController/TermIndividualContentSider.tsx
+++ b/web/src/controllers/TermIndividualController/TermIndividualContentSider.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { useBusterTermsIndividualContextSelector, useBusterTermsIndividual } from '@/context/Terms';
-import { BusterUserAvatar } from '@/components/ui';
+import { Avatar } from '@/components/ui/avatar';
import { formatDate } from '@/lib';
import { Text } from '@/components/ui';
import { DatasetList } from './TermDatasetSelect';
@@ -44,7 +44,7 @@ export const TermIndividualContentSider: React.FC<{ termId: string }> = ({ termI
-
+
{selectedTerm?.created_by.name}
(
diff --git a/web/src/controllers/TermsListController/TermsListContent.tsx b/web/src/controllers/TermsListController/TermsListContent.tsx
index 555b94fe2..d312970dc 100644
--- a/web/src/controllers/TermsListController/TermsListContent.tsx
+++ b/web/src/controllers/TermsListController/TermsListContent.tsx
@@ -2,7 +2,7 @@
import React, { useMemo, useState } from 'react';
import { AppContent } from '@/components/ui/layout/AppContent';
-import { BusterUserAvatar } from '@/components/ui';
+import { Avatar } from '@/components/ui/avatar';
import { formatDate } from '@/lib';
import {
ListEmptyStateWithButton,
@@ -38,9 +38,7 @@ const columns: BusterListColumn[] = [
dataIndex: 'owner',
title: 'Owner',
width: 60,
- render: (_, data: BusterTermListItem) => (
-
- )
+ render: (_, data: BusterTermListItem) =>
}
];
diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/MessageContainer.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/MessageContainer.tsx
index 99fe1a024..4ffa9d2c0 100644
--- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/MessageContainer.tsx
+++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/MessageContainer.tsx
@@ -1,4 +1,4 @@
-import { BusterUserAvatar, BusterAvatar } from '@/components/ui/image';
+import { Avatar } from '@/components/ui/avatar';
import { createStyles } from 'antd-style';
import React from 'react';
@@ -13,9 +13,9 @@ export const MessageContainer: React.FC<{
return (
{senderName ? (
-
+
) : (
-
+
)}
{children}