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

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -1,13 +1,13 @@
 import { trim } from "lodash";
 import React, { useState } from "react";
-import { axios } from "@/services/axios";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import DynamicComponent from "@/components/DynamicComponent";
 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 { Dashboard } from "@/services/dashboard";
 
 function CreateDashboardDialog({ dialog }) {
   const [name, setName] = useState("");
@@ -25,9 +25,9 @@ function CreateDashboardDialog({ dialog }) {
     if (name !== "") {
       setSaveInProgress(true);
 
-      axios.post("api/dashboards", { name }).then(data => {
+      Dashboard.save({ name }).then(data => {
         dialog.close();
-        navigateTo(`dashboard/${data.slug}?edit`);
+        navigateTo(`${data.url}?edit`);
       });
       recordEvent("create", "dashboard");
     }

client/app/components/queries/AddToDashboardDialog.jsx

@@ -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={`${dashboard.url}`} onClick={() => notification.close(key)}>
               {dashboard.name}
             </a>
             <QueryTagsControl isDraft={dashboard.is_draft} tags={dashboard.tags} />

client/app/pages/dashboards/DashboardList.jsx

@@ -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={item.url} data-test={`DashboardId${item.id}`}>
             {item.name}
           </a>
           <DashboardTagsControl

client/app/pages/dashboards/DashboardPage.jsx

@@ -14,6 +14,8 @@ import { Dashboard } from "@/services/dashboard";
 import recordEvent from "@/services/recordEvent";
 import resizeObserver from "@/services/resizeObserver";
 import routes from "@/services/routes";
+import location from "@/services/location";
+import url from "@/services/url";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
 
 import useDashboard from "./hooks/useDashboard";
@@ -109,7 +111,7 @@ function DashboardComponent(props) {
   }, [pageContainer, editingLayout]);
 
   return (
-    <div className="container" ref={setPageContainer}>
+    <div className="container" ref={setPageContainer} data-test={`DashboardId${dashboard.id}Container`}>
       <DashboardHeader dashboardOptions={dashboardOptions} />
       {!isEmpty(globalParameters) && (
         <div className="dashboard-parameters m-b-10 p-15 bg-white tiled" data-test="DashboardParameters">
@@ -145,35 +147,52 @@ 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 handleError = useImmutableCallback(onError);
 
   useEffect(() => {
-    Dashboard.get({ slug: dashboardSlug })
+    Dashboard.get({ id: dashboardId, slug: dashboardSlug })
       .then(dashboardData => {
         recordEvent("view", "dashboard", dashboardData.id);
         setDashboard(dashboardData);
+
+        // if loaded by slug, update location url to use the id
+        if (!dashboardId) {
+          location.setPath(url.parse(dashboardData.url).pathname, true);
+        }
       })
       .catch(handleError);
-  }, [dashboardSlug, handleError]);
+  }, [dashboardId, dashboardSlug, handleError]);
 
   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",
+  "Dashboards.LegacyViewOrEdit",
   routeWithUserSession({
     path: "/dashboard/:dashboardSlug",
     render: pageProps => <DashboardPage {...pageProps} />,
   })
 );
+
+routes.register(
+  "Dashboards.ViewOrEdit",
+  routeWithUserSession({
+    path: "/dashboards/:dashboardId([^-]+)(-.*)?",
+    render: pageProps => <DashboardPage {...pageProps} />,
+  })
+);

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

@@ -2,6 +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 url from "@/services/url";
 import { Dashboard, collectDashboardFilters } from "@/services/dashboard";
 import { currentUser } from "@/services/auth";
 import recordEvent from "@/services/recordEvent";
@@ -63,15 +64,17 @@ function useDashboard(dashboardData) {
   const updateDashboard = useCallback(
     (data, includeVersion = true) => {
       setDashboard(currentDashboard => extend({}, currentDashboard, data));
-      // for some reason the request uses the id as slug
-      data = { ...data, slug: dashboard.id };
+      data = { ...data, id: dashboard.id };
       if (includeVersion) {
         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")) {
+            location.setPath(url.parse(updatedDashboard.url).pathname, true);
+          }
+        })
         .catch(error => {
           const status = get(error, "response.status");
           if (status === 403) {

client/app/pages/home/Home.jsx

@@ -119,7 +119,7 @@ function DashboardAndQueryFavoritesList() {
             <FavoriteList
               title="Favorite Dashboards"
               resource={Dashboard}
-              itemUrl={dashboard => `dashboard/${dashboard.slug}`}
+              itemUrl={dashboard => dashboard.url}
               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, slug }) => `dashboards/${id}-${slug}`;
+
 export function collectDashboardFilters(dashboard, queryResults, urlParams) {
   const filters = {};
   _.each(queryResults, queryResult => {
@@ -123,6 +125,11 @@ function calculateNewWidgetPosition(existingWidgets, newWidget) {
 
 export function Dashboard(dashboard) {
   _.extend(this, dashboard);
+  Object.defineProperty(this, "url", {
+    get: function() {
+      return urlForDashboard(this);
+    },
+  });
 }
 
 function prepareDashboardWidgets(widgets) {
@@ -147,17 +154,23 @@ function transformResponse(data) {
   return data;
 }
 
-const saveOrCreateUrl = data => (data.slug ? `api/dashboards/${data.slug}` : "api/dashboards");
+const saveOrCreateUrl = data => (data.id ? `api/dashboards/${data.id}` : "api/dashboards");
 const DashboardService = {
-  get: ({ slug }) => axios.get(`api/dashboards/${slug}`).then(transformResponse),
+  get: ({ id, slug }) => {
+    const params = {};
+    if (!id) {
+      params.legacy = null;
+    }
+    return axios.get(`api/dashboards/${id || slug}`, { params }).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),
+  delete: ({ id }) => axios.delete(`api/dashboards/${id}`).then(transformResponse),
   query: params => axios.get("api/dashboards", { params }).then(transformResponse),
   recent: params => axios.get("api/dashboards/recent", { params }).then(transformResponse),
   favorites: params => axios.get("api/dashboards/favorites", { params }).then(transformResponse),
-  favorite: ({ slug }) => axios.post(`api/dashboards/${slug}/favorite`),
-  unfavorite: ({ slug }) => axios.delete(`api/dashboards/${slug}/favorite`),
+  favorite: ({ id }) => axios.post(`api/dashboards/${id}/favorite`),
+  unfavorite: ({ id }) => axios.delete(`api/dashboards/${id}/favorite`),
 };
 
 _.extend(Dashboard, DashboardService);

client/cypress/integration/dashboard/dashboard_spec.js

@@ -25,19 +25,19 @@ describe("Dashboard", () => {
     });
 
     cy.wait("@NewDashboard").then(xhr => {
-      const slug = Cypress._.get(xhr, "response.body.slug");
-      assert.isDefined(slug, "Dashboard api call returns slug");
+      const id = Cypress._.get(xhr, "response.body.id");
+      assert.isDefined(id, "Dashboard api call returns id");
 
       cy.visit("/dashboards");
       cy.getByTestId("DashboardLayoutContent").within(() => {
-        cy.getByTestId(slug).should("exist");
+        cy.getByTestId(`DashboardId${id}`).should("exist");
       });
     });
   });
 
   it("archives dashboard", () => {
-    createDashboard("Foo Bar").then(({ slug }) => {
-      cy.visit(`/dashboard/${slug}`);
+    createDashboard("Foo Bar").then(({ id }) => {
+      cy.visit(`/dashboards/${id}`);
 
       cy.getByTestId("DashboardMoreButton").click();
 
@@ -52,7 +52,22 @@ describe("Dashboard", () => {
 
       cy.visit("/dashboards");
       cy.getByTestId("DashboardLayoutContent").within(() => {
-        cy.getByTestId(slug).should("not.exist");
+        cy.getByTestId(`DashboardId${id}`).should("not.exist");
+      });
+    });
+  });
+
+  it("is accessible through multiple urls", () => {
+    cy.server();
+    cy.route("GET", "api/dashboards/*").as("LoadDashboard");
+    createDashboard("Dashboard multiple urls").then(({ id, slug }) => {
+      [`/dashboards/${id}`, `/dashboards/${id}-anything-here`, `/dashboard/${slug}`].forEach(url => {
+        cy.visit(url);
+        cy.wait("@LoadDashboard");
+        cy.getByTestId(`DashboardId${id}Container`).should("exist");
+
+        // assert it always use the "/dashboards/{id}" path
+        cy.location("pathname").should("contain", `/dashboards/${id}`);
       });
     });
   });
@@ -61,9 +76,9 @@ describe("Dashboard", () => {
     before(function() {
       cy.login();
       createDashboard("Foo Bar")
-        .then(({ slug, id }) => {
-          this.dashboardUrl = `/dashboard/${slug}`;
-          this.dashboardEditUrl = `/dashboard/${slug}?edit`;
+        .then(({ id }) => {
+          this.dashboardUrl = `/dashboards/${id}`;
+          this.dashboardEditUrl = `/dashboards/${id}?edit`;
           return addTextbox(id, "Hello World!").then(getWidgetTestId);
         })
         .then(elTestId => {
@@ -117,8 +132,8 @@ describe("Dashboard", () => {
   context("viewport width is at 767px", () => {
     before(function() {
       cy.login();
-      createDashboard("Foo Bar").then(({ slug }) => {
-        this.dashboardUrl = `/dashboard/${slug}`;
+      createDashboard("Foo Bar").then(({ id }) => {
+        this.dashboardUrl = `/dashboards/${id}`;
       });
     });
 

client/cypress/integration/dashboard/dashboard_tags_spec.js

@@ -4,7 +4,7 @@ import { expectTagsToContain, typeInTagsSelectAndSave } from "../../support/tags
 describe("Dashboard Tags", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar").then(({ slug }) => cy.visit(`/dashboard/${slug}`));
+    createDashboard("Foo Bar").then(({ id }) => cy.visit(`/dashboards/${id}`));
   });
 
   it("is possible to add and edit tags", () => {

client/cypress/integration/dashboard/filters_spec.js

@@ -29,7 +29,7 @@ describe("Dashboard Filters", () => {
         .as("widget1TestId")
         .then(() => createQueryAndAddWidget(dashboard.id, queryData, { position: { col: 4 } }))
         .as("widget2TestId")
-        .then(() => cy.visit(`/dashboard/${dashboard.slug}`));
+        .then(() => cy.visit(`/dashboards/${dashboard.id}`));
     });
   });
 

client/cypress/integration/dashboard/grid_compliant_widgets_spec.js

@@ -10,8 +10,8 @@ describe("Grid compliant widgets", () => {
     cy.login();
     cy.viewport(1215 + menuWidth, 800);
     createDashboard("Foo Bar")
-      .then(({ slug, id }) => {
-        this.dashboardUrl = `/dashboard/${slug}`;
+      .then(({ id }) => {
+        this.dashboardUrl = `/dashboards/${id}`;
         return addTextbox(id, "Hello World!").then(getWidgetTestId);
       })
       .then(elTestId => {

client/cypress/integration/dashboard/parameter_mapping_spec.js

@@ -5,9 +5,9 @@ describe("Parameter Mapping", () => {
   beforeEach(function() {
     cy.login();
     createDashboard("Foo Bar")
-      .then(({ slug, id }) => {
+      .then(({ id }) => {
         this.dashboardId = id;
-        this.dashboardUrl = `/dashboard/${slug}`;
+        this.dashboardUrl = `/dashboards/${id}`;
       })
       .then(() => {
         const queryData = {

client/cypress/integration/dashboard/sharing_spec.js

@@ -6,9 +6,9 @@ import { editDashboard, shareDashboard, createQueryAndAddWidget } from "../../su
 describe("Dashboard Sharing", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar").then(({ slug, id }) => {
+    createDashboard("Foo Bar").then(({ id }) => {
       this.dashboardId = id;
-      this.dashboardUrl = `/dashboard/${slug}`;
+      this.dashboardUrl = `/dashboards/${id}`;
     });
   });
 

client/cypress/integration/dashboard/textbox_spec.js

@@ -6,9 +6,9 @@ import { getWidgetTestId, editDashboard } from "../../support/dashboard";
 describe("Textbox", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar").then(({ slug, id }) => {
+    createDashboard("Foo Bar").then(({ id }) => {
       this.dashboardId = id;
-      this.dashboardUrl = `/dashboard/${slug}`;
+      this.dashboardUrl = `/dashboards/${id}`;
     });
   });
 

client/cypress/integration/dashboard/widget_spec.js

@@ -6,9 +6,9 @@ import { createQueryAndAddWidget, editDashboard, resizeBy } from "../../support/
 describe("Widget", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar").then(({ slug, id }) => {
+    createDashboard("Foo Bar").then(({ id }) => {
       this.dashboardId = id;
-      this.dashboardUrl = `/dashboard/${slug}`;
+      this.dashboardUrl = `/dashboards/${id}`;
     });
   });
 

client/cypress/integration/visualizations/pivot_spec.js

@@ -143,7 +143,7 @@ describe("Pivot", () => {
 
     createDashboard("Pivot Visualization")
       .then(dashboard => {
-        this.dashboardUrl = `/dashboard/${dashboard.slug}`;
+        this.dashboardUrl = `/dashboards/${dashboard.id}`;
         return cy.all(
           pivotTables.map(pivot => () =>
             createVisualization(this.queryId, "PIVOT", pivot.name, pivot.options).then(visualization =>

client/cypress/integration/visualizations/sankey_sunburst_spec.js

@@ -99,7 +99,7 @@ describe("Sankey and Sunburst", () => {
 
   it("takes a snapshot with Sunburst (1 - 5 stages)", function() {
     createDashboard("Sunburst Visualization").then(dashboard => {
-      this.dashboardUrl = `/dashboard/${dashboard.slug}`;
+      this.dashboardUrl = `/dashboards/${dashboard.id}`;
       return cy
         .all(
           STAGES_WIDGETS.map(sunburst => () =>
@@ -123,7 +123,7 @@ describe("Sankey and Sunburst", () => {
 
   it("takes a snapshot with Sankey (1 - 5 stages)", function() {
     createDashboard("Sankey Visualization").then(dashboard => {
-      this.dashboardUrl = `/dashboard/${dashboard.slug}`;
+      this.dashboardUrl = `/dashboards/${dashboard.id}`;
       return cy
         .all(
           STAGES_WIDGETS.map(sankey => () =>