GitLab Pair Programming - Frontend, 23 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20220923 - Building a dropdown from a text input

Description

In this sesison, we work on some complexities involving using the dropdown component triggered by a text input.

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

A

Let's do it, um gosh should I record the last meeting, all right anyways uh thanks for joining us for fun and pairing uh Deepika is working on drop down boxes and iterations and work items, um and so I do I do understand uh the you mentioned. The search drop down box.

B

A

That would not have worked because that was like a really custom solution. So that's really cool. If the drop down box from the search is the same kind of thing, you can reuse here uh and so I hope. I hope that's the case, um but.

B

Yeah, but you said you mentioned.

A

That you, you kind of wrote, you wrote this out, but you run into some issues right now,.

C

A

C

So I, honest I'm, not very good, at accessibility, oh and that's, something which, like I'm bad, like and I'll, be honest, so uh working with this with having custom and drop down uh the normal selector of the browser and something which I am not good at so yeah when I'm figuring out I'm learning a lot with this I'll agree. It's just like great learning.

C

So there are few issues that so uh there's a component that is being used, which is the which is the drop down keyboard navigation, which is also used in the header search, the same thing and what it does is whenever I use the keys like um down or up it just emits an event and now programmatically a background is set if the option is focused yeah.

C

So that's, okay, so there's a there's, an event emitted and I know which option is focused and then I have a background class on it on the rubber item. There are two like issues to it. One is um so there's this is the iteration Cadence and these are the iterations right. So uh when I have like single iterations and I like just so when I have single iterations, it is focused correctly, but when I have multiple, both of them are focused at the same time, which should not happen.

C

Although the 0th one is focused, maybe I'm doing something wrong here. Definitely I know: I should have like, given a reference to the Mr I. Have the Mr here. I know it's a little difficult to understand without the code here, but uh I.

B

Just want another question.

D

Like uh currently, you can associate issues with iterations right.

C

Yeah, yes, what.

D

Is the UI element that's being used there like? Why are we not just doing exactly what is already there.

C

Because it's just so that's a very good question so.

B

Can we look at how that one works.

C

Yes, yes, yes, so definitely uh this UI is ux a little better. So what we do here is when you click on an iteration. There is an edit button like we have value edit button and the drop down is open and we have this empty thing. You see here, um because there is no headers and there is this section header in the drop down, which is a sign ID.

C

So this ux is a little, not that good I mean it's it's so we are planning to like you, make it more usable because most of the uh ux, if you see in the work items kind of works in the same way. This uh is a token City Vector, because we can select multiple um assigns. At the same time, labels again um is a different box.

C

So what we are trying to achieve here is something similar, and if we have that- and we can do that- but this is definitely a better ux thing- we're trying to achieve something similar with the iterations as well. So that's why we are using this so.

D

This is an opportunity to improve on that ux and it's not necessarily about just making it work, because then you can just copy the existing one. You want to make it better. Yes,.

C

Yes, definitely yeah so and I'm definitely sure that this use case is going to like come in the future, because this is something that, uh like they're, probably going to be another design with this, because it's it's not something it's just like. This combination doesn't exist in the uh storybook or the pajama component, which has the same combination of the stores of the search box and the drop downs. uh It's if we have the logic here, we could probably just wrap it up been.

C

You know enable it in a component there, because this is definitely not something which is just not weird. It's just that when I started working on it I realized nothing actually just works. We have to pick it up and you know use it. So. I just have some combinations here. Yeah.

A

So um uh I dropped a link in the zoom chat. um uh Yes,.

A

So in our in our git lab UI component Library, we have um a whole bunch of different stories of drop downs that we need. This.

E

A

Like the one, we want to use right.

E

Does it support search, though Paul.

A

Do we need to search well yeah.

E

F

Need to search too okay well.

G

H

A

It can too, because you can also go to the one above this, where we do with header and footer.

C

A

C

It is the problem, is you don't have this hair well.

A

Yeah, you don't need to have that either, but like yeah there's, a lot going, the drop down has search and headers. It's a whole other web page.

C

What I tried is a bit there's, a complete user select, which is using something like this I tried a lot of. If you want to like try something right now, uh my local is open and what I just strived with there's a drop down with a section header and everything here so instead of like changing my own component uh yeah, so we have the form we already. So this is something similar. We have the header here, yeah yeah, but this different.

C

