GitLab Pair Programming - Frontend, 20 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20201120 - Show alert on comment box for external participants

Description

In this session we were excited to have Lee Tickett a member of our Core Team bring up an issue and join our pairing session.
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/225291
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48261
Core Team: https://about.gitlab.com/community/core-team/

A

Yes, please, okay, so we've got lee ticket here, uh core team member of get lab so stoked that you joined our uh pairing session and you brought up really cool issue about showing an alert note with email participants that are subscribed to the issue in the commentary, but this has to do with the support desk. So these aren't necessarily like get lab user created issues. These are issues created from the support bot um which I'm excited to explore because I haven't I'm not really familiar with this area of the application.

A

But specifically what we're interested in is this bottom yellow? Looking thing, um that's specifically the thing that we'll be uh building um it looks like coming up down the pipeline. There'll be quick actions to actually adding these emails, but that's not really in scope for this specific issue. Does that sound right being good? Okay, um let's do it.

A

uh Hopefully I don't have any uh an embarrassing code up, uh so I'm gonna check out master, and so you said that there's some some yaml things that I might need to change, but maybe I don't need to if we.

B

Yeah I the challenge we may have. um Let me think about this. I think we should be all right. You probably won't be able to see the service desk um menu option, but it does just create issues at the end of the day and all the service desk menu option does is shows you a list of issues that are filtered to show only issues that originated from the gitlab support.

C

Let's try to create an issue attached to our service desk, both both through the console and see. If we can see it in our jdk, do you think.

A

Yeah, I think I think it's a good idea. I definitely don't have a user like that. So I know um I've been through all my fake users on gdk and I don't remember, support but being there really, I'm sure, I'm I'm convinced he must be there, we'll see. Okay, all right, you might, you might be right lee, I'm also. I don't uh the the my fake users in my gdk. um They may not like me very much because they don't pay too much attention to them. So.

A

You're neglecting them, you know, I wouldn't call it that, um but they would call it that.

B

So out of interest now you're, just in a quick duty update there or no.

A

So what I actually and you uh I have a um script, and I could share with you my um my dot files, which has this script in it. Oh gosh, I'm trying to copy this thing. Oh my goodness, what's wrong with you, okay, um which runs a number of things, so that I have a very fresh gdk, so it uh stops the gdk. It removes. Cache removes webpack stuff, runs, yarn bundle and runs gdk start and then migrates the database and then waits for gitlab to start awesome.

A

um The reason it does all of this is, I end up changing branches, a lot and so making sure I'm at a very fresh copy.

A

When I'm like reviewing a code or something- and I don't have anything cached is- is really important. So I just have one script that I run to do all of that awesome, yeah, and so now it's it's pinging the gitlab server. Until we get a 200 and then it'll it'll send a mac notification uh which doesn't make any sound, so I sometimes still miss it, even though it notifies it, but maybe you can start opening the rails.

C

Console already that's a great idea: let's do it because it takes a second also to.

C

Open up by the way, paul I'm I'm waiting for you for to change your kit, alias to fuse roda you're, really close.

A

What are you talking about.

C

Okay, you didn't play morrowind.

A

C

A

What am I missing.

C

No no, but it's not morrowind that I'm talking about. I forgot the name. Now. It's fine skyrim, okay,.

A

Skyrim, oh no, I didn't play skyrim yeah.

A

um No, I didn't play skyrim.

C

C

So you're almost there, what did you say your kit, alias, are f-o-r-o-h? Aren't they oh.

A

Yeah yeah I follow, I follow and I row for fetch origin and reset hard origin.

B

So I'm glad to see it takes almost as long on your hardcore machine as it does on my windows.

A

Yep yeah, it's uh it takes a little bit. uh This is why, like I, have that one script for doing all this, because this is usually, if I'm, if I'm like. Okay, I'm gonna review this. It's like. Oh, I gotta test this locally. This is when I'll I'll get distracted. So this is like a critical moment in the day. It's called coffee. Excuse me, don't get distracted or you may not come back. uh That's what happens to me.

A

um Okay, this thing finished pinging and we're in the rails console let's open up.

A

And I I meant some of the things that I work on. I have to have https and other things. So that's why I have it like this. Oh, it's still taking some time uh users sign in directly. Okay, for some reason, I don't know if you've experienced this, but that first first redirect seems to take a while.

