feat: 🎸 properties tree

lib/js/app/KeenExplorer.tsx

@@ -19,13 +19,6 @@ import { version } from '../../../package.json';
 import App from './components/App';
 import { AppContext } from './contexts';
 
-const defaultConfig = {
-  previewCollection: true,
-  saveStateToLocalStorage: {
-    eventCollection: true,
-  },
-};
-
 export let client;
 export let keenTrackingClient;
 
@@ -56,13 +49,10 @@ export class KeenExplorer {
 
     ReactDOM.render(
       <Provider store={store}>
-        <AppContext.Provider value={{ keenAnalysis: client }}>
-          <App
-            {...{
-              ...defaultConfig,
-              ...props,
-            }}
-          />
+        <AppContext.Provider
+          value={{ keenAnalysis: client, modalContainer: props.modalContainer }}
+        >
+          <App {...props} />
         </AppContext.Provider>
       </Provider>,
       document.querySelector(props.container)

lib/js/app/components/Creator/Creator.tsx

@@ -13,6 +13,7 @@ type Props = {
 const Creator: FC<Props> = ({ onUpdateQuery }) => {
   const dispatch = useDispatch();
   const {
+    modalContainer,
     keenAnalysis: { config },
   } = useContext(AppContext);
 
@@ -22,6 +23,7 @@ const Creator: FC<Props> = ({ onUpdateQuery }) => {
 
   return (
     <QueryCreator
+      modalContainer={modalContainer}
       projectId={config.projectId}
       readKey={config.readKey}
       masterKey={config.masterKey}

lib/js/app/contexts/AppContext.ts

@@ -2,8 +2,10 @@ import React from 'react';
 
 const AppContext = React.createContext<{
   keenAnalysis: any;
+  modalContainer: string;
 }>({
   keenAnalysis: null,
+  modalContainer: null,
 });
 
 export default AppContext;

lib/js/app/queryCreator/QueryCreator.tsx

@@ -8,6 +8,7 @@ import KeenAnalysis from 'keen-analysis';
 import App from './App';
 import rootSaga from './saga';
 import rootReducer from './reducer';
+import { AppContext } from './contexts';
 
 import { appStart } from './modules/app';
 import { getQuery, setQuery, resetQuery } from './modules/query';
@@ -23,6 +24,8 @@ type Props = {
   readKey: string;
   /** Keen master access key */
   masterKey: string;
+  /** Modal container selector */
+  modalContainer: string;
   /** Update query event handler */
   onUpdateQuery?: (query: Object) => void;
 };
@@ -100,7 +103,11 @@ class QueryCreator extends React.Component<Props> {
   render() {
     return (
       <Provider store={this.store}>
-        <App />
+        <AppContext.Provider
+          value={{ modalContainer: this.props.modalContainer }}
+        >
+          <App />
+        </AppContext.Provider>
       </Provider>
     );
   }

lib/js/app/queryCreator/components/Analysis/Analysis.styles.ts

@@ -18,6 +18,6 @@ export const Groups = styled.div`
   padding: 10px 0;
 
   ${List} + ${List} {
-    margin-top: 10px;
+    margin-top: 14px;
   }
 `;

lib/js/app/queryCreator/components/Analysis/components/ListItem.styles.ts

@@ -6,7 +6,7 @@ import { colors } from '@keen.io/colors';
 export const Container = styled.li<{
   isActive: boolean;
 }>`
-  padding: 7px 10px;
+  padding: 8px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;

lib/js/app/queryCreator/components/EventCollection/EventCollection.styles.ts

@@ -5,6 +5,6 @@ export const Container = styled.div`
 `;
 
 export const Collections = styled.div`
-  max-height: 140px;
+  max-height: 240px;
   overflow-y: scroll;
 `;

lib/js/app/queryCreator/components/Portal/Portal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+type Props = {
+  /** Modal container selector */
+  modalContainer: string;
+  /** Modal container selector */
+  children: React.ReactNode;
+};
+
+export default class Portal extends React.Component<Props> {
+  element: HTMLDivElement;
+
+  modalRoot: HTMLDivElement;
+
+  constructor(props: Props) {
+    super(props);
+    this.element = document.createElement('div');
+    this.modalRoot = document.querySelector(this.props.modalContainer);
+  }
+
+  componentDidMount() {
+    this.modalRoot.appendChild(this.element);
+  }
+
+  componentWillUnmount() {
+    this.modalRoot.removeChild(this.element);
+  }
+
+  render() {
+    return ReactDOM.createPortal(this.props.children, this.element);
+  }
+}

lib/js/app/queryCreator/components/Portal/index.ts

@@ -0,0 +1,3 @@
+import Portal from './Portal';
+
+export default Portal;

lib/js/app/queryCreator/components/PropertiesTree/PropertiesTree.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render as rtlRender, fireEvent } from '@testing-library/react';
+
+import PropertiesTree from './PropertiesTree';
+
+const render = (overProps: any = {}) => {
+  const props = {
+    onClick: jest.fn(),
+    expanded: false,
+    ...overProps,
+  };
+
+  const wrapper = rtlRender(
+    <PropertiesTree {...props} />
+  );
+
+  return {
+    props,
+    wrapper,
+  };
+};
+
+test('allows user to select nested property', () => {
+  const properties = {
+    category: ['category', 'string'],
+    user: {
+      id: ['user.id', 'number'],
+    }
+  };
+
+  const { wrapper: { getByText }, props } = render({ properties });
+
+  const title = getByText('user');
+  fireEvent.click(title);
+
+  const property = getByText('id');
+  fireEvent.click(property);
+
+  expect(props.onClick.mock.calls[0][1]).toEqual('user.id');
+});
+
+test('renders properties from all tree levels', () => {
+  const properties = {
+    category: ['category', 'string'],
+    user: {
+      details: {
+        name: ['user.details.name', 'string'],
+      }
+    }
+  };
+
+  const { wrapper: { getByText } } = render({ properties, expanded: true });
+  const property = getByText('name');
+
+  expect(property).toBeInTheDocument();
+});
+
+test('expands all properties tree levels', () => {
+  const properties = {
+    category: ['category', 'string'],
+    user: {
+      details: {
+        name: ['user.details.name', 'string'],
+      }
+    }
+  };
+
+  const { wrapper: { getByText, rerender }, props } = render({ properties });
+  rerender(<PropertiesTree {...props} expanded={true} />)
+
+  const property = getByText('name');
+
+  expect(property).toBeInTheDocument();
+});

lib/js/app/queryCreator/components/PropertiesTree/PropertiesTree.tsx

@@ -1,6 +1,11 @@
 import React, { FC } from 'react';
 
-import { TreeLevel, TreeLeaf } from './components';
+import { TreeLevel } from './components';
+
+import PropertyTreeItem from '../PropertyTreeItem';
+import { getPropertyType, getPropertyPath } from './utils';
+
+import { PADDING } from './constants';
 
 type Props = {
   /** Properties tree */
@@ -9,8 +14,6 @@ type Props = {
   onClick: (e: React.MouseEvent<HTMLDivElement>, propertyPath: string) => void;
   /** Expand all tree levels */
   expanded?: boolean;
-  /** Open indicator */
-  isOpen?: boolean;
 };
 
 const PropertiesTree: FC<Props> = ({ expanded, onClick, properties }) => {
@@ -21,12 +24,13 @@ const PropertiesTree: FC<Props> = ({ expanded, onClick, properties }) => {
       {keys.map((key) => {
         if (Array.isArray(properties[key])) {
           return (
-            <TreeLeaf
-              padding={15}
-              name={key}
-              type={properties[key][1]}
+            <PropertyTreeItem
               key={key}
-              onClick={(e) => onClick(e, properties[key][0])}
+              padding={PADDING}
+              propertyName={key}
+              propertyPath={getPropertyPath(properties[key] as string[])}
+              type={getPropertyType(properties[key] as string[])}
+              onClick={(e, propertyPath) => onClick(e, propertyPath)}
             />
           );
         } else {

lib/js/app/queryCreator/components/PropertiesTree/components/TreeLevel/TreeLevel.styles.ts

@@ -12,8 +12,15 @@ export const Header = styled.div`
   cursor: pointer;
 `;
 
+export const Title = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export const MotionIcon = styled(motion.div)`
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   margin-left: 4px;
 `;

lib/js/app/queryCreator/components/PropertiesTree/components/TreeLevel/TreeLevel.tsx

@@ -2,8 +2,10 @@ import React, { FC, useState, useEffect } from 'react';
 import { Icon } from '@keen.io/icons';
 import { colors } from '@keen.io/colors';
 
-import { Header, MotionIcon } from './TreeLevel.styles';
-import TreeLeaf from '../TreeLeaf';
+import { Header, Title, MotionIcon } from './TreeLevel.styles';
+import PropertyTreeItem from '../../../PropertyTreeItem';
+
+import { getPropertyType, getPropertyPath } from '../../utils';
 
 import { PADDING } from '../../constants';
 
@@ -39,9 +41,9 @@ const TreeLevel: FC<Props> = ({
     <div data-testid="tree-level">
       <Header
         onClick={() => setOpen(!isOpen)}
-        style={{ paddingLeft: level * PADDING }}
+        style={{ paddingLeft: level * PADDING, paddingRight: PADDING }}
       >
-        {header}
+        <Title>{header}</Title>
         <MotionIcon
           initial={false}
           animate={isOpen ? { rotate: 90 } : { rotate: 0 }}
@@ -58,27 +60,25 @@ const TreeLevel: FC<Props> = ({
         keys.map((key) => {
           if (Array.isArray(properties[key])) {
             return (
-              <TreeLeaf
+              <PropertyTreeItem
                 key={key}
+                propertyName={key}
+                propertyPath={getPropertyPath(properties[key] as string[])}
                 padding={(level + 1) * PADDING}
-                name={key}
-                type={properties[key][1]}
-                onClick={(e) => {
-                  onClick(e, properties[key][0]);
-                }}
+                type={getPropertyType(properties[key] as string[])}
+                onClick={(e, propertyPath) => onClick(e, propertyPath)}
               />
             );
           } else {
             return (
-              <div key={key}>
-                <TreeLevel
-                  expanded={expanded}
-                  level={level + 1}
-                  onClick={onClick}
-                  header={key}
-                  properties={properties[key] as Record<string, any>}
-                />
-              </div>
+              <TreeLevel
+                key={key}
+                header={key}
+                expanded={expanded}
+                level={level + 1}
+                onClick={onClick}
+                properties={properties[key] as Record<string, any>}
+              />
             );
           }
         })}

lib/js/app/queryCreator/components/PropertiesTree/components/index.ts

@@ -1,4 +1,3 @@
 import TreeLevel from './TreeLevel';
-import TreeLeaf from './TreeLeaf';
 
-export { TreeLevel, TreeLeaf };
+export { TreeLevel };