uh So if I would have had a drop down without any headers in it, so there is no either there's going to be a text or there's going to be a header uh if I just delete both of them, it's just an empty button with the Chevron icon. That's it I mean I, don't want to have that button per se. It's it's a input box and I have I want to have like if you, if you see here uh this, is who all the container? That's that's not what is like required.

C

It's like this is separate search box and below that the drop down items should start. So it's if I.

A

C

I put the search, yeah can.

A

We go back to the can we go back to the design, then it.

E

Sounds like we've, maybe got a gap in our GitHub UI components them right that we should maybe probably outside of this. We don't want to delay your work, but um we should probably see if we can have a GitHub UI I've just got um a really similar um I'll.

E

Send you a link to an MR that I've been following: um it's not exactly the same, but it's where we, um you know we can move an issue or we can move multiple issues um if you look at if you watch the video that's attached to this, um just here, um you'll see that we've, it's got a weird thing: we've got a box, sorry, we've got a button and you click on the button.

E

um It takes a few seconds to get there, but we then click on this move selected button at the bottom and then, when you click on the button, that then opens a drop down with a search and a header and it's the same sort of thing where realistically, if that was just a box that you could type in, it would probably work as well. If not better um yeah I don't know, it seems like an unnecessary extra step, maybe to kind of hit that button. No, but I don't know.

C

That's, that's! That's why we're trying to build a better ux, so you know the sidebar is built the same way everything you have to just click a button here and then you open this with the assign my store and no you know we don't need this.

A

We just need yeah yeah, so that's a real, oh wow, okay, so.

D

um So I have another like point to make if, if this is really a limitation of gitlab UI, and it should be fixed there before, you can do what you really want here, perhaps just to finish this feature, you want to just copy the one that's on issue, even though it's not perfect, it does everything. You want right feature wise plug it in here, knowing that okay, now we need to wait until either us or somebody else makes them get lab.

D

Ui have the functionality we want and then plug that one in, but that will like unblock you on at least getting this feature done with. Maybe not the perfect UI, but.

A

To add some context, what Chad is talking about going back to something you said earlier was like I'm, really bad at accessibility, and actually almost everybody is, which is why we try to have a component Library, so we don't have to think about it or rewrite it and exactly so, if we're finding something that search is using and we want to reuse it, like that's a really good indicator.

A

This needs to live in the gitlab UI component library in a reusable way, so that we're not creating multiple implementations that all diverge from each other and then uh we happen to all become experts at everything which is very challenging, um and so that's what that's definitely the situation that our drop downs are in like the open labels and everything, because that's what happened is this is this is from before we had a component Library. We had the labels drop down, the users dropped down and they all did.

A

They all started out copying from each other and doing different stuff and diverging. But this problem like we want to form input. This is definitely a component Library problem of I want to be able to type and have the content drop down, um it'd be so cool to just get one started on gitlab UI um and what Chad is talking about of being able to approach this from different angles would be really nice too, if, let's just drop, let's drop, let's iterate on this, so let's use.

A

Let's have it where we can select iterations, it's not the Dream. Well, let's have it where we can select iterations the old-fashioned way and, at the same time, let's work on the component and the gitlab UI.

E

That being said, Pope, if, if we've got 99 of the way here already, that's.

A

E

Indulge just to see if we can fix this one little.

B

D

E

Be it might be that we can steal this code yeah to then kind of build our GitHub UI component I.

D

Will say, sunk cost fallacy uh the things that Paul said are very important like we, we don't want to add unnecessary complexity like we, because of all the reasons Paul said we should depend on the component Library.

D

If we found a limitation in that component Library, we shouldn't add more code to work around it if we don't have to, because that's like extra debt, that is getting added into it, and if we can, if we already have something that does exactly what we want and we don't have to make well, no, we already have something that does what we want, but in an imperfect way. We don't want to make another thing.

D

That does what we want in another imperfect way like when what we would really want is to use gitlab UI it, let's, like just reuse the existing imperfect win until we get the correct solution which is gitlab UI, so I would say: I'm on pulse side, just reuse, the existing one. So.

C

I promise it so I just think that, like it's, just kind of 80 percent done it's just like those 10 20, where I'm stuck uh and if we can just do it here and like I agree with um I, agree with Lee that uh if we just build on this, and we create an uh issue where we can just migrate it later. It's just like.

H

E

We need- maybe you you need to sign- sign some kind of contract to promise that you'll help us finish. Yeah.

D

It depends down the technical debt for me, like I, don't want to introduce new tech like two pieces of technical, that that we should clean up and not get another one I'd rather just live with the one yeah.

