From c9af7dea3411539d81d011e57a2403f2100b92cd Mon Sep 17 00:00:00 2001
From: Christiano Donke <cdonke@outlook.com>
Date: Thu, 11 Mar 2021 20:38:54 -0300
Subject: [PATCH 1/2] implement layout to errorCallout

---
 .../BotRuntimeController/errorCallout.tsx     | 96 ++++++++++++++++++-
 1 file changed, 95 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx b/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx
index eb837af86f..7157210a82 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx
+++ b/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx
@@ -32,6 +32,25 @@ const calloutLink = css`
   margin-bottom: 24px;
 `;
 
+const descriptionLabel = css`
+  font-weight: bold;
+  text-transform: capitalize;
+`;
+
+const descriptionText = css`
+  margin-left: 15px;
+  margin-bottom: 10px;
+`;
+
+const descriptionLongText = css`
+  overflow: auto;
+  font-size: small;
+`;
+const descriptionShow = css``;
+const descriptionHide = css`
+  display: none;
+`;
+
 // -------------------- ErrorCallout -------------------- //
 
 export interface IErrorCalloutProps {
@@ -47,8 +66,83 @@ export interface IErrorCalloutProps {
   };
 }
 
+interface IErrorMessage {
+  key: string;
+  value: any;
+  isPre: boolean;
+  visible: boolean;
+  order: number;
+}
+
+interface IField {
+  visible?: boolean;
+  name: string;
+  index?: number;
+}
+
+const fieldsWhiteList = new Map<string, IField>();
+fieldsWhiteList.set('message', { visible: true, name: 'Message', index: 1 });
+fieldsWhiteList.set('stack', { visible: true, name: 'Stack Trace', index: 3 });
+fieldsWhiteList.set('stdout', { visible: true, name: 'Output', index: 4 });
+fieldsWhiteList.set('cmd', { visible: true, name: 'Command', index: 2 });
+fieldsWhiteList.set('killed', { visible: false, name: 'killed' });
+fieldsWhiteList.set('code', { visible: false, name: 'code' });
+fieldsWhiteList.set('signal', { visible: false, name: 'signal' });
+fieldsWhiteList.set('stderr', { visible: false, name: 'stderr' });
+
 export const ErrorCallout: React.FC<IErrorCalloutProps> = (props) => {
   const { onDismiss, onTry, target, visible, error } = props;
+
+  const convertToJson = function (item): any {
+    if (typeof item === 'object') {
+      return item;
+    }
+
+    try {
+      return JSON.parse(item);
+    } catch (e) {
+      return null;
+    }
+  };
+  const parseObject = function (map): IErrorMessage[] {
+    let obj = Object.keys(map).map(function (k) {
+      let field: IField = fieldsWhiteList.get(k) || { visible: true, name: k };
+
+      return {
+        key: field.name,
+        value: map[k],
+        order: field.index || 1000,
+        isPre: map[k] != null && typeof map[k] == 'string' && map[k].length >= 75 && map[k].indexOf('\n') != -1,
+        visible:
+          field.visible ||
+          (map[k] != null && ((typeof map[k] == 'string' && map[k].trim() != '') || typeof map[k] != 'string')),
+      };
+    });
+
+    return obj.sort(function (left, right) {
+      return left.order - right.order;
+    });
+  };
+  const renderRow = function (obj: IErrorMessage) {
+    return (
+      <div css={obj.visible ? descriptionShow : descriptionHide}>
+        <div css={descriptionLabel}>{obj.key}:</div>
+        <div css={descriptionText}>{obj.isPre ? <pre css={descriptionLongText}>{obj.value}</pre> : obj.value}</div>
+      </div>
+    );
+  };
+
+  const buildErrorMessage = (error) => {
+    let jsonObj = convertToJson(error.message);
+    if (jsonObj === null) {
+      return error.message + ' ';
+    } else {
+      let parsed = parseObject(jsonObj);
+
+      return <div>{parsed.map(renderRow)}</div>;
+    }
+  };
+
   return (
     <Callout
       setInitialFocus
@@ -64,7 +158,7 @@ export const ErrorCallout: React.FC<IErrorCalloutProps> = (props) => {
           {error.title}
         </p>
         <p css={calloutDescription} id="callout-description-id">
-          {error.message + ' '}
+          {buildErrorMessage(error)}
           {error.linkAfterMessage != null && (
             <Link href={error.linkAfterMessage.url} target={'_blank'}>
               {error.linkAfterMessage.text}

From 276794800d40e366dfff486a265a7f13cdeb680d Mon Sep 17 00:00:00 2001
From: Christiano Donke <cdonke@outlook.com>
Date: Fri, 12 Mar 2021 13:11:01 -0300
Subject: [PATCH 2/2] Fix linting issues

---
 .../BotRuntimeController/errorCallout.tsx     | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx b/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx
index 7157210a82..e68ae8f4d6 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx
+++ b/Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx
@@ -105,23 +105,23 @@ export const ErrorCallout: React.FC<IErrorCalloutProps> = (props) => {
     }
   };
   const parseObject = function (map): IErrorMessage[] {
-    let obj = Object.keys(map).map(function (k) {
-      let field: IField = fieldsWhiteList.get(k) || { visible: true, name: k };
-
-      return {
-        key: field.name,
-        value: map[k],
-        order: field.index || 1000,
-        isPre: map[k] != null && typeof map[k] == 'string' && map[k].length >= 75 && map[k].indexOf('\n') != -1,
-        visible:
-          field.visible ||
-          (map[k] != null && ((typeof map[k] == 'string' && map[k].trim() != '') || typeof map[k] != 'string')),
-      };
-    });
-
-    return obj.sort(function (left, right) {
-      return left.order - right.order;
-    });
+    return Object.keys(map)
+      .map((k) => {
+        const field: IField = fieldsWhiteList.get(k) || { visible: true, name: k };
+
+        return {
+          key: field.name,
+          value: map[k],
+          order: field.index || 1000,
+          isPre: map[k] != null && typeof map[k] == 'string' && map[k].length >= 75 && map[k].indexOf('\n') != -1,
+          visible:
+            field.visible ||
+            (map[k] != null && ((typeof map[k] == 'string' && map[k].trim() != '') || typeof map[k] != 'string')),
+        };
+      })
+      .sort((left, right) => {
+        return left.order - right.order;
+      });
   };
   const renderRow = function (obj: IErrorMessage) {
     return (
@@ -133,11 +133,11 @@ export const ErrorCallout: React.FC<IErrorCalloutProps> = (props) => {
   };
 
   const buildErrorMessage = (error) => {
-    let jsonObj = convertToJson(error.message);
+    const jsonObj = convertToJson(error.message);
     if (jsonObj === null) {
       return error.message + ' ';
     } else {
-      let parsed = parseObject(jsonObj);
+      const parsed = parseObject(jsonObj);
 
       return <div>{parsed.map(renderRow)}</div>;
     }