cleanup custom DialogHeader inside Release Notes

This is some cleanup to avoid the workarounds that we’ve used in some dialogs to support complex headers. #6032 talked about being able to provide support for passing in a JSX element rather than a plain string, which means we can clean up this custom element:

https://github.com/desktop/desktop/blob/b5529325ae629a52b02cb3e07699f1ccbcfb2cfa/app/src/ui/release-notes/release-notes-dialog.tsx#L158-L175

Version: development aka b5529325ae629a52b02cb3e07699f1ccbcfb2cfa

Testing:

To see this dialog for yourself, build the app in development mode and run it up:

$ yarn
$ yarn build:dev
$ yarn start

With it running, find the Help -> Show Popup -> Release notes menu item:

This will then show the dialog - make a note of how things look to ensure that the cleanup in here doesn’t affect the styles.

With that change in place, check out the contents of render() inside app/src/ui/release-notes/release-notes-dialog.tsx. We should be able to remove the <DialogHeader> element and only use props on <Dialog> now to achieve the functionality:

    return (
      <Dialog
        id="release-notes"
        title={header} // TODO
        onDismissed={this.props.onDismissed}
      >
        <DialogContent>{contents}</DialogContent>

One thing to check while you’re in here is that the close icon is positioned in the top-right (like in the original screenshot) - it looks like having a tall header now causes the default dialog styles to change:

These are the header-specific styles for this dialog that you might need to tweak:

https://github.com/desktop/desktop/blob/b5529325ae629a52b02cb3e07699f1ccbcfb2cfa/app/styles/ui/dialogs/_release-notes.scss#L11-L42

But I think you’ll need to look at the base styles for the dialog to get this working correctly again.

[tierninho]

@alejandronanez go for it and big thanks for contributing ✨

[shiftkey]

@alejandronanez you’re on the right track, but let me see if I can clarify things:

If I understand this correctly, what we want to achieve here is to avoid the usage of DialogHeader inside a Dialog component, to get to something like this:

Because we added support for using JSX in the header of a Dialog, we should be able to just pass in dialogHeaderContents (or a tweaked version) and avoid the need to import and wrap it in a <DialogHeader>. Does that clarify things?

Also, I want to make sure that you’re aware that this would affect other dialogs, are you aware of this? -

This is fine - the work to make changes to Merge Conflict and Merge Branch is tracked in #7043, and we have an open PR #7151 to go with it.