A

I don't know why all right.

D

A

Step one is see if I have a support user. Absolutely, let's figure that out over here in admin go into users.

A

Can I just look for support that is.

D

The third one! What what.

A

When did this thing show up, I guess it showed up on august 9th yeah.

A

That's news to me: wow, okay, so this this this this person just has to create some issues. Yes wow! Oh, I can't, but it's not letting me like. Oh I'm.

B

Caught in past tonight,.

A

I guess I could do an impersonation token and we could create one through the api, but probably just me, creating one and then changing the author. Maybe yeah.

C

Or changing yeah yeah.

A

C

The author of uh one that you already have even.

A

Oh, that's a good idea, yeah, that's a good idea, but well let me create a new one because I don't know if, like I I don't know I'll go.

B

Any profanities in the subject, perhaps potentially.

A

Right, um let me let me go ahead and create a new one.

C

A

C

Can you can you just quickly check if you have any project from the support board, because the factory here grab groups and projects? No, of course,.

A

Not so so, where, where do you support? Tickets live any project really wow, so this even works for like self-hosted customers that are like wow, okay, okay, interesting.

B

And probably 90 percent people using it would be self-hosted because I think they've only recently introduced the opportunity to customize the email address. That's used.

A

I got issues okay,.

A

That's our project.

A

B

um And I'm gonna create an issue, so you can see. Service desk appear on that that drop down. Actually it probably just going to tell you that you need to enable it so. Oh wow yeah, more.

A

Information- okay, all right, we're gonna, try to hack around that yep um your site is broke. Yo! Oh wait! I I don't know what.

B

I should have probably brought up a little bit earlier. Apologies to that is, I don't know if this is necessarily whilst it's focused and aimed at service desk, I don't know whether it's going to be limited and restricted to service desk. I there's no reason why an issue that's created by you portal couldn't be then have external participants.

B

Well, that's an issue. That's a good.

A

That is a really good observation and so.

B

A

Though, in run time.

B

To what we're doing I don't think all we need to do is identify, are there any and if there are.

A

Display them that that sounds great, because I I think I see what you're saying you're saying that at runtime we may never end up in a situation where it's a non-service desk issue that has participants, but at from this perspective, the only thing I'm concerned about is just this field, so, whether it's a service desk or not just hey, I just need to present this field so yeah. That sounds nice.

A

I'm still curious to see, if, if me reassigning this to the service bot desk like how that chain, the service bot, how that changes things um nico, you said you looked at the the ruby file, uh it's just a model for the author. Yes, it becomes service desk. So the author, if the author is service desk, okay, so if I go to, did you get the idea of that yeah 47? I think it was so. Oh yeah the id is 47..

A

So if I go to issue dot, oh I'm not going to be able to find it. Do you know how to find things? You need to find the.

D

Id well the actual id, not the issue. It's not going to show up in.

A

uh Oh, this is just giving me. Oh, is this said: yep 431, okay wow. I got really lucky there.

D

A fine step just double check. It.

C

Yeah yeah yeah.

A

And then I could do author. Oh so let me uh understand: s-bot equals user.fine47., you, oh, that is it wow wow okay, then issue equals issue.find 431.

A

Okay issue.author equals spot yep. If they don't have a meant to produce, do you have to do save or something.

A

That's cool if it's worked.

A

D

A

Has changed to get lab support bot and that is it.

D

Should be inside the service desk now.

C

D

Inside the service desk.

B

If I understood correctly,.

D

C

D

A

A

Okay, but so that was fun.

C

um But and as you see it navigated back us to the issue details, so it's just all here the changes that we need to do. Yes,.

A

Yes, and so the main change, I'm gonna go ahead, and just so we're we're making it look like our design here make this a confidential issue.

B

So all service desk issues are confidential. Actually, so that's something interesting that potentially we didn't see before that we thought all we had to do was attach the support bot but technically flagging it as confidential as well, should be a prerequisite. So.

A

It would be cool and we don't have to this, and the first time's sake. I won't dive into it, but I bet we could find what is that? What's that service is being triggered when the email gets sent and we could just call that directly from the rails console that would be really sweet. That's.

B

A cool trick to use in future actually yeah.

A

