colin
/
sharded-gotify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add css identifiers to all components for testing

This commit is contained in:
Jannis Mattheis 2018-09-14 20:48:33 +02:00
parent 7e7d13f3c1
commit 8165534bb6
15 changed files with 90 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/src/component/ConfirmDialog.tsx
View File

@ -19,14 +19,25 @@ export default function ConfirmDialog({title, text, fClose, fOnSubmit}: IProps)
fClose();
};
return (
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
<Dialog
open={true}
onClose={fClose}
aria-labelledby="form-dialog-title"
className="confirm-dialog">
<DialogTitle id="form-dialog-title">{title}</DialogTitle>
<DialogContent>
<DialogContentText>{text}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={fClose}>No</Button>
<Button onClick={submitAndClose} autoFocus color="primary" variant="raised">
<Button onClick={fClose} className="cancel">
No
</Button>
<Button
onClick={submitAndClose}
autoFocus
color="primary"
variant="raised"
className="confirm">
Yes
</Button>
</DialogActions>

3
ui/src/component/DefaultPage.tsx
View File

@ -10,11 +10,13 @@ interface IProps {
buttonDisabled?: boolean;
maxWidth?: number;
hideButton?: boolean;
buttonId?: string;
}
const DefaultPage: SFC<IProps> = ({
title,
buttonTitle,
buttonId,
fButton,
buttonDisabled = false,
maxWidth = 700,
@ -29,6 +31,7 @@ const DefaultPage: SFC<IProps> = ({
</Typography>
{hideButton ? null : (
<Button
id={buttonId}
variant="raised"
color="primary"
disabled={buttonDisabled}

10
ui/src/component/Header.tsx
View File

@ -81,7 +81,7 @@ class Header extends Component<IProps & Styles> {
return (
<div>
{admin ? (
<Link className={classes.link} to="/users">
<Link className={classes.link} to="/users" id="navigate-users">
<Button color="inherit">
<SupervisorAccount />
&nbsp;users
@ -90,24 +90,24 @@ class Header extends Component<IProps & Styles> {
) : (
''
)}
<Link className={classes.link} to="/applications">
<Link className={classes.link} to="/applications" id="navigate-apps">
<Button color="inherit">
<Chat />
&nbsp;apps
</Button>
</Link>
<Link className={classes.link} to="/clients">
<Link className={classes.link} to="/clients" id="navigate-clients">
<Button color="inherit">
<DevicesOther />
&nbsp;clients
</Button>
</Link>
<Button color="inherit" onClick={showSettings}>
<Button color="inherit" onClick={showSettings} id="changepw">
<AccountCircle />
&nbsp;
{name}
</Button>
<Button color="inherit" onClick={UserAction.logout}>
<Button color="inherit" onClick={UserAction.logout} id="logout">
<ExitToApp />
&nbsp;Logout
</Button>

12
ui/src/component/Message.tsx
View File

@ -51,7 +51,7 @@ interface IProps {
function Message({fDelete, classes, title, date, content, image}: IProps & Style) {
return (
<div className={classes.wrapperPadding}>
<div className={`${classes.wrapperPadding} message`}>
<Container style={{display: 'flex'}}>
<div className={classes.imageWrapper}>
<img
@ -64,17 +64,19 @@ function Message({fDelete, classes, title, date, content, image}: IProps & Style
</div>
<div className={classes.messageContentWrapper}>
<div className={classes.header}>
<Typography className={classes.headerTitle} variant="headline">
<Typography className={`${classes.headerTitle} title`} variant="headline">
{title}
</Typography>
<Typography variant="body1">
<Typography variant="body1" className="date">
<TimeAgo date={date} />
</Typography>
<IconButton onClick={fDelete} className={classes.trash}>
<Delete />
<Delete className="delete" />
</IconButton>
</div>
<Typography component="p">{content}</Typography>
<Typography component="p" className="content">
{content}
</Typography>
</div>
</Container>
</div>

12
ui/src/component/Navigation.tsx
View File

@ -51,7 +51,10 @@ class Navigation extends Component<IProps & Styles, IState> {
? null
: apps.map((app) => {
return (
<Link className={classes.link} to={'/messages/' + app.id} key={app.id}>
<Link
className={`${classes.link} item`}
to={'/messages/' + app.id}
key={app.id}>
<ListItem button>
<ListItemText primary={app.name} />
</ListItem>
@ -69,10 +72,13 @@ class Navigation extends Component<IProps & Styles, IState> {
];
return (
<Drawer variant="permanent" classes={{paper: classes.drawerPaper}}>
<Drawer
variant="permanent"
classes={{paper: classes.drawerPaper}}
id="message-navigation">
<div className={classes.toolbar} />
<Link className={classes.link} to="/">
<ListItem button disabled={!loggedIn}>
<ListItem button disabled={!loggedIn} className="all">
<ListItemText primary="All Messages" />
</ListItem>
</Link>

8
ui/src/component/SettingsDialog.tsx
View File

@ -27,10 +27,15 @@ export default class SettingsDialog extends Component<IProps, IState> {
fClose();
};
return (
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
<Dialog
open={true}
onClose={fClose}
aria-labelledby="form-dialog-title"
id="changepw-dialog">
<DialogTitle id="form-dialog-title">Change Password</DialogTitle>
<DialogContent>
<TextField
className="newpass"
autoFocus
margin="dense"
type="password"
@ -45,6 +50,7 @@ export default class SettingsDialog extends Component<IProps, IState> {
<Tooltip title={pass.length !== 0 ? '' : 'pass is required'}>
<div>
<Button
className="change"
disabled={pass.length === 0}
onClick={submitAndClose}
color="primary"

2
ui/src/component/ToggleVisibility.tsx
View File

@ -21,7 +21,7 @@ class ToggleVisibility extends Component<IProps, IState> {
const text = this.state.visible ? value : '•••••••••••••••';
return (
<div style={style}>
<IconButton onClick={this.toggleVisibility}>
<IconButton onClick={this.toggleVisibility} className="toggle-visibility">
{this.state.visible ? <VisibilityOff /> : <Visibility />}
</IconButton>
<Typography style={{fontFamily: "'Roboto Mono', monospace"}}>{text}</Typography>

5
ui/src/pages/Applications.tsx
View File

@ -43,11 +43,12 @@ class Applications extends Component<{}, IState> {
<DefaultPage
title="Applications"
buttonTitle="Create Application"
buttonId="create-app"
maxWidth={1000}
fButton={this.showCreateDialog}>
<Grid item xs={12}>
<Paper elevation={6}>
<Table>
<Table id="app-table">
<TableHead>
<TableRow>
<TableCell padding="checkbox" style={{width: 80}} />
@ -151,7 +152,7 @@ const Row: SFC<IRowProps> = ({name, value, description, fDelete, fUpload, image}
</TableCell>
<TableCell>{description}</TableCell>
<TableCell numeric padding="none">
<IconButton onClick={fDelete}>
<IconButton onClick={fDelete} className="delete">
<Delete />
</IconButton>
</TableCell>

5
ui/src/pages/Clients.tsx
View File

@ -39,10 +39,11 @@ class Clients extends Component<{}, IState> {
<DefaultPage
title="Clients"
buttonTitle="Create Client"
buttonId="create-client"
fButton={this.showCreateDialog}>
<Grid item xs={12}>
<Paper elevation={6}>
<Table>
<Table id="client-table">
<TableHead>
<TableRow style={{textAlign: 'center'}}>
<TableCell>Name</TableCell>
@ -110,7 +111,7 @@ const Row: SFC<IRowProps> = ({name, value, fDelete}) => (
/>
</TableCell>
<TableCell numeric padding="none">
<IconButton onClick={fDelete}>
<IconButton onClick={fDelete} className="delete">
<Delete />
</IconButton>
</TableCell>

7
ui/src/pages/Login.tsx
View File

@ -20,10 +20,10 @@ class Login extends Component<{}, IState> {
<DefaultPage title="Login" maxWidth={250} hideButton={true}>
<Grid item xs={12} style={{textAlign: 'center'}}>
<Container>
<form onSubmit={this.preventDefault}>
<form onSubmit={this.preventDefault} id="login-form">
<TextField
autoFocus
id="name"
className="name"
label="Username"
margin="dense"
value={username}
@ -31,7 +31,7 @@ class Login extends Component<{}, IState> {
/>
<TextField
type="password"
id="password"
className="password"
label="Password"
margin="normal"
value={password}
@ -41,6 +41,7 @@ class Login extends Component<{}, IState> {
type="submit"
variant="raised"
size="large"
className="login"
color="primary"
style={{marginTop: 15, marginBottom: 5}}
onClick={this.login}>

3
ui/src/pages/Messages.tsx
View File

@ -58,10 +58,11 @@ class Messages extends Component<IProps, IState> {
<DefaultPage
title={name}
buttonTitle="Delete All"
buttonId="delete-all"
fButton={deleteMessages}
buttonDisabled={!hasMessages}>
{hasMessages ? (
<div style={{width: '100%'}}>
<div style={{width: '100%'}} id="messages">
<ReactList
key={appId}
ref={(el: ReactList) => (this.list = el)}

12
ui/src/pages/Users.tsx
View File

@ -35,10 +35,10 @@ const UserRow: SFC<IRowProps> = ({name, admin, fDelete, fEdit}) => (
<TableCell>{name}</TableCell>
<TableCell>{admin ? 'Yes' : 'No'}</TableCell>
<TableCell numeric padding="none">
<IconButton onClick={fEdit}>
<IconButton onClick={fEdit} className="edit">
<Edit />
</IconButton>
<IconButton onClick={fDelete}>
<IconButton onClick={fDelete} className="delete">
<Delete />
</IconButton>
</TableCell>
@ -67,10 +67,14 @@ class Users extends Component<WithStyles<'wrapper'>, IState> {
public render() {
const {users, deleteId, editId} = this.state;
return (
<DefaultPage title="Users" buttonTitle="Create User" fButton={this.showCreateDialog}>
<DefaultPage
title="Users"
buttonTitle="Create User"
buttonId="create-user"
fButton={this.showCreateDialog}>
<Grid item xs={12}>
<Paper elevation={6}>
<Table>
<Table id="user-table">
<TableHead>
<TableRow style={{textAlign: 'center'}}>
<TableCell>Name</TableCell>

11
ui/src/pages/dialog/AddApplicationDialog.tsx
View File

@ -30,7 +30,11 @@ export default class AddDialog extends Component<IProps, IState> {
fClose();
};
return (
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
<Dialog
open={true}
onClose={fClose}
aria-labelledby="form-dialog-title"
id="app-dialog">
<DialogTitle id="form-dialog-title">Create an application</DialogTitle>
<DialogContent>
<DialogContentText>
@ -39,7 +43,7 @@ export default class AddDialog extends Component<IProps, IState> {
<TextField
autoFocus
margin="dense"
id="name"
className="name"
label="Name *"
type="email"
value={name}
@ -48,7 +52,7 @@ export default class AddDialog extends Component<IProps, IState> {
/>
<TextField
margin="dense"
id="description"
className="description"
label="Short Description"
value={description}
onChange={this.handleChange.bind(this, 'description')}
@ -61,6 +65,7 @@ export default class AddDialog extends Component<IProps, IState> {
<Tooltip title={submitEnabled ? '' : 'name is required'}>
<div>
<Button
className="create"
disabled={!submitEnabled}
onClick={submitAndClose}
color="primary"

9
ui/src/pages/dialog/AddClientDialog.tsx
View File

@ -24,13 +24,17 @@ export default class AddDialog extends Component<IProps, {name: string}> {
fClose();
};
return (
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
<Dialog
open={true}
onClose={fClose}
aria-labelledby="form-dialog-title"
id="client-dialog">
<DialogTitle id="form-dialog-title">Create a client</DialogTitle>
<DialogContent>
<TextField
autoFocus
margin="dense"
id="name"
className="name"
label="Name *"
type="email"
value={name}
@ -45,6 +49,7 @@ export default class AddDialog extends Component<IProps, {name: string}> {
title={submitEnabled ? '' : 'name is required'}>
<div>
<Button
className="create"
disabled={!submitEnabled}
onClick={submitAndClose}
color="primary"

12
ui/src/pages/dialog/AddEditUserDialog.tsx
View File

@ -40,7 +40,11 @@ export default class AddEditDialog extends Component<IProps, IState> {
fClose();
};
return (
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
<Dialog
open={true}
onClose={fClose}
aria-labelledby="form-dialog-title"
id="add-edit-user-dialog">
<DialogTitle id="form-dialog-title">
{isEdit ? 'Edit ' + this.props.name : 'Add a user'}
</DialogTitle>
@ -48,7 +52,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
<TextField
autoFocus
margin="dense"
id="name"
className="name"
label="Name *"
type="email"
value={name}
@ -57,7 +61,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
/>
<TextField
margin="dense"
id="description"
className="password"
type="password"
value={pass}
fullWidth
@ -68,6 +72,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
control={
<Switch
checked={admin}
className="admin-rights"
onChange={this.handleChecked.bind(this, 'admin')}
value="admin"
/>
@ -88,6 +93,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
}>
<div>
<Button
className="save-create"
disabled={!passPresent || !namePresent}
onClick={submitAndClose}
color="primary"