GitLab Pair Programming - Frontend, 14 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20230414 - Are we finished with gl-form-fields yet?

Description

In this pair programming session we work even more on wrapping up gl-form-fields.

A

You have to you have to tell me about your Brew, though, like how.

B

Are you? Oh that's your method of choice, yes and.

A

All of that, okay, so we've got the tests open here. Can you see that I.

C

Can see it yeah.

A

I'm gonna try to set up my camera at a at a favorable Place.

C

Increase yeah there we go so.

A

We're resurrecting GL form fields uh and um I wasn't finished with it. So we have some unit tests to write.

A

And but it seems like maybe I, there's a validators at spec, but is there also a form field? Validators aspect like did I just commit a completely empty file. That's not referencing anything yeah! This is the completely empty files. Validators respect.js, oh there's form field valid they're, both empty all right, I! Think we want your field. Validator I, think the other one is is not means. Yes, because the the component is called is called form field validators, okay, so let's go to validators.

A

Although there's a validator's JS file, which is, is validator's spec to to test.

C

uh Yes, yes, right.

A

That's right! That's right! That's right! That's right! Okay! Yes! Okay! Well! We're not doing that today! That's that's all right! So first things. First, let's just copy a bunch of this stuff and then start deleting things because I don't know about you, but that's how I write my tests?

A

Oh yeah, if only if only there was some sort of smart test.

A

uh uh I know what you're referencing, but I don't want to talk about it.

A

Okay, where did my compile? Where did my compile thing go there? It is.

C

A

Gonna raise this, so it doesn't go away.

A

um So I think the only thing we need to uh can we do is maybe start by doing some it to do's and let's just list out the cases that we kind of need to do, yeah sure here we'll we'll get the we'll get the other file open.

D

So it's got to do.

A

Today's some QV coffee, some Columbia medium roast.

A

It uh should call validators.

C

A

uh The prop with value prop.

C

A

Should not call validators.

D

uh When told not to that's great.

A

C

Is like what to do.

A

C

A

Programming language um yeah: let's.

C

A

It does not render anything should not render anything.

C

A

A

uh That's it I think. That's it.

A

Yeah, we can do like some fun, optimizations I suppose um later.

C

On but yeah cool, okay.

A

What do we actually need from all this stuff that I copied? We need amounts, we don't need netstick, we don't need math values, don't need that. Don't need these I, don't think we need that we'll use, validators, sure uh uh I, don't think we need anything uh data stuff.

C

A

Need to test the value and it'll be.

C

D

D

A

Rapper and we'll give.

C

It a test we'll give it props and the props will be yes, maybe the it'll.

A

Just be empty and then in here we'll do return, amounts.

A

We like to set we like to set the wrapper in the create wrapper function. I'm not entirely sure why, but you know, it's probably probably good to be consistent forms feel.

C

The evaluate decor.

A

Stata spread the stuff we pass in. We want value to be test value, we want validators to be required and we want should validate to the true.

A

uh Actually- and we're going to do we should we should spy on this. We should spy on this validator. How do you do that with Jeff? You just adjust Dot mock, validators right and now everything.

C

In there is, you need some mock validators.

A

Like do we want to just let's just import required and just see if D1 Market well yeah, because how do we know we're calling it? Oh I see what you're saying we could also just pass in I see what you're saying we could also just pass in a list of just spots. That's true we'll do that we'll do that?

A

Okay, it should call validators with value. So for this, what we want to do is we want to create some validators. So maybe.

C

A

Equals just that FN just dot event. Yes, three seems like a good number I, don't know why it just.

C

Feels right, yeah.

A

That's usually when, when Loops start.

A

Does it bother you that there's like no easy way to create like an array of constants in JavaScript.

C

What do you mean like.

A

You got to do like new array, 20.

D

A

