FEATURE: RAIL-678 Property default for loading and error

gooddata · Mar 20, 2018 · 235bd3f · 235bd3f
1 parent 1796013
commit 235bd3f
Show file tree

Hide file tree

Showing 52 changed files with 697 additions and 233 deletions.
diff --git a/examples/src/components/BarChartExample.jsx b/examples/src/components/BarChartExample.jsx
@@ -4,8 +4,6 @@ import { BarChart } from '@gooddata/react-components';
 
 import '@gooddata/react-components/styles/css/main.css';
 
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 import { totalSalesIdentifier, locationResortIdentifier, projectId } from '../utils/fixtures';
 
 export class BarChartExample extends Component {
@@ -53,8 +51,6 @@ export class BarChartExample extends Component {
                     viewBy={locationResort}
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
-                    LoadingComponent={Loading}
-                    ErrorComponent={Error}
                 />
             </div>
         );

diff --git a/examples/src/components/ColumnChartExample.jsx b/examples/src/components/ColumnChartExample.jsx
@@ -5,8 +5,6 @@ import { ColumnChart } from '@gooddata/react-components';
 
 import '@gooddata/react-components/styles/css/main.css';
 
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 import { totalSalesIdentifier, monthDateIdentifier, projectId } from '../utils/fixtures';
 
 export class ColumnChartExample extends Component {
@@ -54,8 +52,6 @@ export class ColumnChartExample extends Component {
                     viewBy={month}
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
-                    LoadingComponent={Loading}
-                    ErrorComponent={Error}
                 />
             </div>
         );

diff --git a/examples/src/components/CustomLegendExample.jsx b/examples/src/components/CustomLegendExample.jsx
@@ -4,8 +4,6 @@ import { AfmComponents } from '@gooddata/react-components';
 
 import '@gooddata/react-components/styles/css/main.css';
 
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 import {
     projectId,
     franchiseFeesAdRoyaltyIdentifier,
@@ -133,8 +131,6 @@ export class CustomChartExample extends Component {
                         }}
                         onError={this.onError}
                         onLegendReady={this.onLegendReady}
-                        LoadingComponent={Loading}
-                        ErrorComponent={Error}
                     />
                 </div>
             </div>

diff --git a/examples/src/components/CustomVisualizationExample.jsx b/examples/src/components/CustomVisualizationExample.jsx
@@ -5,8 +5,6 @@ import { Visualization, CoreComponents } from '@gooddata/react-components';
 import { ResponsiveContainer, BarChart, Bar, Legend, CartesianGrid, XAxis, YAxis } from 'recharts';
 import { get, unzip, range } from 'lodash';
 
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 import { projectId, franchiseFeesVisualizationIdentifier } from '../utils/fixtures';
 import { DEFAULT_COLOR_PALETTE } from '../utils/colors';
 
@@ -108,8 +106,6 @@ export class CustomVisualization extends Component {
 const CustomBaseChart = (props) => {
     return (<BaseChart
         {...props}
-        LoadingComponent={Loading}
-        ErrorComponent={Error}
         visualizationComponent={visProps => <CustomVisualization {...visProps} />}
     />);
 };

diff --git a/examples/src/components/DatePickerExample.jsx b/examples/src/components/DatePickerExample.jsx
@@ -1,16 +1,14 @@
 // (C) 2007-2018 GoodData Corporation
 /* eslint-disable react/jsx-closing-tag-location */
 import React, { Component } from 'react';
-import { AfmComponents } from '@gooddata/react-components';
+import { AfmComponents, ErrorComponent } from '@gooddata/react-components';
 import DatePicker from 'react-datepicker';
 import moment from 'moment';
 
 import '@gooddata/react-components/styles/css/main.css';
 import 'react-datepicker/dist/react-datepicker.css';
 
 
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 import { totalSalesIdentifier, monthDateIdentifier, dateDatasetIdentifier, projectId } from '../utils/fixtures';
 
 const { ColumnChart } = AfmComponents;
@@ -133,14 +131,12 @@ export class DatePickerExample extends Component {
                 <hr className="separator" />
                 <div style={{ height: 300 }} className="s-date-picker-chart">
                     {error
-                        ? <Error error={{ status: '400', message: error }} />
+                        ? <ErrorComponent message={error} />
                         : (<ColumnChart
                             projectId={projectId}
                             afm={afm}
                             onLoadingChanged={this.onLoadingChanged}
                             onError={this.onError}
-                            LoadingComponent={Loading}
-                            ErrorComponent={Error}
                         />)}
                 </div>
                 <hr className="separator" />

diff --git a/examples/src/components/DynamicMeasuresExample.jsx b/examples/src/components/DynamicMeasuresExample.jsx
@@ -1,14 +1,11 @@
 // (C) 2007-2018 GoodData Corporation
 /* eslint-disable react/jsx-closing-tag-location */
 import React, { Component } from 'react';
-import { LineChart, ColumnChart } from '@gooddata/react-components';
+import { LineChart, ColumnChart, ErrorComponent, LoadingComponent } from '@gooddata/react-components';
 import sdk from 'gooddata';
-
 import '@gooddata/react-components/styles/css/main.css';
 
 import { Layout } from './utils/Layout';
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 import { SidebarItem } from './utils/SidebarItem';
 import {
     monthDateIdentifier,
@@ -34,9 +31,8 @@ export class DynamicMeasuresExample extends Component {
                     return this.setState({
                         measureList: null,
                         error: {
-                            status: '404',
-                            message: `No measures with tag ${franchiseFeesTag}. Please check your project.
-                                Franchise fees measures should have assigned the tag ${franchiseFeesTag}.`
+                            message: `No measures with tag ${franchiseFeesTag}`,
+                            description: `Please check your project. Franchise fees measures should have assigned the tag ${franchiseFeesTag}.`
                         }
                     });
                 }
@@ -48,7 +44,10 @@ export class DynamicMeasuresExample extends Component {
         ).catch((error) => {
             this.setState({
                 measureList: null,
-                error: { status: '400', message: `Error while requesting measures by tag ${franchiseFeesTag}. ${JSON.stringify(error)}` }
+                error: {
+                    message: `There was Error while requesting measures by tag ${franchiseFeesTag}`,
+                    description: JSON.stringify(error)
+                }
             });
         });
     }
@@ -102,7 +101,7 @@ export class DynamicMeasuresExample extends Component {
         const { measureList, error } = this.state;
 
         if (error) {
-            return <Error error={error} />;
+            return <ErrorComponent message={error.message} description={error.description} />;
         }
 
         const loadingBlock = (<div className="loading-block" >
@@ -116,7 +115,7 @@ export class DynamicMeasuresExample extends Component {
                     align-items: center;
                 }
             `}</style>
-            <Loading />
+            <LoadingComponent />
         </div>);
 
         const sidebar = measureList
@@ -185,8 +184,6 @@ export class DynamicMeasuresExample extends Component {
                                 trendBy={attribute}
                                 onLoadingChanged={this.onLoadingChanged}
                                 onError={this.onError}
-                                LoadingComponent={Loading}
-                                ErrorComponent={Error}
                                 config={config}
                             />
                         </div>
@@ -196,15 +193,13 @@ export class DynamicMeasuresExample extends Component {
                                 measures={measures}
                                 onLoadingChanged={this.onLoadingChanged}
                                 onError={this.onError}
-                                LoadingComponent={Loading}
-                                ErrorComponent={Error}
                                 config={config}
                             />
                         </div>
                     </div>
                 );
             } else {
-                content = <Error error={{ status: '400', message: 'Please select at least one measure' }} />;
+                content = <ErrorComponent message="Please select at least one measure" />;
             }
         }
 

diff --git a/examples/src/components/ExecuteExample.jsx b/examples/src/components/ExecuteExample.jsx
@@ -1,11 +1,9 @@
 // (C) 2007-2018 GoodData Corporation
 /* eslint-disable react/jsx-closing-tag-location */
 import React, { Component } from 'react';
-import { Execute } from '@gooddata/react-components';
+import { Execute, LoadingComponent, ErrorComponent } from '@gooddata/react-components';
 
 import { totalSalesIdentifier, projectId } from '../utils/fixtures';
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 
 export class ExecuteExample extends Component {
     constructor(props) {
@@ -55,10 +53,10 @@ export class ExecuteExample extends Component {
 
     executeChildrenFunction({ result, isLoading, error }) {
         if (error) {
-            return <Error error={error} />;
+            return <ErrorComponent message="There was an error getting your execution" description={JSON.stringify(error, null, '  ')} />;
         }
         if (isLoading) {
-            return <Loading />;
+            return <LoadingComponent />;
         }
         return (
             <div>
@@ -112,7 +110,7 @@ export class ExecuteExample extends Component {
                 {status}
                 <p>
                     <button onClick={this.retry} className="button button-secondary s-retry-button">Retry</button>
-                    &emsp;(fails every second attempt)
+                    &ensp;(fails every second attempt)
                 </p>
                 {/*
                     We need to render the Execute component even in loading

diff --git a/examples/src/components/GlobalFiltersExample.jsx b/examples/src/components/GlobalFiltersExample.jsx
@@ -15,8 +15,8 @@ import {
     menuCategoryAttributeDFIdentifier
 } from '../utils/fixtures';
 import { Layout } from '../components/utils/Layout';
-import { Loading } from '../components/utils/Loading';
-import { Error } from '../components/utils/Error';
+import { CustomLoading } from '../components/utils/CustomLoading';
+import { CustomError } from '../components/utils/CustomError';
 
 export class EmployeeProfile extends React.Component {
     static propTypes = {
@@ -180,9 +180,9 @@ export class EmployeeProfile extends React.Component {
                                         projectId={projectId}
                                         format="$#,##0"
                                         LoadingComponent={
-                                            (...otherProps) => <Loading inline height={20} {...otherProps} />
+                                            (...otherProps) => <CustomLoading inline height={20} {...otherProps} />
                                         }
-                                        ErrorComponent={Error}
+                                        ErrorComponent={CustomError}
                                     />
                                 </KpiMetricBox>
 
@@ -193,9 +193,9 @@ export class EmployeeProfile extends React.Component {
                                         projectId={projectId}
                                         format="$#,##0"
                                         LoadingComponent={
-                                            (...otherProps) => <Loading inline height={20} {...otherProps} />
+                                            (...otherProps) => <CustomLoading inline height={20} {...otherProps} />
                                         }
-                                        ErrorComponent={Error}
+                                        ErrorComponent={CustomError}
                                     />
                                 </KpiMetricBox>
                             </div>
@@ -207,8 +207,8 @@ export class EmployeeProfile extends React.Component {
                                         viewBy={menuCategoryAttribute}
                                         filters={[employeeFilter]}
                                         projectId={projectId}
-                                        LoadingComponent={Loading}
-                                        ErrorComponent={Error}
+                                        LoadingComponent={CustomLoading}
+                                        ErrorComponent={CustomError}
                                         config={{ legend: { position: 'bottom' } }}
                                     />
                                 </div>
@@ -221,8 +221,8 @@ export class EmployeeProfile extends React.Component {
                                         viewBy={menuItemNameAttribute}
                                         filters={[employeeFilter]}
                                         projectId={projectId}
-                                        LoadingComponent={Loading}
-                                        ErrorComponent={Error}
+                                        LoadingComponent={CustomLoading}
+                                        ErrorComponent={CustomError}
                                     />
                                 </div>
                             </div>
@@ -238,12 +238,12 @@ export const GlobalFiltersExample = () => (
     <AttributeElements identifier={employeeNameIdentifier} projectId={projectId} options={{ limit: 20 }}>
         {({ validElements, error, isLoading }) => {
             if (error) {
-                return <Error error={{ status: '400', message: error }} />;
+                return <CustomError message="There was an error getting Employee Name attribute values" />;
             }
             if (isLoading) {
                 return (
                     <div style={{ flex: '1 0 auto', display: 'flex', flexDirection: 'column', justifyContent: 'center' }} >
-                        <Loading speed={2} color="tomato" height="100px" />
+                        <CustomLoading speed={2} color="tomato" imageHeight="100px" />
                     </div>
                 );
             }

diff --git a/examples/src/components/KpiExample.jsx b/examples/src/components/KpiExample.jsx
@@ -5,8 +5,6 @@ import { Kpi } from '@gooddata/react-components';
 import '@gooddata/react-components/styles/css/main.css';
 
 import { totalSalesIdentifier, projectId } from '../utils/fixtures';
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 
 export class KpiExample extends Component {
     render() {
@@ -18,6 +16,8 @@ export class KpiExample extends Component {
                         font-size: 50px;
                         white-space: nowrap;
                         vertical-align: bottom;
+                        text-align: center;
+                        min-width: 300px;
                         line-height: 1.2em;
                         font-weight: 700;
                         width: 300px;
@@ -26,8 +26,6 @@ export class KpiExample extends Component {
                 <Kpi
                     projectId={projectId}
                     measure={totalSalesIdentifier}
-                    LoadingComponent={Loading}
-                    ErrorComponent={Error}
                 />
             </div>
         );

diff --git a/examples/src/components/LineChartExample.jsx b/examples/src/components/LineChartExample.jsx
@@ -3,8 +3,6 @@ import React, { Component } from 'react';
 import { LineChart } from '@gooddata/react-components';
 
 import '@gooddata/react-components/styles/css/main.css';
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 
 import {
     projectId,
@@ -107,8 +105,6 @@ export class LineChartExample extends Component {
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
                     config={{ colors: CUSTOM_COLORS }}
-                    LoadingComponent={Loading}
-                    ErrorComponent={Error}
                 />
             </div>
         );

diff --git a/examples/src/components/PieChartExample.jsx b/examples/src/components/PieChartExample.jsx
@@ -10,8 +10,6 @@ import {
     franchiseFeesInitialFranchiseFeeIdentifier,
     franchiseFeesIdentifierOngoingRoyalty
 } from '../utils/fixtures';
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 
 
 export class PieChartExample extends Component {
@@ -75,8 +73,6 @@ export class PieChartExample extends Component {
                     measures={measures}
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
-                    LoadingComponent={Loading}
-                    ErrorComponent={Error}
                 />
             </div>
         );

diff --git a/examples/src/components/ResponsiveExample.jsx b/examples/src/components/ResponsiveExample.jsx
@@ -4,8 +4,6 @@ import { AfmComponents } from '@gooddata/react-components';
 import '@gooddata/react-components/styles/css/main.css';
 import Measure from 'react-measure';
 
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 import { projectId, totalSalesIdentifier, locationResortIdentifier } from '../utils/fixtures';
 
 export class ResponsiveExample extends Component {
@@ -63,8 +61,6 @@ export class ResponsiveExample extends Component {
                                     height={contentRect.bounds.height}
                                     projectId={projectId}
                                     afm={afm}
-                                    LoadingComponent={Loading}
-                                    ErrorComponent={Error}
                                 />
                             </div>
                         )}

diff --git a/examples/src/components/TableExample.jsx b/examples/src/components/TableExample.jsx
@@ -12,8 +12,6 @@ import {
     franchiseFeesInitialFranchiseFeeIdentifier,
     franchiseFeesIdentifierOngoingRoyalty
 } from '../utils/fixtures';
-import { Loading } from './utils/Loading';
-import { Error } from './utils/Error';
 
 export class TableExample extends Component {
     onLoadingChanged(...params) {
@@ -125,8 +123,6 @@ export class TableExample extends Component {
                     totals={totals}
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
-                    LoadingComponent={Loading}
-                    ErrorComponent={Error}
                 />
             </div>
         );