GitLab Pair Programming - Frontend, 30 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20201030 - Moving Vue template to SFC in Access Token Form

Description

In this session we tackle moving a Vue template that was being written in HAML over to a Single-File-Component.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/46569

A

You can, I think, I'm recording now all right. um We have identified uh part of our code base where I'm.

B

A

B

A

David because it's starting to get a little that's.

B

Okay, I can mute myself as well when.

A

Okay, uh sorry, um I'm gonna censor you now david. uh uh We then fight a part of the code base where we have a selector for view to mount onto, but then we're referencing the component in haml and ideally we don't have haml writing any view code, because that can actually be a security issue and it's actually called out in the view docs as one of the number one cardinal rules of writing view code is make sure you're trusting your templates.

A

So thankfully, though, like no there's no user input that we're injecting into hear anything, so there shouldn't be an issue um but we're going to refactor this. uh So I would uh I I do need you to help drive me david, because I'm I'm going to lose focus really fast. I feel it coming um what I think I want to first just get this running, because I know we're going to want to test it to make sure we're doing this right. So let me open up my terminal.

A

uh Let me go to.

A

The gdk, let me stop it, let me refresh it so it uh removes cash and restarts itself and all bunch of things my computer is taking off that's great.

A

The main thing we want to do here, I think, is: we want to create a component. I think, specifically for access tokens expires, act and we're going to wrap we're going to move this to a view component um expires at field. I guess oh look! Well it's all there. This is the only is this the only time we use it like. Why? Don't we just use that component? Maybe we can, let's check it out.

B

A

B

A

If I do, where am I doing, import expires at field see if I was using a real ide, I could get these this information, but I'm not using a real id. I have to do regex it's all right here. Regex is the best I know.

A

Okay, so all you gotta do is just replace this slot with what we really want it to be, uh but I think what we're going to miss is this name. You know so.

B

We're going to yeah we're going to miss the expires, though.

A

um You know how we can do you know how we can get the name for the field. Like that's the bit, that's the only bit. I see that's where we would really need the hammer here.

A

Do you know how to do that get just I mean. Can we.

B

We just passed it through from can we attach this uh as a data element and pass it in.

A

Yeah, that's kind of what I want to do. I want to do something like.

B

A

uh I don't know what you think of this, but I've been like lately wrapping everything up all of my options and like its own thing,.

A

And I think it would be this- um I don't know what I'm doing anymore, but I think it'd be something like that. Let's let um says like me every single time, I start coding five minutes and what am I doing? I have no idea. Does it work yeah? This is why I love peer programming because it keeps me it keeps me honest. I once I sometimes I get really distracted so this is.

A

I really appreciate pair programming a lot uh for.

B

Sure I I love these sessions and I love I love every time you do a programming session. It really brings back. I find like just a general humility because you're like I it's, I find it's really easy in like programming, especially to maintain a facade of. I know what I'm doing.

B

Then you get to a pair of programming sessions. I've forgotten how to type. This is actually how I live.

A

It's so much fun though I love um man, it's just uh hacking away, and it's it's a blast. um Let me okay. This is now running uh great. I.

B

Are you playing hey, find the background soundtrack? Isn't it great it's good? So have you been kicked out of your house yo? The house is fine. It's just the internet. Here is so much better. So.

A

I come here to work that rocks uh that's really cool man. I miss working at a coffee shop. I haven't done that in a long time. uh Are there other people kind of.

B

You get like a couple of people knocking around, but I will say the nice thing about this place is that there's so much distance.

A

um All right, so these things show up in settings. I believe awesome. That was my fault.

A

Nesting within plain text is illegal. What's wrong with you, I don't even know what that means line 25. Does it not like this.

B

A

Within plain text is illegal.

A

Oh, am I not do it I'm not doing this right am I I don't.

B

C

What are you talking.

A

About well, let me just see if I can get this to work and then we can narrow down. What's the problem, if I can just.

B

100 I'm trying to find an example of.

B

B

A

A

A

All right, so this these are some tokens. All of that is great. Here's. The expires at field.

A

This, for some reason, we needed to create a view component for this.

