datajunction-ui 0.0.1-rc.20 → 0.0.1-rc.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.20",
+  "version": "0.0.1-rc.21",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

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

@@ -0,0 +1,86 @@
+import { useContext, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function AddNamespacePopover({ namespace, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+
+  const addNamespace = async ({ namespace }, { setSubmitting, setStatus }) => {
+    setSubmitting(false);
+    const response = await djClient.addNamespace(namespace);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="AddNamespaceTogglePopover"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="AddNamespacePopover"
+        style={{
+          display: popoverAnchor === false ? 'none' : 'block',
+          width: '200px !important',
+          textTransform: 'none',
+          fontWeight: 'normal',
+        }}
+      >
+        <Formik
+          initialValues={{
+            namespace: '',
+          }}
+          onSubmit={addNamespace}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="add-namespace">
+                  <ErrorMessage name="namespace" component="span" />
+                  <label htmlFor="namespace">Namespace</label>
+                  <Field
+                    type="text"
+                    name="namespace"
+                    id="namespace"
+                    placeholder="New namespace"
+                  />
+                </span>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveNamespace"
+                  aria-hidden="false"
+                  style={{ marginTop: '1rem' }}
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -6,6 +6,7 @@ import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
 import EditIcon from '../../icons/EditIcon';
 import DeleteNode from '../../components/DeleteNode';
+import AddNamespacePopover from './AddNamespacePopover';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -58,7 +59,7 @@ export function NamespacePage() {
   useEffect(() => {
     const fetchData = async () => {
       if (namespace === undefined && namespaceHierarchy !== undefined) {
-        namespace = namespaceHierarchy.children[0].path;
+        namespace = namespaceHierarchy[0].namespace;
       }
       const nodes = await djClient.namespace(namespace);
       const foundNodes = await Promise.all(nodes);
@@ -159,7 +160,7 @@ export function NamespacePage() {
                   padding: '1rem 1rem 1rem 0',
                 }}
               >
-                Namespaces
+                Namespaces <AddNamespacePopover />
               </span>
               {namespaceHierarchy
                 ? namespaceHierarchy.map(child => (

package/src/app/services/DJService.js

@@ -487,4 +487,14 @@ export const DataJunctionAPI = {
     });
     return { status: response.status, json: await response.json() };
   },
+  addNamespace: async function (namespace) {
+    const response = await fetch(`${DJ_URL}/namespaces/${namespace}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
 };

package/src/styles/index.css

@@ -890,7 +890,7 @@ pre {
   border-radius: 10px;
   text-align: left;
   position: absolute;
-  min-width: 200px;
+  min-width: 210px;
   max-width: 100%;
   z-index: 1;
 }