GitLab Pair Programming - Frontend, 8 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20210108 - Replacing Deprecated Modal Components

Description

In this session we replace a usage of `deprecated_modal_2.vue` with our `@gitlab/ui` modal.

Resulting MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/51227

A

Yeah, okay, ip uh is getting rid of deprecated modals, but you thought deprecated models were bad enough. Wait till you meet deprecated modal 2. um yeah, I I differed deprecated modal and deprecated modal 2. and it looks like there's significant difference between the two.

A

So what's what's kind of our objective here.

B

So deprecated motor, by the way, uh I think, was just like a simple bootstrap modal style and it didn't as as far as I recall, maybe while gdk starts, we can look at them both uh just to have some history. I think it's yeah, if it basically is just the modal syntax without any of the hey show. This thing not show this thing: jake very kind of thing, yeah.

C

B

This would be a thing that you probably just use with wii: u vf right! um Well, the other one is a wrapper around.

B

Maybe you could also with vf and data toggle mode, probably yeah, but the other was you know trying to hey. You already have higher. You have events right, oh listening to the jquery events, so yeah the one is a little bit less jquery and the other is, um but I mean it shouldn't really matter because we're just going to get rid of it. Okay,.

A

But there's still both bootstrap models. Yes,.

B

Both both bootstrap models and interesting- let's not take this project, because this project was broken.

A

um You you need to have a project that has a group: ah yes, because my students yeah, and I also just.

B

Go through groups, yes, groups.

B

Frequently visited is always empty for me. It's the most useless feature for me.

A

It reads it from from local storage, I think- and it breaks really nicely.

B

On jdk, because if you like it, it also breaks just for me on uh dot com. uh I clear my local.

C

Storage, every time.

B

Right so also frequent emojis is like I, I don't use emojis at all like every working day, so um milestones. Where do we have those actually under issues that makes sense? Okay, new milestone and we call the milestone.

D

Was that great was that gray border, something real or I saw wrong.

B

Wow we have like detailed pages for milestones, learning more and more yeah, it's a it's a real great border. It's cool, yeah.

A

D

So a ui pattern that you don't have anywhere okay. So where do we promote this? It.

B

Seems a little fake. I agree.

D

B

There we have promote.

A

Click, it whoa, and this looks like a regular model.

B

Yeah, so I think and and the action is a bit weird though, like yeah, it's a white. Why is this yellow? I don't know, maybe because this action cannot be reversed. um Okay, promote model, uh so we saw the model we saw. The um we saw the model we saw where it's used, it's mounted in something, and we have a button here right so- and this is the interesting thing, because the button.

B

ah Okay, so if it's a project, master yeah and you're in a group, yeah makes sense, so we have a js promote. Why is this called js promote project milestone button like.

E

A

And promote milestone in it looks like that might be what we're using to trigger showing this thing. Maybe.

B

So yeah this is the one that triggers it right with the target, and I was just wondering if, if you go back to your grab, why don't we move the button itself to view? Yes? This is my exact question right, because here we have a mounting point right.

D

We just move the button and model in the same place and that's it yeah anyhow, gl model re-offends itself at the bottom, so the only problem is.

B

That we also have a different, a second one. It seems cold. Doesn't.

D

B

Oh, what, if project, can admin group milestones? What is this, so we also have it in some action somehow.

A

Oh miles, oh, is this like if you click on? uh Oh, that might be if you click on a milestone, no.

B

My I believe this might be like with labels that, if you are on the group list of milestones, it shows you a milestone, that's in a project, and you can promote it from within that list right. Something like that.

A

um So I think the path of least resistance will be to just move the modal, because it looks like we're we're manually, adding click listeners to these buttons, so yeah, ideally it'd all be in view, but I think I think we can move just the modal, um but then just replace our listeners to no.

B

The problem is because it uses data toggle, and the whole thing of the exercise should be that we get rid of data toggle wait. Is this using data toggle here level up? I.

