left panel seems to work now

app/cdap/components/hydrator/components/LeftPanel/LeftPanel.tsx

@@ -24,6 +24,7 @@ import { Button } from '@material-ui/core';
 import styled from 'styled-components';
 import AvailablePluginsStore from 'services/AvailablePluginsStore';
 import { useOnUnmount } from 'services/react/customHooks/useOnUnmount';
+import { useSelector } from 'react-redux';
 
 interface ILeftPanelProps {
   onArtifactChange: (value: any) => void;
@@ -47,31 +48,17 @@ const StyledSelect = styled(Select)`
 
 export const LeftPanel = ({
   onArtifactChange,
-  selectedArtifact,
-  artifacts,
   itemGenericName,
-  groups,
   groupGenericName,
   onPanelItemClick,
   isEdit,
   createPluginTemplate,
 }: ILeftPanelProps) => {
   // angular has this saved in local storage - is this necessary?
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
-  const [availablePlugins, setAvailablePlugins] = useState(AvailablePluginsStore.getState());
-  let unsub;
-  useEffect(() => {
-    unsub = AvailablePluginsStore.subscribe(() => {
-      const avp = AvailablePluginsStore.getState();
-      if (avp.plugins) {
-        setAvailablePlugins(avp);
-      }
-    });
-  }, []);
 
-  useOnUnmount(() => {
-    unsub();
-  });
+  const {selectedArtifact, artifacts} = useSelector((state) => state.artifact)
+  const {pluginsMap, availablePluginMap} = useSelector((state) => state.plugins)
 
   return (
     <div className={`left-panel-wrapper ${isExpanded ? 'expanded' : ''}`}>
@@ -109,9 +96,9 @@ export const LeftPanel = ({
         </div>
         <div className="my-side-panel">
           <SidePanel
-            availablePlugins={availablePlugins}
+            availablePluginMap={availablePluginMap}
             itemGenericName={itemGenericName}
-            groups={groups}
+            groups={pluginsMap}
             groupGenericName={groupGenericName}
             onPanelItemClick={(event, plugin) => onPanelItemClick(event, plugin)}
             createPluginTemplate={createPluginTemplate}

app/cdap/components/hydrator/components/SidePanel/SidePanel.tsx

@@ -66,28 +66,37 @@ export const GlobalTooltipStyle = createGlobalStyle`
  }
 `;
 
-const organizePlugins = (pluginGroups, availablePlugins) => {
-  pluginGroups.forEach((group) => {
+const organizePlugins = (pluginGroups, availablePluginMap) => {
+  const pluginGroupsCopy = [...pluginGroups]
+  pluginGroupsCopy.map((group) => {
     if (!group.plugins?.length) {
       return;
     }
-    group.plugins.forEach((plugin) => {
-      plugin.displayName =
-        generateLabel(plugin, availablePlugins.plugins.pluginsMap) || plugin.name;
-      plugin.showCustomIcon = shouldShowCustomIcon(plugin, availablePlugins.plugins.pluginsMap);
-      plugin.customIconSrc = getCustomIconSrc(plugin, availablePlugins.plugins.pluginsMap);
+    const groupCopy = {...group}
+    groupCopy.plugins = group.plugins.map((plugin) => {
+      // Create a shallow copy of the plugin object
+      const pluginCopy = { ...plugin };
+
+      // Add or modify properties on the copy
+      pluginCopy.displayName = generateLabel(plugin, availablePluginMap) || plugin.name;
+      pluginCopy.showCustomIcon = shouldShowCustomIcon(plugin, availablePluginMap);
+      pluginCopy.customIconSrc = getCustomIconSrc(plugin, availablePluginMap);
+
+      // Return the modified copy to replace the original object in the array
+      return pluginCopy;
     });
 
-    group.plugins.sort((pluginA, pluginB) => {
+    groupCopy.plugins.sort((pluginA, pluginB) => {
       return pluginA.displayName < pluginB.displayName ? -1 : 1;
     });
+    return groupCopy
   });
 
-  return pluginGroups;
+  return pluginGroupsCopy;
 };
 
 interface ISidePanelProps {
-  availablePlugins: any;
+  availablePluginMap: any;
   itemGenericName: string;
   groups: any[];
   groupGenericName: string;
@@ -117,7 +126,7 @@ let allGroups;
  *    that altered plugin.defaultArtifact to the canvas and it automatically sends that to be saved...
  */
 export const SidePanel = ({
-  availablePlugins,
+  availablePluginMap,
   itemGenericName,
   groups,
   groupGenericName,
@@ -132,7 +141,7 @@ export const SidePanel = ({
 
   // keep track of number of plugins so if you create a template we can rerun organizePlugins
   const numberOfPlugins = groups.reduce((prev, curr) => {
-    return (prev += curr.plugins.length);
+    return (prev += curr.plugins ? curr.plugins.length: 0);
   }, 0);
 
   const handlePopperButtonClick = (popoverId: string) => (event: MouseEvent<HTMLButtonElement>) => {
@@ -155,13 +164,13 @@ export const SidePanel = ({
   }, [groups, groups.length]);
 
   useEffect(() => {
-    if (availablePlugins && availablePlugins.plugins) {
-      setPluginGroups(organizePlugins(pluginGroups, availablePlugins));
+    if (availablePluginMap) {
+      setPluginGroups(organizePlugins(groups, availablePluginMap));
     }
-  }, [availablePlugins]);
+  }, [availablePluginMap]);
 
   useEffect(() => {
-    setPluginGroups(organizePlugins(pluginGroups, availablePlugins));
+    setPluginGroups(organizePlugins(groups, availablePluginMap));
   }, [numberOfPlugins, JSON.stringify(groups)]);
 
   const handleSetSearch = debounce((text) => {
@@ -205,6 +214,9 @@ export const SidePanel = ({
   };
 
   const renderPlugins = (plugins: [any]) => {
+    if (!plugins) {
+      return
+    }
     return plugins.map((plugin) => {
       const id = `plugin-${plugin.name}-${plugin.type}`;
       const label = plugin.displayName || plugin.name;
@@ -328,7 +340,7 @@ export const SidePanel = ({
       // is in that group or use the accordion state
 
       let expanded = openedAccordions.indexOf(group.name) !== -1;
-      if (plugins.length === 0) {
+      if (!plugins || plugins.length === 0) {
         // closes accordion if no plugins are present after searching.
         expanded = false;
       }
@@ -349,7 +361,7 @@ export const SidePanel = ({
             data-cy={`plugin-${group.name}-group-summary`}
             data-testid={`plugin-${group.name}-group-summary`}
           >
-            <Chip label={plugins.length} size="small" />
+            <Chip label={plugins && plugins.length} size="small" />
             <StyledGroupName>{group.name}</StyledGroupName>
           </StyledAccordionSummary>
           <StyledAccordionDetails
@@ -362,7 +374,7 @@ export const SidePanel = ({
                 style={{ overflow: 'scroll' }}
               >
                 {renderPlugins(plugins)}
-                {plugins.length === 0 && (
+                {(!plugins || plugins.length) === 0 && (
                   <div className="no-item-message">
                     <h4>No {itemGenericName === '' ? itemGenericName : 'items'} found.</h4>
                   </div>

app/cdap/components/hydrator/components/StudioRoutes/Studio.tsx

@@ -19,6 +19,8 @@ import { LeftPanel } from 'components/hydrator/components/LeftPanel/LeftPanel';
 import { TopPanel } from 'components/hydrator/components/TopPanel/TopPanel';
 import { WrapperCanvas } from 'components/hydrator/components/Canvas';
 import PipelineDetailsRunLevelInfo from 'components/PipelineDetails/RunLevelInfo';
+import { Provider } from 'react-redux';
+import { configureStores } from 'components/hydrator/reducers';
 
 export interface IStudioCreateState {
   topPanelCtrl: any;
@@ -36,6 +38,7 @@ export const Studio = ({leftPanelCtrl, topPanelCtrl, canvasCtrl, dagCtrl, metada
       <div className="react-version">
         <div className="canvas-wrapper">
           <div className="left-control">
+          <Provider store={configureStores}>
             <LeftPanel
               onArtifactChange={leftPanelCtrl.onArtifactChangeV2}
               pluginsMap={leftPanelCtrl.pluginsMap}
@@ -48,6 +51,7 @@ export const Studio = ({leftPanelCtrl, topPanelCtrl, canvasCtrl, dagCtrl, metada
               isEdit={leftPanelCtrl.isEdit}
               createPluginTemplate={leftPanelCtrl.createPluginTemplateV2}
             />
+            </Provider>
           </div>
           <div className="top-panel">
             <TopPanel

app/cdap/components/hydrator/reducers/index.ts

@@ -15,13 +15,18 @@
  */
 import { configureStore } from '@reduxjs/toolkit';
 import reduxThunk from 'redux-thunk';
-import { pluginReducer, extensionsReducer } from './leftPanelStore';
+import { pluginReducer, extensionsReducer, artifactReducer } from './leftPanelStore';
 
 export const configureStores = configureStore({
   reducer: {
+    artifact: artifactReducer,
     extensions: extensionsReducer,
     plugins: pluginReducer,
   },
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(reduxThunk),
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+    serializableCheck: {
+    // Ignore these action types
+    ignoredActions: ['AVAILABLE_PLUGINS_FETCH'],
+  },}).concat(reduxThunk),
   devTools: true,
 });

app/cdap/components/hydrator/reducers/leftPanelStore.ts

@@ -75,16 +75,20 @@ const getDefaultVersionForPlugin = (plugin: any, defaultVersionMap = {}) => {
 
 // TODO type these actions
 const pluginsFetch = createAction<any>('PLUGINS_FETCH');
+const pluginsMapFetch = createAction<any>('PLUGINS_MAP_FETCH')
 const fetchAllPlugins = createAction<any>('FETCH_ALL_PLUGINS');
 const pluginTemplateFetch = createAction<any>('PLUGIN_TEMPLATE_FETCH');
 const pluginsDefaultVersionFetch = createAction<any>('PLUGINS_DEFAULT_VERSION_FETCH');
+const availablePluginsFetch = createAction<any>('AVAILABLE_PLUGINS_FETCH')
 const extensionsFetch = createAction<any>('EXTENSIONS_FETCH');
 const reset = createAction<any>('LEFTPANELSTORE_RESET');
 // unsure if this is used?
 // const pluginsDefaultVersionUpdate = createAction<any>('PLUGINS_DEFAULT_VERSION_UPDATE');
 const pluginDefaultVersionCheckAndUpdate = createAction<any>(
   'PLUGIN_DEFAULT_VERSION_CHECK_AND_UPDATE'
 );
+const artifactSet = createAction<any>('ARTIFACT_SET')
+const artifactsFetch = createAction<any>('ARTIFACTS_FETCH')
 
 export interface IDAGPlugin {
   name?: string;
@@ -96,9 +100,13 @@ const popoverTemplate =
   '/assets/features/hydrator/templates/create/popovers/leftpanel-plugin-popover.html';
 const getInitialState = () => {
   return {
+    selectedArtifact: {name: 'cdap-data-pipeline', version: '6.10.0-SNAPSHOT', scope: 'SYSTEM', label: 'Data Pipeline - Batch'},
+    artifacts: [],
     plugins: {
       pluginTypes: {},
       pluginToVersionMap: {},
+      pluginsMap: [],
+      availablePluginMap: {}
     },
     extensions: [],
   };
@@ -183,13 +191,40 @@ const getPluginsWithAddedInfo = (
   });
 };
 
+export const artifactReducer = createReducer(
+  {
+    selectedArtifact: {name: 'cdap-data-pipeline', version: '6.10.0-SNAPSHOT', scope: 'SYSTEM', label: 'Data Pipeline - Batch'},
+    artifacts: []
+  },
+  (builder) => {
+    builder
+    .addCase(artifactSet, (state, action) => {
+      state.selectedArtifact = action.payload.selectedArtifact
+    })
+    .addCase(artifactsFetch, (state, action) => {
+      state.artifacts = action.payload.artifacts
+    })
+    .addCase(reset, (state, action) => {
+      state.selectedArtifact = getInitialState().selectedArtifact
+    })
+  }
+)
+
 export const pluginReducer = createReducer(
   {
     pluginTypes: {},
     pluginToVersionMap: {},
+    pluginsMap: [],
+    availablePluginMap: {}
   },
   (builder) => {
     builder
+      .addCase(availablePluginsFetch, (state, action) => {
+        state.availablePluginMap = action.payload.availablePluginMap
+      })
+      .addCase(pluginsMapFetch, (state, action) => {
+        state.pluginsMap = action.payload.pluginsMap
+      })
       .addCase(pluginsFetch, (state, action) => {
         const { extension, plugins } = action.payload;
 

app/hydrator/controllers/create/leftpanel-ctrl.js

@@ -37,6 +37,7 @@ export class HydratorPlusPlusLeftPanelCtrl {
     } else {
       this.leftpanelStore = HydratorPlusPlusLeftPanelStore;
     }
+    this.ReactStores = window.ReactStores;
 
     window.leftPanelStore = this.leftPanelStore;
 
@@ -74,7 +75,7 @@ export class HydratorPlusPlusLeftPanelCtrl {
       let extensions = state.extensions;
       let pluginsList = state.plugins.pluginTypes;
 
-      this.pluginsMap.splice(0, this.pluginsMap.length);
+      this.pluginsMap = []
 
       if (!extensions.length) {
         return;
@@ -95,18 +96,31 @@ export class HydratorPlusPlusLeftPanelCtrl {
             pluginTypes: [ext] // Since we group plugin types now under one label we need ot keep track of fetchPlugins call for each plugin type.
           });
         } else {
-          fetchedPluginsMap[0].plugins = fetchedPluginsMap[0].plugins.concat(plugins);
-          fetchedPluginsMap[0].pluginTypes.push(ext);
+          if (plugins && fetchedPluginsMap[0].plugins) {
+            fetchedPluginsMap[0].plugins = fetchedPluginsMap[0].plugins.concat(plugins);
+            fetchedPluginsMap[0].pluginTypes.push(ext);
+          }
         }
       });
       this.pluginsMap = HydratorPlusPlusOrderingFactory.orderPluginTypes(this.pluginsMap);
+      this.ReactStores.dispatch({
+        type: 'PLUGINS_MAP_FETCH',
+        payload: {
+          pluginsMap: this.pluginsMap
+        }
+      })
     });
 
     let availablePluginSub = this.AvailablePluginsStore.subscribe(() => {
       this.availablePluginMap = this.AvailablePluginsStore.getState().plugins.pluginsMap;
+      this.ReactStores.dispatch({
+        type: 'AVAILABLE_PLUGINS_FETCH',
+        payload: {
+          availablePluginMap: this.availablePluginMap
+        }
+      })
     });
 
-
     var leftPanelStoreTimeout = $timeout(() => {
       this.leftpanelStore.dispatch({
         type: this.LEFTPANELSTORE_ACTIONS.PLUGIN_DEFAULT_VERSION_CHECK_AND_UPDATE
@@ -169,8 +183,19 @@ export class HydratorPlusPlusLeftPanelCtrl {
               return r;
             });
           that.artifacts = filteredRes;
-          that.selectedArtifact = filteredRes[0];
-
+          that.selectedArtifact = filteredRes[1];
+          this.ReactStores.dispatch({
+            type: 'ARTIFACTS_FETCH',
+            payload: {
+              artifacts: filteredRes
+            }
+          })
+          this.ReactStores.dispatch({
+            type: 'ARTIFACT_SET',
+            payload: {
+              selectedArtifact: filteredRes[1]
+            }
+          })
           that.artifactToRevert = that.selectedArtifact;
           return that.selectedArtifact;
         }
@@ -230,6 +255,20 @@ export class HydratorPlusPlusLeftPanelCtrl {
     this.selectedArtifact = this.artifacts.find((art) => {
       return art.name === newArtifact;
     });
+    this.ReactStores.dispatch({
+      type: 'ARTIFACT_SET',
+      payload: {
+        selectedArtifact: this.selectedArtifact
+      }
+    })
+    this.PipelineAvailablePluginsActions.fetchPlugins(
+      {
+        namespace: this.getNamespace(),
+        pipelineType: this.selectedArtifact.name,
+        version: this.version,
+        scope: this.$scope
+      }
+    );
     this._checkAndShowConfirmationModalOnDirtyState()
       .then(proceedToNextStep => {
         if (!proceedToNextStep) {