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 = () => {