fix: the dialog name does not update in the navigation pane when changed in the properties panel

Composer/packages/adaptive-form/src/components/FormTitle.tsx

@@ -96,9 +96,9 @@ const FormTitle: React.FC<FormTitleProps> = (props) => {
   const uiSubtitle = typeof uiOptions?.subtitle === 'function' ? uiOptions.subtitle(formData) : uiOptions.subtitle;
   const initialValue = useMemo(() => {
     const designerName = formData.$designer?.name;
-
-    return designerName ?? uiLabel ?? schema.title;
-  }, [formData.$designer?.name, uiLabel, schema.title]);
+    const id = formData.id;
+    return designerName ?? id ?? uiLabel ?? schema.title;
+  }, [formData.$designer?.name, uiLabel, schema.title, formData.id]);
 
   const getHelpLinkLabel = (): string => {
     return (uiLabel || schema.title || '').toLowerCase();

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

@@ -97,7 +97,7 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => {
 
   initialBreadcrumbArray.push({
     key: buildKey(BreadcrumbKeyPrefix.Dialog, dialogId),
-    label: dialogMap[dialogId]?.$designer?.name ?? dialogMap[dialogId]?.$designer?.$designer?.name,
+    label: getFriendlyName(dialogMap[dialogId], true),
     link: {
       projectId: projectId,
       dialogId: dialogId,
@@ -108,7 +108,7 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => {
   if (triggerIndex != null && trigger != null) {
     initialBreadcrumbArray.push({
       key: buildKey(BreadcrumbKeyPrefix.Trigger, triggerIndex),
-      label: trigger.$designer?.name || getFriendlyName(trigger),
+      label: getFriendlyName(trigger),
       link: {
         projectId: projectId,
         dialogId: dialogId,
@@ -139,7 +139,7 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => {
 
         switch (prefix) {
           case BreadcrumbKeyPrefix.Dialog:
-            b.label = getFriendlyName(currentDialog.content);
+            b.label = getFriendlyName(currentDialog.content, true);
             break;
           case BreadcrumbKeyPrefix.Trigger:
             b.label = getFriendlyName(get(currentDialog.content, `triggers[${name}]`));

Composer/packages/client/src/recoilModel/dispatchers/dialogs.ts

@@ -84,7 +84,7 @@ export const dialogsDispatcher = () => {
     const { set, snapshot } = callbackHelpers;
     const fixedContent = JSON.parse(autofixReferInDialog(id, JSON.stringify(content)));
     const schemas = await snapshot.getPromise(schemasState(projectId));
-    const dialog = { isRoot: false, displayName: id, ...dialogIndexer.parse(id, fixedContent) };
+    const dialog = { isRoot: false, ...dialogIndexer.parse(id, fixedContent) };
 
     if (typeof dialog.content === 'object') {
       dialog.content.id = id;

Composer/packages/lib/indexers/src/dialogIndexer.ts

@@ -184,7 +184,7 @@ function extractReferredSkills(dialog): string[] {
   return uniq(skills);
 }
 
-function parse(id: string, content: any) {
+function parse(id: string, content: any, botName = '', isRoot = false) {
   const luFile = typeof content.recognizer === 'string' ? content.recognizer : '';
   const qnaFile = typeof content.recognizer === 'string' ? content.recognizer : '';
   const lgFile = typeof content.generator === 'string' ? content.generator : '';
@@ -194,6 +194,7 @@ function parse(id: string, content: any) {
     id,
     content,
     diagnostics,
+    displayName: get(content, '$designer.name', isRoot && botName ? `${botName}` : id),
     referredDialogs: extractReferredDialogs(content),
     lgTemplates: extractLgTemplates(id, content),
     referredLuIntents: extractLuIntents(content, id),
@@ -222,8 +223,7 @@ function index(files: FileInfo[], botName: string): DialogInfo[] {
           const isRoot = file.relativePath.includes('/') === false; // root dialog should be in root path
           const dialog: DialogInfo = {
             isRoot,
-            displayName: get(dialogJson, '$designer.name', isRoot ? `${botName}` : id),
-            ...parse(id, dialogJson),
+            ...parse(id, dialogJson, botName),
           };
           dialogs.push(dialog);
         }

Composer/packages/lib/shared/src/dialogFactory.ts

@@ -4,7 +4,7 @@
 import { JSONSchema7 } from 'json-schema';
 import merge from 'lodash/merge';
 import formatMessage from 'format-message';
-import { DesignerData, MicrosoftIDialog, LuIntentSection, SDKKinds } from '@botframework-composer/types';
+import { DesignerData, MicrosoftIDialog, LuIntentSection, SDKKinds, BaseSchema } from '@botframework-composer/types';
 
 import { copyAdaptiveAction } from './copyUtils';
 import { deleteAdaptiveAction, deleteAdaptiveActionList } from './deleteUtils';
@@ -25,13 +25,18 @@ const initialInputDialog = {
   defaultValueResponse: '',
 };
 
-export function getFriendlyName(data): string {
-  if (data?.$designer?.name) {
-    return data?.$designer?.name;
+export function getFriendlyName(data: BaseSchema, isDialog = false): string {
+  if (!data) return '';
+  if (data.$designer?.name !== undefined) {
+    return data.$designer?.name;
   }
 
-  if (data?.intent) {
-    return `${data?.intent}`;
+  if (isDialog) {
+    return data.id;
+  }
+
+  if (data.intent) {
+    return `${data.intent}`;
   }
 
   return conceptLabels()[data.$kind]?.title ?? data.$kind;