Fix issue with broken survey question edit breadcrumb by altering the url scheme

awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx

@@ -94,7 +94,7 @@ function SurveyListItem({
           dataListCells={[
             <DataListCell key="name">
               <>
-                <Link to={`survey/edit/${question.variable}`}>
+                <Link to={`survey/edit?question_variable=${question.variable}`}>
                   {question.question_name}
                 </Link>
                 {question.required && (

awx/ui_next/src/screens/Template/Survey/SurveyQuestionEdit.jsx

@@ -1,5 +1,10 @@
 import React, { useState } from 'react';
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import {
+  Redirect,
+  useHistory,
+  useLocation,
+  useRouteMatch,
+} from 'react-router-dom';
 import ContentLoading from '../../../components/ContentLoading';
 import { CardBody } from '../../../components/Card';
 import SurveyQuestionForm from './SurveyQuestionForm';
@@ -8,12 +13,23 @@ export default function SurveyQuestionEdit({ survey, updateSurvey }) {
   const [formError, setFormError] = useState(null);
   const history = useHistory();
   const match = useRouteMatch();
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  const questionVariable = queryParams.get('question_variable');
 
   if (!survey) {
     return <ContentLoading />;
   }
 
-  const question = survey.spec.find(q => q.variable === match.params.variable);
+  const question = survey.spec.find(q => q.variable === questionVariable);
+
+  if (!question) {
+    return (
+      <Redirect
+        to={`/templates/${match.params.templateType}/${match.params.id}/survey`}
+      />
+    );
+  }
 
   const navigateToList = () => {
     const index = match.url.indexOf('/edit');
@@ -34,7 +50,7 @@ export default function SurveyQuestionEdit({ survey, updateSurvey }) {
         return;
       }
       const questionIndex = survey.spec.findIndex(
-        q => q.variable === match.params.variable
+        q => q.variable === questionVariable
       );
       if (questionIndex === -1) {
         throw new Error('Question not found in spec');

awx/ui_next/src/screens/Template/Survey/SurveyQuestionEdit.test.jsx

@@ -33,15 +33,18 @@ describe('<SurveyQuestionEdit />', () => {
   let history;
   let wrapper;
 
+  describe('with question_variable present', () => {
     beforeEach(() => {
       history = createMemoryHistory({
-      initialEntries: ['/templates/job_templates/1/survey/edit/foo'],
+        initialEntries: [
+          '/templates/job_templates/1/survey/edit?question_variable=foo',
+        ],
       });
       updateSurvey = jest.fn();
       act(() => {
         wrapper = mountWithContexts(
           <Switch>
-          <Route path="/templates/:templateType/:id/survey/edit/:variable">
+            <Route path="/templates/:templateType/:id/survey/edit">
               <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
             </Route>
           </Switch>,
@@ -52,6 +55,10 @@ describe('<SurveyQuestionEdit />', () => {
       });
     });
 
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
     test('should render form', () => {
       expect(wrapper.find('SurveyQuestionForm')).toHaveLength(1);
     });
@@ -93,7 +100,9 @@ describe('<SurveyQuestionEdit />', () => {
       });
       wrapper.update();
 
-    expect(wrapper.find('SurveyQuestionForm').prop('submitError')).toEqual(err);
+      expect(wrapper.find('SurveyQuestionForm').prop('submitError')).toEqual(
+        err
+      );
       global.console.error = realConsoleError;
     });
 
@@ -117,3 +126,31 @@ describe('<SurveyQuestionEdit />', () => {
       global.console.error = realConsoleError;
     });
   });
+
+  describe('without question_variable present', () => {
+    test('should redirect back to the survey list', () => {
+      history = createMemoryHistory({
+        initialEntries: ['/templates/job_templates/1/survey/edit'],
+      });
+      updateSurvey = jest.fn();
+      act(() => {
+        wrapper = mountWithContexts(
+          <Switch>
+            <Route path="/templates/:templateType/:id/survey/edit">
+              <SurveyQuestionEdit survey={survey} updateSurvey={updateSurvey} />
+            </Route>
+          </Switch>,
+          {
+            context: { router: { history } },
+          }
+        );
+      });
+
+      expect(history.location.pathname).toEqual(
+        '/templates/job_templates/1/survey'
+      );
+
+      wrapper.unmount();
+    });
+  });
+});

awx/ui_next/src/screens/Template/TemplateSurvey.jsx

@@ -100,7 +100,7 @@ function TemplateSurvey({ template, canEdit, i18n }) {
           </Route>
         )}
         {canEdit && (
-          <Route path="/templates/:templateType/:id/survey/edit/:variable">
+          <Route path="/templates/:templateType/:id/survey/edit">
             <SurveyQuestionEdit
               survey={survey}
               updateSurvey={updateSurveySpec}