GitLab Incubation Engineering, 8 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Incubation Engineering Jamstack -- Weekly Demo October 8th 2021

Description

Parent issue (Creating a Gitlab Onboarding Page): https://gitlab.com/gitlab-org/incubation-engineering/jamstack/meta/-/issues/7

JSON to Yaml Converter:
- https://gitlab.com/gitlab-org/incubation-engineering/jamstack/meta/-/issues/9
Highlighting in Yaml:
- https://gitlab.com/gitlab-org/incubation-engineering/jamstack/meta/-/issues/10

A

Hi and welcome to the second weekly update for a jumpstart incubation engineering, I'm janis. Last week I was working on the gitlab pages onboarding site this week. I tried to refine what I made last week. Last week's ui was a prototype, basically a proof of concept.

A

This week I went to work on building a much more stable version of that same editor.

A

By doing this, I created something that might be useful actually beyond this particular application.

A

One of the tasks I had was to have this yaml file be created by javascript, one from a javascript object, so, basically being able to programmatically, create yammer. Usually to do this, we use the yaml gis package, which does a splendid job, converting json to yaml, except this file is supposed to make life easier for humans. So I really really need to support them with comments, um and I wanted to be able to programmatically inject those comments. Too.

A

Comments obviously aren't supported by jason, so I created a workaround. I created this tool working title, yaml jason. I think there's probably something better than that, but it takes a json object as an input and similar to yaml js has a dump function that outputs the yammer now the difference to yammer js is that I can feed it a json object that looks like this.

A

You see there are keys that start with with a hash sign. When I dump this object, it will convert those entries marked as keys with this hash sign to comments inside the yammer.

A

It works with generic comments that have a single hash as an id, and it will put those at the top of the object or you can specify other keys of that object after the pipe symbol, and it will inject the comment right above the entry with that key.

A

It works with race. 2 just start a string with a hash symbol, and it will be converted to a comment at that position in the young.

A

Now, although the engine that powers all this is now completely different, the front end looks pretty much similar to how it did last week. um But if, in the future we were to add another very deeply nested setting it's as easy as just specifying this in the json, uh including the comment.

A

um This obviously could even come from the api. So by doing this, this way I'm paving the way for backend, driven automated project type detection and different pipeline structures for different projects.

A

The other thing I was working on is a method to highlight certain sections within the yammer.

A

This part is much more visual luckily, um but what I wanted to do is I want the user to immediately get a visual feedback of the changes that they made.

A

So I've devised a method to highlight certain sections inside the yammer.

A

When I focus on this input field, it will highlight the corresponding section here, including the comment again. I try to make this as reusable as possible, because I feel that this might be useful too way beyond github pages.

A

The yaml editor is basically just a view wrapper around the source editor. It takes a json object in the format that I explained earlier with comments as a value prop, but it also takes another prop called highlight. um This can be a path to basically any point within the object that was passed as a value.

A

The component will then figure out where inside the yaml this bit is located and highlight the appropriate lines.

A

The nice thing is, this is not just a diff highlight, so the past in path can be changed by any event, not just input events.

A

We can change this, for example, to a hover event, so hovering over a certain input area can highlight the corresponding section inside the yammer. I could imagine that in other areas of gitlab, maybe the visual pipeline editor. This can be a very useful application too.

A

So to wrap this up. I've spent some time this week on improving and productionalizing the interface that helps creating the gitlab ci yaml file for pages I'd say this page is now about 70 complete. I need to write a few more tests and clean up the code before this can be merged, but next week, I'd also like to reiterate, on the left hand, side of this interface.

A

Currently it doesn't give you an input for all the options needed to get started, and if you have a non-javascript framework, you have to go in and make other changes on the right hand, side which may not be the best qx.

A

On the other hand, a form with more than three input fields automatically feels cluttered, so I want to break it down into a multi-step interface, but that is something for next week. So we'll talk about it, then this was it for this week's update. I hope you enjoyed watching, see you next week. Bye.