datajunction-ui 0.0.2-0.dev1 → 0.0.2-3.dev1

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

@@ -1,338 +0,0 @@
-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>
-      }
-    </>
-  );
-};