um But I'm gonna go ahead and just for uh completeness sake we'll make this we'll turn this on, but you're saying there's now another field here um and so the first question for me: I'm asking is, I don't know if this is a view or a rails thing this uh so.

B

Yeah and the thing that I mentioned earlier as well is, do we need to think about I I know I got stuck stuck on this one before um sometimes there's both if it's behind a feature flag. um That complicates things.

E

B

This is a new comment box, but what about, if you were to add a comment and then clicking the reply to one you've got so there's.

A

B

Instances of this same box.

A

Yeah and no, you bring up a good point so, but I think it's going to be wherever probably wherever we have. This alert is where we would do the other alert. So we could probably just look for this message and see. Where is that being used? If it's in hamland view sounds good like that, but I think this is also. I think this is in view. I think hopefully, we've migrated by now, um but you bring up a good point.

B

The good thing is, if it is in view when whoever comes to do the the changes to add the quick actions etc. Hopefully they can hook in so that that's updated a bit more real time.

A

D

Oh notable warning notable I'm not doing this right.

C

So whatever you were telling before there's a service desk handler in um gitlab lead gitlab, email handlers that does what we were talking ah cool. So we could just call that directly. Well, maybe maybe just for the sake of yeah context. That makes sense. Let's delete some front-end code, that's enough! Ruby, okay,.

A

Yeah, that's a good idea, so I'm gonna do um something crazy and I'm going to just. I want to confirm that we've targeted all the right things and I'm going to.

C

React by ground pole, maybe.

A

This is definitely this is this is as real as it gets. Oh, my gosh, it's taking a long time, I'm just recompiling the javascript.

A

First, oh nice, that's as good as I was hoping. It'd look. Oh, it looks beautiful perfect. So it's the same control component being used yeah. So now I'm curious. Where is notable warning being used notable warning, uh so I usually do these regex searches um on vs code and to see if something's, imported I'll search the file name and then end it in quotes.

A

uh And here it's used, oh and in note form it's used, so it's actually used in two places. So, although.

B

It's the same component, that's being used to show the warning. The actual form itself is a different component right.

A

Oh looks like we could conflict with some other kind of stuff, that's showing up here at the bottom, with.

C

Are we finding showing multiple alerts, one on top of the other? If need be, or do we need a priority order? Well, this is a ux question.

A

If this would be a ux question, it'd be worth taking a picture of like what about this situation, um and I can almost well that doesn't look good at all. Sorry,.

B

Okay, I can um so what have you seen there that just sorry I mean didn't quite quickly, so you saw there's already a conditional alert below the text box. Yeah.

A

And I don't I don't know what that's going to look like. I don't know if it's, if it's going to be going back to here, I don't know if it's going to like or when that alert shows up, and we have this footer like is that gonna, somehow visually conflict with each other in a harsh way?

A

uh It's just here's the thing with get labs front end, there's so many contacts that sometimes just adding another little message may look nice in the happy path, but in some other paths it just doesn't it doesn't look good and so thankfully, the code kind of screams at you when there's another context that could happen here and we can actually just we can make this true and just see what it looks like um and uh and go from there and and if it's, if it looks fine, that's great I'll, also I'll just usually take a screenshot of what we're adding in addition to these other contexts, for the ux to just review and take a look at it and that's the thing too is ux.

A

They do great work, but there's so many contexts to it, and so it does take a collaborative effort for everyone to catch all of the well. What if this, because.

E

A

Lab is such a huge application.

A

And so similar to here, I'm saying oh, this is just the form actions though, and that's just so yeah. I think we can totally add that to here, but I'm a little concerned and I'd like to know nico and doug's like what your opinion is like we. We are doing this notable warning mark downfield text area twice we're about to do another thing to two parts of the code. Do you think we should encapsulate this? You want to dry it out.

C

I always want to uh see in the part of the code. I would suggest caution.

E

I would um make a mess first and then and then see if there's a way to dry it up. I wouldn't start with trying to dry it up.

A

Okay, all right, I'm I'm game that works for me um and you're right. Yeah people leave comments frequently. This is a high traffic component.

A

C

um Do we need both for sure by the way, because, um as far as I know, everything is a note, isn't it on the issue or the comment is uh for the thread.

B

um I think once for a response, yeah on on a thread and ones, but a new.

A

Yeah um going back to here, because I think yeah one is for this bottom part, and one is, I think, for this: I'm pretty sure they look exactly the same.

