fix: get projectId from link in tree navigation

Composer/packages/client/src/pages/design/SideBar.tsx

@@ -103,28 +103,32 @@ const SideBar: React.FC<SideBarProps> = React.memo(({ projectId }) => {
   const setBrokenSkillInfo = useSetRecoilState(brokenSkillInfoState);
   const setAddSkillDialogModalVisibility = useSetRecoilState(showAddSkillDialogModalState);
 
-  function handleSelect(link: TreeLink) {
-    if (link.botError) {
-      setBrokenSkillInfo(link);
+  function handleSelect(destination: TreeLink) {
+    if (destination.botError) {
+      setBrokenSkillInfo(destination);
     }
-    const { skillId, dialogId, trigger } = link;
+    const {
+      skillId: targetSkillId,
+      dialogId: targetDialogId,
+      trigger: targetTrigger,
+      projectId: targetProjectId,
+    } = destination;
 
     updateZoomRate({ currentRate: 1 });
 
-    if (trigger != null) {
-      selectTo(skillId ?? null, dialogId ?? null, `triggers[${trigger}]`);
-    } else if (dialogId != null) {
-      navTo(skillId ?? projectId, dialogId);
+    if (targetTrigger != null) {
+      selectTo(targetSkillId ?? null, targetDialogId ?? null, `triggers[${targetTrigger}]`);
+    } else if (targetDialogId != null) {
+      navTo(targetSkillId ?? targetProjectId, targetDialogId);
     } else {
       // with no dialog or ID, we must be looking at a bot link
-      navTo(skillId ?? projectId, null);
+      navTo(targetSkillId ?? targetProjectId, null);
     }
   }
 
-  const onCreateDialogComplete = (projectId: string) => (dialogId: string) => {
-    const target = projectId;
-    if (dialogId) {
-      navTo(target, dialogId);
+  const onCreateDialogComplete = (targetProjectId: string) => (targetDialogId: string) => {
+    if (targetDialogId) {
+      navTo(targetProjectId, targetDialogId);
     }
   };
 
@@ -262,30 +266,28 @@ const SideBar: React.FC<SideBarProps> = React.memo(({ projectId }) => {
   const selectedTrigger = currentDialog?.triggers.find((t) => t.id === selected);
 
   return (
-    <React.Fragment>
-      <ProjectTree
-        headerMenu={projectTreeHeaderMenuItems}
-        selectedLink={{
-          projectId: rootProjectId,
-          skillId: rootProjectId === projectId ? undefined : projectId,
-          dialogId,
-          trigger: parseTriggerId(selectedTrigger?.id),
-        }}
-        onBotCreateDialog={handleCreateDialog}
-        onBotDeleteDialog={handleDeleteDialog}
-        onBotEditManifest={handleDisplayManifestModal}
-        onBotExportZip={exportToZip}
-        onBotRemoveSkill={handleRemoveSkill}
-        onBotStart={startSingleBot}
-        onBotStop={stopSingleBot}
-        onDialogCreateTrigger={(projectId, dialogId) => {
-          setTriggerModalInfo({ projectId, dialogId });
-        }}
-        onDialogDeleteTrigger={handleDeleteTrigger}
-        onErrorClick={handleErrorClick}
-        onSelect={handleSelect}
-      />
-    </React.Fragment>
+    <ProjectTree
+      headerMenu={projectTreeHeaderMenuItems}
+      selectedLink={{
+        projectId: rootProjectId,
+        skillId: rootProjectId === projectId ? undefined : projectId,
+        dialogId,
+        trigger: parseTriggerId(selectedTrigger?.id),
+      }}
+      onBotCreateDialog={handleCreateDialog}
+      onBotDeleteDialog={handleDeleteDialog}
+      onBotEditManifest={handleDisplayManifestModal}
+      onBotExportZip={exportToZip}
+      onBotRemoveSkill={handleRemoveSkill}
+      onBotStart={startSingleBot}
+      onBotStop={stopSingleBot}
+      onDialogCreateTrigger={(projectId, dialogId) => {
+        setTriggerModalInfo({ projectId, dialogId });
+      }}
+      onDialogDeleteTrigger={handleDeleteTrigger}
+      onErrorClick={handleErrorClick}
+      onSelect={handleSelect}
+    />
   );
 });