Added: Tags

Chore: Lint code

Added: Tests for tags
Fixed: Sidebar tests

Author: codeasashu

src/Tree/TreeCache.js

@@ -50,4 +50,4 @@ class TreeCache {
   }
 }
 
-export default TreeCache;
+export default TreeCache;

src/Tree/index.js

@@ -1,6 +1,6 @@
 import Tree from './Tree';
 import ComputedTree from './ComputedTree';
 
-export { Tree, ComputedTree };
+export {Tree, ComputedTree};
 
-export default Tree;
+export default Tree;

src/components/Content/__tests__/content/tags.test.js

@@ -0,0 +1,101 @@
+import {fireEvent, within} from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import {Classes} from '@blueprintjs/select';
+import {act, render, StoreCreator, screen} from '../../../../../test-utils';
+import Content from '../../index';
+
+//const path = creator.createPath('/user/abc');
+//stores.uiStore.setActiveNode(path);
+//const {container} = render(<Content />, {providerProps: {value: stores}});
+
+describe('Tags tests', () => {
+  const getTagBtn = () => screen.getByRole('button', {name: /tags/});
+
+  const getPopover = () => {
+    return document.querySelector(`.tagpopover`);
+  };
+
+  const getTagsInsideSelect = () => {
+    return getPopover().querySelectorAll('.bp3-tag');
+  };
+
+  const getNoResultDropdown = () => {
+    return document.querySelector('.tagsuggest-noresult');
+  };
+
+  const getSuggestionsPopup = () => {
+    return document.querySelector(`.${Classes.MULTISELECT_POPOVER}`);
+  };
+
+  it('can add global tags', async () => {
+    const {stores} = StoreCreator();
+    render(<Content />, {providerProps: {value: stores}});
+    expect(getTagBtn()).toBeInTheDocument();
+
+    userEvent.click(getTagBtn());
+    expect(getTagsInsideSelect()).toHaveLength(0);
+
+    // Add a tag
+    await userEvent.type(within(getPopover()).getByRole(/textbox/), 'cxtag', {
+      delay: 1,
+    });
+    userEvent.keyboard('{Enter}');
+
+    expect(getTagsInsideSelect()).toHaveLength(1);
+    expect(getTagsInsideSelect()[0]).toHaveTextContent(/cxtag/);
+    expect(getNoResultDropdown()).not.toBeInTheDocument();
+
+    // Tags are also added to suggestions
+    expect(within(getSuggestionsPopup()).getAllByRole(/listitem/)).toHaveLength(
+      1,
+    );
+    expect(
+      within(getSuggestionsPopup()).getAllByRole(/listitem/)[0],
+    ).toHaveTextContent(/cxtag/);
+  });
+
+  it('has no suggestions when no global tags are present', async () => {
+    const {stores} = StoreCreator();
+
+    render(<Content />, {providerProps: {value: stores}});
+    expect(getTagBtn()).toBeInTheDocument();
+
+    userEvent.click(getTagBtn());
+    expect(getTagsInsideSelect()).toHaveLength(0);
+
+    // Check list dropdown
+    await act(async () => {
+      await userEvent.click(within(getPopover()).getByRole(/textbox/));
+    });
+
+    expect(getTagsInsideSelect()).toHaveLength(0);
+    expect(getNoResultDropdown()).toBeInTheDocument();
+    expect(getNoResultDropdown()).toHaveTextContent(/No results./);
+  });
+
+  it('shows global tags suggestions in path node', async () => {
+    const {stores, creator} = StoreCreator();
+
+    const {rerender} = render(<Content />, {providerProps: {value: stores}});
+    // Add a tag
+    userEvent.click(getTagBtn());
+    await userEvent.type(within(getPopover()).getByRole(/textbox/), 'cxtag', {
+      delay: 1,
+    });
+    userEvent.keyboard('{Enter}');
+
+    const path = creator.createPath('/user/abc');
+    stores.uiStore.setActiveNode(path);
+
+    rerender(<Content />, {providerProps: {value: stores}});
+    userEvent.click(getTagBtn());
+    expect(getTagsInsideSelect()).toHaveLength(0);
+    expect(within(getSuggestionsPopup()).getAllByRole(/listitem/)).toHaveLength(
+      1,
+    );
+    expect(
+      within(getSuggestionsPopup()).getAllByRole(/listitem/)[0],
+    ).toHaveTextContent(/cxtag/);
+  });
+});

