Dashboard URL does not show new name when dashboard name is updated

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -8,6 +8,7 @@ import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import navigateTo from "@/components/ApplicationArea/navigateTo";
 import recordEvent from "@/services/recordEvent";
 import { policy } from "@/services/policy";
+import { urlForDashboard } from "@/services/dashboard";
 
 function CreateDashboardDialog({ dialog }) {
   const [name, setName] = useState("");
@@ -27,7 +28,7 @@ function CreateDashboardDialog({ dialog }) {
 
       axios.post("api/dashboards", { name }).then(data => {
         dialog.close();
-        navigateTo(`dashboard/${data.slug}?edit`);
+        navigateTo(`${urlForDashboard(data)}?edit`);
       });
       recordEvent("create", "dashboard");
     }

client/app/components/queries/AddToDashboardDialog.jsx

@@ -7,7 +7,7 @@ import List from "antd/lib/list";
 import Icon from "antd/lib/icon";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
-import { Dashboard } from "@/services/dashboard";
+import { Dashboard, urlForDashboard } from "@/services/dashboard";
 import notification from "@/services/notification";
 import useSearchResults from "@/lib/hooks/useSearchResults";
 
@@ -38,7 +38,7 @@ function AddToDashboardDialog({ dialog, visualization }) {
 
   function addWidgetToDashboard() {
     // Load dashboard with all widgets
-    Dashboard.get({ slug: selectedDashboard.slug })
+    Dashboard.get(selectedDashboard)
       .then(dashboard => {
         dashboard.addWidget(visualization);
         return dashboard;
@@ -51,7 +51,7 @@ function AddToDashboardDialog({ dialog, visualization }) {
         notification.success(
           "Widget added to dashboard",
           <React.Fragment>
-            <a href={`dashboard/${dashboard.slug}`} onClick={() => notification.close(key)}>
+            <a href={`${urlForDashboard(dashboard)}`} onClick={() => notification.close(key)}>
               {dashboard.name}
             </a>
             <QueryTagsControl isDraft={dashboard.is_draft} tags={dashboard.tags} />

client/app/pages/dashboards/DashboardList.jsx

@@ -14,7 +14,7 @@ import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTab
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
 import Layout from "@/components/layouts/ContentWithSidebar";
 
-import { Dashboard } from "@/services/dashboard";
+import { Dashboard, urlForDashboard } from "@/services/dashboard";
 import { currentUser } from "@/services/auth";
 import routes from "@/services/routes";
 
@@ -46,7 +46,7 @@ class DashboardList extends React.Component {
     Columns.custom.sortable(
       (text, item) => (
         <React.Fragment>
-          <a className="table-main-title" href={"dashboard/" + item.slug} data-test={item.slug}>
+          <a className="table-main-title" href={urlForDashboard(item)} data-test={item.slug}>
             {item.name}
           </a>
           <DashboardTagsControl

client/app/pages/dashboards/DashboardPage.jsx

@@ -144,36 +144,48 @@ DashboardComponent.propTypes = {
   dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-function DashboardPage({ dashboardSlug, onError }) {
+function DashboardPage({ dashboardSlug, dashboardId, onError }) {
   const [dashboard, setDashboard] = useState(null);
   const onErrorRef = useRef();
   onErrorRef.current = onError;
 
   useEffect(() => {
-    Dashboard.get({ slug: dashboardSlug })
+    Dashboard.get({ id: dashboardId, slug: dashboardSlug })
       .then(dashboardData => {
         recordEvent("view", "dashboard", dashboardData.id);
         setDashboard(dashboardData);
       })
       .catch(error => onErrorRef.current(error));
-  }, [dashboardSlug]);
+  }, [dashboardSlug, dashboardId]);
 
   return <div className="dashboard-page">{dashboard && <DashboardComponent dashboard={dashboard} />}</div>;
 }
 
 DashboardPage.propTypes = {
-  dashboardSlug: PropTypes.string.isRequired,
+  dashboardSlug: PropTypes.string,
+  dashboardId: PropTypes.string,
   onError: PropTypes.func,
 };
 
 DashboardPage.defaultProps = {
+  dashboardSlug: null,
+  dashboardId: null,
   onError: PropTypes.func,
 };
 
+// route kept for backward compatibility
 routes.register(
   "Dashboards.ViewOrEdit",
   routeWithUserSession({
     path: "/dashboard/:dashboardSlug",
     render: pageProps => <DashboardPage {...pageProps} />,
   })
 );
+
+routes.register(
+  "Dashboards.ViewOrEditWithId",
+  routeWithUserSession({
+    path: "/dashboards/:dashboardId-(.*)?",
+    render: pageProps => <DashboardPage {...pageProps} />,
+  })
+);

client/app/pages/dashboards/hooks/useDashboard.js

@@ -2,7 +2,7 @@ import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { isEmpty, includes, compact, map, has, pick, keys, extend, every, get } from "lodash";
 import notification from "@/services/notification";
 import location from "@/services/location";
-import { Dashboard, collectDashboardFilters } from "@/services/dashboard";
+import { Dashboard, collectDashboardFilters, urlForDashboard } from "@/services/dashboard";
 import { currentUser } from "@/services/auth";
 import recordEvent from "@/services/recordEvent";
 import { QueryResultError } from "@/services/query";
@@ -14,6 +14,7 @@ import ShareDashboardDialog from "../components/ShareDashboardDialog";
 import useFullscreenHandler from "../../../lib/hooks/useFullscreenHandler";
 import useRefreshRateHandler from "./useRefreshRateHandler";
 import useEditModeHandler from "./useEditModeHandler";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 
 export { DashboardStatusEnum } from "./useEditModeHandler";
 
@@ -69,9 +70,12 @@ function useDashboard(dashboardData) {
         data = { ...data, version: dashboard.version };
       }
       return Dashboard.save(data)
-        .then(updatedDashboard =>
-          setDashboard(currentDashboard => extend({}, currentDashboard, pick(updatedDashboard, keys(data))))
-        )
+        .then(updatedDashboard => {
+          setDashboard(currentDashboard => extend({}, currentDashboard, pick(updatedDashboard, keys(data))));
+          if (has(data, "name")) {
+            navigateTo(urlForDashboard(updatedDashboard), true);
+          }
+        })
         .catch(error => {
           const status = get(error, "response.status");
           if (status === 403) {

client/app/pages/home/Home.jsx

@@ -13,7 +13,7 @@ import { axios } from "@/services/axios";
 import recordEvent from "@/services/recordEvent";
 import { messages } from "@/services/auth";
 import notification from "@/services/notification";
-import { Dashboard } from "@/services/dashboard";
+import { Dashboard, urlForDashboard } from "@/services/dashboard";
 import { Query } from "@/services/query";
 import routes from "@/services/routes";
 
@@ -119,7 +119,7 @@ function DashboardAndQueryFavoritesList() {
             <FavoriteList
               title="Favorite Dashboards"
               resource={Dashboard}
-              itemUrl={dashboard => `dashboard/${dashboard.slug}`}
+              itemUrl={dashboard => urlForDashboard(dashboard)}
               emptyState={
                 <p>
                   <span className="btn-favourite m-r-5">

client/app/services/dashboard.js

@@ -6,6 +6,8 @@ import { currentUser } from "@/services/auth";
 import location from "@/services/location";
 import { cloneParameter } from "@/services/parameters";
 
+export const urlForDashboard = ({ id, name_as_slug }) => `dashboards/${id}-${name_as_slug}`;
+
 export function collectDashboardFilters(dashboard, queryResults, urlParams) {
   const filters = {};
   _.each(queryResults, queryResult => {
@@ -149,7 +151,7 @@ function transformResponse(data) {
 
 const saveOrCreateUrl = data => (data.slug ? `api/dashboards/${data.slug}` : "api/dashboards");
 const DashboardService = {
-  get: ({ slug }) => axios.get(`api/dashboards/${slug}`).then(transformResponse),
+  get: ({ id, slug }) => axios.get(`api/dashboards/${id || slug}`).then(transformResponse),
   getByToken: ({ token }) => axios.get(`api/dashboards/public/${token}`).then(transformResponse),
   save: data => axios.post(saveOrCreateUrl(data), data).then(transformResponse),
   delete: ({ slug }) => axios.delete(`api/dashboards/${slug}`).then(transformResponse),

redash/handlers/dashboards.py

@@ -150,7 +150,7 @@ def get(self, dashboard_slug=None):
         :>json string widget.updated_at: ISO format timestamp for last widget modification
         """
         dashboard = get_object_or_404(
-            models.Dashboard.get_by_slug_and_org, dashboard_slug, self.current_org
+            models.Dashboard.get_by_id_or_slug_and_org, dashboard_slug, self.current_org
         )
         response = DashboardSerializer(
             dashboard, with_widgets=True, user=self.current_user

redash/models/__init__.py

@@ -5,7 +5,7 @@
 import numbers
 import pytz
 
-from sqlalchemy import distinct, or_, and_, UniqueConstraint
+from sqlalchemy import distinct, or_, and_, UniqueConstraint, cast
 from sqlalchemy.dialects import postgresql
 from sqlalchemy.event import listens_for
 from sqlalchemy.ext.hybrid import hybrid_property
@@ -1097,6 +1097,10 @@ class Dashboard(ChangeTrackingMixin, TimestampMixin, BelongsToOrgMixin, db.Model
     def __str__(self):
         return "%s=%s" % (self.id, self.name)
 
+    @property
+    def name_as_slug(self):
+        return utils.slugify(self.name)
+
     @classmethod
     def all(cls, org, group_ids, user_id):
         query = (
@@ -1168,6 +1172,15 @@ def favorites(cls, user, base_query=None):
     def get_by_slug_and_org(cls, slug, org):
         return cls.query.filter(cls.slug == slug, cls.org == org).one()
 
+    @classmethod
+    def get_by_id_or_slug_and_org(cls, id_or_slug, org):
+        return (
+            cls.query.filter(
+                cast(cls.id, db.String) == id_or_slug, cls.org == org
+            ).one_or_none()
+            or cls.query.filter(cls.slug == id_or_slug, cls.org == org).one()
+        )
+
     @hybrid_property
     def lowercase_name(self):
         "Optional property useful for sorting purposes."

redash/serializers/__init__.py

@@ -246,6 +246,7 @@ def serialize_dashboard(obj, with_widgets=False, user=None, with_favorite_state=
     d = {
         "id": obj.id,
         "slug": obj.slug,
+        "name_as_slug": obj.name_as_slug,
         "name": obj.name,
         "user_id": obj.user_id,
         "user": {