fix: add links to .NET Core SDK to publish error (microsoft#3011)

* add initial link stuff

* add secondary link

* adjust spacing and add console-error to server

* make execSync pass stderror through

* Update publisher.ts

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

Composer/packages/client/src/components/TestController/errorCallout.tsx

@@ -8,13 +8,18 @@ import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 
-import { calloutLabel, calloutDescription, calloutContainer } from './styles';
+import { calloutLabel, calloutDescription, calloutContainer, calloutLink } from './styles';
 export interface IErrorCalloutProps {
   onDismiss: () => void;
   onTry: () => void;
   target: React.RefObject<Element> | null;
   visible: boolean;
-  error: { title: string; message: string };
+  error: {
+    title: string;
+    message: string;
+    link?: { url: string; text: string };
+    linkAfterMessage?: { url: string; text: string };
+  };
 }
 
 export const ErrorCallout: React.FC<IErrorCalloutProps> = props => {
@@ -34,8 +39,20 @@ export const ErrorCallout: React.FC<IErrorCalloutProps> = props => {
           {error.title}
         </p>
         <p css={calloutDescription} id="callout-description-id">
-          {error.message}
+          {error.message + ' '}
+          {error.linkAfterMessage != null && (
+            <a href={error.linkAfterMessage.url} id="callout-description-id">
+              {error.linkAfterMessage.text}
+            </a>
+          )}
         </p>
+        {error.link != null && (
+          <p css={calloutLink}>
+            <a href={error.link.url} id="callout-description-id">
+              {error.link.text}
+            </a>
+          </p>
+        )}
         <Stack
           horizontal
           tokens={{

Composer/packages/client/src/components/TestController/styles.ts

@@ -48,3 +48,8 @@ export const calloutContainer = css`
 export const calloutDescription = css``;
 
 export const calloutAction = css``;
+
+export const calloutLink = css`
+  margin-top: 24px;
+  margin-bottom: 24px;
+`;

Composer/packages/client/src/constants/index.ts

@@ -81,6 +81,7 @@ export enum ActionTypes {
   GET_PUBLISH_TYPES_SUCCESS = 'GET_PUBLISH_TYPES_SUCCESS',
   PUBLISH_SUCCESS = 'PUBLISH_SUCCESS',
   PUBLISH_FAILED = 'PUBLISH_FAILED',
+  PUBLISH_FAILED_DOTNET = 'PUBLISH_FAILED_DOTNET',
   GET_PUBLISH_STATUS = 'GET_PUBLISH_STATUS',
   GET_PUBLISH_STATUS_FAILED = 'GET_PUBLISH_STATUS_FAILED',
   GET_PUBLISH_HISTORY = 'GET_PUBLISH_HISTORY',
@@ -125,6 +126,7 @@ export const Text = {
   LUISDEPLOYSUCCESS: formatMessage('Congratulations! Your model is successfully published.'),
   LUISDEPLOYFAILURE: formatMessage('Sorry, something went wrong with publishing. Try again or exit out of this task.'),
   CONNECTBOTFAILURE: formatMessage('Sorry, something went wrong with connecting bot runtime'),
+  DOTNETFAILURE: formatMessage('Composer needs .NET Core SDK'),
 };
 
 export enum LuisConfig {

Composer/packages/client/src/store/action/publisher.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import formatMessage from 'format-message';
+
 import { ActionCreator } from '../types';
 
 import { ActionTypes } from './../../constants/index';
@@ -37,13 +39,33 @@ export const publishToTarget: ActionCreator = async ({ dispatch }, projectId, ta
       },
     });
   } catch (err) {
-    dispatch({
-      type: ActionTypes.PUBLISH_FAILED,
-      payload: {
-        error: err.response.data,
-        target: target,
-      },
-    });
+    // special case to handle dotnet issues
+    if (/dotnet/.test(err.response?.data?.message as string)) {
+      dispatch({
+        type: ActionTypes.PUBLISH_FAILED_DOTNET,
+        payload: {
+          error: {
+            message: formatMessage('To run this bot, Composer needs .NET Core SDK.'),
+            linkAfterMessage: {
+              text: formatMessage('Learn more.'),
+              url: 'https://docs.microsoft.com/en-us/composer/setup-yarn',
+            },
+            link: {
+              text: formatMessage('Install Microsoft .NET Core SDK'),
+              url: 'https://dotnet.microsoft.com/download/dotnet-core/3.1',
+            },
+          },
+          target: target,
+        },
+      });
+    } else
+      dispatch({
+        type: ActionTypes.PUBLISH_FAILED,
+        payload: {
+          error: err.response.data,
+          target: target,
+        },
+      });
   }
 };
 

Composer/packages/client/src/store/reducer/index.ts

@@ -465,10 +465,11 @@ const publishSuccess: ReducerFunc = (state, payload) => {
   return state;
 };
 
-const publishFailure: ReducerFunc = (state, { error, target }) => {
+const publishFailure: (title: string) => ReducerFunc = title => (state, { error, target }) => {
   if (target.name === 'default') {
     state.botStatus = BotStatus.failed;
-    state.botLoadErrorMsg = { title: Text.CONNECTBOTFAILURE, message: error.message };
+
+    state.botLoadErrorMsg = { ...error, title };
   }
   // prepend the latest publish results to the history
   if (!state.publishHistory[target.name]) {
@@ -645,7 +646,8 @@ export const reducer = createReducer({
   [ActionTypes.USER_SESSION_EXPIRED]: setUserSessionExpired,
   [ActionTypes.GET_PUBLISH_TYPES_SUCCESS]: setPublishTypes,
   [ActionTypes.PUBLISH_SUCCESS]: publishSuccess,
-  [ActionTypes.PUBLISH_FAILED]: publishFailure,
+  [ActionTypes.PUBLISH_FAILED]: publishFailure(Text.CONNECTBOTFAILURE),
+  [ActionTypes.PUBLISH_FAILED_DOTNET]: publishFailure(Text.DOTNETFAILURE),
   [ActionTypes.GET_PUBLISH_STATUS]: getPublishStatus,
   [ActionTypes.GET_PUBLISH_STATUS_FAILED]: getPublishStatus,
   [ActionTypes.GET_PUBLISH_HISTORY]: getPublishHistory,

Composer/packages/client/src/store/types.ts

@@ -93,7 +93,12 @@ export interface State {
   storages: any[];
   focusedStorageFolder: StorageFolder;
   botStatus: BotStatus;
-  botLoadErrorMsg: { title: string; message: string };
+  botLoadErrorMsg: {
+    title: string;
+    message: string;
+    linkAfterMessage?: { url: string; text: string };
+    link?: { url: string; text: string };
+  };
   creationFlowStatus: CreationFlowStatus;
   templateId: string;
   storageFileLoadingStatus: string;

Composer/plugins/localPublish/src/index.ts

@@ -172,8 +172,8 @@ class LocalPublisher implements PublishPlugin<PublishConfig> {
 
       try {
         // TODO ccastro: discuss with benbrown. Consider init command as template metadata. Remove azurewebapp from here.
-        execSync('dotnet user-secrets init --project azurewebapp', { cwd: runtimeDir });
-        execSync('dotnet build', { cwd: runtimeDir });
+        execSync('dotnet user-secrets init --project azurewebapp', { cwd: runtimeDir, stdio: 'inherit' });
+        execSync('dotnet build', { cwd: runtimeDir, stdio: 'inherit' });
       } catch (error) {
         // delete the folder to make sure build again.
         rmDir(botDir);