Fill and like uh Matt and then that doesn't even really work because it has a length of 10, but it doesn't iterate over the empty things. um Yes, you know, you're I see what you're saying. Yes, that is frustrating um but I have like ingrained in my head array: number dot fill 0.map whatever, and it's like that's yeah yeah. So.

D

A

Still kind of it's kind of annoying, though yeah, um it's embarrassing how other languages have cool like range functions and stuff and yeah or just like whole constructs where you can do like one dot dot. Five yeah.

C

A

All right, if we want to create the wrapper we we want to pass in our new validators.

C

D

A

Just see expect or let's see here, validators, do it right away, yeah that for each validator.

C

C

Validator Dot.

D

To be called where best value sweet.

C

A

We get oh, oh uh to fail. Two total. The to-do has to be removed, ah yeah. That was.

C

A

I'm just bimming too hard over here. Oh, we got a check mark sweet, I'm, going to go over to validators.js and delete whatever I put in there so that it stops running desker. Okay, awesome! All right! We did. We did it great.

A

um What doesn't it like about this.

B

A

What is it not like it replace to be called with, with its canonical name of what to have been called with it's to have been called with.

A

That's weird: okay, wow uh cool. It's an interesting winter issue.

A

It's do not call validators when told not to um we're gonna copy the same function here, except we're also gonna, say.

C

A

That one passes, that's how we write a whole test Suite. We just copy the test block that passes into all of our other test cases and everything important and then we add a little knot in here. Oh interesting and look good at it. It runs it passes. This is some hardcore tdd that you're uh you're, seeing right now, Lee.

B

A

I think it should not render anything ever forever yeah. This is a test deferred development.

A

I think we can just create the wrapper here and then expect rapper.html to got to be. Do you think it do you think they put a comment note in there, no I think it's empty.

D

Oh, it's still to dude.

A

All right we have tests. Oh my gosh. We we wrote all the tests passing first, try all right, we well, we need it. We we need one more though it uh to do should well we'll just we don't need it to do. Should emit update. Oh.

C

A

You're right um is this: is this like the Boolean result or the string or it's the string? It's the string with with error.

D

Message with the 3D results, uh validator.

A

Yeah, let's do that. Okay and now we can create a wrapper.

A

um So let's create the wrapper and then let's set the prop to Value um of empty and then assert that it did it. So it's doing wrapper. That's that crop set porpoise I.

C

A

It's actually props, you think it's actually set.

A

I think it's an object.

A

A

So first we'll say: expect rapper.emitted.

A

D

A

Be and no I don't know what is it at the beginning, we'll find.

C

D

A

Think it's actually going to emit an empty string at the very beginning, but we'll see all right.

A

This is deferred, so rapper dot emitted, update dot to be.

D

And we'll say a string.

B

We're back on board builds uh GL phone builds. Yes, we are awesome. Awesome now.

A

I'm happy about it very happy: it's undefined! Okay! We might need the next ticker here. Oh yes, it's a watcher.

A

C

A

Next tick, rum.

D

A

What do you think actually do you think I can just await this? Maybe it'll work, that's a good idea, no wait! Oh it did. It did emit something it emitted a function. That's did it really.

A

Oh, um oh, no! uh Yes, it emitted a function.

A

um Yes, I know what's going on, can we replace expect any string with just an empty string right now, so we could actually see the value that came out of it if, when, when that all is said and done,.

A

um Required the validator takes in the message: it's a function that returns a function required is.

D

uh Okay, apparently.

A

And maybe that's not very obvious, but this.

C

Is a required field? Yeah.

A

No, that isn't clear that isn't clear at all. I understand why we did that, though um I don't know what we want to do to improve that maybe, but.

D

Wow, oh yeah, just a.

A

Bunch of just a bunch of good coders over here, oh yeah, all right cool, that's great! So this worked yeah, let's see, does the linter complain at all no fly Checkers we are. We are in the green great. uh Do you wanna? Do you want to push up a fix up commit to this.

