Allow users to use gitignore templates in existing repositories

[thenewpotato]

Closes #2197

Description

Allows users to use gitignore templates in existing repositories

• Adds a dropdown menu in the Ignored Files section of Repository Settings that appears when the .gitignore is empty. The dropdown shows a list of available gitignore templates (same as the list of templates shown in the repository creation menu) that the user can select from.
• Selecting a template immediately populates the "Ignored files" TextArea with the content of the selected template. Users can make additional changes before saving the change.

Screenshots

Release notes

Notes:

[tsvetilian-ty]

@thenewpotato first contribution to GitHub Desktop 🎉 🎉 🎉

As an improvement, I think it's a good idea to show the template picker only when the .gitignore file is empty, as suggested in the second paragraph of #2197 (comment)

[thenewpotato]

@tsvetilian-ty Thanks for the feedback and for the welcome!

I have pushed new changes that incorporate your feedback. The UI now uses a Select component, and it only appears if gitignore is empty when the component loads.

The PR description and screen-recorded demo have been updated.

[tsvetilian-ty]

@thenewpotato thanks for the changes!

I'm not sure if It looks like .gitignore is empty. You can start from scratch or select a template to get started. it's necessary. I think if we remove the description and change the select label to Use Ignore Template, it will be self-explanatory and reduce the visual clutter 🤔

@sergiou87 what are your thoughts on this, as someone involved in the original enhancement discussion?

[thenewpotato]

@tsvetilian-ty I agree with that. I went ahead and removed the hint text and tweaked the Select label. I also noticed that the workflows on my previous commits failed because of linter errors, so I went ahead and fixed those too.

Demo GIF in the PR description has been updated. Let me know if there's anything else!

[sergiou87]

Hi there!! Sorry, I've been busy and missed this 😢
I will take a look at this tomorrow and let you know!

[sergiou87]

Sorry again for the delay, I finally took a look at it. It feels odd that you can select a template, make changes, and still be able to choose another template (potentially destroying any customization), that's why I suggested the hint text + something to create the gitignore from the template. But it's true I can't think of a better option than this.

Maybe we should do something like… when the gitignore text is empty, we show a hint text saying something like "It looks like .gitignore is empty. You can start from scratch or select a template to get started." as @thenewpotato suggested, but the select a template part is a link. When that link is clicked, the Select element with the templates is shown.

Once the gitignore text area is not empty, both the hint and the Select element (if visible) are hidden. If the user wants another template, they have to clear the text area, and will immediately get the hint again.

In order to avoid much movement of UI elements, maybe it's better to put the hint and Select under the gitignore text.

It's still not 100% great. I totally understand why @thenewpotato initially used a context menu: because you take the direct action of selecting the template, but as @tsvetilian-ty said, using a context menu to display a list of possible values is not a common pattern. Another option would be showing that Select in a new dialog but… (1) sounds overkill (an entire new dialog just for that Select element 🤯 ) and (2) going back from that new dialog to the repository settings with the template name/text is not hard but more convoluted than I'd like 😕

I'd like to know your thoughts about my suggestion, and also to hear what @tidy-dev thinks about this.

[tidy-dev]

I think I like direction of show and hide the select component on empty. I don't think it needs a hint if it appears and disappears on content clearing/adding. It is true tho it is kind of jumpy to do this - I can't see top vs bottom helping (unless we keep a "blank" space at bottom for this to appear in).

This is playing with adding an animation to help with the jumpiness.. Additionally, we could put a "Clear to select a new ignore template" paragraph in this select place when hidden to help with jumpiness too. With "Clear" being a link, so they could clear in one click to get back to templates.

Other notes with below, is need some logic to set the select back to "None" when user clears text. :)

Screen.Recording.2022-07-26.at.8.44.07.AM.mov

[tidy-dev]

Other option with it below:

Screen.Recording.2022-07-26.at.10.14.49.AM.mov

[sergiou87]

Hey @thenewpotato ! I've talked to @tidy-dev and shared some ideas. We still are not 100% convinced about any of them, so we're gonna talk about this with the rest of the team when we're all back from vacations (mid-August).

Sorry it's taking this long, summer is just not the best time 😅 Thank you for your patience 🙇‍♂️

[thenewpotato]

@sergiou87 @tidy-dev No worries at all! Thank you for taking the time to look into this. I also noticed that the current behavior is such that you can switch the template mid-editing and overwrite changes in the textarea. I was fine with this behavior because changes in the textarea aren't final anyways--they aren't written to an actual gitignore until the user hits the submit button. If the user isn't happy with the changes, they can always click cancel and start over. In either case, let me know the result of your discussion with the team! I'm not bent on my approach and would be happy to implement any changes :)

[nycdotnet]

Hi - just wanted to make some comments as I will make great use of this and commented on #2197 .

@thenewpotato great job with this PR - your screen capture video is exactly what I had in mind and is slightly simpler and better than what I proposed. Great job.

