Skip to content
Snippets Groups Projects

Make file templates easy to use and discover

Resources

PM @mydigitalself | FE @brycepj | UX @pedroms

Description

Currently, to use file templates, users have to type in specific file names (e.g. .gitlab-ci.yml, .gitignore or LICENSE). That's fine and innocuous, but not really discoverable. The file templates feature speeds up users' workflow and it should be shown more prominently, not as an “easter egg”.

Proposal

On the New file and Edit file screens:

  • The New file screen always shows the template option (see designs below)
  • The Edit file screen only shows the template option if the file name matches a file type
  • Divide the current template dropdown into two dropdowns: Choose type and Apply a <type> template
  • Hide the Apply a <type> template by default, showing it only if:
    • The user has chosen a file type
    • Or the file name matches a file type (e.g. having a .gitignore file name should show a Apply a .gitignore template dropdown)
  • When choosing a template to be applied:
    • If the file is empty OR the user has just applied a template but has not manually modified the file's contents or name (added or removed text), the chosen template should automatically replace the file's contents and name without asking for confirmation
    • If the user has indeed manually modified the file's contents or name (added or removed text), an alert should be shown asking if they want to apply the chosen template (which will replace the file's contents and name) or cancel
      • While showing this alert, the filename and contents should be in “preview” mode, showing how the file would be if the template was applied. The file editor and the “Template” dropdowns are disabled (see image below).

Also, if the user is editing a .gitignore file (for example), the Choose type field should not be restricted to .gitignore, we only pre-select that option based on the file name to help the user.

Stretch goals

  • “Preview” mode before applying a template
  • #29418 (closed) - Indicate when file template is loading

Designs

:mag: Check design specs (for spacing, sizes, colors and text copying) — Hide the notes using the control in the top-right corner

| Empty | File type chosen | Template applied | Type detected from file name | New/edit file (mobile) | | --- | --- | --- | --- | --- | --- | | empty | type-selected | template-applied | type-detected | empty |

Links / references