datajunction-ui 0.0.1-rc.19 → 0.0.1-rc.20

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

@@ -0,0 +1,102 @@
+import { useContext, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function EditColumnPopover({ column, node, options, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+
+  const saveAttributes = async (
+    { node, column, attributes },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setAttributes(node, column, attributes);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    // window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="EditColumn"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            attributes: [],
+          }}
+          onSubmit={saveAttributes}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-attributes">
+                  <FormikSelect
+                    selectOptions={options}
+                    formikFieldName="attributes"
+                    placeholder="Select column attributes"
+                    className=""
+                    defaultValue={column.attributes.map(attr => {
+                      return {
+                        value: attr.attribute_type.name,
+                        label: labelize(attr.attribute_type.name),
+                      };
+                    })}
+                    isMulti={true}
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,135 @@
+import { useContext, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function LinkDimensionPopover({
+  column,
+  node,
+  options,
+  onSubmit,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const columnDimension = column.dimension;
+
+  const handleSubmit = async (
+    { node, column, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    console.log('dimension', dimension, 'columnDimension', columnDimension);
+    if (columnDimension?.name && dimension === 'Remove') {
+      await unlinkDimension(node, column, columnDimension?.name, setStatus);
+    } else {
+      await linkDimension(node, column, dimension, setStatus);
+    }
+    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' }}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            dimension: '',
+            currentDimension: column.dimension?.name,
+          }}
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <FormikSelect
+                    selectOptions={[
+                      { value: 'Remove', label: '[Remove Dimension]' },
+                    ].concat(options)}
+                    formikFieldName="dimension"
+                    placeholder="Select dimension to link"
+                    className=""
+                    defaultValue={
+                      column.dimension
+                        ? {
+                            value: column.dimension.name,
+                            label: column.dimension.name,
+                          }
+                        : ''
+                    }
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveLinkDimension"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -1,7 +1,13 @@
 import { useEffect, useState } from 'react';
 import ClientCodePopover from './ClientCodePopover';
+import * as React from 'react';
+import EditColumnPopover from './EditColumnPopover';
+import LinkDimensionPopover from './LinkDimensionPopover';
+import { labelize } from '../../../utils/form';
 
 export default function NodeColumnTab({ node, djClient }) {
+  const [attributes, setAttributes] = useState([]);
+  const [dimensions, setDimensions] = useState([]);
   const [columns, setColumns] = useState([]);
   useEffect(() => {
     const fetchData = async () => {
@@ -10,12 +16,57 @@ export default function NodeColumnTab({ node, djClient }) {
     fetchData().catch(console.error);
   }, [djClient, node]);
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const attributes = await djClient.attributes();
+      const options = attributes.map(attr => {
+        return { value: attr.name, label: labelize(attr.name) };
+      });
+      setAttributes(options);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const dimensions = await djClient.dimensions();
+      const options = dimensions.map(name => {
+        return { value: name, label: name };
+      });
+      setDimensions(options);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  const showColumnAttributes = col => {
+    return col.attributes.map((attr, idx) => (
+      <span
+        className="node_type__dimension badge node_type"
+        key={`col-attr-${col.name}-${idx}`}
+      >
+        {attr.attribute_type.name.replace(/_/, ' ')}
+      </span>
+    ));
+  };
+
   const columnList = columns => {
     return columns.map(col => (
-      <tr>
-        <td className="text-start">{col.name}</td>
+      <tr key={col.name}>
+        <td
+          className="text-start"
+          role="columnheader"
+          aria-label="ColumnName"
+          aria-hidden="false"
+        >
+          {col.name}
+        </td>
         <td>
-          <span className="node_type__transform badge node_type">
+          <span
+            className="node_type__transform badge node_type"
+            role="columnheader"
+            aria-label="ColumnType"
+            aria-hidden="false"
+          >
             {col.type}
           </span>
         </td>
@@ -28,17 +79,27 @@ export default function NodeColumnTab({ node, djClient }) {
           ) : (
             ''
           )}{' '}
+          <LinkDimensionPopover
+            column={col}
+            node={node}
+            options={dimensions}
+            onSubmit={async () => {
+              const res = await djClient.node(node.name);
+              setColumns(res.columns);
+            }}
+          />
         </td>
         <td>
-          {col.attributes.find(
-            attr => attr.attribute_type.name === 'dimension',
-          ) ? (
-            <span className="node_type__dimension badge node_type">
-              dimensional
-            </span>
-          ) : (
-            ''
-          )}
+          {showColumnAttributes(col)}
+          <EditColumnPopover
+            column={col}
+            node={node}
+            options={attributes}
+            onSubmit={async () => {
+              const res = await djClient.node(node.name);
+              setColumns(res.columns);
+            }}
+          />
         </td>
       </tr>
     ));
@@ -48,12 +109,14 @@ export default function NodeColumnTab({ node, djClient }) {
     <div className="table-responsive">
       <table className="card-inner-table table">
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <th className="text-start">Column</th>
-          <th>Type</th>
-          <th>Dimension</th>
-          <th>Attributes</th>
+          <tr>
+            <th className="text-start">Column</th>
+            <th>Type</th>
+            <th>Linked Dimension</th>
+            <th>Attributes</th>
+          </tr>
         </thead>
-        {columnList(columns)}
+        <tbody>{columnList(columns)}</tbody>
       </table>
     </div>
   );

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

@@ -6,10 +6,12 @@ export default function NodeHistory({ node, djClient }) {
 
   useEffect(() => {
     const fetchData = async () => {
-      const data = await djClient.history('node', node.name);
-      setHistory(data);
-      const revisions = await djClient.revisions(node.name);
-      setRevisions(revisions);
+      if (node) {
+        const data = await djClient.history('node', node.name);
+        setHistory(data);
+        const revisions = await djClient.revisions(node.name);
+        setRevisions(revisions);
+      }
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
@@ -21,20 +23,32 @@ export default function NodeHistory({ node, djClient }) {
     ) {
       return event.details.attributes
         .map(attr => (
-          <div>
+          <div
+            key={event.id}
+            role="cell"
+            aria-label="HistoryAttribute"
+            aria-hidden="false"
+          >
             Set{' '}
-            <span className={`badge partition_value`}>{attr.column_name}</span>{' '}
+            <span className={`badge partition_value`}>
+              {event.details.column}
+            </span>{' '}
             as{' '}
             <span className={`badge partition_value_highlight`}>
-              {attr.attribute_type_name}
+              {attr.name}
             </span>
           </div>
         ))
-        .reduce((prev, curr) => [prev, <br />, curr]);
+        .reduce((prev, curr) => [prev, <br />, curr], []);
     }
     if (event.activity_type === 'create' && event.entity_type === 'link') {
       return (
-        <div>
+        <div
+          key={event.id}
+          role="cell"
+          aria-label="HistoryCreateLink"
+          aria-hidden="false"
+        >
           Linked{' '}
           <span className={`badge partition_value`}>
             {event.details.column}
@@ -55,7 +69,12 @@ export default function NodeHistory({ node, djClient }) {
       event.entity_type === 'materialization'
     ) {
       return (
-        <div>
+        <div
+          key={event.id}
+          role="cell"
+          aria-label="HistoryCreateMaterialization"
+          aria-hidden="false"
+        >
           Initialized materialization{' '}
           <span className={`badge partition_value`}>
             {event.details.materialization}
@@ -68,7 +87,12 @@ export default function NodeHistory({ node, djClient }) {
       event.entity_type === 'availability'
     ) {
       return (
-        <div>
+        <div
+          key={event.id}
+          role="cell"
+          aria-label="HistoryCreateAvailability"
+          aria-hidden="false"
+        >
           Materialized at{' '}
           <span className={`badge partition_value_highlight`}>
             {event.post.catalog}.{event.post.schema_}.{event.post.table}
@@ -97,7 +121,12 @@ export default function NodeHistory({ node, djClient }) {
         </div>
       );
       return (
-        <div>
+        <div
+          key={event.id}
+          role="cell"
+          aria-label="HistoryNodeStatusChange"
+          aria-hidden="false"
+        >
           Status changed from{' '}
           <span className={`status__${event.pre['status']}`}>
             {event.pre['status']}
@@ -111,7 +140,7 @@ export default function NodeHistory({ node, djClient }) {
       );
     }
     return (
-      <div>
+      <div key={event.id}>
         {JSON.stringify(event.details) === '{}'
           ? ''
           : JSON.stringify(event.details)}
@@ -121,7 +150,7 @@ export default function NodeHistory({ node, djClient }) {
 
   const tableData = history => {
     return history.map(event => (
-      <tr>
+      <tr key={`history-row-${event.id}`}>
         <td className="text-start">
           <span
             className={`history_type__${event.activity_type} badge node_type`}
@@ -140,7 +169,7 @@ export default function NodeHistory({ node, djClient }) {
 
   const revisionsTable = revisions => {
     return revisions.map(revision => (
-      <tr>
+      <tr key={revision.version}>
         <td className="text-start">
           <span className={`badge node_type__source`}>{revision.version}</span>
         </td>
@@ -153,26 +182,30 @@ export default function NodeHistory({ node, djClient }) {
   };
   return (
     <div className="table-vertical">
-      <table className="card-inner-table table">
+      <table className="card-inner-table table" aria-label="Revisions">
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <th className="text-start">Version</th>
-          <th>Display Name</th>
-          <th>Description</th>
-          <th>Query</th>
-          <th>Tags</th>
+          <tr>
+            <th className="text-start">Version</th>
+            <th>Display Name</th>
+            <th>Description</th>
+            <th>Query</th>
+            <th>Tags</th>
+          </tr>
         </thead>
-        {revisionsTable(revisions)}
+        <tbody>{revisionsTable(revisions)}</tbody>
       </table>
-      <table className="card-inner-table table">
+      <table className="card-inner-table table" aria-label="Activity">
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <th className="text-start">Activity</th>
-          <th>Type</th>
-          <th>Name</th>
-          <th>User</th>
-          <th>Timestamp</th>
-          <th>Details</th>
+          <tr>
+            <th className="text-start">Activity</th>
+            <th>Type</th>
+            <th>Name</th>
+            <th>User</th>
+            <th>Timestamp</th>
+            <th>Details</th>
+          </tr>
         </thead>
-        {tableData(history)}
+        <tbody>{tableData(history)}</tbody>
       </table>
     </div>
   );

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

@@ -73,7 +73,13 @@ export default function NodeInfoTab({ node }) {
           <h6 className="mb-0 w-100">Cube Elements</h6>
           <div className={`list-group-item`}>
             {node.cube_elements.map(cubeElem => (
-              <div className="button-3 cube-element">
+              <div
+                className="button-3 cube-element"
+                key={cubeElem.name}
+                role="cell"
+                aria-label="CubeElement"
+                aria-hidden="false"
+              >
                 <a href={`/nodes/${cubeElem.node_name}`}>
                   {cubeElem.type === 'metric'
                     ? cubeElem.node_name
@@ -107,6 +113,9 @@ export default function NodeInfoTab({ node }) {
               <span
                 className="rounded-pill badge bg-secondary-soft"
                 style={{ marginLeft: '0.5rem', fontSize: '100%' }}
+                role="dialog"
+                aria-hidden="false"
+                aria-label="Version"
               >
                 {node?.version}
               </span>
@@ -115,7 +124,12 @@ export default function NodeInfoTab({ node }) {
           {node.type === 'source' ? (
             <div>
               <h6 className="mb-0 w-100">Table</h6>
-              <p className="mb-0 opacity-75">
+              <p
+                className="mb-0 opacity-75"
+                role="dialog"
+                aria-hidden="false"
+                aria-label="Table"
+              >
                 {node?.catalog.name}.{node?.schema_}.{node?.table}
               </p>
             </div>
@@ -124,27 +138,58 @@ export default function NodeInfoTab({ node }) {
           )}
           <div>
             <h6 className="mb-0 w-100">Status</h6>
-            <p className="mb-0 opacity-75">
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="NodeStatus"
+            >
               <NodeStatus node={node} />
             </p>
           </div>
           <div>
             <h6 className="mb-0 w-100">Mode</h6>
             <p className="mb-0 opacity-75">
-              <span className="status">{node?.mode}</span>
+              <span
+                className="status"
+                role="dialog"
+                aria-hidden="false"
+                aria-label="Mode"
+              >
+                {node?.mode}
+              </span>
             </p>
           </div>
           <div>
             <h6 className="mb-0 w-100">Tags</h6>
-            <p className="mb-0 opacity-75">{nodeTags}</p>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="Tags"
+            >
+              {nodeTags}
+            </p>
           </div>
           <div>
             <h6 className="mb-0 w-100">Primary Key</h6>
-            <p className="mb-0 opacity-75">{node?.primary_key}</p>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="PrimaryKey"
+            >
+              {node?.primary_key?.join(', ')}
+            </p>
           </div>
           <div>
             <h6 className="mb-0 w-100">Last Updated</h6>
-            <p className="mb-0 opacity-75">
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="UpdatedAt"
+            >
               {new Date(node?.updated_at).toDateString()}
             </p>
           </div>