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

reuse buttons across console for uniformity (#1400)

Browse Source
This commit is contained in:
Rishichandra Wawhal 2019-01-23 07:26:40 +05:30 committed by Shahidh K Muhammed
parent ace701a24a
commit 3cfeb6064a
44 changed files with 480 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
console/src/components/Common/Common.scss
View File

@ -789,6 +789,9 @@ code
background-color: #F2B130;
}
}
.gray_button {
background: #f2f2f2 !important;
}
.docsButton
{
background-color: #fff;
@ -1109,6 +1112,11 @@ code
height: 100vh;
margin-bottom: 50px;
}
.button_mar_right
{
margin-right: 20px;
}
/* container height subtracting top header and bottom scroll bar */
$mainContainerHeight: calc(100vh - 50px - 25px);

8
console/src/components/Services/CustomResolver/Add/Add.js
View File

@ -3,6 +3,7 @@ import Common from '../Common/Common';
import { addResolver, RESET } from './addResolverReducer';
import Helmet from 'react-helmet';
import Button from '../../Layout/Button/Button';
import { pageTitle } from '../constants';
@ -25,14 +26,15 @@ class Add extends React.Component {
>
<Common {...this.props} />
<div className={styles.commonBtn}>
<button
<Button
type="submit"
className={styles.yellow_button}
color="yellow"
size="sm"
disabled={isRequesting}
data-test="add-remote-schema-submit"
>
{isRequesting ? 'Adding...' : 'Add Remote Schema'}
</button>
</Button>
{/*
<button className={styles.default_button}>Cancel</button>
*/}

31
console/src/components/Services/CustomResolver/Edit/Edit.js
View File

@ -13,6 +13,7 @@ import { push } from 'react-router-redux';
import Helmet from 'react-helmet';
import tabInfo from './tabInfo';
import CommonTabLayout from '../../Layout/CommonTabLayout/CommonTabLayout';
import Button from '../../Layout/Button/Button';
import { appPrefix, pageTitle } from '../constants';
@ -97,8 +98,10 @@ class Edit extends React.Component {
const generateMigrateBtns = () => {
return 'isModify' in editState && !editState.isModify ? (
<div className={styles.commonBtn}>
<button
className={styles.yellow_button}
<Button
className={styles.button_mar_right}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
this.modifyClick();
@ -107,9 +110,10 @@ class Edit extends React.Component {
disabled={isRequesting}
>
Modify
</button>
<button
className={styles.danger_button + ' btn-danger'}
</Button>
<Button
color="red"
size="sm"
onClick={e => {
e.preventDefault();
this.handleDeleteResolver(e);
@ -118,7 +122,7 @@ class Edit extends React.Component {
data-test={'remote-schema-edit-delete-btn'}
>
{isRequesting ? 'Deleting ...' : 'Delete'}
</button>
</Button>
{this.state.deleteConfirmationError ? (
<span
className={styles.delete_confirmation_error}
@ -130,16 +134,19 @@ class Edit extends React.Component {
</div>
) : (
<div className={styles.commonBtn}>
<button
className={styles.yellow_button}
<Button
className={styles.button_mar_right}
color="yellow"
size="sm"
type="submit"
disabled={isRequesting}
data-test={'remote-schema-edit-save-btn'}
>
{isRequesting ? 'Saving' : 'Save'}
</button>
<button
className={styles.default_button}
</Button>
<Button
color="white"
size="sm"
onClick={e => {
e.preventDefault();
this.handleCancelModify();
@ -148,7 +155,7 @@ class Edit extends React.Component {
disabled={isRequesting}
>
Cancel
</button>
</Button>
</div>
);
};

8
console/src/components/Services/CustomResolver/Landing/CustomResolver.js
View File

@ -4,6 +4,7 @@ import { push } from 'react-router-redux';
import { appPrefix, pageTitle } from '../constants';
import globals from '../../../../Globals';
import Button from '../../Layout/Button/Button';
class CustomResolver extends React.Component {
render() {
@ -25,16 +26,17 @@ class CustomResolver extends React.Component {
Remote Schemas &nbsp;
</h2>
{migrationMode ? (
<button
<Button
data-test="data-create-remote-schemas"
className={styles.yellow_button}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
dispatch(push(`${globals.urlPrefix}${appPrefix}/manage/add`));
}}
>
Add
</button>
</Button>
) : null}
<hr />
</div>

2
console/src/components/Services/CustomResolver/Styles.scss
View File

@ -139,4 +139,4 @@
line-height: 26px;
}
}
}

8
console/src/components/Services/Data/Add/AddTable.js
View File

@ -4,6 +4,7 @@ import Helmet from 'react-helmet';
import * as tooltip from './Tooltips';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Button from '../../Layout/Button/Button';
import dataTypes from '../Common/DataTypes';
import { showErrorNotification } from '../Notification';
@ -472,14 +473,15 @@ class AddTable extends Component {
}}
/>
<hr />
<button
<Button
type="submit"
className={`btn ${styles.yellow_button}`}
onClick={this.submitValidation.bind(this)}
data-test="table-create"
color="yellow"
size="sm"
>
{createBtnText}
</button>
</Button>
</div>
</div>
</div>

10
console/src/components/Services/Data/Metadata/ClearAccessKey.js
View File

@ -7,6 +7,7 @@ import {
showSuccessNotification,
showErrorNotification,
} from '../Notification';
import Button from '../../Layout/Button/Button';
class ClearAccessKey extends Component {
constructor() {
@ -15,13 +16,14 @@ class ClearAccessKey extends Component {
this.state.isClearing = false;
}
render() {
const styles = require('../PageContainer/PageContainer.scss');
const metaDataStyles = require('./Metadata.scss');
return (
<div className={metaDataStyles.display_inline}>
<button
<Button
data-test="data-clear-access-key"
className={styles.default_button + ' ' + metaDataStyles.margin_right}
className={metaDataStyles.margin_right}
color="white"
size="sm"
onClick={e => {
e.preventDefault();
this.setState({ isClearing: true });
@ -52,7 +54,7 @@ class ClearAccessKey extends Component {
}}
>
{this.state.isClearing ? 'Clearing...' : 'Clear access key (logout)'}
</button>
</Button>
</div>
);
}

10
console/src/components/Services/Data/Metadata/ExportMetadata.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
import Button from '../../Layout/Button/Button';
import {
showSuccessNotification,
@ -14,13 +15,14 @@ class ExportMetadata extends Component {
this.state.isExporting = false;
}
render() {
const styles = require('../PageContainer/PageContainer.scss');
const metaDataStyles = require('./Metadata.scss');
return (
<div className={metaDataStyles.display_inline}>
<button
<Button
data-test="data-export-metadata"
className={styles.default_button + ' ' + metaDataStyles.margin_right}
className={metaDataStyles.margin_right}
size="sm"
color="white"
onClick={e => {
e.preventDefault();
this.setState({ isExporting: true });
@ -83,7 +85,7 @@ class ExportMetadata extends Component {
}}
>
{this.state.isExporting ? 'Exporting...' : 'Export metadata'}
</button>
</Button>
</div>
);
}

9
console/src/components/Services/Data/Metadata/ImportMetadata.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
import Button from '../../Layout/Button/Button';
import {
showSuccessNotification,
@ -83,13 +84,13 @@ class ImportMetadata extends Component {
});
}
render() {
const styles = require('../PageContainer/PageContainer.scss');
const metaDataStyles = require('./Metadata.scss');
return (
<div className={metaDataStyles.display_inline}>
<button
<Button
data-test="data-import-metadata"
className={styles.default_button}
size="sm"
color="white"
onClick={e => {
e.preventDefault();
const currThis = this;
@ -112,7 +113,7 @@ class ImportMetadata extends Component {
}}
>
{this.state.isImporting ? 'Importing...' : 'Import metadata'}
</button>
</Button>
</div>
);
}

9
console/src/components/Services/Data/Metadata/ReloadMetadata.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
import Button from '../../Layout/Button/Button';
import {
showSuccessNotification,
@ -14,13 +15,13 @@ class ReloadMetadata extends Component {
this.state.isReloading = false;
}
render() {
const styles = require('../PageContainer/PageContainer.scss');
const metaDataStyles = require('./Metadata.scss');
return (
<div className={metaDataStyles.display_inline}>
<button
<Button
data-test="data-reload-metadata"
className={this.props.bsClass || styles.default_button}
color="white"
size="sm"
onClick={e => {
e.preventDefault();
this.setState({ isReloading: true });
@ -75,7 +76,7 @@ class ReloadMetadata extends Component {
{this.state.isReloading
? this.props.btnTextChanging || 'Reloading...'
: this.props.btnText || 'Reload'}
</button>
</Button>
</div>
);
}

9
console/src/components/Services/Data/Metadata/ResetMetadata.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
import { showNotification } from '../../../App/Actions';
import Button from '../../Layout/Button/Button';
import {
showSuccessNotification,
@ -16,13 +17,13 @@ class ResetMetadata extends Component {
}
render() {
const styles = require('../PageContainer/PageContainer.scss');
const metaDataStyles = require('./Metadata.scss');
return (
<div className={metaDataStyles.display_inline}>
<button
<Button
data-test="data-reset-metadata"
className={styles.default_button}
color="white"
size="sm"
onClick={e => {
e.preventDefault();
const a = prompt(
@ -78,7 +79,7 @@ class ResetMetadata extends Component {
}}
>
{this.state.isResetting ? 'Resetting...' : 'Reset'}
</button>
</Button>
</div>
);
}

9
console/src/components/Services/Data/Notification.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import AceEditor from 'react-ace';
import { showNotification, showTempNotification } from '../../App/Actions';
import { notifExpand, notifMsg } from '../../App/Actions';
import Button from '../Layout/Button/Button';
const styles = require('./TableCommon/Table.scss');
@ -47,15 +48,17 @@ const showErrorNotification = (title, message, reqBody, error) => {
let finalJson = error ? error.message : '{}';
if (error && 'action' in error) {
refreshBtn = (
<button
className={styles.yellow_button + ' ' + styles.add_mar_top_small}
<Button
className={styles.add_mar_top_small}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
window.location.reload();
}}
>
Refresh Console
</button>
</Button>
);
finalJson = error.action;
} else if (error && 'internal' in error) {

9
console/src/components/Services/Data/PageContainer/PageContainer.js
View File

@ -4,6 +4,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import globals from '../../../../Globals';
import Button from '../../Layout/Button/Button';
import { LISTING_SCHEMA } from '../DataActions';
@ -145,12 +146,14 @@ const PageContainer = ({
className={styles.padd_remove_full}
to={'/data/schema/' + schemaName + '/table/add'}
>
<button
className={styles.add_mar_right + ' btn btn-xs btn-default'}
<Button
className={styles.add_mar_right}
size="xs"
color="white"
data-test="sidebar-add-table"
>
Add Table
</button>
</Button>
</Link>
</div>
) : null}

18
console/src/components/Services/Data/RawSQL/RawSQL.js
View File

@ -4,7 +4,8 @@ import Helmet from 'react-helmet';
import AceEditor from 'react-ace';
import 'brace/mode/sql';
import Modal from 'react-bootstrap/lib/Modal';
import Button from 'react-bootstrap/lib/Button';
import ModalButton from 'react-bootstrap/lib/Button';
import Button from '../../Layout/Button/Button';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
@ -341,19 +342,20 @@ const RawSQL = ({
) : (
<hr />
)}
<button
<Button
type="submit"
className={styles.yellow_button}
onClick={submitSQL}
color="yellow"
size="sm"
data-test="run-sql"
>
Run!
</button>
</Button>
</div>
<div className="hidden col-xs-4">{alert}</div>
</div>
<Modal show={isModalOpen} onHide={onModalClose.bind(this)}>
<Modal.Header closeButton>
<Modal.Header closeModalButton>
<Modal.Title>Run SQL</Modal.Title>
</Modal.Header>
<Modal.Body>
@ -367,14 +369,14 @@ const RawSQL = ({
</div>
</Modal.Body>
<Modal.Footer>
<Button onClick={onModalClose}>Cancel</Button>
<Button
<ModalButton onClick={onModalClose}>Cancel</ModalButton>
<ModalButton
onClick={onConfirmNoMigration}
bsStyle="primary"
data-test="not-migration-confirm"
>
Yes, i confirm
</Button>
</ModalButton>
</Modal.Footer>
</Modal>
<div className={`${styles.padd_left_remove} container-fluid`}>

21
console/src/components/Services/Data/Schema/AutoAddRelations.js
View File

@ -9,6 +9,7 @@ import {
autoAddRelName,
} from '../TableRelationships/Actions';
import { getRelationshipLine } from '../TableRelationships/Relationships';
import Button from '../../Layout/Button/Button';
class AutoAddRelations extends Component {
trackAllRelations = untrackedData => {
@ -37,15 +38,17 @@ class AutoAddRelations extends Component {
className={styles.padd_top_medium}
key={'untrackedIndiv' + obj.data.tableName}
>
<button
className={`${styles.display_inline} btn btn-xs btn-default`}
<Button
className={`${styles.display_inline}`}
size="xs"
color="white"
onClick={e => {
e.preventDefault();
handleAutoAddIndivRel(obj);
}}
>
Add
</button>
</Button>
<div className={styles.display_inline + ' ' + styles.add_pad_left}>
<b>{obj.data.tableName}</b> -{' '}
{getRelationshipLine(
@ -75,17 +78,15 @@ class AutoAddRelations extends Component {
There are {untrackedRelations.length} untracked relations
</div>
)}
<button
<Button
onClick={this.trackAllRelations.bind(this, untrackedRelations)}
className={
styles.display_inline +
' btn btn-xs btn-default ' +
styles.add_mar_left
}
className={`${styles.display_inline} ${styles.add_mar_left}`}
color="white"
size="xs"
data-test="track-all-relationships"
>
Track All Relations
</button>
</Button>
<div className={styles.padd_top_small}>{untrackData}</div>
</div>
);

26
console/src/components/Services/Data/Schema/Schema.js
View File

@ -9,6 +9,7 @@ import { push } from 'react-router-redux';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import { untrackedTip, untrackedRelTip } from './Tooltips';
import Button from '../../Layout/Button/Button';
import {
setTableName,
addExistingTableSql,
@ -93,9 +94,11 @@ class Schema extends Component {
untrackedHtml.push(
<div className={styles.padd_bottom} key={`${i}untracked`}>
<div className={`${styles.display_inline} ${styles.padd_right}`}>
<button
<Button
data-test={`add-track-table-${untrackedTables[i].table_name}`}
className={`${styles.display_inline} btn btn-xs btn-default`}
className={`${styles.display_inline}`}
color="white"
size="xs"
onClick={e => {
e.preventDefault();
dispatch(setTableName(untrackedTables[i].table_name));
@ -103,7 +106,7 @@ class Schema extends Component {
}}
>
Add
</button>
</Button>
</div>
<div className={`${styles.padd_right} ${styles.inline_block}`}>
{untrackedTables[i].table_name}
@ -131,9 +134,10 @@ class Schema extends Component {
Schema{' '}
</h2>
{migrationMode ? (
<button
<Button
data-test="data-create-table"
className={styles.yellow_button}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
dispatch(
@ -142,7 +146,7 @@ class Schema extends Component {
}}
>
Create Table
</button>
</Button>
) : null}
</div>
<hr />
@ -159,17 +163,17 @@ class Schema extends Component {
<i className="fa fa-info-circle" aria-hidden="true" />
</OverlayTrigger>
{untrackedTables.length > 0 ? (
<button
className={`${styles.display_inline} ${
styles.addAllBtn
} btn btn-xs btn-default`}
<Button
className={`${styles.display_inline} ${styles.addAllBtn}`}
color="white"
size="xs"
onClick={e => {
e.preventDefault();
dispatch(addAllUntrackedTablesSql(untrackedTables));
}}
>
Add all
</button>
</Button>
) : null}
</div>
<div className={`${styles.padd_left_remove} col-xs-12`}>

8
console/src/components/Services/Data/TableBrowseRows/EditItem.js
View File

@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
import { editItem, E_ONGOING_REQ } from './EditActions';
import globals from '../../../../Globals';
import { modalClose } from './EditActions';
import Button from '../../Layout/Button/Button';
// import RichTextEditor from 'react-rte';
import { replace } from 'react-router-redux';
@ -298,9 +299,10 @@ class EditItem extends Component {
<div className="col-xs-9">
<form className="form-horizontal">
{elements}
<button
<Button
type="submit"
className={styles.yellow_button}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
dispatch({ type: E_ONGOING_REQ });
@ -321,7 +323,7 @@ class EditItem extends Component {
data-test="save-button"
>
{buttonText}
</button>
</Button>
</form>
</div>
<div className="col-xs-3">{alert}</div>

8
console/src/components/Services/Data/TableBrowseRows/FilterQuery.js
View File

@ -22,6 +22,7 @@ import {
removeOrder,
} from './FilterActions.js';
import { setDefaultQuery, runQuery } from './FilterActions';
import Button from '../../Layout/Button/Button';
const renderCols = (colName, tableSchema, onChange, usage, key) => {
const columns = tableSchema.columns.map(c => c.column_name);
@ -198,13 +199,14 @@ class FilterQuery extends Component {
</div>
</div>
<div className={`${styles.padd_right} ${styles.clear_fix}`}>
<button
<Button
type="submit"
className={`btn ${styles.yellow_button}`}
color="yellow"
size="sm"
data-test="run-query"
>
Run query
</button>
</Button>
{/* <div className={styles.count + ' alert alert-info'}><i>Total <b>{tableName}</b> rows in the database for current query: {count} </i></div> */}
</div>
</form>

25
console/src/components/Services/Data/TableBrowseRows/ViewRows.js
View File

@ -25,6 +25,7 @@ import { I_SET_CLONE } from '../TableInsertItem/InsertActions';
import _push from '../push';
import { ordinalColSort, findTableFromRel } from '../utils';
import Spinner from '../../../Common/Spinner/Spinner';
import Button from '../../Layout/Button/Button';
import './ReactTableFix.css';
const ViewRows = ({
@ -184,8 +185,10 @@ const ViewRows = ({
}
if (!isSingleRow && !isView && hasPrimaryKeys) {
editButton = (
<button
className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
<Button
className={styles.add_mar_right_small}
color="white"
size="xs"
onClick={() => {
dispatch({ type: E_SET_EDITITEM, oldItem: row, pkClause });
dispatch(
@ -195,12 +198,14 @@ const ViewRows = ({
data-test={`row-edit-button-${rowIndex}`}
>
Edit
</button>
</Button>
);
cloneButton = (
<button
className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
<Button
className={styles.add_mar_right_small}
size="xs"
color="white"
onClick={() => {
dispatch({ type: I_SET_CLONE, clone: row });
dispatch(
@ -210,19 +215,21 @@ const ViewRows = ({
data-test={`row-clone-button-${rowIndex}`}
>
Clone
</button>
</Button>
);
deleteButton = (
<button
className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
<Button
className={styles.add_mar_right_small}
size="xs"
color="white"
onClick={() => {
dispatch(deleteItem(pkClause));
}}
data-test={`row-delete-button-${rowIndex}`}
>
Delete
</button>
</Button>
);
}
const buttonsDiv = (

13
console/src/components/Services/Data/TableCommon/TableHeader.js
View File

@ -142,19 +142,6 @@ const TableHeader = ({
Permissions
</Link>
</li>
<li role="presentation" className={'hide'}>
<Link
to={
'/data/schema/' +
currentSchema +
'/tables/' +
tableName +
'/permissions'
}
>
<button className="btn btn-xs btn-warning">Try out APIs</button>
</Link>
</li>
</ul>
</div>
<div className="clearfix" />

15
console/src/components/Services/Data/TableInsertItem/InsertItem.js
View File

@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
import { insertItem, I_RESET } from './InsertActions';
import { ordinalColSort } from '../utils';
import { setTable } from '../DataActions';
import Button from '../../Layout/Button/Button';
class InsertItem extends Component {
constructor() {
@ -285,9 +286,10 @@ class InsertItem extends Component {
<div className="col-xs-9">
<form id="insertForm" className="form-horizontal">
{elements}
<button
<Button
type="submit"
className={'btn ' + styles.yellow_button}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
const inputValues = {};
@ -309,9 +311,10 @@ class InsertItem extends Component {
data-test="insert-save-button"
>
{this.state.insertedRows > 0 ? 'Insert Again' : 'Save'}
</button>
<button
className={'btn ' + styles.default_button}
</Button>
<Button
color="white"
size="sm"
onClick={e => {
e.preventDefault();
const form = document.getElementById('insertForm');
@ -334,7 +337,7 @@ class InsertItem extends Component {
data-test="clear-button"
>
Clear
</button>
</Button>
</form>
</div>
<div className="col-xs-3">{alert}</div>

61
console/src/components/Services/Data/TableModify/ModifyTable.js
View File

@ -47,6 +47,7 @@ import {
TIMESTAMP,
TIME,
} from '../../../../constants';
import Button from '../../Layout/Button/Button';
const appPrefix = '/data';
@ -132,23 +133,25 @@ const ColumnEditor = ({
<Link
to={`${appPrefix}/schema/${currentSchema}/tables/${tableName}/relationships`}
>
<button
className={`${styles.default_button} btn`}
<Button
color="white"
size="sm"
type="button"
data-test="add-rel-mod"
>
+Add relationship
</button>
</Button>
</Link>
&nbsp;
<button
className="btn btn-danger btn-sm"
<Button
color="red"
size="sm"
onClick={onDeleteFK}
data-test="remove-constraint-button"
>
{' '}
Remove Constraint{' '}
</button>{' '}
</Button>{' '}
&nbsp;
</h5>
</div>
@ -383,17 +386,20 @@ const ColumnEditor = ({
</div>
{checkExistingForeignKey()}
<div className="row">
<button
<Button
type="submit"
className={`${styles.yellow_button} btn`}
color="yellow"
className={styles.button_mar_right}
size="sm"
data-test="save-button"
>
Save
</button>
</Button>
{!isPrimaryKey ? (
<button
<Button
type="submit"
className={`${styles.yellow_button1} btn btn-danger btn-sm`}
color="red"
size="sm"
onClick={e => {
e.preventDefault();
onDelete();
@ -401,7 +407,7 @@ const ColumnEditor = ({
data-test="remove-button"
>
Remove
</button>
</Button>
) : null}
</div>
</form>
@ -564,8 +570,10 @@ class ModifyTable extends Component {
<div className="container-fluid">
<div className="row">
<h5 className={styles.padd_bottom}>
<button
className={`${styles.add_mar_small} btn btn-xs btn-default`}
<Button
className={styles.add_mar_small}
size="xs"
color="white"
data-test={`edit-${colName}`}
onClick={() => {
if (activeEdit.column === colName) {
@ -585,7 +593,7 @@ class ModifyTable extends Component {
}}
>
{btnText}
</button>
</Button>
<b>{colName}</b> {keyProperties()}
&nbsp;
</h5>
@ -602,10 +610,13 @@ class ModifyTable extends Component {
let colUniqueInput;
let colDefaultInput;
// TODO
const untrackBtn = (
<button
<Button
type="submit"
className={`${styles.add_mar_right} btn btn-sm btn-default`}
className={styles.add_mar_right}
color="white"
size="sm"
onClick={() => {
const isOk = confirm('Are you sure to untrack?');
if (isOk) {
@ -615,7 +626,7 @@ class ModifyTable extends Component {
data-test="untrack-table"
>
Untrack Table
</button>
</Button>
);
const editCommentClicked = () => {
@ -811,20 +822,22 @@ class ModifyTable extends Component {
ref={n => (colDefaultInput = n)}
data-test="default-value"
/>
<button
<Button
type="submit"
className="btn btn-sm btn-warning"
color="yellow"
size="sm"
data-test="add-column-button"
>
+ Add column
</button>
</Button>
</form>
</div>
<hr />
{untrackBtn}
<button
<Button
type="submit"
className="btn btn-sm btn-danger"
color="red"
size="sm"
onClick={() => {
const isOk = confirm('Are you sure?');
if (isOk) {
@ -834,7 +847,7 @@ class ModifyTable extends Component {
data-test="delete-table"
>
Delete table
</button>
</Button>
<br />
<br />
</div>

33
console/src/components/Services/Data/TableModify/ModifyView.js
View File

@ -15,6 +15,7 @@ import {
} from './ModifyActions';
import { ordinalColSort } from '../utils';
import { setTable, fetchTableComment } from '../DataActions';
import Button from '../../Layout/Button/Button';
class ModifyView extends Component {
componentDidMount() {
@ -83,9 +84,9 @@ class ModifyView extends Component {
<div className="container-fluid">
<div className="row">
<h5 className={styles.padd_bottom}>
<button disabled="disabled" className="btn btn-xs btn-warning">
<Button disabled="disabled" size="xs" color="yellow">
{btnText}
</button>{' '}
</Button>{' '}
&nbsp; {c.column_name}
</h5>
</div>
@ -95,9 +96,11 @@ class ModifyView extends Component {
});
const untrackBtn = (
<button
<Button
type="submit"
className={styles.add_mar_right + ' btn btn-sm btn-default'}
className={styles.add_mar_right}
color="white"
size="sm"
onClick={() => {
const isOk = confirm('Are you sure to untrack?');
if (isOk) {
@ -107,7 +110,7 @@ class ModifyView extends Component {
data-test="untrack-view"
>
Untrack View
</button>
</Button>
);
const editCommentClicked = () => {
@ -210,25 +213,23 @@ class ModifyView extends Component {
readOnly
/>
<hr />
<button
<Button
type="submit"
className={
'btn btn-sm ' +
styles.yellow_button +
' ' +
styles.add_mar_right
}
color="yellow"
size="sm"
className={styles.add_mar_right}
onClick={() => {
this.modifyViewDefinition(tableName);
}}
data-test="modify-view"
>
Modify
</button>
</Button>
{untrackBtn}
<button
<Button
type="submit"
className={'btn btn-sm btn-danger'}
color="red"
size="sm"
onClick={() => {
const isOk = confirm('Are you sure');
if (isOk) {
@ -238,7 +239,7 @@ class ModifyView extends Component {
data-test="delete-view"
>
Delete view
</button>
</Button>
<br />
<br />
</div>

40
console/src/components/Services/Data/TablePermissions/Permissions.js
View File

@ -44,6 +44,7 @@ import { setTable, fetchViewInfoFromInformationSchema } from '../DataActions';
import { getIngForm, escapeRegExp } from '../utils';
import { legacyOperatorsMap } from './PermissionBuilder/utils';
import semverCheck from '../../../../helpers/semver';
import Button from '../../Layout/Button/Button';
/* */
import EnhancedInput from '../../../Common/InputChecker/InputChecker';
@ -1358,15 +1359,17 @@ class Permissions extends Component {
);
};
const getButton = (value, customClasses, onClickFn, disabled) => (
<button
className={`${styles.editActionButton} button btn ${customClasses}`}
const getButton = (value, color, onClickFn, disabled) => (
<Button
className={styles.editActionButton}
color={color}
size="sm"
onClick={onClickFn}
disabled={disabled}
data-test={`${value.split(' ').join('-')}-button`}
>
{value}
</button>
</Button>
);
const getButtonsSection = (tableSchema, permsState) => {
@ -1400,19 +1403,19 @@ class Permissions extends Component {
const saveButton = getButton(
'Save permissions',
'btn-success',
'yellow',
dispatchSavePermissions,
disableSave
);
const removeAccessButton = getButton(
'Remove',
'btn-danger',
'red',
dispatchRemoveAccess,
disableRemoveAccess
);
const closeButton = getButton('Close', 'btn-default', dispatchCloseEdit);
const closeButton = getButton('Close', 'white', dispatchCloseEdit);
const currentPermissions = tableSchema.permissions;
const applySameSelected = e => {
const isChecked = e.target.checked;
@ -1463,19 +1466,23 @@ class Permissions extends Component {
<div>Apply same {permsState.query} permissions to other roles</div>
<div className={styles.add_mar_top_small}>{roleListHtml}</div>
{permsState.applySamePermissions.length ? (
<button
<Button
onClick={applySameBulk}
className={'btn btn-default ' + styles.bulkApplyBtn}
className={styles.bulkApplyBtn}
color="white"
size="sm"
>
Apply
</button>
</Button>
) : (
<button
className={'btn btn-default ' + styles.bulkApplyBtn}
<Button
color="white"
className={styles.bulkApplyBtn}
size="sm"
disabled
>
Apply
</button>
</Button>
)}
</div>
);
@ -1552,12 +1559,9 @@ class Permissions extends Component {
})}
</div>
<div className={styles.padd_bottom}>
<button
onClick={bulkDeleteClicked}
className={'btn btn-sm btn-default'}
>
<Button onClick={bulkDeleteClicked} color="red" size="sm">
Delete
</button>
</Button>
</div>
</div>
);

16
console/src/components/Services/Data/TableRelationships/AddManualRelationship.js
View File

@ -16,6 +16,7 @@ import {
UPDATE_REMOTE_SCHEMA_MANUAL_REL,
RESET_MANUAL_REL_TABLE_LIST,
} from '../DataActions';
import Button from '../../Layout/Button/Button';
class AddManualRelationship extends Component {
constructor() {
@ -198,21 +199,24 @@ class AddManualRelationship extends Component {
</select>
</div>
</div>
<button
className={styles.yellow_button}
<Button
color="yellow"
size="sm"
onClick={this.onAddRelClicked}
data-test={this.props.dataTestVal}
>
Add
</button>
</Button>
{this.props.showClose ? (
<button
className={styles.add_mar_left + ' btn btn-default btn-sm'}
<Button
className={styles.add_mar_left}
color="white"
size="sm"
onClick={this.onCloseClicked}
data-test="table-close-manual-relationship"
>
Close
</button>
</Button>
) : null}
</div>
);

45
console/src/components/Services/Data/TableRelationships/Relationships.js
View File

@ -18,6 +18,7 @@ import gqlPattern, { gqlRelErrorNotif } from '../Common/GraphQLValidation';
import AddManualRelationship from './AddManualRelationship';
import suggestedRelationshipsRaw from './autoRelations';
import Button from '../../Layout/Button/Button';
/* Gets the complete list of relationships and converts it to a list of object, which looks like so :
{
@ -81,13 +82,14 @@ const relationshipView = (
return (
<td>
<div>
<button
className="btn btn-sm btn-danger"
<Button
color="red"
size="sm"
onClick={onDelete}
data-test={`remove-button-${relName}`}
>
Remove
</button>
</Button>
&nbsp;
<b>{relName}</b>
<div className={tableStyles.relationshipTopPadding}>
@ -140,13 +142,13 @@ const addRelationshipCellView = (
}
dispatch(addRelNewFromStateMigrate());
};
const styles = require('../TableModify/Modify.scss');
return (
<td>
<div>
{selectedRelationship === rel ? null : (
<button
className={`${styles.exploreButton} btn btn-xs`}
<Button
size="xs"
color="yellow"
onClick={onAdd}
data-test={
relMetaData[0] === 'object'
@ -155,7 +157,7 @@ const addRelationshipCellView = (
}
>
Add
</button>
</Button>
)}
{getRelationshipLine(rel.isObjRel, rel.lcol, rel.rcol, rel.rTable)}{' '}
&nbsp;
@ -172,9 +174,10 @@ const addRelationshipCellView = (
data-test="suggested-rel-name"
/>{' '}
&nbsp;
<button
<Button
type="submit"
className={`${styles.exploreButton} btn btn-sm`}
color="yellow"
size="sm"
data-test={
relMetaData[0] === 'object'
? `obj-rel-save-${relMetaData[1]}`
@ -182,7 +185,7 @@ const addRelationshipCellView = (
}
>
Save
</button>
</Button>
</div>
</form>
) : null}
@ -343,8 +346,10 @@ const AddRelationship = ({
</tbody>
</table>
</div>
<button
className="btn btn-sm btn-default hide"
<Button
className="hide"
color="white"
size="sm"
onClick={e => {
e.preventDefault();
dispatch(resetRelationshipForm());
@ -352,7 +357,7 @@ const AddRelationship = ({
>
{' '}
Cancel{' '}
</button>
</Button>
</div>
);
};
@ -488,15 +493,16 @@ class Relationships extends Component {
/>
</div>
) : (
<button
<Button
type="submit"
className="btn btn-sm btn-default"
color="white"
size="sm"
onClick={() => {
dispatch(addNewRelClicked());
}}
>
+ Add relationship
</button>
</Button>
)}
<hr />
</div>
@ -523,16 +529,17 @@ class Relationships extends Component {
/>
</div>
) : (
<button
<Button
type="submit"
className="btn btn-sm btn-default"
color="white"
size="sm"
onClick={() => {
dispatch(relManualAddClicked());
}}
data-test="add-manual-relationship"
>
+ Add a relationship manually
</button>
</Button>
)}
<hr />
</div>

12
console/src/components/Services/Data/TableRelationships/RelationshipsView.js
View File

@ -7,6 +7,7 @@ import { findAllFromRel } from '../utils';
import { setTable, UPDATE_REMOTE_SCHEMA_MANUAL_REL } from '../DataActions';
import AddRelationship from './AddManualRelationship';
import Button from '../../Layout/Button/Button';
/* Gets the complete list of relationships and converts it to a list of object, which looks like so :
{
@ -70,9 +71,9 @@ const relationshipView = (
return (
<td>
<div>
<button className="btn btn-sm btn-danger" onClick={onDelete}>
<Button size="sm" color="red" onClick={onDelete}>
Remove
</button>
</Button>
&nbsp;
<b>{relName}</b>
<div className={tableStyles.relationshipTopPadding}>
@ -230,15 +231,16 @@ class RelationshipsView extends Component {
/>
</div>
) : (
<button
<Button
type="submit"
className="btn btn-sm btn-default"
color="white"
size="sm"
onClick={() => {
dispatch(addNewRelClicked());
}}
>
+ Add relationship
</button>
</Button>
)}
<hr />
</div>

53
console/src/components/Services/EventTrigger/Add/AddTrigger.js
View File

@ -3,6 +3,7 @@ import React, { Component } from 'react';
import Helmet from 'react-helmet';
import * as tooltip from './Tooltips';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Button from '../../Layout/Button/Button';
import {
removeHeader,
@ -265,10 +266,7 @@ class AddTrigger extends Component {
/>
);
return (
<div
key={i}
className={styles.noPadd + ' col-md-4'}
>
<div key={i} className={styles.noPadd + ' col-md-4'}>
<div className={'checkbox '}>
<label>
{inputHtml}
@ -295,7 +293,10 @@ class AddTrigger extends Component {
</OverlayTrigger>{' '}
</h4>
{selectedOperations.update ? (
<div className={styles.clearBoth + ' ' + styles.listenColumnWrapper}> {getColumnList('update')} </div>
<div className={styles.clearBoth + ' ' + styles.listenColumnWrapper}>
{' '}
{getColumnList('update')}{' '}
</div>
) : (
<div>
<div
@ -651,19 +652,18 @@ class AddTrigger extends Component {
)}
</div>
<hr />
<button
<div
onClick={this.toggleAdvanced.bind(this)}
className={styles.toggleAdvanced}
data-test="advanced-settings"
type="button"
className={'btn btn-default ' + styles.advancedToggleBtn}
>
Advanced Settings
{this.state.advancedExpanded ? (
<i className={'fa fa-arrow-up'} />
<i className={'fa fa-chevron-down'} />
) : (
<i className={'fa fa-arrow-down'} />
)}
</button>
<i className={'fa fa-chevron-right'} />
)}{' '}
<b>Advanced Settings</b>
</div>
{this.state.advancedExpanded ? (
<div
className={
@ -671,12 +671,20 @@ class AddTrigger extends Component {
' ' +
styles.add_mar_bottom +
' ' +
styles.add_mar_top + ' ' + styles.wd100
styles.add_mar_top +
' ' +
styles.wd100
}
>
{tableName ? advancedColumnSection : null}
<div
className={styles.add_mar_bottom + ' ' + styles.add_mar_top + ' ' + styles.wd100}
className={
styles.add_mar_bottom +
' ' +
styles.add_mar_top +
' ' +
styles.wd100
}
>
<h4 className={styles.subheading_text}>Retry Logic</h4>
<div
@ -725,7 +733,13 @@ class AddTrigger extends Component {
</div>
</div>
<div
className={styles.add_mar_bottom + ' ' + styles.add_mar_top + ' ' + styles.wd100}
className={
styles.add_mar_bottom +
' ' +
styles.add_mar_top +
' ' +
styles.wd100
}
>
<h4 className={styles.subheading_text}>Headers</h4>
{heads}
@ -733,13 +747,14 @@ class AddTrigger extends Component {
</div>
) : null}
<hr />
<button
<Button
type="submit"
className={`btn ${styles.yellow_button}`}
color="yellow"
size="sm"
data-test="trigger-create"
>
{createBtnText}
</button>
</Button>
</div>
</form>
</div>

8
console/src/components/Services/EventTrigger/Modify/ActionButtons.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { deleteTrigger } from '../EventActions';
import Button from '../../Layout/Button/Button';
const verifyDeleteTrigger = (triggerName, dispatch) => {
if (confirm('Are you sure?')) {
@ -9,14 +10,15 @@ const verifyDeleteTrigger = (triggerName, dispatch) => {
const Buttons = ({ styles, dispatch, triggerName, ongoingRequest }) => (
<div className={styles.add_mar_bottom}>
<button
className={'btn btn-sm btn-danger'}
<Button
color="red"
size="sm"
data-test="delete-trigger"
onClick={() => verifyDeleteTrigger(triggerName, dispatch)}
disabled={ongoingRequest === 'delete'}
>
{ongoingRequest === 'delete' ? 'Deleting ...' : 'Delete'}
</button>
</Button>
</div>
);

21
console/src/components/Services/EventTrigger/Modify/Editor.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import Button from '../../Layout/Button/Button';
class Editor extends React.Component {
state = {
@ -16,37 +17,35 @@ class Editor extends React.Component {
};
toggleButton = () => (
<button
<Button
className={`${this.props.styles.add_mar_small}
btn btn-sm btn-default
${this.props.styles.modifyEditButton}`}
color="white"
size="sm"
data-test={`${this.state.isEditing ? 'close' : 'edit'}-${
this.props.name
}`}
onClick={this.toggleEditor}
>
{this.state.isEditing ? 'Close' : 'Edit'}
</button>
</Button>
);
saveButton = saveFunc => {
const { name, property, ongoingRequest, styles } = this.props;
const isSaving = ongoingRequest === property;
return (
<button
<Button
type="submit"
className={`
btn
${styles.yellow_button}
${
isSaving ? styles.modifySaveButtonDisabled : styles.modifySaveButton
}`}
className={styles.modifySaveButton}
color="yellow"
size="sm"
onClick={saveFunc}
data-test={`modify-trigger-${name}-save`}
disabled={isSaving}
>
{isSaving ? 'Saving ...' : 'Save'}
</button>
</Button>
);
};

2
console/src/components/Services/EventTrigger/Modify/Modify.scss
View File

@ -53,8 +53,6 @@
align-items: center;
justify-content: center;
margin-bottom: 10px;
background-color: #e6cd8f;
border-color: #e6cd8f;
}
.modifyWebhookCollapsed {

9
console/src/components/Services/EventTrigger/Notification.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import AceEditor from 'react-ace';
import { showNotification, showTempNotification } from '../../App/Actions';
import { notifExpand, notifMsg } from '../../App/Actions';
import Button from '../Layout/Button/Button';
const styles = require('./TableCommon/Table.scss');
@ -47,15 +48,17 @@ const showErrorNotification = (title, message, reqBody, error) => {
let finalJson = error ? error.message : '{}';
if (error && 'action' in error) {
refreshBtn = (
<button
className={styles.yellow_button + ' ' + styles.add_mar_top_small}
<Button
className={styles.add_mar_top_small}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
window.location.reload();
}}
>
Refresh Console
</button>
</Button>
);
finalJson = error.action;
} else if (error && 'internal' in error) {

9
console/src/components/Services/EventTrigger/PageContainer/PageContainer.js
View File

@ -4,6 +4,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import globals from '../../../../Globals';
import Button from '../../Layout/Button/Button';
import { LISTING_TRIGGER } from '../EventActions';
@ -114,12 +115,14 @@ const PageContainer = ({
className={styles.padd_remove_full}
to={'/events/manage/triggers/add'}
>
<button
className={styles.add_mar_right + ' btn btn-xs btn-default'}
<Button
className={styles.add_mar_right}
color="white"
size="xs"
data-test="sidebar-add-table"
>
Add Trigger
</button>
</Button>
</Link>
</div>
) : null}

16
console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.js
View File

@ -21,6 +21,7 @@ import {
addOrder,
removeOrder,
} from './FilterActions.js';
import Button from '../../Layout/Button/Button';
import { setDefaultQuery, runQuery } from './FilterActions';
import { vMakeRequest } from './ViewActions';
@ -223,16 +224,19 @@ class FilterQuery extends Component {
</div>
</div>
<div className={`${styles.padd_right} ${styles.clear_fix}`}>
<button
<Button
type="submit"
className={`btn ${styles.yellow_button}`}
color="yellow"
size="sm"
data-test="run-query"
>
Run query
</button>
<button
</Button>
<Button
onClick={this.watchChanges.bind(this)}
className={styles.add_mar_left + ' btn btn-default'}
className={styles.add_mar_left}
color="white"
size="sm"
data-test="run-query"
>
{this.state.isWatching ? (
@ -242,7 +246,7 @@ class FilterQuery extends Component {
) : (
'Watch'
)}
</button>
</Button>
</div>
</form>
</div>

16
console/src/components/Services/EventTrigger/ProcessedEvents/FilterQuery.js
View File

@ -21,6 +21,7 @@ import {
addOrder,
removeOrder,
} from './FilterActions.js';
import Button from '../../Layout/Button/Button';
import { setDefaultQuery, runQuery } from './FilterActions';
import { vMakeRequest } from './ViewActions';
@ -223,16 +224,19 @@ class FilterQuery extends Component {
</div>
</div>
<div className={`${styles.padd_right} ${styles.clear_fix}`}>
<button
<Button
type="submit"
className={`btn ${styles.yellow_button}`}
color="yellow"
size="sm"
data-test="run-query"
>
Run query
</button>
<button
</Button>
<Button
onClick={this.watchChanges.bind(this)}
className={styles.add_mar_left + ' btn btn-default'}
className={styles.add_mar_left}
color="white"
size="sm"
data-test="run-query"
>
{this.state.isWatching ? (
@ -242,7 +246,7 @@ class FilterQuery extends Component {
) : (
'Watch'
)}
</button>
</Button>
</div>
</form>
</div>

16
console/src/components/Services/EventTrigger/RunningEvents/FilterQuery.js
View File

@ -23,6 +23,7 @@ import {
} from './FilterActions.js';
import { setDefaultQuery, runQuery } from './FilterActions';
import { vMakeRequest } from './ViewActions';
import Button from '../../Layout/Button/Button';
const renderCols = (colName, triggerSchema, onChange, usage, key) => {
const columns = ['id', 'delivered', 'created_at'];
@ -223,16 +224,19 @@ class FilterQuery extends Component {
</div>
</div>
<div className={`${styles.padd_right} ${styles.clear_fix}`}>
<button
<Button
type="submit"
className={`btn ${styles.yellow_button}`}
data-test="run-query"
color="yellow"
size="sm"
>
Run query
</button>
<button
</Button>
<Button
onClick={this.watchChanges.bind(this)}
className={styles.add_mar_left + ' btn btn-default'}
className={styles.add_mar_left}
color="white"
size="sm"
data-test="run-query"
>
{this.state.isWatching ? (
@ -242,7 +246,7 @@ class FilterQuery extends Component {
) : (
'Watch'
)}
</button>
</Button>
</div>
</form>
</div>

134
console/src/components/Services/EventTrigger/Schema/AutoAddRelations.js
View File

@ -1,134 +0,0 @@
/* eslint-disable space-infix-ops */
/* eslint-disable no-loop-func */
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
autoTrackRelations,
autoAddRelName,
} from '../TableRelationships/Actions';
import { getRelationshipLine } from '../TableRelationships/Relationships';
import suggestedRelationshipsRaw from '../TableRelationships/autoRelations';
class AutoAddRelations extends Component {
trackAllRelations = () => {
this.props.dispatch(autoTrackRelations());
};
render() {
const { schema, untrackedRelations, dispatch } = this.props;
const styles = require('../PageContainer/PageContainer.scss');
const handleAutoAddIndivRel = obj => {
dispatch(autoAddRelName(obj));
};
if (untrackedRelations.length === 0) {
return (
<div
className={styles.display_inline + ' ' + styles.padd_bottom}
key="no-untracked-rel"
>
There are no untracked relations
</div>
);
}
const untrackedIndivHtml = [];
schema.map(table => {
const currentTable = table.table_name;
const currentTableRel = suggestedRelationshipsRaw(currentTable, schema);
currentTableRel.objectRel.map(obj => {
untrackedIndivHtml.push(
<div
className={styles.padd_top_medium}
key={'untrackedIndiv' + table.table_name}
>
<button
className={`${styles.display_inline} btn btn-xs btn-default`}
onClick={e => {
e.preventDefault();
handleAutoAddIndivRel(obj);
}}
>
Add
</button>
<div className={styles.display_inline + ' ' + styles.add_pad_left}>
<b>{obj.tableName}</b> -{' '}
{getRelationshipLine(
obj.isObjRel,
obj.lcol,
obj.rcol,
obj.rTable
)}
</div>
</div>
);
});
currentTableRel.arrayRel.map(obj => {
untrackedIndivHtml.push(
<div
className={styles.padd_top_medium}
key={'untrackedIndiv' + table.table_name}
>
<button
className={`${styles.display_inline} btn btn-xs btn-default`}
onClick={e => {
e.preventDefault();
handleAutoAddIndivRel(obj);
}}
>
Add
</button>
<div className={styles.display_inline + ' ' + styles.add_pad_left}>
<b>{obj.tableName}</b> -{' '}
{getRelationshipLine(
obj.isObjRel,
obj.lcol,
obj.rcol,
obj.rTable
)}
</div>
</div>
);
});
});
return (
<div>
{untrackedRelations.length === 0 ? (
<div
className={styles.display_inline + ' ' + styles.padd_bottom}
key="no-untracked-rel"
>
There are no untracked relations
</div>
) : (
<div
className={styles.display_inline + ' ' + styles.padd_bottom}
key="untracked-rel"
>
There are {untrackedRelations.length} untracked relations
</div>
)}
<button
onClick={this.trackAllRelations}
className={
styles.display_inline +
' btn btn-xs btn-default ' +
styles.add_mar_left
}
data-test="track-all-relationships"
>
Track All Relations
</button>
<div className={styles.padd_top_small}>{untrackedIndivHtml}</div>
</div>
);
}
}
AutoAddRelations.propTypes = {
untrackedRelations: PropTypes.array.isRequired,
schema: PropTypes.array.isRequired,
dispatch: PropTypes.func.isRequired,
};
export default AutoAddRelations;

8
console/src/components/Services/EventTrigger/Schema/Schema.js
View File

@ -8,6 +8,7 @@ import Helmet from 'react-helmet';
import { push } from 'react-router-redux';
import { loadTriggers } from '../EventActions';
import globals from '../../../../Globals';
import Button from '../../Layout/Button/Button';
const appPrefix = globals.urlPrefix + '/events';
@ -38,16 +39,17 @@ class Schema extends Component {
Event Triggers{' '}
</h2>
{migrationMode ? (
<button
<Button
data-test="data-create-trigger"
className={styles.yellow_button}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
dispatch(push(`${appPrefix}/manage/triggers/add`));
}}
>
Create Trigger
</button>
</Button>
) : null}
</div>
<hr />

76
console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
View File

@ -28,6 +28,7 @@ import {
import * as tooltip from '../Common/Tooltips';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import { convertDateTimeToLocale } from '../utils';
import Button from '../../Layout/Button/Button';
class StreamingLogs extends Component {
constructor(props) {
@ -287,9 +288,11 @@ class StreamingLogs extends Component {
/>
<br />
<div className={'hide'}>
<button
<Button
onClick={this.watchChanges.bind(this)}
className={styles.watchBtn + ' btn btn-default'}
className={styles.watchBtn}
color="white"
size="sm"
data-test="run-query"
>
{this.state.isWatching ? (
@ -302,7 +305,7 @@ class StreamingLogs extends Component {
Stream Logs <i className={'fa fa-play'} />
</span>
)}
</button>
</Button>
</div>
{invocationRowsData.length ? (
<div className={styles.streamingLogs + ' streamingLogs'}>
@ -315,9 +318,11 @@ class StreamingLogs extends Component {
onChange={this.filterAll.bind(this)}
/>
</div>
<button
<Button
onClick={this.handleNewerEvents.bind(this)}
className={styles.newBtn + ' btn btn-default'}
className={styles.newBtn}
color="white"
size="sm"
>
{log.isLoadingNewer ? (
<span>
@ -326,7 +331,7 @@ class StreamingLogs extends Component {
) : (
<span>Load newer logs</span>
)}
</button>
</Button>
{!log.isNewAvailable ? (
<span> No new logs available at this time </span>
) : null}
@ -432,34 +437,34 @@ class StreamingLogs extends Component {
>
{finalResponse.status_code
? [
'Status Code: ',
finalResponse.status_code === 200 ? (
<i
className={
styles.invocationSuccess +
'Status Code: ',
finalResponse.status_code === 200 ? (
<i
className={
styles.invocationSuccess +
' fa fa-check'
}
/>
) : (
<i
className={
styles.invocationFailure +
}
/>
) : (
<i
className={
styles.invocationFailure +
' fa fa-times'
}
/>
),
finalResponse.status_code,
' ',
<OverlayTrigger
placement="top"
overlay={tooltip.statusCodeDescription}
>
<i
className="fa fa-question-circle"
aria-hidden="true"
/>
</OverlayTrigger>,
]
}
/>
),
finalResponse.status_code,
' ',
<OverlayTrigger
placement="top"
overlay={tooltip.statusCodeDescription}
>
<i
className="fa fa-question-circle"
aria-hidden="true"
/>
</OverlayTrigger>,
]
: null}
</div>
<AceEditor
@ -482,9 +487,10 @@ class StreamingLogs extends Component {
/>
<div className={styles.loadOlder}>
{log.isOldAvailable ? (
<button
<Button
onClick={this.handleOlderEvents.bind(this)}
className={styles.oldBtn + ' btn btn-default'}
color="white"
size="sm"
>
{log.isLoadingOlder ? (
<span>
@ -493,7 +499,7 @@ class StreamingLogs extends Component {
) : (
<span>Load older logs</span>
)}
</button>
</Button>
) : (
<div> No more logs available </div>
)}

17
console/src/components/Services/EventTrigger/TableCommon/RedeliverEvent.js
View File

@ -12,6 +12,7 @@ import {
} from '../EventActions';
import AceEditor from 'react-ace';
import 'brace/mode/json';
import Button from '../../Layout/Button/Button';
class RedeliverEvent extends Component {
constructor(props) {
@ -211,12 +212,14 @@ class RedeliverEvent extends Component {
<div className="col-md-12">
<div className={styles.add_mar_bottom}>
Event ID - {log.redeliverEventId}
<button
<Button
onClick={this.handleRedeliver.bind(this)}
className={'hide btn btn-default'}
className="hide"
color="white"
size="sm"
>
Deliver again
</button>
</Button>
</div>
<div className={styles.padd_left_remove + ' col-md-5'}>
<div> Request </div>
@ -227,10 +230,10 @@ class RedeliverEvent extends Component {
value={
log.eventInvocations[0]
? JSON.stringify(
log.eventInvocations[0].request,
null,
4
)
log.eventInvocations[0].request,
null,
4
)
: ''
}
minLines={8}

14
console/src/components/Services/EventTrigger/TableCommon/Table.scss
View File

@ -272,7 +272,6 @@ a.expanded {
.advancedToggleBtn {
width: 300px;
background: #f2f2f2 !important;
i {
padding-left: 5px;
}
@ -293,7 +292,6 @@ a.expanded {
min-height: 41px;
}
.newBtn {
font-size: 12px;
margin-right: 10px;
}
.loadNewer {
@ -314,9 +312,6 @@ a.expanded {
margin-left: 10px;
}
}
.oldBtn {
font-size: 12px;
}
.retryEvent {
cursor: pointer;
}
@ -346,3 +341,12 @@ a.expanded {
margin-left: 5px;
}
}
.toggleAdvanced {
cursor: pointer;
b {
font-size: 15px;
}
i:hover {
color: #4D4D4D ;
}
}

40
console/src/components/Services/Layout/Button/Button.js Normal file
View File

@ -0,0 +1,40 @@
import React from 'react';
import styles from '../../../Common/Common.scss';
/*
This is a Button HOC that takes al the props supported by <button> and also
- color: (default: white) color of the button; currently supports yellow, red, green, gray, white
- size: size of the button; currently supports xs (extra small), sm(small)
- className: although you can provide any CSS classname, it is recommended to use only the positioning related classes and not the ones that change the appearance (color, font, size) of the button
*/
const Button = props => {
const { children, size, color, className } = props;
let extendedClassName = `${className || ''} btn ${
size ? `btn-${size} ` : 'button '
}`;
switch (color) {
case 'yellow':
extendedClassName += styles.yellow_button;
break;
case 'red':
extendedClassName += 'btn-danger';
break;
case 'green':
extendedClassName += 'btn-success';
break;
case 'gray':
extendedClassName += styles.gray_button;
break;
default:
extendedClassName += 'btn-default';
break;
}
return (
<button {...props} className={extendedClassName}>
{children}
</button>
);
};
export default Button;

9
console/src/components/Services/Layout/LeftNavBar/LeftNavBar.js
View File

@ -4,6 +4,7 @@ import React from 'react';
import { Link } from 'react-router';
import { LISTING_SCHEMA } from '../../Data/DataActions';
import Button from '../Button/Button';
const LeftNavBar = ({
appPrefix,
@ -69,12 +70,14 @@ const LeftNavBar = ({
className={styles.padd_remove_full}
to={`${appPrefix}/manage/add`}
>
<button
className={styles.add_mar_right + ' btn btn-xs btn-default'}
<Button
className={styles.add_mar_right}
color="white"
size="xs"
data-test="remote-schema-sidebar-add-table"
>
Add
</button>
</Button>
</Link>
</div>
) : null}

9
console/src/components/Services/Layout/RightLayoutWrapper/Schema.js
View File

@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Helmet from 'react-helmet';
import Button from '../Button/Button';
import { push } from 'react-router-redux';
import { loadTriggers } from '../EventActions';
import globals from '../../../../Globals';
@ -38,16 +39,18 @@ class Schema extends Component {
Event Triggers{' '}
</h2>
{migrationMode ? (
<button
<Button
data-test="data-create-trigger"
className={styles.yellow_button}
className={styles.button_mar_right}
color="yellow"
size="sm"
onClick={e => {
e.preventDefault();
dispatch(push(`${appPrefix}/manage/triggers/add`));
}}
>
Create Trigger
</button>
</Button>
) : null}
</div>
<hr />