ref(onboarding): Introduce 'Store Minidumps As Attachments' field to onboarding docs of 'unity', 'minidump' and 'unreal'

static/app/components/onboarding/gettingStartedDoc/storeCrashReportsConfig.tsx

@@ -0,0 +1,74 @@
+import styled from '@emotion/styled';
+
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
+import {hasEveryAccess} from 'sentry/components/acl/access';
+import Form from 'sentry/components/forms/form';
+import JsonForm from 'sentry/components/forms/jsonForm';
+import Panel from 'sentry/components/panels/panel';
+import Placeholder from 'sentry/components/placeholder';
+import projectSecurityAndPrivacyGroups from 'sentry/data/forms/projectSecurityAndPrivacyGroups';
+import ProjectsStore from 'sentry/stores/projectsStore';
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
+import {useDetailedProject} from 'sentry/utils/useDetailedProject';
+
+interface StoreCrashReportsConfigProps {
+  organization: Organization;
+  projectSlug: Project['slug'];
+}
+
+export function StoreCrashReportsConfig({
+  projectSlug,
+  organization,
+}: StoreCrashReportsConfigProps) {
+  const {data: project, isPending: isPendingProject} = useDetailedProject({
+    orgSlug: organization.slug,
+    projectSlug,
+  });
+
+  if (isPendingProject) {
+    // 72px is the height of the form
+    return <Placeholder height="72px" />;
+  }
+
+  const storeCrashReportsField = projectSecurityAndPrivacyGroups
+    .flatMap(group => group.fields)
+    .find(field => field.name === 'storeCrashReports');
+
+  if (!project || !storeCrashReportsField) {
+    return null;
+  }
+
+  return (
+    <Form
+      saveOnBlur
+      allowUndo
+      initialData={project}
+      apiMethod="PUT"
+      apiEndpoint={`/projects/${organization.slug}/${projectSlug}/`}
+      onSubmitSuccess={data => {
+        // This will update our project global state
+        ProjectsStore.onUpdateSuccess(data);
+      }}
+      onSubmitError={() => addErrorMessage('Unable to save change')}
+    >
+      <StyledJsonForm
+        features={new Set(organization.features)}
+        additionalFieldProps={{organization, project}}
+        disabled={!hasEveryAccess(['project:write'], {organization, project})}
+        forms={[
+          {
+            title: '', // we do not want to show the panel's header
+            fields: [storeCrashReportsField],
+          },
+        ]}
+      />
+    </Form>
+  );
+}
+
+const StyledJsonForm = styled(JsonForm)`
+  ${Panel} {
+    margin-bottom: 0;
+  }
+`;

static/app/data/forms/projectSecurityAndPrivacyGroups.tsx

