fix: Action title not displayed (microsoft#4524)

* handle functional `label` value

* conditional set fn title

* title fn be aware of data context

* update the type declaration

* fix the wrong tab title

* make sdkSchema optional

* fix ActionCard UT

* only process title instead of whole schema

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>

Composer/packages/adaptive-flow/__tests__/adaptive-flow-renderer/widgets/ActionCard.test.tsx

@@ -9,13 +9,16 @@ import { AdaptiveKinds } from '../../../src/adaptive-flow-renderer/constants/Ada
 
 describe('ActionCard', () => {
   it('can be rendered.', () => {
-    const card = render(<ActionCard data={{ $kind: AdaptiveKinds.SendActivity }} id="test" onEvent={() => null} />);
+    const card = render(
+      <ActionCard adaptiveSchema={{}} data={{ $kind: AdaptiveKinds.SendActivity }} id="test" onEvent={() => null} />
+    );
     expect(card).toBeTruthy();
   });
 
   it('can be rendered with injected content.', () => {
     const card = render(
       <ActionCard
+        adaptiveSchema={{}}
         body={<span data-testid="test-body">Body</span>}
         data={{ $kind: AdaptiveKinds.SendActivity }}
         footer={<span data-testid="test-footer">Footer</span>}

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx

@@ -4,7 +4,7 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import { FC, useContext, useCallback } from 'react';
-import { generateSDKTitle, PromptTab } from '@bfc/shared';
+import { generateActionTitle, PromptTab } from '@bfc/shared';
 import { useShellApi } from '@bfc/extension-client';
 
 import { AttrNames } from '../constants/ElementAttributes';
@@ -76,7 +76,7 @@ export const ActionNodeWrapper: FC<NodeWrapperProps> = ({ id, tab, data, onEvent
       `}
       data-testid="ActionNodeWrapper"
       {...declareElementAttributes(selectableId, id)}
-      aria-label={generateSDKTitle(data, '', tab)}
+      aria-label={generateActionTitle(data, '', '', tab)}
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();

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

@@ -4,7 +4,7 @@
 /** @jsx jsx */
 import { useContext } from 'react';
 import { jsx } from '@emotion/core';
-import { generateSDKTitle } from '@bfc/shared';
+import { generateActionTitle } from '@bfc/shared';
 import { WidgetComponent, WidgetContainerProps } from '@bfc/extension-client';
 
 import { DefaultColors } from '../../constants/ElementColors';
@@ -49,7 +49,7 @@ export const ActionHeader: WidgetComponent<ActionHeaderProps> = ({
   const textCSS = disabled ? DisabledHeaderTextCSS : HeaderTextCSS(colors.color);
   const iconColor = disabled ? DisabledIconColor : colors.icon;
 
-  const headerContent = disableSDKTitle ? title : generateSDKTitle(adaptiveSchema, data, title);
+  const headerContent = disableSDKTitle ? title : generateActionTitle(data, adaptiveSchema.title, title);
 
   const { NodeMenu } = useContext(RendererContext);
   const menuNode =

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

@@ -3,7 +3,7 @@
 
 import get from 'lodash/get';
 import formatMessage from 'format-message';
-import { JSONSchema7, SDKKinds } from '@botframework-composer/types';
+import { SDKKinds } from '@botframework-composer/types';
 
 import { PromptTab, PromptTabTitles } from './promptTabs';
 
@@ -183,19 +183,29 @@ export function getDialogGroupByType(type) {
 
 const truncateSDKType = ($kind) => (typeof $kind === 'string' ? $kind.replace('Microsoft.', '') : '');
 
+// string type comes from sdk.schema, function type comes from FormUIOptions.
+type SDKTitle = string | ((data: any) => string);
+
+const getSDKTitle = (data, sdkTitle?: SDKTitle) => {
+  if (!sdkTitle) return;
+  // Handle the case that FormUIOption label function overrides sdk.schema.
+  return typeof sdkTitle === 'function' ? sdkTitle(data) : sdkTitle;
+};
+
 /**
  * Title priority: $designer.name > title from sdk schema > customize title > $kind suffix
  * @param customizedTitile customized title
  */
-export function generateSDKTitle(sdkschema: JSONSchema7, data, customizedTitle?: string, tab?: PromptTab) {
+export function generateActionTitle(data, sdkTitle?: SDKTitle, customizedTitle?: string, tab?: PromptTab) {
   const $kind = get(data, '$kind');
-  const titleFromSDKSchema = get(sdkschema, 'title');
+  const titleFromSDKSchema = getSDKTitle(data, sdkTitle);
   const titleFrom$designer = get(data, '$designer.name');
   const titleFrom$kind = truncateSDKType($kind);
 
   const title = titleFrom$designer || titleFromSDKSchema || customizedTitle || titleFrom$kind;
   if (tab) {
-    return `${PromptTabTitles} (${title})`;
+    const tabTitle = typeof PromptTabTitles[tab] === 'function' ? PromptTabTitles[tab]() : tab;
+    return `${tabTitle} (${title})`;
   }
   return title;
 }