GitLab Source Code Group, 29 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create::Source Code. In-context editing PoC walkthrough

Description

Epic: https://gitlab.com/groups/gitlab-org/-/epics/4863

A

Hello, my name is Dennis I'm, the staff front engineer on create source code team, and today I would like to demonstrate you the proof of concept for the in-context editing of the blobs in Repository.

A

So we are in an upholstery. Let's open a file, for example this JavaScript file, so the viewer is not changed. The viewer is, it looks exactly as you would expect it to look like, but the what happens when you click the edit button the viewer gets, swapped gets changed uh with uh to it, changes to the editor to the source, editor and the button. The edit button is changed to cancel so that you could cancel editing the file, so you can toggle back and forth the first time you do this.

A

Switching from the viewer to the edit. uh The editor is not shown right away because the editor needs some time to bootstrap. We do this on uh for the performance reasons. We do not bootstrap editor unless you really need it, but if you do it after, like from second time, it's it's instantly there, because the editor has been bootstrapped already.

A

Another thing you will notice is the slight difference. In the view, um the font size in the editor is smaller than the font size in the viewer. This is uh this is easily adjustable, but the main difference is the syntax highlighting changes so um because the viewer highlights with highlight.js and the source header highlights with the uh internal tools of Monaco editor, the Monarch Library, uh nevertheless functionally what functionality wise.

A

When you click to the edit, you can actually start editing the file, and once we detect that there are changes to the original file, we uh show the save button in real time. The save button should come should be shown next to the cancel, because we want to discard any changes to the file, but this is just the proof of concept. If you remove the text you have typed in and the contents of the file is back to the original state, the save button is gone, so cancel button is shown and again in real time.

A

This cancel button won't go away. It will be on the screen all the time. Another thing to note here is that when we click cancel, is the change in the URL? So when you view the file, we go to this route blob once you uh click edit, the URL is changed to the route edit. So this is for those users who accidentally click uh accidentally reload the page.

A

They will be uh guided to the edit to the editing of the file right away instead of going to the blob View and then again through the same procedure. So this conventional form is not going to go away. This is the form that we all know. The thing is the thing to note: is this commit workflow Fields so commit message: Target Branch, uh potentially the initialization of merge request. So uh in the um if we switch back to blob.

A

We do not have this in the POC, ideally, those fields will be shown when you click save, probably an overlay should be shown and those fields will be in the overlay where you confirm the save, namely you make the commit, so that's pretty much it about the in context. Editing.

A

Thank you very much.