CreateModModal causes multiple DOM elements with same id

[twschiller]

Context

• Certain modals, e.g., the CreateModModal can cause multiple elements with the same id to be on the Page. That's because there are scenarios the form in the modal has fields with the same name as the being displayed in the main content
• That results in technically invalid HTML, and breaks getByLabel and label-based logic in Playwright

Discussion

• An option explored was to add a random UUID to control ids:

  pixiebrix-extension/src/components/form/FieldTemplate.tsx

  Line 211 in cc4caf3

  {formControl}

  . However, that, by itself, causes Jest snapshot tests to break

Related Code

• pixiebrix-extension/src/pageEditor/modListingPanel/modals/CreateModModal.tsx

  Line 299 in cc4caf3

  const CreateModModal: React.FunctionComponent = () => {

[grahamlangford]

See #9350 for an example of resolving this issue by giving more specific ids to fields

[grahamlangford]

Since it's just the create mod modal, I think we're safe to close this now @twschiller