datajunction-ui 0.0.1-a90 → 0.0.1-a91.dev1

package/package.json

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

package/src/app/icons/WrenchIcon.jsx

@@ -0,0 +1,36 @@
+const WrenchIcon = props => (
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_24_77)">
+      <rect
+        width="16"
+        height="16"
+        transform="translate(0 0.649803)"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.41665 5.44985C6.41665 2.8265 8.5433 0.699852 11.1667 0.699852C11.4613 0.699852 11.7504 0.726773 12.0313 0.778484C12.5762 0.878798 12.9364 1.28101 13.0406 1.74377C13.1406 2.18774 13.0066 2.67055 12.6619 3.01531L11.2273 4.44985L12.1667 5.38919L13.6012 3.95465C13.946 3.60989 14.4288 3.47589 14.8728 3.57591C15.3355 3.68017 15.7377 4.04033 15.838 4.58525C15.8898 4.86615 15.9167 5.15519 15.9167 5.44985C15.9167 8.0732 13.79 10.1999 11.1667 10.1999C10.658 10.1999 10.167 10.1196 9.70625 9.97091L3.50172 16.1754C2.94847 16.7287 2.05149 16.7287 1.49825 16.1754L0.441055 15.1183C-0.112189 14.565 -0.112186 13.668 0.441056 13.1148L6.64559 6.91025C6.49685 6.44951 6.41665 5.9585 6.41665 5.44985ZM11.1667 2.19985C9.37172 2.19985 7.91665 3.65492 7.91665 5.44985C7.91665 5.92812 8.01948 6.38034 8.20352 6.7873L8.41725 7.25991L8.05048 7.62667L1.56064 14.1165L2.49998 15.0559L8.98982 8.56601L9.35659 8.19925L9.8292 8.41298C10.2362 8.59702 10.6884 8.69985 11.1667 8.69985C12.9616 8.69985 14.4167 7.24477 14.4167 5.44985C14.4167 5.38796 14.415 5.32654 14.4116 5.26562L12.697 6.98018L12.1667 7.51051L11.6363 6.98018L9.63632 4.98018L9.10599 4.44985L9.63632 3.91952L11.3509 2.20496C11.29 2.20157 11.2286 2.19985 11.1667 2.19985Z"
+        fill="black"
+        fill-opacity="0.9"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_24_77">
+        <rect
+          width="16"
+          height="16"
+          fill="white"
+          transform="translate(0 0.649803)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default WrenchIcon;

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

