datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

package/src/app/components/UserMenu.tsx

@@ -0,0 +1,100 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../providers/djclient';
+
+interface User {
+  id: number;
+  username: string;
+  email: string;
+  name?: string;
+}
+
+// Extract initials from user's name or username
+const getInitials = (user: User | null): string => {
+  if (!user) return '?';
+  if (user.name) {
+    return user.name
+      .split(' ')
+      .map(n => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+  return user.username.slice(0, 2).toUpperCase();
+};
+
+interface UserMenuProps {
+  onDropdownToggle?: (isOpen: boolean) => void;
+  forceClose?: boolean;
+}
+
+export default function UserMenu({
+  onDropdownToggle,
+  forceClose,
+}: UserMenuProps) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  // Close when forceClose becomes true
+  useEffect(() => {
+    if (forceClose && showDropdown) {
+      setShowDropdown(false);
+    }
+  }, [forceClose, showDropdown]);
+
+  // Fetch current user on mount
+  useEffect(() => {
+    async function fetchUser() {
+      const user = await djClient.whoami();
+      setCurrentUser(user);
+    }
+    fetchUser();
+  }, [djClient]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.user-menu-dropdown')) {
+        setShowDropdown(false);
+        onDropdownToggle?.(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [onDropdownToggle]);
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const willOpen = !showDropdown;
+    setShowDropdown(willOpen);
+    onDropdownToggle?.(willOpen);
+  };
+
+  const handleLogout = async () => {
+    await djClient.logout();
+    window.location.reload();
+  };
+
+  return (
+    <div className="nav-dropdown user-menu-dropdown">
+      <button className="avatar-button" onClick={handleToggle}>
+        {getInitials(currentUser)}
+      </button>
+      {showDropdown && (
+        <div className="nav-dropdown-menu">
+          <div className="dropdown-header">
+            {currentUser?.username || 'User'}
+          </div>
+          <hr className="dropdown-divider" />
+          <a className="dropdown-item" href="/settings">
+            Settings
+          </a>
+          <a className="dropdown-item" href="/" onClick={handleLogout}>
+            Logout
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import userEvent from '@testing-library/user-event';
+import { render } from '../../../setupTests';
+import DJClientContext from '../../providers/djclient';
+import NodeListActions from '../NodeListActions';
+
+describe('<NodeListActions />', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  const renderElement = djClient => {
+    return render(
+      <DJClientContext.Provider value={djClient}>
+        <NodeListActions nodeName="default.hard_hat" />
+      </DJClientContext.Provider>,
+    );
+  };
+
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        deactivate: jest.fn(),
+      },
+    };
+  };
+
+  it('deletes a node when clicked', async () => {
+    global.confirm = () => true;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 204,
+      json: { name: 'source.warehouse.schema.some_table' },
+    });
+
+    renderElement(mockDjClient);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalledWith(
+        'default.hard_hat',
+      );
+    });
+    expect(
+      screen.getByText('Successfully deleted node default.hard_hat'),
+    ).toBeInTheDocument();
+  }, 60000);
+
+  it('skips a node deletion during confirm', async () => {
+    global.confirm = () => false;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 204,
+      json: { name: 'source.warehouse.schema.some_table' },
+    });
+
+    renderElement(mockDjClient);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.deactivate).not.toBeCalled();
+    });
+  }, 60000);
+
+  it('fail deleting a node when clicked', async () => {
+    global.confirm = () => true;
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
+      status: 777,
+      json: { message: 'source.warehouse.schema.some_table' },
+    });
+
+    renderElement(mockDjClient);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalledWith(
+        'default.hard_hat',
+      );
+    });
+    expect(
+      screen.getByText('source.warehouse.schema.some_table'),
+    ).toBeInTheDocument();
+  }, 60000);
+});

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

@@ -0,0 +1,263 @@
+import React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
+import NodeMaterializationDelete from '../NodeMaterializationDelete';
+import DJClientContext from '../../providers/djclient';
+
+// Mock window.location.reload
+delete window.location;
+window.location = { reload: jest.fn() };
+
+// Mock window.confirm
+window.confirm = jest.fn();
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    deleteMaterialization: jest.fn(),
+  },
+};
+
+describe('<NodeMaterializationDelete />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.confirm.mockReturnValue(true);
+  });
+
+  const defaultProps = {
+    nodeName: 'default.test_node',
+    materializationName: 'test_materialization',
+    nodeVersion: 'v1.0',
+  };
+
+  it('renders delete button', () => {
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+    expect(deleteButton).toBeInTheDocument();
+  });
+
+  it('renders with null nodeVersion', () => {
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete
+          nodeName="default.test_node"
+          materializationName="test_materialization"
+          nodeVersion={null}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+    expect(deleteButton).toBeInTheDocument();
+  });
+
+  it('shows confirm dialog when delete button is clicked', async () => {
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    expect(window.confirm).toHaveBeenCalledWith(
+      expect.stringContaining(
+        'Deleting materialization job test_materialization',
+      ),
+    );
+  });
+
+  it('does not call deleteMaterialization when user cancels confirm', async () => {
+    window.confirm.mockReturnValueOnce(false);
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    expect(window.confirm).toHaveBeenCalled();
+    expect(
+      mockDjClient.DataJunctionAPI.deleteMaterialization,
+    ).not.toHaveBeenCalled();
+  });
+
+  it('calls deleteMaterialization with correct params on success - status 200', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 200,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalledWith(
+        'default.test_node',
+        'test_materialization',
+        'v1.0',
+      );
+      expect(
+        getByText(/Successfully deleted materialization job/),
+      ).toBeInTheDocument();
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('calls deleteMaterialization with correct params on success - status 201', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 201,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('calls deleteMaterialization with correct params on success - status 204', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 204,
+      json: {},
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('displays error message when deletion fails', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 500,
+      json: { message: 'Internal server error' },
+    });
+
+    const { container, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+      expect(getByText('Internal server error')).toBeInTheDocument();
+      expect(window.location.reload).not.toHaveBeenCalled();
+    });
+  });
+
+  it('hides delete button after successful deletion', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 200,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+    expect(deleteButton).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalled();
+    });
+  });
+
+  it('passes null nodeVersion to deleteMaterialization when not provided', async () => {
+    mockDjClient.DataJunctionAPI.deleteMaterialization.mockResolvedValue({
+      status: 200,
+      json: { message: 'Deleted successfully' },
+    });
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <NodeMaterializationDelete
+          nodeName="default.test_node"
+          materializationName="test_mat"
+        />
+      </DJClientContext.Provider>,
+    );
+
+    const deleteButton = container.querySelector('button[type="submit"]');
+
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.deleteMaterialization,
+      ).toHaveBeenCalledWith('default.test_node', 'test_mat', null);
+    });
+  });
+});