Change Options to Enabled Options in various details views

awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
-
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-
-import { Chip, List, ListItem } from '@patternfly/react-core';
+import {
+  Chip,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+} from '@patternfly/react-core';
 import { Detail, DeletedDetail } from '../DetailList';
 import { VariablesDetail } from '../CodeEditor';
 import CredentialChip from '../CredentialChip';
@@ -44,14 +48,28 @@ function PromptInventorySourceDetail({ resource }) {
     update_on_project_update
   ) {
     optionsList = (
-      <List>
-        {overwrite && <ListItem>{t`Overwrite`}</ListItem>}
-        {overwrite_vars && <ListItem>{t`Overwrite Variables`}</ListItem>}
-        {update_on_launch && <ListItem>{t`Update on Launch`}</ListItem>}
-        {update_on_project_update && (
-          <ListItem>{t`Update on Project Update`}</ListItem>
+      <TextList component={TextListVariants.ul}>
+        {overwrite && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Overwrite local groups and hosts from remote inventory source`}
+          </TextListItem>
         )}
-      </List>
+        {overwrite_vars && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Overwrite local variables from remote inventory source`}
+          </TextListItem>
+        )}
+        {update_on_launch && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Update on launch`}
+          </TextListItem>
+        )}
+        {update_on_project_update && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Update on project update`}
+          </TextListItem>
+        )}
+      </TextList>
     );
   }
 
@@ -162,7 +180,9 @@ function PromptInventorySourceDetail({ resource }) {
           }
         />
       )}