A

Don't know if it really is because I think it's, I think if you search like you did for that js promote project milestone button. I think you'll see that we're we might not be using data toggle natively like we might be able to get around that.

A

um Oh yes, you know what I'm saying I think so I think it's a good thing like for us. I think we could just. I think we can just get rid of the modal. It's possible.

B

But but it still uses data problem right. I think.

A

B

Get rid of that.

A

That looks like we might not be using it.

B

Maybe not no, I mean it's like still so you're saying. If I the question is, I still want to find it. I I want to find where this is used right, so that we can test it, because we want to have screenshots as well right. So.

A

Yeah we could do the look for render milestone, milestone.

B

A

Usually, do like render star milestones.

A

I think it was milestones.

B

No, my stone's my stone, no, not the other one yeah right right.

B

My headstones might stop my stone.

A

Yep, oh look. There's like a recursive milestone thing. No.

B

That's this is shared right, app use, dashboard milestones so where app views groups milestones. So this is the this is the group's one right, but I don't see the promotion.

B

Like if we go here milestone this, this looks the same right. ah Wait! Oh wow! This is like the most.

B

Oh okay, at least we know where it is goes up so and you say, let's, let's try it, I mean we can target uh container.

A

We might be able to, but I mean given the fact that we have a js like I think we could get by without it anyways like.

A

You know what I mean like, even if it's not working right now, we can still add our listener to do this on you're right.

B

I, to be honest, like I, would still be on the front of uh uh using it with um uh dealing.

E

With an overview.

B

B

Because, because I think this file also is the file that instantiates the.

B

um ah So it enables the buttons once this is like.

B

Really annoying okay. Now I understand why the motor is different, because the model has um it's just one model, but we mount like multiple buttons that do this right.

A

Yeah- and I think, and I think that that's I think, that's cool and I think we can, I think we can do it.

B

Okay, I mean let's, let's just move the model as you're saying button set attribute. I I just wonder what, where on delete button click promote that delete button click is weirdly named.

A

B

Like uh just like, probably on.

B

Where does it get it from my stone title? Well, group name, but it still doesn't open the modal yeah.

C

B

We would so, how would we open the model? We probably just would use the event top and send a event like to open them.

A

Right but at the same time we have a reference to our view. Instance here like. Why would use event hub? Why don't we just ping our view instance like with a method you know.

D

B

Okay, so should we just create so the the thing also that's weird to me is like: why do we even have all of this stuff? Okay, make sense, instantiating the view thing emit on mounted off. We said modal props set model props, so would you just add a wrap here? Is that possible.

C

You can yep.

B

And then we just call it promote milestone model for yeah or yeah.

A

F

You would want to.

A

Use animal case because you use them in the javascript.

B

Yeah, that's true.

A

And then we probably want to define this a bit earlier, yeah and- and I think like, if, if we don't even have, if we're not even able to mount this thing, then we shouldn't even set up any of the buttons either like. So if we can't find this, we don't do it. We should just return early if we can't find the element.

B

ah But the buttons you mean, you wouldn't add the event, handlers, etc because.

A

It's not going to do anything right so like on line 51. Let's just return early like let's do what line 53 is trying to do, and let's just return early if that thing's not.

A

C

Oh, what yeah, yeah yeah.

A

A

I love returning early.

B

Oh cool, uh why is complaining? Is it's never reassigned use const? Instead, yeah use const man.

E

A

The component down yeah, move the component down uh and and do a const after the. If just the the.

B

Only question is like because we have like these event headless here before, like with this. This is very interesting. uh None how we usually do things right way right.

D

Right but it's the time where you to get blame and you see that those poll you mean.

B

You mean you get praise, oh yeah. Do.

A

You have an alias that's praise ip.

B

No okay! It's again, why did I do this.

B

E

So, okay and you're.

B

Saying that now with the ref um are props, so how would we now so.

A

