Fix for sidebar search result based on Pretty name flag

RELEASE.md

@@ -16,6 +16,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 (#1252)
 - Fix `ImportError` as kedro-datasets is now lazily loaded (#1481).
 
 # Release 6.3.4

src/selectors/modular-pipelines.js

@@ -44,7 +44,12 @@ 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);
-      if (found) {
+      const foundOpposite = searchString(
+        childNode.data.oppositeForPrettyName,
+        searchValue
+      );
+
+      if (found || foundOpposite) {
         foundChildren.push({
           ...childNode,
           data: {

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],

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', () => {