datajunction-ui 0.0.1-a91 → 0.0.1-a92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a91",
+  "version": "0.0.1a92",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

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

@@ -0,0 +1,116 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function EditColumnDescriptionPopover({
+  column,
+  node,
+  onSubmit,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const saveDescription = async (
+    { node, column, description },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setColumnDescription(
+      node,
+      column,
+      description,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="EditColumnDescription"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="edit-description"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            description: column.description || '',
+          }}
+          onSubmit={saveDescription}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <div className="form-group mt-3">
+                  <label htmlFor="description">Description</label>
+                  <textarea
+                    name="description"
+                    className="form-control"
+                    rows="3"
+                    onChange={e => setFieldValue('description', e.target.value)}
+                    defaultValue={column.description || ''}
+                  />
+                </div>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="btn btn-primary mt-3"
+                  type="submit"
+                  disabled={isSubmitting}
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import * as React from 'react';
 import EditColumnPopover from './EditColumnPopover';
+import EditColumnDescriptionPopover from './EditColumnDescriptionPopover';
 import LinkDimensionPopover from './LinkDimensionPopover';
 import { labelize } from '../../../utils/form';
 import PartitionColumnPopover from './PartitionColumnPopover';
@@ -113,6 +114,24 @@ export default function NodeColumnTab({ node, djClient }) {
               {col.display_name}
             </span>
           </td>
+          <td>
+            <span
+              className=""
+              role="columnheader"
+              aria-label="ColumnDescription"
+              aria-hidden="false"
+            >
+              {col.description || ''}
+              <EditColumnDescriptionPopover
+                column={col}
+                node={node}
+                onSubmit={async () => {
+                  const res = await djClient.node(node.name);
+                  setColumns(res.columns);
+                }}
+              />
+            </span>
+          </td>
           <td>
             <span
               className={`node_type__${
@@ -188,6 +207,7 @@ export default function NodeColumnTab({ node, djClient }) {
             <tr>
               <th className="text-start">Column</th>
               <th>Display Name</th>
+              <th>Description</th>
               <th>Type</th>
               {node?.type !== 'cube' ? (
                 <>

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  waitFor,
+  screen,
+  within,
+} from '@testing-library/react';
+import EditColumnDescriptionPopover from '../EditColumnDescriptionPopover';
+import DJClientContext from '../../../providers/djclient';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    setColumnDescription: jest.fn(),
+  },
+};
+
+describe('<EditColumnDescriptionPopover />', () => {
+  it('renders correctly and handles successful form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      description: 'Initial description',
+    };
+    const node = { name: 'default.node1' };
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.setColumnDescription.mockReturnValue({
+      status: 200,
+      json: { message: 'Description updated successfully' },
+    });
+
+    // Render the component
+    render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <EditColumnDescriptionPopover
+          column={column}
+          node={node}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(screen.getByLabelText('EditColumnDescription'));
+
+    // Update the description
+    const dialog = screen.getByRole('dialog', { name: /edit-description/i });
+    const descriptionTextarea = within(dialog).getByRole('textbox');
+    fireEvent.change(descriptionTextarea, {
+      target: { value: 'Updated description' },
+    });
+
+    // Submit the form
+    fireEvent.click(screen.getByText('Save'));
+
+    // Expect setColumnDescription to be called
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.setColumnDescription,
+      ).toHaveBeenCalledWith('default.node1', 'column1', 'Updated description');
+      expect(screen.getByText('Saved!')).toBeInTheDocument();
+      expect(onSubmitMock).toHaveBeenCalled();
+    });
+  });
+
+  it('handles failed form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      description: 'Initial description',
+    };
+    const node = { name: 'default.node1' };
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.setColumnDescription.mockReturnValue({
+      status: 500,
+      json: { message: 'Server error' },
+    });
+
+    // Render the component
+    render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <EditColumnDescriptionPopover
+          column={column}
+          node={node}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(screen.getByLabelText('EditColumnDescription'));
+
+    // Update the description
+    const dialog = screen.getByRole('dialog', { name: /edit-description/i });
+    const descriptionTextarea = within(dialog).getByRole('textbox');
+    fireEvent.change(descriptionTextarea, {
+      target: { value: 'Updated description' },
+    });
+
+    // Submit the form
+    fireEvent.click(screen.getByText('Save'));
+
+    // Expect setColumnDescription to be called and the failure message to show up
+    await waitFor(() => {
+      expect(
+        mockDjClient.DataJunctionAPI.setColumnDescription,
+      ).toHaveBeenCalledWith('default.node1', 'column1', 'Updated description');
+      expect(screen.getByText('Server error')).toBeInTheDocument();
+      expect(onSubmitMock).toHaveBeenCalled();
+    });
+  });
+
+  it('renders with empty initial description', async () => {
+    // Mock necessary data with no description
+    const column = {
+      name: 'column1',
+      description: null,
+    };
+    const node = { name: 'default.node1' };
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    // Render the component
+    render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <EditColumnDescriptionPopover
+          column={column}
+          node={node}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(screen.getByLabelText('EditColumnDescription'));
+
+    // Check that the textarea is empty
+    const dialog = screen.getByRole('dialog', { name: /edit-description/i });
+    const descriptionTextarea = within(dialog).getByRole('textbox');
+    expect(descriptionTextarea.value).toBe('');
+  });
+});

package/src/app/services/DJService.js

@@ -742,6 +742,19 @@ export const DataJunctionAPI = {
     );
     return { status: response.status, json: await response.json() };
   },
+
+  setColumnDescription: async function (nodeName, columnName, description) {
+    const response = await fetch(
+      `${DJ_URL}/nodes/${nodeName}/columns/${columnName}/description?description=${encodeURIComponent(
+        description,
+      )}`,
+      {
+        method: 'PATCH',
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  },
   dimensions: async function () {
     return await (
       await fetch(`${DJ_URL}/dimensions`, {