You see like like here what's interesting, you see that um promote milestone. Modal dot. Props is really just a uh a. We can just call that method directly on from this component. You know what I mean, rather than doing this.

C

A

Thing going to the event hub: let's just call the thing directly.

B

Wait, uh you mean here like on promote button click. We are now doing promote component dot, ref.

A

Start it's. We could just call there's actually a method already living on it. Set modal props, it's not a refs. It's just said model props.

C

You're going to call the component method externally, not from the component yeah. This is not good, it's not good. It's not good exposed. I mean we can call our model show method if it has one. I believe it has one with fire wraps, but I mean honestly, it looks like I would burn it down completely and right from scratch, because it's like it's crazy event hub in such a weird way. This.

A

Is you know, natalie brings up a fantastically great point. Why aren't we just adding these like x? We can add these external dom listeners on mountain rather than doing this roundabout thing of even setting it outside of here.

A

Wait, wait, wait.

B

You mean like, like setting up the buttons inside the mounted, essentially.

A

uh Yes, yes and then being good citizens and also cleaning it up in the destroyed, wait.

B

One mountain it removes disabled.

A

Yeah, what's kind of what's kind of wonky here is, if you like, let me see something.

B

Yeah that makes sense.

A

Yeah like this is the only place these events are used is in this file, and so it's weird that we're like we're we're tying things together in a very roundabout way using event hubs when, let's just do it, I think what natalia is talking about doing it inside the component makes a lot of sense.

B

Yep, let's just move all of those to the top again.

B

And then probably the cool thing we can do is just return here, because whatever we do.

B

uh So we have our event listeners now right. You know what what my fear is that they probably used it for testing somehow, if.

D

This thing is tested.

B

Alone, arrow function expected low return value. What did I do something wrong.

A

I think when we returned early, we um want to now say return null.

B

Cool um okay button, so this is just the buttons uh so once request.

B

Finishes: ah okay, so the thing that this does is just like: if the request starts, it disables, the other buttons, no.

A

It looks like it adds a disable to that button because it looks based on the milestone url, um which is interesting.

B

Oh and it's using the data url stuff, so it's basically clicking the button uh and then, instead of using axios, it uses the rails, ujs kind of thing right. So if we're going back and looking at the buttons, those buttons are actually uh probably like, probably also have like a data method or something.

A

Yeah on 52, they have the url thing.

B

Yeah, that's the url, and I mean you need to pass in the url, but do they have like a data method? I mean: where does the request actually get triggered if.

A

You go to on promote button click. You see that we actually set url on line 38 and then the roundabout thing we're doing here. Is we then so we do. We do the request in the model or where.

B

Do we do a request request? Okay, god, this is like really ugly like. I would have at least expected the request to then also just happen on the other side. Basically, once you get a confirmation or something right, yeah.

A

I would even um since promote milestone models, not used anywhere else. I would even you know, rather than doing all of our logic and the page net thing. Let's, let's do it in this component, um the bit where we're looking and we're adding listeners to dom and stuff what you know isn't isn't great view proper, but but.

D

Do we need to let these listeners at the end of the day, question mark like are all of them really needed, or can we rework the architecture a little bit? You mean, like the listeners here, all these event up things that we are doing right. We are setting the props of the model itself can't we do that with normal view. Pro passing, for example,.

D

I mean what did I break? What do you mean niko, so we are setting props right based on event. Isn't it that's the thing that we just moved on mounted right?

D

It's just for the visible pro this one or for everything.

F

A

Line 61 no.

D

A

Yeah, so we have one component, one modal, based on what button clicks it we're going to set the data which it's then going to send to this child component. This is the theme um yes and but who calls this event up now,.

D

A

D

That is my question.

A

D

A

That's that's. The issue here is like event. Hub is completely not necessary here we really should just do you know uh where we quarry for the buttons and call our internal component method here on mounted. I feel like.

B

A

