Merge pull request #8351 from nixocio/ui_issue_7721

Update AddDropDownButton to show down caret

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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"

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>
   );

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');
+  });
 });