datajunction-ui 0.0.59 → 0.0.62

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

@@ -747,6 +747,17 @@ describe('<GitSettingsModal />', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    // Mock fetch for parent config fetching
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            github_repo_path: 'test/repo',
+            git_path: 'nodes/',
+          }),
+      }),
+    );
   });
 
   it('should not render when isOpen is false', () => {
@@ -754,39 +765,44 @@ describe('<GitSettingsModal />', () => {
     expect(screen.queryByText('Git Configuration')).not.toBeInTheDocument();
   });
 
-  it('should render the modal with form fields', () => {
+  it('should render the modal with git root form fields', () => {
     render(<GitSettingsModal {...defaultProps} />);
 
     expect(screen.getByText('Git Configuration')).toBeInTheDocument();
-    expect(screen.getByLabelText('Repository')).toBeInTheDocument();
-    expect(screen.getByLabelText('Branch')).toBeInTheDocument();
-    expect(screen.getByLabelText('Path')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Repository/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Path/)).toBeInTheDocument();
+    // Branch field (from branch mode) should NOT be present in git root mode
+    expect(screen.queryByLabelText(/^Branch \*/)).not.toBeInTheDocument();
   });
 
-  it('should pre-fill form with current config', () => {
+  it('should pre-fill form with git root config', () => {
     const config = {
       github_repo_path: 'myorg/repo',
-      git_branch: 'main',
       git_path: 'definitions/',
-      git_only: true,
     };
 
     render(<GitSettingsModal {...defaultProps} currentConfig={config} />);
 
-    expect(screen.getByLabelText('Repository')).toHaveValue('myorg/repo');
-    expect(screen.getByLabelText('Branch')).toHaveValue('main');
-    expect(screen.getByLabelText('Path')).toHaveValue('definitions/');
+    expect(screen.getByLabelText(/Repository/)).toHaveValue('myorg/repo');
+    expect(screen.getByLabelText(/Path/)).toHaveValue('definitions/');
+    // Branch field (from branch mode) should NOT be present in git root mode
+    expect(screen.queryByLabelText(/^Branch \*/)).not.toBeInTheDocument();
   });
 
-  it('should pre-fill git_only checkbox from config', () => {
+  it('should pre-fill git_only checkbox from branch namespace config', () => {
     const config = {
-      github_repo_path: 'myorg/repo',
-      git_branch: 'main',
-      git_path: 'definitions/',
+      parent_namespace: 'analytics',
+      git_branch: 'feature',
       git_only: false,
     };
 
-    render(<GitSettingsModal {...defaultProps} currentConfig={config} />);
+    render(
+      <GitSettingsModal
+        {...defaultProps}
+        namespace="analytics.feature"
+        currentConfig={config}
+      />,
+    );
 
     const checkbox = screen.getByRole('checkbox');
     expect(checkbox).not.toBeChecked();
@@ -794,43 +810,45 @@ describe('<GitSettingsModal />', () => {
 
   it('should default path to nodes/ for new config', () => {
     render(<GitSettingsModal {...defaultProps} />);
-    expect(screen.getByLabelText('Path')).toHaveValue('nodes/');
+    expect(screen.getByLabelText(/Path/)).toHaveValue('nodes/');
   });
 
-  it('should default git_only to true for new config', () => {
+  it('should not show git_only checkbox in git root mode for new config', () => {
     render(<GitSettingsModal {...defaultProps} />);
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toBeChecked();
+    // Git root mode has no checkbox
+    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
   });
 
-  it('should call onSave when form is submitted', async () => {
+  it('should call onSave when git root form is submitted', async () => {
     defaultProps.onSave.mockResolvedValue({ success: true });
 
     render(<GitSettingsModal {...defaultProps} />);
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'myorg/repo');
-    await userEvent.type(screen.getByLabelText('Branch'), 'main');
+    await userEvent.type(screen.getByLabelText(/Repository/), 'myorg/repo');
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
     );
 
     await waitFor(() => {
       expect(defaultProps.onSave).toHaveBeenCalledWith({
+        default_branch: 'main',
         github_repo_path: 'myorg/repo',
-        git_branch: 'main',
         git_path: 'nodes/',
-        git_only: true,
       });
     });
   });
 
-  it('should call onSave with git_only false when unchecked', async () => {
+  it('should call onSave with git_only when branch namespace form is submitted', async () => {
     defaultProps.onSave.mockResolvedValue({ success: true });
 
-    render(<GitSettingsModal {...defaultProps} />);
+    render(
+      <GitSettingsModal {...defaultProps} namespace="analytics.feature" />,
+    );
+
+    // Switch to branch mode
+    await userEvent.click(screen.getByText('Branch Namespace'));
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'myorg/repo');
-    await userEvent.type(screen.getByLabelText('Branch'), 'main');
+    await userEvent.type(screen.getByLabelText(/Branch/), 'feature-x');
     await userEvent.click(screen.getByRole('checkbox')); // Uncheck git_only
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
@@ -838,9 +856,8 @@ describe('<GitSettingsModal />', () => {
 
     await waitFor(() => {
       expect(defaultProps.onSave).toHaveBeenCalledWith({
-        github_repo_path: 'myorg/repo',
-        git_branch: 'main',
-        git_path: 'nodes/',
+        git_branch: 'feature-x',
+        parent_namespace: 'analytics',
         git_only: false,
       });
     });
@@ -851,7 +868,7 @@ describe('<GitSettingsModal />', () => {
 
     render(<GitSettingsModal {...defaultProps} />);
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'myorg/repo');
+    await userEvent.type(screen.getByLabelText(/Repository/), 'myorg/repo');
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
     );
@@ -871,7 +888,7 @@ describe('<GitSettingsModal />', () => {
 
     render(<GitSettingsModal {...defaultProps} />);
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'invalid');
+    await userEvent.type(screen.getByLabelText(/Repository/), 'invalid');
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
     );
@@ -886,7 +903,7 @@ describe('<GitSettingsModal />', () => {
 
     render(<GitSettingsModal {...defaultProps} />);
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'myorg/repo');
+    await userEvent.type(screen.getByLabelText(/Repository/), 'myorg/repo');
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
     );
@@ -901,7 +918,7 @@ describe('<GitSettingsModal />', () => {
 
     render(<GitSettingsModal {...defaultProps} />);
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'myorg/repo');
+    await userEvent.type(screen.getByLabelText(/Repository/), 'myorg/repo');
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
     );
@@ -913,9 +930,21 @@ describe('<GitSettingsModal />', () => {
     });
   });
 
-  it('should toggle git-only checkbox', async () => {
+  it('should not show git-only checkbox in git root mode', async () => {
     render(<GitSettingsModal {...defaultProps} />);
 
+    // Git root mode should not have git_only checkbox
+    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+  });
+
+  it('should toggle git-only checkbox in branch mode', async () => {
+    render(
+      <GitSettingsModal {...defaultProps} namespace="analytics.feature" />,
+    );
+
+    // Switch to branch mode
+    await userEvent.click(screen.getByText('Branch Namespace'));
+
     const checkbox = screen.getByRole('checkbox');
     expect(checkbox).toBeChecked(); // Default is true
 
@@ -956,7 +985,7 @@ describe('<GitSettingsModal />', () => {
 
     render(<GitSettingsModal {...defaultProps} />);
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'myorg/repo');
+    await userEvent.type(screen.getByLabelText(/Repository/), 'myorg/repo');
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
     );
@@ -973,7 +1002,7 @@ describe('<GitSettingsModal />', () => {
 
     render(<GitSettingsModal {...defaultProps} />);
 
-    await userEvent.type(screen.getByLabelText('Repository'), 'myorg/repo');
+    await userEvent.type(screen.getByLabelText(/Repository/), 'myorg/repo');
     await userEvent.click(
       screen.getByRole('button', { name: 'Save Settings' }),
     );
@@ -992,7 +1021,7 @@ describe('<GitSettingsModal />', () => {
   it('should update path field', async () => {
     render(<GitSettingsModal {...defaultProps} />);
 
-    const pathInput = screen.getByLabelText('Path');
+    const pathInput = screen.getByLabelText(/Path/);
     await userEvent.clear(pathInput);
     await userEvent.type(pathInput, 'definitions/');
 

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

@@ -551,9 +551,9 @@ describe('<NamespaceHeader />', () => {
       listDeployments: jest.fn().mockResolvedValue([]),
       getNamespaceGitConfig: jest.fn().mockResolvedValue({
         github_repo_path: 'test/repo',
-        git_branch: 'main',
         git_path: 'nodes/',
-        git_only: false,
+        default_branch: 'main',
+        // No git_branch or parent_namespace - this is a git root with default_branch
       }),
     };
 
@@ -565,7 +565,7 @@ describe('<NamespaceHeader />', () => {
       </MemoryRouter>,
     );
 
-    // For non-branch namespaces, button is labeled "New Branch"
+    // For git root namespaces with default_branch, button is labeled "New Branch"
     await waitFor(() => {
       expect(screen.getByText('New Branch')).toBeInTheDocument();
     });
@@ -627,9 +627,9 @@ describe('<NamespaceHeader />', () => {
       listDeployments: jest.fn().mockResolvedValue([]),
       getNamespaceGitConfig: jest.fn().mockResolvedValue({
         github_repo_path: 'test/repo',
-        git_branch: 'main',
         git_path: 'nodes/',
-        git_only: false,
+        default_branch: 'main',
+        // No git_branch or parent_namespace - this is a git root with default_branch
       }),
     };
 
@@ -710,9 +710,8 @@ describe('<NamespaceHeader />', () => {
       getNamespaceGitConfig: jest.fn().mockResolvedValue(null),
       updateNamespaceGitConfig: jest.fn().mockResolvedValue({
         github_repo_path: 'myorg/repo',
-        git_branch: 'main',
         git_path: 'nodes/',
-        git_only: true,
+        // git_branch and git_only not present in git root config
       }),
     };
 
@@ -731,15 +730,13 @@ describe('<NamespaceHeader />', () => {
     fireEvent.click(screen.getByText('Git Settings'));
 
     await waitFor(() => {
-      expect(screen.getByLabelText('Repository')).toBeInTheDocument();
+      expect(screen.getByLabelText(/Repository/)).toBeInTheDocument();
     });
 
-    fireEvent.change(screen.getByLabelText('Repository'), {
+    fireEvent.change(screen.getByLabelText(/Repository/), {
       target: { value: 'myorg/repo' },
     });
-    fireEvent.change(screen.getByLabelText('Branch'), {
-      target: { value: 'main' },
-    });
+    // Branch field is not present in git root mode
 
     fireEvent.click(screen.getByText('Save Settings'));
 
@@ -748,7 +745,6 @@ describe('<NamespaceHeader />', () => {
         'test.namespace',
         expect.objectContaining({
           github_repo_path: 'myorg/repo',
-          git_branch: 'main',
         }),
       );
     });
@@ -767,13 +763,13 @@ describe('<NamespaceHeader />', () => {
       listDeployments: jest.fn().mockResolvedValue([]),
       getNamespaceGitConfig: jest.fn().mockResolvedValue({
         github_repo_path: 'test/repo',
-        git_branch: 'main',
         git_path: 'nodes/',
-        git_only: false,
+        default_branch: 'main',
+        // No git_branch or parent_namespace - this is a git root
       }),
       createBranch: jest.fn().mockResolvedValue({
         branch: {
-          namespace: 'test.feature_xyz',
+          namespace: 'test.namespace.feature_xyz',
           git_branch: 'feature-xyz',
           parent_namespace: 'test.namespace',
         },

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

@@ -1,63 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "background": "#ffffff",
-      "borderBottom": "1px solid #e2e8f0",
-      "borderTop": "1px solid #e2e8f0",
-      "display": "flex",
-      "justifyContent": "space-between",
-      "marginBottom": "16px",
-      "padding": "12px 12px 12px 20px",
-    }
-  }
->
+<React.Fragment>
+  <style>
+    
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        
+  </style>
   <div
     style={
       Object {
         "alignItems": "center",
+        "background": "#ffffff",
+        "borderBottom": "1px solid #e2e8f0",
+        "borderTop": "1px solid #e2e8f0",
         "display": "flex",
-        "gap": "8px",
+        "justifyContent": "space-between",
+        "marginBottom": "16px",
+        "padding": "12px 12px 12px 20px",
       }
     }
   >
-    <a
-      href="/"
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-        }
-      }
-    >
-      <svg
-        fill="currentColor"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"
-        />
-      </svg>
-    </a>
-    <svg
-      fill="#6c757d"
-      height="12"
-      viewBox="0 0 16 16"
-      width="12"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-        fillRule="evenodd"
-      />
-    </svg>
-    <span
+    <div
       style={
         Object {
           "alignItems": "center",
@@ -67,19 +34,28 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
       }
     >
       <a
-        href="/namespaces/shared"
+        href="/"
         style={
           Object {
-            "color": "#1e293b",
-            "fontWeight": "400",
-            "textDecoration": "none",
+            "alignItems": "center",
+            "display": "flex",
           }
         }
       >
-        shared
+        <svg
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"
+          />
+        </svg>
       </a>
       <svg
-        fill="#94a3b8"
+        fill="#6c757d"
         height="12"
         viewBox="0 0 16 16"
         width="12"
@@ -90,42 +66,98 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
           fillRule="evenodd"
         />
       </svg>
-    </span>
-    <span
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "gap": "8px",
+      <span
+        style={
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "8px",
+          }
         }
-      }
-    >
-      <a
-        href="/namespaces/shared.dimensions"
+      >
+        <a
+          href="/namespaces/shared"
+          style={
+            Object {
+              "color": "#1e293b",
+              "fontWeight": "400",
+              "textDecoration": "none",
+            }
+          }
+        >
+          shared
+        </a>
+        <svg
+          fill="#94a3b8"
+          height="12"
+          viewBox="0 0 16 16"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <span
         style={
           Object {
-            "color": "#1e293b",
-            "fontWeight": "400",
-            "textDecoration": "none",
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "8px",
           }
         }
       >
-        dimensions
-      </a>
-      <svg
-        fill="#94a3b8"
-        height="12"
-        viewBox="0 0 16 16"
-        width="12"
-        xmlns="http://www.w3.org/2000/svg"
+        <a
+          href="/namespaces/shared.dimensions"
+          style={
+            Object {
+              "color": "#1e293b",
+              "fontWeight": "400",
+              "textDecoration": "none",
+            }
+          }
+        >
+          dimensions
+        </a>
+        <svg
+          fill="#94a3b8"
+          height="12"
+          viewBox="0 0 16 16"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <span
+        style={
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "8px",
+          }
+        }
       >
-        <path
-          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
-    <span
+        <a
+          href="/namespaces/shared.dimensions.accounts"
+          style={
+            Object {
+              "color": "#1e293b",
+              "fontWeight": "400",
+              "textDecoration": "none",
+            }
+          }
+        >
+          accounts
+        </a>
+      </span>
+    </div>
+    <div
       style={
         Object {
           "alignItems": "center",
@@ -133,61 +165,39 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
           "gap": "8px",
         }
       }
-    >
-      <a
-        href="/namespaces/shared.dimensions.accounts"
-        style={
-          Object {
-            "color": "#1e293b",
-            "fontWeight": "400",
-            "textDecoration": "none",
-          }
-        }
-      >
-        accounts
-      </a>
-    </span>
+    />
+    <GitSettingsModal
+      currentConfig={null}
+      isOpen={false}
+      namespace="shared.dimensions.accounts"
+      onClose={[Function]}
+      onRemove={[Function]}
+      onSave={[Function]}
+    />
+    <CreateBranchModal
+      isOpen={false}
+      namespace="shared.dimensions.accounts"
+      onClose={[Function]}
+      onCreate={[Function]}
+    />
+    <SyncToGitModal
+      isOpen={false}
+      namespace="shared.dimensions.accounts"
+      onClose={[Function]}
+      onSync={[Function]}
+    />
+    <CreatePRModal
+      isOpen={false}
+      namespace="shared.dimensions.accounts"
+      onClose={[Function]}
+      onCreate={[Function]}
+    />
+    <DeleteBranchModal
+      isOpen={false}
+      namespace="shared.dimensions.accounts"
+      onClose={[Function]}
+      onDelete={[Function]}
+    />
   </div>
-  <div
-    style={
-      Object {
-        "alignItems": "center",
-        "display": "flex",
-        "gap": "8px",
-      }
-    }
-  />
-  <GitSettingsModal
-    currentConfig={null}
-    isOpen={false}
-    namespace="shared.dimensions.accounts"
-    onClose={[Function]}
-    onRemove={[Function]}
-    onSave={[Function]}
-  />
-  <CreateBranchModal
-    isOpen={false}
-    namespace="shared.dimensions.accounts"
-    onClose={[Function]}
-    onCreate={[Function]}
-  />
-  <SyncToGitModal
-    isOpen={false}
-    namespace="shared.dimensions.accounts"
-    onClose={[Function]}
-    onSync={[Function]}
-  />
-  <CreatePRModal
-    isOpen={false}
-    namespace="shared.dimensions.accounts"
-    onClose={[Function]}
-    onCreate={[Function]}
-  />
-  <DeleteBranchModal
-    isOpen={false}
-    namespace="shared.dimensions.accounts"
-    onClose={[Function]}
-    onDelete={[Function]}
-  />
-</div>
+</React.Fragment>
 `;