C

Oops e f: yes, this one.

D

A

It's on its way.

C

B

While that's pushing and catch me up, but we um is this part of the form fields or is form-filled star, and this is a kind of bolt-on on top of it, we split it out into to kind of uh a validator and the actual generator so to speak.

A

This is a great question, so uh this is a implementation detail of form fields, so this unit is not expected to be imported outside of gitlab UI this component.

A

um But what was happening with the original problem was because of view reactivity and everything was computed anytime, any value changed.

A

We would run the validators for everything again right, and so somehow we needed to make it smarter so that it was selective of what state it was updating based on what nested state it was watching and I tried. One round of that and I didn't like what happened, because I didn't put it to a separate component created a whole bunch of Watchers inside of the main component, and it got very convoluted, um but I had a test there to ensure that we were still doing it.

A

So with that test I then realized components are just State Watchers, so I just pulled this form field, validator component out to watch for the value the validators and it will update whenever those change- and that was working really great and my awesome integration tests still passed. So that was a a nice refactor. So.

B

A

um Yeah there's some comments, I'm, trying to explain why it's there.

B

But I think you've got use case ready for when this hits when this gets merged. Well,.

A

I've also had someone reach out because related to view three. um It sounds like one of the validator libraries that's used in the customers project or something else they're wanting to move away from it. So awesome, yeah cool. Are you optimizing I'm trying to think about it? You know so like find, would return the function, but it would have to run the function so that doesn't really save us anything with some some bails right at the beginning, the JavaScript yeah it'd be cool.

A

If um it'd be cool, if you could do the, uh what do they call? It I forgot what the functional term for it would be, but if, when I create a map, I haven't streamed through everything yet like. If.

C

I could oh.

A

Yeah, that would be yeah yeah. Maybe one.

C

A

Even I would even take like a reduced while.

D

A

How interesting reduce wow that's a good idea. I can see that being the Catalyst for some sort of deferred streaming thing, uh I think this is good to do and then I think we had. The docs was maybe the other to do.

C

A

All right we want to just copy something from somewhere and and just replace arm group pretty similar great. Let's do it.

A

ah We could just we could just start writing usage form.

D

Field we'll say: Geo form, Fields provides.

D

A form Builder form Builder.

A

Functionality form loser functionality or ease of building simple forms out of other git lab.

C

Ui form components.

A

Provide technical information on how to use the component add.

C

Code examples, if relevant can.

A

We yeah can we drop a code example. We can take it from the take it from.

C

The story yeah.

C

A

Is actually I know we have it in here somewhere.

A

I remember seeing it the story's gonna be there in the template of the story.

A

Oh yeah, but I figured. We could. We could add the type information here as well. That's one thing that I really like about the new drop down: uh Docs interface.

A

A

C

Props cornfield prop Stakes of fields which is a map uh wow. We won't say that because that's like a different thing: string field, death, finish.

B

Are you banished to the kitchen Port.

A

I am I'm actually making coffee. This is why this is what's happening right now, my banished to the kitchen yeah I've got my coffee ground and I. Have my coffee making apparatus ready.

B

A

Just have to milk, clear, okay.

B

A

I have to mute myself while Bessie's here she's loud.

A

Something like that and then values is.

D

Type of tea form ID.

A

I see I see what she's saying.

A

Yeah right, that's that's how you specify that they're, they're, matchy-matchy, I, think you're right, I, don't I! Think field definitions actually, instead of being the key of T I, think it would be like t.

C

A

No, no, let's keep it like that. I almost wouldn't even specify the generic there, because I don't want to freak people out. You know, but well you know, I understand, I'll I'll, make sure this is right before I push it up cool because uh and then field definitions- that's in this in here some, oh, yes, I did in this JS doc style.

C

And definitions.

C

A

D

Has a has a has a uh validators.

A

Right those have validators.

C

uh Which take uh take.

A

