superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.tsx
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { JSONTree } from 'react-json-tree';
import { css, styled, SupersetTheme, t } from '@superset-ui/core';
import { useJsonTreeTheme } from 'src/hooks/useJsonTreeTheme';
import Collapse from 'src/components/Collapse';
import { ErrorMessageComponentProps } from './types';
interface MarshmallowErrorExtra {
messages: object;
payload: object;
issue_codes: {
code: number;
message: string;
}[];
}
const StyledUl = styled.ul`
padding-left: ${({ theme }) => theme.gridUnit * 5}px;
padding-top: ${({ theme }) => theme.gridUnit * 4}px;
`;
const collapseStyle = (theme: SupersetTheme) => css`
.ant-collapse-arrow {
left: 0px !important;
}
.ant-collapse-header {
padding-left: ${theme.gridUnit * 4}px !important;
}
.ant-collapse-content-box {
padding: 0px !important;
}
`;
const extractInvalidValues = (messages: object, payload: object): string[] => {
const invalidValues: string[] = [];
const recursiveExtract = (messages: object, payload: object) => {
Object.keys(messages).forEach(key => {
const value = payload[key];
const message = messages[key];
if (Array.isArray(message)) {
message.forEach(errorMessage => {
invalidValues.push(`${errorMessage}: ${value}`);
});
} else {
recursiveExtract(message, value);
}
});
};
recursiveExtract(messages, payload);
return invalidValues;
};
export default function MarshmallowErrorMessage({
error,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
source = 'crud',
subtitle,
}: ErrorMessageComponentProps<MarshmallowErrorExtra>) {
const jsonTreeTheme = useJsonTreeTheme();
const { extra, message } = error;
return (
<div>
{subtitle && <h4>{subtitle}</h4>}
{message}
<StyledUl>
{extractInvalidValues(extra.messages, extra.payload).map(
(value, index) => (
<li key={index}>{value}</li>
),
)}
</StyledUl>
<Collapse ghost css={collapseStyle}>
<Collapse.Panel header={t('Details')} key="details" css={collapseStyle}>
<JSONTree
data={extra.messages}
shouldExpandNode={() => true}
hideRoot
theme={jsonTreeTheme}
/>
</Collapse.Panel>
</Collapse>
</div>
);
}