Fixes navigation bug

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import {
   Button,
   DataListAction as _DataListAction,
@@ -40,6 +40,12 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
       (!template.summary_fields.inventory &&
         !template.ask_inventory_on_launch));
 
+  const location = useLocation();
+
+  if (location.pathname.startsWith('/projects')) {
+    detailUrl = `/templates/job_template/${template.id}/details`;
+  }
+
   return (
     <DataListItem aria-labelledby={labelId} id={`${template.id}`}>
       <DataListItemRow>

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { Route } from 'react-router-dom';
 
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
+import { createMemoryHistory } from 'history';
 import TemplateListItem from './TemplateListItem';
 
 describe('<TemplateListItem />', () => {
@@ -161,4 +162,88 @@ describe('<TemplateListItem />', () => {
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
+  test('clicking on template from templates list navigates properly', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/templates'],
+    });
+    const wrapper = mountWithContexts(
+      <Route
+        path="/templates"
+        component={() => (
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={{
+              id: 1,
+              name: 'Template 1',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        )}
+      />,
+      {
+        context: {
+          router: {
+            history,
+            route: {
+              location: history.location,
+              match: {
+                params: { id: 1 },
+              },
+            },
+          },
+        },
+      }
+    );
+    wrapper.find('Link').simulate('click', { button: 0 });
+    expect(history.location.pathname).toEqual(
+      '/templates/job_template/1/details'
+    );
+  });
+  test('clicking on template from project templates list navigates properly', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/projects/1/job_templates'],
+    });
+    const wrapper = mountWithContexts(
+      <Route
+        path="/projects/1/job_templates"
+        component={() => (
+          <TemplateListItem
+            isSelected={false}
+            detailUrl=""
+            template={{
+              id: 2,
+              name: 'Template 2',
+              summary_fields: {
+                user_capabilities: {
+                  edit: false,
+                },
+              },
+            }}
+          />
+        )}
+      />,
+      {
+        context: {
+          router: {
+            history,
+            route: {
+              location: history.location,
+              match: {
+                params: { id: 1 },
+              },
+            },
+          },
+        },
+      }
+    );
+    wrapper.find('Link').simulate('click', { button: 0 });
+    expect(history.location.pathname).toEqual(
+      '/templates/job_template/2/details'
+    );
+  });
 });