From bba2a264ea46f56a294422f99ec79892b4273ef9 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Thu, 2 Sep 2021 20:01:03 -0400
Subject: [PATCH 1/2] Add instance node type to associate modal.

---
 .../AssociateModal/AssociateModal.js          |  5 ++++
 .../src/components/OptionsList/OptionsList.js | 23 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/awx/ui/src/components/AssociateModal/AssociateModal.js b/awx/ui/src/components/AssociateModal/AssociateModal.js
index 5ccd6e59c8..d5236699aa 100644
--- a/awx/ui/src/components/AssociateModal/AssociateModal.js
+++ b/awx/ui/src/components/AssociateModal/AssociateModal.js
@@ -18,6 +18,10 @@ const QS_CONFIG = (order_by = 'name') =>
 
 function AssociateModal({
   header = t`Items`,
+  columns = [
+    { key: 'hostname', name: 'Name' },
+    { key: 'node_type', name: 'Node Type' },
+  ],
   title = t`Select Items`,
   onClose,
   onAssociate,
@@ -123,6 +127,7 @@ function AssociateModal({
         <OptionsList
           displayKey={displayKey}
           contentError={contentError}
+          columns={columns}
           deselectItem={handleSelect}
           header={header}
           isLoading={isLoading}
diff --git a/awx/ui/src/components/OptionsList/OptionsList.js b/awx/ui/src/components/OptionsList/OptionsList.js
index 7bcb9e5094..3f3c2a15db 100644
--- a/awx/ui/src/components/OptionsList/OptionsList.js
+++ b/awx/ui/src/components/OptionsList/OptionsList.js
@@ -23,6 +23,7 @@ const ModalList = styled.div`
 `;
 
 function OptionsList({
+  columns,
   contentError,
   deselectItem,
   displayKey,
@@ -44,6 +45,20 @@ function OptionsList({
   sortSelectedItems,
   value,
 }) {
+  const buildHeaderRow = (
+    <HeaderRow qsConfig={qsConfig}>
+      {columns?.length > 0 ? (
+        columns.map((col) => (
+          <HeaderCell
+            key={col.key}
+            sortKey={col.key}
+          >{t`${col.name}`}</HeaderCell>
+        ))
+      ) : (
+        <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+      )}
+    </HeaderRow>
+  );
   let selectionPreview = null;
   if (value.length > 0) {
     if (isSelectedDraggable) {
@@ -82,11 +97,7 @@ function OptionsList({
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
         hasContentLoading={isLoading}
-        headerRow={
-          <HeaderRow qsConfig={qsConfig}>
-            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-          </HeaderRow>
-        }
+        headerRow={buildHeaderRow}
         onRowClick={selectItem}
         renderRow={(item, index) => (
           <CheckboxListItem
@@ -95,6 +106,8 @@ function OptionsList({
             itemId={item.id}
             name={multiple ? item[displayKey] : name}
             label={item[displayKey]}
+            columns={columns}
+            item={item}
             isSelected={value.some((i) => i.id === item.id)}
             onSelect={() => selectItem(item)}
             onDeselect={() => deselectItem(item)}

From 41e837d1e2b61e208892c5379c502f48344cd75c Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Fri, 3 Sep 2021 12:36:04 -0400
Subject: [PATCH 2/2] Properly mark strings for translation.

---
 awx/ui/src/components/AssociateModal/AssociateModal.js | 4 ++--
 awx/ui/src/components/OptionsList/OptionsList.js       | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/awx/ui/src/components/AssociateModal/AssociateModal.js b/awx/ui/src/components/AssociateModal/AssociateModal.js
index d5236699aa..abfc2293ac 100644
--- a/awx/ui/src/components/AssociateModal/AssociateModal.js
+++ b/awx/ui/src/components/AssociateModal/AssociateModal.js
@@ -19,8 +19,8 @@ const QS_CONFIG = (order_by = 'name') =>
 function AssociateModal({
   header = t`Items`,
   columns = [
-    { key: 'hostname', name: 'Name' },
-    { key: 'node_type', name: 'Node Type' },
+    { key: 'hostname', name: t`Name` },
+    { key: 'node_type', name: t`Node Type` },
   ],
   title = t`Select Items`,
   onClose,
diff --git a/awx/ui/src/components/OptionsList/OptionsList.js b/awx/ui/src/components/OptionsList/OptionsList.js
index 3f3c2a15db..bd9d4459c3 100644
--- a/awx/ui/src/components/OptionsList/OptionsList.js
+++ b/awx/ui/src/components/OptionsList/OptionsList.js
@@ -49,10 +49,9 @@ function OptionsList({
     <HeaderRow qsConfig={qsConfig}>
       {columns?.length > 0 ? (
         columns.map((col) => (
-          <HeaderCell
-            key={col.key}
-            sortKey={col.key}
-          >{t`${col.name}`}</HeaderCell>
+          <HeaderCell key={col.key} sortKey={col.key}>
+            {col.name}
+          </HeaderCell>
         ))
       ) : (
         <HeaderCell sortKey="name">{t`Name`}</HeaderCell>