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

Handle editing of dashboard title and description through React and Reflux, avoiding the use of jquery and specially `.html`
dkhamitov · Apr 19, 2018 · 5fbb7d3 · 5fbb7d3
1 parent 0617c62
commit 5fbb7d3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/graylog2-web-interface/src/components/dashboard/Dashboard.jsx b/graylog2-web-interface/src/components/dashboard/Dashboard.jsx
@@ -76,14 +76,14 @@ const Dashboard = createReactClass({
     return (
       <li className="stream">
         <h2>
-          <Link to={Routes.dashboard_show(this.props.dashboard.id)}><span ref="dashboardTitle">{this.props.dashboard.title}</span></Link>
+          <Link to={Routes.dashboard_show(this.props.dashboard.id)}>{this.props.dashboard.title}</Link>
         </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
@@ -77,17 +77,6 @@ const EditDashboardModal = createReactClass({
       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
@@ -222,6 +222,10 @@ const ShowDashboardPage = createReactClass({
     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 />;
@@ -259,13 +263,17 @@ const ShowDashboardPage = createReactClass({
     }
 
     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>
@@ -274,7 +282,7 @@ const ShowDashboardPage = createReactClass({
       <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>