-      {optionsList && <Detail label={t`Options`} value={optionsList} />}
+      {optionsList && (
+        <Detail fullWidth label={t`Enabled Options`} value={optionsList} />
+      )}
       {source_vars && (
         <VariablesDetail
           label={t`Source Variables`}

awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.test.jsx

@@ -60,12 +60,14 @@ describe('PromptInventorySourceDetail', () => {
     );
     expect(
       wrapper
-        .find('Detail[label="Options"]')
+        .find('Detail[label="Enabled Options"]')
         .containsAllMatchingElements([
-          <li>Overwrite</li>,
-          <li>Overwrite Variables</li>,
-          <li>Update on Launch</li>,
-          <li>Update on Project Update</li>,
+          <li>
+            Overwrite local groups and hosts from remote inventory source
+          </li>,
+          <li>Overwrite local variables from remote inventory source</li>,
+          <li>Update on launch</li>,
+          <li>Update on project update</li>,
         ])
     ).toEqual(true);
   });

awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
-
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-
-import { Chip, List, ListItem } from '@patternfly/react-core';
+import {
+  Chip,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+} from '@patternfly/react-core';
 import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 import Sparkline from '../Sparkline';
@@ -51,19 +55,37 @@ function PromptJobTemplateDetail({ resource }) {
     become_enabled ||
     host_config_key ||
     allow_simultaneous ||
-    use_fact_cache
+    use_fact_cache ||
+    webhook_service
   ) {
     optionsList = (
-      <List>
+      <TextList component={TextListVariants.ul}>
         {become_enabled && (
-          <ListItem>{t`Enable Privilege Escalation`}</ListItem>
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Privilege Escalation`}
+          </TextListItem>
         )}
         {host_config_key && (
-          <ListItem>{t`Allow Provisioning Callbacks`}</ListItem>
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Provisioning Callbacks`}
+          </TextListItem>
         )}
-        {allow_simultaneous && <ListItem>{t`Enable Concurrent Jobs`}</ListItem>}
-        {use_fact_cache && <ListItem>{t`Use Fact Storage`}</ListItem>}
-      </List>
+        {allow_simultaneous && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Concurrent Jobs`}
+          </TextListItem>
+        )}
+        {use_fact_cache && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Fact Storage`}
+          </TextListItem>
+        )}
+        {webhook_service && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Webhooks`}
+          </TextListItem>
+        )}
+      </TextList>
     );
   }
 
@@ -164,7 +186,7 @@ function PromptJobTemplateDetail({ resource }) {
           }
         />
       )}
-      {optionsList && <Detail label={t`Options`} value={optionsList} />}
+      {optionsList && <Detail label={t`Enabled Options`} value={optionsList} />}
       {summary_fields?.credentials?.length > 0 && (
         <Detail
           fullWidth

awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.test.jsx

@@ -96,12 +96,13 @@ describe('PromptJobTemplateDetail', () => {
     ).toEqual(true);
     expect(
       wrapper
-        .find('Detail[label="Options"]')
+        .find('Detail[label="Enabled Options"]')
         .containsAllMatchingElements([
-          <li>Enable Privilege Escalation</li>,
-          <li>Allow Provisioning Callbacks</li>,
-          <li>Enable Concurrent Jobs</li>,
-          <li>Use Fact Storage</li>,
+          <li>Privilege Escalation</li>,
+          <li>Provisioning Callbacks</li>,
+          <li>Concurrent Jobs</li>,
+          <li>Fact Storage</li>,
+          <li>Webhooks</li>,
         ])
     ).toEqual(true);
     expect(wrapper.find('VariablesDetail').prop('value')).toEqual(

awx/ui_next/src/components/PromptDetail/PromptProjectDetail.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
-
 import { t } from '@lingui/macro';
-import { List, ListItem } from '@patternfly/react-core';
+import {
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+} from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { Config } from '../../contexts/Config';
-
 import { Detail, DeletedDetail } from '../DetailList';
 import CredentialChip from '../CredentialChip';
 import { toTitleCase } from '../../util/strings';
@@ -36,17 +39,33 @@ function PromptProjectDetail({ resource }) {
     allow_override
   ) {
     optionsList = (
-      <List>
-        {scm_clean && <ListItem>{t`Clean`}</ListItem>}
-        {scm_delete_on_update && <ListItem>{t`Delete on Update`}</ListItem>}
+      <TextList component={TextListVariants.ul}>
+        {scm_clean && (
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Discard local changes before syncing`}</TextListItem>
+        )}
+        {scm_delete_on_update && (
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Delete the project before syncing`}</TextListItem>
+        )}
         {scm_track_submodules && (
-          <ListItem>{t`Track submodules latest commit on branch`}</ListItem>
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Track submodules latest commit on branch`}</TextListItem>
         )}
         {scm_update_on_launch && (
-          <ListItem>{t`Update Revision on Launch`}</ListItem>
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Update revision on job launch`}</TextListItem>
         )}
-        {allow_override && <ListItem>{t`Allow Branch Override`}</ListItem>}
-      </List>
+        {allow_override && (
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Allow branch override`}</TextListItem>
+        )}
+      </TextList>
     );
   }
 
@@ -90,7 +109,7 @@ function PromptProjectDetail({ resource }) {
           }
         />
       )}
-      {optionsList && <Detail label={t`Options`} value={optionsList} />}
+      {optionsList && <Detail label={t`Enabled Options`} value={optionsList} />}
       <Detail
         label={t`Cache Timeout`}
         value={`${scm_update_cache_timeout} ${t`Seconds`}`}

awx/ui_next/src/components/PromptDetail/PromptProjectDetail.test.jsx

