datajunction-ui 0.0.143 → 0.0.145

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

@@ -1,21 +1,114 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import Select from 'react-select';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import { DataJunctionAPI } from '../../services/DJService';
 import DJClientContext from '../../providers/djclient';
+import { useCurrentUser } from '../../providers/UserProvider';
 import 'react-querybuilder/dist/query-builder.scss';
 import 'styles/styles.scss';
-import { ErrorMessage, Field, Form, Formik } from 'formik';
+import './styles.css';
+import '../QueryPlannerPage/styles.css';
+import { ErrorMessage, FastField, Field, Form, Formik, useField } from 'formik';
 import { displayMessageAfterSubmit } from '../../../utils/form';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Action } from '../../components/forms/Action';
 import NodeNameField from '../../components/forms/NodeNameField';
 import { MetricsSelect } from './MetricsSelect';
 import { DimensionsSelect } from './DimensionsSelect';
-import { TagsField } from '../AddEditNodePage/TagsField';
-import { OwnersField } from '../AddEditNodePage/OwnersField';
+import { CubePreviewPanel } from './CubePreviewPanel';
+
+// Description textarea using FastField so typing here doesn't trigger
+// re-renders of unrelated form sections (heavy ones like the SQL preview).
+const DescriptionField = () => (
+  <FastField
+    as="textarea"
+    id="Description"
+    name="description"
+    placeholder="Describe your cube"
+  />
+);
+
+// Simple Tags select matching MetricsSelect styling
+const CubeTagsSelect = ({ defaultValue }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [field, , helpers] = useField('tags');
+  const [options, setOptions] = useState([]);
+  const [selected, setSelected] = useState(defaultValue || []);
+
+  useEffect(() => {
+    djClient.listTags().then(tags => {
+      setOptions(tags.map(t => ({ value: t.name, label: t.display_name })));
+    });
+  }, [djClient]);
+
+  useEffect(() => {
+    if (defaultValue) setSelected(defaultValue);
+  }, [defaultValue]);
+
+  const handleChange = sel => {
+    setSelected(sel || []);
+    helpers.setValue((sel || []).map(s => s.value));
+  };
+
+  return (
+    <Select
+      value={selected}
+      options={options}
+      onChange={handleChange}
+      isMulti
+      placeholder="Select tags..."
+    />
+  );
+};
+
+// Simple Owners select matching MetricsSelect styling
+const CubeOwnersSelect = ({ defaultValue, isEdit = false }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { currentUser } = useCurrentUser();
+  const [field, , helpers] = useField('owners');
+  const [options, setOptions] = useState([]);
+  const [selected, setSelected] = useState(defaultValue || []);
+
+  useEffect(() => {
+    djClient.users().then(users => {
+      setOptions(users.map(u => ({ value: u.username, label: u.username })));
+    });
+  }, [djClient]);
+
+  // Only auto-default to current user in Add mode; in Edit mode wait for defaultValue
+  useEffect(() => {
+    if (defaultValue) {
+      setSelected(defaultValue);
+      helpers.setValue(defaultValue.map(d => d.value));
+    } else if (!isEdit && currentUser) {
+      const def = [
+        { value: currentUser.username, label: currentUser.username },
+      ];
+      setSelected(def);
+      helpers.setValue([currentUser.username]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue, currentUser, isEdit]);
+
+  const handleChange = sel => {
+    setSelected(sel || []);
+    helpers.setValue((sel || []).map(s => s.value));
+  };
+
+  return (
+    <Select
+      value={selected}
+      options={options}
+      onChange={handleChange}
+      isMulti
+      placeholder="Select owners..."
+    />
+  );
+};
 
 export function CubeBuilderPage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const navigate = useNavigate();
 
   let { nodeType, initialNamespace, name } = useParams();
   const action = name !== undefined ? Action.Edit : Action.Add;
@@ -64,12 +157,8 @@ export function CubeBuilderPage() {
         await djClient.tagsNode(values.name, values.tags);
       }
       setStatus({
-        success: (
-          <>
-            Successfully created {json.type} node{' '}
-            <a href={`/nodes/${json.name}`}>{json.name}</a>!
-          </>
-        ),
+        success: true,
+        savedName: json.name,
       });
     } else {
       setStatus({
@@ -95,12 +184,8 @@ export function CubeBuilderPage() {
     );
     if ((status === 200 || status === 201) && tagsResponse.status === 200) {
       setStatus({
-        success: (
-          <>
-            Successfully updated {json.type} node{' '}
-            <a href={`/nodes/${json.name}`}>{json.name}</a>!
-          </>
-        ),
+        success: true,
+        savedName: json.name,
       });
     } else {
       setStatus({
@@ -122,61 +207,50 @@ export function CubeBuilderPage() {
       'tags',
       data.tags.map(tag => tag.name),
     );
-    // For react-select fields, we have to explicitly set the entire
-    // field rather than just the values
+    // Store default values as arrays for the Select components
     setSelectTags(
-      <TagsField
-        defaultValue={data.tags.map(t => {
-          return { value: t.name, label: t.displayName };
-        })}
-      />,
+      data.tags.map(t => ({ value: t.name, label: t.displayName })),
     );
     if (data.owners) {
       setSelectOwners(
-        <OwnersField
-          defaultValue={data.owners.map(owner => {
-            return { value: owner.username, label: owner.username };
-          })}
-        />,
+        data.owners.map(owner => ({
+          value: owner.username,
+          label: owner.username,
+        })),
       );
     }
   };
 
-  const staticFieldsInEdit = () => (
-    <>
-      <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Name</label> {name}
-      </div>
-      <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Type</label> cube
-      </div>
-      <div className="DisplayNameInput NodeCreationInput">
-        <ErrorMessage name="display_name" component="span" />
-        <label htmlFor="displayName">Display Name</label>
-        <Field
-          type="text"
-          name="display_name"
-          id="displayName"
-          placeholder="Human readable display name"
-        />
-      </div>
-    </>
-  );
-
   // @ts-ignore
   return (
     <>
       <div className="mid">
-        <NamespaceHeader namespace="" />
+        <NamespaceHeader
+          namespace={
+            initialNamespace
+              ? initialNamespace
+              : name
+              ? name.substring(0, name.lastIndexOf('.'))
+              : ''
+          }
+        />
         <Formik
           initialValues={initialValues}
           validate={validator}
           onSubmit={handleSubmit}
         >
-          {function Render({ isSubmitting, status, setFieldValue, props }) {
+          {function Render({
+            isSubmitting,
+            status,
+            setFieldValue,
+            values,
+            props,
+          }) {
             const [node, setNode] = useState([]);
             const [selectTags, setSelectTags] = useState(null);
             const [selectOwners, setSelectOwners] = useState(null);
+            const [justSaved, setJustSaved] = useState(false);
+            const [saveError, setSaveError] = useState(null);
 
             // Get cube
             useEffect(() => {
@@ -195,86 +269,254 @@ export function CubeBuilderPage() {
               fetchData().catch(console.error);
             }, [setFieldValue]);
 
+            // Stable callbacks so the memoized child components don't re-render
+            // on every Formik state change (e.g. typing in display_name).
+            const setMetrics = useCallback(
+              v => setFieldValue('metrics', v),
+              [setFieldValue],
+            );
+            const setDimensions = useCallback(
+              v => setFieldValue('dimensions', v),
+              [setFieldValue],
+            );
+
+            // Briefly show "Saved" state on the button, then redirect to the cube page
+            useEffect(() => {
+              if (status?.success) {
+                setJustSaved(true);
+                setSaveError(null);
+                const savedName = status.savedName;
+                const timer = setTimeout(() => {
+                  if (savedName) {
+                    navigate(`/nodes/${savedName}`);
+                  }
+                }, 1200);
+                return () => clearTimeout(timer);
+              }
+              if (status?.failure) {
+                setSaveError(status.failure);
+                setJustSaved(false);
+              }
+            }, [status, navigate]);
+
             return (
-              <Form>
-                <div className="card">
-                  <div className="card-header">
-                    <h2>
-                      {action === Action.Edit ? 'Edit' : 'Create'}{' '}
-                      <span
-                        className={`node_type__cube node_type_creation_heading`}
-                      >
-                        Cube
-                      </span>
-                    </h2>
-                    {displayMessageAfterSubmit(status)}
-                    {action === Action.Add ? (
-                      <NodeNameField />
-                    ) : (
-                      staticFieldsInEdit(node)
-                    )}
-                    <div className="DescriptionInput NodeCreationInput">
-                      <ErrorMessage name="description" component="span" />
-                      <label htmlFor="Description">Description</label>
-                      <Field
-                        type="textarea"
-                        as="textarea"
-                        name="description"
-                        id="Description"
-                        placeholder="Describe your node"
-                      />
-                    </div>
-                    <div className="CubeCreationInput">
-                      <label>Metrics *</label>
-                      <p>Select metrics to include in the cube.</p>
-                      <span
-                        data-testid="select-metrics"
-                        style={{ marginTop: '15px' }}
-                      >
-                        {action === Action.Edit ? (
-                          <MetricsSelect cube={node} />
+              <Form className="cube-builder">
+                {/* Header */}
+                <div className="cube-builder-header">
+                  <h2>
+                    {action === Action.Edit ? 'Edit' : 'Create'}{' '}
+                    <span className="node_type__cube node_type_creation_heading">
+                      Cube
+                    </span>
+                  </h2>
+                </div>
+
+                {/* Two-column layout */}
+                <div className="cube-builder-layout">
+                  {/* Left: Main form */}
+                  <div className="cube-builder-main">
+                    {/* Details Section */}
+                    <div className="cube-form-section">
+                      <div className="cube-form-section-body">
+                        {action === Action.Add ? (
+                          <>
+                            {/* Add mode uses NodeNameField for namespace/name */}
+                            <NodeNameField />
+
+                            {/* Row: Description | Mode */}
+                            <div className="cube-field-row">
+                              <div className="cube-field cube-field-grow">
+                                <ErrorMessage
+                                  name="description"
+                                  component="span"
+                                />
+                                <label
+                                  className="cube-field-label"
+                                  htmlFor="Description"
+                                >
+                                  Description
+                                </label>
+                                <DescriptionField />
+                              </div>
+                              <div className="cube-field cube-field-small">
+                                <label
+                                  className="cube-field-label"
+                                  htmlFor="Mode"
+                                >
+                                  Mode
+                                </label>
+                                <Field as="select" name="mode" id="Mode">
+                                  <option value="draft">Draft</option>
+                                  <option value="published">Published</option>
+                                </Field>
+                              </div>
+                            </div>
+
+                            {/* Row: Tags | Owners */}
+                            <div className="cube-field-row">
+                              <div className="cube-field cube-field-half">
+                                <label className="cube-field-label">Tags</label>
+                                <CubeTagsSelect />
+                              </div>
+                              <div className="cube-field cube-field-half">
+                                <label className="cube-field-label">
+                                  Owners
+                                </label>
+                                <CubeOwnersSelect />
+                              </div>
+                            </div>
+                          </>
                         ) : (
-                          <MetricsSelect />
+                          <>
+                            {/* Row 1: Name (full width) */}
+                            <div className="cube-field">
+                              <label className="cube-field-label">Name</label>
+                              <div className="cube-field-static">{name}</div>
+                            </div>
+
+                            {/* Row 2: Display Name | Mode */}
+                            <div className="cube-field-row">
+                              <div className="cube-field cube-field-grow">
+                                <ErrorMessage
+                                  name="display_name"
+                                  component="span"
+                                />
+                                <label
+                                  className="cube-field-label"
+                                  htmlFor="displayName"
+                                >
+                                  Display Name
+                                </label>
+                                <FastField
+                                  type="text"
+                                  name="display_name"
+                                  id="displayName"
+                                  placeholder="Human readable name"
+                                />
+                              </div>
+                              <div className="cube-field cube-field-small">
+                                <label
+                                  className="cube-field-label"
+                                  htmlFor="Mode"
+                                >
+                                  Mode
+                                </label>
+                                <Field as="select" name="mode" id="Mode">
+                                  <option value="draft">Draft</option>
+                                  <option value="published">Published</option>
+                                </Field>
+                              </div>
+                            </div>
+
+                            {/* Row 3: Description (full width) */}
+                            <div className="cube-field">
+                              <ErrorMessage
+                                name="description"
+                                component="span"
+                              />
+                              <label
+                                className="cube-field-label"
+                                htmlFor="Description"
+                              >
+                                Description
+                              </label>
+                              <DescriptionField />
+                            </div>
+
+                            {/* Row 4: Tags | Owners */}
+                            <div className="cube-field-row">
+                              <div className="cube-field cube-field-half">
+                                <label className="cube-field-label">Tags</label>
+                                <CubeTagsSelect defaultValue={selectTags} />
+                              </div>
+                              <div className="cube-field cube-field-half">
+                                <label className="cube-field-label">
+                                  Owners
+                                </label>
+                                <CubeOwnersSelect
+                                  defaultValue={selectOwners}
+                                  isEdit={true}
+                                />
+                              </div>
+                            </div>
+                          </>
                         )}
-                      </span>
+                      </div>
                     </div>
-                    <br />
-                    <br />
-                    <div className="CubeCreationInput">
-                      <label>Dimensions *</label>
-                      <p>
-                        Select dimensions to include in the cube. As metrics are
-                        selected above, the list of available dimensions will be
-                        filtered to those shared by the selected metrics. If the
-                        dimensions list is empty, no shared dimensions were
-                        discovered.
-                      </p>
-                      <span data-testid="select-dimensions">
-                        {action === Action.Edit ? (
-                          <DimensionsSelect cube={node} />
+
+                    {/* Metrics Section */}
+                    <div className="cube-form-section">
+                      <div className="cube-form-section-header">
+                        <h3>Metrics</h3>
+                      </div>
+                      <div className="cube-form-section-body">
+                        <div data-testid="select-metrics">
+                          {action === Action.Edit ? (
+                            <MetricsSelect cube={node} onChange={setMetrics} />
+                          ) : (
+                            <MetricsSelect onChange={setMetrics} />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Dimensions Section */}
+                    <div className="cube-form-section">
+                      <div className="cube-form-section-header">
+                        <h3>Dimensions</h3>
+                      </div>
+                      <div className="cube-form-section-body">
+                        <div data-testid="select-dimensions">
+                          {action === Action.Edit ? (
+                            <DimensionsSelect
+                              cube={node}
+                              metrics={values.metrics}
+                              onChange={setDimensions}
+                            />
+                          ) : (
+                            <DimensionsSelect
+                              metrics={values.metrics}
+                              onChange={setDimensions}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Right: Sidebar */}
+                  <div className="cube-builder-sidebar">
+                    <CubePreviewPanel
+                      metrics={values.metrics}
+                      dimensions={values.dimensions}
+                    />
+
+                    <div className="cube-settings">
+                      {saveError && (
+                        <div className="save-error-message">{saveError}</div>
+                      )}
+                      <button
+                        type="submit"
+                        disabled={isSubmitting || justSaved}
+                        aria-label="CreateCube"
+                        className={`save-cube-btn${
+                          justSaved ? ' save-cube-btn--saved' : ''
+                        }${isSubmitting ? ' save-cube-btn--loading' : ''}`}
+                      >
+                        {isSubmitting ? (
+                          <>
+                            <span className="save-spinner" aria-hidden="true" />
+                            Saving...
+                          </>
+                        ) : justSaved ? (
+                          '✓ Saved'
+                        ) : action === Action.Add ? (
+                          'Create Cube'
                         ) : (
-                          <DimensionsSelect />
+                          'Save'
                         )}
-                      </span>
-                    </div>
-                    <div className="NodeModeInput NodeCreationInput">
-                      <ErrorMessage name="mode" component="span" />
-                      <label htmlFor="Mode">Mode</label>
-                      <Field as="select" name="mode" id="Mode">
-                        <option value="draft">Draft</option>
-                        <option value="published">Published</option>
-                      </Field>
+                      </button>
                     </div>
-                    {action === Action.Edit ? selectTags : <TagsField />}
-                    {action === Action.Edit ? selectOwners : <OwnersField />}
-                    <button
-                      type="submit"
-                      disabled={isSubmitting}
-                      aria-label="CreateCube"
-                    >
-                      {action === Action.Add ? 'Create Cube' : 'Save'}{' '}
-                      {nodeType}
-                    </button>
                   </div>
                 </div>
               </Form>