datajunction-ui 0.0.43 → 0.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.43",
+  "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/NodePage/NodeInfoTab.jsx

@@ -4,7 +4,6 @@ import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
 import NodeStatus from './NodeStatus';
 import ListGroupItem from '../../components/ListGroupItem';
-import ToggleSwitch from '../../components/ToggleSwitch';
 import DJClientContext from '../../providers/djclient';
 import { labelize } from '../../../utils/form';
 
@@ -30,9 +29,6 @@ foundation.hljs['padding'] = '2rem';
 // }
 
 export default function NodeInfoTab({ node }) {
-  const [compiledSQL, setCompiledSQL] = useState('');
-  const [checked, setChecked] = useState(false);
-
   // For metrics
   const [metricInfo, setMetricInfo] = useState(null);
 
@@ -47,22 +43,6 @@ export default function NodeInfoTab({ node }) {
   ));
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (checked === true) {
-        const data = await djClient.compiledSql(node.name);
-        if (data.sql) {
-          setCompiledSQL(data.sql);
-        } else {
-          setCompiledSQL(
-            '/* Ran into an issue while generating compiled SQL */',
-          );
-        }
-      }
-    };
-    fetchData().catch(console.error);
-  }, [node, djClient, checked]);
-
   useEffect(() => {
     const fetchData = async () => {
       const metric = await djClient.getMetric(node.name);
@@ -96,9 +76,6 @@ export default function NodeInfoTab({ node }) {
     }
   }, [node, djClient]);
 
-  function toggle(value) {
-    return !value;
-  }
   const metricsWarning =
     node?.type === 'metric' &&
     metricInfo?.incompatible_druid_functions?.length > 0 ? (
@@ -149,7 +126,11 @@ export default function NodeInfoTab({ node }) {
           )}
           <div>
             <h6 className="mb-0 w-100">Aggregate Expression</h6>
-            <SyntaxHighlighter language="sql" style={foundation}>
+            <SyntaxHighlighter
+              language="sql"
+              style={foundation}
+              wrapLongLines={true}
+            >
               {metricInfo?.expression}
             </SyntaxHighlighter>
           </div>
@@ -167,18 +148,12 @@ export default function NodeInfoTab({ node }) {
           }}
         >
           <h6 className="mb-0 w-100">Query</h6>
-          {['metric', 'dimension', 'transform'].indexOf(node?.type) > -1 ? (
-            <ToggleSwitch
-              id="toggleSwitch"
-              checked={checked}
-              onChange={() => setChecked(toggle)}
-              toggleName="Show Compiled SQL"
-            />
-          ) : (
-            <></>
-          )}
-          <SyntaxHighlighter language="sql" style={foundation}>
-            {checked ? compiledSQL : node?.query}
+          <SyntaxHighlighter
+            language="sql"
+            style={foundation}
+            wrapLongLines={true}
+          >
+            {node?.query}
           </SyntaxHighlighter>
         </div>
       </div>
@@ -218,7 +193,26 @@ export default function NodeInfoTab({ node }) {
     node?.type === 'metric' ? (
       <div className="list-group-item d-flex">
         <div className="d-flex gap-2 w-100 py-3">
-          <div>
+          <div style={{ marginRight: '2rem' }}>
+            <h6 className="mb-0 w-100">Output Type</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="OutputType"
+            >
+              <code
+                style={{
+                  background: '#f5f5f5',
+                  padding: '2px 6px',
+                  borderRadius: '3px',
+                }}
+              >
+                {node?.columns?.[0]?.type || 'Unknown'}
+              </code>
+            </p>
+          </div>
+          <div style={{ marginRight: '2rem' }}>
             <h6 className="mb-0 w-100">Direction</h6>
             <p
               className="mb-0 opacity-75"
@@ -275,7 +269,11 @@ export default function NodeInfoTab({ node }) {
             }}
           >
             <h6 className="mb-0 w-100">Custom Metadata</h6>
-            <SyntaxHighlighter language="json" style={foundation}>
+            <SyntaxHighlighter
+              language="json"
+              style={foundation}
+              wrapLongLines={true}
+            >
               {JSON.stringify(node.custom_metadata, null, 2)}
             </SyntaxHighlighter>
           </div>
@@ -331,12 +329,12 @@ export default function NodeInfoTab({ node }) {
                 <a href={`/nodes/${node?.name}`}>{dim}</a>
               </span>
             ))
-          : node?.required_dimensions?.map((dim, idx) => (
+          : metricInfo?.required_dimensions?.map((dim, idx) => (
               <span
                 key={`rd-${idx}`}
                 className="rounded-pill badge bg-secondary-soft PrimaryKey"
               >
-                <a href={`/nodes/${node?.upstream_node}`}>{dim.name}</a>
+                <a href={`/nodes/${metricInfo?.upstream_node}`}>{dim.name}</a>
               </span>
             ))}
       </p>

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -591,32 +591,6 @@ describe('<NodePage />', () => {
     });
   });
 