E

That we have, we do yes, I'm, like I, don't want to lose the the work that.

G

E

Already done here in the hope that we can use this to create our component. That being said, I think if we spend five more minutes trying to help you fix this and then the rest of the 40 minutes or half an hour to try and build the gitlab UI component and.

B

E

We block this merge request for like a week or I. Don't know how it urgently you want to get this merge request in, but if we can get the gitlab UI component in quick enough and.

G

B

D

I'm just gonna say like, even if you don't get it where, where you want, uh the work won't be lost, like you can take a diff of what you have here open an issue on the get lab, UI project paste this diff in and say this is mostly what this should do and then still use the one half of issues like that's, always an option. If you can't get.

A

This to work, yeah 100- and it's not it's also what's happened here- is really important work to figure out what is the the reusable component, because when we run into these situations, I'll diff I would diff both this drop down and the search drop down to find what's shared, and that's really great for me being able to just these are the shared bits that I can abstract to a new component, really good place and get lab UI so like this is really really awesome. Word that is already done so I do want I.

A

Think it's important to reiterate pun intended uh that um the top the big you know, issue talking that Chad and I are going off like do we even want to do this does not discredit anything. It's already done. Well, it's already done is really valuable. Work. I do have one other thing to to bat your way, uh Deepika of just to be aware of that might sway you the other way of wanting.

H

A

Maybe solve this and get lab. Ui first is um when we do like, when we foreign, build complex components like this that are inspired from other complex components. It's often overlooked. We have to do the same test coverage and so the tests have to, and they end up duplicated and you end up with large amount of tests that you have to reiterate as well. That's that's a lot of work that can get. You can save yourself if you just abstract the bit and then reuse, because then that is a really easy test. As.

D

It may be easier to write an isolation in the gitlab UI with like without all of the extra domain complexity and whatever else is going on. But.

H

D

The other side iterating on it in a real place, is a reason to keep doing it here. uh That's definitely true yeah, if you want it to work in a real environment and you might do the wrong thing and get live UI if you're not using.

A

Them totally and so I like doing it in parallel, I like doing what we're doing here and then in parallel. Let's we got to start spinning up and trying to get push forward. A component that needs to be reused here.

A

I think that's a good idea, but one thing just to be really aware of is um the there's a little bit of a duplication between the search bar and this thing now, which is which is fine, but now the tests have to be duplicated too, and so that's just ends up with a heftier weight that we end up carrying around, which is hopefully just emphasizes.

A

The follow-up work of using a component for this is is really important. Yeah.

D

A

D

Observation like this is the point of mob pair programming. It's not I need to write the code, it's less intimate about what the right code is and you you get the right thing done, which, in the long run Austin, is the the path of net leased effort upon I, always agree on everything when we pair that's how we do it's. Just oh yeah, yeah,.

A

I, don't care I, don't pair with Chad unless we're agreeing on everything as soon as he disagrees with me, I make up some excuse not to sleep yeah.

A

Thank you, Lee. Thank you for keeping us focused. Yes,.

A

um Yeah, so what's the issue because it looks like it works.

C

uh Yeah, it does there's certain things, so violence I need to like crawl. It programmatically when the focus is there. One of the issues is this so when I'm reaching the I'm getting the focus, I need to like scroll to that particular position.

D

So, what's up with the cursor flashing in it, it seems like that shouldn't be happening. If it's not an editable field, it is.

A

Though, that's what's interesting, is this.

E

A

D

Oh, that is the search. Okay.

E

Yeah I love that yeah.

A

It's a really nice component. This is huge win. This would be really cool, um uh I mean it reminds me of even the be cool if added editing labels like was like this too, like I I like this a lot. um So is this: when you're talking about going down you're saying that this drop down isn't.

C

It so it's not it's not. Why? Because I need to like scroll into view, but I really tried, uh like I, have the refs I.

A

Think I think I know what's maybe going on here.

E

The way it's highlighting too, is weird as well right, rather than selecting one item at the time when you scrolling.

A

Can we can we go back to? um Can we go back to the UI.

A

um Can we go back to the are.

F

A

B

C

A

C

Yes, yes, I'm here.

A

Oh something, friends: no you're good. um Can we go back to the UI? Yes,.

E

Is most of this pushed up um if, if May or Paul or anyone else were to pull the current version of the Mr or have you made some changes since then?.

C

No no I haven't made any so whatever changes I've made out. Of course, awesome.

E

Brilliant. Thank you.

