datajunction-ui 0.0.44 → 0.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/__tests__/NamespaceHeader.test.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { createRenderer } from 'react-test-renderer/shallow';
 import { MemoryRouter } from 'react-router-dom';
 
@@ -160,4 +160,352 @@ describe('<NamespaceHeader />', () => {
     expect(screen.getByText('namespace')).toBeInTheDocument();
     expect(screen.queryByText(/Git Managed/)).not.toBeInTheDocument();
   });
+
+  it('should open dropdown when clicking the git managed button', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 5,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: 'main',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([
+        {
+          uuid: 'deploy-1',
+          status: 'success',
+          created_at: '2024-01-15T10:00:00Z',
+          source: {
+            type: 'git',
+            repository: 'github.com/test/repo',
+            branch: 'main',
+            commit_sha: 'abc1234567890',
+          },
+        },
+      ]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Git Managed/)).toBeInTheDocument();
+    });
+
+    // Click the dropdown button
+    fireEvent.click(screen.getByText(/Git Managed/));
+
+    // Should show repository link in dropdown
+    await waitFor(() => {
+      expect(screen.getByText(/github.com\/test\/repo/)).toBeInTheDocument();
+    });
+  });
+
+  it('should open dropdown when clicking local deploy button', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 2,
+        primary_source: {
+          type: 'local',
+          hostname: 'localhost',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([
+        {
+          uuid: 'deploy-1',
+          status: 'success',
+          created_at: '2024-01-15T10:00:00Z',
+          created_by: 'testuser',
+          source: {
+            type: 'local',
+            hostname: 'localhost',
+            reason: 'testing',
+          },
+        },
+      ]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Local Deploy/)).toBeInTheDocument();
+    });
+
+    // Click the dropdown button
+    fireEvent.click(screen.getByText(/Local Deploy/));
+
+    // Should show local deploy info in dropdown
+    await waitFor(() => {
+      expect(screen.getByText(/Local deploys by testuser/)).toBeInTheDocument();
+    });
+  });
+
+  it('should show recent deployments list with git source', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 3,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: 'main',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([
+        {
+          uuid: 'deploy-1',
+          status: 'success',
+          created_at: '2024-01-15T10:00:00Z',
+          source: {
+            type: 'git',
+            repository: 'github.com/test/repo',
+            branch: 'feature-branch',
+            commit_sha: 'abc1234567890',
+          },
+        },
+        {
+          uuid: 'deploy-2',
+          status: 'failed',
+          created_at: '2024-01-14T10:00:00Z',
+          source: {
+            type: 'git',
+            repository: 'github.com/test/repo',
+            branch: 'main',
+            commit_sha: 'def4567890123',
+          },
+        },
+      ]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Git Managed/)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText(/Git Managed/));
+
+    // Should show branch names in deployment list
+    await waitFor(() => {
+      expect(screen.getByText(/feature-branch/)).toBeInTheDocument();
+    });
+
+    // Should show short commit SHA
+    expect(screen.getByText(/abc1234/)).toBeInTheDocument();
+  });
+
+  it('should show local deployments with reason', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 2,
+        primary_source: {
+          type: 'local',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([
+        {
+          uuid: 'deploy-1',
+          status: 'success',
+          created_at: '2024-01-15T10:00:00Z',
+          source: {
+            type: 'local',
+            reason: 'hotfix deployment',
+            hostname: 'dev-machine',
+          },
+        },
+      ]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Local Deploy/)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText(/Local Deploy/));
+
+    // Should show reason in deployment list
+    await waitFor(() => {
+      expect(screen.getByText(/hotfix deployment/)).toBeInTheDocument();
+    });
+  });
+
+  it('should close dropdown when clicking outside', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 5,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: 'main',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Git Managed/)).toBeInTheDocument();
+    });
+
+    // Open dropdown
+    fireEvent.click(screen.getByText(/Git Managed/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/github.com\/test\/repo/)).toBeInTheDocument();
+    });
+
+    // Click outside (on the breadcrumb)
+    fireEvent.mouseDown(document.body);
+
+    // Dropdown should close
+    await waitFor(() => {
+      expect(
+        screen.queryByText(/github.com\/test\/repo.*\(main\)/),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should toggle dropdown arrow indicator', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 5,
+        primary_source: {
+          type: 'git',
+          repository: 'github.com/test/repo',
+          branch: 'main',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Git Managed/)).toBeInTheDocument();
+    });
+
+    // Initially shows down arrow
+    expect(screen.getByText('▼')).toBeInTheDocument();
+
+    // Click to open
+    fireEvent.click(screen.getByText(/Git Managed/));
+
+    // Should show up arrow when open
+    await waitFor(() => {
+      expect(screen.getByText('▲')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle git repository URL with https prefix', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 1,
+        primary_source: {
+          type: 'git',
+          repository: 'https://github.com/test/repo',
+          branch: 'main',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Git Managed/)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText(/Git Managed/));
+
+    await waitFor(() => {
+      // Find link by its text content (repository URL)
+      const link = screen.getByRole('link', {
+        name: /github\.com\/test\/repo/,
+      });
+      expect(link).toHaveAttribute('href', 'https://github.com/test/repo');
+    });
+  });
+
+  it('should render adhoc deployment label when no created_by', async () => {
+    const mockDjClient = {
+      namespaceSources: jest.fn().mockResolvedValue({
+        total_deployments: 1,
+        primary_source: {
+          type: 'local',
+        },
+      }),
+      listDeployments: jest.fn().mockResolvedValue([
+        {
+          uuid: 'deploy-1',
+          status: 'success',
+          created_at: '2024-01-15T10:00:00Z',
+          created_by: null,
+          source: {
+            type: 'local',
+          },
+        },
+      ]),
+    };
+
+    render(
+      <MemoryRouter>
+        <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+          <NamespaceHeader namespace="test.namespace" />
+        </DJClientContext.Provider>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Local Deploy/)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText(/Local Deploy/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Local\/adhoc deployments/)).toBeInTheDocument();
+    });
+  });
 });

