feat(ToolbarGroup): rename button-group variant option (#759)

* feat(ToolbarGroup): rename button-group variant option

* refactor: rename rule

packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.md

@@ -0,0 +1,22 @@
+### toolbarGroup-updated-variant [(#10674)](https://github.com/patternfly/patternfly-react/pull/10674)
+
+The `variant` prop of ToolbarGroup and ToolbarToggleGroup had these options renamed:
+
+| Old variant option  | New variant option   |
+| ------------------- | -------------------- |
+| `button-group`      | `action-group`       |
+| `icon-button-group` | `action-group-plain` |
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```

packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.test.ts

@@ -0,0 +1,108 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./toolbarGroup-updated-variant";
+import {
+  ValidTests,
+  InvalidTests,
+  createInvalidTest,
+  createValidTest,
+} from "../../helpers/testHelpers";
+const applicableComponents = ["ToolbarGroup", "ToolbarToggleGroup"];
+const renames = {
+  "button-group": "action-group",
+  "icon-button-group": "action-group-plain",
+};
+const oldVariantNames = Object.keys(renames) as (
+  | "button-group"
+  | "icon-button-group"
+)[];
+
+const validTests: ValidTests = [];
+const invalidTests: InvalidTests = [];
+for (const component of applicableComponents) {
+  for (const oldName of oldVariantNames) {
+    const newName = renames[oldName];
+
+    validTests.push(createValidTest(`<ToolbarGroup variant="${oldName}" />`));
+    validTests.push(
+      createValidTest(
+        `import { ToolbarGroup } from '@patternfly/react-core'; <ToolbarGroup variant={ToolbarGroupVariant["${oldName}"]} />`
+      )
+    );
+
+    const message = `The \`${oldName}\` variant of ${component} has been renamed to \`${newName}\`.`;
+    const errorObject = {
+      message,
+      type: "JSXOpeningElement",
+    };
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component} } from '@patternfly/react-core'; <${component} variant="${oldName}" />`,
+        `import { ${component} } from '@patternfly/react-core'; <${component} variant="${newName}" />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component} as CustomThing } from '@patternfly/react-core'; <CustomThing variant="${oldName}" />`,
+        `import { ${component} as CustomThing } from '@patternfly/react-core'; <CustomThing variant="${newName}" />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`,
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core';
+        const variant = ToolbarGroupVariant["${oldName}"]; <${component} variant={variant} />`,
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core';
+        const variant = ToolbarGroupVariant["${newName}"]; <${component} variant={variant} />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component}, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <${component} variant={CustomThing["${oldName}"]} />`,
+        `import { ${component}, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <${component} variant={CustomThing["${newName}"]} />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component} as CustomGroup, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <CustomGroup variant={CustomThing["${oldName}"]} />`,
+        `import { ${component} as CustomGroup, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <CustomGroup variant={CustomThing["${newName}"]} />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/esm/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`,
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/esm/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/js/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`,
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/js/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`,
+        [errorObject]
+      )
+    );
+    invalidTests.push(
+      createInvalidTest(
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/dynamic/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`,
+        `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/dynamic/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`,
+        [errorObject]
+      )
+    );
+  }
+}
+
+ruleTester.run("toolbarGroup-updated-iconButtonGroup-variant", rule, {
+  valid: validTests,
+  invalid: invalidTests,
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.ts → packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.ts

@@ -15,6 +15,12 @@ module.exports = {
       (specifier) => specifier.imported.name === "ToolbarGroupVariant"
     );
 
+    const renames = {
+      "button-group": "action-group",
+      "icon-button-group": "action-group-plain",
+    };
+    const oldVariantNames = Object.keys(renames);
+
     return !componentImports.length
       ? {}
       : {
@@ -32,28 +38,27 @@ module.exports = {
               }
 
               const variantValue = getAttributeValue(context, variant.value);
-              const isEnumValueIconButtonGroup =
+              const isEnumToRename =
                 variantEnumImport &&
                 variantValue.object?.name === variantEnumImport.local.name &&
-                variantValue.property.value === "icon-button-group";
-              if (
-                variantValue !== "icon-button-group" &&
-                !isEnumValueIconButtonGroup
-              ) {
+                oldVariantNames.includes(variantValue.property.value);
+
+              if (!oldVariantNames.includes(variantValue) && !isEnumToRename) {
                 return;
               }
 
+              const variantToRename: "button-group" | "icon-button-group" =
+                variantValue.property?.value ?? variantValue;
+
               context.report({
                 node,
-                message: `The \`icon-button-group\` variant of ${applicableComponent.imported.name} has been renamed to \`action-group-plain\`.`,
+                message: `The \`${variantToRename}\` variant of ${applicableComponent.imported.name} has been renamed to \`${renames[variantToRename]}\`.`,
                 fix(fixer) {
                   return fixer.replaceText(
-                    isEnumValueIconButtonGroup
-                      ? variantValue.property
-                      : variant,
-                    isEnumValueIconButtonGroup
-                      ? '"action-group-plain"'
-                      : 'variant="action-group-plain"'
+                    isEnumToRename ? variantValue.property : variant,
+                    isEnumToRename
+                      ? `"${renames[variantToRename]}"`
+                      : `variant="${renames[variantToRename]}"`
                   );
                 },
               });

packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantInput.tsx → packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantInput.tsx

@@ -4,11 +4,11 @@ import {
   ToolbarGroupVariant,
 } from "@patternfly/react-core";
 
-export const ToolbarGroupUpdatedIconButtonGroupVariantInput = () => (
+export const ToolbarGroupUpdatedVariantInput = () => (
   <>
-    <ToolbarGroup variant='icon-button-group' />
+    <ToolbarGroup variant='button-group' />
     <ToolbarGroup variant={ToolbarGroupVariant["icon-button-group"]} />
     <ToolbarToggleGroup variant='icon-button-group' />
-    <ToolbarToggleGroup variant={ToolbarGroupVariant["icon-button-group"]} />
+    <ToolbarToggleGroup variant={ToolbarGroupVariant["button-group"]} />
   </>
 );

packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantOutput.tsx → packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantOutput.tsx

@@ -4,11 +4,11 @@ import {
   ToolbarGroupVariant,
 } from "@patternfly/react-core";
 
-export const ToolbarGroupUpdatedIconButtonGroupVariantInput = () => (
+export const ToolbarGroupUpdatedVariantInput = () => (
   <>
-    <ToolbarGroup variant="action-group-plain" />
+    <ToolbarGroup variant="action-group" />
     <ToolbarGroup variant={ToolbarGroupVariant["action-group-plain"]} />
     <ToolbarToggleGroup variant="action-group-plain" />
-    <ToolbarToggleGroup variant={ToolbarGroupVariant["action-group-plain"]} />
+    <ToolbarToggleGroup variant={ToolbarGroupVariant["action-group"]} />
   </>
 );