Fix for sidebar search result based on Pretty name flag (#1485)

* Fix for sidebar search result based on Pretty name flag Signed-off-by: Jitendra Gundaniya <[email protected]> * Release note and test added Signed-off-by: Jitendra Gundaniya <[email protected]> * Fix for highlighting searched text irrespective of pretty text flag * Update RELEASE.md Co-authored-by: Tynan DeBold <[email protected]> --------- Signed-off-by: Jitendra Gundaniya <[email protected]> Co-authored-by: Tynan DeBold <[email protected]>
kedro-org · Aug 17, 2023 · 713cd77 · 713cd77
1 parent 50ebfe6
commit 713cd77
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 1 deletion.
diff --git a/RELEASE.md b/RELEASE.md
@@ -18,6 +18,7 @@ Please follow the established format:
 - Fix incorrect rendering of datasets in modular pipelines. (#1439)
 - Fix broken SVG/PNG exports in light theme. (#1463)
 - Fix dataset and global toolbar error with standalone React component (#1351)
+- Fix Sidebar search result based on Pretty name setting (#1485)
 - Fix `ImportError` as kedro-datasets is now lazily loaded (#1481).
 - Fix issue of encountering a blank page in Safari when interacting with modular pipelines. (#1488)
 

diff --git a/src/selectors/modular-pipelines.js b/src/selectors/modular-pipelines.js
@@ -44,6 +44,13 @@ export const searchTree = (
       // if the child node is a leaf, simply search the leaf's name
       // and add to the search result if there is a match.
       const found = searchString(childNode.data.name, searchValue);
+      const foundOpposite = searchString(
+        childNode.data.oppositeForPrettyName,
+        searchValue
+      );
+
+      //First looking for match based on prettyName flag and render accordingly
+      // and if not found than rendering based on opposite of prettyName flag
       if (found) {
         foundChildren.push({
           ...childNode,
@@ -55,6 +62,19 @@ export const searchTree = (
             ),
           },
         });
+      } else {
+        if (foundOpposite) {
+          foundChildren.push({
+            ...childNode,
+            data: {
+              ...childNode.data,
+              highlightedLabel: getHighlightedText(
+                childNode.data.oppositeForPrettyName,
+                searchValue
+              ),
+            },
+          });
+        }
       }
     } else {
       // if the child node is a tree, recursively search it

diff --git a/src/selectors/nodes.js b/src/selectors/nodes.js
@@ -113,6 +113,15 @@ export const getNodeLabel = createSelector(
     isPrettyName ? nodeName : nodeFullName
 );
 
+/**
+ * Returns opposite node label based on if pretty name is turned on/off
+ */
+export const getOppositeForPrettyName = createSelector(
+  [getIsPrettyName, getNodeName, getNodeFullName],
+  (isPrettyName, nodeName, nodeFullName) =>
+    isPrettyName ? nodeFullName : nodeName
+);
+
 /**
  * Returns formatted nodes as an array, with all relevant properties
  */
@@ -182,6 +191,7 @@ export const getNodeDataObject = createSelector(
     getNodeDisabledTag,
     getNodeTypeDisabled,
     getNodeModularPipelines,
+    getOppositeForPrettyName,
   ],
   (
     nodeIDs,
@@ -193,12 +203,14 @@ export const getNodeDataObject = createSelector(
     nodeDisabledNode,
     nodeDisabledTag,
     typeDisabled,
-    nodeModularPipelines
+    nodeModularPipelines,
+    oppositeForPrettyName
   ) =>
     nodeIDs.reduce((obj, id) => {
       obj[id] = {
         id,
         name: nodeLabel[id],
+        oppositeForPrettyName: oppositeForPrettyName[id],
         type: nodeType[id],
         icon: getShortType(nodeDatasetType[id], nodeType[id]),
         modularPipelines: nodeModularPipelines[id],

diff --git a/src/selectors/nodes.test.js b/src/selectors/nodes.test.js
@@ -12,6 +12,7 @@ import {
   getNodesWithInputParams,
   getInputOutputNodesForFocusedModularPipeline,
   getNodeLabel,
+  getOppositeForPrettyName,
 } from './nodes';
 import {
   toggleTextLabels,
@@ -132,6 +133,33 @@ describe('Selectors', () => {
       expect(nodeLabels[nodeId]).toEqual(nodePrettyName);
     });
   });
+
+  describe('getOppositeForPrettyName', () => {
+    it('returns opposite node labels with full name when pretty name is turned off', () => {
+      const nodes = getVisibleNodes(mockState.spaceflights);
+      const nodeId = nodes[0].id;
+      const nodePrettyName = nodes[0].name;
+      const newMockState = reducer(
+        mockState.spaceflights,
+        toggleIsPrettyName(false)
+      );
+      const nodeLabels = getOppositeForPrettyName(newMockState);
+
+      expect(nodeLabels[nodeId]).toEqual(nodePrettyName);
+    });
+
+    it('returns opposite node labels with pretty name when pretty name is turned on', () => {
+      const nodes = getVisibleNodes(mockState.spaceflights);
+      const nodeId = nodes[0].id;
+      const nodeFullName = nodes[0].fullName;
+      const newMockState = reducer(
+        mockState.spaceflights,
+        toggleIsPrettyName(true)
+      );
+      const nodeLabels = getOppositeForPrettyName(newMockState);
+      expect(nodeLabels[nodeId]).toEqual(nodeFullName);
+    });
+  });
 });
 
 describe('getNodeData', () => {