B

uh Apparently, what is the view component.

A

Oh, my gosh, are we even mounting to it? Did I mess it up? I probably messed everything up.

A

Yes, I moved to the end. Somehow that happened.

A

Somehow I must have dragged it that one character off. Clearly, that's what I meant to do in my editor was drag characters around. That looks better now. I see a little date. Picker yes sweet. So this is the bit that I'm a little concerned about. You see the name and the id that gets automatically generated when we do this thing.

A

You know what I mean and that's why I think we kept this in the hammer. It would be really nice if we had a way of generating that name of the field without doing a whole field. You know what I'm saying.

B

Yeah yeah, it would be good yeah. I think.

A

B

Pass it through as a data attribute and then we can take it as a profit.

A

Right but if I just say, expires at I'm, not gonna get the whole thing. You know and I'm not going to get this whole thing, and that takes in that is taking some context from the form the hammel form.

B

That's being created, and we use this field in four forms: right, impersonal, tokens, personal tokens, yeah.

A

But it's all just this shared view. You know.

B

But can we get? Can we get our contacts from where we, where we set up the uh from where we're calling the view field and we get the context for where we're mounting that or where we're calling that we get it at that stage?.

A

Get it back from like access, I think we have like personal access token index.

A

uh Looks like I don't know where we're creating our form. Where are we creating the form.

B

Is that it there that's shared access form, just though the one your line is hovering on.

A

Yeah, that's that's! Where we're rendering it we must be creating the form. Oh yeah. Here we go we're creating the form. For the token that I get passed into me, and it knows like rails knows it's a token of this model type. Therefore we're going to give it these names like so I kind of wondered. What I really wanted to know is: can I do rails um uh get form field name.

A

We get the html name attribute, yeah.

B

Yeah that third one.

A

B

A

I'd like to know if there's a way to get the name attribute, there's a message called tag name there.

B

C

That looks like it.

A

After inspecting the form object, I found that you can get the object name from it. Okay, but I think tag name is what we're really looking for. What do we? What the oh? No, I just clicked on a link without seeing where I'm going. Okay,.

A

A

Oh, what's that, oh, how would I call tag name where this happens is the instance tag class to which all the tag generation, drills down.

A

A

Gosh, let's see if there's tag, name being used anywhere else in our code base.

B

Spacebar to speak does not work, that's what I'm currently searching for. So I can see a few instances of it either being passed into definitions as a parameter or yeah.

D

B

Passed like I see, a few references to params tag, name so it's being accessed to the parameters, but I don't think that's any use for us. I.

A

Yeah, because we have because tag name also is you know, that's tag is part of our product domain too yeah. So I'm noticing that uh okay, I don't think we're gonna get to it. uh This one is this. One is interesting, but it looks really wonky.

C

A

I don't know: do you want to try rep making a helper for this thing.

B

Yeah we could, we could make a helper. um I'm surprised, that's something that we haven't had to do already, though, to be honest,.

A

Maybe, though we need to um maybe it's, maybe what we should do is just pass the object name and and just build it ourselves from the rails perspective from the view perspective like it's nice when rails owns all of this, but I'm kind of concerned about even the performance of like instantiating a whole class like for this kind of thing, like that's, not a big deal.

A

I'm concerned that we're we're calling not just some like global helper but like we're going deep into something.

A

So which one would you prefer? Would you prefer us? You know maybe creating some sort of helper for us to do uh rails field name and I could pass in my form and then expires app. We could do that. Try that out or um I could do something we could do something like object name and I could get my object name. I guess from it and then field name and I can get uh expires out or something, and I can I could do it that way, which which way.

B

I think the second play is.

A

A little bit easier.

B

A

Okay sounds good. I'm.

B

Concerned about.

A

Seeing ourselves to that deep rails knowledge, so I think I think this probably makes the most sense uh cool. So then this should be good to just be deleted uh or moved. um Let me just make sure that we're passing these things down correctly. uh So I I still personally like wrapping these things into options, but I don't think I'm going to do that right now. Do you do you think? Do you like that approach, or would you want to do something different, like I kind of like passing jason.

