chore: FormModal, ModalHeader, ModalContent COMPASS-5522

[lerouxb]

The following are now using FormModal:

• create-view-modal
• duplicate-view-modal
• import-pipeline
• saving-pipeline-modal
• insert-document-dialog
• drop-index-modal
• edit-item-modal
• open-item-modal
• save-connection-modal
• create-collection-modal
• create-database-modal
• drop-collection-modal
• drop-database-modal

Most of them were using ConfirmationModal before, but some were just using Modal.

For FormModal there's now a ModalHeader (knows about required title and optional subtitle) and ModalContent (knows about max-height and overflow scrolling).

FormModal and ModalContent can also take scroll={false} for the rare case where a select has to be able to hang out of the content. See open-item-modal for an example.

The reason ModalHeader and ModalContent are exported is so we can do the more custom modals (see below).

The following are still using ConfirmationModal:

• confirm-import-pipeline
• confirm-new-pipeline
• saved-pipeline-card
• delete-item-modal
• confirm-edit-connection-string

That's because none of them contain forms.

The following are still using Modal, but with the new optional contentVariant prop which can be with-footer or without-footer:

• pipeline-explain (without-footer)
• create-index-modal (with-footer)
• shell info-modal (without-footer)
• connection-info-modal (without-footer)
• csfle-connection-modal (without-footer)
• non-geniune-warning-modal (without-footer)

For the create-index-modal contentVariant="with-footer" case where we have a customised footer but it still looks like in FormModal or ConfirmationModal I also factored out the ModalFooterButton styles that mimic the spacing of the footer buttons in the confirmation modal. That's used by both FormModal and CreateIndexModal.

Worth noting that some of these had extra Close buttons in footers bottom right that do exactly what the close cross icon top right does and some did not. For now I standardised on removing them. If we really want them (I can't see anything in leafygreen's guidelines that recommend them) I'd rather add support to Modal or maybe even add an InfoModal that they all use. Then they can all behave the same.

The following are left for a future task as part of milestone 4b:

• export-modal (export to language)
• export-modal (import export)
• import-modal

The following are left unchanged:

• settings modal
• connecting modal

Only change to settings modal is that I got rid of ModalTitle and hardcoded it there since it was the only thing left using it. Everything else uses ModalHeader (extracted from ConfirmationModal) to make the header.

I just left connecting modal alone for now. It uses Modal without a contentVariant just like Settings does. It doesn't seem to match any of the other patterns.

[lerouxb]

Good that I checked because a bug did slip in at the last minute 😬