You're saying essentially I mean we need a click handle on the button right right, but doing it on mounted, because then we can also clean up when we destroy it for our tests, like I I feel like we should do this um in the component, uh because components have a nice life cycle as well. I mean this is just a component as well right.

D

Yeah but we usually keep they need initiation component bare bone because we don't test them most of the case.

B

Right so the thing is, you will want to move the mounted hook here and all the logic right. You want.

A

Well, we could do it here, we and we could tweak it and do it here and then we can move it down.

B

A

B

A

B

Like I would do one or two things, uh one of two things, so one of the things I would be doing is either we move everything to the view component or we move like the submission stuff up, and then we can get rid of the event handler emitting and so on, because we could also have a method here right that we just call whatever is method uh like submit uh promotion right um and then we could instead of having this here, we could define uh the event handler also as a method inside here right.

B

So this could like this on promote button click, and then we don't need to do the passing.

A

Of the props and so on, right right right, I would say: let's move it down, then, because test.

D

A

File is going to be significantly easier than testing the dot js file.

B

Okay makes sense.

D

And also like you're, just basically passing prop around like this, because, yes, the model can be the the single source of truth for this. The owner.

B

Yeah, okay, so.

D

We have a function.

B

Yeah, I guess that's true. No mountain is just uh copy paste. It.

A

Before destroy right, okay and that's.

E

A

That's actually a big deal when, when we test this too, because uh we're going to need something that cleans itself up and so doing it here is going to be a lot more preferable.

B

um What do you think about making them just a computer component now that it probably doesn't work right, promote nice buttons.

D

From where does it come that one.

B

I don't know how, if it would work in a computer well with caching and so on, right, because it's something.

D

B

D

The domain, not computed property, doesn't mean really well yeah. Okay, this this line, 444.

B

Yes, this uh uh then we have the unpromote button click. uh This is just like, so on, submit.

A

I think on promote button. Click is a good method for us to add.

B

Yeah so just like this.

A

And it was originally called on delete button click. Maybe we want to call it that why I know I'm joking, I'm picking out the code. I shouldn't do that.

B

Okay, so we have event current target right. Then we don't need to emit this right.

D

No, no, you can remove all the event up things. I think.

B

Yeah, I just want to have the logic here right, because.

A

We probably will, let's replace what we're doing with props we're going to.

B

F

A

Right gonna have data here.

F

So the props needs to become data. This.

B

Is true: um okay, props yeah, that's true! So we have data right and it's also a function uh gastron and then we have.

C

Milestone title.

B

uh Ural and group name.

B

E

Name yeah, I think you'll.

B

E

Them yeah yeah.

B

Okay, uh so come on after that, yep thanks- uh and we just do this that and this- and this is in equal oops group name- equals equals equals.

B

I I assume you don't go with object, design, yeah yeah, it's a! I think. It's a good call yeah. So in this case, what we also want to do or what they do with onrequest started is like the question is: do we just do this?

B

Current button equals button and we could just do button set attribute.

B

Disabled, what does.

A

Onrequest started: do.

B

One request started: selects the thing with the same url right so um with the ui. You just click disables the button and then you know if it was successful, remove the button so.

A

But we already have access to the button because of the event target yeah.

B

That's, that's it that's fine, but we need it for the handling. Then right so.

F

D

Need it here, like.

B

D

B

B

Like discord button, oh, this is also funny that if it was successful, we're removing the disabled and then going to the url.

B

No, if it was not successful, so it actually makes.

C

B

So if it was not successful, we just do like this current button, so it should that, should this should work right.

A

Yeah, you can probably.

D

A

D

A

That's as good as it was, I guess no, it's better do.

C

We do we have current button property in data initiated.

A

um We will want the current button and well.

C

C

A

C

It's something it's non-reactive. If you do this, if you assign a property on data that didn't exist on component creation, this is not reactive. One.

A

C

Mean I'm not sure we should. I mean we should have it reactive, just initiate it. Do it in the right way. That's already.