Value T: does it take anything else, I, don't think so. Let's see I know we were. We were talking about uh passing in the.

A

um Whole form, so you could do multi, you could do multi field validators.

B

A

Yes and I and I looked into that and um it's scary, no, no, no.

A

It's still doable as we have it, because the parent component has the state of all the values, so you can actually do you could do the validator just based on your state, ah I. Think I think it's not it's not it's not as functional and nice as like it could be, but I don't I, don't know my for some reason, my memory, if this is a little there's, some cracks there.

A

This is just an object. We don't care uh and then there's a label which is the screen.

A

Yes, is it does that type out nicely yeah I think it sounds good map value. Is yes? Yes? Yes, yes, yes! Yes! Yes! Yes! Yes! Yes! Yes, yes, yes and map value is optional, I! Think so. Validators, uh yes,.

D

A

Think they're, it looks like they're all optional, exactly I think except label actually, and this is actually an array- oh you you'll put the yeah. You actually do the array bit at the end of it yeah you do the function with a rake thing at the end, yeah yeah, it's weird, you know the.

A

um When Jarvis when typescript first came out, everyone was just doing like array. That's.

C

A

Lot easier to read man: oh yeah, it's I, guess I guess maybe it depends on these more like complicated.

C

A

The reason the surrounding with brackets doesn't work is because typescript kind of supports tuples and that's how you do like a you expect only one uh top old thing: uh yeah you should. We should maybe add a little bit of documentation here below you can yeah you can copy the the ones from the JS Dot.

D

D

Label the only required thing.

A

Label the only required thing, that's the best property title. It doesn't tell you what it does. It's just the only required thing.

D

C

A

Them out so it's a little easier.

D

B

D

B

Opportunity when this does get merged to look at some of our Legacy stuff, you know a lot of the settings that are still hanging around in Hamel, where we've got weird settings pages with some view: components mixed in amongst, like ham, all forms Etc yeah, um maybe if it makes it really easy to to migrate. uh I have more form over to a view component, where we've kind of got a bit of a mix and match at the moment.

A

Yeah, do you have any concerns about like being more data, driven the our ability to test and assert that it's correct and things like? Do you think being data driven has a hidden cost to it, or do you think it's going to just be helpful.

B

It seems helpful to me, but if it can you sort of give a an example or elaborate a little bit.

A

Well, I just mean like maintaining, maintaining a view. Template is different than maintaining a large Json object. You know, I mean yeah yeah and is one preferable than another. uh Hopefully our Json object. Isn't large I think it's going to be nothing but helpful, because the view all the view templates so much.

B

I I think it is what you're saying that so at the moment, we would test our view component that would have hard-coded builds in it and you can test those hard-coded fields if we're defining a Json object or an object that we're passing to this component and this component's got its own tests and we kind of don't need to test the Json object. Yeah. That then becomes a bit tricky so, but you would yeah what would you test me.

A

I guess you could full Mount and do just some some kind of like integration testing thing with it. I.

B

Think you would wouldn't you, because you want to test that. um You know if I type this in this box this in this box and this in this box and hit save. Then it emits this objects, something like that yeah. That might even be something that's worth us documenting, what our sort of suggestion, if we're allowed to have a bias as to how you test an implementation of this.

A

I um I think I'd like to I think I'd like for us to to merge this.

B

And try and use it.

A

Never talk to me about it again I press to merge this. Let's try to use it and figure out what happens there and then let's go back and document it and then announce it and then, like let's share with everybody, use this one. Here's an example of how we use it so yeah.

B

C

uh The arm element uh system.

D

Is that all the ID is good for yeah.

A

That sounds I think so yeah, that's great.

A

I, don't like the wording so much of these two, but.

C

Show by example, will probably be easiest.

B

Why does your spell check not like the word submission.

D

ah That's good questions.

B

Is it um what's the word, it's.

A

The line length, actually it doesn't like.

