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] 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)}