fix: unify display name function in client, visual editor

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx

@@ -3,10 +3,9 @@
 
 /** @jsx jsx */
 
-import { conceptLabels } from '@bfc/shared';
+import { conceptLabels, getFriendlyName } from '@bfc/shared';
 import { jsx } from '@emotion/core';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import get from 'lodash/get';
 
 import {
   triggerContainerStyle,
@@ -25,15 +24,8 @@ function getLabel(data: any): string {
   return data.$kind;
 }
 
-function getName(data: any): string {
-  return (
-    data.intent ||
-    get(data, '$designer.name', conceptLabels()[data.$kind] ? conceptLabels()[data.$kind].title : data.$kind)
-  );
-}
-
 export const TriggerSummary = ({ data, onClick = () => {} }): JSX.Element => {
-  const name = getName(data);
+  const name = getFriendlyName(data);
   const label = getLabel(data);
 
   return (

Composer/packages/client/__tests__/utils/dialogUtil.test.js

@@ -12,7 +12,6 @@ import {
   getTriggerTypes,
   getEventTypes,
   getActivityTypes,
-  getFriendlyName,
   getBreadcrumbLabel,
   getSelected,
 } from '../../src/utils/dialogUtil';
@@ -227,13 +226,6 @@ describe('getActivityTypes', () => {
   });
 });
 
-describe('getFriendlyName', () => {
-  it('return friendly name', () => {
-    const name = getFriendlyName(dialogs[0].content);
-    expect(name).toBe('kind1');
-  });
-});
-
 describe('getBreadcrumbLabel', () => {
   it('return breadcrumb label', () => {
     const name = getBreadcrumbLabel(dialogs, 'id1', null, null);

Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx

@@ -7,7 +7,7 @@ import { jsx, css } from '@emotion/core';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import formatMessage from 'format-message';
-import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity, LanguageFileImport } from '@bfc/shared';
+import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity, LanguageFileImport, getFriendlyName } from '@bfc/shared';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { useRecoilValue } from 'recoil';
@@ -23,7 +23,6 @@ import {
   pageElementState,
   projectTreeSelectorFamily,
 } from '../../recoilModel';
-import { getFriendlyName } from '../../utils/dialogUtil';
 import { triggerNotSupported } from '../../utils/dialogValidator';
 import { useFeatureFlag } from '../../utils/hooks';
 import { LoadingSpinner } from '../LoadingSpinner';

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

@@ -8,7 +8,7 @@ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcru
 import formatMessage from 'format-message';
 import { globalHistory, RouteComponentProps } from '@reach/router';
 import get from 'lodash/get';
-import { DialogInfo, PromptTab, getEditorAPI, registerEditorAPI, Diagnostic } from '@bfc/shared';
+import { DialogInfo, PromptTab, getEditorAPI, registerEditorAPI, Diagnostic, getFriendlyName } from '@bfc/shared';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { JsonEditor } from '@bfc/code-editor';
 import { EditorExtension, PluginConfig } from '@bfc/extension-client';
@@ -24,7 +24,6 @@ import { dialogStyle } from '../../components/Modal/dialogStyle';
 import { ProjectTree, TreeLink } from '../../components/ProjectTree/ProjectTree';
 import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { createDiagnosticsPageUrl, getFocusPath, navigateTo, createBotSettingUrl } from '../../utils/navigation';
-import { getFriendlyName } from '../../utils/dialogUtil';
 import { useShell } from '../../shell';
 import plugins, { mergePluginConfigs } from '../../plugins';
 import { useElectronFeatures } from '../../hooks/useElectronFeatures';
@@ -81,6 +80,13 @@ type BreadcrumbItem = {
   onClick?: () => void;
 };
 
+// field types
+const Types = {
+  Dialog: 'dialog',
+  Trigger: 'trigger',
+  Action: 'action',
+};
+
 const CreateSkillModal = React.lazy(() => import('../../components/CreateSkillModal'));
 const RepairSkillModal = React.lazy(() => import('../../components/RepairSkillModal'));
 const CreateDialogModal = React.lazy(() => import('./createDialogModal'));
@@ -249,7 +255,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       const breadcrumbArray: Array<BreadcrumbItem> = [];
 
       breadcrumbArray.push({
-        key: 'dialog-' + props.dialogId,
+        key: `${Types.Dialog}-${props.dialogId}`,
         label: dialogMap[props.dialogId]?.$designer?.name ?? dialogMap[props.dialogId]?.$designer?.$designer?.name,
         link: {
           projectId: props.projectId,
@@ -259,7 +265,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       });
       if (triggerIndex != null && trigger != null) {
         breadcrumbArray.push({
-          key: 'trigger-' + triggerIndex,
+          key: `${Types.Trigger}-${triggerIndex}`,
           label: trigger.$designer?.name || getFriendlyName(trigger),
           link: {
             projectId: props.projectId,
@@ -276,7 +282,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       if (params.get('focused') != null) {
         // we've linked to an action, so put that in too
         breadcrumbArray.push({
-          key: 'action-' + focusPath,
+          key: `${Types.Action}-${focusPath}`,
           label: getActionName(possibleAction),
         });
       }
@@ -309,6 +315,30 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     }
   }, [location]);
 
+  // get newest label for breadcrumbs
+  useEffect(() => {
+    if (currentDialog.content) {
+      setBreadcrumbs((prev) => {
+        return prev.map((b) => {
+          // eslint-disable-next-line security/detect-unsafe-regex
+          const regexp = new RegExp(/(?<type>[a-z]+)-(?<name>.*)/);
+          const { type, name } = b.key.match(regexp)?.groups || {};
+          switch (type) {
+            case Types.Dialog:
+              b.label = getFriendlyName(currentDialog.content);
+              break;
+            case Types.Trigger:
+              b.label = getFriendlyName(get(currentDialog.content, `triggers[${name}]`));
+              break;
+            case Types.Action:
+              b.label = getActionName(get(currentDialog.content, name));
+              break;
+          }
+          return b;
+        });
+      });
+    }
+  }, [currentDialog?.content]);
   useEffect(() => {
     registerEditorAPI('Editing', {
       Undo: () => undo(),
@@ -405,13 +435,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     const showDisableBtn = selectedActions.some((x) => get(x, 'disabled') !== true);
     const showEnableBtn = selectedActions.some((x) => get(x, 'disabled') === true);
 
-    if (selectedActions.length === 1 && selectedActions[0] != null) {
-      const action = selectedActions[0] as any;
-      const actionName = getActionName(action);
-
-      setBreadcrumbs((prev) => [...prev.slice(0, 2), { key: 'action-' + actionName, label: actionName }]);
-    }
-
     return { actionSelected, showDisableBtn, showEnableBtn };
   }, [visualEditorSelection, currentDialog?.content]);
 

Composer/packages/client/src/pages/design/exportSkillModal/content/SelectTriggers.tsx

@@ -4,13 +4,12 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useMemo } from 'react';
-import { DialogInfo, ITrigger, SDKKinds } from '@bfc/shared';
+import { DialogInfo, ITrigger, SDKKinds, getFriendlyName } from '@bfc/shared';
 import { Selection } from 'office-ui-fabric-react/lib/DetailsList';
 import { useRecoilValue } from 'recoil';
 import formatMessage from 'format-message';
 
 import { ContentProps } from '../constants';
-import { getFriendlyName } from '../../../../utils/dialogUtil';
 import { isSupportedTrigger } from '../generateSkillManifest';
 import { dialogsSelectorFamily, schemasState } from '../../../../recoilModel';
 

Composer/packages/client/src/utils/dialogUtil.ts

@@ -3,6 +3,7 @@
 
 import {
   conceptLabels as conceptLabelsFn,
+  getFriendlyName,
   DialogGroup,
   SDKKinds,
   dialogGroups,
@@ -264,19 +265,6 @@ function getDialogsMap(dialogs: DialogInfo[]): DialogsMap {
   }, {});
 }
 
-export function getFriendlyName(data): string {
-  const conceptLabels = conceptLabelsFn();
-  if (data?.$designer?.name) {
-    return data?.$designer?.name;
-  }
-
-  if (data?.intent) {
-    return `${data?.intent}`;
-  }
-
-  return conceptLabels[data.$kind]?.title ?? data.$kind;
-}
-
 const getLabel = (dialog: DialogInfo, dataPath: string) => {
   const data = get(dialog, dataPath);
   if (!data) return '';

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

@@ -3,6 +3,7 @@
 
 import has from 'lodash/has';
 import uniq from 'lodash/uniq';
+import get from 'lodash/get';
 import {
   extractLgTemplateRefs,
   SDKKinds,
@@ -221,7 +222,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: isRoot ? `${botName}` : id,
+            displayName: get(dialogJson, '$designer.name', isRoot ? `${botName}` : id),
             ...parse(id, dialogJson),
           };
           dialogs.push(dialog);

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

@@ -10,6 +10,7 @@ import { copyAdaptiveAction } from './copyUtils';
 import { deleteAdaptiveAction, deleteAdaptiveActionList } from './deleteUtils';
 import { FieldProcessorAsync } from './copyUtils/ExternalApi';
 import { generateDesignerId } from './generateUniqueId';
+import { conceptLabels } from './labelMap';
 
 interface DesignerAttributes {
   name: string;
@@ -24,6 +25,18 @@ const initialInputDialog = {
   defaultValueResponse: '',
 };
 
+export function getFriendlyName(data): string {
+  if (data?.$designer?.name) {
+    return data?.$designer?.name;
+  }
+
+  if (data?.intent) {
+    return `${data?.intent}`;
+  }
+
+  return conceptLabels()[data.$kind]?.title ?? data.$kind;
+}
+
 export function getNewDesigner(name: string, description: string) {
   return {
     $designer: {