add survey question editing, breadcrumbs

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

@@ -9,6 +9,7 @@ import ErrorDetail from '@components/ErrorDetail';
 import useRequest, { useDismissableError } from '@util/useRequest';
 import SurveyList from './shared/SurveyList';
 import SurveyQuestionAdd from './shared/SurveyQuestionAdd';
+import SurveyQuestionEdit from './shared/SurveyQuestionEdit';
 
 function TemplateSurvey({ template, i18n }) {
   const [surveyEnabled, setSurveyEnabled] = useState(template.survey_enabled);
@@ -74,6 +75,9 @@ function TemplateSurvey({ template, i18n }) {
         <Route path="/templates/:templateType/:id/survey/add">
           <SurveyQuestionAdd survey={survey} updateSurvey={updateSurveySpec} />
         </Route>
+        <Route path="/templates/:templateType/:id/survey/edit/:variable">
+          <SurveyQuestionEdit survey={survey} updateSurvey={updateSurveySpec} />
+        </Route>
         <Route path="/templates/:templateType/:id/survey" exact>
           <SurveyList
             isLoading={isLoading}

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

@@ -53,6 +53,12 @@ class Templates extends Component {
         t`Completed Jobs`
       ),
       [`/templates/${template.type}/${template.id}/survey`]: i18n._(t`Survey`),
+      [`/templates/${template.type}/${template.id}/survey/add`]: i18n._(
+        t`Add Question`
+      ),
+      [`/templates/${template.type}/${template.id}/survey/edit`]: i18n._(
+        t`Edit Question`
+      ),
       [`/templates/${template.type}/${template.id}/schedules`]: i18n._(
         t`Schedules`
       ),

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
+import { Link } from 'react-router-dom';
 import {
   Button as _Button,
   DataListAction as _DataListAction,
@@ -75,13 +76,13 @@ function SurveyListItem({
         />
         <DataListItemCells
           dataListCells={[
-            <DataListCell key={question.question_name}>
-              {question.question_name}
-            </DataListCell>,
-            <DataListCell key={question.type}>{question.type}</DataListCell>,
-            <DataListCell key={question.default}>
-              {question.default}
+            <DataListCell key="name">
+              <Link to={`survey/edit/${question.variable}`}>
+                {question.question_name}
+              </Link>
             </DataListCell>,
+            <DataListCell key="type">{question.type}</DataListCell>,
+            <DataListCell key="default">{question.default}</DataListCell>,
           ]}
         />
       </DataListItemRow>

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

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import ContentLoading from '@components/ContentLoading';
+import { CardBody } from '@components/Card';
+import SurveyQuestionForm from './SurveyQuestionForm';
+
+export default function SurveyQuestionEdit({ survey, updateSurvey }) {
+  const [formError, setFormError] = useState(null);
+  const history = useHistory();
+  const match = useRouteMatch();
+
+  if (!survey) {
+    return <ContentLoading />;
+  }
+
+  const question = survey.spec.find(q => q.variable === match.params.variable);
+
+  const navigateToList = () => {
+    const index = match.url.indexOf('/edit');
+    history.push(match.url.substr(0, index));
+  };
+
+  const handleSubmit = async formData => {
+    if (
+      formData.variable !== question.variable &&
+      survey.spec.find(q => q.variable === formData.variable)
+    ) {
+      debugger;
+      setFormError(
+        new Error(`Survey already contains a question with variable named
+          “${formData.variable}”`)
+      );
+      return;
+    }
+    try {
+      const questionIndex = survey.spec.findIndex(
+        q => q.variable === match.params.variable
+      );
+      if (questionIndex === -1) {
+        throw new Error('Question not found in spec');
+      }
+      await updateSurvey([
+        ...survey.spec.slice(0, questionIndex),
+        formData,
+        ...survey.spec.slice(questionIndex + 1),
+      ]);
+      navigateToList();
+    } catch (err) {
+      setFormError(err);
+    }
+  };
+
+  return (
+    <CardBody>
+      <SurveyQuestionForm
+        question={question}
+        handleSubmit={handleSubmit}
+        handleCancel={navigateToList}
+        submitError={formError}
+      />
+    </CardBody>
+  );
+}

awx/ui_next/src/screens/Template/shared/SurveyQuestionForm.jsx

@@ -76,8 +76,8 @@ function SurveyQuestionForm({
         variable: question?.variable || '',
         min: question?.min || 0,
         max: question?.max || 1024,
-        default: question?.default,
-        choices: question?.choices,
+        default: question?.default || '',
+        choices: question?.choices || '',
         new_question: !question,
       }}
       onSubmit={handleSubmit}