Update Actions component to use MenuButton instead of custom workaround

Carbon v11 introduces a new MenuButton component which is a native replacement for our custom OverflowMenu workaround with custom styling and icon override. Also fix alignment of the button on the run details pages.
tektoncd · Jul 11, 2024 · 3745f6a · 3745f6a
1 parent 6563ae6
commit 3745f6a
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 96 deletions.
diff --git a/packages/components/src/components/Actions/Actions.jsx b/packages/components/src/components/Actions/Actions.jsx
@@ -15,11 +15,12 @@ import { Component } from 'react';
 import { injectIntl } from 'react-intl';
 import {
   Button,
+  MenuButton,
+  MenuItem,
+  MenuItemDivider,
   OverflowMenu,
-  OverflowMenuItem,
-  PrefixContext
+  OverflowMenuItem
 } from '@carbon/react';
-import { CaretDown } from '@carbon/react/icons';
 
 import Modal from '../Modal';
 
@@ -44,48 +45,23 @@ class Actions extends Component {
     }
   };
 
-  render() {
-    const { modal = {}, showDialog } = this.state;
+  getButton() {
     const { intl, items, kind, resource } = this.props;
     const isButton = kind === 'button';
 
-    const dialog = showDialog ? (
-      <Modal
-        open={showDialog}
-        modalHeading={modal.heading}
-        primaryButtonText={modal.primaryButtonText}
-        secondaryButtonText={
-          modal.secondaryButtonText ||
-          intl.formatMessage({
-            id: 'dashboard.modal.cancelButton',
-            defaultMessage: 'Cancel'
-          })
-        }
-        onRequestClose={this.handleClose}
-        onRequestSubmit={this.handleModalAction}
-        onSecondarySubmit={this.handleClose}
-        danger={modal.danger}
-      >
-        {modal.body && modal.body(resource)}
-      </Modal>
-    ) : null;
-
     if (isButton && items.length === 1) {
       const { action, actionText, icon, modalProperties } = items[0];
       return (
-        <>
-          <Button
-            kind="tertiary"
-            onClick={() =>
-              this.handleClick(() => action(resource), modalProperties)
-            }
-            renderIcon={icon}
-            size="md"
-          >
-            {actionText}
-          </Button>
-          {dialog}
-        </>
+        <Button
+          kind="tertiary"
+          onClick={() =>
+            this.handleClick(() => action(resource), modalProperties)
+          }
+          renderIcon={icon}
+          size="md"
+        >
+          {actionText}
+        </Button>
       );
     }
 
@@ -94,33 +70,14 @@ class Actions extends Component {
       defaultMessage: 'Actions'
     });
 
-    const carbonPrefix = this.context;
-
-    // TODO: carbon11 - for `isButton` case, use MenuButton component instead
-    return (
-      <>
-        <OverflowMenu
-          ariaLabel={title}
-          className={`tkn--actions-dropdown${
-            isButton ? ' tkn--actions-dropdown--button' : ''
-          }`}
-          flipped
-          iconDescription={title}
-          selectorPrimaryFocus="button:not([disabled])"
-          title={title}
-          renderIcon={
-            isButton
-              ? iconProps => (
-                  <span
-                    {...iconProps}
-                    className={`${carbonPrefix}--btn ${carbonPrefix}--btn--md ${carbonPrefix}--btn--tertiary`}
-                  >
-                    {title}
-                    <CaretDown className={`${carbonPrefix}--btn__icon`} />
-                  </span>
-                )
-              : undefined
-          }
+    if (isButton) {
+      return (
+        <MenuButton
+          className="tkn--actions-dropdown"
+          kind="tertiary"
+          label={title}
+          menuAlignment="bottom-end"
+          size="md"
         >
           {items.map(item => {
             const {
@@ -133,25 +90,93 @@ class Actions extends Component {
             } = item;
             const disabled = disable && disable(resource);
             return (
-              <OverflowMenuItem
-                disabled={disabled}
-                hasDivider={hasDivider}
-                isDelete={danger}
-                itemText={actionText}
-                key={actionText}
-                onClick={() =>
-                  this.handleClick(() => action(resource), modalProperties)
-                }
-                requireTitle
-              />
+              <>
+                {hasDivider && <MenuItemDivider />}
+                <MenuItem
+                  disabled={disabled}
+                  key={actionText}
+                  kind={danger ? 'danger' : 'default'}
+                  label={actionText}
+                  onClick={() =>
+                    this.handleClick(() => action(resource), modalProperties)
+                  }
+                />
+              </>
             );
           })}
-        </OverflowMenu>
+        </MenuButton>
+      );
+    }
+    return (
+      <OverflowMenu
+        align="left"
+        ariaLabel={title}
+        className="tkn--actions-dropdown"
+        flipped
+        iconDescription={title}
+        selectorPrimaryFocus="button:not([disabled])"
+        title={title}
+      >
+        {items.map(item => {
+          const {
+            actionText,
+            action,
+            danger,
+            disable,
+            hasDivider,
+            modalProperties
+          } = item;
+          const disabled = disable && disable(resource);
+          return (
+            <OverflowMenuItem
+              disabled={disabled}
+              hasDivider={hasDivider}
+              isDelete={danger}
+              itemText={actionText}
+              key={actionText}
+              onClick={() =>
+                this.handleClick(() => action(resource), modalProperties)
+              }
+              requireTitle
+            />
+          );
+        })}
+      </OverflowMenu>
+    );
+  }
+
+  render() {
+    const { modal = {}, showDialog } = this.state;
+    const { intl, resource } = this.props;
+
+    const dialog = showDialog ? (
+      <Modal
+        open={showDialog}
+        modalHeading={modal.heading}
+        primaryButtonText={modal.primaryButtonText}
+        secondaryButtonText={
+          modal.secondaryButtonText ||
+          intl.formatMessage({
+            id: 'dashboard.modal.cancelButton',
+            defaultMessage: 'Cancel'
+          })
+        }
+        onRequestClose={this.handleClose}
+        onRequestSubmit={this.handleModalAction}
+        onSecondarySubmit={this.handleClose}
+        danger={modal.danger}
+      >
+        {modal.body && modal.body(resource)}
+      </Modal>
+    ) : null;
+
+    return (
+      <>
+        {this.getButton()}
         {dialog}
       </>
     );
   }
 }
-Actions.contextType = PrefixContext;
 
 export default injectIntl(Actions);
diff --git a/packages/components/src/components/Actions/_Actions.scss b/packages/components/src/components/Actions/_Actions.scss
diff --git a/src/scss/App.scss b/src/scss/App.scss
@@ -32,7 +32,6 @@ limitations under the License.
 
 @use '@tektoncd/dashboard-components/src/scss/common';
 @use '@tektoncd/dashboard-components/src/scss/Run';
-@use '@tektoncd/dashboard-components/src/components/Actions/Actions';
 @use '@tektoncd/dashboard-components/src/components/DataTableSkeleton/DataTableSkeleton';
 @use '@tektoncd/dashboard-components/src/components/DeleteModal/DeleteModal';
 @use '@tektoncd/dashboard-components/src/components/DetailsHeader/DetailsHeader';

diff --git a/src/scss/_carbon.scss b/src/scss/_carbon.scss
@@ -49,6 +49,7 @@ limitations under the License.
 @use '@carbon/react/scss/components/link';
 @use '@carbon/react/scss/components/list';
 @use '@carbon/react/scss/components/loading';
+@use '@carbon/react/scss/components/menu';
 @use '@carbon/react/scss/components/modal';
 @use '@carbon/react/scss/components/notification';
 @use '@carbon/react/scss/components/overflow-menu';