D

Done why is it uh right there and the abic is the props.

B

Yeah, let's get rid of the props. I also loved, like gl model deprecated motor, who did this um okay, this current button. I don't know why it's might comprise complaining about this. Oops yeah like this is fine.

A

No, you still got some some squigglies on this.

A

This alignment or function call, and it said, saw an expression.

A

I don't think it's, I don't think it's that no.

B

What you know whatever, um so we have the button, click right. We have requests started, we don't care, we don't need to have this event anymore. uh We can just you know, event pop. We can just get rid of this right.

A

Oh wait, wait. Wait, wait, wait, wait. What are we going to disable the button when we just click like open, show up the model? Is that going to look weird.

B

Why is this this behind the vector of anyhow we're doing it once we start the promotion so once the modal closes, uh we just do it like, ah so we do it on the request start right. Well,.

A

We yeah that's previously we're doing it when the request was starting yeah.

B

B

Whatever I mean, it's very unlikely that we don't have the button, but you know.

A

Yeah, I think it's good. I like it. Okay,.

C

A

Yeah we could, we could go really fancy and like have the button like assign itself as a watcher to something. But let's not do that. I think it's fine or watch.

F

For some sort of.

A

Event admitting.

B

um So here we just do I I'm just ignoring what you're saying? That's good, that's fine!

B

I love you anyhow right, you know! Thank you. Okay, so here we just do button room.

B

Event, listener and just this one promote the button right, so we.

E

B

E

B

I think you have to do click on the yes, that's true.

B

Okay, uh so we are good here, so we are not using the event.

D

E

B

We're not using.

D

B

Event hub anymore,.

D

You can remove data and methods from here, but I bet.

B

We use it for delete.

D

B

ah So the interesting thing now is like we still.

C

B

Yeah, okay! Well, that's good! No! No! Okay! So no! No! I'm just babbling! um We can remove the ref as well right and across and.

C

A

Yeah everything and components, because we don't need to do that direction thing. We can just pass the component itself and create element, yeah and create element. You don't need to register the component. You can just pass a component, a component yeah.

B

A

Right so we have just promote.

B

Milestone model and then remove it from there now. This looks like, like usual yeah, so the only thing that we now do here is we actually get our gl model, uh so we do import model from.

C

Maybe first, let's check if this one works.

A

Italia has a good point.

B

I I should work because I mean.

A

B

A

It doesn't because it does, we haven't.

B

Changed our model, yet we haven't shown the model yet so.

A

We might need gl model to do that very simply. uh Yeah.

B

A

Just try it because we have visible equals. Do.

B

A

The prop on gl model work: okay,.

D

That's the same: that's the same thing that they asked ap today. He said it's fine, it works. It didn't work for me yesterday, oh okay, when.

A

I tried a year ago, it didn't work and then I haven't tried since.

B

So in our click handler, we also need to be like this look in the.

A

Source code once again.

B

He closed true right uh here we probably want to have. uh Can we have a finally whatever right, just visible.

A

uh I mean yeah yeah yeah do finally yeah. We want to do it. Finally, right you're gonna put them it's.

B

Weird to visit the url, you know.

D

So visible is not a problem and it's it is it's a data. No.

A

In gl model, it's not a problem, it is a pro. Is it a? Is it a bootstrap prop like? Is it inherited from the bootstrap model, but.

D

We don't spread it and we don't do we bind uh we do, but we bind that okay, okay, oh fine, we pause it as a notch, but.

A

It might be also like called. I didn't know what it is. No, no. We passed it doesn't actually, oh fine. I p if it doesn't work, I'm blaming visible.

A

B

Seems like it: okay, there you go the other one. Oh something is weird. Oh.

D

Man, it's just the styling. We like the title.

D

Aren't we don't we? uh Yes, so title.

B

Is just this prop, so we have, if you want to use the slot, I think it's. I don't want to use the slot because it should be just text right model.

D

B

