datajunction-ui 0.0.23-rc.0 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.23-rc.0",
+  "version": "0.0.26",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -181,7 +181,13 @@
   },
   "resolutions": {
     "@lezer/common": "^1.2.0",
-    "glob": "^10.4.5"
+    "test-exclude": "^7.0.1",
+    "string-width": "^4.2.3",
+    "string-width-cjs": "npm:string-width@^4.2.3",
+    "strip-ansi": "^6.0.1",
+    "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+    "wrap-ansi": "^7.0.0",
+    "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.18.6",

package/src/app/index.tsx

@@ -15,6 +15,7 @@ import { NodePage } from './pages/NodePage';
 import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
 import { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';
+import { QueryPlannerPage } from './pages/QueryPlannerPage/Loadable';
 import { TagPage } from './pages/TagPage/Loadable';
 import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
 import { AddEditTagPage } from './pages/AddEditTagPage/Loadable';
@@ -122,6 +123,11 @@ export function App() {
                           key="sql"
                           element={<SQLBuilderPage />}
                         />
+                        <Route
+                          path="materialization-planner"
+                          key="materialization-planner"
+                          element={<QueryPlannerPage />}
+                        />
                         <Route path="tags" key="tags">
                           <Route path=":name" element={<TagPage />} />
                         </Route>

package/src/app/pages/NamespacePage/CompactSelect.jsx

@@ -0,0 +1,100 @@
+import Select from 'react-select';
+
+// Compact select with label above - saves horizontal space
+export default function CompactSelect({
+  label,
+  name,
+  options,
+  value,
+  onChange,
+  isMulti = false,
+  isClearable = true,
+  placeholder = 'Select...',
+  minWidth = '100px',
+  flex = 1,
+  isLoading = false,
+  testId = null,
+}) {
+  // For single select, find the matching option
+  // For multi select, filter to matching options
+  const selectedValue = isMulti
+    ? value?.length
+      ? options.filter(o => value.includes(o.value))
+      : []
+    : value
+    ? options.find(o => o.value === value)
+    : null;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2px',
+        flex,
+        minWidth,
+      }}
+      data-testid={testId}
+    >
+      <label
+        style={{
+          fontSize: '10px',
+          fontWeight: '600',
+          color: '#666',
+          textTransform: 'uppercase',
+          letterSpacing: '0.5px',
+        }}
+      >
+        {label}
+      </label>
+      <Select
+        name={name}
+        isClearable={isClearable}
+        isMulti={isMulti}
+        isLoading={isLoading}
+        placeholder={placeholder}
+        onChange={onChange}
+        value={selectedValue}
+        styles={{
+          control: base => ({
+            ...base,
+            minHeight: '32px',
+            height: isMulti ? 'auto' : '32px',
+            fontSize: '12px',
+            backgroundColor: 'white',
+          }),
+          valueContainer: base => ({
+            ...base,
+            padding: '0 6px',
+          }),
+          input: base => ({
+            ...base,
+            margin: 0,
+            padding: 0,
+          }),
+          indicatorSeparator: () => ({
+            display: 'none',
+          }),
+          dropdownIndicator: base => ({
+            ...base,
+            padding: '4px',
+          }),
+          clearIndicator: base => ({
+            ...base,
+            padding: '4px',
+          }),
+          option: base => ({
+            ...base,
+            fontSize: '12px',
+            padding: '6px 10px',
+          }),
+          multiValue: base => ({
+            ...base,
+            fontSize: '11px',
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  );
+}

package/src/app/pages/NamespacePage/NodeModeSelect.jsx

@@ -1,7 +1,12 @@
 import Select from 'react-select';
 import Control from './FieldControl';
 
-export default function NodeModeSelect({ onChange }) {
+const options = [
+  { value: 'published', label: 'Published' },
+  { value: 'draft', label: 'Draft' },
+];
+
+export default function NodeModeSelect({ onChange, value }) {
   return (
     <span
       className="menu-link"
@@ -14,13 +19,11 @@ export default function NodeModeSelect({ onChange }) {
         label="Mode"
         components={{ Control }}
         onChange={e => onChange(e)}
+        value={value ? options.find(o => o.value === value) : null}
         styles={{
           control: styles => ({ ...styles, backgroundColor: 'white' }),
         }}
-        options={[
-          { value: 'published', label: 'Published' },
-          { value: 'draft', label: 'Draft' },
-        ]}
+        options={options}
       />
     </span>
   );

package/src/app/pages/NamespacePage/__tests__/CompactSelect.test.jsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CompactSelect from '../CompactSelect';
+
+describe('<CompactSelect />', () => {
+  const defaultOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  const defaultProps = {
+    label: 'Test Label',
+    name: 'test-select',
+    options: defaultOptions,
+    value: '',
+    onChange: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    render(<CompactSelect {...defaultProps} />);
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('displays the label correctly', () => {
+    render(<CompactSelect {...defaultProps} label="My Custom Label" />);
+    expect(screen.getByText('My Custom Label')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no value is selected', () => {
+    render(<CompactSelect {...defaultProps} placeholder="Choose one..." />);
+    expect(screen.getByText('Choose one...')).toBeInTheDocument();
+  });
+
+  it('displays the selected value for single select', () => {
+    render(<CompactSelect {...defaultProps} value="option1" />);
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  it('calls onChange when an option is selected', async () => {
+    const handleChange = jest.fn();
+    render(<CompactSelect {...defaultProps} onChange={handleChange} />);
+
+    // Open the dropdown
+    const selectInput = screen.getByRole('combobox');
+    fireEvent.keyDown(selectInput, { key: 'ArrowDown' });
+
+    // Click on an option
+    await waitFor(() => {
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Option 2'));
+
+    expect(handleChange).toHaveBeenCalledWith(
+      expect.objectContaining({ value: 'option2', label: 'Option 2' }),
+      expect.anything(),
+    );
+  });
+
+  it('supports multi-select mode', async () => {
+    const handleChange = jest.fn();
+    render(
+      <CompactSelect
+        {...defaultProps}
+        isMulti={true}
+        value={['option1']}
+        onChange={handleChange}
+      />,
+    );
+
+    // Should show the selected value
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  it('displays multiple selected values in multi-select mode', () => {
+    render(
+      <CompactSelect
+        {...defaultProps}
+        isMulti={true}
+        value={['option1', 'option2']}
+      />,
+    );
+
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+  });
+
+  it('shows loading state when isLoading is true', () => {
+    render(<CompactSelect {...defaultProps} isLoading={true} />);
+    // react-select shows a loading indicator when isLoading is true
+    expect(document.querySelector('.css-1dimb5e-singleValue')).toBeNull();
+  });
+
+  it('allows clearing the selection when isClearable is true', async () => {
+    const handleChange = jest.fn();
+    render(
+      <CompactSelect
+        {...defaultProps}
+        value="option1"
+        onChange={handleChange}
+        isClearable={true}
+      />,
+    );
+
+    // Find and click the clear button
+    const clearButton = document.querySelector(
+      '[class*="indicatorContainer"]:first-of-type',
+    );
+    if (clearButton) {
+      fireEvent.mouseDown(clearButton);
+    }
+  });
+
+  it('respects minWidth prop', () => {
+    const { container } = render(
+      <CompactSelect {...defaultProps} minWidth="200px" />,
+    );
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ minWidth: '200px' });
+  });
+
+  it('respects flex prop', () => {
+    const { container } = render(<CompactSelect {...defaultProps} flex={2} />);
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ flex: '2' });
+  });
+
+  it('handles empty options array', () => {
+    render(<CompactSelect {...defaultProps} options={[]} />);
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('handles null value gracefully', () => {
+    render(<CompactSelect {...defaultProps} value={null} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
+  });
+
+  it('handles undefined value gracefully', () => {
+    render(<CompactSelect {...defaultProps} value={undefined} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
+  });
+
+  it('renders with custom placeholder', () => {
+    render(<CompactSelect {...defaultProps} placeholder="Pick something..." />);
+    expect(screen.getByText('Pick something...')).toBeInTheDocument();
+  });
+
+  it('uses default placeholder when none provided', () => {
+    render(<CompactSelect {...defaultProps} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
+  });
+
+  it('applies compact styling with reduced height', () => {
+    const { container } = render(<CompactSelect {...defaultProps} />);
+    // The control element should have compact styling
+    const control = container.querySelector('[class*="control"]');
+    expect(control).toBeInTheDocument();
+  });
+
+  it('opens dropdown on click', async () => {
+    render(<CompactSelect {...defaultProps} />);
+
+    const selectInput = screen.getByRole('combobox');
+    fireEvent.mouseDown(selectInput);
+
+    await waitFor(() => {
+      // Menu should be visible with options
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+      expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
+  });
+
+  it('filters options based on user input', async () => {
+    render(<CompactSelect {...defaultProps} />);
+
+    const selectInput = screen.getByRole('combobox');
+    fireEvent.focus(selectInput);
+    await userEvent.type(selectInput, '2');
+
+    await waitFor(() => {
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+    });
+  });
+});