@@ -0,0 +1,61 @@
+/**
+ * Component for arbitrary column metadata
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const ColumnMetadata = ({ name, label, defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // When focus is on the input field, refresh the list of available columns for selection
+  const refreshColumns = event => {
+    async function fetchData() {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    }
+    fetchData();
+  };
+
+  return (
+    <div className="NodeCreationInput" style={{ width: '25%' }}>
+      <ErrorMessage name={name} component="span" />
+      <label htmlFor="react-select-3-input">{label}</label>
+      <span data-testid={`select-${name}`}>
+        <FormikSelect
+          className="SelectInput"
+          style={{ width: '100px' }}
+          defaultValue={defaultValue}
+          selectOptions={selectableOptions}
+          formikFieldName={name}
+          //   placeholder={`Choose ${label}`}
+          onFocus={event => refreshColumns(event)}
+          isMulti={false}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+/**
+ * Column metadata configuration component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+import WrenchIcon from 'app/icons/WrenchIcon';
+
+export const ColumnsMetadataInput = ({ columns }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // When focus is on the primary key field, refresh the list of available
+  // primary key columns for selection
+  useEffect(() => {
+    const fetchData = async () => {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  return (
+    <div
+      className="ColumnsMetadataInput NodeCreationInput"
+      style={{ border: 'dashed 1px #ccc', padding: '20px' }}
+    >
+      <ErrorMessage name="mode" component="span" />
+      <label htmlFor="Mode">Columns Metadata</label>
+      <table>
+        <thead>
+          <tr>
+            <th>Column</th>
+            <th>Metadata</th>
+          </tr>
+        </thead>
+        <tbody>
+          {availableColumns.map(col => (
+            <tr key={col.value}>
+              <td>{col.value}</td>
+              <td>
+                <WrenchIcon />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

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

@@ -0,0 +1,338 @@
+import { useEffect, useState } from 'react';
+import { useFormikContext } from 'formik';
+import { ColumnsSelect } from 'datajunction-ui/src/app/pages/AddEditNodePage/ColumnsSelect';
+
+const AllocationJoinHeader = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+        fontSize: '16px',
+        fontWeight: 'bold',
+        padding: '10px',
+        borderRadius: '6px',
+        transition: 'background 0.2s',
+      }}
+    >
+      🔥 Fields to enable automatic allocation joins for use in ABlaze
+    </div>
+  );
+};
+
+const AllocationUnitTypeHeader = ({ unit }) => {
+  return (
+    <span
+      style={{
+        backgroundColor: '#fff7ea',
+        color: '#333',
+        fontWeight: '600',
+        width: '100%',
+        borderRadius: '8px 8px 0 0',
+        padding: '15px',
+        display: 'inline-block',
+        marginBottom: '10px',
+        borderBottom: '1px solid #ffe2b2',
+        textTransform: 'capitalize',
+      }}
+    >
+      Allocation Unit Type: {unit.replace('_', ' ')}
+    </span>
+  );
+};
+
+const AddAllocationJoin = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        marginTop: '10px',
+        cursor: 'pointer',
+        textTransform: 'none',
+        background: '#ffe4b2',
+        padding: '15px',
+        fontWeight: '400',
+        fontSize: '16px',
+        display: 'none',
+      }}
+    >
+      ➕ Add another allocation join type
+    </button>
+  );
+};
+
+export const ExperimentationExtension = ({
+  node,
+  action,
+  registerSubmitHandler,
+}) => {
+  const AllocationUnitType = Object.freeze({
+    ACCOUNT_ID: {
+      name: 'account_id',
+      node: 'common.dimensions.xp.allocation_day',
+    },
+    VISITOR_DEVICE_ID: { name: 'visitor_device_id', node: null },
+    PARTNER_VISITOR_DEVICE_ID: {
+      name: 'partner_visitor_device_id',
+      node: null,
+    },
+    PARTNER_ACCOUNT_ID: { name: 'partner_account_id', node: null },
+  });
+
+  const ALLOCATION_LINK_FIELD = 'allocation_links';
+
+  const { values, setFieldValue } = useFormikContext();
+
+  const [allocationConfigFields, setAllocationConfigFields] = useState({});
+
+  // Extracts any Allocation dimension node links
+  const getAllocationLinks = node => {
+    return Object.values(AllocationUnitType)
+      .map(alloc => ({
+        ...alloc,
+        link:
+          node?.dimension_links?.find(
+            link => link.dimension.name === alloc.node,
+          ) || null,
+      }))
+      .filter(alloc => alloc.link !== null);
+  };
+
+  const linkAllocations = async (
+    nodeName,
+    allocationNode,
+    allocationUnit,
+    eventTimestamp,
+  ) => {
+    const response = await fetch(
+      `${process.env.REACT_APP_DJ_URL}/nodes/${nodeName}/link/${allocationNode}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          event_timestamp_column: eventTimestamp,
+          account_id_column: allocationUnit,
+        }),
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  };
+
+  const unlinkAllocations = async (nodeName, allocationNode) => {
+    const response = await fetch(
+      `${process.env.REACT_APP_DJ_URL}/nodes/${nodeName}/link`,
+      {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ dimension_node: allocationNode }),
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  };
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    for (const [unit, fields] of Object.entries(
+      values[ALLOCATION_LINK_FIELD],
+    )) {
+      const shouldDelete = Object.values(fields).every(
+        value => value === null || value === '',
+      );
+      const linkResponse = shouldDelete
+        ? await unlinkAllocations(
+            values.name,
+            AllocationUnitType[unit.toUpperCase()].node,
+          )
+        : await linkAllocations(
+            values.name,
+            AllocationUnitType[unit.toUpperCase()].node,
+            fields.allocation_unit,
+            fields.event_timestamp,
+          );
+      if (
+        linkResponse.status === 200 ||
+        linkResponse.status === 201 ||
+        linkResponse.status === 204
+      ) {
+        const verbiage = shouldDelete ? 'removed the link' : 'linked it';
+        setStatus({
+          success: (
+            <>
+              Successfully {action.name}ed {values.type} node{' '}
+              <a href={`/nodes/${values.name}`}>{values.name}</a> and {verbiage}{' '}
+              with{' '}
+              <a href={`/nodes/${AllocationUnitType[unit.toUpperCase()].node}`}>
+                Allocations
+              </a>
+              !
+            </>
+          ),
+        });
+      } else {
+        if (linkResponse.status === 404) {
+          setStatus({
+            failure: `The DJ API is not set up to support linking to ${
+              AllocationUnitType[unit.toUpperCase()].node
+            }.`,
+          });
+        }
+      }
+    }
+  };
+
+  // Register this function so the main form can call it on submit
+  useEffect(() => {
+    if (registerSubmitHandler) {
+      if (action.name === 'edit') {
+        registerSubmitHandler(handleSubmit, { prepend: false });
+      } else {
+        registerSubmitHandler(handleSubmit, { prepend: false });
+      }
+    }
+  }, []);
+
+  const getAllocationUnitColumn = link => {
+    return Object.entries(link.link.foreign_keys)
+      .find(([_, value]) => value === `${link.node}.${link.name}`)?.[0]
+      ?.replace(node.name + '.', '');
+  };
+
+  const getEventTimestampColumn = link => {
+    return Object.entries(link.link.foreign_keys)
+      .find(([_, value]) => value === null)?.[0]
+      ?.replace(node.name + '.', '');
+  };
+
+  const createColumnsSelect = (
+    fieldName,
+    label,
+    placeholder,
+    defaultValue = null,
+  ) => (
+    <ColumnsSelect
+      defaultValue={defaultValue}
+      fieldName={fieldName}
+      label={label}
+      labelStyle={{
+        textTransform: 'revert',
+        fontFamily: 'inherit',
+        fontWeight: 'inherit',
+      }}
+      placeholder={placeholder}
+      isClearable={true}
+    />
+  );
+
+  useEffect(() => {
+    const allocationLinks = getAllocationLinks(node);
+    if (
+      action.name === 'add' ||
+      (node &&
+        !Array.isArray(node) &&
+        node.length !== 0 &&
+        allocationLinks.length === 0)
+    ) {
+      setAllocationConfigFields(prevFields => ({
+        ...prevFields,
+        [AllocationUnitType.ACCOUNT_ID.name]: {
+          allocationUnit: createColumnsSelect(
+            `${ALLOCATION_LINK_FIELD}.${AllocationUnitType.ACCOUNT_ID.name}.allocation_unit`,
+            `Column that maps to ${AllocationUnitType.ACCOUNT_ID.name.replace(
+              '_',
+              ' ',
+            )}`,
+            'Choose Account ID Column',
+          ),
+          eventTimestamp: createColumnsSelect(
+            `${ALLOCATION_LINK_FIELD}.${AllocationUnitType.ACCOUNT_ID.name}.event_timestamp`,
+            'Event Timestamp Column',
+            'Choose Event Timestamp Column',
+          ),
+        },
+      }));
+    } else {
+      for (const link of allocationLinks) {
+        const allocationUnit = getAllocationUnitColumn(link);
+        const eventTimestamp = getEventTimestampColumn(link);
+
+        setFieldValue(
+          `${ALLOCATION_LINK_FIELD}.${link.name}.allocation_unit`,
+          allocationUnit || '',
+          false,
+        );
+        setFieldValue(
+          `${ALLOCATION_LINK_FIELD}.${link.name}.event_timestamp`,
+          eventTimestamp || '',
+          false,
+        );
+
+        setAllocationConfigFields(prevFields => ({
+          ...prevFields,
+          [link.name]: {
+            allocationUnit: createColumnsSelect(
+              `${ALLOCATION_LINK_FIELD}.${link.name}.allocation_unit`,
+              `Column that maps to ${link.name.replace('_', ' ')}`,
+              'Choose Account ID Column',
+              allocationUnit,
+            ),
+            eventTimestamp: createColumnsSelect(
+              `${ALLOCATION_LINK_FIELD}.${link.name}.event_timestamp`,
+              'Event Timestamp Column',
+              'Choose Event Timestamp Column',
+              eventTimestamp,
+            ),
+          },
+        }));
+      }
+    }
+  }, [node]);
+
+  if (
+    node?.type !== 'transform' &&
+    window.location.pathname.split('/')[2] !== 'transform'
+  ) {
+    return <></>;
+  }
+
+  return (
+    <>
+      {
+        <div
+          style={{
+            borderRadius: '8px',
+            padding: '10px 10px 20px 10px',
+            margin: '32px 0',
+            background: '#f9f9f9',
+            width: 'max-content',
+          }}
+        >
+          <AllocationJoinHeader />
+          {Object.keys(allocationConfigFields).map(unit => (
+            <>
+              <div
+                style={{
+                  backgroundColor: '#ffffff',
+                  borderRadius: '8px',
+                  margin: '15px 25px',
+                  paddingBottom: '10px',
+                  border: '1px solid #ffe2b2',
+                }}
+              >
+                <AllocationUnitTypeHeader unit={unit} />
+                {Object.values(allocationConfigFields[unit])}
+              </div>
+              <AddAllocationJoin />
+            </>
+          ))}
+        </div>
+      }
+    </>
+  );
+};

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/LinkComplexDimensionPopover.jsx

@@ -0,0 +1,141 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { MetricQueryField } from '../AddEditNodePage/MetricQueryField';
+
+export default function LinkComplexDimensionPopover({ link, 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 handleSubmit = async (
+    { node, column, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    if (referencedDimensionNode && dimension === 'Remove') {
+      await unlinkDimension(
+        node,
+        column,
+        referencedDimensionNode,
+        setStatus,
+      ).then(_ => setSubmitting(false));
+    } else {
+      await linkDimension(node, column, dimension, setStatus).then(_ =>
+        setSubmitting(false),
+      );
+    }
+    onSubmit();
+  };
+
+  const linkDimension = async (node, column, dimension, setStatus) => {
+    const response = await djClient.linkDimension(node, column, dimension);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  const unlinkDimension = async (node, column, currentDimension, setStatus) => {
+    const response = await djClient.unlinkDimension(
+      node,
+      column,
+      currentDimension,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Removed dimension link!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="LinkDimension"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={
+            {
+              // column: column.name,
+              // node: node.name,
+              // dimension: '',
+              // currentDimension: referencedDimensionNode,
+            }
+          }
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <label>Join Type</label>
+                  <FormikSelect
+                    selectOptions={[{ value: 'left', label: 'LEFT' }]}
+                    formikFieldName="join_type"
+                    placeholder="Select join type"
+                    className="join_type"
+                    defaultValue={link.join_type || ''}
+                    isMulti={false}
+                  />
+                  {console.log('link, ', link)}
+
+                  <label>Join On</label>
+                  <MetricQueryField
+                    djClient={djClient}
+                    value={link.join_sql ? link.join_sql : ''}
+                  />
+                </span>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveComplexDimension"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : '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`, {