@@ -16,7 +16,9 @@ describe('PromptProjectDetail', () => {
 
   beforeAll(() => {
     wrapper = mountWithContexts(
-      <PromptProjectDetail resource={mockProject} />,
+      <PromptProjectDetail
+        resource={{ ...mockProject, scm_track_submodules: true }}
+      />,
       {
         context: { config },
       }
@@ -54,12 +56,13 @@ describe('PromptProjectDetail', () => {
     );
     expect(
       wrapper
-        .find('Detail[label="Options"]')
+        .find('Detail[label="Enabled Options"]')
         .containsAllMatchingElements([
-          <li>Clean</li>,
-          <li>Delete on Update</li>,
-          <li>Update Revision on Launch</li>,
-          <li>Allow Branch Override</li>,
+          <li>Discard local changes before syncing</li>,
+          <li>Delete the project before syncing</li>,
+          <li>Track submodules latest commit on branch</li>,
+          <li>Update revision on job launch</li>,
+          <li>Allow branch override</li>,
         ])
     ).toEqual(true);
   });

awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
-
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-
-import { Chip, List, ListItem } from '@patternfly/react-core';
+import {
+  Chip,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+} from '@patternfly/react-core';
 import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 import { Detail } from '../DetailList';
@@ -26,10 +30,18 @@ function PromptWFJobTemplateDetail({ resource }) {
   let optionsList = '';
   if (allow_simultaneous || webhook_service) {
     optionsList = (
-      <List>
-        {allow_simultaneous && <ListItem>{t`Enable Concurrent Jobs`}</ListItem>}
-        {webhook_service && <ListItem>{t`Enable Webhooks`}</ListItem>}
-      </List>
+      <TextList component={TextListVariants.ul}>
+        {allow_simultaneous && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Concurrent Jobs`}
+          </TextListItem>
+        )}
+        {webhook_service && (
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Webhooks`}
+          </TextListItem>
+        )}
+      </TextList>
     );
   }
 
@@ -82,7 +94,7 @@ function PromptWFJobTemplateDetail({ resource }) {
           value={`${window.location.origin}${related.webhook_receiver}`}
         />
       )}
-      {optionsList && <Detail label={t`Options`} value={optionsList} />}
+      {optionsList && <Detail label={t`Enabled Options`} value={optionsList} />}
       {summary_fields?.webhook_credential && (
         <Detail
           fullWidth

awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.test.jsx

@@ -38,10 +38,10 @@ describe('PromptWFJobTemplateDetail', () => {
     );
     expect(
       wrapper
-        .find('Detail[label="Options"]')
+        .find('Detail[label="Enabled Options"]')
         .containsAllMatchingElements([
-          <li>Enable Concurrent Jobs</li>,
-          <li>Enable Webhooks</li>,
+          <li>Concurrent Jobs</li>,
+          <li>Webhooks</li>,
         ])
     ).toEqual(true);
     expect(

awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx

@@ -1,9 +1,14 @@
 import React, { Fragment, useEffect, useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import { Button, List, ListItem } from '@patternfly/react-core';
+import {
+  Button,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+} from '@patternfly/react-core';
 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
 import ContentError from '../../../components/ContentError';
@@ -134,15 +139,7 @@ function CredentialDetail({ credential }) {
     }
 
     if (type === 'boolean') {
-      return (
-        <Detail
-          dataCy={`credential-${id}-detail`}
-          id={`credential-${id}-detail`}
-          key={id}
-          label={t`Options`}
-          value={<List>{inputs[id] && <ListItem>{label}</ListItem>}</List>}
-        />
-      );
+      return null;
     }
 
     if (inputs[id] === '$encrypted$') {
@@ -189,6 +186,10 @@ function CredentialDetail({ credential }) {
     credential
   );
 
+  const enabledBooleanFields = fields.filter(
+    ({ id, type }) => type === 'boolean' && inputs[id]
+  );
+
   if (hasContentLoading) {
     return <ContentLoading />;
   }
@@ -255,6 +256,20 @@ function CredentialDetail({ credential }) {
           date={modified}
           user={modified_by}
         />
+        {enabledBooleanFields.length > 0 && (
+          <Detail
+            label={t`Enabled Options`}
+            value={
+              <TextList component={TextListVariants.ul}>
+                {enabledBooleanFields.map(({ id, label }) => (
+                  <TextListItem key={id} component={TextListItemVariants.li}>
+                    {label}
+                  </TextListItem>
+                ))}
+              </TextList>
+            }
+          />
+        )}
       </DetailList>
       {Object.keys(inputSources).length > 0 && (
         <PluginFieldText>

awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx

@@ -111,7 +111,7 @@ describe('<CredentialDetail />', () => {
       'Privilege Escalation Password',
       'Prompt on launch'
     );
-    expect(wrapper.find(`Detail[label="Options"] ListItem`).text()).toEqual(
+    expect(wrapper.find(`Detail[label="Enabled Options"] li`).text()).toEqual(
       'Authorize'
     );
   });

awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx

@@ -1,9 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-
 import { t } from '@lingui/macro';
-
-import { Button, List, ListItem } from '@patternfly/react-core';
+import {
+  Button,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+} from '@patternfly/react-core';
 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
 import { VariablesDetail } from '../../../components/CodeEditor';
@@ -19,7 +23,6 @@ import {
   UserDateDetail,
 } from '../../../components/DetailList';
 import ErrorDetail from '../../../components/ErrorDetail';
-import Popover from '../../../components/Popover';
 import useRequest from '../../../util/useRequest';
 import { InventorySourcesAPI } from '../../../api';
 import { relatedResourceDeleteRequests } from '../../../util/getRelatedResourceDeleteDetails';
@@ -112,71 +115,28 @@ function InventorySourceDetail({ inventorySource }) {
     update_on_project_update
   ) {
     optionsList = (
-      <List>
+      <TextList component={TextListVariants.ul}>
         {overwrite && (
-          <ListItem>
-            {t`Overwrite`}
-            <Popover
-              content={
-                <>
-                  {t`If checked, any hosts and groups that were
-          previously present on the external source but are now removed
-          will be removed from the inventory. Hosts and groups
-          that were not managed by the inventory source will be promoted
-          to the next manually created group or if there is no manually
-          created group to promote them into, they will be left in the "all"
-          default group for the inventory.`}
-                  <br />
-                  <br />
-                  {t`When not checked, local child
-          hosts and groups not found on the external source will remain
-          untouched by the inventory update process.`}
-                </>
-              }
-            />
-          </ListItem>
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Overwrite local groups and hosts from remote inventory source`}
+          </TextListItem>
         )}
         {overwrite_vars && (
-          <ListItem>
-            {t`Overwrite variables`}
-            <Popover
-              content={
-                <>
-                  {t`If checked, all variables for child groups
-                  and hosts will be removed and replaced by those found
-                  on the external source.`}
-                  <br />
-                  <br />
-                  {t`When not checked, a merge will be performed,
-                  combining local variables with those found on the
-                  external source.`}
-                </>
-              }
-            />
-          </ListItem>
+          <TextListItem component={TextListItemVariants.li}>
+            {t`Overwrite local variables from remote inventory source`}
+          </TextListItem>
         )}
         {update_on_launch && (
-          <ListItem>
+          <TextListItem component={TextListItemVariants.li}>
             {t`Update on launch`}
-            <Popover
-              content={t`Each time a job runs using this inventory,
-        refresh the inventory from the selected source before
-        executing job tasks.`}
-            />
-          </ListItem>
+          </TextListItem>
         )}
         {update_on_project_update && (
-          <ListItem>
+          <TextListItem component={TextListItemVariants.li}>
             {t`Update on project update`}
-            <Popover
-              content={t`After every project update where the SCM revision
-        changes, refresh the inventory from the selected source
-        before executing job tasks. This is intended for static content,
-        like the Ansible inventory .ini file format.`}
-            />
-          </ListItem>
+          </TextListItem>
         )}
-      </List>
+      </TextList>
     );
   }
 
@@ -242,7 +202,7 @@ function InventorySourceDetail({ inventorySource }) {
           />
         )}
         {optionsList && (
-          <Detail fullWidth label={t`Options`} value={optionsList} />
+          <Detail fullWidth label={t`Enabled Options`} value={optionsList} />
         )}
         {source_vars && (
           <VariablesDetail

awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.test.jsx

@@ -85,10 +85,10 @@ describe('InventorySourceDetail', () => {
     expect(wrapper.find('VariablesDetail').prop('value')).toEqual(
       '---\nfoo: bar'
     );
-    wrapper.find('Detail[label="Options"] li').forEach(option => {
+    wrapper.find('Detail[label="Enabled Options"] li').forEach(option => {
       expect([
-        'Overwrite',
-        'Overwrite variables',
+        'Overwrite local groups and hosts from remote inventory source',
+        'Overwrite local variables from remote inventory source',
         'Update on launch',
         'Update on project update',
       ]).toContain(option.text());

awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx

@@ -5,8 +5,10 @@ import styled from 'styled-components';
 import {
   Button,
   ClipboardCopy,
-  List,
-  ListItem,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
   Tooltip,
 } from '@patternfly/react-core';
 import { Project } from '../../../types';
@@ -78,17 +80,33 @@ function ProjectDetail({ project }) {
     allow_override
   ) {
     optionsList = (
-      <List>
-        {scm_clean && <ListItem>{t`Clean`}</ListItem>}
-        {scm_delete_on_update && <ListItem>{t`Delete on Update`}</ListItem>}
+      <TextList component={TextListVariants.ul}>
+        {scm_clean && (
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Discard local changes before syncing`}</TextListItem>
+        )}
+        {scm_delete_on_update && (
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Delete the project before syncing`}</TextListItem>
+        )}
         {scm_track_submodules && (
-          <ListItem>{t`Track submodules latest commit on branch`}</ListItem>
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Track submodules latest commit on branch`}</TextListItem>
         )}
         {scm_update_on_launch && (
-          <ListItem>{t`Update Revision on Launch`}</ListItem>
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Update revision on job launch`}</TextListItem>
         )}
-        {allow_override && <ListItem>{t`Allow Branch Override`}</ListItem>}
-      </List>
+        {allow_override && (
+          <TextListItem
+            component={TextListItemVariants.li}
+          >{t`Allow branch override`}</TextListItem>
+        )}
+      </TextList>
     );
   }
 
@@ -196,7 +214,6 @@ function ProjectDetail({ project }) {
             }
           />
         )}
-        {optionsList && <Detail label={t`Options`} value={optionsList} />}
         <Detail
           label={t`Cache Timeout`}
           value={`${scm_update_cache_timeout} ${t`Seconds`}`}
@@ -212,7 +229,6 @@ function ProjectDetail({ project }) {
           )}
         </Config>
         <Detail label={t`Playbook Directory`} value={local_path} />
-
         <UserDateDetail
           label={t`Created`}
           date={created}
@@ -223,6 +239,9 @@ function ProjectDetail({ project }) {
           date={modified}
           user={summary_fields.modified_by}
         />
+        {optionsList && (
+          <Detail fullWidth label={t`Enabled Options`} value={optionsList} />
+        )}
       </DetailList>
       <CardActionsRow>
         {summary_fields.user_capabilities?.edit && (

awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.test.jsx

@@ -70,7 +70,7 @@ describe('<ProjectDetail />', () => {
     scm_refspec: 'refs/remotes/*',
     scm_clean: true,
     scm_delete_on_update: true,
-    scm_track_submodules: false,
+    scm_track_submodules: true,
     credential: 100,
     status: 'successful',
     organization: 10,
@@ -127,12 +127,13 @@ describe('<ProjectDetail />', () => {
     );
     expect(
       wrapper
-        .find('Detail[label="Options"]')
+        .find('Detail[label="Enabled Options"]')
         .containsAllMatchingElements([
-          <li>Clean</li>,
-          <li>Delete on Update</li>,
-          <li>Update Revision on Launch</li>,
-          <li>Allow Branch Override</li>,
+          <li>Discard local changes before syncing</li>,
+          <li>Delete the project before syncing</li>,
+          <li>Track submodules latest commit on branch</li>,
+          <li>Update revision on job launch</li>,
+          <li>Allow branch override</li>,
         ])
     ).toEqual(true);
   });
@@ -151,7 +152,7 @@ describe('<ProjectDetail />', () => {
     const wrapper = mountWithContexts(
       <ProjectDetail project={{ ...mockProject, ...mockOptions }} />
     );
-    expect(wrapper.find('Detail[label="Options"]').length).toBe(0);
+    expect(wrapper.find('Detail[label="Enabled Options"]').length).toBe(0);
   });
 
   test('should have proper number of delete detail requests', () => {

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

@@ -115,28 +115,37 @@ function JobTemplateDetail({ template }) {
   );
   const generateCallBackUrl = `${window.location.origin + url}callback/`;
   const renderOptionsField =
-    become_enabled || host_config_key || allow_simultaneous || use_fact_cache;
+    become_enabled ||
+    host_config_key ||
+    allow_simultaneous ||
+    use_fact_cache ||
+    webhook_service;
 
   const renderOptions = (
     <TextList component={TextListVariants.ul}>
       {become_enabled && (
         <TextListItem component={TextListItemVariants.li}>
-          {t`Enable Privilege Escalation`}
+          {t`Privilege Escalation`}
         </TextListItem>
       )}
       {host_config_key && (
         <TextListItem component={TextListItemVariants.li}>
-          {t`Allow Provisioning Callbacks`}
+          {t`Provisioning Callbacks`}
         </TextListItem>
       )}
       {allow_simultaneous && (
         <TextListItem component={TextListItemVariants.li}>
-          {t`Enable Concurrent Jobs`}
+          {t`Concurrent Jobs`}
         </TextListItem>
       )}
       {use_fact_cache && (
         <TextListItem component={TextListItemVariants.li}>
-          {t`Use Fact Storage`}
+          {t`Fact Storage`}
+        </TextListItem>
+      )}
+      {webhook_service && (
+        <TextListItem component={TextListItemVariants.li}>
+          {t`Webhooks`}
         </TextListItem>
       )}
     </TextList>
@@ -258,9 +267,6 @@ function JobTemplateDetail({ template }) {
             }
           />
         )}
-        {renderOptionsField && (
-          <Detail label={t`Options`} value={renderOptions} />
-        )}
         <UserDateDetail
           label={t`Created`}
           date={created}
@@ -271,6 +277,9 @@ function JobTemplateDetail({ template }) {
           date={modified}
           user={summary_fields.modified_by}
         />
+        {renderOptionsField && (
+          <Detail fullWidth label={t`Enabled Options`} value={renderOptions} />
+        )}
         {summary_fields.credentials && summary_fields.credentials.length > 0 && (
           <Detail
             fullWidth

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

@@ -58,12 +58,12 @@ function WorkflowJobTemplateDetail({ template }) {
     <TextList component={TextListVariants.ul}>
       {template.allow_simultaneous && (
         <TextListItem component={TextListItemVariants.li}>
-          {t`- Enable Concurrent Jobs`}
+          {t`Concurrent Jobs`}
         </TextListItem>
       )}
       {template.webhook_service && (
         <TextListItem component={TextListItemVariants.li}>
-          {t`- Enable Webhooks`}
+          {t`Webhooks`}
         </TextListItem>
       )}
     </TextList>
@@ -186,9 +186,6 @@ function WorkflowJobTemplateDetail({ template }) {
             }
           />
         )}
-        {renderOptionsField && (
-          <Detail label={t`Options`} value={renderOptions} />
-        )}
         <UserDateDetail
           label={t`Created`}
           date={created}
@@ -199,6 +196,9 @@ function WorkflowJobTemplateDetail({ template }) {
           date={modified}
           user={summary_fields.modified_by}
         />
+        {renderOptionsField && (
+          <Detail fullWidth label={t`Enabled Options`} value={renderOptions} />
+        )}
         {summary_fields.labels?.results?.length > 0 && (
           <Detail
             fullWidth