Title but anyhow yeah so here do I need to wrap it with the normal slot. No right! No! No! No! No! No! It's just it's just uh div and we should be fine right. Yes um and how are our primary buttons called like? Is this the bricks this? This seems wrong right. So how do I style our primary buttons.

D

A

Sounds like a go to the story, but yeah.

B

This is so to be honest, like the um the.

E

Storybook is not.

B

Really helpful for modals, uh because at least in the examples it's really weird because you're like hey, I want to see the example and the example is just the code of the button that opens it. It's a bit.

D

Weird, oh no, but so you need to pass an action. Primary problem.

B

D

Text. Oh, yes! Yes, yes, yes, yes, and there is an example a little bit above. If you change the example type um there you go another, do you have it? That's actually action primary. What you need to pass.

D

Right above example, that's piece of chunk of text in the code yeah this one.

C

B

This is like why, okay.

C

F

B

So we do action primary and yeah. It's a column.

C

At the beginning,.

B

And this is like action right and uh I don't know actually yeah.

E

Because it's an object, I just don't know.

A

B

A

B

Going to go down.

A

One more, I think you want, I think you want to move it up of a curly, brace.

B

Upper curly brace because it's currently in the methods right, yeah action and it's.

A

What is it a text text an attribute, there's an array of attributes? Yes, um okay, why why.

B

Is that like that, um and what is this like attributes, oh gosh, why um yeah.

E

I was asking why.

B

C

B

You know- and this is like morning no probably probably if you look at the buttons- it's not called warning anymore but like tertiary.

B

Tertiary category.

A

No, what oh, we have a.

B

A

By ryan okay morning, it is a warning good morning you're about to promote this milestone. Yeah uh it'll get right.

E

Now, all right and.

B

E

D

D

B

A

The only thing called submit is, is it is the modal callback still called submit?

A

I think it's just.

B

A

B

Yeah primary right: yes, it's a primary yeah yeah whatever, so, let's try it. um Okay, do we solve this by just adding a no fade.

A

No fan, uh I would think that there's something else like a like a page, specific css that might be causing some some strangeness.

B

So this is weird, so no the if you see it, look at it. The modal backdrop is just happening before.

A

Oh, is it because we do, we still have the the data toggle stuff on so yeah.

F

And so it's bootstrap.

C

A

To trying to do its thing and then view vue, bootstrap.

E

View bootstrap trying to do.

A

E

B

uh I hate how these are written. Is this correct? No.

A

No on the last line, yeah, you want it to be on 54. I think.

B

Yeah, I don't want it to be at all um wow, okay and then we just need to fix the other button, and you should be good to go right. Yeah.

D

You need to write the test.

B

D

B

I you know, I assume it's. Oh.

D

This is, this is not good because we removed the listener from everybody on on destroy of the model. We need to remove the listener.

A

What do you mean? Well, no, but our component should be mounted and it's like it's not gonna, be destroyed right well,.

B

That's true: let's look at the model again.

A

What do we do? Is it not working? If you click it, it's not working. If you click again, I think this is visible. I think it's visible's fault visible. I'm blaming visible.

B

A

You're right because.

B

The the yeah, I know yeah you're right, uh so we just need to be like at close equals. uh So we just do like no.

A

Just just call refs.show, okay.

D

But it's better with the prop, though he thinks at least we use ref, then more fbm, because then then you will find the code at the dot ref dot my element, dot, ref dot, my element.ref, my child, denim dot, underscore underscore get prototype.

A

Yeah sometimes visible doesn't work, though what what doesn't work. I really feel like I've, never been able to get this props on modal to work, but I don't think I tried really hard so I'm.

A

I appreciate the effort. I've been.

B

Yeah I mean bullying: props are the hardest.

A

They are they're just so opinionated, it's like there's two buckets, and sometimes that sometimes oh, is it working now.

D

A