package/src/app/pages/QueryPlannerPage/PreAggDetailsPanel.jsx

@@ -292,6 +292,7 @@ export function QueryOverviewPanel({
   onClearWorkflowUrls,
   loadedCubeName = null, // Existing cube name if loaded from preset
   cubeMaterialization = null, // Full cube materialization info {schedule, strategy, lookbackWindow, ...}
+  cubeAvailability = null, // Cube availability info for data freshness
   onUpdateCubeConfig,
   onRefreshCubeWorkflow,
   onRunCubeBackfill,
@@ -578,6 +579,9 @@ export function QueryOverviewPanel({
   const grainGroups = measuresResult.grain_groups || [];
   const metricFormulas = measuresResult.metric_formulas || [];
   const sql = metricsResult.sql || '';
+  const dialect = metricsResult.dialect || null;
+  const cubeName = metricsResult.cube_name || null;
+  const isFastQuery = !!cubeName; // Fast if using materialized cube
 
   // Determine if materialization is already configured (has active workflows)
   const isMaterialized =
@@ -609,11 +613,29 @@ export function QueryOverviewPanel({
       {/* Header */}
       <div className="details-header">
         <h2 className="details-title">Query Plan</h2>
-        <p className="details-full-name">
+        <p className="details-info-row">
           {selectedMetrics.length} metric
           {selectedMetrics.length !== 1 ? 's' : ''} ×{' '}
           {selectedDimensions.length} dimension
           {selectedDimensions.length !== 1 ? 's' : ''}
+          {isFastQuery && (
+            <>
+              {' · '}
+              <span className="info-materialized">
+                <span style={{ fontFamily: 'sans-serif' }}>⚡</span>{' '}
+                Materialized cube available
+              </span>
+              {cubeAvailability?.validThroughTs && (
+                <>
+                  {' '}
+                  · Valid thru{' '}
+                  {new Date(
+                    cubeAvailability.validThroughTs,
+                  ).toLocaleDateString()}
+                </>
+              )}
+            </>
+          )}
         </p>
       </div>
 
@@ -2198,6 +2220,29 @@ export function QueryOverviewPanel({
               <span className="section-icon">⌘</span>
               Generated SQL
             </h3>
+            <span className="sql-info-inline">
+              {sqlViewMode === 'optimized' && isFastQuery ? (
+                <>
+                  <span className="info-materialized">
+                    <span style={{ fontFamily: 'sans-serif' }}>⚡</span> Using
+                    materialized cube
+                  </span>
+                  {cubeAvailability?.validThroughTs && (
+                    <>
+                      {' · Valid thru '}
+                      {new Date(
+                        cubeAvailability.validThroughTs,
+                      ).toLocaleDateString()}
+                    </>
+                  )}
+                </>
+              ) : sqlViewMode === 'raw' ? (
+                <span className="info-base-tables">
+                  <span style={{ fontFamily: 'sans-serif' }}>⚠️</span> Using
+                  base tables
+                </span>
+              ) : null}
+            </span>
             <div className="sql-view-toggle">
               <button
                 className={`sql-toggle-btn ${