datajunction-ui 0.0.1-a106 → 0.0.1-a107

package/package.json

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

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

@@ -0,0 +1,54 @@
+/**
+ * Owner select field
+ */
+import { ErrorMessage } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const OwnersField = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [availableUsers, setAvailableUsers] = useState([]);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      const users = await djClient.users();
+      setAvailableUsers(
+        users.map(user => {
+          return {
+            value: user.username,
+            label: user.username,
+          };
+        }),
+      );
+      const current = await djClient.whoami();
+      setCurrentUser(current);
+    }
+    fetchData();
+  }, [djClient]);
+
+  return defaultValue || currentUser ? (
+    <div className="NodeCreationInput">
+      <ErrorMessage name="owners" component="span" />
+      <label htmlFor="Owners">Owners</label>
+      <span data-testid="select-owner">
+        <FormikSelect
+          className="MultiSelectInput"
+          defaultValue={
+            defaultValue || [
+              { value: currentUser.username, label: currentUser.username },
+            ]
+          }
+          selectOptions={availableUsers}
+          formikFieldName="owners"
+          placeholder="Select Owners"
+          isMulti={true}
+        />
+      </span>
+    </div>
+  ) : (
+    ''
+  );
+};

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -103,6 +103,11 @@ describe('AddEditNodePage submission succeeded', () => {
       mocks.metricMetadata,
     );
 
+    mockDjClient.DataJunctionAPI.whoami.mockReturnValue({
+      id: 123,
+      username: 'test_user',
+    });
+
     const element = testElement(mockDjClient);
     const { container } = renderCreateMetric(element);
 
@@ -128,7 +133,7 @@ describe('AddEditNodePage submission succeeded', () => {
           'default.some_test_metric',
           'Some Test Metric',
           '',
-          'SELECT SUM(a) FROM default.repair_orders',
+          'SELECT SUM(a) \n FROM default.repair_orders',
           'published',
           'default',
           null,
@@ -195,6 +200,7 @@ describe('AddEditNodePage submission succeeded', () => {
         '',
         '',
         undefined,
+        ['dj'],
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
@@ -233,6 +239,11 @@ describe('AddEditNodePage submission succeeded', () => {
       { name: 'intent', display_name: 'Intent' },
     ]);
 
+    mockDjClient.DataJunctionAPI.whoami.mockReturnValue({
+      id: 123,
+      username: 'test_user',
+    });
+
     const element = testElement(mockDjClient);
     const { getByTestId } = renderEditNode(element);
 
@@ -250,13 +261,14 @@ describe('AddEditNodePage submission succeeded', () => {
         'default.num_repair_orders',
         'Default: Num Repair Orders!!!',
         'Number of repair orders!!!',
-        'SELECT count(repair_order_id) FROM default.repair_orders',
+        'SELECT count(repair_order_id) \n FROM default.repair_orders',
         'published',
         ['repair_order_id', 'country'],
         'neutral',
         'unitless',
         5,
         undefined,
+        ['dj'],
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(

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

@@ -66,6 +66,20 @@ export const initializeMockDJClient = () => {
           { name: 'second', label: 'Second' },
         ],
       }),
+      users: jest.fn().mockReturnValue([
+        {
+          id: 123,
+          username: 'test_user',
+        },
+        {
+          id: 1111,
+          username: 'dj',
+        },
+      ]),
+      whoami: jest.fn().mockReturnValue({
+        id: 123,
+        username: 'test_user',
+      }),
     },
   };
 };

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

@@ -15,6 +15,7 @@ import { displayMessageAfterSubmit } from '../../../utils/form';
 import { NodeQueryField } from './NodeQueryField';
 import { MetricMetadataFields } from './MetricMetadataFields';
 import { UpstreamNodeField } from './UpstreamNodeField';
+import { OwnersField } from './OwnersField';
 import { TagsField } from './TagsField';
 import { NamespaceField } from './NamespaceField';
 import { AlertMessage } from './AlertMessage';
@@ -50,6 +51,7 @@ export function AddEditNodePage({ extensions = {} }) {
     description: '',
     primary_key: '',
     mode: 'published',
+    owners: [],
   };
 
   const validator = values => {
@@ -112,7 +114,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.display_name,
       values.description,
       values.type === 'metric'
-        ? `SELECT ${values.aggregate_expression} FROM ${values.upstream_node}`
+        ? `SELECT ${values.aggregate_expression} \n FROM ${values.upstream_node}`
         : values.query,
       values.mode,
       values.namespace,
@@ -146,7 +148,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.display_name,
       values.description,
       values.type === 'metric'
-        ? `SELECT ${values.aggregate_expression} FROM ${values.upstream_node}`
+        ? `SELECT ${values.aggregate_expression} \n FROM ${values.upstream_node}`
         : values.query,
       values.mode,
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
@@ -154,6 +156,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.metric_unit,
       values.significant_digits,
       values.required_dimensions,
+      values.owners,
     );
     const tagsResponse = await djClient.tagsNode(
       values.name,
@@ -201,6 +204,7 @@ export function AddEditNodePage({ extensions = {} }) {
       query: node.current.query,
       tags: node.tags,
       mode: node.current.mode.toLowerCase(),
+      owners: node.owners,
     };
 
     if (node.type === 'METRIC') {
@@ -244,6 +248,7 @@ export function AddEditNodePage({ extensions = {} }) {
     setSelectPrimaryKey,
     setSelectUpstreamNode,
     setSelectRequiredDims,
+    setSelectOwners,
   ) => {
     // Update fields with existing data to prepare for edit
     const fields = [
@@ -259,6 +264,7 @@ export function AddEditNodePage({ extensions = {} }) {
       'metric_unit',
       'metric_direction',
       'significant_digits',
+      'owners',
     ];
     fields.forEach(field => {
       if (field === 'tags') {
@@ -266,6 +272,11 @@ export function AddEditNodePage({ extensions = {} }) {
           field,
           data[field].map(tag => tag.name),
         );
+      } else if (field === 'owners') {
+        setFieldValue(
+          field,
+          data[field].map(owner => owner.username),
+        );
       } else {
         setFieldValue(field, data[field] || '', false);
       }
@@ -306,6 +317,15 @@ export function AddEditNodePage({ extensions = {} }) {
         }}
       />,
     );
+    if (data.owners) {
+      setSelectOwners(
+        <OwnersField
+          defaultValue={data.owners.map(owner => {
+            return { value: owner.username, label: owner.username };
+          })}
+        />,
+      );
+    }
   };
 
   return (
@@ -345,6 +365,7 @@ export function AddEditNodePage({ extensions = {} }) {
                   useState(null);
                 const [selectUpstreamNode, setSelectUpstreamNode] =
                   useState(null);
+                const [selectOwners, setSelectOwners] = useState(null);
                 const [selectTags, setSelectTags] = useState(null);
                 const [message, setMessage] = useState('');
 
@@ -361,6 +382,7 @@ export function AddEditNodePage({ extensions = {} }) {
                         setSelectPrimaryKey,
                         setSelectUpstreamNode,
                         setSelectRequiredDims,
+                        setSelectOwners,
                       );
                     }
                   };
@@ -393,6 +415,13 @@ export function AddEditNodePage({ extensions = {} }) {
                         )}
                         <br />
                         <br />
+                        {action === Action.Edit ? (
+                          selectOwners
+                        ) : (
+                          <OwnersField />
+                        )}
+                        <br />
+                        <br />
                         {nodeType === 'metric' || node.type === 'metric' ? (
                           <MetricQueryField
                             djClient={djClient}

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

@@ -89,6 +89,26 @@ export default function NodeHistory({ node, djClient }) {
       );
     }
     if (event.activity_type === 'update' && event.entity_type === 'node') {
+      if (event.details?.old_owners) {
+        return (
+          <div className="history-left">
+            <b style={{ textTransform: 'capitalize' }}>Ownership Change</b> for{' '}
+            {event.entity_type}{' '}
+            <b>
+              <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+            </b>
+            <small>
+              {' '}
+              to{' '}
+              {event.details?.new_owners.map(owner => (
+                <span className="badge version" style={{ margin: '2px' }}>
+                  {owner}
+                </span>
+              ))}
+            </small>
+          </div>
+        );
+      }
       return (
         <div className="history-left">
           <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}

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

@@ -256,6 +256,23 @@ export default function NodeInfoTab({ node }) {
     >
       {node?.type === 'metric' ? metricsWarning : ''}
       <ListGroupItem label="Description" value={node?.description} />
+      <div className="list-group-item d-flex">
+        <div className="d-flex gap-2 w-100 justify-content-between py-3">
+          <div>
+            <h6 className="mb-0 w-100">Owners</h6>
+            <p className="mb-0 opacity-75">
+              {node?.owners.map(owner => (
+                <span
+                  className="badge node_type__transform"
+                  style={{ margin: '2px', fontSize: '16px', cursor: 'pointer' }}
+                >
+                  {owner.username}
+                </span>
+              ))}
+            </p>
+          </div>
+        </div>
+      </div>
       <div className="list-group-item d-flex">
         <div className="d-flex gap-2 w-100 justify-content-between py-3">
           <div>

package/src/app/services/DJService.js

@@ -156,6 +156,9 @@ export const DataJunctionAPI = {
             name
             displayName
           }
+          owners {
+            username
+          }
         }
       }
     `;
@@ -323,6 +326,7 @@ export const DataJunctionAPI = {
     metric_unit,
     significant_digits,
     required_dimensions,
+    owners,
   ) {
     try {
       const metricMetadata =
@@ -346,6 +350,7 @@ export const DataJunctionAPI = {
           primary_key: primary_key,
           metric_metadata: metricMetadata,
           required_dimensions: required_dimensions,
+          owners: owners,
         }),
         credentials: 'include',
       });

package/src/mocks/mockNodes.jsx

@@ -57,6 +57,7 @@ export const mocks = {
     dimension_links: [],
     created_at: '2024-01-24T16:39:14.028077+00:00',
     tags: [],
+    owners: [{ username: 'dj' }],
     current_version: 'v1.0',
     missing_table: false,
   },
@@ -104,6 +105,7 @@ export const mocks = {
     ],
     created_at: '2023-08-21T16:48:56.841631+00:00',
     tags: [{ name: 'purpose', display_name: 'Purpose' }],
+    owners: [{ username: 'dj' }],
     dimension_links: [],
     incompatible_druid_functions: ['IF'],
     dimensions: [
@@ -302,6 +304,7 @@ export const mocks = {
       mode: 'PUBLISHED',
     },
     tags: [],
+    owners: [{ username: 'dj' }],
   },
 
   mockGetMetricNode: {
@@ -331,6 +334,7 @@ export const mocks = {
       mode: 'PUBLISHED',
     },
     tags: [{ name: 'purpose', displayName: 'Purpose' }],
+    owners: [{ username: 'dj' }],
   },
 
   mockGetTransformNode: {
@@ -352,6 +356,7 @@ export const mocks = {
       mode: 'PUBLISHED',
     },
     tags: [],
+    owners: [{ username: 'dj' }],
   },
 
   attributes: [
@@ -789,6 +794,7 @@ export const mocks = {
     ],
     created_at: '2023-08-21T16:49:01.671395+00:00',
     tags: [],
+    owners: [{ username: 'dj' }],
   },
   mockCubesCube: {
     node_revision_id: 33,