Add refresh button to messages list

foxbit19 · jmattheis · commit bdb63722357c · 2019-10-19T09:15:10.000+02:00
Fixes #171
diff --git a/ui/src/application/Applications.tsx b/ui/src/application/Applications.tsx
@@ -13,6 +13,7 @@ import CloudUpload from '@material-ui/icons/CloudUpload';
 import React, {ChangeEvent, Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
+import Button from '@material-ui/core/Button';
 import ToggleVisibility from '../common/ToggleVisibility';
 import AddApplicationDialog from './AddApplicationDialog';
 import {observer} from 'mobx-react';
@@ -47,10 +48,16 @@ class Applications extends Component<Stores<'appStore'>> {
         return (
             <DefaultPage
                 title="Applications"
-                buttonTitle="Create Application"
-                buttonId="create-app"
-                maxWidth={1000}
-                fButton={() => (this.createDialog = true)}>
+                rightControl={
+                    <Button
+                        id="create-app"
+                        variant="contained"
+                        color="primary"
+                        onClick={() => (this.createDialog = true)}>
+                        Create Application
+                    </Button>
+                }
+                maxWidth={1000}>
                 <Grid item xs={12}>
                     <Paper elevation={6}>
                         <Table id="app-table">
diff --git a/ui/src/client/Clients.tsx b/ui/src/client/Clients.tsx
@@ -11,6 +11,7 @@ import Edit from '@material-ui/icons/Edit';
 import React, {Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
+import Button from '@material-ui/core/Button';
 import ToggleVisibility from '../common/ToggleVisibility';
 import AddClientDialog from './AddClientDialog';
 import UpdateDialog from './UpdateClientDialog';
@@ -42,9 +43,15 @@ class Clients extends Component<Stores<'clientStore'>> {
         return (
             <DefaultPage
                 title="Clients"
-                buttonTitle="Create Client"
-                buttonId="create-client"
-                fButton={() => (this.showDialog = true)}>
+                rightControl={
+                    <Button
+                        id="create-client"
+                        variant="contained"
+                        color="primary"
+                        onClick={() => (this.showDialog = true)}>
+                        Create Client
+                    </Button>
+                }>
                 <Grid item xs={12}>
                     <Paper elevation={6}>
                         <Table id="client-table">
diff --git a/ui/src/common/DefaultPage.tsx b/ui/src/common/DefaultPage.tsx
@@ -1,44 +1,21 @@
-import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import React, {SFC} from 'react';
 
 interface IProps {
     title: string;
-    buttonTitle?: string;
-    fButton?: VoidFunction;
-    buttonDisabled?: boolean;
+    rightControl?: React.ReactNode;
     maxWidth?: number;
-    hideButton?: boolean;
-    buttonId?: string;
 }
 
-const DefaultPage: SFC<IProps> = ({
-    title,
-    buttonTitle,
-    buttonId,
-    fButton,
-    buttonDisabled = false,
-    maxWidth = 700,
-    hideButton,
-    children,
-}) => (
+const DefaultPage: SFC<IProps> = ({title, rightControl, maxWidth = 700, children}) => (
     <main style={{margin: '0 auto', maxWidth}}>
         <Grid container spacing={4}>
             <Grid item xs={12} style={{display: 'flex'}}>
                 <Typography variant="h4" style={{flex: 1}}>
                     {title}
                 </Typography>
-                {hideButton ? null : (
-                    <Button
-                        id={buttonId}
-                        variant="contained"
-                        color="primary"
-                        disabled={buttonDisabled}
-                        onClick={fButton}>
-                        {buttonTitle}
-                    </Button>
-                )}
+                {rightControl}
             </Grid>
             {children}
         </Grid>
diff --git a/ui/src/common/LoadingSpinner.tsx b/ui/src/common/LoadingSpinner.tsx
@@ -5,7 +5,7 @@ import DefaultPage from './DefaultPage';
 
 export default function LoadingSpinner() {
     return (
-        <DefaultPage title="" maxWidth={250} hideButton={true}>
+        <DefaultPage title="" maxWidth={250}>
             <Grid item xs={12} style={{textAlign: 'center'}}>
                 <CircularProgress size={150} />
             </Grid>
diff --git a/ui/src/message/Messages.tsx b/ui/src/message/Messages.tsx
@@ -4,6 +4,7 @@ import Typography from '@material-ui/core/Typography';
 import React, {Component} from 'react';
 import {RouteComponentProps} from 'react-router';
 import DefaultPage from '../common/DefaultPage';
+import Button from '@material-ui/core/Button';
 import Message from './Message';
 import {observer} from 'mobx-react';
 import {inject, Stores} from '../inject';
@@ -61,10 +62,27 @@ class Messages extends Component<IProps & Stores<'messagesStore' | 'appStore'>,
         return (
             <DefaultPage
                 title={name}
-                buttonTitle="Delete All"
-                buttonId="delete-all"
-                fButton={() => messagesStore.removeByApp(appId)}
-                buttonDisabled={!hasMessages}>
+                rightControl={
+                    <div>
+                        <Button
+                            id="refresh-all"
+                            variant="contained"
+                            disabled={!hasMessages}
+                            color="primary"
+                            onClick={() => messagesStore.refreshByApp(appId)}
+                            style={{marginRight: 5}}>
+                            Refresh
+                        </Button>
+                        <Button
+                            id="delete-all"
+                            variant="contained"
+                            disabled={!hasMessages}
+                            color="primary"
+                            onClick={() => messagesStore.removeByApp(appId)}>
+                            Delete All
+                        </Button>
+                    </div>
+                }>
                 {hasMessages ? (
                     <div style={{width: '100%'}} id="messages">
                         <ReactInfinite
diff --git a/ui/src/message/MessagesStore.ts b/ui/src/message/MessagesStore.ts
@@ -100,6 +100,12 @@ export class MessagesStore {
         this.createEmptyStatesForApps(this.appStore.getItems());
     };
 
+    @action
+    public refreshByApp = async (appId: number) => {
+        this.clearAll();
+        this.loadMore(appId);
+    };
+
     public exists = (id: number) => this.stateOf(id).loaded;
 
     private removeFromList(messages: IMessage[], messageToDelete: IMessage): false | number {
diff --git a/ui/src/plugin/PluginDetailView.tsx b/ui/src/plugin/PluginDetailView.tsx
@@ -70,7 +70,7 @@ class PluginDetailView extends Component<IProps & Stores<'pluginStore'>, IState>
         const pluginInfo = this.pluginInfo();
         const {name, capabilities} = pluginInfo;
         return (
-            <DefaultPage title={name} hideButton={true} maxWidth={1000}>
+            <DefaultPage title={name} maxWidth={1000}>
                 <PanelWrapper name={'Plugin Info'} icon={Info}>
                     <PluginInfo pluginInfo={pluginInfo} />
                 </PanelWrapper>
diff --git a/ui/src/plugin/Plugins.tsx b/ui/src/plugin/Plugins.tsx
@@ -25,7 +25,7 @@ class Plugins extends Component<Stores<'pluginStore'>> {
         } = this;
         const plugins = pluginStore.getItems();
         return (
-            <DefaultPage title="Plugins" hideButton={true} maxWidth={1000}>
+            <DefaultPage title="Plugins" maxWidth={1000}>
                 <Grid item xs={12}>
                     <Paper elevation={6}>
                         <Table id="plugin-table">
diff --git a/ui/src/user/Login.tsx b/ui/src/user/Login.tsx
@@ -18,7 +18,7 @@ class Login extends Component<Stores<'currentUser'>> {
     public render() {
         const {username, password} = this;
         return (
-            <DefaultPage title="Login" maxWidth={250} hideButton={true}>
+            <DefaultPage title="Login" maxWidth={250}>
                 <Grid item xs={12} style={{textAlign: 'center'}}>
                     <Container>
                         <form onSubmit={this.preventDefault} id="login-form">
diff --git a/ui/src/user/Users.tsx b/ui/src/user/Users.tsx
@@ -12,6 +12,7 @@ import Edit from '@material-ui/icons/Edit';
 import React, {Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
+import Button from '@material-ui/core/Button';
 import AddEditDialog from './AddEditUserDialog';
 import {observer} from 'mobx-react';
 import {observable} from 'mobx';
@@ -69,9 +70,15 @@ class Users extends Component<WithStyles<'wrapper'> & Stores<'userStore'>> {
         return (
             <DefaultPage
                 title="Users"
-                buttonTitle="Create User"
-                buttonId="create-user"
-                fButton={() => (this.createDialog = true)}>
+                rightControl={
+                    <Button
+                        id="create-user"
+                        variant="contained"
+                        color="primary"
+                        onClick={() => (this.createDialog = true)}>
+                        Create User
+                    </Button>
+                }>
                 <Grid item xs={12}>
                     <Paper elevation={6}>
                         <Table id="user-table">
