datajunction-ui 0.0.151 → 0.0.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

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

@@ -1143,21 +1143,38 @@ export function NamespacePage() {
                 namespace={namespace}
                 onGitConfigLoaded={setGitConfig}
               >
-                <a
-                  href={`${getDJUrl()}/namespaces/${namespace}/export/yaml`}
-                  download
+                <button
+                  type="button"
+                  onClick={async () => {
+                    const response = await fetch(
+                      `${getDJUrl()}/namespaces/${namespace}/export/yaml`,
+                      { method: 'POST', credentials: 'include' },
+                    );
+                    if (!response.ok) {
+                      return;
+                    }
+                    const blob = await response.blob();
+                    const url = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    const safeName = namespace.replace(/\./g, '_');
+                    link.href = url;
+                    link.download = `${safeName}_export.zip`;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(url);
+                  }}
                   style={{
                     display: 'inline-flex',
                     alignItems: 'center',
                     gap: '4px',
-                    // padding: '6px 12px',
                     fontSize: '13px',
                     fontWeight: '500',
                     color: '#475569',
-                    // backgroundColor: '#f8fafc',
-                    // border: '1px solid #e2e8f0',
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
                     borderRadius: '6px',
-                    textDecoration: 'none',
                     cursor: 'pointer',
                     transition: 'all 0.15s ease',
                     margin: '0.5em 0px 0px 1em',
@@ -1184,7 +1201,7 @@ export function NamespacePage() {
                     <polyline points="7 10 12 15 17 10"></polyline>
                     <line x1="12" y1="15" x2="12" y2="3"></line>
                   </svg>
-                </a>
+                </button>
                 {showEditControls && <AddNodeDropdown namespace={namespace} />}
               </NamespaceHeader>
 

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

@@ -61,26 +61,74 @@ export default function NodeColumnTab({ node, djClient }) {
   };
 
   const showColumnPartition = col => {
-    if (col.partition) {
-      return (
-        <>
-          <span className="node_type badge node_type__blank">
-            <span className="partition_value badge">
-              <b>Type:</b> {col.partition.type_}
-            </span>
-            <br />
-            <span className="partition_value badge">
-              <b>Format:</b> <code>{col.partition.format}</code>
-            </span>
-            <br />
-            <span className="partition_value badge">
-              <b>Granularity:</b> <code>{col.partition.granularity}</code>
-            </span>
-          </span>
-        </>
-      );
+    if (!col.partition) return '';
+    const isTemporal = col.partition.type_ === 'temporal';
+    const typeLabel =
+      col.partition.type_.charAt(0).toUpperCase() +
+      col.partition.type_.slice(1);
+    const details = [];
+    if (isTemporal) {
+      if (col.partition.granularity) details.push(col.partition.granularity);
+      if (col.partition.format) details.push(col.partition.format);
     }
-    return '';
+    const icon = isTemporal ? (
+      <svg
+        className="partition-cell__icon"
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+        <line x1="16" y1="2" x2="16" y2="6" />
+        <line x1="8" y1="2" x2="8" y2="6" />
+        <line x1="3" y1="10" x2="21" y2="10" />
+      </svg>
+    ) : (
+      <svg
+        className="partition-cell__icon"
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="8" y1="6" x2="21" y2="6" />
+        <line x1="8" y1="12" x2="21" y2="12" />
+        <line x1="8" y1="18" x2="21" y2="18" />
+        <line x1="3" y1="6" x2="3.01" y2="6" />
+        <line x1="3" y1="12" x2="3.01" y2="12" />
+        <line x1="3" y1="18" x2="3.01" y2="18" />
+      </svg>
+    );
+    return (
+      <div className="partition-cell">
+        {icon}
+        <span className="partition-cell__type">{typeLabel}</span>
+        {details.length > 0 ? (
+          <>
+            <span className="partition-cell__dash">—</span>
+            <span className="partition-cell__details">
+              {details.map((d, i) => (
+                <React.Fragment key={i}>
+                  {i > 0 ? ', ' : ''}
+                  <code>{d}</code>
+                </React.Fragment>
+              ))}
+            </span>
+          </>
+        ) : null}
+      </div>
+    );
   };
 
   const columnList = columns => {

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

@@ -2,9 +2,8 @@ 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, labelize } from '../../../utils/form';
+import { displayMessageAfterSubmit } from '../../../utils/form';
 
 export default function PartitionColumnPopover({ column, node, onSubmit }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -43,7 +42,17 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
       });
     }
     onSubmit();
-    // window.location.reload();
+  };
+
+  const removePartition = async setStatus => {
+    const response = await djClient.removePartition(node.name, column.name);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Partition removed' });
+      onSubmit();
+      setPopoverAnchor(false);
+    } else {
+      setStatus({ failure: `${response.json.message}` });
+    }
   };
 
   return (
@@ -59,7 +68,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
         <EditIcon />
       </button>
       <div
-        className="popover"
+        className="popover partition-popover"
         role="dialog"
         aria-label="client-code"
         style={{ display: popoverAnchor === false ? 'none' : 'block' }}
@@ -69,17 +78,23 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
           initialValues={{
             column: column.name,
             node: node.name,
-            partition_type: '',
-            format: 'yyyyMMdd',
-            granularity: 'day',
+            partition_type: column.partition?.type_ ?? '',
+            format: column.partition?.format ?? 'yyyyMMdd',
+            granularity: column.partition?.granularity ?? 'day',
           }}
           onSubmit={savePartition}
         >
-          {function Render({ values, isSubmitting, status, setFieldValue }) {
+          {function Render({ values, isSubmitting, status, setStatus }) {
             return (
               <Form>
+                <div className="popover-header">
+                  <div className="popover-title">Partition column</div>
+                  <div className="popover-subtitle">
+                    {popoverAnchor ? column.name : null}
+                  </div>
+                </div>
                 {displayMessageAfterSubmit(status)}
-                <span data-testid="edit-partition">
+                <div className="field-group" data-testid="edit-partition">
                   <label htmlFor="partitionType">Partition Type</label>
                   <Field
                     as="select"
@@ -91,7 +106,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
                     <option value="temporal">Temporal</option>
                     <option value="categorical">Categorical</option>
                   </Field>
-                </span>
+                </div>
                 <input
                   hidden={true}
                   name="column"
@@ -104,70 +119,60 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
                   value={node.name}
                   readOnly={true}
                 />
-                <br />
-                <br />
                 {values.partition_type === 'temporal' ? (
                   <>
-                    <label htmlFor="partitionFormat">Partition Format</label>
-                    <Field
-                      type="text"
-                      name="format"
-                      id="partitionFormat"
-                      placeholder="Optional temporal partition format (ex: yyyyMMdd)"
-                    />
-                    <br />
-                    <br />
-                    <label htmlFor="partitionGranularity">
-                      Partition Granularity
-                    </label>
-                    <Field
-                      as="select"
-                      name="granularity"
-                      id="partitionGranularity"
-                      placeholder="Granularity"
-                    >
-                      <option value="day">Day</option>
-                      <option value="hour">Hour</option>
-                    </Field>
+                    <div className="field-group">
+                      <label htmlFor="partitionFormat">Partition Format</label>
+                      <Field
+                        type="text"
+                        name="format"
+                        id="partitionFormat"
+                        placeholder="e.g. yyyyMMdd"
+                      />
+                    </div>
+                    <div className="field-group">
+                      <label htmlFor="partitionGranularity">
+                        Partition Granularity
+                      </label>
+                      <Field
+                        as="select"
+                        name="granularity"
+                        id="partitionGranularity"
+                        placeholder="Granularity"
+                      >
+                        <option value="day">Day</option>
+                        <option value="hour">Hour</option>
+                      </Field>
+                    </div>
                   </>
-                ) : (
-                  ''
-                )}
-                <button
-                  className="add_node"
-                  type="submit"
-                  aria-label="SaveEditColumn"
-                  aria-hidden="false"
-                >
-                  Save
-                </button>
-                <button
-                  className="delete_button"
-                  type="button"
-                  aria-label="RemovePartition"
-                  aria-hidden="false"
-                  onClick={() => {
-                    setFieldValue('partition_type', '');
-                    setFieldValue('format', '');
-                    setFieldValue('granularity', '');
-                    savePartition(
-                      {
-                        node: node.name,
-                        column: column.name,
-                        partition_type: '',
-                        format: '',
-                        granularity: '',
-                      },
-                      { setSubmitting: () => {}, setStatus: s => {} },
-                    );
-                  }}
+                ) : null}
+                <div
+                  className="button-row"
                   style={{
-                    marginLeft: '10px',
-                    backgroundColor: '#dc3545',
+                    justifyContent: column.partition
+                      ? 'space-between'
+                      : 'flex-end',
                   }}
                 >
-                  Remove Partition
-                </button>
+                  {column.partition ? (
+                    <button
+                      className="remove-link"
+                      type="button"
+                      aria-label="RemovePartition"
+                      onClick={() => removePartition(setStatus)}
+                    >
+                      Remove partition
+                    </button>
+                  ) : null}
+                  <button
+                    className="add_node"
+                    type="submit"
+                    aria-label="SaveEditColumn"
+                    aria-hidden="false"
+                  >
+                    Save
+                  </button>
+                </div>
               </Form>
             );
           }}

package/src/app/services/DJService.js

@@ -1999,6 +1999,16 @@ export const DataJunctionAPI = {
     );
     return { status: response.status, json: await response.json() };
   },
+  removePartition: async function (nodeName, columnName) {
+    const response = await fetch(
+      `${DJ_URL}/nodes/${nodeName}/columns/${columnName}/partition`,
+      {
+        method: 'DELETE',
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  },
   materialize: async function (nodeName, jobType, strategy, schedule, config) {
     const response = await fetch(
       `${DJ_URL}/nodes/${nodeName}/materialization`,

package/src/styles/index.css

@@ -568,6 +568,47 @@ tbody th {
   background-color: #ccf7e525;
   color: #00b368;
   margin: 0.25rem;
+  font-size: 0.85rem;
+  text-transform: none;
+  padding: 0.35em 0.6em;
+}
+.partition_value code {
+  font-size: 0.9em;
+  color: inherit;
+  background: none;
+  padding: 0;
+}
+.partition-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: #334155;
+  text-transform: none;
+  letter-spacing: 0;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.partition-cell__icon {
+  color: #00794a;
+  flex-shrink: 0;
+}
+.partition-cell__type {
+  font-weight: 600;
+  color: #1e293b;
+}
+.partition-cell__dash {
+  color: #cbd5e1;
+}
+.partition-cell__details {
+  color: #64748b;
+}
+.partition-cell__details code {
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 0.92em;
+  background: none;
+  padding: 0;
+  color: #475569;
 }
 
 .partition_value_highlight {
@@ -1096,6 +1137,87 @@ pre {
   background-color: #f3eeff !important;
 }
 
+.partition-popover {
+  min-width: 260px;
+}
+.partition-popover .popover-header {
+  margin: -4px 0 14px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f1f5f9;
+}
+.partition-popover .popover-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin-bottom: 2px;
+}
+.partition-popover .popover-subtitle {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #1e293b;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+}
+.partition-popover label {
+  display: block;
+  text-transform: none;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #475569;
+  margin-bottom: 4px;
+  letter-spacing: 0.02em;
+}
+.partition-popover select,
+.partition-popover input[type='text'] {
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #d4d4d8;
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 0.875rem;
+  font-family: inherit;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+.partition-popover select:focus,
+.partition-popover input[type='text']:focus {
+  outline: none;
+  border-color: #5d2f86;
+}
+.partition-popover .field-group {
+  margin-bottom: 12px;
+}
+.partition-popover .button-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+  padding-top: 8px;
+  border-top: 1px solid #f1f5f9;
+}
+.partition-popover .button-row .add_node {
+  margin: 0 !important;
+  padding: 6px 14px !important;
+  font-size: 0.875rem !important;
+  border-radius: 6px !important;
+}
+.partition-popover .remove-link {
+  background: none !important;
+  border: none;
+  color: #b91c1c;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 6px !important;
+  text-transform: none;
+  border-radius: 4px;
+}
+.partition-popover .remove-link:hover {
+  background-color: #fef2f2 !important;
+  color: #991b1b;
+}
+
 .add_node {
   background-color: #5d2f86 !important;
   color: #fff;