Set dashboard title and description with React (#4730) (#4739)

Handle editing of dashboard title and description through React and Reflux, avoiding the use of jquery and specially `.html` (cherry picked from commit 5fbb7d3)
Graylog2 · Apr 20, 2018 · 4a34665 · 4a34665
1 parent a25c643
commit 4a34665
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/graylog2-web-interface/src/components/dashboard/Dashboard.jsx b/graylog2-web-interface/src/components/dashboard/Dashboard.jsx
@@ -69,15 +69,15 @@ const Dashboard = React.createClass({
       <li className="stream">
         <h2>
           <LinkContainer to={Routes.dashboard_show(this.props.dashboard.id)}>
-            <a><span ref="dashboardTitle">{this.props.dashboard.title}</span></a>
+            <a>{this.props.dashboard.title}</a>
           </LinkContainer>
         </h2>
 
         <div className="stream-data">
           {this._getDashboardActions()}
           <div className="stream-description">
             {createdFromContentPack}
-            <span ref="dashboardDescription">{this.props.dashboard.description}</span>
+            {this.props.dashboard.description}
           </div>
         </div>
       </li>

diff --git a/graylog2-web-interface/src/components/dashboard/EditDashboardModal.jsx b/graylog2-web-interface/src/components/dashboard/EditDashboardModal.jsx
@@ -68,17 +68,6 @@ const EditDashboardModal = React.createClass({
       promise.then(() => {
         this.close();
 
-        const idSelector = `[data-dashboard-id="${this.state.id}"]`;
-        const $title = $(`${idSelector}.dashboard-title`);
-        if ($title.length > 0) {
-          $title.html(this.state.title);
-        }
-
-        const $description = $(`${idSelector}.dashboard-description`);
-        if ($description.length > 0) {
-          $description.html(this.state.description);
-        }
-
         if (typeof this.props.onSaved === 'function') {
           this.props.onSaved(this.state.id);
         }

diff --git a/graylog2-web-interface/src/pages/ShowDashboardPage.jsx b/graylog2-web-interface/src/pages/ShowDashboardPage.jsx
@@ -198,6 +198,11 @@ const ShowDashboardPage = React.createClass({
     this.setState({ forceUpdateInBackground: forceUpdate });
     UserNotification.success(`Graphs will be updated ${forceUpdate ? 'even' : 'only'} when the browser is in the ${forceUpdate ? 'background' : 'foreground'}`, '');
   },
+
+  _handleDashboardUpdate() {
+    this.loadData();
+  },
+
   render() {
     if (!this.state.dashboard) {
       return <Spinner />;
@@ -235,13 +240,17 @@ const ShowDashboardPage = React.createClass({
     }
 
     const editDashboardTrigger = !this.state.locked && !this._dashboardIsEmpty(dashboard) ?
-      (<EditDashboardModalTrigger id={dashboard.id} action="edit" title={dashboard.title}
-                                 description={dashboard.description} buttonClass="btn-info btn-xs">
+      (<EditDashboardModalTrigger id={dashboard.id}
+                                  action="edit"
+                                  title={dashboard.title}
+                                  description={dashboard.description}
+                                  onSaved={this._handleDashboardUpdate}
+                                  buttonClass="btn-info btn-xs">
         <i className="fa fa-pencil" />
       </EditDashboardModalTrigger>) : null;
     const dashboardTitle = (
       <span>
-        <span data-dashboard-id={dashboard.id} className="dashboard-title">{dashboard.title}</span>
+        {dashboard.title}
         &nbsp;
         {editDashboardTrigger}
       </span>
@@ -250,7 +259,7 @@ const ShowDashboardPage = React.createClass({
       <DocumentTitle title={`Dashboard ${dashboard.title}`}>
         <span>
           <PageHeader title={dashboardTitle}>
-            <span data-dashboard-id={dashboard.id} className="dashboard-description">{dashboard.description}</span>
+            {dashboard.description}
             {supportText}
             {actions}
           </PageHeader>