src/components/Content/index.js

@@ -39,13 +39,9 @@ const getComponentForNode = (node) => {
   }
 };
 
-const SubContent = observer(({node}) => {
+const SubContent = observer(({node, relativeJsonPath}) => {
   const stores = React.useContext(StoresContext);
   const {activeWidget, widgets} = stores.uiStore;
-  let relativeJsonPath = [];
-  if (node.category === NodeCategories.SourceMap) {
-    relativeJsonPath = node.relativeJsonPath;
-  }
   const RenderSubContent = getComponentForNode(node);
   return activeWidget ? (
     <div className="flex-1 relative flex">
@@ -67,11 +63,16 @@ const Content = observer(() => {
   const stores = React.useContext(StoresContext);
   const {activeNode, activeView, views} = stores.uiStore;
   const sourceNode = stores.graphStore.rootNode;
+  const node = activeNode || sourceNode;
+  const relativeJsonPath =
+    node.category === NodeCategories.SourceMap ? node.relativeJsonPath : [];
 
   return (
     <StyledContent className={'flex flex-col flex-1'}>
       <div className="bp3-dark relative flex flex-1 flex-col bg-canvas">
         <Options
+          relativeJsonPath={relativeJsonPath}
+          node={node}
           view={activeView}
           onToggleView={(v) => stores.uiStore.setActiveView(v)}
           onToggleWidget={(w) => stores.uiStore.setActiveWidget(w)}
@@ -80,7 +81,7 @@ const Content = observer(() => {
           }}
         />
         {activeView === views.form && (
-          <SubContent node={activeNode || sourceNode} />
+          <SubContent node={node} relativeJsonPath={relativeJsonPath} />
         )}
         {activeView === views.code && <MonacoEditor />}
         {activeView === views.preview && (

src/components/Content/options.js

@@ -5,10 +5,11 @@ import classnames from 'classnames';
 import {Button, ButtonGroup, Icon, Intent} from '@blueprintjs/core';
 import {StoresContext} from '../Context';
 import {NodeCategories} from '../../datasets/tree';
+import Tags from './tags';
 
-const Options = observer((props) => {
+const Options = observer(({relativeJsonPath, node, ...props}) => {
   const stores = React.useContext(StoresContext);
-  const {activeNode, activeWidget, widgets} = stores.uiStore;
+  const {activeWidget, widgets} = stores.uiStore;
   const [confirmDelete, setConfirmDelete] = React.useState(false);
   const {errors, hints, info, warning} = stores.lintStore;
 
@@ -28,8 +29,9 @@ const Options = observer((props) => {
           'border-transparent': !activeWidget,
         },
       )}>
-      {activeNode && activeNode.category === NodeCategories.SourceMap && (
-        <div className="flex items-center">
+      <div className="flex items-center">
+        <Tags relativeJsonPath={relativeJsonPath} node={node} />
+        {node && node.category === NodeCategories.SourceMap && (
           <Button
             small
             icon={<Icon size={14} icon="trash" />}
@@ -47,8 +49,8 @@ const Options = observer((props) => {
               }
             }}
           />
-        </div>
-      )}
+        )}
+      </div>
       <div className="flex-1" />
       <div>
         <ButtonGroup>

src/components/Content/tags.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {observer} from 'mobx-react-lite';
+import {uniq} from 'lodash';
+import {getValueFromStore, usePatchOperation} from '../../utils/selectors';
+import {Button, Icon} from '@blueprintjs/core';
+import {TagSuggest} from '../Pickers';
+import {NodeCategories, nodeOperations} from '../../datasets/tree';
+import {Popover2} from '@blueprintjs/popover2';
+
+const Tags = observer(({relativeJsonPath, node}) => {
+  const handlePatch = usePatchOperation();
+  const getTags = React.useCallback(() => {
+    let tags =
+      getValueFromStore(relativeJsonPath.concat(['tags']), false) || [];
+    if (relativeJsonPath.length === 0) {
+      tags = tags.map((i) => i.name);
+    }
+    return tags;
+  }, [relativeJsonPath]);
+
+  const getSuggestions = React.useCallback(
+    (tags) => {
+      let globalTags = getValueFromStore(['tags'], false) || [];
+      globalTags = globalTags.map((i) => i.name);
+      return uniq([...tags, ...globalTags]);
+    },
+    [relativeJsonPath],
+  );
+
+  const tags = getTags();
+  const suggestedTags = getSuggestions(tags);
+
+  const displayTags = (tags) => {
+    if (tags && tags.length > 1) {
+      return `${tags[0]} + ${tags.length - 1}`;
+    }
+    return tags.length ? tags[0] : tags;
+  };
+
+  return (
+    <Popover2
+      content={
+        <TagSuggest
+          className="tag-suggest"
+          popoverClassname="tagpopover"
+          items={suggestedTags}
+          selectedItems={tags}
+          onItemSelect={(item) => {
+            let toSave = [...tags, item];
+            if (node.category !== NodeCategories.SourceMap) {
+              toSave = toSave.map((i) => ({name: i}));
+            }
+            handlePatch(
+              nodeOperations.Add,
+              relativeJsonPath.concat(['tags']),
+              toSave,
+            );
+          }}
+          onItemRemove={(item) => {
+            let remaining = tags.filter((t) => t !== item);
+            if (node.category !== NodeCategories.SourceMap) {
+              remaining = remaining.map((t) => ({name: t}));
+            }
+            handlePatch(
+              nodeOperations.Replace,
+              relativeJsonPath.concat(['tags']),
+              remaining,
+            );
+          }}
+        />
+      }
+      placement="bottom">
+      <Button
+        small
+        aria-label="tags"
+        className="max-w-xs mr-3 truncate"
+        icon={<Icon size={14} icon="tag" />}
+        text={displayTags(tags)}
+      />
+    </Popover2>
+  );
+});
+
+Tags.propTypes = {
+  relativeJsonPath: PropTypes.array,
+  node: PropTypes.object,
+};
+
+export default Tags;

src/components/Pickers/TagSuggest.js

@@ -0,0 +1,104 @@
+//@flow
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Icon, MenuItem} from '@blueprintjs/core';
+import {MultiSelect} from '@blueprintjs/select';
+import {highlightText} from '../../utils';
+
+const TagSuggest = ({
+  items,
+  selectedItems,
+  onItemSelect,
+  onItemRemove,
+  className,
+  ...props
+}) => {
+  const filterTags = (query, tag, _index, exactMatch) => {
+    const normalizedTitle = tag.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return tag.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  const itemRenderer = (text, {modifiers, handleClick, query}) =>
+    modifiers.matchesPredicate ? (
+      <MenuItem
+        active={modifiers.active}
+        key={text}
+        data-testid={text}
+        onClick={handleClick}
+        shouldDismissPopover={false}
+        icon={
+          selectedItems.indexOf(text) >= 0 ? (
+            <Icon size={12} icon="small-tick" />
+          ) : undefined
+        }
+        text={highlightText(text, query)}
+      />
+    ) : null;
+
+  const newItemRenderer = React.useCallback(
+    (item, isActive, onClick) => (
+      <MenuItem
+        icon="add"
+        text={`Create "${item}"`}
+        active={isActive}
+        onClick={onClick}
+        shouldDismissPopover={false}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <MultiSelect
+      className={className}
+      selectedItems={selectedItems}
+      items={items}
+      noResults={
+        <MenuItem
+          className="tagsuggest-noresult"
+          disabled={true}
+          text="No results."
+        />
+      }
+      tagRenderer={(item) => item}
+      itemRenderer={itemRenderer}
+      createNewItemFromQuery={(e) => e}
+      createNewItemRenderer={newItemRenderer}
+      onItemSelect={(item) => onItemSelect(item)}
+      tagInputProps={{
+        onRemove: (item) => onItemRemove(item),
+      }}
+      inputProps={{
+        placeholder: 'Create or choose existing',
+      }}
+      popoverProps={{
+        minimal: true,
+        targetClassName: `w-full ${props.popoverClassname || ''}`,
+        shouldReturnFocusOnClose: false,
+      }}
+      itemPredicate={filterTags}
+      resetOnClose={false}
+      resetOnQuery={false}
+      resetOnSelect={true}
+    />
+  );
+};
+
+TagSuggest.propTypes = {
+  inputRef: PropTypes.any,
+  selectedItems: PropTypes.array,
+  className: PropTypes.string,
+  popoverClassname: PropTypes.string,
+  items: PropTypes.array,
+  selectedItem: PropTypes.any,
+  onItemSelect: PropTypes.func,
+  onItemRemove: PropTypes.func,
+};
+
+export default TagSuggest;