ref(metrics): Update the logic for the submit button in the create/edit modal

[priscilawebdev]

Before:

https://github.com/user-attachments/assets/38036467-108a-452e-838f-7d56fe69d681

After:

https://github.com/user-attachments/assets/9dfce3fe-d463-486c-803a-568878a5c6d1

[codecov[bot]]

Bundle Report

Changes will increase total bundle size by 851 bytes :arrow_up:

Bundle name	Size	Change
app-webpack-bundle-array-push	28.87MB	851 bytes :arrow_up:

[evanpurkhiser]

So this is basically adding a new concept of "validness" vs "error". Error is saying you tried to do something and something was wrong" where as valid is saying "you can't do this because there is going to be an error"

Does that mean a user will never see an error anymore because you will not be able to submit the form until it is valid?

Should invalid be strictly constrained to "all fields are not filled out" in which case maybe INVALID is the wrong state and it should be INCOMPLETE?

[priscilawebdev]

Does that mean a user will never see an error anymore because you will not be able to submit the form until it is valid? If the user interacts with the field, we also provide hints if the field's value is invalid.

basically, we don't want to show errors immediately when opening a modal. Instead, we prefer to display a disabled button with a message like 'Hey... you still have to fill out things before you can click here.' Does that make sense

Should invalid be strictly constrained to "all fields are not filled out" in which case maybe INVALID is the wrong state and it should be INCOMPLETE?

~INCOMPLETE works too but a field can be complete and with an invalid value which makes the form INVALID~ Never mind I have updated the code again. Please let me know your thoughts on the new changes 🙂

[priscilawebdev]

https://github.com/user-attachments/assets/47bab6c4-9be9-4bd6-a5ca-336a7c8e7d95

@evanpurkhiser it looks like this ^

[codecov[bot]]

Test Failures Detected: Due to failing tests, we cannot provide coverage reports at this time.

:x: Failed Test Results:

Completed 7621 tests with 2 failed, 7619 passed and 0 skipped.

View the full list of failed tests

SavedIssueSearches

• Class name: SavedIssueSearches can create a new saved search
  Test name: SavedIssueSearches can create a new saved search Flags:
  • frontend
    
    

  Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)
  
  Expected: Anything, ObjectContaining {"data": ObjectContaining {"name": "new saved search", "query": "is:unresolved"}}
  
  Number of calls: 0
  
  Ignored nodes: comments, script, style
  ...
      at .../views/issueList/savedIssueSearches.spec.tsx:245:24
      at runWithExpensiveErrorDiagnosticsDisabled (.../sentry/sentry/node_modules/@.../dom/dist/config.js:47:12)
      at checkCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:124:77)
      at checkRealTimersCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:118:16)
      at Timeout.task [as _onTimeout] (.../sentry/sentry/node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)
      at listOnTimeout (node:internal/timers:573:17)
      at processTimers (node:internal/timers:514:7)

• Class name: SavedIssueSearches can edit an org saved search with correct permissions
  Test name: SavedIssueSearches can edit an org saved search with correct permissions Flags:
  • frontend
    
    

  Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)
  
  Expected: Anything, ObjectContaining {"data": ObjectContaining {"name": "new name"}}
  
  Number of calls: 0
  
  Ignored nodes: comments, script, style
  ...
      at .../views/issueList/savedIssueSearches.spec.tsx:194:23
      at runWithExpensiveErrorDiagnosticsDisabled (.../sentry/sentry/node_modules/@.../dom/dist/config.js:47:12)
      at checkCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:124:77)
      at checkRealTimersCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:118:16)
      at Timeout.task [as _onTimeout] (.../sentry/sentry/node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)
      at listOnTimeout (node:internal/timers:573:17)
      at processTimers (node:internal/timers:514:7)

[sentry[bot]]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ Error: Target container is not a DOM element. /alerts/new/:alertType/ View Issue
• ‼️ Error: Target container is not a DOM element. /issues/:groupId/ View Issue
• ‼️ Error: Target container is not a DOM element. /alerts/rules/:projectId/:ruleId/ View Issue

_{Did you find this useful? React with a 👍 or 👎}