@sergiou87 @tidy-dev in my opinion, it's OK for the dropdown not to disappear after making a selection. In real-world use cases, someone will not do a significant amount of work in the text area and then change the dropdown to something else. At most they would copy and paste something. When they go back in to this dialog after saving (and when there's content in the .gitignore) the dropdown won't show.

If you feel strongly that the dropdown should disappear immediately after selecting an option, and want to have it reappear if someone deletes all the content from the text area, I suppose that's fine. I think/agree it should default to NONE. It's also fine because "cancel" is there for mistakes. If the "delete everything to get the dropdown back" UX is not clear, the user can just click cancel in the case of a mis-click (or delete the .gitignore and reopen the dialog).

Excellent work all around and many thanks.

[sergiou87]

Hi again!

Sorry for making you wait, we've been going back and forth with this a few times internally trying to come up with a trade-off that satisfies all of us. First of all, a month ago @tidy-dev introduced a new component called PopoverDropdown in #15339 that you can see in action here:

Screen.Recording.2022-09-22.at.11.49.55.AM.mov

We thought it would be nice to go back to the original idea of having a hint with a link suggesting the use of a template "It looks like .gitignore is empty. You can start from scratch or select a template to get started.", and when this link is clicked we would make this dropdown show up from it.

However, we think it'd be useful to keep the hint around even when the .gitignore is not empty, that way users can switch to another template without clearing the text first, using a different text like: "You can override the contents of .gitignore selecting a template."

Regarding the dropdown itself, just as the one in the video above, it would be a filterable list of .gitignore templates.

[nycdotnet]

Hi all - still very excited for this feature. Every time I make a repo I regret not having it. Thanks @thenewpotato for your PR.

[tidy-dev]

@thenewpotato Just checking in on this. We just discussed this amongst the team and the approach outlined by @sergiou87 in #14943 (comment) is our preferred path forward. If you are able to and want to pick this up again, please let us know otherwise we will close this to open it up for other community contributions.

[thenewpotato]

@tidy-dev Thanks for bumping this thread. And thank you @nycdotnet for your comment!

I like the approach @sergiou87 outlined and will be working on implementing it.

[thenewpotato]

@tidy-dev @sergiou87

I'm having some issues with the PopoverDropdown component. It looks like the styling of this component has changed since last year. In particular, it now has a border and background and is probably not suitable for inline use. Screenshots attached below.

I think one option would be to bootstrap a custom component from more primitive components (maybe the Popover component?). How should we proceed?

This is what the gitignore screen looks like with the PopoverDropdown component as it stands:

which matches its new appearance in the pull request preview dialog:

[sergiou87]

Sorry about that @thenewpotato ! You're totally right. I opened a PR that refactors the PopoverDropdown to allow being used with LinkButtons too: #16778

I think it's nice to use the same component because this popover, unlike the generic Popover, has a close button and a title bar. So there is some useful behavior to be reused.

In order to use it with a LinkButton, you can do something like…

  private renderPopoverDropdownButton = (props: PopoverDropdownAnchorProps) => {
      return (
        <LinkButton
          onClick={props.onClick}
          onAnchorRef={props.onAnchorRef}
        >select a template</LinkButton>
      )
  }

I still haven't discussed it with my teammates but I hope they find the changes in that PR acceptable. I will ping you as soon as that PR is merged (or if we decide to do something else). Thank you for your patience and sorry for the trouble 😓

[sergiou87]

Hi again @thenewpotato ! I'm afraid my PR won't be of much help here. In case you haven't noticed, lately we're doing a big effort to improve accessibility of GitHub Desktop, so we reached out our accessibility experts and they told us using a link for something other than navigating to a different part of the app is not a valid approach. Therefore we have to rethink the UI a bit to fit this "select template" action as a button that displays the popup.

Just to give you a sneak peek of some ideas we're playing with, @tidy-dev suggested that we remove the hint text and just leave a button that triggers the popover:

Please, wait a bit until we take a final decision. We will discuss about this internally and let you know about the path forward as soon as possible.

Sorry for all this trouble. After all this time the team priorities changed to some extent and we have now more things to keep in mind for new features 😳

[tidy-dev]

👋 @thenewpotato Sorry for such a long time circling back. We discussed this and have landed on:

Using the new dropdown popover button with the words. "Replace with template" as shown in @sergiou87 above comment. Upon selection it will change to "Template: {selectedTemplate}".

As for some discussed concerns:

• We think the prompt of "Replace with template" is enough to communicate that the existing template will be replaced. Thus, no need to switch between a link that says "clear" and the template input.
• As pointed out above by @nycdotnet, a user can cancel if they make a change and want their original git ignore back.
• This design allows for easy to switch between templates if the wrong one was selected at first (no hitting clear to get back to template selection).

Please let us know if you would like to continue working on this after such as long time, otherwise we will close in a few weeks. Sorry again for such delay.