Wow, so oh, can you use v model? That's the bit that I don't think it was was working for me because there is like a technically bootstrap has a um technically. We don't have to do it, but technically it has.

D

A no you can't, you can't use the model because gl model doesn't have the model attribute to remap visible to the gl model.

A

Got it? That's that's the bed that was, um I think that I was always having issues with, uh but this is cool nice. I love.

A

A

D

The actual action works now like like do we promote the thinking if we click.

D

B

The only thing that we still need is like sorry, for uh we just need also the boring like why. Why is the secondary action just gone like the cancel button? Yeah the cancel button, because we had a cancel button before.

A

Right, I I thought we had one. I think we have to just say action cancelled. True.

D

A

We have to tell it do we have to tell it what to do.

D

A

Okay, I guess it's cool.

A

And we have to tell it that it's going to close the model and stuff.

D

Well, that's how we're already doing right, I guess so actually yeah.

A

Oh no, but don't we wanna, do action, cancel, there's an action cancelled, yeah.

C

I'm just going to say the same shouldn't be action. Canceled.

A

um You have one, you have one more reference. You need to update.

E

A

uh Line 100.

D

Yeah we need to write the book. This is like legacy.

B

Code, yeah, I mean, can be legacy. We just introduced it right. I mean this also already feels like legacy code, even though we just introduced.

D

Them all by the way. No, no. This is okay. What it was before it was not okay, I mean we got rid of event hub. We don't have events anymore, we don't have subscription and stuff. The only nasty thing that you're doing is that attaching listeners with a mounted but.

B

What what is now happening.

A

I'm telling you man, these props.

B

Try to refresh the page, ah so it's not secondary it's cancelled as.

D

And I think there is no close event, so you can remove that.

B

Yes, there is my friend, oh, it is.

D

One time from bootstrap.

B

Yeah, it's uh it's when you click the x on the top right in. uh Why is that documented?

B

Because we don't pull in the documentation from bootstrap view for events and stuff yeah, and it's also, you know we have close cancel hide. uh There are a few others that are all related to closing and depending if you prevent the event, you can actually prevent the closing of the model. It's a bit confusing, but.

D

B

Looks all right: we have some.

D

Padding issues on stuff: do we let's try to promote it? Do it.

A

Do it yes, which one do you have.

B

A little disabled, it's still disabled and it's promoted wow. Well, it doesn't even go to the it just stays on the page and that.

A

Yeah, that's nice because I might want to like you know, promote more what another.

B

One yeah: it's that's now. We need to check that the the promotion from within the header works. Fine, yeah right.

A

I think it's gonna work.

B

No problem, it works no problem, probably but.

D

They remove the target, the.

B

Target the container and the toggle that disables true, is that all right? Yes, because we only want to in the you know the the oh on unbalanced brackets, um because the? uh How do you call it? I think it's.

E

Because it doesn't like itself.

B

Yeah the model.

F

Itself enables it.

B

Right, okay, I'm balanced brackets, wait what what's the problem right now.

A

Data, I think it's not liking. I think you may want to what.

C

Is that yeah they need.

B

A

18 on its own.

B

A

True, I need to I hate this.

B

You know, I think, after four lines, you need to move it into the controller or something that you can just use it as a.

B

See in the beginning, it's disabled and then the model itself enables it when it's ready to be clicked. Yeah.

D

Obviously, when it looks nice.

B

Promote promote.

A

Does it take us? Oh, it takes us to milestone. So that's interesting.

D

All right, but but why is this correct, that it sends us back? You went already on the promote page. If I was a ux person, I would like eat my fingers. You were there right. You are indeed details of this thing ah because it doesn't matter.

B

It has a link so that.

D

You can get to the milestone.

B

So I'm fine with that, so this works doesn't have any tests.

B

A

B

Oh geez, but I I have to get rid of my christmas tree in about five minutes, uh so I will just have a look if, because uh today, nico taught me how to write these tests with the new new test tutors um because I just came back from- I don't know how many months of leave without writing a view test, and then you go on the view test, your teals page and it's like this method is deprecated and this method is deprecated. All the methods are deprecated, um but yeah is.

