datajunction-ui 0.0.31 → 0.0.41

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.31",
-  "description": "DataJunction Metrics Platform UI",
+  "version": "0.0.41",
+  "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/DataJunction/dj-ui.git"
+    "url": "git+https://github.com/DataJunction/dj.git"
   },
   "keywords": [
     "datajunction",

package/src/app/components/ListGroupItem.jsx

@@ -9,14 +9,14 @@ export default class ListGroupItem extends Component {
         <div className="d-flex gap-2 w-100 justify-content-between py-3">
           <div>
             <h6 className="mb-0 w-100">{label}</h6>
-            <p
+            <div
               className="mb-0 opacity-75"
               role="dialog"
               aria-hidden="false"
               aria-label={label}
             >
               <Markdown>{value}</Markdown>
-            </p>
+            </div>
           </div>
         </div>
       </div>

package/src/app/components/QueryInfo.jsx

@@ -122,8 +122,9 @@ export default function QueryInfo({
         <li className={'query-info'}>
           <label>Logs</label>{' '}
           {errors?.length ? (
-            errors.map(error => (
+            errors.map((error, idx) => (
               <div
+                key={`error-${idx}`}
                 style={{
                   height: '800px',
                   width: '80%',

package/src/app/components/__tests__/__snapshots__/ListGroupItem.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
       >
         Name
       </h6>
-      <p
+      <div
         aria-hidden="false"
         aria-label="Name"
         className="mb-0 opacity-75"
@@ -24,7 +24,7 @@ exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
             Something
           </span>
         </Markdown>
-      </p>
+      </div>
     </div>
   </div>
 </div>

package/src/app/components/djgraph/__tests__/Collapse.test.jsx

@@ -35,10 +35,13 @@ describe('<Collapse />', () => {
         <Collapse
           {...defaultProps}
           data={{
+            name: 'test.transform',
             type: 'transform',
-            column_names: Array(11).fill(idx => {
-              return `column-${idx}`;
-            }),
+            column_names: Array.from({ length: 11 }, (_, idx) => ({
+              name: `column_${idx}`,
+              type: 'string',
+              order: idx,
+            })),
             primary_key: [],
           }}
         />

package/src/app/pages/AddEditNodePage/index.jsx

@@ -53,7 +53,7 @@ export function AddEditNodePage({ extensions = {} }) {
     primary_key: '',
     mode: 'published',
     owners: [],
-    custom_metadata: null,
+    custom_metadata: '',
   };
 
   const validator = values => {

package/src/app/pages/AddEditTagPage/index.jsx

@@ -90,7 +90,7 @@ export function AddEditTagPage() {
                             name="display_name"
                             id="display_name"
                             placeholder="Display Name"
-                            class="FullNameField"
+                            className="FullNameField"
                           />
                         </div>
                         <br />

package/src/app/pages/CubeBuilderPage/__tests__/index.test.jsx

@@ -185,30 +185,48 @@ describe('CubeBuilderPage', () => {
     jest.clearAllMocks();
   });
 
-  it('renders without crashing', () => {
+  it('renders without crashing', async () => {
     render(
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
         <CubeBuilderPage />
       </DJClientContext.Provider>,
     );
+
+    // Wait for async effects to complete
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
     expect(screen.getByText('Cube')).toBeInTheDocument();
   });
 
-  it('renders the Metrics section', () => {
+  it('renders the Metrics section', async () => {
     render(
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
         <CubeBuilderPage />
       </DJClientContext.Provider>,
     );
+
+    // Wait for async effects to complete
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
     expect(screen.getByText('Metrics *')).toBeInTheDocument();
   });
 
-  it('renders the Dimensions section', () => {
+  it('renders the Dimensions section', async () => {
     render(
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
         <CubeBuilderPage />
       </DJClientContext.Provider>,
     );
+
+    // Wait for async effects to complete
+    await waitFor(() => {
+      expect(mockDjClient.metrics).toHaveBeenCalled();
+    });
+
     expect(screen.getByText('Dimensions *')).toBeInTheDocument();
   });
 
@@ -237,22 +255,31 @@ describe('CubeBuilderPage', () => {
     }
     fireEvent.click(screen.getAllByText('Dimensions *')[0]);
 
-    expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+    // Wait for commonDimensions to be called and state to update
+    await waitFor(() => {
+      expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+    });
 
     const selectDimensions = screen.getAllByTestId('select-dimensions')[0];
     expect(selectDimensions).toBeDefined();
     expect(selectDimensions).not.toBeNull();
-    expect(
-      screen.getByText(
-        'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
-      ),
-    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
+        ),
+      ).toBeInTheDocument();
+    });
 
     const selectDimensionsDate = screen.getAllByTestId(
       'dimensions-default.date_dim',
     )[0];
 
     fireEvent.keyDown(selectDimensionsDate.firstChild, { key: 'ArrowDown' });
+    await waitFor(() => {
+      expect(screen.getByText('Day')).toBeInTheDocument();
+    });
     fireEvent.click(screen.getByText('Day'));
     fireEvent.click(screen.getByText('Month'));
     fireEvent.click(screen.getByText('Year'));
@@ -264,9 +291,8 @@ describe('CubeBuilderPage', () => {
     })[0];
     expect(createCube).toBeInTheDocument();
 
-    await waitFor(() => {
-      fireEvent.click(createCube);
-    });
+    fireEvent.click(createCube);
+
     await waitFor(() => {
       expect(mockDjClient.createCube).toHaveBeenCalledWith(
         '',
@@ -322,22 +348,31 @@ describe('CubeBuilderPage', () => {
 
     fireEvent.click(screen.getAllByText('Dimensions *')[0]);
 
-    expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+    // Wait for commonDimensions to be called and state to update
+    await waitFor(() => {
+      expect(mockDjClient.commonDimensions).toHaveBeenCalled();
+    });
 
     const selectDimensions = screen.getAllByTestId('select-dimensions')[0];
     expect(selectDimensions).toBeDefined();
     expect(selectDimensions).not.toBeNull();
-    expect(
-      screen.getByText(
-        'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
-      ),
-    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'default.repair_order_details.repair_order_id → default.repair_order.hard_hat_id → default.hard_hat.birth_date',
+        ),
+      ).toBeInTheDocument();
+    });
 
     const selectDimensionsDate = screen.getAllByTestId(
       'dimensions-default.date_dim',
     )[0];
 
     fireEvent.keyDown(selectDimensionsDate.firstChild, { key: 'ArrowDown' });
+    await waitFor(() => {
+      expect(screen.getByText('Day')).toBeInTheDocument();
+    });
     fireEvent.click(screen.getByText('Day'));
     fireEvent.click(screen.getByText('Month'));
     fireEvent.click(screen.getByText('Year'));
@@ -349,9 +384,8 @@ describe('CubeBuilderPage', () => {
     })[0];
     expect(createCube).toBeInTheDocument();
 
-    await waitFor(() => {
-      fireEvent.click(createCube);
-    });
+    fireEvent.click(createCube);
+
     await waitFor(() => {
       expect(mockDjClient.patchCube).toHaveBeenCalledWith(
         'default.repair_orders_cube',

package/src/app/pages/NodePage/NodeInfoTab.jsx

@@ -37,9 +37,13 @@ export default function NodeInfoTab({ node }) {
   const [metricInfo, setMetricInfo] = useState(null);
 
   const nodeTags = node?.tags.map(tag => (
-    <div className={'badge tag_value'}>
+    <span
+      key={tag.name}
+      className={'badge tag_value'}
+      style={{ marginRight: '4px' }}
+    >
       <a href={`/tags/${tag.name}`}>{tag.display_name}</a>
-    </div>
+    </span>
   ));
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
@@ -314,13 +318,19 @@ export default function NodeInfoTab({ node }) {
         }
       >
         {node?.type !== 'metric'
-          ? node?.primary_key?.map(dim => (
-              <span className="rounded-pill badge bg-secondary-soft PrimaryKey">
+          ? node?.primary_key?.map((dim, idx) => (
+              <span
+                key={`pk-${idx}`}
+                className="rounded-pill badge bg-secondary-soft PrimaryKey"
+              >
                 <a href={`/nodes/${node?.name}`}>{dim}</a>
               </span>
             ))
-          : node?.required_dimensions?.map(dim => (
-              <span className="rounded-pill badge bg-secondary-soft PrimaryKey">
+          : node?.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>
               </span>
             ))}
@@ -341,6 +351,7 @@ export default function NodeInfoTab({ node }) {
             <p className="mb-0 opacity-75">
               {node?.owners.map(owner => (
                 <span
+                  key={owner.username}
                   className="badge node_type__transform"
                   style={{ margin: '2px', fontSize: '16px', cursor: 'pointer' }}
                 >

package/src/app/pages/NodePage/NodeMaterializationTab.jsx

@@ -11,6 +11,11 @@ import AvailabilityStateBlock from './AvailabilityStateBlock';
 
 const cronstrue = require('cronstrue');
 
+/**
+ * Cube materialization tab - shows cube-specific materializations.
+ * For non-cube nodes, the parent component (index.jsx) renders
+ * NodePreAggregationsTab instead.
+ */
 export default function NodeMaterializationTab({ node, djClient }) {
   const [rawMaterializations, setRawMaterializations] = useState([]);
   const [selectedRevisionTab, setSelectedRevisionTab] = useState(null);