Fixes contentLoading issue in PR and enables Launch on JT List

awx/ui_next/src/api/models/WorkflowJobTemplates.js

@@ -51,7 +51,6 @@ class WorkflowJobTemplates extends Base {
       params
     });
   }
-
 }
 
 export default WorkflowJobTemplates;

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

@@ -11,6 +11,7 @@ import FullPage from '@components/FullPage';
 import JobList from '@components/JobList';
 import RoutedTabs from '@components/RoutedTabs';
 import ScheduleList from '@components/ScheduleList';
+import ContentLoading from '@components/ContentLoading';
 import { WorkflowJobTemplatesAPI, CredentialsAPI } from '@api';
 import WorkflowJobTemplateDetail from './WorkflowJobTemplateDetail';
 import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
@@ -51,12 +52,14 @@ class WorkflowJobTemplate extends Component {
         const {
           data: { webhook_key },
         } = await WorkflowJobTemplatesAPI.readWebhookKey(id);
-        this.setState({ webHookKey: webhook_key });
+        this.setState({ webhook_key });
       }
       if (data?.summary_fields?.webhook_credential) {
         const {
           data: {
-            summary_fields: { credential_type: name },
+            summary_fields: {
+              credential_type: { name },
+            },
           },
         } = await CredentialsAPI.readDetail(
           data.summary_fields.webhook_credential.id
@@ -84,7 +87,7 @@ class WorkflowJobTemplate extends Component {
       contentError,
       hasContentLoading,
       template,
-      webHookKey,
+      webhook_key,
     } = this.state;
 
     const tabsArray = [
@@ -116,7 +119,9 @@ class WorkflowJobTemplate extends Component {
     if (location.pathname.endsWith('edit')) {
       cardHeader = null;
     }
-
+    if (hasContentLoading) {
+      return <ContentLoading />;
+    }
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
@@ -151,7 +156,7 @@ class WorkflowJobTemplate extends Component {
                 render={() => (
                   <WorkflowJobTemplateDetail
                     template={template}
-                    webHookKey={webHookKey}
+                    webhook_key={webhook_key}
                   />
                 )}
               />
@@ -163,7 +168,7 @@ class WorkflowJobTemplate extends Component {
                 render={() => (
                   <WorkflowJobTemplateEdit
                     template={template}
-                    webHookKey={webHookKey}
+                    webhook_key={webhook_key}
                   />
                 )}
               />
@@ -200,7 +205,7 @@ class WorkflowJobTemplate extends Component {
                 />
               </Route>
             )}
-            {template && (
+            {template.id && (
               <Route
                 path="/templates/:templateType/:id/schedules"
                 render={() => (

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

@@ -25,7 +25,7 @@ import LaunchButton from '@components/LaunchButton';
 import Sparkline from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 
-function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
+function WorkflowJobTemplateDetail({ template, i18n, webhook_key }) {
   const {
     id,
     ask_inventory_on_launch,
@@ -143,7 +143,7 @@ function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
             value={`${urlOrigin}${template.related.webhook_receiver}`}
           />
         )}
-        <Detail label={i18n._(t`Webhook Key`)} value={webHookKey} />
+        <Detail label={i18n._(t`Webhook Key`)} value={webhook_key} />
         {webhook_credential && (
           <Detail
             fullWidth

awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.test.jsx

@@ -51,7 +51,7 @@ describe('<WorkflowJobTemplateDetail/>', () => {
           component={() => (
             <WorkflowJobTemplateDetail
               template={template}
-              webHookKey="Foo webhook key"
+              webhook_key="Foo webhook key"
               hasContentLoading={false}
               onSetContentLoading={() => {}}
             />

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

@@ -4,14 +4,9 @@ import { useHistory } from 'react-router-dom';
 import { CardBody } from '@components/Card';
 import { getAddedAndRemoved } from '@util/lists';
 import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
-import ContentLoading from '@components/ContentLoading';
 import { WorkflowJobTemplateForm } from '../shared';
 
-function WorkflowJobTemplateEdit({
-  template,
-  hasTemplateLoading,
-  webhook_key,
-}) {
+function WorkflowJobTemplateEdit({ template, webhook_key }) {
   const [formSubmitError, setFormSubmitError] = useState();
   const history = useHistory();
 
@@ -65,9 +60,6 @@ function WorkflowJobTemplateEdit({
     history.push(`/templates`);
   };
 
-  if (hasTemplateLoading) {
-    return <ContentLoading />;
-  }
   return (
     <>
       <CardBody>