Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(ENTESB-11647) - Preview section updates for improved usability #6718

Merged
merged 2 commits into from
Sep 25, 2019
Merged

fix(ENTESB-11647) - Preview section updates for improved usability #6718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0abf2f6
fix(ENTESB-11647) - Preview section updates for improved usability
elvisisking Sep 24, 2019
cd76641
Fixes for recommended changes
elvisisking Sep 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions app/ui-react/packages/ui/src/Data/Virtualizations/ViewEditor/DdlEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
.ddl-editor {
min-height: 300px;
}

.ddl-editor__button {
margin-bottom: 8px;
margin-right: 4px;
}

.ddl-editor__card {
height: 100%;
}

.ddl-editor .text-editor {
flex: 1 1 auto;
height: 100%;
Expand Down
2 changes: 1 addition & 1 deletion app/ui-react/packages/ui/src/Data/Virtualizations/ViewEditor/DdlEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export const DdlEditor: React.FunctionComponent<IDdlEditorProps> = props => {
<Title headingLevel="h5" size="lg">
{props.i18nTitle}
</Title>
<Card style={{ height: '100%' }}>
<Card className={'ddl-editor__card'}>
<CardBody>
{props.showValidationMessage
? props.validationResults.map((e, idx) => (
Expand Down
39 changes: 29 additions & 10 deletions app/ui-react/packages/ui/src/Data/Virtualizations/ViewEditor/ExpandablePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ import {
PageSection,
Split,
SplitItem,
Stack,
StackItem,
Text,
TextContent,
TextVariants,
Title,
} from '@patternfly/react-core';
import { SyncIcon } from '@patternfly/react-icons';
Expand All @@ -31,6 +36,7 @@ export interface IExpandablePreviewProps {
i18nEmptyResultsMsg: string;
i18nHidePreview: string;
i18nLoadingQueryResults: string;
i18nRowTotalLabel: string;
i18nShowPreview: string;
i18nTitle: string;
initialExpanded?: boolean;
Expand Down Expand Up @@ -68,6 +74,7 @@ export const ExpandablePreview: React.FunctionComponent<
i18nEmptyResultsMsg,
i18nHidePreview,
i18nLoadingQueryResults,
i18nRowTotalLabel,
i18nShowPreview,
i18nTitle,
initialExpanded = true,
Expand All @@ -90,7 +97,7 @@ export const ExpandablePreview: React.FunctionComponent<
onToggle={toggleExpanded}
isExpanded={expanded}
>
<Split>
<Split style={{ alignItems: 'center' }}>
<SplitItem isFilled={false}>
<Title headingLevel="h5" size="lg">
{i18nTitle}
Expand All @@ -106,16 +113,28 @@ export const ExpandablePreview: React.FunctionComponent<
<SyncIcon />
</Button>
</SplitItem>
<SplitItem isFilled={true} />
</Split>
<PreviewResults
queryResultRows={queryResultRows}
queryResultCols={queryResultCols}
i18nEmptyResultsTitle={i18nEmptyResultsTitle}
i18nEmptyResultsMsg={i18nEmptyResultsMsg}
i18nLoadingQueryResults={i18nLoadingQueryResults}
isLoadingPreview={isLoadingPreview}
/>
<Stack>
{queryResultRows.length > 0 && (
<StackItem isFilled={false}>
<TextContent>
<Text component={TextVariants.small}>
{i18nRowTotalLabel} {queryResultRows.length}
</Text>
</TextContent>
</StackItem>
)}
<StackItem isFilled={true}>
<PreviewResults
queryResultRows={queryResultRows}
queryResultCols={queryResultCols}
i18nEmptyResultsTitle={i18nEmptyResultsTitle}
i18nEmptyResultsMsg={i18nEmptyResultsMsg}
i18nLoadingQueryResults={i18nLoadingQueryResults}
isLoadingPreview={isLoadingPreview}
/>
</StackItem>
</Stack>
</Expandable>
</PageSection>
);
Expand Down
85 changes: 43 additions & 42 deletions app/ui-react/packages/ui/src/Data/Virtualizations/ViewEditor/PreviewResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { EmptyState, EmptyStateBody, Title } from '@patternfly/react-core';
import {
EmptyState,
EmptyStateBody,
EmptyStateVariant,
Title,
} from '@patternfly/react-core';
import { Spinner, Table } from 'patternfly-react';
import * as React from 'react';
import { PageSection } from '../../../../src/Layout';
Expand Down Expand Up @@ -46,51 +51,47 @@ const defaultHeaderFormat = (value: any) => <Table.Cell>{value}</Table.Cell>;
export const PreviewResults: React.FunctionComponent<
IPreviewResultsProps
> = props => {

return (
<PageSection>
{props.isLoadingPreview ? (
<>
<Spinner loading={true} inline={true} />
{props.i18nLoadingQueryResults}
<Spinner loading={true} inline={true} />
{props.i18nLoadingQueryResults}
</>
) : (
<>
{props.queryResultCols.length > 0 ? (
<div className="generic-table_content">
<GenericTable
columns={props.queryResultCols.map(col => ({
cell: {
formatters: [defaultCellFormat],
},
header: {
formatters: [defaultHeaderFormat],
label: col.label,
},
property: col.id,
}))}
rows={props.queryResultRows}
rowKey={
props.queryResultCols.length > 0
? props.queryResultCols[0].id
: ''
}
{...props}
/>
</div>
) : (
<EmptyState variant={EmptyStateVariant.full}>
<Title headingLevel="h5" size="lg">
{props.i18nEmptyResultsTitle}
</Title>
<EmptyStateBody>{props.i18nEmptyResultsMsg}</EmptyStateBody>
</EmptyState>
)}
</>
) : (
<>
{ props.queryResultCols.length > 0 ? (
<div className="generic-table_content">
<GenericTable
columns={props.queryResultCols.map(col => ({
cell: {
formatters: [defaultCellFormat],
},
header: {
formatters: [defaultHeaderFormat],
label: col.label,
},
property: col.id,
}))}
rows={props.queryResultRows}
rowKey={
props.queryResultCols.length > 0
? props.queryResultCols[0].id
: ''
}
{...props}
/>
</div>
) : (
<EmptyState>
<Title headingLevel="h5" size="lg">
{props.i18nEmptyResultsTitle}
</Title>
<EmptyStateBody>
{props.i18nEmptyResultsMsg}
</EmptyStateBody>
</EmptyState>
)}
</>
)}
)}
</PageSection>
);

}
};
150 changes: 77 additions & 73 deletions app/ui-react/packages/ui/stories/Data/ViewEditor/ExpandablePreview.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,79 +26,83 @@ const resultRows = [
{ FirstName: 'Julia', LastName: 'Zhang', Country: 'China' },
];

stories.add('collapsed', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={false}
isLoadingPreview={false}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={resultCols}
queryResultRows={resultRows}
/>
);
})
stories
.add('collapsed', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nRowTotalLabel={'Number of Rows:'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={false}
isLoadingPreview={false}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={resultCols}
queryResultRows={resultRows}
/>
);
})