C

E

That we can get push oci dot, skip which I'm sure you all know, but yeah.

C

I but I also don't I mean off the topic, but I see I still see that pipeline I skip it.

E

One step ahead of me: yeah.

A

G

About that, that's fine.

C

G

C

Shared the Mr Link great.

A

E

A

I wanted to highlight something with the way the drop downs work, which is I think related to the problem. You're trying to fix the.

G

A

A

um Foreign component should work and the way bootstrap drop downs work is they're able to detect where the window boundary is, and it will either drop up or drop down. Based on that.

C

A

There is no, there is no.

A

So right, so you see you had to increase the height of the window, so this does highlight for some reason, this is only dropping down when I would expect it to also drop up yeah, and this is going to be a big difference between the way search, works, search will always drop down and I. Imagine search is maybe hard coded to always drop down.

C

A

Our drop down, we probably wanted to be able to drop up I'm, not um I'm, not sure how to do that, though I'm not I'm, not much. I haven't seen the code that you're working on and why it wouldn't.

C

So yeah I haven't like put into put all that um logic of the window and the boundaries and everything it's just like. It's always brought down and I I know that the other drop down they drop up or down, depending upon the height of the available. You know, window yeah.

A

And that's not logic, that's not logic! You should have to put into it like that's logic that should be baked into drop down and I. Think I. Think looking back at the um at the code, the component that you're using.

C

A

C

So it is and it's a div which is please uh with CSS and then they'll drop down items there. So you can see. The weird thing here is: there is no drop down tent. There are double items.

B

C

If I have I would put drop down uh parent, but it comes with a header which is very which is required and it just doesn't work. So that's why I'm kind of like stuck with this I think uh yeah.

A

I think we can get the drop down parent to work. It sounds like Andre has something on the brain. uh What were we thinking? Andre yeah.

H

I was also uh I wanted to ask about the visuals, so I wonder how that works with the Mobile screen size.

B

F

H

Is it oh, something maybe too tiny for fingers to be actually usable.

H

H

How how are other drop, downs and search boxes, work.

C

So these are combo boxes, are there in token selectors or actually so this is just a. This is a token selector.

H

C

This is another. This is like this works as a combo box and then without any headers or grouping. So we can use anything, but this is this: is a input selected? There is no drop down. This is a date selector, which is still fine. uh We can do that. This is the weird one where we're going to search and the grouping and everything together so yeah. That's why it is different than other uh widgets being used here.

H

Okay but I think it's like not freely related to this Mr. Rather the General ux uh issue for our kind of input, heavy components with.

C

Search I, I didn't get to sorry.

H

I think it's not kind of related to this Mr. It's.

C

uh Rather than we.

H

C

H

Check from the ux perspective, what do we want to do in more complicated cases like that? One.

B

H

A

I'm so frustrated at drop downs uh that they don't support. These input drop downs so easily and you're right, like it requires a button, ah there's so much logic baked into that drop down, though, like the keyboard you know the keyboard is, is baked into that component. The positioning of the drop down is baked into it. I wish we could just shimmy an input instead of a button there. It's really frustrating it's.

E

It's really um it's giving me Deja Vu, you say: I pinged you on something this week where I'm trying to use view router with um GL tabs and it's exactly the same sort of thing it's. uh It should be so easy, but there's all this crazy stuff that you think, oh yeah, so we've got handling of keyboard input.

E

We've got handling of this and this and this and all this kind of stuff that you think a tab should be something really really simple and straightforward, um as should a drop, a drop down or a combo box or whatever we want to call it, but um there's so many complexities that this looks like. Is it even? Is it making a graphql query when you click on the search box.

B

E

B

E

Show a drop down real time, because we have to wait for the query to come back and it's it's super clever. What it's doing.

C

So it's like a man on clicking on this and focus of this I'm fetching the ideations and then I'm, showing the skeleton loader till it's loading. So it's a lot of logic built in so it's kind of working how it should but definitely lacking the basic things like.

D

Everything to do with design that's why I want online component. Libraries I would ideally have nothing to do with any design.

A

Yeah, the uh and that's I think is just here's. The the moral of the story is like the friction you're running into it's worth, going back to the beginning and evaluating is there? Is there an easy approach? Is there something else we should be doing like we can keep driving down the frictional road, but it's just worth reevaluating I shared another link. Could you open this other link on the zoom chat?

A