C

Inside the buttons at the end, okay, okay, yes,.

A

So we want to add this: this little yellow thing for gl alert, yeah yeah. um Let's, let's do it uh and we have a component for that right and it's just gonna be these emails. We we send a list of emails to it and it'll say hey. These are gonna, be notified. That sounds great.

C

Lee do you know what is the field that uh is sent up.

B

um So I think on the issue it mentioned the the table, if that's what you're, referring to.

E

B

um That's where I'd be interested in, I guess I've, I've interrupted you and you were going to come to that, whether you would initially hard code, some values and then try and wire it up or or what your approach normally would be. I was.

A

Going to hard code, values and wire it up, so I was going to try to get to visually and then connect. It is that cool to you, nico and doug.

C

Yeah, just uh the key I wanted to have the same. We would have our code of the thing on the same key in the issue right or well. You can do v if, through yeah, let's go with that. Okay, um all.

A

Right so I'm gonna introduce. uh I was thinking just introducing another component like we have notable warning. I was thinking of just doing one for very specific. Like participant note, please help me.

C

Yeah we may need to do some concatenation of the emails, maybe so, if it's just uh put in the other two texts, I wouldn't, but if we have a minimum of logic, yeah, let's do a component. Okay,.

A

um I'm just going to create one, then these are these all live in notes right. This is a notes. Yeah, okay, they all love your nose all right. We have a notable morning where does that live?

A

D

Oh, it's not there. It's not there. Maybe.

C

It's a shared one.

A

Oh no, it's supposed to.

C

Be here it's in view shared no.

A

Oh, it isn't view shared okay, um I'm just going to create one here called and we can rename it later if we want to, but I'm going to call it. These are called participants.

B

Yeah, were they was there something specific about them being external, because I think everyone that's commented on an issue is a part you bring.

A

Up a really good point.

B

Yeah externally.

A

B

This decision-making.

A

C

Participant naming is very hard. We know right, it's one of the hardest activity.

C

A

You're telling me nico that that we have a get lab ui thing for this yeah.

C

Alert is the same that you are using actually to make the yellow thing on the top in not only.

E

Warming so very notable.

C

Warnings- I don't no, no we're not um so it was under the one that we will conflict for in comment or note form is gel alert ah this one there you go.

A

I'm just gonna, I'm not I'm not doing anything, that's good! So I'm just gonna. Okay, uh that's a little better! That's a little more than I think we asked for it.

C

Yeah yeah definitely.

A

They don't have any buttons.

C

uh Yeah, remove the clasp, maybe and and that's it.

A

um Do we have does it? Do I have to pass a title to it? Can I just give it the title whatever where you're gonna display, I guess oh, so I don't need to pass. It doesn't have like content.

C

You can either pass a slot uh or you can pass the title in the proper as it is right now.

A

Okay- let's just do a title, then that that's fine, um so this is going to happen. Does it have a prop of emails type array? Maybe prior true uh and it's oh yeah. We got a components and you need to finish the imposting as well. Oh yeah, you're right! Thank you. No worries.

B

um Computed when you're adding a component like this, would you conditionally display it internally, here or externally, where you're referencing it? I.

A

I am so freaking happy that you asked this question it's because it's.

B

Fully ready because it's a really.

A

B

The reason what made me jump to it is because you said required true, so if you know my immediate thinking was well what, if there aren't any, um but then I guess what you're suggesting is we wouldn't call this component or yeah? We would have something to not call it.

A

That's a good question too, when, when you say view required true, it just means you have to you have to pass some value to this property. It could be an empty. No, it could be empty, um but you ask a really good question of. Would you do the vf here or outside?

A

And I personally for this specific case? I would do it here because it's nice, when all that logic can be encapsulated, but there's a cost to doing it here, and that means we have to. We have to mount this component and then the component has to decide I'm not going to render anything okay. So this is where I would do a little bit of analysis of how many of these components do.

A

I expect there to be, and if I expected there to be like anywhere in the 150 to 100 range, you want to do the logic outside the component, because you don't want to mount it like you want to try to get that win, but if it's not going to show up very often, then it's nice for maintainability's sake to just keep it in here.

B

Forgive me for going down the rabbit hole, but oh please so. You've got an issue with a hundred comments on it. um Will this?

