console: improve UI for nested remote relationships (close #4973) (#5612)

https://github.com/hasura/graphql-engine/pull/5612
This commit is contained in:
Varun Choudhary 2020-10-08 02:37:58 +05:30 committed by GitHub
parent 8bca587881
commit 2717c38352
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { RemoteRelationshipServer } from '../utils'; import { RemoteRelationshipServer, parseRemoteRelationship } from '../utils';
import styles from '../SchemaExplorer.scss'; import styles from '../SchemaExplorer.scss';
type Props = { type Props = {
@ -10,6 +10,11 @@ const Collapsed: React.FC<Props> = ({ relationship }) => {
if (!relationship) { if (!relationship) {
return null; return null;
} }
const parseRelationship = parseRemoteRelationship(relationship);
const relationMap = () => {
const fields = parseRelationship.remoteFields.map(field => field.name);
return ['', ...fields].join(' . ');
};
return ( return (
<div className={styles.display_flex}> <div className={styles.display_flex}>
<div> <div>
@ -19,7 +24,7 @@ const Collapsed: React.FC<Props> = ({ relationship }) => {
<i> <i>
{`- ${relationship.table_name}${ {`- ${relationship.table_name}${
relationship.definition.remote_schema relationship.definition.remote_schema
} . ${Object.keys(relationship.definition.remote_field)}`} } ${relationMap()}`}
</i> </i>
</div> </div>
</div> </div>