B

I assume that at least here it's the only question. I would have how.

A

Would you do.

B

The buttons in this I.

A

Would I would set a html fixture on a top.

B

A

Each yeah um and then uh using that to trigger the events, um that's cool. I don't think I think it's really doable. If, if you want to push this up and then I can check it out and and start writing some tests, if you need, if or if someone.

D

Else wants to drive, or I don't even know what.

A

Time it is oh, we have five minutes.

D

A

B

Let's, just you know, get check out minus b my uh a grade.

B

A

This this is great, I'm so happy how simple our entry point code is. Our our our logic is nicely contained to the component, which cleans itself up um yeah, that's great. I I would like to know like, like natalia, like seeing a large plethora of view code and, like we've, been doing view for a while we're still in this spot, where we're like one foot in view one. You know couple of feet still back in hamel. uh How do you feel like seeing these components that do document corey selector and, like other things like that.

C

I mean to cry it's definitely. I want to cry, but in this case uh query selector is less or evil comparing to what we've been doing with all the event hubs there, I'm still using query selector. So in this case, when we need to listen to the external code, I mean, if you use query selected, just like a button within the component, I would complain if you use query selector to select something outside the application. I mean. What should we do.

A

Yeah I I like that distinction and um when I've had conversations about like what I like about, I like having components encapsulate that, and uh sometimes people have interpreted like we shouldn't ever- do document query selector in a component, but I like what you're saying is it's not we're not doing it within view. We have to communicate outside of our application somehow, but encapsulating a component is really powerful. um This is the most powerful thing already.

A

Wait till we add some tests.

B

Yep, but still I mean, like the code itself, you know became easier to read and it's not like event hub. You have to jump between two files like what is actually happening. It's all happening.

A

So crazy is this was within the same file.

B

Yes, I mean once you discover how a bus works right, you just use it all the time yeah. Let me just the only thing that I want to do is stop the pipeline, because it's guaranteed to fail, and I want to save the planet.

C

That's why we removed event hubs from your documentation at some point, because.

A

C

Were discovering it and just I think, since 2018 and people still use them because they got used to their hubs.

D

I mean in some weird cases they can help. So, for example, I was reviewing an mr, where, like every button of a drop down somewhere, enamel somewhere, actually ujs things triggering an app somewhere else, completing somewhere else in the code. uh Well, how you want to do that? You can, if you say you just rewrite the menu they're like yeah, but this is like a few million changes. I won't and to be.

B

Honest in this case, I think I kind of like the architecture a little bit, not because we just came up with it, but um the the problem is, if you I imagine now that we would have packaged the button in the view app first, we would have needed two kinds of buttons and, secondly, we would have ended up with like dozens of modals, and you know that you are not able to see and that uh are bad.

B

You know from uh from a perspective of hey, you have like unnecessary, dom elements and stuff like that right. Yes, you.

C

Sometimes have that.

B

If you, for example, have that, um if you look at code, uh we have like, uh I think every line here like so. For example, here, like this little anchor icon, is an icon that we actually add on every line and just show on harbor, and if you have like uh you know, 20 000 lines or 5 000 lines. You know you end up with like a ridiculous amount of icons and stuff like that.

A

Yeah we, we actually have a um yeah. This has come up before and um and I and I strongly encourage us to try to find ways for modals and things that are kind of like from a design perspective. We should just have one of them, like oh man, natalia and nico. Both I didn't get to say goodbye. They just left uh anyways and I know you got to take care of your christmas tree so.

B

A

B

uh It's a friend, let me see what he.

B

B

Yeah, okay, my friend, actually doesn't isn't here yet so he just asked me whether I you know d undecorated. He decorated uh christmas, tea and.

A

Is this a? um Is it a real tree? Yes, I'm gonna stop recording.