B

Do you think when you click in the reply field against a comment, it will then load the component or will it or already loaded a hundred of them when it rendered the page in the good.

A

That's another good question, so let's let's go ahead and leave a comment here uh yeah, so we only load that only if I'm actually doing it so, I think we're I think in reality.

E

D

A

But just hidden yeah, I think in I think in reality uh I don't think we'd end up with a lot of these cool.

C

Can I can I bring? Can I bring a counter argument? Paul sure go for it, man, I I think the visibility logic should always be in the coordinator component.

C

So this is a little piece of ui right and if you have 10 of those- and there are the the if are all eaten inside when you look at the par- and you don't know who is where one right instead, if the parent does all the viv show this piece if this happened show this, if that happened right you're, always you always know what is where at what time? Without going and opening makes sense, what I'm saying so for maintainability.

E

I will always put it.

C

Outside unless, unless it's a super complex logic- and you have to call an api and- and so okay then encapsulate this somewhere else right.

B

That's a good point, so it.

C

Works for me too, to call.

B

The api we might do that inside of this component.

A

I I I can. um I dig it too yeah. I think that there's cases where both, but I like what you're saying nico, if I put it in here even from if I'm reading the component, I'm gonna be like wait. Where does this show up like I'm gonna, be surprised?

A

If I see it here and I and I'm not seeing it visually, I'm gonna have to actually dive into the component, see it's not showing up. So I think that's another really good point um man. I love. I love these conversations. um Yeah, I'm a fan and there's also a huge win. There's a performance went for moving outside, so let's do it outside, but regardless the emails will still be required right. Yeah, okay, um but I don't have the vf here. Oh, that makes it so easy um you're making this too easy nico.

C

So ccs to test as well.

A

I know so I'm just going to say hello world for a second, um because we're software engineers.

B

Yeah and then what was the magic key combo to format that oh.

A

B

Click on save you, gotta get format.

A

On save man, that's an extension in vs code, no.

B

A

It's a setting, uh so if you need to have it.

C

Better on, if you don't have the format on save on view, file list doesn't work.

A

Yeah it's in um gosh, where so here's in my workspace settings. I guess- um and we actually have this in our uh front-end guide somewhere like for setting up vs code, specifically uh yes, so like for json for graphql for these other ones. I have it saying: yes, we're gonna format on save for view files, and it saves so much for me personally. I like it because it saves so much time. I don't even think about formatting and it just happens and we're specifying we're. Gonna use prettier to format um now.

B

That's that's awesome. I've I've picked up recently left hook's been added, so a bunch of linton has saved me a number of pointless pushes, um but it doesn't do prettier. So that would be awesome if I can add that in check.

A

Out I'll I'll send a link, um and if someone else wants to find it, it's in our front end guide. We have this I'll I'll, find it thanks nico. um Thank you, yeah! We do have it somewhere.

A

Okay, we're ready to import this thing.

D

Import external wow.

A

um Would anyone be opposed to me calling this external email because participant is a really yeah? I think it's a good idea. Okay,.

A

A

uh I don't like big words.

A

I have to type them.

A

C

Okay, there is this formatting with print here, I'll sign it here in the chat.

C

Thank you very much.

A

I've been having some some gnarly type script issues, so I have no idea what's going on, I think anyways. I'm gonna ignore that uh and I'm going down here and we're going to drop our external email warning emails.

A

Did it taste that I call it? I did email, okay, cool and, let's, I guess, do the same thing over a note form, because I don't really know which one is.

C

A

That seems like a good line to put this.

A

Yeah they're really big, there's a lot of stuff going on.

A

All right, I can hear my computer spinning, so I know webpack is working.

C

Yeah he's there, oh nice, is it the right spot for the design? I think so.

D

It looks right, let me so in that case it's.

C

Just the size is wrong, maybe get.

B

Rid of that icon, if we we have control over that, that would be nice, so I.

A

Am going to go to um our ui, we guide yeah.

B

A

Gonna go to our storybook. You can't actually what you can't get rid of the icon, but maybe we're not using the right thing. I think we're. Actually it's called a call out that.

B

We're trying to use well paul you're, now off the back of your pairing session. The other day I had to raise an mr for get that bureau. Didn't I say. Maybe this will be another.

A