D

A

Jason yeah I like.

B

That, too, I think it's a nice way of approaching.

A

Okay: let's do that uh so object, name field name, boom, everybody's happy! uh Let me do a lovely.

A

All right, I'm going to move this to a parameter boom or a variable. I mean sorry. uh If we don't exist, then just return. If we do exist, we're going to get the options which is json parse.

D

Oh gosh, what are you doing.

A

Options boom, um but I'm pretty sure we also want to do the uh convert to do you know what I'm talking about. What does it convert props to.

A

Camel it's camel case.

B

Yeah convert props to the camera face. I.

A

Think that's what it's called right.

A

Object: props to camel nope canelo case.

A

All right and I'm just going to um double check, I'm getting these right.

B

Yeah, nice, I think this.

D

B

Is definitely a lot better, I think confirming the context inside the mountains that.

C

B

To create gigantic rails helpers.

A

Yeah all right, let's go back to here and see if we get the options in the console.

B

I think you should. I see no reason why this will not work on the first one. Obviously,.

A

That's how I feel.

B

A

B

A

You know programming is so easy because it works the first time always.

B

The first time I've ever.

D

B

No, this is good. This is cool. This is the way I would probably approach this. If I I just picked this up.

A

Nice, so this name and the id are things that we're going to want to generate um and then the other things we just copy over from the hammel. So what we're going to do here- and I don't even need so I don't need to do this and I can actually.

B

Yeah we can just literally pass. We can just render the tag.

A

Yep return. I have no idea why we why this has h. I don't know why we call it. You know what I'm saying.

B

Oh duh, I I once asked I I can't it wasn't about the age, but I once asked natalia uh about why they named certain things the way they do in view- and she told me the story about had they almost named one of their new books for react, and you know so it's just one big joke.

A

Yeah I've I've seen I've I've seen this used in like the react code base for like okay. If you happen to not have jsx like here's, you know the convention that people use for doing the like react, dot create component everywhere, whatever we'll just aliase it as h, but I have no idea why h was the alias.

B

The only thing I could I could ever think of was that it was referencing hydrating, the text or the document in some way.

A

That's that's interesting. I haven't considered that um anyways, so we're here passing props data, I'm just gonna spread my or I'm just gonna, even just pass my options down, which means I can kind of just call this props. uh If we're cool with that, um okay expires at field.

A

Here we go, we have a cool date picker, but we've also got props. Does that go below or above components,.

A

Above the components- and we call this, what do we call it? We have a object, name and field name.

A

Type string required true field name type. I'm not doing this right. What's wrong with me, come on.

B

Yeah, it doesn't like the the quotes around string as well. That's all it's a string. Obviously it should be quoted. What is the world coming to.

A

Sorry about that.

B

uh It's good, it's not so we're gonna. What are we gonna? Do.

A

We are going to.

B

A

um We're going to have a field id which looks like it was.

A

um Concatenated with this underscore.

A

This object name.

C

A

This field name.

B

A

um And then we have a uh field name. Oh no. I recall this thing field name. Oh no,.

B

The world is ending now, I'm.

A

Gonna call this input id input.

B

Name, input name all right input names; fine input, name works. I don't like. I.

A

B

A

I know uh all right, that's how it works right. Let's.

B

Should do the job.

A

Okay, um cool we are now going to copy over whatever we're doing in the slot. We're going to copy that over. So we're going to do um this whole thing goes into here and obviously it's going to look significantly different, but that's okay looks like we need to get a gl input in here.

A

Is that what they call it.

B

Yep gl input, yep, okay,.

A

Gl input the id is the input id. The name is the input name right. Stop me when I started.

B

No, this looks good to me.

B

Let me just double check. I always have to go get my ui library yeah hold on. I wrote I wrote one of these earlier. I should know I've already wrote a forum right around today. Let me just double check: where is it? Where is it okay? So we have an id which is handy down um a v model type and a placeholder is the general idea, and then we also have a name.

C

B

How to complete this.

A

Off data qa, what does that actually look like data qa dash, selector.

B

Excuse me: I need to see the day picker. I actually haven't written any day pickers at all.

