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

This reverts commit ed99062.

Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

Author: getsentry-bot

static/gsAdmin/components/dropdownActions.tsx

@@ -1,11 +1,38 @@
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {CompactSelect, type SelectOption} from 'sentry/components/core/compactSelect';
+import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
+import DropdownButton from 'sentry/components/dropdownButton';
+import {Tooltip} from 'sentry/components/tooltip';
 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;
@@ -21,44 +48,20 @@ type Props = {
   label?: string;
 };
 
-/**
- * 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;
-      }
-
-      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>>;
-}
-
 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) {
+    <DropdownAutoComplete
+      alignMenu="right"
+      searchPlaceholder="Filter actions"
+      noResultsMessage="No actions match your filter"
+      onSelect={({value}) => {
+        const action = actions.find(a => a.key === value);
+
+        if (action === undefined) {
+          return;
+        }
+
+        if (action.disabled) {
           return;
         }
 
@@ -80,15 +83,41 @@ function DropdownActions({actions, label}: Props) {
           onConfirm: action.onAction,
         });
       }}
-      triggerLabel={label}
-    />
+      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>
   );
 }
 
 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,17 +37,18 @@ const getRow = ({row, policy, onUpdate}: RowProps) => {
       <br />
     </td>,
     <td key="actions" data-test-id="revision-actions">
-      <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>
+      <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),
+          },
+        ]}
+      />
     </td>,
   ];
 };