feat: Implement layout to errorCallout (#6396)

* implement layout to errorCallout * Fix linting issues Co-authored-by: Andy Brown <asbrown002@gmail.com>
microsoft · Mar 16, 2021 · c40ecb0 · c40ecb0
1 parent cd026f8
commit c40ecb0
Showing 1 changed file with 95 additions and 1 deletion.
diff --git 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[] {
+    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 (
+      <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) => {
+    const jsonObj = convertToJson(error.message);
+    if (jsonObj === null) {
+      return error.message + ' ';
+    } else {
+      const 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}