datajunction-ui 0.0.1-a1 → 0.0.1-a101

package/src/app/components/__tests__/__snapshots__/ListGroupItem.test.tsx.snap

@@ -19,9 +19,11 @@ exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
         className="mb-0 opacity-75"
         role="dialog"
       >
-        <span>
-          Something
-        </span>
+        <Markdown>
+          <span>
+            Something
+          </span>
+        </Markdown>
       </p>
     </div>
   </div>

package/src/app/components/djgraph/Collapse.jsx

@@ -5,6 +5,7 @@ import { DJNodeColumns } from './DJNodeColumns';
 export default function Collapse({ collapsed, text, data }) {
   const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
 
+  const limit = 5;
   return (
     <>
       <div className="collapse">
@@ -26,11 +27,11 @@ export default function Collapse({ collapsed, text, data }) {
         >
           {data.type !== 'metric'
             ? isCollapsed
-              ? DJNodeColumns({ data: data, limit: 10 })
+              ? DJNodeColumns({ data: data, limit: limit })
               : DJNodeColumns({ data: data, limit: 100 })
             : DJNodeDimensions(data)}
         </div>
-        {data.type !== 'metric' && data.column_names.length > 10 ? (
+        {data.type !== 'metric' && data.column_names.length > limit ? (
           <button
             className="collapse-button"
             onClick={() => setIsCollapsed(!isCollapsed)}

package/src/app/components/djgraph/DJNode.jsx

@@ -68,7 +68,7 @@ export function DJNode({ id, data }) {
             {data.type === 'source' ? data.table : data.display_name}
           </a>
           <Collapse
-            collapsed={true}
+            collapsed={data.is_current && data.type != 'metric' ? false : true}
             text={data.type !== 'metric' ? 'columns' : 'dimensions'}
             data={data}
           />

package/src/app/components/djgraph/DJNodeColumns.jsx

@@ -33,7 +33,11 @@ export function DJNodeColumns({ data, limit }) {
   };
   return data.column_names.slice(0, limit).map(col => (
     <div
-      className={'custom-node-subheader node_type__' + data.type}
+      className={
+        'custom-node-subheader node_type__' +
+        data.type +
+        (col.order <= 0 ? ' custom-node-emphasis' : '')
+      }
       key={`${data.name}.${col.name}`}
     >
       <div style={handleWrapperStyle}>

package/src/app/components/djgraph/LayoutFlow.jsx

@@ -32,8 +32,10 @@ const getLayoutedElements = (
   const nodeHeightTracker = {};
 
   nodes.forEach(node => {
-    nodeHeightTracker[node.id] =
-      Math.min(node.data.column_names.length, 10) * 40 + 250;
+    const minColumnsLength = node.data.column_names.filter(
+      col => col.order > 0,
+    ).length;
+    nodeHeightTracker[node.id] = Math.min(minColumnsLength, 5) * 40 + 250;
     dagreGraph.setNode(node.id, {
       width: nodeWidth,
       height: nodeHeightTracker[node.id],
@@ -52,7 +54,7 @@ const getLayoutedElements = (
     node.sourcePosition = isHorizontal ? 'right' : 'bottom';
     node.position = {
       x: nodeWithPosition.x - nodeWidth / 2,
-      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 2,
+      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 3,
     };
     node.width = nodeWidth;
     node.height = nodeHeightTracker[node.id];

package/src/app/components/forms/Action.jsx

@@ -0,0 +1,8 @@
+export class Action {
+  static Add = new Action('add');
+  static Edit = new Action('edit');
+
+  constructor(name) {
+    this.name = name;
+  }
+}

package/src/app/components/forms/NodeNameField.jsx

@@ -0,0 +1,64 @@
+import { ErrorMessage, Field } from 'formik';
+import { FormikSelect } from '../../pages/AddEditNodePage/FormikSelect';
+import { FullNameField } from '../../pages/AddEditNodePage/FullNameField';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { useParams } from 'react-router-dom';
+
+/*
+ * This component creates the namespace selector, display name input, and
+ * derived name fields in a form. It can be reused any time we need to create
+ * a new node.
+ */
+
+export default function NodeNameField() {
+  const [namespaces, setNamespaces] = useState([]);
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  let { initialNamespace } = useParams();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      setNamespaces(
+        namespaces.map(m => ({
+          value: m['namespace'],
+          label: m['namespace'],
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.metrics]);
+
+  return (
+    <>
+      <div className="NamespaceInput">
+        <ErrorMessage name="namespace" component="span" />
+        <label htmlFor="namespace">Namespace *</label>
+        <FormikSelect
+          selectOptions={namespaces}
+          formikFieldName="namespace"
+          placeholder="Choose Namespace"
+          defaultValue={{
+            value: initialNamespace,
+            label: initialNamespace,
+          }}
+        />
+      </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>
+      <div className="FullNameInput NodeCreationInput">
+        <ErrorMessage name="name" component="span" />
+        <label htmlFor="FullName">Full Name</label>
+        <FullNameField type="text" name="name" />
+      </div>
+    </>
+  );
+}

package/src/app/components/search.css

@@ -0,0 +1,17 @@
+.search-box {
+  display: flex;
+  height: 50%;
+}
+
+.search-results {
+  position: absolute;
+  z-index: 1000;
+  width: 75%;
+  background-color: rgba(244, 244, 244, 0.8);
+  border-radius: 1rem;
+}
+
+.search-result-item {
+  text-decoration: wavy;
+  padding: 0.5rem;
+}

package/src/app/icons/AddItemIcon.jsx

@@ -0,0 +1,16 @@
+const AddItemIcon = props => (
+  <svg
+    enableBackground="new 0 0 512 512"
+    height="20px"
+    id="Layer_1"
+    version="1.1"
+    viewBox="0 0 512 512"
+    width="20px"
+    xmlSpace="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <path d="M256,512C114.625,512,0,397.391,0,256C0,114.609,114.625,0,256,0c141.391,0,256,114.609,256,256  C512,397.391,397.391,512,256,512z M256,64C149.969,64,64,149.969,64,256s85.969,192,192,192c106.047,0,192-85.969,192-192  S362.047,64,256,64z M288,384h-64v-96h-96v-64h96v-96h64v96h96v64h-96V384z" />
+  </svg>
+);
+export default AddItemIcon;

package/src/app/icons/CommitIcon.jsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+const CommitIcon = props => (
+  <svg
+    width="2em"
+    height="2em"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="none" height="256" width="256" />
+    <circle
+      cx="128"
+      cy="128"
+      fill="none"
+      r="52"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <line
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+      x1="8"
+      x2="76"
+      y1="128"
+      y2="128"
+    />
+    <line
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+      x1="180"
+      x2="248"
+      y1="128"
+      y2="128"
+    />
+  </svg>
+);
+export default CommitIcon;

package/src/app/icons/DiffIcon.jsx

@@ -0,0 +1,63 @@
+const DiffIcon = props => (
+  <svg
+    width="2em"
+    height="2em"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="none" height="256" width="256" />
+    <circle
+      cx="196"
+      cy="188"
+      fill="none"
+      r="28"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <path
+      d="M196,160V119.9a48.2,48.2,0,0,0-14.1-34L144,48"
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <polyline
+      fill="none"
+      points="144 88 144 48 184 48"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <circle
+      cx="60"
+      cy="68"
+      fill="none"
+      r="28"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <path
+      d="M60,96v40.1a48.2,48.2,0,0,0,14.1,34L112,208"
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+    <polyline
+      fill="none"
+      points="112 168 112 208 72 208"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="12"
+    />
+  </svg>
+);
+export default DiffIcon;

package/src/app/icons/EyeIcon.jsx

@@ -0,0 +1,20 @@
+const EyeIcon = props => (
+  <svg
+    className="feather feather-eye"
+    fill="none"
+    height="24"
+    width="24"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+
+export default EyeIcon;

package/src/app/icons/FilterIcon.jsx

@@ -0,0 +1,7 @@
+const FilterIcon = props => (
+  <svg height="23px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 36h8v-4h-8v4zm-14-24v4h36v-4h-36zm6 14h24v-4h-24v4z" />
+    <path d="M0 0h48v48h-48z" fill="none" />
+  </svg>
+);
+export default FilterIcon;

package/src/app/icons/JupyterExportIcon.jsx

@@ -0,0 +1,25 @@
+const JupyterExportIcon = props => (
+  <svg
+    className="feather feather-jupyter-export"
+    fill="none"
+    height="24"
+    width="24"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    {/* Notebook outline */}
+    <rect x="3" y="2" width="14" height="20" rx="2" ry="2" />
+
+    {/* Notebook lines */}
+    <line x1="7" y1="6" x2="13" y2="6" />
+    <line x1="7" y1="10" x2="13" y2="10" />
+    <line x1="7" y1="14" x2="13" y2="14" />
+  </svg>
+);
+
+export default JupyterExportIcon;

package/src/app/icons/LoadingIcon.jsx

@@ -1,14 +1,14 @@
 import '../../styles/loading.css';
 
-export default function LoadingIcon() {
-  return (
-    <center>
-      <div class="lds-ring">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </center>
+export default function LoadingIcon({ centered = true }) {
+  const content = (
+    <div className="lds-ring">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
   );
+
+  return centered ? <center>{content}</center> : content;
 }

package/src/app/icons/PythonIcon.jsx

@@ -1,51 +1,13 @@
 const PythonIcon = props => (
   <svg
-    width="45px"
-    height="45px"
-    viewBox="0 0 64 64"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="24"
+    height="24"
+    viewBox="0 0 48 48"
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-    <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></g>
-    <g id="SVGRepo_iconCarrier">
-      <path
-        d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454c.771 0 1.395.624 1.395 1.395s-.624 1.395-1.395 1.395a1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z"
-        fill="url(#a)"
-      ></path>
-      <path
-        d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395c0-.77.624-1.394 1.395-1.394s1.395.623 1.395 1.394c0 .772-.624 1.395-1.395 1.395z"
-        fill="url(#b)"
-      ></path>
-      <defs>
-        <linearGradient
-          id="a"
-          x1="19.075"
-          y1="18.782"
-          x2="34.898"
-          y2="34.658"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#387EB8"></stop>
-          <stop offset="1" stopColor="#366994"></stop>
-        </linearGradient>
-        <linearGradient
-          id="b"
-          x1="28.809"
-          y1="28.882"
-          x2="45.803"
-          y2="45.163"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#FFE052"></stop>
-          <stop offset="1" stopColor="#FFC331"></stop>
-        </linearGradient>
-      </defs>
-    </g>
+    <path d="M 24 3 C 20.271429 3 18.240267 3.9470561 16.792969 4.5742188 L 16.791016 4.5742188 C 15.488673 5.1421213 14.704771 6.3187748 14.365234 7.4296875 C 14.025697 8.5406002 14 9.6506515 14 10.640625 L 14 14 L 10.640625 14 C 9.6506515 14 8.5406002 14.0257 7.4296875 14.365234 C 6.3187748 14.704771 5.1421212 15.488626 4.5742188 16.791016 L 4.5742188 16.792969 C 3.947056 18.24022 3 20.271429 3 24 C 3 27.728571 3.9470561 29.759733 4.5742188 31.207031 L 4.5742188 31.208984 C 5.1421212 32.511374 6.3187748 33.295229 7.4296875 33.634766 C 8.5406002 33.974256 9.6506515 34 10.640625 34 L 14 34 L 14 37.359375 C 14 38.349349 14.0257 39.459401 14.365234 40.570312 C 14.704771 41.681225 15.488626 42.857879 16.791016 43.425781 L 16.792969 43.425781 C 18.24022 44.052944 20.271429 45 24 45 C 27.728571 45 29.759733 44.052944 31.207031 43.425781 L 31.208984 43.425781 C 32.511374 42.857879 33.295229 41.681225 33.634766 40.570312 C 33.974256 39.459401 34 38.349349 34 37.359375 L 34 34 L 37.359375 34 C 38.349349 34 39.459401 33.9743 40.570312 33.634766 C 41.681225 33.295229 42.857879 32.511374 43.425781 31.208984 L 43.425781 31.207031 C 44.052944 29.75978 45 27.728571 45 24 C 45 20.271429 44.052944 18.240267 43.425781 16.792969 L 43.425781 16.791016 C 42.857879 15.488673 41.681225 14.704771 40.570312 14.365234 C 39.459401 14.025697 38.349349 14 37.359375 14 L 34 14 L 34 10.640625 C 34 9.6506515 33.974303 8.5406002 33.634766 7.4296875 C 33.295229 6.3187748 32.511374 5.1421213 31.208984 4.5742188 L 31.207031 4.5742188 C 29.75978 3.9470561 27.728571 3 24 3 z M 24 6 C 27.268623 6 28.459017 6.6519922 30.009766 7.3242188 C 30.427376 7.5063161 30.590162 7.7325533 30.765625 8.3066406 C 30.941088 8.8807279 31 9.7405985 31 10.640625 L 31 15.253906 A 1.50015 1.50015 0 0 0 31 15.740234 L 31 19 C 31 20.950062 29.450062 22.5 27.5 22.5 L 20.5 22.5 C 16.928062 22.5 14 25.428062 14 29 L 14 31 L 10.640625 31 C 9.7405985 31 8.8807279 30.941088 8.3066406 30.765625 C 7.7325533 30.590162 7.5063162 30.427376 7.3242188 30.009766 C 6.6519921 28.459017 6 27.268623 6 24 C 6 20.731377 6.6519921 19.540983 7.3242188 17.990234 C 7.5063161 17.572624 7.7325533 17.409838 8.3066406 17.234375 C 8.8807279 17.058912 9.7405985 17 10.640625 17 L 23.5 17 A 1.50015 1.50015 0 1 0 23.5 14 L 17 14 L 17 10.640625 C 17 9.7405985 17.058912 8.8807279 17.234375 8.3066406 C 17.409838 7.7325533 17.572624 7.5063162 17.990234 7.3242188 C 19.540983 6.6519921 20.731377 6 24 6 z M 20.5 9 A 1.5 1.5 0 0 0 20.5 12 A 1.5 1.5 0 0 0 20.5 9 z M 34 17 L 37.359375 17 C 38.259401 17 39.119272 17.05891 39.693359 17.234375 C 40.267447 17.409838 40.493684 17.572624 40.675781 17.990234 C 41.348008 19.540983 42 20.731377 42 24 C 42 27.268623 41.348008 28.459017 40.675781 30.009766 C 40.493684 30.427376 40.267447 30.590162 39.693359 30.765625 C 39.119272 30.941088 38.259401 31 37.359375 31 L 24.5 31 A 1.50015 1.50015 0 1 0 24.5 34 L 31 34 L 31 37.359375 C 31 38.259401 30.94109 39.119272 30.765625 39.693359 C 30.590162 40.267447 30.427376 40.493684 30.009766 40.675781 C 28.459017 41.348008 27.268623 42 24 42 C 20.731377 42 19.540983 41.348008 17.990234 40.675781 C 17.572624 40.493684 17.409838 40.267447 17.234375 39.693359 C 17.058912 39.119272 17 38.259401 17 37.359375 L 17 29 C 17 27.049938 18.549938 25.5 20.5 25.5 L 27.5 25.5 C 31.071938 25.5 34 22.571938 34 19 L 34 17 z M 27.5 36 A 1.5 1.5 0 0 0 27.5 39 A 1.5 1.5 0 0 0 27.5 36 z"></path>
   </svg>
 );
 

package/src/app/index.tsx

@@ -9,7 +9,9 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
+import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
+import { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';
 import { TagPage } from './pages/TagPage/Loadable';
 import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
 import { AddEditTagPage } from './pages/AddEditTagPage/Loadable';
@@ -52,6 +54,16 @@ export function App() {
                           key="edit"
                           element={<AddEditNodePage />}
                         />
+                        <Route
+                          path=":name/edit-cube"
+                          key="edit-cube"
+                          element={<CubeBuilderPage />}
+                        />
+                        <Route
+                          path=":name/revisions/:revision"
+                          element={<RevisionDiff />}
+                        />
+                        <Route path=":name/:tab" element={<NodePage />} />
                       </Route>
 
                       <Route path="/" element={<NamespacePage />} key="index" />
@@ -72,6 +84,18 @@ export function App() {
                         key="register"
                         element={<RegisterTablePage />}
                       ></Route>
+                      <Route path="/create/cube">
+                        <Route
+                          path=":initialNamespace"
+                          key="create"
+                          element={<CubeBuilderPage />}
+                        />
+                        <Route
+                          path=""
+                          key="create"
+                          element={<CubeBuilderPage />}
+                        />
+                      </Route>
                       <Route path="create/:nodeType">
                         <Route
                           path=":initialNamespace"

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

@@ -0,0 +1,10 @@
+import AlertIcon from '../../icons/AlertIcon';
+
+export const AlertMessage = ({ message }) => {
+  return (
+    <div className="message alert">
+      <AlertIcon />
+      {message}
+    </div>
+  );
+};

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

@@ -0,0 +1,84 @@
+/**
+ * Component for selecting node columns based on the current form state
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const ColumnsSelect = ({
+  defaultValue,
+  fieldName,
+  label,
+  labelStyle = {},
+  isMulti = false,
+  isClearable = true,
+}) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // Fetch columns by validating the latest node query
+  const fetchColumns = async () => {
+    try {
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      if (json?.columns) {
+        setAvailableColumns(
+          json.columns.map(col => ({ value: col.name, label: col.name })),
+        );
+      }
+    } catch (error) {
+      console.error('Error fetching columns:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchColumns();
+  }, [values.type, values.name, values.query]);
+
+  return (
+    <div className="CubeCreationInput">
+      <ErrorMessage name={fieldName} component="span" />
+      <label htmlFor={fieldName} style={labelStyle}>
+        {label}
+      </label>
+      <span data-testid={`select-${fieldName}`}>
+        <FormikSelect
+          className={isMulti ? 'MultiSelectInput' : 'SelectInput'}
+          defaultValue={
+            isMulti
+              ? defaultValue.map(val => {
+                  return {
+                    value: val,
+                    label: val,
+                  };
+                })
+              : defaultValue
+              ? { value: defaultValue, label: defaultValue }
+              : null
+          }
+          selectOptions={selectableOptions}
+          formikFieldName={fieldName}
+          onFocus={event => fetchColumns(event)}
+          isMulti={isMulti}
+          isClearable={isClearable}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DescriptionField = () => {
+  return (
+    <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>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DisplayNameField = () => {
+  return (
+    <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>
+  );
+};

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

@@ -12,6 +12,8 @@ export const FormikSelect = ({
   style,
   className = 'SelectInput',
   isMulti = false,
+  isClearable = false,
+  onFocus = event => {},
 }) => {
   // eslint-disable-next-line no-unused-vars
   const [field, _, helpers] = useField(formikFieldName);
@@ -37,6 +39,9 @@ export const FormikSelect = ({
       onChange={selected => setValue(getValue(selected))}
       styles={style}
       isMulti={isMulti}
+      isClearable={isClearable}
+      onFocus={event => onFocus(event)}
+      id={field.name}
     />
   );
 };

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

@@ -11,12 +11,13 @@ export const FullNameField = props => {
 
   useEffect(() => {
     // Set the value of the node's full name based on its namespace and display name
-    if (values.namespace && values.display_name) {
+    if (values.namespace || values.display_name) {
       setFieldValue(
         props.name,
         `${values.namespace}.${values.display_name
           .toLowerCase()
-          .replace(/ /g, '_')}` || '',
+          .replace(/ /g, '_')
+          .replace(/[^a-zA-Z0-9_]/g, '')}` || '',
       );
     }
   }, [setFieldValue, props.name, values]);