Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

feat: Implement layout to errorCallout #6396

Merged
a-b-r-o-w-n merged 4 commits into from
Mar 16, 2021
Merged

feat: Implement layout to errorCallout #6396

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c9af7de
implement layout to errorCallout
cdonke Mar 11, 2021
2767948
Fix linting issues
cdonke Mar 12, 2021
fd5ee79
Merge branch 'main' into BeautifyErrorMessage
a-b-r-o-w-n Mar 12, 2021
160e9e6
Merge branch 'main' into BeautifyErrorMessage
a-b-r-o-w-n Mar 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 95 additions & 1 deletion Composer/packages/client/src/components/BotRuntimeController/errorCallout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -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}
Expand Down