@@ -43,16 +43,22 @@ function hasProjectWriteAndOrgOverride({
 function projectWriteAndOrgOverrideDisabledReason({
   organization,
   name,
+  project,
 }: {
   name: string;
   organization: Organization;
+  project: Project;
 }) {
   if (hasOrgOverride({organization, name})) {
     return t(
       "This option is enforced by your organization's settings and cannot be customized per-project."
     );
   }
 
+  if (!hasEveryAccess(['project:write'], {organization, project})) {
+    return t("You do not have permission to modify this project's setting.");
+  }
+
   return null;
 }
 
@@ -61,6 +67,8 @@ const formGroups: JsonFormObject[] = [
     title: t('Security & Privacy'),
     fields: [
       {
+        disabled: hasProjectWriteAndOrgOverride,
+        disabledReason: projectWriteAndOrgOverrideDisabledReason,
         name: 'storeCrashReports',
         type: 'select',
         label: t('Store Minidumps As Attachments'),

static/app/gettingStartedDocs/minidump/minidump.spec.tsx

@@ -1,10 +1,21 @@
+import {ProjectFixture} from 'sentry-fixture/project';
+
 import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
 import {screen} from 'sentry-test/reactTestingLibrary';
 
 import docs from './minidump';
 
+function renderMockRequests() {
+  MockApiClient.addMockResponse({
+    url: '/projects/org-slug/project-slug/',
+    body: [ProjectFixture()],
+  });
+}
+
 describe('getting started with minidump', function () {
   it('renders gradle docs correctly', function () {
+    renderMockRequests();
+
     renderWithOnboardingLayout(docs);
 
     // Renders main headings

static/app/gettingStartedDocs/minidump/minidump.tsx

@@ -3,6 +3,7 @@ import {Fragment} from 'react';
 import ExternalLink from 'sentry/components/links/externalLink';
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
+import {StoreCrashReportsConfig} from 'sentry/components/onboarding/gettingStartedDoc/storeCrashReportsConfig';
 import type {
   Docs,
   DocsParams,
@@ -70,7 +71,17 @@ const onboarding: OnboardingConfig = {
     },
   ],
   configure: () => [],
-  verify: () => [],
+  verify: params => [
+    {
+      title: t('Further Settings'),
+      description: (
+        <StoreCrashReportsConfig
+          organization={params.organization}
+          projectSlug={params.projectSlug}
+        />
+      ),
+    },
+  ],
 };
 
 const docs: Docs = {

static/app/gettingStartedDocs/unity/unity.spec.tsx

@@ -1,11 +1,22 @@
+import {ProjectFixture} from 'sentry-fixture/project';
+
 import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
 import {screen} from 'sentry-test/reactTestingLibrary';
 import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import docs from './unity';
 
+function renderMockRequests() {
+  MockApiClient.addMockResponse({
+    url: '/projects/org-slug/project-slug/',
+    body: [ProjectFixture()],
+  });
+}
+
 describe('unity onboarding docs', function () {
   it('renders docs correctly', async function () {
+    renderMockRequests();
+
     renderWithOnboardingLayout(docs, {
       releaseRegistry: {
         'sentry.dotnet.unity': {

static/app/gettingStartedDocs/unity/unity.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Alert} from 'sentry/components/alert';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import {StoreCrashReportsConfig} from 'sentry/components/onboarding/gettingStartedDoc/storeCrashReportsConfig';
 import type {
   Docs,
   OnboardingConfig,
@@ -94,7 +95,7 @@ const onboarding: OnboardingConfig = {
       ),
     },
   ],
-  verify: () => [
+  verify: params => [
     {
       type: StepType.VERIFY,
       description: t(
@@ -130,6 +131,15 @@ const onboarding: OnboardingConfig = {
         </Fragment>
       ),
     },
+    {
+      title: t('Further Settings'),
+      description: (
+        <StoreCrashReportsConfig
+          organization={params.organization}
+          projectSlug={params.projectSlug}
+        />
+      ),
+    },
   ],
 };
 

static/app/gettingStartedDocs/unreal/unreal.spec.tsx

@@ -1,10 +1,21 @@
+import {ProjectFixture} from 'sentry-fixture/project';
+
 import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
 import {screen} from 'sentry-test/reactTestingLibrary';
 
 import docs from './unreal';
 
+function renderMockRequests() {
+  MockApiClient.addMockResponse({
+    url: '/projects/org-slug/project-slug/',
+    body: [ProjectFixture()],
+  });
+}
+
 describe('getting started with unreal', function () {
   it('renders docs correctly', function () {
+    renderMockRequests();
+
     renderWithOnboardingLayout(docs);
 
     // Renders main headings

static/app/gettingStartedDocs/unreal/unreal.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Alert} from 'sentry/components/alert';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import {StoreCrashReportsConfig} from 'sentry/components/onboarding/gettingStartedDoc/storeCrashReportsConfig';
 import type {
   Docs,
   DocsParams,
@@ -210,6 +211,15 @@ const onboarding: OnboardingConfig = {
         </Fragment>
       ),
     },
+    {
+      title: t('Further Settings'),
+      description: (
+        <StoreCrashReportsConfig
+          organization={params.organization}
+          projectSlug={params.projectSlug}
+        />
+      ),
+    },
   ],
 };