So I was um I was I was beaten up on bootstrap view uh for their drop down Library had so much like like that that so much we wanted of the functionality was baked into the that component, that required having a button and all sorts of things, but, interestingly enough, they do have this thing, which is a drop down mixin uh and they use this, which encapsulates the popper positioning of the drop down, encapsulates the keyboard navigation stuff. All of that sweet stuff.

A

We really the accessibility stuff we really want with drop down- is actually encapsulated by this mixin that bootstraps drop down component uses.

A

This is good news for us, because maybe we could use the same bootstrap drop down mix-in for our input drop down thing that we're trying to do, uh but this would require it being in the component Library, um but maybe it's like no work at all, because maybe all the work's already done for us, uh but it's it is approaching the problem at a different level, and it's like the fact that that drop down yeah is not popping up to me. That's like we're gonna need to use.

A

Popper like this is a really hard problem of the positioning of drop down stuff, that's already solved, and we don't want to resolve that problem. uh I I think it's potentially Worth US, seeing if we can put together I bet we can actually do this is me being overly optimistic, I bet. We could do it really quick, because we have this mix in um of an input component drop down thing. We can use.

D

And I always balance Paul's optimism with pessimism and I I just dropped a link to the sun cost fallacy like the work we've done on this so far like especially given that we would love to have something in get labyri that does. What we really want is is a reason to like, let's step back and maybe start over in this from a a fresh perspective and in terms of how it would work best in gitlab, UI.

B

A

And there's no uh there's no, um and this is iteration like we've moved forward, we run into friction. Iteration is going back to the beginning and.

D

Bring away code is a great thing. It means you've got a better idea and you're doing something better.

A

But I I do think like the search drop down. I, remember working with um I think it was Zach.

G

I think it was that.

A

I think it was.

C

I, remember yes, yes, correct! So he's doing yeah I.

A

Remember working with him uh on this and the the custom component we made for this was kind of intended of like we need this right away, so we're just going to iterate on this, and so this is just the Classic. um The temporary code is spreading.

C

Yeah so I'm using the same yeah, so he's the one who actually you know because I use the same component and it wasn't working it was. It is not documented. Well enough, so yeah he had to like my Mrs would be the very long commenter was an active descendant and everything. Yes. So yes, the same but yeah.

D

Exactly that is like the technical that is just like a drop of poison in the pool it just keeps spreading through everywhere.

E

Can I um ask a question: I hope not to throw the spanner in the works, but because we're talking about populating the the drop down with from graphql, and we need to do like a loading spinner and we would be able to handle that in. We wouldn't do the graphql, but clearly in gitlab UI. But we'll do something that said, show some kind of loading State until the loading flag is set to true or something.

A

Like that yeah yeah, and we can, um we can simulate I love what I love doing. I love simulating this with stories like using the stories to simulate. That um is like one of my favorite ways to to do this because I'll, the story is where you can put like oh we'll, just time out for a second and pretend to load in data. It's like all of that stuff and we could just focus on just presentation at the gitlab UI level, which is really nice, uh so we can actually create a whole little.

A

We can create a whole searching thing and a gitlab UI story which would be really cool uh the um but.

E

You want us to start bashing code.

A

I think it's I, I, honestly I do think it's going to be worth it to Pika and I. I know it's not a great feeling, but to me, if you click on the drop down the fact that it doesn't move up, that's functionality, we really need and that's functionality. We don't want to re-implement. So to me it's like. Unfortunately, it's like this is really placing high priority of. We want to somehow reuse our drop.

E

Down you got the scrolling issue, the popping up issue, the the keyboard shortcuts, not quite working properly issues, so you've got three issues already that might be solved by this mixing. That's.

A

That's my um I think it's going to be easier too. That's what I'm excited about it.

E

A

I think this will be easier, um but we'll see um I can start I I can maybe we can use the rest of our time together. I can start driving of maybe putting together a gitlab UI component. um Lee is going to laugh at me because I'm notorious for starting gitlab, UI components and not finishing them.

E

We'll finish this.

A

Yeah I know I know that one we'll we'll have to finish um so, maybe let's, let's try that out and see see what happens is that is everyone good with maybe spending 20ish minutes to see how far we can get with the absolutely.

G

A

um Let me I'm gonna open up your mrtp code because that's going to be really important to reference, uh but let me.

A

uh Let me also go to the gitlab. You, oh I'm already here.

G

um Let me get the latest okay.

A

Let me open this up. Okay um and let me go to I forgot. How do we add a new component, there's like a somewhere in here, something about I'm, just gonna. Look for a new component, yes, for details on how to add new components. Oh yes, here.

