fix: converting bot with custom actions (ui update)

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

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { OpenConfirmModal } from '@bfc/ui-shared';
+import formatMessage from 'format-message';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+
+const contentContainer = css`
+  max-width: 444px;
+`;
+
+export const BotConvertConfirmDialog = () => {
+  return OpenConfirmModal(formatMessage('Convert your project to the latest format'), '', {
+    confirmText: formatMessage('Convert'),
+    onRenderContent: () => (
+      <div css={contentContainer}>
+        <p>
+          {formatMessage(
+            'This project was created in an older version of Composer. To open this project in Composer 2.0, we must copy your project and convert it to the latest format. Your original project will not be changed.'
+          )}
+        </p>
+        <p>
+          {formatMessage('If you have created custom components, you might need to rebuild them. ')}
+          <Link href="https://github.com/microsoft/botframework-components/blob/main/docs/overview.md" target="_blank">
+            Learn more about custom components.
+          </Link>
+        </p>
+      </div>
+    ),
+  });
+};

Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx

@@ -4,23 +4,23 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useEffect, useState, useMemo } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import formatMessage from 'format-message';
 import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
 import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane';
 import { DisplayMarkdownDialog } from '@bfc/ui-shared';
 
 import TelemetryClient from '../../telemetry/TelemetryClient';
 import { localBotsDataSelector } from '../../recoilModel/selectors/project';
-import { currentProjectIdState } from '../../recoilModel';
+import { currentProjectIdState, schemaDiagnosticsSelectorFamily } from '../../recoilModel';
 import { ManageLuis } from '../ManageLuis/ManageLuis';
 import { ManageQNA } from '../ManageQNA/ManageQNA';
 import { dispatcherState, settingsState } from '../../recoilModel';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 import { navigateTo } from '../../utils/navigation';
 import { usePVACheck } from '../../hooks/usePVACheck';
-import { projectReadmeState } from '../../recoilModel/atoms';
+import { debugPanelActiveTabState, debugPanelExpansionState, projectReadmeState } from '../../recoilModel/atoms';
 
 import { GetStartedTask } from './GetStartedTask';
 import { NextStep } from './types';
@@ -42,14 +42,16 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
   const [displayManageQNA, setDisplayManageQNA] = useState<boolean>(false);
   const readme = useRecoilValue(projectReadmeState(projectId));
   const [readmeHidden, setReadmeHidden] = useState<boolean>(true);
-
+  const schemaDiagnostics = useRecoilValue(schemaDiagnosticsSelectorFamily(projectId));
   const { setSettings, setQnASettings } = useRecoilValue(dispatcherState);
   const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector) || '';
   const settings = useRecoilValue(settingsState(projectId));
   const mergedSettings = mergePropertiesManagedByRootBot(projectId, rootBotProjectId, settings);
   const [requiredNextSteps, setRequiredNextSteps] = useState<NextStep[]>([]);
   const [recommendedNextSteps, setRecommendedNextSteps] = useState<NextStep[]>([]);
   const [optionalSteps, setOptionalSteps] = useState<NextStep[]>([]);
+  const setExpansion = useSetRecoilState(debugPanelExpansionState);
+  const setActiveTab = useSetRecoilState(debugPanelActiveTabState);
 
   const [highlightLUIS, setHighlightLUIS] = useState<boolean>(false);
   const [highlightQNA, setHighlightQNA] = useState<boolean>(false);
@@ -129,6 +131,27 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
         ? true
         : false;
 
