From 1fbcd7e4346bd82fcb7034fdc7374c9059882330 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Thu, 8 Oct 2020 09:06:50 -0400
Subject: [PATCH] Update AddDropDownButton to show down caret

Update AddDropDownButton to show down caret

See: https://github.com/ansible/awx/issues/7721
---
 .../components/AddDropDownButton/AddDropDownButton.jsx |  7 ++++++-
 .../components/PaginatedDataList/ToolbarAddButton.jsx  | 10 +++++++++-
 .../PaginatedDataList/ToolbarAddButton.test.jsx        |  9 +++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.jsx b/awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.jsx
index ca4c4a40b6..f48e554317 100644
--- a/awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.jsx
+++ b/awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.jsx
@@ -48,7 +48,12 @@ function AddDropDownButton({ dropdownItems, i18n }) {
         isPlain
         isOpen={isOpen}
         position={DropdownPosition.right}
-        toggle={<ToolbarAddButton onClick={() => setIsOpen(!isOpen)} />}
+        toggle={
+          <ToolbarAddButton
+            showToggleIndicator
+            onClick={() => setIsOpen(!isOpen)}
+          />
+        }
         dropdownItems={dropdownItems.map(item => (
           <Link
             className="pf-c-dropdown__menu-item"
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
index 22f67c5e94..b43f38a886 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { string, func } from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
+import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { useKebabifiedMenu } from '../../contexts/Kebabified';
@@ -12,6 +13,7 @@ function ToolbarAddButton({
   i18n,
   isDisabled,
   defaultLabel = i18n._(t`Add`),
+  showToggleIndicator,
 }) {
   const { isKebabified } = useKebabifiedMenu();
 
@@ -50,7 +52,13 @@ function ToolbarAddButton({
     );
   }
   return (
-    <Button variant="primary" aria-label={defaultLabel} onClick={onClick}>
+    <Button
+      icon={showToggleIndicator ? <CaretDownIcon /> : null}
+      iconPosition={showToggleIndicator ? 'right' : null}
+      variant="primary"
+      aria-label={defaultLabel}
+      onClick={onClick}
+    >
       {defaultLabel}
     </Button>
   );
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.test.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.test.jsx
index ad5bde5bd4..682ce46177 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.test.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.test.jsx
@@ -18,4 +18,13 @@ describe('<ToolbarAddButton />', () => {
     expect(link).toHaveLength(1);
     expect(link.prop('to')).toBe('/foo');
   });
+
+  test('should render link with toggle icon', () => {
+    const wrapper = mountWithContexts(
+      <ToolbarAddButton showToggleIndicator linkTo="/foo" />
+    );
+    const link = wrapper.find('Link');
+    expect(link).toHaveLength(1);
+    expect(link.prop('to')).toBe('/foo');
+  });
 });