A

Yeah, I don't really know what I should and shouldn't be doing. Attribute value should be marked for translation. Oh really do we is that something that we should translate this y-y and then.

B

Wait what what are we translating? um I wouldn't. I would just suppress that with the with the eslint, but I mean.

A

Do we ever have we ever translated this? Oh.

B

My gosh did we. Oh, we do. Oh, that's wild, it is. I don't.

A

B

There's only one instance ever translated, though it's also using.

A

Backticks, I'm a little yeah.

B

A

True- and it might have been- we might have chosen to do that because of the warning that popped up.

B

Yeah, I would say this: one is a go with your heart. They seem like you know, which one do you think is the lesser of two.

A

Well, I guess somehow I gotta I got to I have to ignore this. uh I don't think I can disable it come on view.

C

A

uh Wait scroll back down there, I'm gonna! Do it this way.

B

Wait wait hold on, I actually don't know, do we do? We definitely need the impulse inside the day. Picker is the day picker by itself, not enough.

A

You're bringing up some good questions.

B

I here I'm going to send you this on the chat. Second.

A

B

Think the day picker is actually enough. I don't think we need.

A

I don't know you think so.

B

Yeah, so I'm looking at it there, so it takes uh the day. Picker itself looks like yeah. Auto completes is false. Yeah we do not need the the inner intercourse.

A

B

Yeah, oh and the placeholder for the day, picker defaults to yyyy m and db. So you don't even need to put that in either.

A

A

Okay: let's try it out.

B

I love that sometimes like this. Also. This also tends to surprise me quite frequently I'll be writing a component and then I'll be like. I should really check if this is baked into the gitlab ui and then I will come and they'll be like yep. ah My job is done for me already.

C

Yeah, that's yeah.

A

Let's try that out, I'm I'm down for it, I guess, can we put id and stuff in it still? I guess.

B

I would assume you can attach I'm assuming you can id what.

A

B

A

Defaults to the calendar icon pass null to trigger on input.

B

Oh, if, if you're the the trigger for the actual base picker to appear.

A

Oh, do you think that's why oh, but we can pass null for input, focus and got it got it. I'm I'm down.

D

For it, let's do.

A

C

A

I'm I'm a fan and I don't think I would need to do these. Other things then, like I bet, audible, is already off and stuff right.

B

Auto complete is off yeah, auto complete is off.

A

Well now, I guess I guess it's not.

B

Oh, it defaults too often the day picker opens on focus otherwise defaults to no.

A

I guess, but I don't need to do these classes. I shouldn't need these classes at all. That's great placeholders, um I'm gonna just throw autocomplete off, because I don't really know what I'm doing. um Yeah.

B

That's a that's okay! I don't I what what's the difference between it being off when the day picker isn't opened on focus and when it is, is that the default.

A

What do you mean.

B

So auto complete at the moment defaults to off and the day picker opens on focus.

A

I don't I don't know, are those related, I don't know, let's just settle this off, I don't know this sounds like a good question for my mdn.

B

I uh it sounds like a good question for enrique. I think he would know the answer.

A

A

Expiry date field, I guess that was what it was called, we'll we'll double check.

B

Which one is it you're? Looking for the min date in the mac state or no.

A

um I was just loading the these attributes, what I'm gonna do- and this is actually really this- is kind of really weak, um because there's I could and should have done this different way, um but what I'm actually gonna do is I'm going to take this whole thing?

A

I'm going to copy this outer html.

A

You're laughing at me david this. This is some.

B

Gangster coding, this is my favorite type of coding. This is what I wanted to look like, but I work backwards. The best thing I've ever seen.

A

Yep, so this is actually I'm manually doing what I would call a pinning test. I'm saying yeah.

C

Nothing should.

B

A

It should be the.

B

A

B

I love it. I do. I do this really frequently with my migrating.

A

A

All right, let me double check that. That's what I expect it to be. That looks like absolutely nuts, okay, um yeah, that's a lot! That's a lot less formatting than I was hoping it would be. um So I see.

B

A lot yeah yeah.

A

I think I'm going to, I think, I'm going to move this to an html file and then.