G

We go adding new components.

A

You should use yarn generate component to begin your component implementation.

G

A

Yes, maybe I should check out a branch for this get clb uh we're going to call it I'm just going to put Fe for front end, because it's not just my Branch, it's everybody's branches, uh um I, don't know what to call this input drop down that is maybe or like.

A

Drop down, that's cool yeah, um all right yarn generate component. uh Let's go plop, please choose a generator, create a GL component, oh yeah, so let's just create a regular component um component, name and snake case.

A

This is a I want to say: input drop down.

E

Let's drop down I.

A

Mean are we searching, do we have to be searching.

E

What else would you be inputting for I guess, a.

F

Good question I, don't know.

A

I, don't know uh text I.

E

Suppose you could have something cool where, if you type like it says the labels one and you type something because it doesn't exist, you could press a button and it would add it yeah.

A

Yeah, so maybe it's not just search input drop down.

H

But if you plan to integrate this feature, where you show the loading screen or the loading placeholder before you actually render the content, that's kind of searching them. This.

E

Is yeah I guess text input doesn't mean you can't search right search.

A

Input drop down or text input drop down. That's.

E

Fine, that's! Okay! That's okay!.

A

We can always rename it come on. It will be placed yes all right boom. All right, I've already created seven files. It.

D

A

Even been seven minutes uh great great great great, um because I like to get feedback on what I'm working on. Let me go ahead and start storybook.

F

A

So we are interested in while it's loading.

F

Which one is it.

C

Hydration work item this.

F

C

A

um Yeah we get, we get all the stuff. Oh it's gonna be so sweet Topeka, it's gonna, be so sweet.

A

D

Think awesome, I.

A

Think it's gonna be okay,.

A

So we want to, um we want to use drop down, we're gonna, have an input uh and we want the drop down to come out of it.

B

A

Let's uh would you like to send crash reports.

G

To storybook, why are you asking me.

A

This, what just, how oh did it actually crash? Oh.

G

What's wrong with you, what can't resolve things I can't even resolve things.

F

Can't resolve Source components? Oh no, this didn't generate it correctly. Did it oh.

A

No, ah ah our generator is broken.

G

Okay, that's fine!

G

Let me move our faces.

A

I think, let's figure out how we want to use this thing.

A

Yes, yes, search input drop down, so uh I see us wanting to use this um where we pass in.

A

The input is a slot like that. The big form input is a slot.

B

C

D

C

Is a slot we always like if it's a search and we always would want or do we want? Okay yeah? Maybe someone wants to just have a button or something, and if someone wants to put something else, it's not yeah I, don't know. Maybe.

A

But maybe it's not like, maybe it shouldn't be I, I really don't know. um We will need to like listen to when we've when we've changed it and stuff I'm. Just so.

C

I mean for me, if you're solving, because this already is there in the drop down where we have a slot for the header and that's how we are putting search box by type in the current one. So yeah, that's.

B

A

What I feel I may be wrong? I, don't know, that's what I don't know I like it I think. That's a good point. Let's move it up here. Let's do it.

A

Yeah I think that'd be cool. Let's check it out um import. uh What am I trying to import I'm trying to import a component.

G

uh Why are there so many components is.

A

This front end um gosh: where are all these components and form input? That's got to be what I'm looking for yes, I'm looking for Foreman, but it's form Foreman platform and put form foreign.

C

A

You gosh, thank you. Yes thank you.

A

I told that is totally what I did that was really frustrating um all right. We will use foreign and it's gonna be great. uh Okay, storybook is working. Let's open up, storybook uh we're gonna go to our. We called it search input drop down, that's it!

A

This is a search input drop down. No one can argue with that. It is it all right uh input.

F

G

What do I need for this component?

G

uh Here's a combo box.

G

Well, what's combo.

A

G

C

So the combo box is and that's how I want this to work actually with the combo works and how that's how the ux person referred to when he was referring, but the difference in combo box. There is just a list of items, there's no grouping and it's.

A

Just is that really it maybe we could just improve combo box. Oh wait.

E

Adam who's way taller right.

A

C

I I have this thing that if you go to the dogs- and you like, if you see that it's written clearly that if you want something more complex or powerful, you just start using search box by type and it doesn't have the capability. I just read the dogs.

B

And it's just like.

A

Some of the same issues as well and so I almost see what we're about to create could be reused by combo box. I. Think.

B

A