But but at the same time, so this is definitely takes some ux opinion because maybe we're using what isn't really an alert like and that might be. I think something that's contributing here. uh There's no call out here, though, as of components, I don't see any yeah, I don't see a call out and I can understand.

E

A

I don't know, speak, I think yeah I can understand. An alert seems like the purpose for this.

A

C

I think we should use others for this, then that it doesn't.

C

So it seems really different but right below it. There is another glass in the other component. Can you.

A

Uncommand the viv I see, but there is a difference. Let me yeah. Let me do that vf, but there is a difference between. I think these two, because that is, if you go back and you bring up a good point, but if you go back to that one and and please feel free to say no paul, you're wrong. um This, I think, is based out of a user interaction, so I feel like that's. What alert is for is like I've done something I get something.

E

I have a button to now work.

A

With it- and I think that this is just a note like and I think they call it- I think bootstrap would call it a call out. This is just like a sticky note. Yeah.

B

Part of me thinks that, generally, when, when you have an alert, you have an error, a warning: let's.

C

Check, let's check pajamas what pajama says. Sorry I get fixated in trying to use gitlab ui as much as possible because it reduces or ux depth right, yeah.

A

I really thought we had a call out component. No, we don't it.

E

Feels like the alert will demands action or either delayed or right now this doesn't really demand action right, yeah.

B

Then again, what about the confidential was that that wasn't using jl? Was it.

A

No, it was not sakai yeah, so this is nico. Do you see this is what the alert looks like the g alert yeah.

C

Yeah: okay: let's uh we can copy the markup of this confidential issue.

C

A

Is that note warning yeah? Okay? In that case, I love that response from you, niko you're, like.

C

No, uh no, I explain why I get so so stuck on this, because um I I'm other man to use only gitlab ui components, no css at least where I can and when I can't they go back to the design and say, ah can we redesign these please? But this is not the case right. It's not the case. I understand it is also the semantic semantic meaning is different. So.

E

Well, I mean just because it's not there doesn't mean it can't be added right. uh So maybe this is a good point to to to suggest adding it to the gitlab ui.

C

Yeah, that's that's a process because it's not! The thing is that I was verifying. If there is in pajamas, um I don't see in pajamas at least nothing called call out or really. I really.

A

C

A

One, I really thought we had a call out on pajamas. I'm I don't I'm not I'm I'm not doubting you. I'm just surprised.

B

What what's the difference between pyjamas and gitlab ui.

C

Well, the guitar is the implementation of pyjamas, plus some goodies and utilities.

D

C

D

C

No, no, no, no, no, no uh or regions! Maybe one of the two. I forgot to click on regions.

C

um So if it's, if it's not in pajamas, it means that it it's not being designed right yeah. If it's not been designed, there's no per se procedure for it to be designed and then then we can bring it to gitlab ui right. I know because um so I'm following.

A

I think what we have observed is that um we have a missing there's a gap in our oh, my gosh. Where am I okay? There's a gap in our ux for these kind of things? uh Are these alerts?

A

That's the question, and so maybe we need to create a gitlab ui issue, pinging ux for like would we call these alerts or not? And if they are, then we need to change our component to be able to support this kind of alert.

A

What do you think sounds good yeah.

B

A

um And then we'll reference these things, so we can clean them up uh when all that is said and done. uh Okay, all right we're here.

C

Oh beautiful, no but uh look, then the borders are upside.

B

B

A

That was like a hawk you've.

B

Got good eyes, man.

C

Or probably a lot bigger screen than me, perhaps um yeah. I know the three three years of pixel perfect layout. Does this to you? That's amazing.

A

So should we create a class called issuable note warning upside.

B

A

Or should we should we do some utility classes.

C

Can can we just uh do this like override this with um utility classes yeah, we can try that.

A

Out, um do you got the you got the cl, those you got, those.

B

A

Classes for me, yes,.

B

Tell me what was the the top.

A

um Warning got in terms of borders, so it looks like this class is setting the color and then setting this the border yeah. Isn't that a single pixel all the way around, though it's a single pixel all the way around, except we got rid of the bottom one.

A

So can you untick that to see how fugly it looks? Let's see oh but come.

B

On, where is this.

A

uh Where is this radius? Oh, here's. The radius.

C

Zero four: four: zero zero.

A

