Fix a bug when the component node and one of the namespaces nodes have the same name

lib/ui/src/modules/ui/components/left_panel/index.js

@@ -48,7 +48,7 @@ LeftPanel.defaultProps = {
 LeftPanel.propTypes = {
   storiesHierarchy: PropTypes.shape({
     namespaces: PropTypes.arrayOf(PropTypes.string),
-    current: PropTypes.string,
+    name: PropTypes.string,
     map: PropTypes.object,
   }),
   storyFilter: PropTypes.string,

lib/ui/src/modules/ui/components/left_panel/stories/index.js

@@ -78,13 +78,42 @@ const treeStyle = {
   },
 };
 
+function createNodeKey({ namespaces, type }) {
+  return [...namespaces, [type]].join(namespaceSeparator);
+}
+
+function getSelectedNodes(selectedHierarchy) {
+  return selectedHierarchy
+    .reduce((nodes, namespace, index) => {
+      const node = {};
+
+      node.type = selectedHierarchy.length - 1 === index
+        ? treeNodeTypes.COMPONENT
+        : treeNodeTypes.NAMESPACE;
+
+      if (!nodes.length) {
+        node.namespaces = [namespace];
+      } else {
+        const lastNode = nodes[nodes.length - 1];
+        node.namespaces = [...lastNode.namespaces, [namespace]];
+      }
+
+      nodes.push(node);
+
+      return nodes;
+    }, [])
+    .reduce((nodesMap, node) => ({ ...nodesMap, [createNodeKey(node)]: true }), {});
+}
+
 class Stories extends React.Component {
   constructor(...args) {
     super(...args);
     this.onToggle = this.onToggle.bind(this);
 
+    const { selectedHierarchy } = this.props;
+
     this.state = {
-      nodes: this.getSelectedNodes(),
+      nodes: getSelectedNodes(selectedHierarchy),
     };
   }
 
@@ -102,28 +131,11 @@ class Stories extends React.Component {
     this.setState(prevState => ({
       nodes: {
         ...prevState.nodes,
-        [node.namespaces.join(namespaceSeparator)]: toggled,
+        [node.key]: toggled,
       },
     }));
   }
 
-  getSelectedNodes() {
-    const { selectedHierarchy } = this.props;
-
-    return selectedHierarchy
-      .reduce((nodes, namespace) => {
-        if (!nodes.length) {
-          nodes.push(namespace);
-        } else {
-          const last = nodes[nodes.length - 1];
-          nodes.push(`${last}${namespaceSeparator}${namespace}`);
-        }
-
-        return nodes;
-      }, [])
-      .reduce((nodesMap, node) => ({ ...nodesMap, [node]: true }), {});
-  }
-
   fireOnKind(kind) {
     const { onSelectStory } = this.props;
     if (onSelectStory) onSelectStory(kind, null);
@@ -137,11 +149,10 @@ class Stories extends React.Component {
   mapStoriesHierarchy(storiesHierarchy) {
     const treeModel = {
       namespaces: storiesHierarchy.namespaces,
-      toggled: this.state.nodes[storiesHierarchy.namespaces.join(namespaceSeparator)],
+      name: storiesHierarchy.name,
     };
 
     if (storiesHierarchy.isNamespace) {
-      treeModel.name = storiesHierarchy.current;
       treeModel.type = treeNodeTypes.NAMESPACE;
 
       if (storiesHierarchy.map.size > 0) {
@@ -156,7 +167,6 @@ class Stories extends React.Component {
     } else {
       const { selectedStory, selectedKind } = this.props;
 
-      treeModel.name = storiesHierarchy.name;
       treeModel.kind = storiesHierarchy.kind;
       treeModel.type = treeNodeTypes.COMPONENT;
 
@@ -169,6 +179,9 @@ class Stories extends React.Component {
       }));
     }
 
+    treeModel.key = createNodeKey(treeModel);
+    treeModel.toggled = this.state.nodes[treeModel.key];
+
     return treeModel;
   }
 
@@ -199,7 +212,7 @@ Stories.defaultProps = {
 Stories.propTypes = {
   storiesHierarchy: PropTypes.shape({
     namespaces: PropTypes.arrayOf(PropTypes.string),
-    current: PropTypes.string,
+    name: PropTypes.string,
     map: PropTypes.object,
   }),
   selectedHierarchy: PropTypes.arrayOf(PropTypes.string).isRequired,

lib/ui/src/modules/ui/libs/hierarchy.js

@@ -15,7 +15,7 @@ function fillHierarchy(namespaces, hierarchy, story) {
   if (!childHierarchy) {
     childHierarchy = {
       isNamespace: true,
-      current: namespace,
+      name: namespace,
       namespaces: [...hierarchy.namespaces, namespace],
       firstKind: story.kind,
       map: new Map(),
@@ -40,7 +40,7 @@ export function createHierarchy(stories, hierarchySeparator) {
   const hierarchyRoot = {
     isNamespace: true,
     namespaces: [],
-    current: '',
+    name: '',
     map: new Map(),
   };
 

lib/ui/src/modules/ui/libs/hierarchy.test.js

@@ -7,7 +7,7 @@ describe('manager.ui.libs.hierarchy', () => {
 
       expect(result).toEqual({
         namespaces: [],
-        current: '',
+        name: '',
         isNamespace: true,
         map: new Map(),
       });
@@ -18,7 +18,7 @@ describe('manager.ui.libs.hierarchy', () => {
 
       expect(result).toEqual({
         namespaces: [],
-        current: '',
+        name: '',
         isNamespace: true,
         map: new Map(),
       });
@@ -73,7 +73,7 @@ describe('manager.ui.libs.hierarchy', () => {
           'some',
           [
             {
-              current: 'some',
+              name: 'some',
               firstKind: 'some.name.item1',
               isNamespace: true,
               namespaces: ['some'],
@@ -82,7 +82,7 @@ describe('manager.ui.libs.hierarchy', () => {
                   'name',
                   [
                     {
-                      current: 'name',
+                      name: 'name',
                       firstKind: 'some.name.item1',
                       isNamespace: true,
                       namespaces: ['some', 'name'],
@@ -110,7 +110,7 @@ describe('manager.ui.libs.hierarchy', () => {
           'another',
           [
             {
-              current: 'another',
+              name: 'another',
               firstKind: 'another.space.20',
               isNamespace: true,
               namespaces: ['another'],
@@ -119,7 +119,7 @@ describe('manager.ui.libs.hierarchy', () => {
                   'space',
                   [
                     {
-                      current: 'space',
+                      name: 'space',
                       firstKind: 'another.space.20',
                       isNamespace: true,
                       namespaces: ['another', 'space'],