feat: Add codemod for ActionGroup (#7396)

* feat: Add codemod for ActionGroup

* update snapshot

* Fix Item and ActionGroup imports

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/actiongroup.test.ts.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comments out unsupported props 1`] = `
+"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
+// TODO(S2-upgrade): overflowMode has not been implemented yet.
+// TODO(S2-upgrade): buttonLabelBehavior has not been implemented yet.
+// TODO(S2-upgrade): summaryIcon has not been implemented yet.
+<ActionButtonGroup>
+  <ActionButton key="add">Add</ActionButton>
+  <ActionButton key="delete">Delete</ActionButton>
+  <ActionButton key="edit">Edit</ActionButton>
+</ActionButtonGroup>"
+`;
+
+exports[`Converts ActionGroup to ActionButtonGroup 1`] = `
+"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
+<ActionButtonGroup>
+  <ActionButton key="add" onPress={() => onAction("add")}>Add</ActionButton>
+  <ActionButton key="delete" onPress={() => onAction("delete")}>Delete</ActionButton>
+  <ActionButton key="edit" onPress={() => onAction("edit")}>Edit</ActionButton>
+</ActionButtonGroup>"
+`;
+
+exports[`Converts ActionGroup to ActionButtonGroup with disabledKeys 1`] = `
+"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
+
+function Example({disabledKeys}) {
+  let _disabledKeys = new Set(disabledKeys);
+  return (
+    (<ActionButtonGroup>
+      <ActionButton
+        key="add"
+        onPress={() => onAction("add")}
+        isDisabled={_disabledKeys.has("add")}>Add</ActionButton>
+      <ActionButton
+        key="delete"
+        onPress={() => onAction("delete")}
+        isDisabled={_disabledKeys.has("delete")}>Delete</ActionButton>
+      <ActionButton
+        key="edit"
+        onPress={() => onAction("edit")}
+        isDisabled={_disabledKeys.has("edit")}>Edit</ActionButton>
+    </ActionButtonGroup>)
+  );
+}"
+`;
+
+exports[`Converts ActionGroup to ActionButtonGroup with dynamic collections 1`] = `
+"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
+<ActionButtonGroup>
+  {items.map(
+    item => <ActionButton key={item.key ?? item.id} onPress={() => onAction(item.key ?? item.id)}>{item.name}</ActionButton>
+  )}
+</ActionButtonGroup>"
+`;
+
+exports[`Converts ActionGroup to ActionButtonGroup with dynamic collections and custom key 1`] = `
+"import { ActionButtonGroup, ActionButton } from "@react-spectrum/s2";
+<ActionButtonGroup>
+  {items.map(
+    item => <ActionButton key={item._id} onPress={() => onAction(item._id)}>{item.name}</ActionButton>
+  )}
+</ActionButtonGroup>"
+`;
+
+exports[`Converts ActionGroup to ToggleButtonGroup 1`] = `
+"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
+<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
+  <ToggleButton id="add">Add</ToggleButton>
+  <ToggleButton id="delete">Delete</ToggleButton>
+  <ToggleButton id="edit">Edit</ToggleButton>
+</ToggleButtonGroup>"
+`;
+
+exports[`Converts ActionGroup to ToggleButtonGroup with disabledKeys 1`] = `
+"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
+
+function Example({disabledKeys}) {
+  let _disabledKeys = new Set(disabledKeys);
+  return (
+    (<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
+      <ToggleButton id="add" isDisabled={_disabledKeys.has("add")}>Add</ToggleButton>
+      <ToggleButton id="delete" isDisabled={_disabledKeys.has("delete")}>Delete</ToggleButton>
+      <ToggleButton id="edit" isDisabled={_disabledKeys.has("edit")}>Edit</ToggleButton>
+    </ToggleButtonGroup>)
+  );
+}"
+`;
+
+exports[`Converts ActionGroup to ToggleButtonGroup with dynamic collections 1`] = `
+"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
+<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
+  {items.map(
+    item => <ToggleButton key={item.key ?? item.id} id={item.key ?? item.id}>{item.name}</ToggleButton>
+  )}
+</ToggleButtonGroup>"
+`;
+
+exports[`Converts ActionGroup to ToggleButtonGroup with dynamic collections and custom key 1`] = `
+"import { ToggleButtonGroup, ToggleButton } from "@react-spectrum/s2";
+<ToggleButtonGroup selectionMode="single" onSelectionChange={onSelectionChange}>
+  {items.map(
+    item => <ToggleButton key={item._id} id={item._id}>{item.name}</ToggleButton>
+  )}
+</ToggleButtonGroup>"
+`;

packages/dev/codemods/src/s1-to-s2/__tests__/actiongroup.test.ts

@@ -0,0 +1,90 @@
+// @ts-ignore
+import {defineSnapshotTest} from 'jscodeshift/dist/testUtils';
+import transform from '../src/codemods/codemod';
+
+const test = (name: string, input: string) => {
+  defineSnapshotTest(transform, {}, input, name);
+};
+
+test('Converts ActionGroup to ActionButtonGroup', `
+import {ActionGroup, Item} from '@adobe/react-spectrum';
+<ActionGroup onAction={onAction}>
+  <Item key="add">Add</Item>
+  <Item key="delete">Delete</Item>
+  <Item key="edit">Edit</Item>
+</ActionGroup>
+`);
+
+test('Converts ActionGroup to ActionButtonGroup with disabledKeys', `
+import {ActionGroup, Item} from '@adobe/react-spectrum';
+
+function Example({disabledKeys}) {
+  return (
+    <ActionGroup onAction={onAction} disabledKeys={disabledKeys}>
+      <Item key="add">Add</Item>
+      <Item key="delete">Delete</Item>
+      <Item key="edit">Edit</Item>
+    </ActionGroup>
+  );
+}
+`);
+
+test('Converts ActionGroup to ActionButtonGroup with dynamic collections', `
+import {ActionGroup, Item} from '@adobe/react-spectrum';
+<ActionGroup onAction={onAction} items={items}>
+  {item => <Item>{item.name}</Item>}
+</ActionGroup>
+`);
+
+test('Converts ActionGroup to ActionButtonGroup with dynamic collections and custom key', `
+import {ActionGroup, Item} from '@adobe/react-spectrum';
+<ActionGroup onAction={onAction} items={items}>
+  {item => <Item key={item._id}>{item.name}</Item>}
+</ActionGroup>
+`);
+
+test('Converts ActionGroup to ToggleButtonGroup', `
+  import {ActionGroup, Item} from '@adobe/react-spectrum';
+<ActionGroup selectionMode="single" onSelectionChange={onSelectionChange}>
+  <Item key="add">Add</Item>
+  <Item key="delete">Delete</Item>
+  <Item key="edit">Edit</Item>
+</ActionGroup>
+`);
+
+test('Converts ActionGroup to ToggleButtonGroup with disabledKeys', `
+import {ActionGroup, Item} from '@adobe/react-spectrum';
+
+function Example({disabledKeys}) {
+  return (
+    <ActionGroup selectionMode="single" onSelectionChange={onSelectionChange} disabledKeys={disabledKeys}>
+      <Item key="add">Add</Item>
+      <Item key="delete">Delete</Item>
+      <Item key="edit">Edit</Item>
+    </ActionGroup>
+  );
+}
+`);
+
+test('Converts ActionGroup to ToggleButtonGroup with dynamic collections', `
+  import {ActionGroup, Item} from '@adobe/react-spectrum';
+<ActionGroup selectionMode="single" onSelectionChange={onSelectionChange} items={items}>
+  {item => <Item>{item.name}</Item>}
+</ActionGroup>
+`);
+
+test('Converts ActionGroup to ToggleButtonGroup with dynamic collections and custom key', `
+  import {ActionGroup, Item} from '@adobe/react-spectrum';
+<ActionGroup selectionMode="single" onSelectionChange={onSelectionChange} items={items}>
+  {item => <Item key={item._id}>{item.name}</Item>}
+</ActionGroup>
+`);
+
+test('Comments out unsupported props', `
+import {ActionGroup, Item} from '@adobe/react-spectrum';
+<ActionGroup overflowMode="collapse" buttonLabelBehavior="collapse" summaryIcon={<Icon />}>
+  <Item key="add">Add</Item>
+  <Item key="delete">Delete</Item>
+  <Item key="edit">Edit</Item>
+</ActionGroup>
+`);

packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts

@@ -79,6 +79,10 @@ type FunctionInfo =
   | {
     name: 'updateDialogChild',
     args: {}
+  }
+  | {
+    name: 'updateActionGroup',
+    args: {}
   };
 
 type Change = {
@@ -116,6 +120,39 @@ export const changes: ChangesJSON = {
       }
     ]
   },
+  ActionGroup: {
+    changes: [
+      {
+        description: 'Comment out overflowMode',
+        reason: 'It has not been implemented yet',
+        function: {
+          name: 'commentOutProp',
+          args: {propToComment: 'overflowMode'}
+        }
+      },
+      {
+        description: 'Comment out buttonLabelBehavior',
+        reason: 'It has not been implemented yet',
+        function: {
+          name: 'commentOutProp',
+          args: {propToComment: 'buttonLabelBehavior'}
+        }
+      },
+      {
+        description: 'Comment out summaryIcon',
+        reason: 'It has not been implemented yet',
+        function: {
+          name: 'commentOutProp',
+          args: {propToComment: 'summaryIcon'}
+        }
+      },
+      {
+        description: 'Replace with ActionButtonGroup or ToggleButtonGroup',
+        reason: 'The API has changed',
+        function: {name: 'updateActionGroup', args: {}}
+      }
+    ]
+  },
   ActionMenu: {
     changes: [
       {

packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts

@@ -26,6 +26,9 @@ availableComponents.add('Section');
 // Don't update v3 Provider
 availableComponents.delete('Provider');
 
+// Replaced by ActionButtonGroup and ToggleButtonGroup
+availableComponents.add('ActionGroup');
+
 
 interface Options {
   /** Comma separated list of components to transform. If not specified, all available components will be transformed. */
@@ -226,7 +229,7 @@ export default function transformer(file: FileInfo, api: API, options: Options)
   if (importedComponents.size) {
     // Add imports to existing @react-spectrum/s2 import if it exists, otherwise add a new one.
     let importSpecifiers = new Set([...importedComponents]
-      .filter(([c]) => c !== 'Flex' && c !== 'Grid' && c !== 'View' && c !== 'Item' && c !== 'Section')
+      .filter(([c]) => c !== 'Flex' && c !== 'Grid' && c !== 'View' && c !== 'Item' && c !== 'Section' && c !== 'ActionGroup')
       .map(([, specifier]) => specifier));
 
     let existingImport = root.find(j.ImportDeclaration, {