hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-14 17:02:49 +03:00
Code Issues Projects Releases Wiki Activity

console: add new icons for one-to-one and one-to-many relationships

Browse Source 
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9989
Co-authored-by: Vijay Prasanna <11921040+vijayprasanna13@users.noreply.github.com>
GitOrigin-RevId: 421e8da78ff03990c4e2862429b7e05a327061b5
This commit is contained in:
Matthew Goodwin 2023-08-09 02:14:30 -05:00 committed by hasura-bot
parent 3a8cc7faca
commit 5c62b37ffe
7 changed files with 110 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/libs/console/legacy-ce/src/lib/features/Data/TrackResources/TrackRelationships/components/TrackedRelationshipRow.tsx
View File

@ -1,9 +1,10 @@
import { ChangeEvent } from 'react';
import { FaArrowRight, FaColumns, FaDatabase, FaTable } from 'react-icons/fa';
import { FaColumns, FaDatabase, FaTable } from 'react-icons/fa';
import { capitaliseFirstLetter } from '../../../../../components/Common/ConfigureTransformation/utils';
import { Button } from '../../../../../new-components/Button';
import { CardedTable } from '../../../../../new-components/CardedTable';
import { getTableDisplayName } from '../../../../DatabaseRelationships';
import { RelationshipIcon } from '../../../../DatabaseRelationships/components/RelationshipIcon';
import { TrackedSuggestedRelationship } from '../types';
export type TrackedRelationshipRowProps = {
@ -79,8 +80,10 @@ export const DisplaySuggestedRelationship = ({
<span>{getTableDisplayName(relationship.fromTable)}</span>
/
<FaColumns />
{Object.keys(relationship.columnMapping ?? {}).join(' ')}
<FaArrowRight />
<span>{Object.keys(relationship.columnMapping ?? {}).join(' ')}</span>
<RelationshipIcon
type={relationship.type === 'array' ? 'one-to-many' : 'one-to-one'}
/>
<FaTable />
<span>{getTableDisplayName(relationship.toTable)}</span>
/

9
frontend/libs/console/legacy-ce/src/lib/features/Data/TrackResources/TrackRelationships/components/UntrackedRelationshipRow.tsx
View File

@ -1,9 +1,10 @@
import { ChangeEvent } from 'react';
import { FaArrowRight, FaColumns, FaDatabase, FaTable } from 'react-icons/fa';
import { FaColumns, FaDatabase, FaTable } from 'react-icons/fa';
import { capitaliseFirstLetter } from '../../../../../components/Common/ConfigureTransformation/utils';
import { Button } from '../../../../../new-components/Button';
import { CardedTable } from '../../../../../new-components/CardedTable';
import { getTableDisplayName } from '../../../../DatabaseRelationships';
import { RelationshipIcon } from '../../../../DatabaseRelationships/components/RelationshipIcon';
import { SuggestedRelationshipWithName } from '../../../../DatabaseRelationships/components/SuggestedRelationships/hooks/useSuggestedRelationships';
export type UntrackedRelationshipRowProps = {
@ -83,8 +84,10 @@ export const DisplaySuggestedRelationship = ({
<span>{getTableDisplayName(relationship.from.table)}</span>
/
<FaColumns />
{relationship.from.columns.join(' ')}
<FaArrowRight />
<span>{relationship.from.columns.join(' ')}</span>
<RelationshipIcon
type={relationship.type === 'array' ? 'one-to-many' : 'one-to-one'}
/>
<FaTable />
<span>{getTableDisplayName(relationship.to.table)}</span>
/

22
frontend/libs/console/legacy-ce/src/lib/features/DatabaseRelationships/components/AvailableRelationshipsList/parts/RelationshipMapping.tsx
View File

@ -1,14 +1,8 @@
import { FaColumns, FaFont, FaPlug, FaTable } from 'react-icons/fa';
import { getRemoteFieldPath } from '../../../../RelationshipsTable';
import React from 'react';
import {
FaArrowRight,
FaColumns,
FaFont,
FaPlug,
FaTable,
} from 'react-icons/fa';
import { Relationship } from '../../../types';
import { getTableDisplayName } from '../../../utils/helpers';
import { RelationshipIcon } from '../../RelationshipIcon';
const Columns = ({
mapping,
@ -57,8 +51,15 @@ export const RelationshipMapping = ({
<Columns mapping={relationship.definition.mapping} type="from" />
)}
</div>
<FaArrowRight />
<RelationshipIcon
type={
relationship.relationshipType === 'Array'
? 'one-to-many'
: relationship.relationshipType === 'Object'
? 'one-to-one'
: 'other'
}
/>
<div className="flex items-center gap-2">
{relationship.type === 'remoteSchemaRelationship' ? (
<>
@ -84,6 +85,7 @@ export const RelationshipMapping = ({
<Columns mapping={relationship.definition.mapping} type="to" />
</>
)}
R
</div>
</div>
);

22
frontend/libs/console/legacy-ce/src/lib/features/DatabaseRelationships/components/RelationshipIcon.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FaArrowRight } from 'react-icons/fa';
import oneToMany from '../images/one-to-many.svg';
import oneToOne from '../images/one-to-one.svg';
export const RelationshipIcon = ({
type,
}: {
type: 'one-to-one' | 'one-to-many' | 'other';
}) => {
return (
<>
{type === 'one-to-many' ? (
<img src={oneToMany} alt="One-To-Many" style={{ height: 25 }} />
) : type === 'one-to-one' ? (
<img src={oneToOne} alt="One-To-One" style={{ height: 25 }} />
) : (
//fallback to a basic arrow
<FaArrowRight />
)}
</>
);
};

31
frontend/libs/console/legacy-ce/src/lib/features/DatabaseRelationships/components/SuggestedRelationships/SuggestedRelationships.tsx
View File

@ -1,21 +1,16 @@
import { useState } from 'react';
import { FaColumns, FaDatabase, FaMagic, FaTable } from 'react-icons/fa';
import Skeleton from 'react-loading-skeleton';
import { capitaliseFirstLetter } from '../../../../components/Common/ConfigureTransformation/utils';
import { Table } from '../../../hasura-metadata-types';
import { Button } from '../../../../new-components/Button';
import { CardedTable } from '../../../../new-components/CardedTable';
import {
FaArrowRight,
FaColumns,
FaDatabase,
FaMagic,
FaTable,
} from 'react-icons/fa';
import { areTablesEqual } from '../../../hasura-metadata-api';
import { getTableDisplayName } from '../../utils/helpers';
import { SuggestedRelationshipWithName } from './hooks/useSuggestedRelationships';
import Skeleton from 'react-loading-skeleton';
import { SuggestedRelationshipTrackModal } from '../SuggestedRelationshipTrackModal/SuggestedRelationshipTrackModal';
import { useSuggestedRelationships } from '../../../Data/TrackResources/TrackRelationships/hooks/useSuggestedRelationships';
import { areTablesEqual } from '../../../hasura-metadata-api';
import { Table } from '../../../hasura-metadata-types';
import { getTableDisplayName } from '../../utils/helpers';
import { RelationshipIcon } from '../RelationshipIcon';
import { SuggestedRelationshipTrackModal } from '../SuggestedRelationshipTrackModal/SuggestedRelationshipTrackModal';
import { SuggestedRelationshipWithName } from './hooks/useSuggestedRelationships';
type SuggestedRelationshipsProps = {
dataSourceName: string;
@ -90,8 +85,14 @@ export const SuggestedRelationships = ({
<span>{getTableDisplayName(relationship.from.table)}</span>
/
<FaColumns />
{relationship.from.columns.join(' ')}
<FaArrowRight />
<span>{relationship.from.columns.join(' ')}</span>
<RelationshipIcon
type={
relationship.type === 'array'
? 'one-to-many'
: 'one-to-one'
}
/>
<FaTable />
<span>{getTableDisplayName(relationship.to.table)}</span>
/

26
frontend/libs/console/legacy-ce/src/lib/features/DatabaseRelationships/images/one-to-many.svg Normal file
View File

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st3 {
fill: none;
stroke: #475569;
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
</style>
<g>
<g>
<g>
<polyline class="st3" points="95.9,19.6 51.5,64 95.9,108.4 " />
<polyline class="st3" points="80,109.4 96.9,109.4 96.9,92.5 " />
<polyline class="st3" points="111,52.1 122.6,64.3 110.4,75.9 " />
<polyline class="st3" points="80,18.6 96.9,18.6 96.9,35.5 " />
</g>
<line class="st3" x1="121.5" y1="64" x2="23.3" y2="64" />
<circle class="st3" cx="14.1" cy="64" r="8.7" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 888 B

22
frontend/libs/console/legacy-ce/src/lib/features/DatabaseRelationships/images/one-to-one.svg Normal file
View File

@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st3 {
fill: none;
stroke: #475569;
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
</style>
<g>
<g>
<g transform="translate(-30 0)">
<polyline class="st3 move" points="111,52.1 122.6,64.3 110.4,75.9" />
</g>
<line class="st3" x1="86" y1="64" x2="23.3" y2="64" />
<circle class="st3" cx="14.1" cy="64" r="8.7" />
<circle class="st3" cx="114" cy="64" r="8.7" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 740 B