feat: Add admin option to toggle console platforms (#95862)

priscilawebdev · web-flow · commit 180b8d94ddcf · 2025-07-22T08:14:57.000+02:00
closes https://linear.app/getsentry/issue/TET-907/add-console-platform-toggle-in-admin
diff --git a/static/gsAdmin/components/toggleConsolePlatformsModal.tsx b/static/gsAdmin/components/toggleConsolePlatformsModal.tsx
@@ -0,0 +1,148 @@
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {
+  addErrorMessage,
+  addLoadingMessage,
+  addSuccessMessage,
+} from 'sentry/actionCreators/indicator';
+import type {ModalRenderProps} from 'sentry/actionCreators/modal';
+import {openModal} from 'sentry/actionCreators/modal';
+import {Flex} from 'sentry/components/core/layout/flex';
+import FieldFromConfig from 'sentry/components/forms/fieldFromConfig';
+import Form from 'sentry/components/forms/form';
+import {space} from 'sentry/styles/space';
+import type {Organization} from 'sentry/types/organization';
+import {fetchMutation, useMutation} from 'sentry/utils/queryClient';
+
+interface ToggleConsolePlatformsModalProps extends ModalRenderProps {
+  onSuccess: () => void;
+  organization: Organization;
+}
+
+function ToggleConsolePlatformsModal({
+  Header,
+  Body,
+  closeModal,
+  organization,
+  onSuccess,
+}: ToggleConsolePlatformsModalProps) {
+  const {enabledConsolePlatforms = []} = organization;
+
+  const {isPending, mutate: updateConsolePlatforms} = useMutation({
+    mutationFn: (platforms: Record<string, boolean>) => {
+      return fetchMutation({
+        method: 'PUT',
+        url: `/organizations/${organization.slug}/`,
+        data: {
+          enabledConsolePlatforms: Object.keys(platforms).reduce((acc, key) => {
+            if (platforms[key]) {
+              acc.push(key);
+            }
+            return acc;
+          }, [] as string[]),
+        },
+      });
+    },
+    onMutate: () => {
+      addLoadingMessage(`Updating console platforms for ${organization.slug}\u2026`);
+    },
+    onSuccess: () => {
+      addSuccessMessage(`Console platforms updated for ${organization.slug}`);
+      onSuccess();
+    },
+    onError: () => {
+      addErrorMessage(`Failed to update console platforms for ${organization.slug}`);
+    },
+  });
+
+  return (
+    <Form
+      onSubmit={data => updateConsolePlatforms(data as Record<string, boolean>)}
+      onCancel={closeModal}
+      saveOnBlur={false}
+      initialData={{
+        playstation: enabledConsolePlatforms.includes('playstation'),
+        'nintendo-switch': enabledConsolePlatforms.includes('nintendo-switch'),
+        xbox: enabledConsolePlatforms.includes('xbox'),
+      }}
+      submitLabel="Save"
+      submitDisabled={isPending}
+    >
+      <Header closeButton>
+        <Flex align="center" gap={space(2)}>
+          <h4>Toggle Console Platforms</h4>
+        </Flex>
+      </Header>
+      <Body>
+        <p
+          css={css`
+            margin: 0;
+          `}
+        >
+          Toggle consoles to allow users in this organization to create console projects
+          and view private setup instructions.
+        </p>
+        <div
+          css={css`
+            margin: 0 -${space(4)};
+          `}
+        >
+          <StyledFieldFromConfig
+            field={{
+              name: 'playstation',
+              type: 'boolean',
+              label: 'Playstation',
+              help: 'Toggle the Playstation console platform for this organization.',
+            }}
+            flexibleControlStateSize
+            inline
+          />
+          <StyledFieldFromConfig
+            field={{
+              name: 'nintendo-switch',
+              type: 'boolean',
+              label: 'Nintendo Switch',
+              help: 'Toggle the Nintendo Switch console platform for this organization.',
+            }}
+            flexibleControlStateSize
+            inline
+          />
+          <StyledFieldFromConfig
+            field={{
+              name: 'xbox',
+              type: 'boolean',
+              label: 'Xbox',
+              help: 'Toggle the Xbox console platform for this organization.',
+            }}
+            flexibleControlStateSize
+            inline
+          />
+        </div>
+      </Body>
+    </Form>
+  );
+}
+
+const StyledFieldFromConfig = styled(FieldFromConfig)`
+  padding-left: ${space(4)};
+  &:last-child {
+    padding-bottom: 0;
+  }
+`;
+
+export function openToggleConsolePlatformsModal({
+  organization,
+  onSuccess,
+}: {
+  onSuccess: () => void;
+  organization: Organization;
+}) {
+  return openModal(deps => (
+    <ToggleConsolePlatformsModal
+      {...deps}
+      organization={organization}
+      onSuccess={onSuccess}
+    />
+  ));
+}
diff --git a/static/gsAdmin/views/customerDetails.tsx b/static/gsAdmin/views/customerDetails.tsx
@@ -65,6 +65,7 @@ import SelectableContainer from 'admin/components/selectableContainer';
 import SendWeeklyEmailAction from 'admin/components/sendWeeklyEmailAction';
 import SponsorshipAction from 'admin/components/sponsorshipAction';
 import SuspendAccountAction from 'admin/components/suspendAccountAction';
+import {openToggleConsolePlatformsModal} from 'admin/components/toggleConsolePlatformsModal';
 import toggleSpendAllocationModal from 'admin/components/toggleSpendAllocationModal';
 import TrialSubscriptionAction from 'admin/components/trialSubscriptionAction';
 import {RESERVED_BUDGET_QUOTA} from 'getsentry/constants';
@@ -803,6 +804,15 @@ export default function CustomerDetails() {
                 subscription,
               }),
           },
+          {
+            key: 'toggleConsolePlatforms',
+            name: 'Toggle Console Platforms',
+            help: 'Enable or disable a console platform for this organization.',
+            skipConfirmModal: true,
+            onAction: () => {
+              openToggleConsolePlatformsModal({organization, onSuccess: reloadData});
+            },
+          },
         ]}
         sections={[
           {