The radius needs to be inversed as well, so I have a crazy idea and- and please stop me um if this is if this isn't going to work, but my crazy idea would be because there's clearly a lot of similarity between these two things.

A

What if we introduced a um what if we introduced a component for issuable, note warning that just had a slot so that we could put whatever we want in it, but it had a property for like inverse and applied the classes like the utility classes based on if it's on the top or the bottom or whatever. Do you.

B

A

B

But um I I don't know if you guys will say the same thing: it's another one where the temptation is maybe to, although it seems backwards, maybe build this and then dry it afterwards. Yeah.

C

I will I mean: building this means building their usable one. If you make it with utility classes, because then you will swap one utility classes and get the reverse right.

B

But my my looking at that, if, if I, if it was my system I owned, I would just have the border all the way around and the radius all the way around. I don't think yeah, no.

A

Out of place, you.

B

A

This is a this is a can of worms.

A

Oh my gosh yeah. I don't even know if who, from the ux.

B

Team would come after me.

A

Is the question look at look at this?

A

Do you see what how I.

C

A

I don't see the size well, we have this rule. If the md area is followed by a issuable warning, then we change the top border. Do you know what I'm saying yeah we need.

C

The same reverse again, I.

A

C

A

Know you could do that? That's super cool! I um I realized. I really like what leah is saying that we really should just do this border, like the outer component, needs to be responsible for the border right like why why? Why can't? I just create a div all the way around this, because.

C

Then you're duplicating the logic, aren't you? What are you talking.

D

C

We we have it on two different components: right, we're already duplicating the logic.

A

This is more. This is more evidence why it should be it's its own component, yeah yeah,.

B

But unfortunately, if you do that, I I can imagine you never get to the bottom of the rabbit hole right.

C

Don't say that lee um um tomorrow you will see an epic open.

A

By phone, so I I I would want to do that. I honestly think that's a that's a smaller amount of effort than doing you can knock it up in no time at all. Right, I feel like that's. A smaller amount of effort is to just introduce a div that wraps this than doing fancy css to change the border for this thing and flip the border. For this thing, let's just simplify it. I think that's going to be a lot.

A

That's going to be going in the future, it'll be nicer and I think it'll be even nicer implementation, but we are running out of time for our pair session. So let's leave this as a to-do on the mr um and let's just get the field in because that's the bit. I think that we're really uh interested in. um So what was that field.

B

So the issues got the name, it's a table. I guess rather than a field which hopefully has a relationship to the issue.

A

B

A

A

Is it maybe, is it called like external participant now? I think.

B

Have you got the you've still got the issue open? I think you pull sorry.

A

I should have it on my screen to say.

B

um I do have it here so right at the top, so service desk, email participant. Oh.

A

No, that's a feature flag. Sorry, so I lied. I could maybe look for that feature flag and see where it's used and it's not used anywhere.

C

Interesting, can we can you can just peel out the issue model from the rails console if you still have it? Maybe we can see something real, quick sure. Let I'll just have a quick look on my screen.

B

Because I'm sure I can tell you the table.

A

B

Pretty quickly go for it.

A

Do you see the issue? Do you wanna just look at the api response, nikko.

C

A

C

If it will be the actuary, so if it's ready in the api, that's what I'm saying: that's why I was actually checking the emails there is.

C

I see only one.

B

Okay, email participant is the model and email participants, I think will be the name of the table and here's issue.

A

Great okay, um so let me see if I can do a search.

C

Aren't those all the participants.

B

I don't think so.

C

So I'm referring to the dog called on the right that says participant. You turn it on on and off. When you get an email.

B

Oh yeah yeah. I don't think this relates to that. I don't believe.

A

So here we have um here we have issue email participants and I see it is not being exposed anywhere, which is fine. um I think we do want to figure out, I'm pretty sure we're doing. Oh, my gosh we're pulling oh, I didn't give up our required prop. Then.

A

Do we do we fetch the issue, information asynchronously, or do you think that we get it all from? Can you can you check the component and where it comes from and we navigate the props upwards? This is just comment stuff, so I guess I'll go up.

A

Get uh data: oh, there is a ux store in yeah, I'm going to I'll go.

E

A

So the notes app.

A

A

Oh notable data, that's that's the key, I think is notable data. um Do you meet console log that or maybe go up to where notes app is used? Do you have.

C