B

Okay, I wasn't sure.

C

B

It was um DB and I if it was if it was non-inclusive.

A

I, don't know no, we gotta. That would actually be a little ironic if, if there was a flag on the word, submission.

A

Encouraging us to submit to it's laughs but yeah uh cool. Now, that's interesting. The line length just says that word. That's an interesting yeah.

C

B

That or the word that takes it over the threshold essentially, but.

A

I guess it makes sense for things like this, because that's the word you would need to just that's that's the word. You move over to that's cool. Okay. Now it goes away. It also doesn't like are named as much because it has like I think it expects you to write in a very specific tone, but I kind of ignore that one.

B

um Plug-In I mean: what are you even? Is this video.

A

This is emacs no.

B

It's okay: what's the sort of lean tea thing that that's giving you this helpful advice.

A

You know I, don't remember, let's we can find out, though we can find out.

B

I'm I'm interested it's um yeah I'm, trying to get myself in the habit of the whole active voice. um Second person imperative tone, Etc and I I really struggle with it and if I had something that was able to help me with that, that'd be really awesome. Although clearly I'm not gonna jump ship to Emax, but if it's something that I can plug into severe Stone, then.

A

Might be Pros lint awesome.

B

Cool, thank you that sounds quite appropriate. So.

A

How was um because I know that the your Linux machine died uh some time ago Andrew. So how was how was porting over Doom Max?

A

uh Actually I started using doomy Max on a on a Mac first, so.

C

A

This is the third part of it. Maybe then yeah I knew going in that it was going to work at least, um but did the the secret sauce is that I have um I use a I use a package manager called Nyx?

A

Is that that even works on a map? Yes, it does with a minor exception on this. In some places: okay, cool but um yeah. You don't get like the fun automatic system, D service kind of stuff from it, unfortunately, which means, but there's some good translations to like launch CTL stuff for important things like the Emax Daemon and gpg agent, and that kind of stuff, interesting.

C

Interesting cool wow yeah so.

A

The idea is, you run one command and it like brings up the whole machine again, your whole home directory and everything.

C

A

C

A

Right so now, I just wanted to throw in a code example which I think we can and, for example, look at the story I'm great with that yeah right.

C

A

Do we want? Are we okay with that or not yeah? Look at the covers it covers. It covers usage.

D

Map value, we're validators uh Uh custom form.

C

A

All the goodies.

A

I love it it's great.

A

Whatever happened to I saw I, think I think I saw it was either Peter or or Paul posted this in Slack it was like whatever happened to The View source code on our stories. Do you know what happened to that.

B

C

Definitely asked.

B

C

Because it yeah.

D

B

C

Don't know what the answer is.

B

C

A

uh Cool I think this is good to go pretty. This is pretty pretty good. uh Ed says: no, no, no.

B

A

We have any do we have any educations no, but this is deprecated deprecated immediately. You know actually I added a field to the graphql API that was I was almost tempted to deprecate like immediately.

C

A

Yeah we need this right now, but please don't that.

C

A

That sounds like um that reminds me of Sarah uh and she would whenever she would introduced something it didn't want, any anyone to actually depend on it or use it. She named it some really long ridiculous name, uh yeah the people away, I always recommended that you just gotta you gotta, you gotta, be like uh really I. Remember that we did like a big CSS migration. It was like really, please don't use this one like go. Look somewhere else, don't look here. What are you doing.

A

Land length is important to me, so I will I will fix the.

B

That's what I quite like actually about the alpha um on the graphql field, so they don't even appear in the the all-time complete but I suppose that's both a prior, an account. Isn't it sometimes.

B

Yeah, we're kind of not encouraging anyone to too much to use them.

A

All right there's one more thing with form: Fields I'm realizing um and we might have just about enough time to take care of it. Do you want? Do you want yeah? um It was because I I didn't add the label ID stuff, so it was using field sets.

A