B

A

A

And then do formatting here because you can do that somehow now.

A

There are multiple formatters.

D

What oh gosh, okay, sure that looks great okay,.

A

All right, okay, we've got this going boom; okay, you can do it get rid of this stuff. I believe it's called object, name and field name. Oh we're not using gl input anymore.

A

Oh okay, great I'll, get rid of my log here too, just for fun all right. We should be good to go now.

B

All right, let's see what we get, I'm super excited, hopefully.

A

We have like some feature specs for this.

B

What are the, let me just check, I don't even wanna.

A

But I guess we have some qa specs, because there's accumulation, it looks terrifying.

B

It's access tokens form, so look.

A

At this look, it's opening. Oh no.

B

We're missing two required props. Well, I guess.

A

That didn't work.

B

That did not work. What what did what are you.

A

Maybe it doesn't like.

B

Props props data yeah once they come out when you do it like that.

C

Yeah, let me let's double check.

B

Is that the props taken in as another taking it is that's camera case? So, what's what's going on? What's they look like.

A

Object name field name: maybe I've props data. Is that how you do it.

B

Oh, no, no! No! It's just props! It's props.

A

Are you serious.

B

Yeah yeah yeah: it's not props data, so you could just do the one word.

A

Why was I thinking it's props, theta.

B

Because that's what it is in, oh yeah, that that gets me every single time. Every single.

A

B

Write a spec, I'm like what what the hell.

A

I really thought it was. uh I really thought it was props theta, but I I trust you perhaps a thing. I thought it's a thing. It's part of the piano.

B

Okay, I need to maybe you can pass it like props.

C

I know it's just these are two different things.

A

Oh wait: wait props data yeah, but I'm just creating one. Oh, but wait.

B

Wait only restriction pass props to an instance. This is. This is primarily intended to make unit testing easier. Oh, so it is something you can use.

A

Well, it looks like props just worked, that's news to me.

B

Perhaps works, I don't see too many places in our application. I'll be very honest where I see props data passed.

A

Outside of a test so check this out, here's here's what I think I ran into props data you use if you're gonna new a component.

B

A

B

We're not doing that.

A

We're past we're using the render functions and render functions must just accept props. If I go over to render functions, I bet the option.

B

Restriction only respected, in an instance creation via new. I love how I love how as a detail, it's like this is only intended to make testing easier. This is only.

A

Intended to make testing easier, okay, but it's it's here now it's working, it's a different color, but that's okayish.

B

We're back here um it's a different color. It's probably has a slightly different yeah ui.

A

Oh gosh, the id and the name aren't passing through. Oh.

C

A

Over here that's that's garbage, so if it puts a div wrapper on top of us, maybe that's why we're passing our own input.

B

That's malachi all right. I guess we have to pass an input. Unfortunately,.

A

Yeah, let's, let's do that.

B

Yep this is this: is the beautiful and terrible part of abstractions and components. I mean they're there, but you just you, never really know what you're gonna get it's like a christmas present yeah.

A

What I'm gonna do for this, though, I'm going to um I'm going to move this over here and then I'm going to put that here and then I'm going to do.

B

B

A

Some reason that's makes it seem nicer.

B

All right I love it. I got no problems with it. I got absolutely no problems with it at all. If it works, it works cool. Let's check it out. The only thing.

D

B

Our html definitely will be different because of those div wrappers, but we shall see.

A

Unknown elements what's wrong with you.

B

C

B

In the components.

B

Is it jail forming push by any chance.

A

Oh gosh, I bet you're.

B

B

We have a temptative relationship, I gotta say.

A

Foreman played wordy, but I think that's coming from bootstrap too.

B

Yeah, I think so like um I like building uh so far what I've realized been working with the application. I love building uis in general, but building inputs and anything that touches the code or jobs or anything like that. But forms are faster.

A

Id is here nice, nice. I start throwing a value we expire.

C

A

Is that working, hopefully that's.

B

A

Let's, let's, let's create one to see, here's a test. Let's.

B

Do it obviously.

A

We're gonna use this test, one as a pseudo privilege.