See um I think yeah. So what the the issue? What I don't want to do is we're not going to hard code the drop down items. That is something we'll get from a slot, because that's going to be very specific of like the headers and all the other stuff, we need to pass in through drop down, but it does sound like we should be able to use.

A

um We should be able to use.

C

The drop down yes or.

A

The drop down mix Cent because we can't use actual drop down components so we'll try to use it. Thank you, Topeka you're, so uh uh I am like really struggling mentally right now. I know it's late for you. You're, like uh on on fleek. As the kids say,.

D

A

That what the kids say, that's what the kids say right.

G

A

G

Oh man, all right.

A

um I think I just want to say this is just a text box. Let me let me double check that that I'm, not let me go back to my um drop. What was it called? It was called a search input drop down.

B

A

A

Do we have a text thing that happened here? Oh no, GL form input what's wrong with you did I do from oh, um this isn't! Oh sorry when I import it this way. This is not a named input! Import! uh Yes! Yes! Yes! Yes! Yes! Yes! Yes, yes, great great, great! All right! We're we're getting there.

A

All right! I will need to wrap this in a div because we're going to have more content. We're gonna have a slot which contains all of our drop Downy stuff. um But let's, let's look at. um Let's take a brief moment to look at that Mix end here.

A

G

F

This is a drop down mixing.

A

um It has oh look at all. The stuff. Click out make sense all sorts of good stuff, um but I want to see how I'm expected to interact with this thing. Maybe it's um oh, it might not be I doubt it is uh yeah. It's not gonna be referenced here.

A

So and somehow uh this is foreign.

B

A

Trying to I'm trying to just I'm trying to decipher the interface for this mix-in. um Let me see when it creates popper, that's gonna be helpful. It creates this. When we decide we need to show menu. When does it decide it needs to show the menu it does this when it watches a state of if we're visible or not.

A

uh And visible is what's defined outside of the thing, so visible is part of this mix-ins interface, I I, really hate mixins, but it's kind of I feel like our situation warrants it. um Please stop me if I'm making a huge mistake, bootstrap you and we would go to.

F

G

E

You can you help us understand what mixings are part. Is it's just like a library of it's just, not a component. It's just the JavaScript t-bit right.

A

It's like a rails, it's it's like a ruby, slash, real.

E

A

E

A

Like it's like, and so they will often look for methods that exist on the subject they're being applied to, but you can just imagine the kind of coupling that creates, because there's a named Collision to be concerned about of I'm, creating methods that this thing is like. There's a lot to be concerned about when you use mixense, which is very similar, I think to like Ruby concerns. It's.

D

The form of multiple inheritance, which is always brought with peril.

A

But I think in our I think our situation warrants it. um We could, if we were really fancy, like probably the best thing to do, would be to like encapsulate this logic in a component or in some sort of like if we were using later view. We could encapsulate this in like a hook, uh so that we're not further coupling to this mix-in. But that's that's for future.

A

That's a future problem.

A

um Let's, let's see um so. uh uh Let's then look at um so when this thing creates it's popper.

A

Yes, so that's I happen to know that that's what's being used to position stuff so because the mix-in is responsible for that I'm. Looking for.

A

A

Yes, it's wanting a.

A

For drop up with alignment, we use the parent element as popper container.

G

A

Yeah: let's try that out um all right, we're instantiating, the popper that's great. um What's actually like, let me see how um bootstrap does its drop down component I. Think that'll be helpful to understand too so I'm going to drop down.

A

um So when bootstrap creates its menu.

A

um It creates uh yeah, it just passes everything to the slot.

G

A

Does this reference a menu ref at all? Let me see yes, it does yeah look at this foreign.

A

That seems important, uh yeah. Look! Look at look at all this logic. That's like encapsulated here like there's a lot of baked and business logic with drop downs. We don't want to recreate. So this is I'm feeling like we're getting close, but I'm uh a little nervous about mix-ins in general, but I'm, just gonna we're just going to plow forward, uh see what happens so we're using and I'm just going to put in uh hello world we'll just put that in right. Now, um let's go to here.

A

A

A

Is this this? Is this referencing any of the CSS classes? No, this is not oh. Maybe it is no I, don't think it.

G

Is maybe it maybe.

A

um Look at this yeah from here we look at how is this CSS selector used, selector form child.

B

F

No I don't think we need to do that. Maybe.

C

A

Yeah ignore key up on down on form elements.

G

A

F

C

A

