/
SelectedConnectionTables.tsx
59 lines (57 loc) · 1.67 KB
/
SelectedConnectionTables.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import {
Bullseye,
EmptyState,
EmptyStateBody,
EmptyStateIcon,
EmptyStateVariant,
Flex,
FlexItem,
Text,
TextContent,
TextVariants,
Title,
} from '@patternfly/react-core';
import { DatabaseIcon } from '@patternfly/react-icons';
import * as React from 'react';
import './SelectedConnectionTables.css';
export interface ISelectedConnectionTablesProps {
selectedSchemaNodesLength: number;
i18nTablesSelected: string;
i18nEmptyTablePreview: string;
}
export const SelectedConnectionTables: React.FunctionComponent<ISelectedConnectionTablesProps> = props => {
return (
<Flex
breakpointMods={[{ modifier: 'column', breakpoint: 'md' }]}
className={'selected-connection-tables'}
>
<FlexItem className={'selected-connection-tables_headingSection'}>
<TextContent>
<Text
className={'selected-connection-tables_heading_text'}
component={TextVariants.h2}
>
{`${props.i18nTablesSelected} (${props.selectedSchemaNodesLength}):`}
</Text>
</TextContent>
</FlexItem>
<FlexItem className={'selected-connection-tables_contentSection'}>
{props.selectedSchemaNodesLength === 0 ? (
<Bullseye>
<EmptyState variant={EmptyStateVariant.small}>
<EmptyStateIcon icon={DatabaseIcon} />
<Title headingLevel="h2" size="lg">
{props.i18nTablesSelected}
</Title>
<EmptyStateBody>
{props.i18nEmptyTablePreview}
</EmptyStateBody>
</EmptyState>
</Bullseye>
) : (
props.children
)}
</FlexItem>
</Flex>
);
};