uh So we might need to start the storybook to get feedback on what we change here. Sure what if I told you it was running this whole time, what wow, where's, zoom, zoom, Zoom where's, my bar Zoom.

B

I think, if you whistle it will uh emit.

A

That's a good, that's a cool feature. If Zoom you know, I was like hey, we'll, we'll exp expand full screen. If you whistle.

B

That's what your car keys are supposed to do right.

A

New share we're just gonna. Do the whole desktop buckle up everybody? Oh.

B

Save my uh or we something catch wide.

C

A

Can you play with it and double check that it works.

A

So we're transforming things to all caps.

A

Oh yeah I added this to test to show that, like oh yeah, we gotta, oh, it does work yeah.

B

Well, I'm so surprised.

A

Aren't you we just talked about this issue and I wasn't sure if I handled it or not ah yeah, so you see how I'm just using the state Works uh uh okay, because uh yeah, because we were talking about how we weren't sure how this was going to work but yeah this this. Actually, you know what this is. This is actually probably fine. This is a fine way to do it. Yeah.

D

A

Look at that form submission that.

B

A

Favorite item keyboards.

C

Could be Pizza, okay,.

A

Let's, let's bring up the look at those field, sets they're legendary.

A

Okay, so we don't like, apparently we don't like field sets okay, so this um Peter mentioned the fix I. Think in one of the comments.

C

I've done this enough: okay,.

B

D

A

Provide the label for attribute yeah, which means we need an ID. Ideally, we generate those.

C

We can do what can we do? I.

B

Wonder, if that's is that bad pretzing.

C

We can do ID equals field.

D

Or sorry label four equals field, dot, ID or.

D

A

Should we just say it needs to be in the input adders and then make it required?

A

No, no! No. We want to generate IDs yeah, that's fine! Let me generate IDs uh I thought. I thought we could potentially hook into how bootstrap does it but I'm starting to think? Maybe that's not going to work out um I, don't think bootstrap really does it. Let's use.

C

A

Id yeah Okay, so we've got unique ID. How do we build this out? That saves them and doesn't regenerate them.

C

A

Doesn't do we care if it regenerates them.

A

There's I yeah I'll show you I'll, show you. If we do, that's fine I'll show you. So if we just like, if this is like a method or something, but for the sake of showing off we'll say, we just call a unique.

C

A

Right I guess we do need.

C

D

C

Id yeah unique.

C

You know: okay, okay,.

A

You're, a very Ruby just then.

A

Shows where it shows where my head's been at last few days, I.

C

A

So you say: make ID.

D

A

I see these will be two different IDs. Yes, yeah. This makes sense. My question is: do subsequent renders need to have the same ID.

B

Strong note shaking of the head there I think see why.

A

Did the ID work? Oh yeah field, 60 field, 61. yeah, so that's that's, not working. That makes sense. um Let's go to uh if you scroll up to um on our template.

D

B

We no, we couldn't.

A

um Fields to render is where we actually have have decorated the fields. Okay, ID here easy, very easy.

A

um I actually have to I actually have to hop off. So sorry,.

B

To to be a rubber duck for another 10 minutes, or so, if you want Andrew.

A

We're almost I think we're almost we almost have this figured out right yeah, so we'll put it in the scope slot attribute, so it gets passed down if you're, using a scope slot and if not we'll put it here, yep as well.

A

um Do we want to put it above here in case you pass your own? uh No we're we're not expecting you to do that right. So we do. We can just do field dot IDE. Here we do.

C

Feel the dot ID here, yeah.

A

That should be it and we look in here and we see divs, we see we have form field for GL form field 76. The input has GL form field, 76, we've done it all right, go ahead and push this up. The test might need to be slightly updated because uh we updated the validation stuff. But that's that's easy to do. I can do that. So thanks Andrew. This is super helpful.

C

A

Hanging out yeah.

C

Later, bye, bye.