datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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/HorizontalHierarchyIcon.jsx

@@ -0,0 +1,15 @@
+const HorizontalHierarchyIcon = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-house-door-fill"
+    viewBox="0 0 16 16"
+    style={{ paddingBottom: '0.2rem' }}
+  >
+    <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
+  </svg>
+);
+
+export default HorizontalHierarchyIcon;

package/src/app/icons/InvalidIcon.jsx

@@ -0,0 +1,16 @@
+const InvalidIcon = ({ width = '25px', height = '25px', style = {} }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    style={style}
+    fill="currentColor"
+    className="bi bi-x-circle-fill"
+    viewBox="0 0 16 16"
+    data-testid="invalid-icon"
+  >
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
+  </svg>
+);
+
+export default InvalidIcon;

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

@@ -0,0 +1,14 @@
+import '../../styles/loading.css';
+
+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/NodeIcon.jsx

@@ -0,0 +1,49 @@
+const NodeIcon = ({
+  width = '45px',
+  height = '45px',
+  color = '#cccccc',
+  style = {},
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+    data-testid="node-icon"
+  >
+    <path
+      opacity="0.317243"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z"
+      fill={color}
+    ></path>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z"
+      fill={color}
+    ></path>
+    <mask
+      id="mask0"
+      type="alpha"
+      maskUnits="userSpaceOnUse"
+      x="9"
+      y="7"
+      width="12"
+      height="16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z"
+        fill="white"
+      ></path>
+    </mask>
+    <g mask="url(#mask0)"></g>
+  </svg>
+);
+
+export default NodeIcon;

package/src/app/icons/NotificationIcon.jsx

@@ -0,0 +1,27 @@
+const NotificationIcon = props => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 16.1 19"
+    xmlSpace="preserve"
+  >
+    <g id="XMLID_27_">
+      <path
+        id="XMLID_5_"
+        className="st0"
+        d="M8.1,19c1,0,1.9-0.9,1.9-1.9H6.2C6.2,18.1,7,19,8.1,19z"
+      />
+      <path
+        id="XMLID_46_"
+        className="st0"
+        d="M14.2,13.3V8.1c0-2.9-2-5.3-4.8-6V1.4C9.5,0.7,8.8,0,8.1,0S6.7,0.7,6.7,1.4v0.7
+            c-2.8,0.7-4.8,3-4.8,6v5.2L0,15.2v0.9h16.1v-0.9L14.2,13.3z"
+      />
+    </g>
+  </svg>
+);
+export default NotificationIcon;

package/src/app/icons/PythonIcon.jsx

@@ -0,0 +1,14 @@
+const PythonIcon = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="24"
+    height="24"
+    viewBox="0 0 48 48"
+  >
+    <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>
+);
+
+export default PythonIcon;

package/src/app/icons/SettingsIcon.jsx

@@ -0,0 +1,28 @@
+const SettingsIcon = props => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 19 19"
+    xmlSpace="preserve"
+  >
+    <g id="XMLID_196_">
+      <path
+        id="settings_2_"
+        className="st0"
+        d="M18.3,8.1l-1.9-0.3c-0.1-0.6-0.3-1.1-0.6-1.6L17,4.7c0.3-0.3,0.2-0.8,0-1.1l-0.7-0.8
+		c-0.3-0.3-0.7-0.4-1.1-0.2l-1.6,1c-0.7-0.5-1.5-0.9-2.4-1.1l-0.3-1.9C10.8,0.3,10.5,0,10.1,0H8.9C8.5,0,8.2,0.3,8.1,0.7L7.8,2.6
+		C7.1,2.8,6.4,3,5.8,3.4L4.3,2.3C4,2.1,3.5,2.1,3.2,2.4L2.4,3.2C2.1,3.5,2.1,4,2.3,4.3l1.1,1.5c-0.4,0.6-0.6,1.3-0.8,2L0.7,8.1
+		C0.3,8.2,0,8.5,0,8.9v1.1c0,0.4,0.3,0.8,0.7,0.8l1.9,0.3c0.1,0.6,0.4,1.1,0.6,1.7L2,14.3c-0.3,0.3-0.2,0.8,0,1.1l0.7,0.8
+		c0.3,0.3,0.7,0.4,1.1,0.2l1.6-1c0.7,0.5,1.5,0.8,2.3,1l0.3,1.9C8.2,18.7,8.5,19,8.9,19h1.1c0.4,0,0.8-0.3,0.8-0.7l0.3-1.9
+		c0.7-0.2,1.4-0.5,2-0.8l1.6,1.1c0.3,0.2,0.8,0.2,1.1-0.1l0.8-0.8c0.3-0.3,0.3-0.7,0.1-1.1l-1.1-1.6c0.4-0.6,0.7-1.3,0.8-2l1.9-0.3
+		c0.4-0.1,0.7-0.4,0.7-0.8V8.9C19,8.5,18.7,8.2,18.3,8.1z M9.5,13.1c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6c2,0,3.6,1.6,3.6,3.6
+		C13.1,11.5,11.5,13.1,9.5,13.1z"
+      />
+    </g>
+  </svg>
+);
+export default SettingsIcon;

