refactor(enums): harmonize enum names (#5970)

BREAKING CHANGE: the `MessageBoxActions` enum has been renamed to `MessageBoxAction`
BREAKING CHANGE: the `MessageBoxTypes` enum has been renamed to `MessageBoxType`
BREAKING CHANGE: the `Themes` enum has been renamed to `Theme`

Author: MarcusNotheis

docs/MigrationGuide.mdx

@@ -295,4 +295,12 @@ function MyComponent() {
 }
 ```
 
+## Enum Changes
+
+For a better alignment with the UI5 Web Components, the following enums have been renamed:
+
+- `MessageBoxActions` has been renamed to `MessageBoxAction`
+- `MessageBoxTypes` has been renamed to `MessageBoxType`
+- `Themes` has been renamed to `Theme`
+
 <Footer />

packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json

@@ -593,6 +593,11 @@
     "WizardContentLayout": "@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js",
     "WrappingType": "@ui5/webcomponents/dist/types/WrappingType.js"
   },
+  "renamedEnums": {
+    "MessageBoxActions": "MessageBoxAction",
+    "MessageBoxTypes": "MessageBoxType",
+    "Themes": "Theme"
+  },
   "enumProperties": {
     "BusyIndicatorSize": {
       "Small": "S",

packages/cli/src/scripts/codemod/transforms/v2/main.cts

@@ -396,6 +396,21 @@ export default function transform(file: FileInfo, api: API, options?: Options):
     }
   });
 
+  Object.entries<string>(config.renamedEnums).forEach(([enumName, newName]) => {
+    const currentImportSpecifier = root.find(j.ImportSpecifier, { local: { name: enumName } });
+    if (currentImportSpecifier.paths().length) {
+      const importedFrom = currentImportSpecifier.get().parentPath.parentPath.value.source.value;
+
+      if (importedFrom === '@ui5/webcomponents-react') {
+        currentImportSpecifier.replaceWith(j.importSpecifier(j.identifier(newName), j.identifier(newName)));
+
+        const currentIdentifier = root.find(j.Identifier, { name: enumName });
+        currentIdentifier.replaceWith(j.identifier(newName));
+        isDirty = true;
+      }
+    }
+  });
+
   Object.entries<Record<string, string>>(config.enumProperties).forEach(([changedEnum, changedValues]) => {
     Object.entries(changedValues ?? {}).forEach(([oldValue, newValue]) => {
       const enumValueToReplace = root

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -12,8 +12,8 @@ import { createPortal } from 'react-dom';
 import {
   FlexBoxDirection,
   FlexBoxJustifyContent,
-  MessageBoxActions,
-  MessageBoxTypes,
+  MessageBoxAction,
+  MessageBoxType,
   ToolbarStyle
 } from '../../enums/index.js';
 import {
@@ -614,8 +614,8 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
         createPortal(
           <MessageBox
             open
-            type={MessageBoxTypes.Warning}
-            actions={[MessageBoxActions.OK, MessageBoxActions.Cancel]}
+            type={MessageBoxType.Warning}
+            actions={[MessageBoxAction.OK, MessageBoxAction.Cancel]}
             onClose={handleMessageBoxClose}
             data-component-name="FilterBarDialogResetMessageBox"
           >

packages/main/src/components/MessageBox/MessageBox.cy.tsx

@@ -1,15 +1,15 @@
 import addIcon from '@ui5/webcomponents-icons/dist/add.js';
-import { Button, Icon, MessageBoxActions, MessageBoxTypes } from '../..';
+import { Button, Icon, MessageBoxAction, MessageBoxType } from '../..';
 import { MessageBox } from './index.js';
 
 describe('MessageBox', () => {
   [
-    [MessageBoxTypes.Confirm, MessageBoxActions.OK],
-    [MessageBoxTypes.Success, MessageBoxActions.OK],
-    [MessageBoxTypes.Warning, MessageBoxActions.OK],
-    [MessageBoxTypes.Error, MessageBoxActions.Close],
-    [MessageBoxTypes.Information, MessageBoxActions.OK]
-  ].forEach(([type, buttonText]: [MessageBoxTypes, MessageBoxActions]) => {
+    [MessageBoxType.Confirm, MessageBoxAction.OK],
+    [MessageBoxType.Success, MessageBoxAction.OK],
+    [MessageBoxType.Warning, MessageBoxAction.OK],
+    [MessageBoxType.Error, MessageBoxAction.Close],
+    [MessageBoxType.Information, MessageBoxAction.OK]
+  ].forEach(([type, buttonText]: [MessageBoxType, MessageBoxAction]) => {
     it(type, () => {
       const callback = cy.spy();
       cy.mount(
@@ -37,12 +37,12 @@ describe('MessageBox', () => {
         open
         onClose={close}
         actions={[
-          MessageBoxActions.Cancel,
+          MessageBoxAction.Cancel,
           <Button onClick={click} key="0">
             Custom
           </Button>,
           'Custom Text Action',
-          MessageBoxActions.OK
+          MessageBoxAction.OK
         ]}
       >
         My Message Box Content
@@ -70,7 +70,7 @@ describe('MessageBox', () => {
   it('Confirm - Cancel', () => {
     const callback = cy.spy().as('onMessageBoxClose');
     cy.mount(
-      <MessageBox type={MessageBoxTypes.Confirm} open onClose={callback}>
+      <MessageBox type={MessageBoxType.Confirm} open onClose={callback}>
         Confirm
       </MessageBox>
     );
@@ -82,7 +82,7 @@ describe('MessageBox', () => {
         'have.been.calledWith',
         Cypress.sinon.match({
           detail: {
-            action: MessageBoxActions.Cancel
+            action: MessageBoxAction.Cancel
           }
         })
       );
@@ -91,7 +91,7 @@ describe('MessageBox', () => {
   it('Show', () => {
     const callback = cy.spy().as('onMessageBoxClose');
     cy.mount(
-      <MessageBox open onClose={callback} titleText="Custom" actions={[MessageBoxActions.Yes, MessageBoxActions.No]}>
+      <MessageBox open onClose={callback} titleText="Custom" actions={[MessageBoxAction.Yes, MessageBoxAction.No]}>
         Custom
       </MessageBox>
     );
@@ -103,7 +103,7 @@ describe('MessageBox', () => {
         'have.been.calledWith',
         Cypress.sinon.match({
           detail: {
-            action: MessageBoxActions.Yes
+            action: MessageBoxAction.Yes
           }
         })
       );
@@ -115,7 +115,7 @@ describe('MessageBox', () => {
         'have.been.calledWith',
         Cypress.sinon.match({
           detail: {
-            action: MessageBoxActions.No
+            action: MessageBoxAction.No
           }
         })
       );
@@ -125,7 +125,7 @@ describe('MessageBox', () => {
     const callback = cy.spy().as('onMessageBoxClose');
     cy.mount(
       <MessageBox
-        type={MessageBoxTypes.Success}
+        type={MessageBoxType.Success}
         open
         onClose={callback}
         titleText="Custom Success"
@@ -142,7 +142,7 @@ describe('MessageBox', () => {
         'have.been.calledWith',
         Cypress.sinon.match({
           detail: {
-            action: MessageBoxActions.OK
+            action: MessageBoxAction.OK
           }
         })
       );
@@ -164,22 +164,22 @@ describe('MessageBox', () => {
     cy.mount(
       <MessageBox
         open
-        type={MessageBoxTypes.Confirm}
-        actions={[MessageBoxActions.OK, 'My Custom Action']}
+        type={MessageBoxType.Confirm}
+        actions={[MessageBoxAction.OK, 'My Custom Action']}
         onClose={callback}
       >
         My Message Box Content
       </MessageBox>
     );
 
-    cy.findByText(MessageBoxActions.OK).should('be.visible').click();
+    cy.findByText(MessageBoxAction.OK).should('be.visible').click();
     cy.get('@onMessageBoxClose')
       .should('have.been.calledOnce')
       .should(
         'have.been.calledWith',
         Cypress.sinon.match({
           detail: {
-            action: MessageBoxActions.OK
+            action: MessageBoxAction.OK
           }
         })
       );
@@ -209,7 +209,7 @@ describe('MessageBox', () => {
 
   it('initial focus', () => {
     cy.mount(
-      <MessageBox open type={MessageBoxTypes.Confirm} initialFocus={MessageBoxActions.Cancel} data-testid="Dialog">
+      <MessageBox open type={MessageBoxType.Confirm} initialFocus={MessageBoxAction.Cancel} data-testid="Dialog">
         Content
       </MessageBox>
     );

packages/main/src/components/MessageBox/MessageBox.mdx

@@ -53,7 +53,7 @@ const MessageBoxComponent = () => {
     setOpen(true);
   };
   const handleClose = (event) => {
-    if (event.detail.action === MessageBoxActions.OK) {
+    if (event.detail.action === MessageBoxAction.OK) {
       // do something on "Ok" button click
     } else if (event.detail.action === 'Custom Action') {
       // do something on "Custom Action" click
@@ -68,7 +68,7 @@ const MessageBoxComponent = () => {
       <MessageBox
         open={open}
         onClose={handleClose}
-        actions={[MessageBoxActions.OK, 'Custom Action', MessageBoxActions.Cancel, MessageBoxActions.Abort]}
+        actions={[MessageBoxAction.OK, 'Custom Action', MessageBoxAction.Cancel, MessageBoxAction.Abort]}
       >
         Content
       </MessageBox>

packages/main/src/components/MessageBox/MessageBox.stories.tsx

@@ -2,8 +2,8 @@ import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
 import { forwardRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { MessageBoxActions } from '../../enums/MessageBoxActions';
-import { MessageBoxTypes } from '../../enums/MessageBoxTypes';
+import { MessageBoxAction } from '../../enums/MessageBoxAction';
+import { MessageBoxType } from '../../enums/MessageBoxType';
 import type { DialogDomRef } from '../../webComponents';
 import { Button } from '../../webComponents/Button/index';
 import type { MessageBoxPropTypes } from './index.js';
@@ -31,7 +31,7 @@ const meta = {
   },
   args: {
     open: false,
-    type: MessageBoxTypes.Confirm,
+    type: MessageBoxType.Confirm,
     children: 'Press "Escape" to close the MessageBox.'
   },
   parameters: {
@@ -68,9 +68,9 @@ export const Default: Story = {
 export const WithCustomActions: Story = {
   args: {
     actions: [
-      MessageBoxActions.OK,
+      MessageBoxAction.OK,
       'Custom Action',
-      MessageBoxActions.Cancel,
+      MessageBoxAction.Cancel,
       <Button key="0" id="custom-action">
         Custom Button
       </Button>