Add file tree popover and save display state in local storage

What does this MR do and why?

For #350723 (closed) and #360111 (closed)

These adds two behaviors to the pipeline editor's file tree:

• When a user revisits the pipeline editor, the file tree display state will be closed or open depending on how they last left it. The state is saved in the browser's local storage.
• A popover giving attention to the file tree will show up for the first time if the user already has a YAML config. The is temporarily dismissable by clicking outside the popover and permanently dismissable when clicking on the X close button of the popover. For now we are saving the dismiss state in local storage; in future iterations we'll use User Callouts to store the dismiss state permanently in the database.

No changelog trailers added since this feature is behind the disabled pipeline_editor_file_tree feature flag.

Screenshots or screen recordings

Saving the display state of the file tree:

display_state

Dismissable popover shows up for users with a YAML config:

Screen_Recording_2022-05-02_at_17.09.10

Popover will not show up if users go through the pipeline editor for the first time (the file tree button is also not available at this point):

empty_state

How to set up and validate locally

Setup

1. Enable the feature flag.

   Feature.enable(:pipeline_editor_file_tree)

2. Visit the pipeline editor (CI/CD > Editor)

File Tree display state

1. Make sure 'pipeline_editor_file_tree_display' is removed from your browser's local storage. (Inspect Element > Storage > Local Storage)
2. The file tree will be closed by default. Click the button to open it, then refresh the page. The file tree should still be open.
3. Click to button again to close the file tree, then refresh the page. The file tree should remain clsoed.

Popover

1. Make sure 'pipeline_editor_file_tree_popover_dismissed' is removed from your browser's local storage.
2. On a branch without a .gitlab-ci.yml file, the popover should not show up.
3. Otherwise, the popover will show up once. If you click outside or on the button, the popover will be dismissed.
4. Refreshing the page will not make the popover show up again.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.