upgrade to react-bootstrap v0.33.1 (#9372)
* upgrade to react-bootstrap v0.33.1 * fix test * simplify proptypes Co-Authored-By: Evan Rusackas <evan@preset.io> * simplify more proptypes Co-Authored-By: Evan Rusackas <evan@preset.io> Co-authored-by: Evan Rusackas <evan@preset.io>
This commit is contained in:
David Aaron Suddjian
GitHub
parent
ccff6be969
commit
cfa786850f
|
|
@ -10815,7 +10815,8 @@
|
|||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.2",
|
||||
"resolved": ""
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
|
||||
"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -11929,7 +11930,8 @@
|
|||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
|
|
@ -15982,7 +15984,8 @@
|
|||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.2",
|
||||
"resolved": ""
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
|
||||
"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -16852,7 +16855,8 @@
|
|||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
|
|
@ -29809,12 +29813,22 @@
|
|||
}
|
||||
},
|
||||
"prop-types-extra": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
|
||||
"integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
|
||||
"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
|
||||
"requires": {
|
||||
"react-is": "^16.3.2",
|
||||
"warning": "^3.0.0"
|
||||
"warning": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"property-information": {
|
||||
|
|
@ -30075,19 +30089,21 @@
|
|||
}
|
||||
},
|
||||
"react-bootstrap": {
|
||||
"version": "0.31.5",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.31.5.tgz",
|
||||
"integrity": "sha512-xgDihgX4QvYHmHzL87faDBMDnGfYyqcrqV0TEbWY+JizePOG1vfb8M3xJN+6MJ3kUYqDtQSZ7v/Q6Y5YDrkMdA==",
|
||||
"version": "0.33.1",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.33.1.tgz",
|
||||
"integrity": "sha512-qWTRravSds87P8WC82tETy2yIso8qDqlIm0czsrduCaYAFtHuyLu0XDbUlfLXeRzqgwm5sRk2wRaTNoiVkk/YQ==",
|
||||
"requires": {
|
||||
"babel-runtime": "^6.11.6",
|
||||
"@babel/runtime-corejs2": "^7.0.0",
|
||||
"classnames": "^2.2.5",
|
||||
"dom-helpers": "^3.2.0",
|
||||
"invariant": "^2.2.1",
|
||||
"keycode": "^2.1.2",
|
||||
"prop-types": "^15.5.10",
|
||||
"invariant": "^2.2.4",
|
||||
"keycode": "^2.2.0",
|
||||
"prop-types": "^15.6.1",
|
||||
"prop-types-extra": "^1.0.1",
|
||||
"react-overlays": "^0.7.4",
|
||||
"uncontrollable": "^4.1.0",
|
||||
"react-overlays": "^0.9.0",
|
||||
"react-prop-types": "^0.4.0",
|
||||
"react-transition-group": "^2.0.0",
|
||||
"uncontrollable": "^7.0.2",
|
||||
"warning": "^3.0.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -30466,14 +30482,23 @@
|
|||
"integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg=="
|
||||
},
|
||||
"react-overlays": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.7.4.tgz",
|
||||
"integrity": "sha512-7vsooMx3siLAuEfTs8FYeP/lAORWWFXTO8PON3KgX0Htq1Oa+po6ioSjGyO0/GO5CVSMNhpWt6V2opeexHgBuQ==",
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.9.1.tgz",
|
||||
"integrity": "sha512-b0asy/zHtRd0i2+2/uNxe3YVprF3bRT1guyr791DORjCzE/HSBMog+ul83CdtKQ1kZ+pLnxWCu5W3BMysFhHdQ==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"dom-helpers": "^3.2.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"prop-types-extra": "^1.0.1",
|
||||
"react-transition-group": "^2.2.1",
|
||||
"warning": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"react-prop-types": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz",
|
||||
"integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=",
|
||||
"requires": {
|
||||
"warning": "^3.0.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -32115,7 +32140,8 @@
|
|||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.2",
|
||||
"resolved": ""
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
|
||||
"integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -33807,11 +33833,29 @@
|
|||
"integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
|
||||
},
|
||||
"uncontrollable": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-4.1.0.tgz",
|
||||
"integrity": "sha1-4DWCkSUuGGUiLZCTmxny9J+Bwak=",
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
|
||||
"integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
|
||||
"requires": {
|
||||
"invariant": "^2.1.0"
|
||||
"@babel/runtime": "^7.6.3",
|
||||
"@types/react": "^16.9.11",
|
||||
"invariant": "^2.2.4",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
|
||||
"integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.5",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
|
||||
"integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"underscore": {
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@
|
|||
"re-resizable": "^4.3.1",
|
||||
"react": "^16.13.0",
|
||||
"react-ace": "^5.10.0",
|
||||
"react-bootstrap": "^0.31.5",
|
||||
"react-bootstrap": "^0.33.1",
|
||||
"react-bootstrap-dialog": "^0.10.0",
|
||||
"react-bootstrap-slider": "2.1.5",
|
||||
"react-checkbox-tree": "^1.5.1",
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ describe('ControlPanelSection', () => {
|
|||
it('renders a label if present', () => {
|
||||
expect(
|
||||
wrapper
|
||||
.find(Panel)
|
||||
.find(Panel.Title)
|
||||
.dive()
|
||||
.text(),
|
||||
).toContain('my label');
|
||||
|
|
|
|||
|
|
@ -80,53 +80,58 @@ export default class AddSliceContainer extends React.PureComponent {
|
|||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<Panel header={<h3>{t('Create a new chart')}</h3>}>
|
||||
<div>
|
||||
<p>{t('Choose a datasource')}</p>
|
||||
<div style={styleSelectWidth}>
|
||||
<Select
|
||||
clearable={false}
|
||||
ignoreAccents={false}
|
||||
name="select-datasource"
|
||||
onChange={this.changeDatasource}
|
||||
options={this.props.datasources}
|
||||
placeholder={t('Choose a datasource')}
|
||||
style={styleSelectWidth}
|
||||
value={this.state.datasourceValue}
|
||||
width={600}
|
||||
<Panel>
|
||||
<Panel.Heading>
|
||||
<h3>{t('Create a new chart')}</h3>
|
||||
</Panel.Heading>
|
||||
<Panel.Body>
|
||||
<div>
|
||||
<p>{t('Choose a datasource')}</p>
|
||||
<div style={styleSelectWidth}>
|
||||
<Select
|
||||
clearable={false}
|
||||
ignoreAccents={false}
|
||||
name="select-datasource"
|
||||
onChange={this.changeDatasource}
|
||||
options={this.props.datasources}
|
||||
placeholder={t('Choose a datasource')}
|
||||
style={styleSelectWidth}
|
||||
value={this.state.datasourceValue}
|
||||
width={600}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted">
|
||||
{t(
|
||||
'If the datasource you are looking for is not ' +
|
||||
'available in the list, ' +
|
||||
'follow the instructions on the how to add it on the ',
|
||||
)}
|
||||
<a href="https://superset.apache.org/tutorial.html">
|
||||
{t('Superset tutorial')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<p>{t('Choose a visualization type')}</p>
|
||||
<VizTypeControl
|
||||
name="select-vis-type"
|
||||
onChange={this.changeVisType}
|
||||
value={this.state.visType}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted">
|
||||
{t(
|
||||
'If the datasource you are looking for is not ' +
|
||||
'available in the list, ' +
|
||||
'follow the instructions on the how to add it on the ',
|
||||
)}
|
||||
<a href="https://superset.apache.org/tutorial.html">
|
||||
{t('Superset tutorial')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<p>{t('Choose a visualization type')}</p>
|
||||
<VizTypeControl
|
||||
name="select-vis-type"
|
||||
onChange={this.changeVisType}
|
||||
value={this.state.visType}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<hr />
|
||||
<Button
|
||||
bsStyle="primary"
|
||||
disabled={this.isBtnDisabled()}
|
||||
onClick={this.gotoSlice}
|
||||
>
|
||||
{t('Create new chart')}
|
||||
</Button>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<hr />
|
||||
<Button
|
||||
bsStyle="primary"
|
||||
disabled={this.isBtnDisabled()}
|
||||
onClick={this.gotoSlice}
|
||||
>
|
||||
{t('Create new chart')}
|
||||
</Button>
|
||||
<br />
|
||||
<br />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import renderFilterFieldTreeNodes from './renderFilterFieldTreeNodes';
|
|||
import { filterScopeSelectorTreeNodePropShape } from '../../util/propShapes';
|
||||
|
||||
const propTypes = {
|
||||
activeKey: PropTypes.oneOfType([null, PropTypes.string]),
|
||||
activeKey: PropTypes.string,
|
||||
nodes: PropTypes.arrayOf(filterScopeSelectorTreeNodePropShape).isRequired,
|
||||
checked: PropTypes.arrayOf(
|
||||
PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const propTypes = {
|
|||
).isRequired,
|
||||
onCheck: PropTypes.func.isRequired,
|
||||
onExpand: PropTypes.func.isRequired,
|
||||
selectedChartId: PropTypes.oneOfType([null, PropTypes.number]),
|
||||
selectedChartId: PropTypes.number,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ export default class ControlPanelSection extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { expanded: this.props.startExpanded };
|
||||
this.toggleExpand = this.toggleExpand.bind(this);
|
||||
}
|
||||
toggleExpand() {
|
||||
this.setState({ expanded: !this.state.expanded });
|
||||
|
|
@ -50,7 +51,7 @@ export default class ControlPanelSection extends React.Component {
|
|||
label && (
|
||||
<div>
|
||||
<span>
|
||||
<span onClick={this.toggleExpand.bind(this)}>{label}</span>{' '}
|
||||
<span onClick={this.toggleExpand}>{label}</span>{' '}
|
||||
{description && (
|
||||
<InfoTooltipWithTrigger label={label} tooltip={description} />
|
||||
)}
|
||||
|
|
@ -77,11 +78,15 @@ export default class ControlPanelSection extends React.Component {
|
|||
return (
|
||||
<Panel
|
||||
className="control-panel-section"
|
||||
collapsible
|
||||
expanded={this.state.expanded}
|
||||
header={this.renderHeader()}
|
||||
onToggle={this.toggleExpand}
|
||||
>
|
||||
{this.props.children}
|
||||
<Panel.Heading>
|
||||
<Panel.Title>{this.renderHeader()}</Panel.Title>
|
||||
</Panel.Heading>
|
||||
<Panel.Collapse>
|
||||
<Panel.Body>{this.props.children}</Panel.Body>
|
||||
</Panel.Collapse>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,8 +111,9 @@ class ExploreChartPanel extends React.PureComponent {
|
|||
);
|
||||
return (
|
||||
<div className="chart-container">
|
||||
<Panel style={{ height: this.props.height }} header={header}>
|
||||
{this.renderChart()}
|
||||
<Panel style={{ height: this.props.height }}>
|
||||
<Panel.Heading>{header}</Panel.Heading>
|
||||
<Panel.Body>{this.renderChart()}</Panel.Body>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -120,44 +120,49 @@ export default class FixedOrMetricControl extends React.Component {
|
|||
className="panel-spreaded"
|
||||
collapsible
|
||||
expanded={this.state.expanded}
|
||||
onToggle={this.toggle}
|
||||
>
|
||||
<div className="well">
|
||||
<PopoverSection
|
||||
title="Fixed"
|
||||
isSelected={type === controlTypes.fixed}
|
||||
onSelect={() => {
|
||||
this.setType(controlTypes.fixed);
|
||||
}}
|
||||
>
|
||||
<TextControl
|
||||
isFloat
|
||||
onChange={this.setFixedValue}
|
||||
onFocus={() => {
|
||||
this.setType(controlTypes.fixed);
|
||||
}}
|
||||
value={this.state.fixedValue}
|
||||
/>
|
||||
</PopoverSection>
|
||||
<PopoverSection
|
||||
title="Based on a metric"
|
||||
isSelected={type === controlTypes.metric}
|
||||
onSelect={() => {
|
||||
this.setType(controlTypes.metric);
|
||||
}}
|
||||
>
|
||||
<MetricsControl
|
||||
name="metric"
|
||||
columns={columns}
|
||||
savedMetrics={metrics}
|
||||
multi={false}
|
||||
onFocus={() => {
|
||||
this.setType(controlTypes.metric);
|
||||
}}
|
||||
onChange={this.setMetric}
|
||||
value={this.state.metricValue}
|
||||
/>
|
||||
</PopoverSection>
|
||||
</div>
|
||||
<Panel.Collapse>
|
||||
<Panel.Body>
|
||||
<div className="well">
|
||||
<PopoverSection
|
||||
title="Fixed"
|
||||
isSelected={type === controlTypes.fixed}
|
||||
onSelect={() => {
|
||||
this.setType(controlTypes.fixed);
|
||||
}}
|
||||
>
|
||||
<TextControl
|
||||
isFloat
|
||||
onChange={this.setFixedValue}
|
||||
onFocus={() => {
|
||||
this.setType(controlTypes.fixed);
|
||||
}}
|
||||
value={this.state.fixedValue}
|
||||
/>
|
||||
</PopoverSection>
|
||||
<PopoverSection
|
||||
title="Based on a metric"
|
||||
isSelected={type === controlTypes.metric}
|
||||
onSelect={() => {
|
||||
this.setType(controlTypes.metric);
|
||||
}}
|
||||
>
|
||||
<MetricsControl
|
||||
name="metric"
|
||||
columns={columns}
|
||||
savedMetrics={metrics}
|
||||
multi={false}
|
||||
onFocus={() => {
|
||||
this.setType(controlTypes.metric);
|
||||
}}
|
||||
onChange={this.setMetric}
|
||||
value={this.state.metricValue}
|
||||
/>
|
||||
</PopoverSection>
|
||||
</div>
|
||||
</Panel.Body>
|
||||
</Panel.Collapse>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ const propTypes = {
|
|||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
PropTypes.object,
|
||||
PropTypes.bool,
|
||||
PropTypes.array,
|
||||
PropTypes.func,
|
||||
]),
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,9 @@ export default function App(props) {
|
|||
}
|
||||
>
|
||||
<Panel>
|
||||
<Favorites user={props.user} />
|
||||
<Panel.Body>
|
||||
<Favorites user={props.user} />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</Tab>
|
||||
<Tab
|
||||
|
|
@ -61,7 +63,9 @@ export default function App(props) {
|
|||
}
|
||||
>
|
||||
<Panel>
|
||||
<CreatedContent user={props.user} />
|
||||
<Panel.Body>
|
||||
<CreatedContent user={props.user} />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</Tab>
|
||||
<Tab
|
||||
|
|
@ -73,7 +77,9 @@ export default function App(props) {
|
|||
}
|
||||
>
|
||||
<Panel>
|
||||
<RecentActivity user={props.user} />
|
||||
<Panel.Body>
|
||||
<RecentActivity user={props.user} />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</Tab>
|
||||
<Tab
|
||||
|
|
@ -85,7 +91,9 @@ export default function App(props) {
|
|||
}
|
||||
>
|
||||
<Panel>
|
||||
<Security user={props.user} />
|
||||
<Panel.Body>
|
||||
<Security user={props.user} />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
|
|
|||
|
|
@ -41,31 +41,33 @@ const UserInfo = ({ user }) => (
|
|||
</a>
|
||||
<hr />
|
||||
<Panel>
|
||||
<h3>
|
||||
<strong>
|
||||
{user.firstName} {user.lastName}
|
||||
</strong>
|
||||
</h3>
|
||||
<h4 className="username">
|
||||
<i className="fa fa-user-o" /> {user.username}
|
||||
</h4>
|
||||
<hr />
|
||||
<p>
|
||||
<i className="fa fa-clock-o" /> {t('joined')}{' '}
|
||||
{moment(user.createdOn, 'YYYYMMDD').fromNow()}
|
||||
</p>
|
||||
<p className="email">
|
||||
<i className="fa fa-envelope-o" /> {user.email}
|
||||
</p>
|
||||
<p className="roles">
|
||||
<i className="fa fa-lock" /> {Object.keys(user.roles).join(', ')}
|
||||
</p>
|
||||
<p>
|
||||
<i className="fa fa-key" />
|
||||
|
||||
<span className="text-muted">{t('id:')}</span>
|
||||
<span className="user-id">{user.userId}</span>
|
||||
</p>
|
||||
<Panel.Body>
|
||||
<h3>
|
||||
<strong>
|
||||
{user.firstName} {user.lastName}
|
||||
</strong>
|
||||
</h3>
|
||||
<h4 className="username">
|
||||
<i className="fa fa-user-o" /> {user.username}
|
||||
</h4>
|
||||
<hr />
|
||||
<p>
|
||||
<i className="fa fa-clock-o" /> {t('joined')}{' '}
|
||||
{moment(user.createdOn, 'YYYYMMDD').fromNow()}
|
||||
</p>
|
||||
<p className="email">
|
||||
<i className="fa fa-envelope-o" /> {user.email}
|
||||
</p>
|
||||
<p className="roles">
|
||||
<i className="fa fa-lock" /> {Object.keys(user.roles).join(', ')}
|
||||
</p>
|
||||
<p>
|
||||
<i className="fa fa-key" />
|
||||
|
||||
<span className="text-muted">{t('id:')}</span>
|
||||
<span className="user-id">{user.userId}</span>
|
||||
</p>
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -393,51 +393,53 @@ class ChartList extends React.PureComponent<Props, State> {
|
|||
return (
|
||||
<div className="container welcome">
|
||||
<Panel>
|
||||
{sliceCurrentlyEditing && (
|
||||
<PropertiesModal
|
||||
show
|
||||
onHide={this.closeChartEditModal}
|
||||
onSave={this.handleChartUpdated}
|
||||
slice={sliceCurrentlyEditing}
|
||||
/>
|
||||
)}
|
||||
<ConfirmStatusChange
|
||||
title={t('Please confirm')}
|
||||
description={t(
|
||||
'Are you sure you want to delete the selected charts?',
|
||||
<Panel.Body>
|
||||
{sliceCurrentlyEditing && (
|
||||
<PropertiesModal
|
||||
show
|
||||
onHide={this.closeChartEditModal}
|
||||
onSave={this.handleChartUpdated}
|
||||
slice={sliceCurrentlyEditing}
|
||||
/>
|
||||
)}
|
||||
onConfirm={this.handleBulkChartDelete}
|
||||
>
|
||||
{confirmDelete => {
|
||||
const bulkActions = [];
|
||||
if (this.canDelete) {
|
||||
bulkActions.push({
|
||||
key: 'delete',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-trash" /> Delete
|
||||
</>
|
||||
),
|
||||
onSelect: confirmDelete,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<ListView
|
||||
className="chart-list-view"
|
||||
title={'Charts'}
|
||||
columns={this.columns}
|
||||
data={charts}
|
||||
count={chartCount}
|
||||
pageSize={PAGE_SIZE}
|
||||
fetchData={this.fetchData}
|
||||
loading={loading}
|
||||
initialSort={this.initialSort}
|
||||
filters={filters}
|
||||
bulkActions={bulkActions}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</ConfirmStatusChange>
|
||||
<ConfirmStatusChange
|
||||
title={t('Please confirm')}
|
||||
description={t(
|
||||
'Are you sure you want to delete the selected charts?',
|
||||
)}
|
||||
onConfirm={this.handleBulkChartDelete}
|
||||
>
|
||||
{confirmDelete => {
|
||||
const bulkActions = [];
|
||||
if (this.canDelete) {
|
||||
bulkActions.push({
|
||||
key: 'delete',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-trash" /> Delete
|
||||
</>
|
||||
),
|
||||
onSelect: confirmDelete,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<ListView
|
||||
className="chart-list-view"
|
||||
title={'Charts'}
|
||||
columns={this.columns}
|
||||
data={charts}
|
||||
count={chartCount}
|
||||
pageSize={PAGE_SIZE}
|
||||
fetchData={this.fetchData}
|
||||
loading={loading}
|
||||
initialSort={this.initialSort}
|
||||
filters={filters}
|
||||
bulkActions={bulkActions}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</ConfirmStatusChange>
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -427,64 +427,66 @@ class DashboardList extends React.PureComponent<Props, State> {
|
|||
return (
|
||||
<div className="container welcome">
|
||||
<Panel>
|
||||
<ConfirmStatusChange
|
||||
title={t('Please confirm')}
|
||||
description={t(
|
||||
'Are you sure you want to delete the selected dashboards?',
|
||||
)}
|
||||
onConfirm={this.handleBulkDashboardDelete}
|
||||
>
|
||||
{confirmDelete => {
|
||||
const bulkActions = [];
|
||||
if (this.canDelete) {
|
||||
bulkActions.push({
|
||||
key: 'delete',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-trash" /> Delete
|
||||
</>
|
||||
),
|
||||
onSelect: confirmDelete,
|
||||
});
|
||||
}
|
||||
if (this.canExport) {
|
||||
bulkActions.push({
|
||||
key: 'export',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-database" /> Export
|
||||
</>
|
||||
),
|
||||
onSelect: this.handleBulkDashboardExport,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{dashboardToEdit && (
|
||||
<PropertiesModal
|
||||
show
|
||||
dashboardId={dashboardToEdit.id}
|
||||
onHide={() => this.setState({ dashboardToEdit: null })}
|
||||
onDashboardSave={this.handleDashboardEdit}
|
||||
<Panel.Body>
|
||||
<ConfirmStatusChange
|
||||
title={t('Please confirm')}
|
||||
description={t(
|
||||
'Are you sure you want to delete the selected dashboards?',
|
||||
)}
|
||||
onConfirm={this.handleBulkDashboardDelete}
|
||||
>
|
||||
{confirmDelete => {
|
||||
const bulkActions = [];
|
||||
if (this.canDelete) {
|
||||
bulkActions.push({
|
||||
key: 'delete',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-trash" /> Delete
|
||||
</>
|
||||
),
|
||||
onSelect: confirmDelete,
|
||||
});
|
||||
}
|
||||
if (this.canExport) {
|
||||
bulkActions.push({
|
||||
key: 'export',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-database" /> Export
|
||||
</>
|
||||
),
|
||||
onSelect: this.handleBulkDashboardExport,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{dashboardToEdit && (
|
||||
<PropertiesModal
|
||||
show
|
||||
dashboardId={dashboardToEdit.id}
|
||||
onHide={() => this.setState({ dashboardToEdit: null })}
|
||||
onDashboardSave={this.handleDashboardEdit}
|
||||
/>
|
||||
)}
|
||||
<ListView
|
||||
className="dashboard-list-view"
|
||||
title={'Dashboards'}
|
||||
columns={this.columns}
|
||||
data={dashboards}
|
||||
count={dashboardCount}
|
||||
pageSize={PAGE_SIZE}
|
||||
fetchData={this.fetchData}
|
||||
loading={loading}
|
||||
initialSort={this.initialSort}
|
||||
filters={filters}
|
||||
bulkActions={bulkActions}
|
||||
/>
|
||||
)}
|
||||
<ListView
|
||||
className="dashboard-list-view"
|
||||
title={'Dashboards'}
|
||||
columns={this.columns}
|
||||
data={dashboards}
|
||||
count={dashboardCount}
|
||||
pageSize={PAGE_SIZE}
|
||||
fetchData={this.fetchData}
|
||||
loading={loading}
|
||||
initialSort={this.initialSort}
|
||||
filters={filters}
|
||||
bulkActions={bulkActions}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</ConfirmStatusChange>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</ConfirmStatusChange>
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -389,56 +389,58 @@ class DatasetList extends React.PureComponent<Props, State> {
|
|||
return (
|
||||
<div className="container welcome">
|
||||
<Panel>
|
||||
<ConfirmStatusChange
|
||||
title={t('Please confirm')}
|
||||
description={t(
|
||||
'Are you sure you want to delete the selected datasets?',
|
||||
)}
|
||||
onConfirm={this.handleBulkDatasetDelete}
|
||||
>
|
||||
{confirmDelete => {
|
||||
const bulkActions = [];
|
||||
if (this.canDelete) {
|
||||
bulkActions.push({
|
||||
key: 'delete',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-trash" /> Delete
|
||||
</>
|
||||
),
|
||||
onSelect: confirmDelete,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{this.canCreate && (
|
||||
<span className="list-add-action">
|
||||
<Link
|
||||
className="btn btn-sm btn-primary pull-right"
|
||||
href="/tablemodelview/add"
|
||||
tooltip="Add a new record"
|
||||
>
|
||||
<i className="fa fa-plus" />
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
<ListView
|
||||
className="dataset-list-view"
|
||||
title={'Datasets'}
|
||||
columns={this.columns}
|
||||
data={datasets}
|
||||
count={datasetCount}
|
||||
pageSize={PAGE_SIZE}
|
||||
fetchData={this.fetchData}
|
||||
loading={loading}
|
||||
initialSort={this.initialSort}
|
||||
filters={filters}
|
||||
bulkActions={bulkActions}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</ConfirmStatusChange>
|
||||
<Panel.Body>
|
||||
<ConfirmStatusChange
|
||||
title={t('Please confirm')}
|
||||
description={t(
|
||||
'Are you sure you want to delete the selected datasets?',
|
||||
)}
|
||||
onConfirm={this.handleBulkDatasetDelete}
|
||||
>
|
||||
{confirmDelete => {
|
||||
const bulkActions = [];
|
||||
if (this.canDelete) {
|
||||
bulkActions.push({
|
||||
key: 'delete',
|
||||
name: (
|
||||
<>
|
||||
<i className="fa fa-trash" /> Delete
|
||||
</>
|
||||
),
|
||||
onSelect: confirmDelete,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{this.canCreate && (
|
||||
<span className="list-add-action">
|
||||
<Link
|
||||
className="btn btn-sm btn-primary pull-right"
|
||||
href="/tablemodelview/add"
|
||||
tooltip="Add a new record"
|
||||
>
|
||||
<i className="fa fa-plus" />
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
<ListView
|
||||
className="dataset-list-view"
|
||||
title={'Datasets'}
|
||||
columns={this.columns}
|
||||
data={datasets}
|
||||
count={datasetCount}
|
||||
pageSize={PAGE_SIZE}
|
||||
fetchData={this.fetchData}
|
||||
loading={loading}
|
||||
initialSort={this.initialSort}
|
||||
filters={filters}
|
||||
bulkActions={bulkActions}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</ConfirmStatusChange>
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -63,45 +63,51 @@ export default function Welcome({ user }) {
|
|||
>
|
||||
<Tab eventKey="all" title={t('Dashboards')}>
|
||||
<Panel>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
<h2>{t('Dashboards')}</h2>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormControl
|
||||
type="text"
|
||||
bsSize="sm"
|
||||
style={{ marginTop: '25px' }}
|
||||
placeholder="Search"
|
||||
value={searchQuery}
|
||||
onChange={e => setSearchQuery(e.currentTarget.value)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<DashboardTable search={searchQuery} />
|
||||
<Panel.Body>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
<h2>{t('Dashboards')}</h2>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormControl
|
||||
type="text"
|
||||
bsSize="sm"
|
||||
style={{ marginTop: '25px' }}
|
||||
placeholder="Search"
|
||||
value={searchQuery}
|
||||
onChange={e => setSearchQuery(e.currentTarget.value)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<DashboardTable search={searchQuery} />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</Tab>
|
||||
<Tab eventKey="recent" title={t('Recently Viewed')}>
|
||||
<Panel>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
<h2>{t('Recently Viewed')}</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<RecentActivity user={user} />
|
||||
<Panel.Body>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
<h2>{t('Recently Viewed')}</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<RecentActivity user={user} />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</Tab>
|
||||
<Tab eventKey="favorites" title={t('Favorites')}>
|
||||
<Panel>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
<h2>{t('Favorites')}</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<Favorites user={user} />
|
||||
<Panel.Body>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
<h2>{t('Favorites')}</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<Favorites user={user} />
|
||||
</Panel.Body>
|
||||
</Panel>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
|
|
|||
Loading…
Reference in New Issue