fix(sentry apps): Fix bug where skip on load fields arent loading in …

…UI for Alert Rules (#82282)
getsentry · Dec 19, 2024 · c078575 · c078575
1 parent b72cf40
commit c078575
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 1 deletion.
diff --git a/static/app/views/alerts/rules/issue/sentryAppRuleModal.spec.tsx b/static/app/views/alerts/rules/issue/sentryAppRuleModal.spec.tsx
@@ -176,6 +176,99 @@ describe('SentryAppRuleModal', function () {
 
       await submitSuccess();
     });
+    it('should load all default fields correctly', function () {
+      const schema: SchemaFormConfig = {
+        uri: '/api/sentry/issue-link/create/',
+        required_fields: [
+          {
+            type: 'text',
+            label: 'Task Name',
+            name: 'title',
+            default: 'issue.title',
+          },
+        ],
+        optional_fields: [
+          {
+            type: 'select',
+            label: 'What is the estimated complexity?',
+            name: 'complexity',
+            choices: [
+              ['low', 'low'],
+              ['high', 'high'],
+              ['medium', 'medium'],
+            ],
+          },
+        ],
+      };
+      const defaultValues = {
+        settings: [
+          {
+            name: 'title',
+            value: 'poiggers',
+          },
+          {
+            name: 'complexity',
+            value: 'low',
+          },
+        ],
+      };
+
+      createWrapper({config: schema, resetValues: defaultValues});
+
+      expect(screen.getByText('low')).toBeInTheDocument();
+      expect(screen.queryByText('poiggers')).not.toBeInTheDocument();
+    });
+    it('should not make external calls until depends on fields are filled in', async function () {
+      const mockApi = MockApiClient.addMockResponse({
+        url: `/sentry-app-installations/${sentryAppInstallation.uuid}/external-requests/`,
+        body: {
+          choices: [
+            ['low', 'Low'],
+            ['medium', 'Medium'],
+            ['high', 'High'],
+          ],
+        },
+      });
+
+      const schema: SchemaFormConfig = {
+        uri: '/api/sentry/issue-link/create/',
+        required_fields: [
+          {
+            type: 'text',
+            label: 'Task Name',
+            name: 'title',
+          },
+        ],
+        optional_fields: [
+          {
+            type: 'select',
+            label: 'What is the estimated complexity?',
+            name: 'complexity',
+            depends_on: ['title'],
+            skip_load_on_open: true,
+            uri: '/api/sentry/options/complexity-options/',
+            choices: [],
+          },
+        ],
+      };
+      const defaultValues = {
+        settings: [
+          {
+            name: 'extra',
+            value: 'saved details from last edit',
+          },
+        ],
+      };
+
+      createWrapper({config: schema, resetValues: defaultValues});
+      await waitFor(() => expect(mockApi).not.toHaveBeenCalled());
+
+      await userEvent.type(screen.getByText('Task Name'), 'sooo coooool');
+
+      // Now that the title is filled we should get the options
+      await waitFor(() => expect(mockApi).toHaveBeenCalled());
+    });
+
     it('should load complexity options from backend when column has a default value', async function () {
       const mockApi = MockApiClient.addMockResponse({
         url: `/sentry-app-installations/${sentryAppInstallation.uuid}/external-requests/`,
@@ -233,10 +326,74 @@ describe('SentryAppRuleModal', function () {
       const complexityInput = screen.getByLabelText('What is the estimated complexity?', {
         selector: 'input#complexity',
       });
+
+      expect(screen.queryByText('Low')).not.toBeInTheDocument();
       await userEvent.click(complexityInput);
       expect(screen.getByText('Low')).toBeInTheDocument();
       expect(screen.getByText('Medium')).toBeInTheDocument();
       expect(screen.getByText('High')).toBeInTheDocument();
     });
+
+    it('should populate skip_load_on fields with the default value', async function () {
+      const mockApi = MockApiClient.addMockResponse({
+        url: `/sentry-app-installations/${sentryAppInstallation.uuid}/external-requests/`,
+        body: {
+          choices: [
+            ['low', 'Low'],
+            ['medium', 'Medium'],
+            ['high', 'High'],
+          ],
+        },
+      });
+
+      const schema: SchemaFormConfig = {
+        uri: '/api/sentry/issue-link/create/',
+        required_fields: [
+          {
+            type: 'text',
+            label: 'Task Name',
+            name: 'title',
+            defaultValue: 'pog',
+            default: 'issue.title',
+          },
+        ],
+        optional_fields: [
+          {
+            type: 'select',
+            label: 'What is the estimated complexity?',
+            name: 'complexity',
+            depends_on: ['title'],
+            skip_load_on_open: true,
+            uri: '/api/sentry/options/complexity-options/',
+            choices: [],
+          },
+        ],
+      };
+      const defaultValues = {
+        settings: [
+          {
+            name: 'extra',
+            value: 'saved details from last edit',
+          },
+          {
+            name: 'assignee',
+            value: 'edna-mode',
+            label: 'Edna Mode',
+          },
+          {
+            name: 'complexity',
+            value: 'low',
+          },
+        ],
+      };
+
+      createWrapper({config: schema, resetValues: defaultValues});
+
+      // Wait for component to mount and state to update
+      await waitFor(() => expect(mockApi).toHaveBeenCalled());
+      expect(screen.getByText('Low')).toBeInTheDocument();
+      expect(screen.queryByText('Medium')).not.toBeInTheDocument();
+      expect(screen.queryByText('High')).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/static/app/views/settings/organizationIntegrations/sentryAppExternalForm.tsx b/static/app/views/settings/organizationIntegrations/sentryAppExternalForm.tsx
@@ -284,7 +284,8 @@ export class SentryAppExternalForm extends Component<Props, State> {
     const choiceArray = await Promise.all(
       impactedFields.map(field => {
         // reset all impacted fields first
-        this.model.setValue(field.name || '', '', {quiet: true});
+        const defaultValue = this.getDefaultFieldValue(field);
+        this.model.setValue(field.name || '', defaultValue || '', {quiet: true});
         return this.makeExternalRequest(field, '');
       })
     );