A

It can read repositories.

A

See if it works.

B

A

It was created test created, expires. I don't remember if that's right.

A

I'd say it expires tomorrow: okay,.

B

Let's try that halloween yeah nice.

A

Can read users all right? Let's do it halloween.

B

A

Halloween in about 14 hours, cool yeah,.

B

A

B

A

Well, that's my.

B

Very first indoor halloween.

A

Yeah, that seems to be working, which is exciting, that.

B

Looks great, that's awesome. Oh wait! A second! What's going on with the name, what do you mean wait is that the right is that the right formatting for name name, is equal to personal access. Token bracket expires.

B

Yes, it is yeah. Okay, sorry, ah sorry, nope.

A

You're good: let's um let us test against our pen.

A

This js access tokens expires at oh, but we just overwrote that thing. uh Yes,.

B

So we're definitely gonna have some extra divs, so we can just access the date picker wherever our gl date. Picker is.

A

So that would be that that one there I think yes, I am realizing. I don't know. Oh, I left all these things in here. Oh no, okay,.

B

We we doubled up, we doubled up for sure.

A

Penn would have caught that.

B

This is cool; this is this, is this is a great topic for the pairing nice choice.

A

Cool yeah, I'm glad I'm glad it worked out. uh Yeah! Oh look! I can click on this. It works nice. I'm sold, um I'm going to copy the outer html of this thing.

B

Let's do it, let's see what it looks like.

A

I'm going to.

B

A

B

A

This to um I probably, should have called it pen dot after html. That makes sense, I'm going to move our before pen to call back before html uh and then I'm going to open up, pin dot after html.

C

Because I'm going to run.

A

A

Boom that looks great to me and then I'm going to run vim diff.

A

A

You I'm gonna, I'm gonna just start before one, because I'm not gonna, I'm not dealing with that.

B

That's a lot of none. That's a lot of manual stuff.

A

Yeah; okay, for some reason that that those options were there: okay,.

A

Oh yeah- and I have this thing so I can also um just delete that wrapping one and we're good. uh Maybe I can even move all these over nice.

A

Oh, the the I see that the the ordering of these things is different. Let me see if I can fix that.

C

A

A

Placeholder class, oh no, we got different classes, we do have different classes so.

B

B

Gl form, input and gl.

B

Oh, so we only have to say one two, three, four five yeah.

A

Look, how look how this one had form control twice.

B

Yeah, why does it have form control twice? That's interesting.

A

That's that is interesting.

B

A

B

Bro the gl form input. I would expect, because that should be there. That's the new classic, isn't the new styling, but.

A

I think that new styling is a little contradictory to what's going on. We need. We may need to address that, but we can do.

B

A

um We could do that.

A

This all looks normal.

A

C

It's the whole calendar.

A

All right, I'm going to oh all right.

B

A

So really it's just the class and that's the only thing that's different, which is nice um and we're about at times. So we can, we can handle that part later. I can commit.

B

A

Part and then we'll we can deal with, though yeah later so that sounds good to me. Let me take it nice. I know.

B

That these, I actually know that just from an mr I reviewed recently for preferences is that these screens are actually under a pretty hefty push to be refracted interviewed, use the uh get lab ui components, so we might have helped somebody take a step in the right direction.

C

B

A

um That was awesome, yeah, it's nice. Having these things live uh it's nice having these things live in view, um and now we've gotta write a test probably- and I think this is a good example for like just doing a snapshot test. In my opinion,.

B

Yeah super basic super straight forward. Just there's.

A

B

A

Right, there's no branching logic here or anything like that. Just doing a shallow mount snapshot makes sense to me, uh um but I kind of do hope that this has feature specs wrapped around it. um Let me get rid of this console log.

A

I'm gonna go ahead and uh keep this open. While I create the mr and then we can, you know, we can call it if you gotta, hop off, feel free to hop off. No, no I'll, hang out for.

B

A minute I gotta see, while you're, creating that I'm just gonna check real, quick and see if I can find any feature specs. It's a very quick curiosity.

B

uh It's not gonna be a node modules anyway dave. I can tell you that.

C