package/src/app/icons/TableIcon.jsx

@@ -0,0 +1,14 @@
+const TableIcon = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-table"
+    viewBox="0 0 16 16"
+  >
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z" />
+  </svg>
+);
+
+export default TableIcon;

package/src/app/icons/ValidIcon.jsx

@@ -0,0 +1,16 @@
+const ValidIcon = ({ width = '25px', height = '25px', style = {} }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    style={style}
+    fill="currentColor"
+    className="bi bi-check-circle-fill"
+    viewBox="0 0 16 16"
+    data-testid="valid-icon"
+  >
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+  </svg>
+);
+
+export default ValidIcon;

package/src/app/icons/WrenchIcon.jsx

@@ -0,0 +1,36 @@
+const WrenchIcon = props => (
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_24_77)">
+      <rect
+        width="16"
+        height="16"
+        transform="translate(0 0.649803)"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.41665 5.44985C6.41665 2.8265 8.5433 0.699852 11.1667 0.699852C11.4613 0.699852 11.7504 0.726773 12.0313 0.778484C12.5762 0.878798 12.9364 1.28101 13.0406 1.74377C13.1406 2.18774 13.0066 2.67055 12.6619 3.01531L11.2273 4.44985L12.1667 5.38919L13.6012 3.95465C13.946 3.60989 14.4288 3.47589 14.8728 3.57591C15.3355 3.68017 15.7377 4.04033 15.838 4.58525C15.8898 4.86615 15.9167 5.15519 15.9167 5.44985C15.9167 8.0732 13.79 10.1999 11.1667 10.1999C10.658 10.1999 10.167 10.1196 9.70625 9.97091L3.50172 16.1754C2.94847 16.7287 2.05149 16.7287 1.49825 16.1754L0.441055 15.1183C-0.112189 14.565 -0.112186 13.668 0.441056 13.1148L6.64559 6.91025C6.49685 6.44951 6.41665 5.9585 6.41665 5.44985ZM11.1667 2.19985C9.37172 2.19985 7.91665 3.65492 7.91665 5.44985C7.91665 5.92812 8.01948 6.38034 8.20352 6.7873L8.41725 7.25991L8.05048 7.62667L1.56064 14.1165L2.49998 15.0559L8.98982 8.56601L9.35659 8.19925L9.8292 8.41298C10.2362 8.59702 10.6884 8.69985 11.1667 8.69985C12.9616 8.69985 14.4167 7.24477 14.4167 5.44985C14.4167 5.38796 14.415 5.32654 14.4116 5.26562L12.697 6.98018L12.1667 7.51051L11.6363 6.98018L9.63632 4.98018L9.10599 4.44985L9.63632 3.91952L11.3509 2.20496C11.29 2.20157 11.2286 2.19985 11.1667 2.19985Z"
+        fill="black"
+        fill-opacity="0.9"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_24_77">
+        <rect
+          width="16"
+          height="16"
+          fill="white"
+          transform="translate(0 0.649803)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default WrenchIcon;

package/src/app/index.tsx

@@ -8,50 +8,143 @@ import { Helmet } from 'react-helmet-async';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
+import { OverviewPage } from './pages/OverviewPage/Loadable';
+import { SettingsPage } from './pages/SettingsPage/Loadable';
+import { NotificationsPage } from './pages/NotificationsPage/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';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
+import { LoginPage } from './pages/LoginPage';
+import { RegisterTablePage } from './pages/RegisterTablePage';
 import { Root } from './pages/Root/Loadable';
-import { ListNamespacesPage } from './pages/ListNamespacesPage';
 import DJClientContext from './providers/djclient';