.add('expanded, Preview with results loading', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nRowTotalLabel={'Number of Rows:'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={true}
isLoadingPreview={true}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={resultCols}
queryResultRows={resultRows}
/>
);
})

.add('expanded, Preview with results loading', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={true}
isLoadingPreview={true}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={resultCols}
queryResultRows={resultRows}
/>
);
})
.add('expanded, Preview with results', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nRowTotalLabel={'Number of Rows:'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={true}
isLoadingPreview={false}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={resultCols}
queryResultRows={resultRows}
/>
);
})

.add('expanded, Preview with results', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={true}
isLoadingPreview={false}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={resultCols}
queryResultRows={resultRows}
/>
);
})

.add('expanded, Preview no results', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={true}
isLoadingPreview={false}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={[]}
queryResultRows={[]}
/>
);
});
.add('expanded, Preview no results', () => {
return (
<ExpandablePreview
i18nEmptyResultsTitle={queryResultsTableEmptyStateTitle}
i18nEmptyResultsMsg={queryResultsTableEmptyStateInfo}
i18nHidePreview={'Hide Preview'}
i18nLoadingQueryResults={'Loading query results...'}
i18nRowTotalLabel={'Number of Rows:'}
i18nShowPreview={'Show Preview'}
i18nTitle={'Preview Results'}
initialExpanded={true}
isLoadingPreview={false}
onPreviewExpandedChanged={action('expanded changed')}
onRefreshResults={action('refresh results')}
queryResultCols={[]}
queryResultRows={[]}
/>
);
});
6 changes: 3 additions & 3 deletions app/ui-react/syndesis/src/modules/data/locales/data-translations.en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"Refresh": "Refresh",
"Submit": "Submit",
"virtualization": {
"createDataVirtualization": "Create $t(shared:DataVirtualization)",
Expand Down Expand Up @@ -47,8 +48,7 @@
"resultsTableInvalidEmptyTitle": "CURRENT VIEW INVALID",
"resultsTableInvalidEmptyInfo": "The current view is invalid - no results to show",
"resultsTableValidEmptyTitle": "NO DATA AVAILABLE",
"resultsTableValidEmptyInfo": "Click 'refresh' button to refresh the preview results",
"title": "Preview Results",
"resultsTableValidEmptyInfo": "Click the 'Refresh' button to refresh the preview results. Remember to save the View Editor above to make sure you are getting the results you expect.",
"loadingQueryResults": "Loading query results..."
},
"unpublishModalMessage": "This Virtualization has been published. Unpublish Virtualization \"{{name}}\" first.",
Expand Down Expand Up @@ -87,7 +87,7 @@
"queryResultsTableEmptyStateInfo": "Query has not yet been executed.\nSelect view, enter SQL query and click 'Submit'",
"queryResultsTableEmptyStateTitle": "NO DATA AVAILABLE",
"queryResultsTitle": "Query Results",
"queryResultsRowCountMsg": "Number of Rows: ",
"queryResultsRowCountMsg": "Number of rows: ",
"queryResultsRefreshed": "The view preview results were refreshed for {{name}}",
"queryViewFailed": "An error occurred querying the selected view. Details: {{details}}",
"createVirtualizationSuccess": "{{name}} virtualization created.",
Expand Down