B

Bro files, personal access, token.

B

Yeah there we go so we do have, we have one, we have one feature spec for us and it does touch the expired field. So, oh.

D

B

But it references it using find field expires us and then it finds.

A

Yeah so it'll find it by the label and the label will make sure like the ids are matching and stuff. So it's that's nice. um Is it just for personal access tokens because we had we're using this for a number of other access, token ones.

B

I have I can find the one here for a personal access tokens anyway, I can look for the other ones on linkedin and camera. If you want to.

B

The only thing is that you might want to update that feature spec because it finds it by the label, and then it looks for the picker pick. A net stock.

A

That sounds like some stuff that gets generated by date picker day picker yeah.

A

Oh my gosh, okay, um do you know how we can override this border style? Have we done this before.

B

uh Yes, so you can use a utility class with the important one of the important utilities which is they're they're, not great to use generally, but they're they're really useful purposes in these refractory moments, where you're trying to bring things in line, and you need these like stuff gaps.

A

B

So what what was the border? What was the border and what is it now.

A

Well, it looks like the border. Color is oh well, I don't know what it is. It said it was blue.

B

uh Let me let me just have a very quick look and I'll tell you what we need. I will tell.

B

Welcome to my uh welcome to my nightmare.

A

I know I've done this, I I know I've created utility. I think I've created utility in our utilities to overwrite that box out of color.

B

So what we just need to do is set box shadow to be none, and then oh I've done this before actually recently. So, oh my gitlab just crashed okay uh-oh personal access tokens not good, so we need to use the utility for the box shadow.

B

I can't remember the color.

A

And pull it, let me see if there's a smile here for in our.

C

B

So we need the the box.

B

Yeah there you go so you can use this class to first take away the box shadow.

B

Why is my computer doing this?

B

We can use this class to take away the black shadow and then the color that we need is.

B

The color that we need is dbdb db.

A

So we so we need a border.

B

Yeah we need a border 1tx, it's the border, inset gray, I think. Is it gray, hundreds or a 200? Is this one.

B

We need the border inset.

B

I think it's this class, it's either this or it's the 100, but I I can't can't square to it, but so that should insert the border.

A

Does it need to be? Does it need the b1 or should just be border gray.

B

uh Yep, sorry, since we actually want to so we want to do it the old school way you actually just want to set the border gray and then order one ah yeah. I see, because that one is actually doing the new one, which is the box shadow. So you need this guy and then.

C

Got it what's wrong with you.

B

That's not liking, uh oh, you might have to add the exclamation mark to after them to make sure that they apply correctly.

A

Take that nope what's wrong with it. Let me see border grade.

B

Yeah gl border size, one and then the gl grey for the border. What's going on here, do you not like this.

A

B

A

Style has is none too, my goodness.

B

Oh, that's strange, silver style. Let me find the class for border style.

B

I've got a few of these border style, border style board established.

B

We've only had to apply six classes to retro yeah.

A

It looks like the gray is actually gray 100 for consistency.

B

It might be, I I couldn't tell you offhand if it was yep.

A

Yeah so that looks that looks right, um I'm not a fan of adding all those classes. I kind of wonder I wonder if we have.

B

A

Yeah, if we've addressed um box shadow anywhere in our in here, I kind of feel like we might have done that.

C

A

Form control. Oh, this is doing something interesting.

B

Oh, that's include border, oh interesting, so it looks like somebody's built, a utility to do this for us something.

A

A

Yep, I'm gonna, I'm gonna wrestle with this um uh another time. um That's.

B

Totally fine, I would if it was me, I would open the mr and paying enrique he would. He would know off top okay.

A

That's a great idea I'll ask him if he knows um the best way for me to do this and yeah. I know I've done this before and I thought I created a class to to like make it look the the old style, um okay, but that.

B

Would be awesome.

A

I think we may want to do that, but anyways uh now I'm going to create the mr I'm going to pin ping enrique like you mentioned uh yeah, thanks david. This is super fun.

B

A

B

It was awesome, I'm.

A

Gonna stop sharing.

B

A

And I'm gonna stop recording thanks for watching.