Reapply "admin: drop deprecated usage od DropdownActions (#89197)" (#89342)

Lets see where acceptance flakes

Author: JonasBa

static/gsAdmin/components/dropdownActions.tsx

@@ -1,38 +1,11 @@
-import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
-import DropdownButton from 'sentry/components/dropdownButton';
-import {Tooltip} from 'sentry/components/tooltip';
+import {CompactSelect, type SelectOption} from 'sentry/components/core/compactSelect';
 import {IconNot} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
 
 import {openAdminConfirmModal} from 'admin/components/adminConfirmationModal';
 
-const ActionName = styled('div')`
-  display: flex;
-  align-items: center;
-  gap: ${space(0.5)};
-`;
-
-const ActionLabel = styled('div')<{isDisabled: boolean}>`
-  width: 350px;
-  ${p =>
-    p.isDisabled &&
-    css`
-      color: ${p.theme.subText};
-      svg {
-        color: ${p.theme.red200};
-      }
-    `}
-`;
-
-const HelpText = styled('div')`
-  font-size: ${p => p.theme.fontSizeSmall};
-  color: ${p => p.theme.subText};
-  line-height: 1.2;
-`;
-
 type Props = {
   actions: Array<{
     key: string;
@@ -48,20 +21,44 @@ type Props = {
   label?: string;
 };
 
-function DropdownActions({actions, label}: Props) {
-  return (
-    <DropdownAutoComplete
-      alignMenu="right"
-      searchPlaceholder="Filter actions"
-      noResultsMessage="No actions match your filter"
-      onSelect={({value}) => {
-        const action = actions.find(a => a.key === value);
+/**
+ * Map actions to a format that can be used by the CompactSelect component. This exists
+ * because this used a component with a different signature, and I
+ */
+function mapActionsToCompactSelect(
+  actions: Props['actions']
+): Array<SelectOption<string>> {
+  return actions
+    .map(action => {
+      if (action.visible === false) {
+        return null;
+      }
 
-        if (action === undefined) {
-          return;
-        }
+      return {
+        value: action.key,
+        label: (
+          <div>
+            {action.name}
+            <StyledIconNot size="xs" />
+          </div>
+        ),
+        details: action.help,
+        disabled: action.disabled,
+        tooltip: action.disabled ? action.disabledReason : undefined,
+        help: action.help,
+      };
+    })
+    .filter(Boolean) as Array<SelectOption<string>>;
+}
 
-        if (action.disabled) {
+function DropdownActions({actions, label}: Props) {
+  return (
+    <CompactSelect
+      searchable
+      options={mapActionsToCompactSelect(actions)}
+      onChange={option => {
+        const action = actions.find(a => a.key === option.value);
+        if (!action || action.disabled) {
           return;
         }
 
@@ -83,41 +80,15 @@ function DropdownActions({actions, label}: Props) {
           onConfirm: action.onAction,
         });
       }}
-      items={actions
-        .filter(action => action.visible !== false)
-        .map(action => {
-          const actionLabel = (
-            <ActionLabel
-              data-test-id={`action-${action.key}`}
-              isDisabled={!!action.disabled}
-              aria-disabled={!!action.disabled}
-            >
-              <ActionName>
-                {action.name}
-                {action.disabled && (
-                  <Tooltip skipWrapper title={action.disabledReason}>
-                    <IconNot size="xs" data-test-id="icon-not" />
-                  </Tooltip>
-                )}
-              </ActionName>
-              {action.help && <HelpText>{action.help}</HelpText>}
-            </ActionLabel>
-          );
-
-          return {
-            value: action.key,
-            searchKey: action.name,
-            label: actionLabel,
-          };
-        })}
-    >
-      {({isOpen}) => (
-        <DropdownButton data-test-id="detail-actions" size="sm" isOpen={isOpen}>
-          {label}
-        </DropdownButton>
-      )}
-    </DropdownAutoComplete>
+      triggerLabel={label}
+    />
   );
 }
 
 export default DropdownActions;
+
+const StyledIconNot = styled(IconNot)`
+  color: ${p => p.theme.red200};
+  margin-left: ${space(0.5)};
+  transform: translateY(2px);
+`;

static/gsAdmin/components/policies/policyRevisions.tsx

@@ -2,10 +2,10 @@ import styled from '@emotion/styled';
 import moment from 'moment-timezone';
 
 import {Tag} from 'sentry/components/core/badge/tag';
+import {Button} from 'sentry/components/core/button';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {space} from 'sentry/styles/space';
 
-import DropdownActions from 'admin/components/dropdownActions';
 import ResultGrid from 'admin/components/resultGrid';
 import type {Policy, PolicyRevision} from 'getsentry/types';
 
@@ -37,18 +37,17 @@ const getRow = ({row, policy, onUpdate}: RowProps) => {
       <br />
     </td>,
     <td key="actions" data-test-id="revision-actions">
-      <DropdownActions
-        actions={[
-          {
-            key: 'make-current',
-            name: 'Make current',
-            help: 'Make this the active version of this policy.',
-            skipConfirmModal: true,
-            disabled: policy.version === row.version,
-            onAction: () => onUpdate({current: true}, row.version),
-          },
-        ]}
-      />
+      <Button
+        title={
+          policy.version === row.version
+            ? 'This is already the current version'
+            : 'Make this the active version of this policy.'
+        }
+        disabled={policy.version === row.version}
+        onClick={() => onUpdate({current: true}, row.version)}
+      >
+        Make current
+      </Button>
     </td>,
   ];
 };