datajunction-ui 0.0.1-a1 → 0.0.1-a101

package/src/styles/node-creation.scss

@@ -9,6 +9,7 @@ form {
     padding: 1rem;
     font-family: Lato, 'sans-serif';
     font-size: 110%;
+    border-right: 16px solid transparent;
   }
 
   input {
@@ -39,6 +40,13 @@ form {
     padding: 0 20px;
   }
 
+  .CubeCreationInput {
+    margin: 0.5rem 0;
+    display: inline-grid;
+    width: 75%;
+    padding: 0 20px;
+  }
+
   .DisplayNameInput,
   .FullNameInput,
   .NamespaceInput {
@@ -91,7 +99,7 @@ form {
   .SelectInput {
     background-color: #eee;
     border-radius: 10px;
-    border-style: none;
+    border-style: none !important;
     border-color: transparent;
     box-sizing: border-box;
     padding: 0.5rem;
@@ -99,16 +107,65 @@ form {
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
       rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
   }
-  .SelectInput div,
-  .SelectInput div div {
+  .SelectInput div {
     border: none;
+    background: transparent;
   }
-
   .SelectInput div:first-child {
     background-color: #eee !important;
     border: none;
     color: #0c4128;
   }
+  .SelectInput div:last-child div {
+    border: none;
+    background-color: #efefef;
+  }
+  .MultiSelectInput {
+    background-color: #eee;
+    border-radius: 10px;
+    border-style: none;
+    border-color: transparent;
+    box-sizing: border-box;
+    padding: 0.5rem 0;
+    font-size: 110%;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+      rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  }
+  .MultiSelectInput div {
+    border: none;
+    background-color: #fff;
+  }
+  .MultiSelectInput div:last-child div {
+    border: none;
+    background-color: #efefef;
+  }
+  .MultiSelectInput div:last-child input {
+    box-shadow: none;
+  }
+  .MultiSelectInput div div {
+    border: none;
+    background-color: #efefef;
+  }
+
+  .MultiSelectInput div div div,
+  .MultiSelectInput div div div:last-child {
+    border: none;
+    background-color: #ffffff;
+    border-radius: 0.4rem;
+    padding: 0.2em;
+  }
+
+  .MultiSelectInput div div div:last-child {
+    background-color: #efefef;
+  }
+  .MultiSelectInput div div div div:last-child {
+    border: none;
+    background-color: #fff;
+  }
+  .SelectInput div:first-child {
+    border: none;
+    color: #0c4128;
+  }
 
   .DescriptionInput {
     width: 100%;
@@ -131,18 +188,26 @@ form {
   .QueryInput {
     width: 75%;
   }
+  .MetricQueryInput {
+    height: 200px;
+  }
 
   .NodeModeInput {
     select {
       background-color: #eeeeee;
       border-radius: 10px;
-      border-style: none;
       padding: 1rem;
       font-family: Lato, Sans;
       font-size: 110%;
     }
   }
 
+  .FullNameField {
+    background-color: #fff;
+    box-shadow: none;
+    color: #7c7c7c;
+  }
+
   button {
     display: block;
     border-radius: 10px;
@@ -189,9 +254,23 @@ form {
   }
 }
 
+.warning {
+  background-color: rgb(253, 248, 242);
+  color: rgb(190, 105, 37);
+  svg {
+    filter: invert(16%) sepia(68%) saturate(2827%) hue-rotate(344deg)
+      brightness(96%) contrast(100%);
+  }
+}
+
 .SourceCreationInput {
   margin: 0.5rem 0;
   display: inline-grid;
   width: 20%;
   padding: 0 20px;
 }
+
+.HighlightPath {
+  background: #f5efff;
+  padding: 5px;
+}

package/src/styles/node-list.css

@@ -0,0 +1,4 @@
+table {
+  width: 100%;
+  height: min-content;
+}

package/src/styles/sorted-table.css

@@ -0,0 +1,15 @@
+.sortable {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: bold;
+  font-family: inherit;
+  color: inherit;
+  text-transform: uppercase;
+}
+.sortable.ascending::after {
+  content: ' ▲';
+}
+.sortable.descending::after {
+  content: ' ▼';
+}

package/src/app/components/DeleteNode.jsx

@@ -1,55 +0,0 @@
-import DJClientContext from '../providers/djclient';
-import * as React from 'react';
-import DeleteIcon from '../icons/DeleteIcon';
-import { Form, Formik } from 'formik';
-import { useContext } from 'react';
-import { displayMessageAfterSubmit } from '../../utils/form';
-
-export default function DeleteNode({ nodeName }) {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const deleteNode = async (values, { setSubmitting, setStatus }) => {
-    const { status, json } = await djClient.deactivate(values.nodeName);
-    if (status === 200 || status === 201 || status === 204) {
-      setStatus({
-        success: <>Successfully deleted node {values.nodeName}</>,
-      });
-    } else {
-      setStatus({
-        failure: `${json.message}`,
-      });
-    }
-    setSubmitting(false);
-  };
-
-  const initialValues = {
-    nodeName: nodeName,
-  };
-
-  return (
-    <Formik initialValues={initialValues} onSubmit={deleteNode}>
-      {function Render({ isSubmitting, status, setFieldValue }) {
-        return (
-          <Form className="deleteNode">
-            {displayMessageAfterSubmit(status)}
-            {
-              <>
-                <button
-                  type="submit"
-                  disabled={isSubmitting}
-                  style={{
-                    marginLeft: 0,
-                    all: 'unset',
-                    color: '#005c72',
-                    cursor: 'pointer',
-                  }}
-                >
-                  <DeleteIcon />
-                </button>
-              </>
-            }
-          </Form>
-        );
-      }}
-    </Formik>
-  );
-}

package/src/app/components/__tests__/DeleteNode.test.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import fetchMock from 'jest-fetch-mock';
-import userEvent from '@testing-library/user-event';
-import { render } from '../../../setupTests';
-import DJClientContext from '../../providers/djclient';
-import DeleteNode from '../DeleteNode';
-
-describe('<DeleteNode />', () => {
-  beforeEach(() => {
-    fetchMock.resetMocks();
-    jest.clearAllMocks();
-    window.scrollTo = jest.fn();
-  });
-
-  const renderElement = djClient => {
-    return render(
-      <DJClientContext.Provider value={djClient}>
-        <DeleteNode nodeName="default.hard_hat" />
-      </DJClientContext.Provider>,
-    );
-  };
-
-  const initializeMockDJClient = () => {
-    return {
-      DataJunctionAPI: {
-        deactivate: jest.fn(),
-      },
-    };
-  };
-
-  it('deletes a node when clicked', async () => {
-    const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.deactivate.mockReturnValue({
-      status: 204,
-      json: { name: 'source.warehouse.schema.some_table' },
-    });
-
-    renderElement(mockDjClient);
-
-    await userEvent.click(screen.getByRole('button'));
-
-    await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalled();
-      expect(mockDjClient.DataJunctionAPI.deactivate).toBeCalledWith(
-        'default.hard_hat',
-      );
-    });
-    expect(
-      screen.getByText('Successfully deleted node default.hard_hat'),
-    ).toBeInTheDocument();
-  }, 60000);
-});

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

@@ -1,82 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import Select from 'react-select';
-import DJClientContext from '../../providers/djclient';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
-
-const NodeSQLTab = djNode => {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [query, setQuery] = useState('');
-
-  const [selection, setSelection] = useState({
-    dimensions: [],
-    filters: [],
-  });
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const query = await djClient.sql(djNode.djNode.name, selection);
-      setQuery(query.sql);
-    };
-    fetchData().catch(console.error);
-  }, [djClient, djNode.djNode.name, selection]);
-  const dimensionsList = djNode.djNode.dimensions
-    ? djNode.djNode.dimensions.map(dim => ({
-        value: dim.name,
-        label: dim.name + ` (${dim.type})`,
-      }))
-    : [''];
-
-  const handleSubmit = event => {
-    event.preventDefault();
-  };
-
-  const handleChange = event => {
-    setSelection({ filters: [], dimensions: event.map(dim => dim.value) });
-  };
-
-  return (
-    <form
-      id="retrieve-sql"
-      name="retrieve-sql"
-      onSubmit={handleSubmit.bind(this)}
-    >
-      <div>
-        <h4>Group By</h4>
-        <Select
-          name="dimensions"
-          options={dimensionsList}
-          isMulti
-          isClearable
-          onChange={handleChange}
-        />
-        {/*<h4>Filters</h4>*/}
-        {/*<Select*/}
-        {/*  name="filter_name"*/}
-        {/*  options={dimensionsList}*/}
-        {/*  className="filters_attribute"*/}
-        {/*/>*/}
-        {/*<Select*/}
-        {/*  name="filter_operator"*/}
-        {/*  options={options}*/}
-        {/*  className="filters_attribute"*/}
-        {/*/>*/}
-        {/*<textarea name="filter_value" className="filters_attribute" />*/}
-
-        <div
-          style={{
-            width: window.innerWidth * 0.8,
-            marginTop: '2rem',
-          }}
-        >
-          <h6 className="mb-0 w-100">Query</h6>
-          <SyntaxHighlighter language="sql" style={foundation}>
-            {query}
-          </SyntaxHighlighter>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-export default NodeSQLTab;

package/src/app/pages/NodePage/__tests__/ClientCodePopover.test.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
-import ClientCodePopover from '../ClientCodePopover';
-import userEvent from '@testing-library/user-event';
-
-describe('<ClientCodePopover />', () => {
-  const defaultProps = {
-    code: "print('Hello, World!')",
-  };
-
-  it('toggles the code popover visibility when the button is clicked', async () => {
-    render(<ClientCodePopover {...defaultProps} />);
-
-    const button = screen.getByRole('button', 'code-button');
-
-    // Initially, the popover should be hidden
-    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
-      'display: none',
-    );
-
-    // Clicking the button should display the popover
-    fireEvent.click(button);
-    expect(screen.getByRole('dialog', { hidden: true })).not.toHaveStyle(
-      'display: none',
-    );
-
-    // Clicking the button again should hide the popover
-    fireEvent.click(button);
-    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
-      'display: none',
-    );
-
-    // Trigger onClose by pressing <escape>
-    userEvent.keyboard('{Escape}');
-    // fireEvent.click(screen.getByTestId('body').firstChild());
-    await waitFor(() => {
-      expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
-        'display: none',
-      );
-    });
-  });
-
-  it('renders the provided code within the SyntaxHighlighter', () => {
-    render(<ClientCodePopover {...defaultProps} />);
-    expect(screen.getByRole('dialog', { hidden: true })).toHaveTextContent(
-      defaultProps.code,
-    );
-  });
-});