-import {DataJunctionAPI} from "./services/DJService";
+import { DataJunctionAPI } from './services/DJService';
+import { CookiesProvider, useCookies } from 'react-cookie';
+import * as Constants from './constants';
 
 export function App() {
+  const [cookies] = useCookies([Constants.LOGGED_IN_FLAG_COOKIE]);
   return (
-    <BrowserRouter>
-      <Helmet
-        titleTemplate="DataJunction: %s"
-        defaultTitle="DataJunction: A Metrics Platform"
-      >
-        <meta
-          name="description"
-          content="DataJunction serves as a semantic layer to help manage metrics"
-        />
-      </Helmet>
-      <DJClientContext.Provider value={{ DataJunctionAPI }}>
-        <Routes>
-          <Route
-            path="/"
-            element={<Root />}
-            children={
-              <>
-                <Route path="nodes" key="nodes">
-                  <Route path=":name" element={<NodePage />} />
-                </Route>
+    <CookiesProvider>
+      <BrowserRouter>
+        {cookies.__djlif || process.env.REACT_DISABLE_AUTH === 'true' ? (
+          <>
+            <Helmet
+              titleTemplate="DataJunction: %s"
+              defaultTitle="DataJunction: A Metrics Platform"
+            >
+              <meta
+                name="description"
+                content="DataJunction serves as a semantic layer to help manage metrics"
+              />
+            </Helmet>
+            <DJClientContext.Provider value={{ DataJunctionAPI }}>
+              <Routes>
+                <Route
+                  path="/"
+                  element={<Root />}
+                  children={
+                    <>
+                      <Route path="nodes" key="nodes">
+                        <Route path=":name" element={<NodePage />} />
+                        <Route
+                          path=":name/edit"
+                          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={<ListNamespacesPage />} key="index" />
-                <Route path="namespaces">
-                  <Route
-                    path=":namespace"
-                    element={<NamespacePage />}
-                    key="namespaces"
-                  />
-                </Route>
-              </>
-            }
-          />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </DJClientContext.Provider>
-    </BrowserRouter>
+                      <Route path="/" element={<NamespacePage />} key="index" />
+                      <Route path="namespaces">
+                        <Route
+                          path=":namespace"
+                          element={<NamespacePage />}
+                          key="namespaces"
+                        />
+                      </Route>
+                      <Route
+                        path="create/tag"
+                        key="createtag"
+                        element={<AddEditTagPage />}
+                      ></Route>
+                      <Route
+                        path="create/source"
+                        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"
+                          key="create"
+                          element={<AddEditNodePage />}
+                        />
+                        <Route
+                          path=""
+                          key="create"
+                          element={<AddEditNodePage />}
+                        />
+                      </Route>
+                      <Route
+                        path="sql"
+                        key="sql"
+                        element={<SQLBuilderPage />}
+                      />
+                      <Route path="tags" key="tags">
+                        <Route path=":name" element={<TagPage />} />
+                      </Route>
+                      <Route
+                        path="overview"
+                        key="overview"
+                        element={<OverviewPage />}
+                      />
+                      <Route
+                        path="settings"
+                        key="settings"
+                        element={<SettingsPage />}
+                      />
+                      <Route
+                        path="notifications"
+                        key="notifications"
+                        element={<NotificationsPage />}
+                      />
+                    </>
+                  }
+                />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </DJClientContext.Provider>
+          </>
+        ) : (
+          <LoginPage />
+        )}
+      </BrowserRouter>
+    </CookiesProvider>
   );
 }

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/ColumnMetadata.jsx

@@ -0,0 +1,61 @@
+/**
+ * Component for arbitrary column metadata
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const ColumnMetadata = ({ name, label, defaultValue }) => {
+  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]);
+
+  // When focus is on the input field, refresh the list of available columns for selection
+  const refreshColumns = event => {
+    async function fetchData() {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    }
+    fetchData();
+  };
+
+  return (
+    <div className="NodeCreationInput" style={{ width: '25%' }}>
+      <ErrorMessage name={name} component="span" />
+      <label htmlFor="react-select-3-input">{label}</label>
+      <span data-testid={`select-${name}`}>
+        <FormikSelect
+          className="SelectInput"
+          style={{ width: '100px' }}
+          defaultValue={defaultValue}
+          selectOptions={selectableOptions}
+          formikFieldName={name}
+          //   placeholder={`Choose ${label}`}
+          onFocus={event => refreshColumns(event)}
+          isMulti={false}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+/**
+ * Column metadata configuration component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+import WrenchIcon from 'app/icons/WrenchIcon';
+
+export const ColumnsMetadataInput = ({ columns }) => {
+  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]);
+
+  // When focus is on the primary key field, refresh the list of available
+  // primary key columns for selection
+  useEffect(() => {
+    const fetchData = async () => {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  return (
+    <div
+      className="ColumnsMetadataInput NodeCreationInput"
+      style={{ border: 'dashed 1px #ccc', padding: '20px' }}
+    >
+      <ErrorMessage name="mode" component="span" />
+      <label htmlFor="Mode">Columns Metadata</label>
+      <table>
+        <thead>
+          <tr>
+            <th>Column</th>
+            <th>Metadata</th>
+          </tr>
+        </thead>
+        <tbody>
+          {availableColumns.map(col => (
+            <tr key={col.value}>
+              <td>{col.value}</td>
+              <td>
+                <WrenchIcon />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};