Yeah I want to see yes, this is the bit that I wasn't sure about. It's like there's a visible State. We need to add to here as well, so we, the mix in, is going to be so there's a visible State. We want to add, looks like Nixon wants to be up here. That's.

G

Fine um looks like this: import wants to be up.

A

Here, that's fine too: um let's go ahead and create a um computed.

G

B

G

A

um We don't need that; we don't have that. It really is just shell whether or not this is visible, and so we're gonna put the class.

G

A

Classes: okay and let's do this- we're on Focus focus is the focus.

B

A

Focus is when we're going to show this thing. I think right is that what triggers the the yeah.

C

A

That sounds right on and uh how's it go again. Are we on.

B

G

How do we, how do.

B

We use computers.

G

Yeah, it is true, okay, let's do it.

A

uh uh Let's see what happens, oh.

A

C

A

Right, so we will look at uh yes, and this is likely. This is good. We're ran into these issues. um This is because the mix-in is looking for something to do with options likely um or I bet it's. It's Hopper yeah yeah. It's wanting proper options, um foreign.

A

If we go back to here, you'll see in these props.

A

It's it's also exporting all the drop down props as its own props.

A

So let's go ahead and do that and I think that's related to what's going on here. um So, let's ex, let's import props as drop down props and in our own props.

A

I think we can just spread drop down props.

A

um I think that's what's happening, uh let's try it again. Oops.

A

No, that is not what's happening.

F

uh What's wrong with you render.

B

Options is undefined: oh, let's see check components, merge options.

G

Is this a storybook thing.

B

A

Under time does getting rid of the mixin help.

A

Getting rid of the mix in a hundred percent helps, uh so what is going on there.

A

Initially, yeah, for some reason it's having a hard time, initializing.

A

This seems like somehow, including the mix-in, caused the story to die.

A

All right, so the task at hand is this mix in contains a lot of the logic I'm going to see. If me plugging around at this, for 15 minutes, I can get to where we can actually consume.

A

This makes sense if it looks like we can't then yeah we're going to be in a situation where we'll need to um will need to um recreate to kind of recreate what this mix-in is doing, and we can either choose to do that specifically in the iteration drop down or we can create something reusable uh but because we're at time, um I'm, I'm, just gonna, keep plugging away at this.

A

If you want to hang out, feel free to hang out, um but I will post I will post asynchronously and update on the Mr of what we talked about and the the things we investigated and options forward. So this is such an interesting problem, thanks for bringing it up, Deepika.

C

Thank you, and thanks for like yeah I wanted to go back, but I wasn't I was hesitant, but now I'm definitely actually alternating, because I thought it's just like I'm not able to, but it it. Everyone agrees that it's as complex as I think so it makes me feel better. Okay, then the problem everyone under yeah.

F

C

A

What I think is going to happen is we're going to end up with a really sweet, reusable solution. So that's I'm really optimistic about what what could come forward from here. So thanks for bringing it up that that was fantastic, so yeah uh this was. This was really good. The.

D

You're so good at pairing like when you're driving, you narrate everything you do and uh that's such a hard skill to learn and to get good at you're really good at it. Thanks.

A

Yeah well I appreciate it thanks. Thanks for the praise, Chad yeah I'm gonna keep going so I'll leave this open, but I do want to leave and I want to invite everyone to leave if they want to leave adios.

H

Would you share the link to DMR once it's there or yeah.

A

I will ping us on the Mr. um I lost the uh uh it's in here. The.

D

First name is in the zoom chat.

A

No, this isn't it this isn't it.

D

Here, I'll redrop it again: oh.

A

Thank you yeah. If you could that'd be great interesting.

A

And zoom and zoom is it's in there. This is the issue. Do we have an MR for this one, though oh.

D

She said she had pushed something: I don't know. She said she made any Mark or was it.

A

Just I think it's here here: it is here it is: okay, yeah cool all right, I'm, gonna, I'm, gonna, I'm, gonna time back to myself, I'm gonna work on this for um probably 15 more minutes, I feel optimistic. Being able to use the mix-in I, don't feel great using a mix end, but.

A

D

Have to recreate all the logic, it's iteration it's at least in gitlab UI. You know, even if it's.

A

D

A

Yeah, that's a good point. um This seems weird.

A

I don't know what's going on here.

H

Alrighty I gotta go so all.

A

Right thanks for hanging out Andre thank.

H

A

D

You want to kill the recording Paul.

A

Sure yeah thanks thanks for joining us, TV Land. How do we stop recording.