From 45af71d85cb29c0fc4f3ef26e49bd4906172cb1a Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Mon, 22 Feb 2021 16:19:21 -0500
Subject: [PATCH] Add name field

---
 .../OrganizationExecEnvList.jsx                     | 13 +++++++++++--
 .../OrganizationExecEnvListItem.jsx                 | 12 +++++++++---
 .../OrganizationExecEnvListItem.test.jsx            |  1 +
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx
index 48caaff8028e..9f2c4ae8171e 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx
@@ -15,7 +15,7 @@ import OrganizationExecEnvListItem from './OrganizationExecEnvListItem';
 const QS_CONFIG = getQSConfig('organizations', {
   page: 1,
   page_size: 20,
-  order_by: 'image',
+  order_by: 'name',
 });
 
 function OrganizationExecEnvList({ i18n, organization }) {
@@ -79,10 +79,15 @@ function OrganizationExecEnvList({ i18n, organization }) {
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           toolbarSearchColumns={[
+            {
+              name: i18n._(t`Name`),
+              key: 'name__icontains',
+              isDefault: true,
+            },
             {
               name: i18n._(t`Image`),
               key: 'image__icontains',
-              isDefault: true,
+              isDefault: false,
             },
             {
               name: i18n._(t`Created By (Username)`),
@@ -94,6 +99,10 @@ function OrganizationExecEnvList({ i18n, organization }) {
             },
           ]}
           toolbarSortColumns={[
+            {
+              name: i18n._(t`Name`),
+              key: 'name',
+            },
             {
               name: i18n._(t`Image`),
               key: 'image',
diff --git a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx
index 1998e8c783a6..0d2715d7a65e 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx
@@ -29,13 +29,19 @@ function OrganizationExecEnvListItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell
-              key="image"
-              aria-label={i18n._(t`Execution environment image`)}
+              key="name"
+              aria-label={i18n._(t`Execution environment name`)}
             >
               <Link to={`${detailUrl}`}>
-                <b>{executionEnvironment.image}</b>
+                <b>{executionEnvironment.name}</b>
               </Link>
             </DataListCell>,
+            <DataListCell
+              key="image"
+              aria-label={i18n._(t`Execution environment image`)}
+            >
+              {executionEnvironment.image}
+            </DataListCell>,
           ]}
         />
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx
index 9e4a2492aaf0..dd722b5a30e8 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx
@@ -10,6 +10,7 @@ describe('<OrganizationExecEnvListItem/>', () => {
   const executionEnvironment = {
     id: 1,
     image: 'https://registry.com/r/image/manifest',
+    name: 'foo',
     organization: 1,
     credential: null,
   };