Cherry pick of MM-58843 - #1920 (#1936)

* only accept valid MM ids

remove extra exact

spacing

remove extra space

* tests want valid id

* fix loose path

* fix my alphabet

* remove debug consolelog

* strict path on runs route

* exact, not strict

* add test for invalid url

* add test on invalid urls

e2e-tests/tests/integration/playbooks/playbooks/overview_spec.js

@@ -106,12 +106,20 @@ describe('playbooks > overview', {testIsolation: true}, () => {
 
     it('redirects to not found error if the playbook is unknown', () => {
         // # Visit the URL of a non-existing playbook
-        cy.visit('/playbooks/playbooks/an_unknown_id');
+        cy.visit('/playbooks/playbooks/abcdefghijklmnopqrstuvwxyz');
 
         // * Verify that the user has been redirected to the playbooks not found error page
         cy.url().should('include', '/playbooks/error?type=playbooks');
     });
 
+    it('redirect to not found if the url is incorrect', () => {
+        // # visit the playbook url with an incorrect id
+        cy.visit('/playbooks/playbooks/..%252F..%252f..%252F..%252F..%252fapi%252Fv4%252Ffiles%252Fo47cow5h6fgjzp8abfqqxw5jwc');
+
+        // * Verify that the user has been redirected to the not found error page
+        cy.url().should('include', '/playbooks/error?type=default');
+    });
+
     describe('should switch to channels and prompt to run when clicking run', () => {
         const openAndRunPlaybook = (team) => {
             // # Navigate directly to town square on the team

e2e-tests/tests/integration/playbooks/runs/rdp_general_spec.js

@@ -53,12 +53,20 @@ describe('runs > run details page', {testIsolation: true}, () => {
 
     it('redirects to not found error if the playbook run is unknown', () => {
         // # Visit the URL of a non-existing playbook run
-        cy.visit('/playbooks/runs/an_unknown_id');
+        cy.visit('/playbooks/runs/abcdefghijklmnopqrstuvwxyz');
 
         // * Verify that the user has been redirected to the playbook runs not found error page
         cy.url().should('include', '/playbooks/error?type=playbook_runs');
     });
 
+    it('redirect to not found if the url is incorrect', () => {
+        // # visit the run url with an incorrect id
+        cy.visit('/playbooks/runs/..%252F..%252f..%252F..%252F..%252fapi%252Fv4%252Ffiles%252Fo47cow5h6fgjzp8abfqqxw5jwc');
+
+        // * Verify that the user has been redirected to the not found error page
+        cy.url().should('include', '/playbooks/error?type=default');
+    });
+
     it('telemetry is triggered', () => {
         // # Intercept all calls to telemetry
         cy.interceptTelemetry();

webapp/src/components/backstage/main_body.tsx

@@ -85,39 +85,42 @@ export const useDefaultRedirectOnTeamChange = (teamScopedModelTeamId: string | u
 };
 
 const MainBody = () => {
+    const mattermostIDFormat = '[a-z0-9]{26}';
     const match = useRouteMatch();
     useInitTeamRoutingLogic();
 
     return (
         <Switch>
-            <Route
-                path={`${match.url}/playbooks/:playbookId`}
-            >
+            <Route path={`${match.url}/playbooks/:playbookId(${mattermostIDFormat})/:tab(outline|reports)?`}>
                 <PlaybookEditor/>
             </Route>
-            <Route path={`${match.url}/playbooks`}>
+            <Route
+                path={`${match.url}/playbooks`}
+                exact={true}
+            >
                 <PlaybookList/>
             </Route>
             <Redirect
                 from={`${match.url}/incidents/:playbookRunId`}
                 to={`${match.url}/runs/:playbookRunId`}
             />
-            <Route path={`${match.url}/runs/:playbookRunId`}>
+            <Route path={`${match.url}/runs/:playbookRunId(${mattermostIDFormat})`}>
                 <PlaybookRun/>
             </Route>
             <Redirect
                 from={`${match.url}/incidents`}
                 to={`${match.url}/runs`}
             />
-            <Route path={`${match.url}/runs`}>
+            <Route
+                path={`${match.url}/runs`}
+                exact={true}
+            >
                 <RunsPage/>
             </Route>
             <Route path={`${match.url}/error`}>
                 <ErrorPage/>
             </Route>
-            <Route
-                path={`${match.url}/start`}
-            >
+            <Route path={`${match.url}/start`}>
                 <PlaybookList firstTimeUserExperience={true}/>
             </Route>
             <Route

webapp/src/components/backstage/playbook_editor/playbook_editor.tsx

@@ -10,6 +10,7 @@ import {
     Switch,
     useRouteMatch,
 } from 'react-router-dom';
+import {generatePath} from 'react-router';
 
 import {useIntl} from 'react-intl';
 
@@ -44,7 +45,7 @@ import * as Controls from './controls';
 const PlaybookEditor = () => {
     const {formatMessage} = useIntl();
     const dispatch = useDispatch();
-    const {url, path, params: {playbookId}} = useRouteMatch<{playbookId: string}>();
+    const {path, params: {playbookId}} = useRouteMatch<{playbookId: string}>();
 
     const [playbook, {error, loading, refetch}] = usePlaybook(playbookId);
     const updatePlaybook = useUpdatePlaybook(playbook?.id);
@@ -233,42 +234,48 @@ const PlaybookEditor = () => {
             </Header>
             <NavBar>
                 <NavItem
-                    to={`${url}`}
+                    to={generatePath(path, {playbookId})}
                     exact={true}
                     onClick={() => telemetryEventForPlaybook(playbook.id, 'playbook_usage_tab_clicked')}
                 >
                     {formatMessage({defaultMessage: 'Usage'})}
                 </NavItem>
                 <NavItem
-                    to={`${url}/outline`}
+                    to={generatePath(path, {playbookId, tab: 'outline'})}
                     onClick={() => telemetryEventForPlaybook(playbook.id, 'playbook_outline_tab_clicked')}
                 >
                     {formatMessage({defaultMessage: 'Outline'})}
                 </NavItem>
                 <NavItem
-                    to={`${url}/reports`}
+                    to={generatePath(path, {playbookId, tab: 'reports'})}
                     onClick={() => telemetryEventForPlaybook(playbook.id, 'playbook_reports_tab_clicked')}
                 >
                     {formatMessage({defaultMessage: 'Reports'})}
                 </NavItem>
             </NavBar>
             <Switch>
                 <Route
-                    path={`${path}`}
+                    path={generatePath(path, {playbookId})}
                     exact={true}
                 >
                     <PlaybookUsage
                         playbookID={playbook.id}
                         stats={stats}
                     />
                 </Route>
-                <Route path={`${path}/outline`}>
+                <Route
+                    path={generatePath(path, {playbookId, tab: 'outline'})}
+                    exact={true}
+                >
                     <Outline
                         playbook={playbook}
                         refetch={refetch}
                     />
                 </Route>
-                <Route path={`${path}/reports`}>
+                <Route
+                    path={generatePath(path, {playbookId, tab: 'reports'})}
+                    exact={true}
+                >
                     <PlaybookKeyMetrics
                         playbookID={playbook.id}
                         playbookMetrics={playbook.metrics}