+    if (schemaDiagnostics.length) {
+      newNextSteps.push({
+        key: 'customActions',
+        label: formatMessage('Review deactivated custom actions'),
+        description: formatMessage('We detected {length} custom components that are not support for Composer2.0.', {
+          length: schemaDiagnostics.length,
+        }),
+        required: true,
+        checked: false,
+        onClick: (step) => {
+          TelemetryClient.track('GettingStartedActionClicked', {
+            taskName: 'customActionsCheck',
+            priority: 'required',
+          });
+          setExpansion(true);
+          setActiveTab('Diagnostics');
+        },
+        hideFeatureStep: false,
+      });
+    }
+
     if (props.requiresLUIS) {
       newNextSteps.push({
         key: 'luis',

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx

@@ -68,6 +68,10 @@ const tableCell = css`
   }
 `;
 
+const blodText = css`
+  font-weight: bold !important;
+`;
+
 const content = css`
   outline: none;
 `;
@@ -188,7 +192,15 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
               css={content}
               tabIndex={-1}
             >
-              {item.message}
+              <span css={blodText}>{item.title ?? ''}</span> <span>{item.message}</span>
+              <Link
+                hidden={!item.learnMore}
+                href="https://github.com/microsoft/botframework-components/blob/main/docs/overview.md"
+                target="_blank"
+              >
+                {' '}
+                {item.learnMore}
+              </Link>
             </div>
           </div>
         );

Composer/packages/client/src/pages/diagnostics/types.ts

@@ -3,6 +3,7 @@
 import { createSingleMessage, isDiagnosticWithInRange } from '@bfc/indexers';
 import { Diagnostic, DialogInfo, LuFile, LgFile, LgNamePattern } from '@bfc/shared';
 import get from 'lodash/get';
+import formatMessage from 'format-message';
 
 import { getBaseName } from '../../utils/fileUtil';
 import { replaceDialogDiagnosticLabel } from '../../utils/dialogUtil';
@@ -32,6 +33,8 @@ export interface IDiagnosticInfo {
   dialogPath?: string; //the data path in dialog
   resourceId: string; // id without locale
   getUrl: (hash?: string) => string;
+  learnMore?: string;
+  title?: string;
 }
 
 export abstract class DiagnosticInfo implements IDiagnosticInfo {
@@ -46,6 +49,8 @@ export abstract class DiagnosticInfo implements IDiagnosticInfo {
   dialogPath?: string;
   resourceId: string;
   getUrl = () => '';
+  learnMore?: string;
+  title?: string;
 
   constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
     this.rootProjectId = rootProjectId;
@@ -97,6 +102,12 @@ export class DialogDiagnostic extends DiagnosticInfo {
 
 export class SchemaDiagnostic extends DialogDiagnostic {
   type = DiagnosticType.SCHEMA;
+  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    super(rootProjectId, projectId, id, location, diagnostic);
+    this.message = diagnostic.message;
+    this.title = formatMessage('Deactivated action.');
+    this.learnMore = formatMessage('Learn more about custom actions');
+  }
 }
 
 export class SkillSettingDiagnostic extends DiagnosticInfo {

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

@@ -4,7 +4,6 @@
 
 import formatMessage from 'format-message';
 import findIndex from 'lodash/findIndex';
-import { OpenConfirmModal } from '@bfc/ui-shared';
 import { PublishTarget, QnABotTemplateId, RootBotManagedProperties } from '@bfc/shared';
 import get from 'lodash/get';
 import { CallbackInterface, useRecoilCallback } from 'recoil';
@@ -47,6 +46,7 @@ import { botRuntimeOperationsSelector, rootBotProjectIdSelector } from '../selec
 import { mergePropertiesManagedByRootBot, postRootBotCreation } from '../../recoilModel/dispatchers/utils/project';
 import { projectDialogsMapSelector, botDisplayNameState } from '../../recoilModel';
 import { deleteTrigger as DialogdeleteTrigger } from '../../utils/dialogUtil';
+import { BotConvertConfirmDialog } from '../../components/BotConvertDialog';
 
 import { announcementState, boilerplateVersionState, recentProjectsState, templateIdState } from './../atoms';
 import { logMessage, setError } from './../dispatchers/shared';
@@ -246,15 +246,7 @@ export const projectDispatcher = () => {
   );
 
   const forceMigrate = useRecoilCallback((callbackHelpers: CallbackInterface) => async (projectId: string) => {
-    if (
-      await OpenConfirmModal(
-        formatMessage('Convert your project to the latest format'),
-        formatMessage(
-          'This project was created in an older version of Composer. To open this project in Composer 2.0, we must copy your project and convert it to the latest format. Your original project will not be changed.'
-        ),
-        { confirmText: formatMessage('Convert') }
-      )
-    ) {
+    if (await BotConvertConfirmDialog()) {
       callbackHelpers.set(creationFlowStatusState, CreationFlowStatus.MIGRATE);
       navigateTo(`/v2/projects/migrate/${projectId}`);
     } else {

Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts

@@ -5,6 +5,7 @@ import { BotIndexer, validateSchema } from '@bfc/indexers';
 import { selectorFamily, selector } from 'recoil';
 import lodashGet from 'lodash/get';
 import formatMessage from 'format-message';
+import { getFriendlyName } from '@bfc/shared';
 
 import { getReferredLuFiles } from '../../utils/luUtil';
 import { INavTreeItem } from '../../components/NavTree';
@@ -202,7 +203,21 @@ export const schemaDiagnosticsSelectorFamily = selectorFamily({
     botAssets.dialogs.forEach((dialog) => {
       const diagnostics = validateSchema(dialog.id, dialog.content, sdkSchemaContent);
       fullDiagnostics.push(
-        ...diagnostics.map((d) => new SchemaDiagnostic(rootProjectId, projectId, dialog.id, `${dialog.id}.dialog`, d))
+        ...diagnostics.map((d) => {
+          let location = dialog.id;
+          if (d.path) {
+            const list = d.path.split('.');
+            let path = '';
+            location = [
+              location,
+              ...list.map((item) => {
+                path = `${path}${path ? '.' : ''}${item}`;
+                return getFriendlyName(lodashGet(dialog.content, path)) || '';
+              }),
+            ].join('>');
+          }
+          return new SchemaDiagnostic(rootProjectId, projectId, dialog.id, location, d);
+        })
       );
     });
     return fullDiagnostics;

Composer/packages/lib/indexers/src/validations/schemaValidation/index.ts

@@ -6,16 +6,22 @@ import { BaseSchema, DiagnosticSeverity, SchemaDefinitions } from '@botframework
 
 import { walkAdaptiveDialog } from './walkAdaptiveDialog';
 
-const SCHEMA_NOT_FOUND = formatMessage('Schema definition not found in sdk.schema.');
-
 export const validateSchema = (dialogId: string, dialogData: BaseSchema, schema: SchemaDefinitions): Diagnostic[] => {
   const diagnostics: Diagnostic[] = [];
   const schemas: any = schema.definitions ?? {};
 
   walkAdaptiveDialog(dialogData, schemas, ($kind, data, path) => {
     if (!schemas[$kind]) {
       diagnostics.push(
-        new Diagnostic(`${$kind}: ${SCHEMA_NOT_FOUND}`, `${dialogId}.dialog`, DiagnosticSeverity.Error, path)
+        new Diagnostic(
+          formatMessage(
+            'Components of $kind "{kind}" are not supported. Replace with a different component or create a custom component.',
+            { kind: $kind }
+          ),
+          `${dialogId}.dialog`,
+          DiagnosticSeverity.Error,
+          path
+        )
       );
     }
     return true;