feat(Superuser): FE for superuser access form (#33066)

static/app/bootstrap/processInitQueue.tsx

@@ -13,6 +13,10 @@ const COMPONENT_MAP = {
     import(/* webpackChunkName: "SetupWizard" */ 'sentry/views/setupWizard'),
   [SentryInitRenderReactComponent.U2F_SIGN]: () =>
     import(/* webpackChunkName: "U2fSign" */ 'sentry/components/u2f/u2fsign'),
+  [SentryInitRenderReactComponent.SU_ACCESS_FORM]: () =>
+    import(
+      /* webpackChunkName: "SuperuserAccessForm" */ 'sentry/components/superuserAccessForm'
+    ),
 };
 
 async function processItem(initConfig: OnSentryInitConfiguration) {

static/app/components/superuserAccessForm.tsx

@@ -0,0 +1,72 @@
+import {Component} from 'react';
+import styled from '@emotion/styled';
+
+import Alert from 'sentry/components/alert';
+import Form from 'sentry/components/forms/form';
+import Hook from 'sentry/components/hook';
+import ThemeAndStyleProvider from 'sentry/components/themeAndStyleProvider';
+import {ErrorCodes} from 'sentry/constants/superuserAccessErrors';
+import {t} from 'sentry/locale';
+
+type State = {
+  error: boolean;
+  errorType: string;
+};
+
+class SuperuserAccessForm extends Component<State> {
+  state: State = {
+    error: false,
+    errorType: '',
+  };
+
+  handleSuccess = () => {
+    window.location.reload();
+  };
+
+  handleError = err => {
+    let errorType = '';
+    if (err.status === 403) {
+      errorType = ErrorCodes.invalidPassword;
+    } else if (err.status === 401) {
+      errorType = ErrorCodes.invalidSSOSession;
+    } else if (err.status === 400) {
+      errorType = ErrorCodes.invalidAccessCategory;
+    } else {
+      errorType = ErrorCodes.unknownError;
+    }
+    this.setState({
+      error: true,
+      errorType,
+    });
+  };
+
+  render() {
+    const {error, errorType} = this.state;
+    return (
+      <ThemeAndStyleProvider>
+        <Form
+          apiMethod="PUT"
+          apiEndpoint="/auth/"
+          submitLabel={t('Continue')}
+          onSubmitSuccess={this.handleSuccess}
+          onSubmitError={this.handleError}
+          initialData={{isSuperuserModal: true}}
+          resetOnError
+        >
+          {error && (
+            <StyledAlert type="error" showIcon>
+              {t(errorType)}
+            </StyledAlert>
+          )}
+          <Hook name="component:superuser-access-category" />
+        </Form>
+      </ThemeAndStyleProvider>
+    );
+  }
+}
+
+const StyledAlert = styled(Alert)`
+  margin-bottom: 0;
+`;
+
+export default SuperuserAccessForm;

static/app/types/system.tsx

@@ -10,6 +10,7 @@ export enum SentryInitRenderReactComponent {
   SETUP_WIZARD = 'SetupWizard',
   SYSTEM_ALERTS = 'SystemAlerts',
   U2F_SIGN = 'U2fSign',
+  SU_ACCESS_FORM = 'SuperuserAccessForm',
 }
 
 export type OnSentryInitConfiguration =