in src/routes/Document/components/ApiInfo.js [27:317]
function ApiInfo(props) {
let {
apiData: { envProps = [] },
apiDetail,
apiDetail: { document, responseParameters, requestHeaders },
} = useContext(ApiContext);
const { handleUpdate, handleDelete } = props;
let requestParameters = apiDetail.requestParameters;
let documentJSON = {};
try {
documentJSON = JSON.parse(document);
documentJSON.errorCode = [];
Object.keys(documentJSON.responses).forEach((key) => {
documentJSON.errorCode.push({
code: key,
description: documentJSON.responses[key].description,
content: documentJSON.responses[key].content,
});
});
requestParameters = requestParameters ?? documentJSON.parameters;
responseParameters = responseParameters ?? documentJSON.responseType;
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
}
const columns = [
{
title: getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME"),
dataIndex: "name",
},
{
title: getIntlContent("SHENYU.COMMON.TYPE"),
dataIndex: "type",
},
{
title: getIntlContent("SHENYU.COMMON.REQUIRED"),
dataIndex: "required",
render: (v) =>
v ? (
<Text type="danger">{getIntlContent("SHENYU.COMMON.YES")}</Text>
) : (
getIntlContent("SHENYU.COMMON.NO")
),
},
{
title: getIntlContent("SHENYU.COMMON.MAX.LENGTH"),
dataIndex: "maxLength",
},
{
title: getIntlContent("SHENYU.PLUGIN.DESCRIBE"),
dataIndex: "description",
},
{
title: getIntlContent("SHENYU.COMMON.MAX.EXAMPLE"),
dataIndex: "example",
},
];
const errorCodeColumns = [
{
title: "Code",
dataIndex: "code",
},
{
title: "Description",
dataIndex: "description",
},
{
title: "Content",
dataIndex: "content",
render: (v) => JSON.stringify(v),
},
];
const defaultCommonData = [
{
id: 1,
name: "code",
type: "integer",
description: getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.COMMON.RESPONSE.CODE",
),
example: "200",
},
{
id: 2,
name: "message",
type: "string",
description: getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.COMMON.RESPONSE.DESCRIPTION",
),
example: getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.COMMON.RESPONSE.DESCRIPTION_EXAMPLE",
),
},
{
id: 3,
name: "data",
type: "object",
description: getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.COMMON.RESPONSE.RESULTS",
),
example: '{"id":"1988771289091030"}',
},
];
const envPropsColumns = [
{
title: getIntlContent("SHENYU.COMMON.MAX.ENVIRONMENT"),
dataIndex: "envLabel",
},
{
title: getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.ADDRESS"),
dataIndex: "addressUrl",
},
{
title: getIntlContent("SHENYU.PLUGIN.DESCRIBE"),
dataIndex: "envDesc",
},
];
return (
<Tabs>
<Tabs.TabPane
tab={
<>
<Icon type="file-text" />
{getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.INTERFACE.DOCUMENT")}
</>
}
key="1"
>
<Row gutter={24}>
<Col span={12}>
<Title level={2}>
{apiDetail.tags[apiDetail.tags.length - 1].name}
</Title>
</Col>
<Col span={12} style={{ textAlign: "right" }}>
<Button onClick={handleUpdate}>
{getIntlContent("SHENYU.BUTTON.SYSTEM.EDIT")}
</Button>
<Button ghost type="danger" onClick={handleDelete}>
{getIntlContent("SHENYU.BUTTON.SYSTEM.DELETE")}
</Button>
</Col>
</Row>
<Paragraph>
<Title level={4}>
{getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.INTERFACE.ADDRESS")}
</Title>
<Text code>{Method?.[apiDetail.httpMethod]}</Text>
<Text code>{apiDetail.apiPath}</Text>
<Text code>{apiDetail.version}</Text>
</Paragraph>
<Paragraph>
<Title level={4}>
{getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.DESCRIPTION")}
</Title>
<Text type="secondary">{apiDetail.apiDesc || "-"}</Text>
</Paragraph>
<Paragraph>
<Row gutter={24}>
<Col span={8}>
<Title level={4}>Owner</Title>
<Text code>{apiDetail.apiOwner}</Text>
</Col>
<Col span={8}>
<Title level={4}>Consume</Title>
<Text code>{apiDetail.consume}</Text>
</Col>
<Col span={8}>
<Title level={4}>Produce</Title>
<Text code>{apiDetail.produce}</Text>
</Col>
</Row>
</Paragraph>
<Title level={4}>
{getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.ADDRESS")}
</Title>
<Paragraph>
<Table
size="small"
rowKey="envLabel"
bordered
dataSource={envProps}
pagination={false}
columns={envPropsColumns}
/>
</Paragraph>
<Title level={2}>
{getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.REQUEST.PARAMETERS")}
</Title>
<Title level={4}>
{getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.SERVICE.REQUEST.HEADERS",
)}
</Title>
<Paragraph>
<Table
size="small"
rowKey="id"
bordered
dataSource={requestHeaders}
pagination={false}
childrenColumnName="refs"
columns={columns}
/>
</Paragraph>
<Title level={4}>
{getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.SERVICE.REQUEST.PARAMETERS",
)}
</Title>
<Paragraph>
<Table
size="small"
rowKey="id"
bordered
dataSource={requestParameters || []}
pagination={false}
childrenColumnName="refs"
columns={columns}
/>
</Paragraph>
<Title level={2}>
{getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.RESPONSE.PARAMETERS")}
</Title>
<Title level={4}>
{getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.COMMON.RESPONSE.PARAMETERS",
)}
</Title>
<Paragraph>
<Table
size="small"
rowKey="id"
bordered
dataSource={defaultCommonData}
pagination={false}
columns={columns.filter((_, i) => ![2, 3].includes(i))}
/>
</Paragraph>
<Title level={4}>
{getIntlContent(
"SHENYU.DOCUMENT.APIDOC.INFO.BUSINESS.RESPONSE.PARAMETERS",
)}
</Title>
<Paragraph>
<Table
size="small"
rowKey="id"
bordered
dataSource={responseParameters}
pagination={false}
childrenColumnName="refs"
columns={columns}
/>
</Paragraph>
<Title level={4}>
{getIntlContent("SHENYU.DOCUMENT.APIDOC.ERROR.CODE.DETAILS")}
</Title>
<Paragraph>
<Table
size="small"
rowKey="code"
bordered
dataSource={documentJSON.errorCode || []}
pagination={false}
columns={errorCodeColumns}
/>
</Paragraph>
</Tabs.TabPane>
<Tabs.TabPane
tab={
<>
<Icon type="code" />
{getIntlContent("SHENYU.DOCUMENT.APIDOC.INFO.INTERFACE.DEBUG")}
</>
}
key="2"
>
<ApiDebug />
</Tabs.TabPane>
</Tabs>
);
}