uh The view dev tools on so we can check the props all there in the page. I know.

A

You're using idea.

C

Let me go to chrome and.

A

A

uh Oh that's, not even the right place.

A

Let me copy this over boom. Okay, um I've gotta hop off in just a little bit, but I will definitely push up what what we have done, which isn't a lot, but we had. We had fun along the way. um I think we've we've asked ourselves a lot more questions than maybe anticipated.

A

uh That's, but that's good. uh Let me I have my dev tools here.

B

Let me so for me, being I'm gonna, say a newbie ux team dream these things up and then you guys make it happen right. Yeah,.

C

B

I would describe it okay, so they don't have to worry about all these little uh complexities and.

C

Paul you can use the select button. Sure.

A

What should I select, what.

C

And whatever we want to start looking for and then we go up, okay right sure there you go know this data.

A

Notable data yeah and it's not going to have anything because I didn't see that thing being referenced at all um so.

B

Do all view components get their data via an api call.

A

B

A

And there's a trade-off here like when, when you can defer it, you know you get immediate low, page load because the we didn't have to hit the database or anything and the client's kind of incurring that cost and that's nice, um but sometimes that you also have to keep an eye on. You know. When is the user actually able to start doing things?

A

And if, even though I may get immediate page load- and we show all these skeleton loaders like it still may be like three to four seconds where the user can actually still do stuff. So sometimes it makes sense for us to pass it just along as data attributes in the hammel, and sometimes it makes sense for us to fetch it just depending on what it is.

A

um But if you've used graphql, you could do some really fancy caching stuff, so fancy that it's really scary, um but I I'm not super familiar with all the possibilities there, uh but just to close up what we're doing here, um I am going to here's where we're knitting, the notes, and so the notes come from ammo yeah, it sure seems like it does. It looks like we get um notable data from this yeah. This is coming from yeah js view, mr discussions.

A

Yeah, oh my gosh is that, but that's that's just merge requests what's going on. Oh this isn't right! Oh! This is just mr notes. I wasn't looking at the right thing. Oh.

C

A

It's the same, though, what no it's not, it can't be the same.

B

A

B

To the close button on the issue, an mr.

A

B

A couple of months back and I found.

E

That jbs viewing four.

B

Different versions there.

A

B

Version a hammer version, a version for an mr and a virgin print issue. Sorry could be fun, it is fun yeah.

A

B

Eight paul, you can pick.

C

The selector from the line- oh perfect, js view notes.

A

um Believe it or not lee, it's gotten a lot better um and it continues to get better. So here we do one glorious serialization of our issue, um and that is where we will want to throw this thing.

C

So there's no table data is basically issue.

A

Props serializer, oh yeah, we're gonna, go to the issue. Serializer.

C

Yep yep yep, oh.

B

So so you, you don't think it'd be worthwhile having a separate api call potentially to no for this.

A

I that's a really good question. I.

B

I guess, because it's going to be empty, a lot of the time would maybe answer that question. Yeah.

A

I mean, I think, that's related to it. um I would um hesitate to do that too, because that introduces another like.

B

A

B

Of point of failure that.

A

Could go wrong.

B

A

C

Go ahead, it's in between your page right, so you will get a contact content moving around when that becomes true right.

A

um Yeah, so that's, but that's not to say we shouldn't, because this may be a huge database cost that we incur every time, so it does take keeping an eye on it and really getting someone that that is aware of all the variables and what we want to do here. So what I would suggest doing, we have a feature flag and clearly we don't need to do this. If it's not a service, it sounds like we don't need to do it if it's not a service bot thing.

A

So those are some nice flags that we can do to prevent us from having to do this, like other table request and that's what I would want to capture maybe here in this serializable is only give this field.

A

If, if, if I really need to- and then I think we're kind of nice so- um but this is this- is where we're going to want to expose some property for us to read in that component, getting the notable data um and we can work on it. Asynchronously on the on the mr I'll go ahead and push this up, so we can just keep chatting about it, but this is so much fun. uh Yeah.

B

Awesome to see you face to face, and thanks for uh welcoming me on.

A

Yeah, this is thanks for bringing up the issue and I had never really worked a service desk stuff before so it was good learning the domain, and um so thanks lee awesome. Thanks, guys appreciate.

B

A

B

A

Thanks nico, michael.