-  it('renders compiled sql correctly', async () => {
-    const djClient = mockDJClient();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
-    djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
-    djClient.DataJunctionAPI.compiledSql.mockReturnValue('select 1');
-
-    const element = (
-      <DJClientContext.Provider value={djClient}>
-        <NodePage />
-      </DJClientContext.Provider>
-    );
-    render(
-      <MemoryRouter initialEntries={[`/nodes/${mocks.mockTransformNode.name}`]}>
-        <Routes>
-          <Route path="nodes/:name" element={element} />
-        </Routes>
-      </MemoryRouter>,
-    );
-    await waitFor(() => {
-      fireEvent.click(screen.getByRole('checkbox', { name: 'ToggleSwitch' }));
-      expect(djClient.DataJunctionAPI.compiledSql).toHaveBeenCalledWith(
-        mocks.mockTransformNode.name,
-      );
-    });
-  });
-
   it('renders an empty NodeMaterialization tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockResolvedValue(mocks.mockMetricNode);
@@ -708,113 +682,6 @@ describe('<NodePage />', () => {
     });
   });
 
-  it('renders the NodeValidate tab', async () => {
-    const djClient = mockDJClient();
-    window.scrollTo = jest.fn();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.nodeDimensions.mockReturnValue([]);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
-      mocks.mockMetricNodeJson,
-    );
-    djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
-    djClient.DataJunctionAPI.sql.mockReturnValue({
-      sql: 'SELECT * FROM testNode',
-    });
-    const streamNodeData = {
-      onmessage: jest.fn(),
-      onerror: jest.fn(),
-      close: jest.fn(),
-    };
-    djClient.DataJunctionAPI.streamNodeData.mockResolvedValue(streamNodeData);
-    djClient.DataJunctionAPI.streamNodeData.mockResolvedValueOnce({
-      state: 'FINISHED',
-      results: [
-        {
-          columns: [{ name: 'column1' }, { name: 'column2' }],
-          rows: [
-            [1, 'value1'],
-            [2, 'value2'],
-          ],
-        },
-      ],
-    });
-
-    const element = (
-      <DJClientContext.Provider value={djClient}>
-        <NodePage />
-      </DJClientContext.Provider>
-    );
-    render(
-      <MemoryRouter
-        initialEntries={['/nodes/default.num_repair_orders/validate']}
-      >
-        <Routes>
-          <Route path="nodes/:name/:tab" element={element} />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Group By')).toBeInTheDocument();
-      expect(screen.getByText('Add Filters')).toBeInTheDocument();
-      expect(screen.getByText('Generated Query')).toBeInTheDocument();
-      expect(screen.getByText('Results')).toBeInTheDocument();
-    });
-    // Click on the 'Validate' tab
-    fireEvent.click(screen.getByRole('button', { name: '► Validate' }));
-
-    await waitFor(() => {
-      expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-      );
-      expect(djClient.DataJunctionAPI.sql).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-        { dimensions: [], filters: [] },
-      );
-      expect(djClient.DataJunctionAPI.nodeDimensions).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-      );
-    });
-
-    // Click on 'Run' to run the node query
-    const runButton = screen.getByText('► Run');
-    fireEvent.click(runButton);
-
-    await waitFor(() => {
-      expect(djClient.DataJunctionAPI.streamNodeData).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-        { dimensions: [], filters: [] },
-      );
-      expect(streamNodeData.onmessage).toBeDefined();
-      expect(streamNodeData.onerror).toBeDefined();
-    });
-
-    const infoTab = screen.getByRole('button', { name: 'QueryInfo' });
-    const resultsTab = screen.getByText('Results');
-
-    // Initially, the Results tab should be active
-    expect(resultsTab).toHaveClass('active');
-    expect(infoTab).not.toHaveClass('active');
-
-    // Click on the Info tab first
-    fireEvent.click(infoTab);
-
-    await waitFor(() => {
-      // Now, the Info tab should be active
-      expect(infoTab).toHaveClass('active');
-      expect(resultsTab).not.toHaveClass('active');
-    });
-
-    // Click on the Results tab
-    fireEvent.click(resultsTab);
-
-    await waitFor(() => {
-      // Now, the Results tab should be active again
-      expect(resultsTab).toHaveClass('active');
-      expect(infoTab).not.toHaveClass('active');
-    });
-  });
-
   it('renders a NodeColumnLineage tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);

package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap

@@ -4,15 +4,17 @@ exports[`<NodePage /> renders the NodeInfo tab correctly for a metric node 1`] =
 HTMLCollection [
   <code
     class="language-sql"
-    style="white-space: pre;"
+    style="white-space: pre-wrap;"
   >
-    <span
-      class="hljs-built_in"
-    >
-      count
-    </span>
     <span>
-      (repair_order_id)
+      <span
+        class="hljs-built_in"
+      >
+        count
+      </span>
+      <span>
+        (repair_order_id)
+      </span>
     </span>
   </code>,
 ]