GitLab Pair Programming - Frontend, 19 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 2023-05-19 - Add DateToken for GlFilteredSearch

Description

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/120160

A

Welcome to front end pairing, um hopefully we're going to take a little look. I raised an MR recently to add support for filtering by issue created or closed dates on the issues list, and let me just have a look at this.

A

um It's too big we can see on here anyway, yeah, so so we can filter on the created is after or before, and the close is after or before so. Those filters weren't present before the only challenge we've got, is that the GL fielded search bar doesn't really have support for dates at the moment.

A

um So it's free text and if you type an invalid date, you get an error back. So it's not the best user experience and that's pretty much the feedback that I've got. So you know about date, formatting, if you're entering invalid date, so I'm going to have a bit of a look at this feedback and just see um whether it's realistic for me to get a date picker in there um or some really really simple, quick, easy basic validation.

A

I, don't really want to um solve the entire problem, if that makes sense during this Mr, because I would really like to get this additional functionality added, um even if it's not completely polished um but but we'll we'll take a look and and see if adding a date. Picker is going to be um potentially uh a simple task on a um so uh just did a GDK update.

B

The whole app is in hammer.

A

So the funnily enough, the issues list is in view. The merge request list is in a hammer at the moment, so this one, fortunately, is in view um so I'm gonna do a rebase.

C

That yeah pipeline.

A

Yeah, so this is before my change. You can't filter on the the dates. Hopefully, if that reloads, like my rebase, will have the additional date filters in there, there was one other little change as well, and this one I think I'm almost certain will be an easy one. So I might start with this.

A

um So we said at the moment we're using the clock icon for milestone and I used it for the created and closed date filter as well, but there's a question there. If we can use the history icon instead, so I hope that'll be quite a simple switch. Arrow, so remind myself what the uh next changes were so yeah. It looks like it's probably gonna be in this view component and the testing we had another one.

A

Annoyingly the let me just check yes, I can stop.

A

Yeah the issues list within a group of projects that shares the same view component. The issues list like this main Global dashboard issues list, is actually a different view component.

A

um Okay, not entirely sure why I guess, maybe the one at project level is a little bit or group or project levels a bit bit simpler. um Let's stop and start.

D

A

Because it doesn't need to enumerate all of your groups and projects to find out what labels are available and what signees are available Etc. um You can just grab those from the group or project, whereas the the dashboard issues list probably has a little bit more complexity in it.

A

Well, GDK is restarting.

B

We can already.

A

See that we've got the the closed and created um filters in there as well, but using the same icon as the Milestone. While it's reloading.

D

A

Just close or change to string and.

D

Create it or change to mystery.

D

A

So, have you worked back to you with hammer and all of you.

B

uh I'm quite uh not well worth with Hamill, but I'm learning uh view. uh So I have some Hands-On on view, but uh the Apollo graphql I'm, still learning cool cool yeah.

A

As part of the the features I think I, like best about it, actually the Simplicity to to grab data from graphql using pure poly right.

B

A

I think we we generally use what they call Smart queries, but I'm, not not brilliant with the terminology, but it's yeah. It's it's remarkable. How simple it is to to kind of Follow that standard pattern. Okay,.

D

A

Looks like we've got um got those icons changed, but this just to show you so we can say closed is after or before, um but then we just have to type it in like this, which isn't isn't ideal and if we type it wrong.

A

Then Enterprise an error, so we could could ideally do it, improving that a little bit more. There was one more I just remembered a little comment there could these be created date and close date, um uh yeah I think rather than I've just said, closed and created, um but in this this drop down here we use post date and created date, so so be a nice nice to have Silhouettes and.

D

Where are we doing.

D

C

D

A

Two nice easy changes to make I'm sure the upper ones won't be uh won't, be so straightforward, but.

B

Because it's good to know actually that how how people approach to I mean small, those are small changes, but uh the way you are changing it, it looks like you're on an you know the system. Well then, yeah.

A

It's I I, quite like doing these um sessions. It helps to um kind of explain how your mind works, essentially and and how to yeah.

A

B

Guess pretty much after a few sessions I! Might how, when, when one of my animals reviewed or uh paired with someone.

A

Absolutely and that's the great thing um quite often in these sessions, the person driving, isn't necessarily the person um I, don't know what I say kind of leading. So um the I think it was one of the most recent sessions. I implemented, a new gitlab UI component into gitlab and um I was driving, so I was doing the coding, but I I wasn't really as familiar or didn't really understand, as well as the others on the session.

A

So they were just kind of driving me and telling me where to go and um that works really well right right so close date. So that's worked nicely as well, um so now to see whether or not we can get a date Pickering. So what I wanted to do um so for.

A

All of these, so we'll just type do type is equal to. So this is a a drop down, the type um probably a hard-coded, less.

D

A

Is kind of a drop down as well um or.

A

Goes off, let's say it's a drop down, but that has to make a graphql query. So let's just have a look and see if we can figure out I'm, not sure if we will be able to. But this is the dashboard issues list. So I just wanted to see how some of those other ones work so um yeah label.

A

So it uses this label toke, which.

D

A

Own view component, and that has a child filtered search suggestion that might be a little bit over complex. Let's have a look at the time.

C

A

Instant test case tasked.

D

Yes, that's this one option.

A

Default type options.

A

Right so I guess this gel filtered search. Token implements.

A

Yeah so that comes from gitlab UI.

D

A

How easy it's going to be to to build this date? Picker, um it's a label token, which other ones have. We got so user token label token Milestone, total. The difference with all of these is that they need to use graphql to go and get some data and then they're going to render some kind of drop down.

A

We just want to render a date picker and we don't need to get any data, um but I hope we can have a look at this and see how it works, and you know we might be able to just do something a bit more simple. So it's just using Apollo.

A

um Yesterday, to actually this config.initial labels.

D

Where it's getting them.

A

D

um It's a labels, initial labels.

A

I, don't know where that's coming from uh but never mind. So it's never quite easy. Based token.

B

I guess the stroke inside the I mean uh list in the drop down yeah.

A

So each of each of these things is considered a token, so that well yeah. So so this bit would kind of be a token, and this would be a token and um so each yeah each of these I think is a token, um and this defines each of the tokens. So it says you've got a reaction, token and a type and a closed and a creative.

B

A

Then it this bit here I think defines like what what component is used to actually select the token. So is it a label drop down? Is it an author drop down? Is it a uh just? A yes, no drop down Etc, so I'm, hoping that I can create a copy of this label token, but maybe a bit simpler, um I probably need to understand what this base token is um a few token cops, but it's it. That's look a bit complex, um so your ideals like um and a suggestion list.

A

So we we don't need a suggestion list which is good.

D

A

So I don't think we need to use based token.

D

A

What I'm looking to see, if there's an admit there.

A

So when we select a.

D

A

Set a token value.

A

That's imported through.

B

We'll just search.

A

Okay, so that's just caching.

B

A

I I, don't think that's really important. So the on listeners rewind to Valley, Value I, guess that's the important thing.

A

So let's try and make a copy, so we've got component shelf or search I'll. Take it yeah perfect. So it's very optimistic but I'd like to see what if we can make any progress in an hour and if we can't but no problem.

A

I, don't think we need base token.

D

A

Definitely don't need, but.

A

D

A

Definitely don't need a method to fetch labels.

A

Label name Gates and labels, so we don't need any of that and just strip out as much as possible um to get started.

D

A

I think I'm gonna need any translations.

D

A

What we are gonna need is just have a look.

D

A

We're going to need a GL date, picker, that's for sure, but I, don't know what Geo token.

A

A

Tokens which consist of a title operate.

A

Principle, value of Auto blade this component.

A

I, don't think we want to use this because we don't really want autocomplete um right, so I'm gonna say all we want from here is.

D

Geo date, picker.

B

Is there a trigger there to to open this late picker.

A

I don't quite know at the moment, um yeah I honestly, don't know all.

B

Right because I I, what I saw was uh the token were listed, and it was just supposed to uh the array, but I don't see if we can custom that if there is a custom trigger that would just open our date. Picker.

A

Okay, okay, um so let me just have a look um well I'm, a little bit. Unsure of is how this component.

A

What does it actually search? Yes, I'm wondering if it emits or how it um have a look at source for this now, when you actually select a value, how that value gets passed back to.

D

A

D

D

A

Right so we emit this I think.

B

D

D

D

D

It's a bit about props as well. Whoops.

A

D

Want to do it there, yeah I.

A

Don't think we need any problems.

D

At the moment,.

A

The data I.

C

A

It is as no way it will be, but.

D

D

A

D

A

Next statement I start opened true, so we'll try setting that.

A

Open true and then the entire binding of.

B

It is there any example: I don't see any example there we have triggered a date picker from a search, filter, search.

A

um No I, don't what what if I.

D

um Oh hey James,.

A

D

A

There yeah good good, um we're out of our depth, so um you might be just the man to help us out. Okay, so I'm gonna need. uh Where are we taken?

A

Have you done much with um the gel filtered search? It's all James.

C

D

A

D

A

Expect it to explode straight away, let's see what happens um so just just get catch. You up, um I created an MR a week or two ago to add the creative day and close date as um filters for the issues list.

A

um It was a bit. What should I call it? uh Let's say: is it MVC? So it's for free type, free text um which obviously isn't ideal. If you missed out the date, then um in Frozen error you, you know you want to date picker, ideally, but if we can't get date, Pickering some level of kind of validation and formatting might be nice, but I thought with an hour or so it'd be worth just having a stab to say. Okay, I've completely killed it good to say um yeah.

A

If it might be possible um to wire a date Pickering um we're getting. An error cannot read properties on Hollow data, so.

C

There's an MR that you made previously and you were stuck on.

A

Yeah it just just.

D

A

Basically needs a bit of ux Polish if that makes sense um and I wanted to kind of see what we could do as a as a minimum like try not getting too carried away um yeah. So why is why is it trying to what's it doing in Apollo land?

A

D

A

Apollo stuff in here.

C

So this all already works on a back end. I guess.

A

Yeah yeah search works nicely on the back end. um I, don't know if I've changed something because I shouldn't up yeah.

D

A

No, that's right, I, don't know why it's trying to read Apollo data.

A

B

Is that an audition or something.

A

Yeah I don't know, but this is a more slightly more helpful. So um it's saying it can't find geode picker. So um that's because it should be one word, so it's probably unlikely, but in the other chance that it's something as simple as that, we'll see what that does.

A

At the moment, James like most of these tokens I think we call them um they, they kind of render a drop down that uses, graphql, I, think to populate the data and so I'm struggling to find a similar, a similar one to kind of Base it on. Oh.

A

Okay, that's a good start, um so the problem is by using this. What we've lost that we had before um was when you clicked on created. It said: do you want to do this before or is after and um it left these kind of I don't know what you want to call.

B

A

These labels in place, whereas they're they're not present anymore so but I'm interested to see what happens if I do say like um so this issues this if I say that it was created.

A

Search yeah, so it doesn't, it doesn't quite know how to handle that and put at the moment.

A

um So that makes me wonder whether we do need to use this base token, because I think it's going to provide us with these labels and operators and a few other things. um So if we.

D

A

Back to the label, Toca.

B

But we need to switch between those date, Pickers and tokens right.

A

Yeah so I think that I don't know if this is like a wrapper. So let's have a look um so base. Token is not the same thing as PL token, okay, so the old taken.

C

A

I'll tell you what I can do I can use review, Dev tools.

D

A

So this is geodes. Also, all three of these things are GL taken and that's gltl to search. So let me look at uh enable.

A

A

That surprises.

D

Me that that's.

A

Right so it's label token that uses base token base token, renders the label and the the operator so I think we want base token. After all, just dripping everything out foreign.

A

It's got a lot of stuff I feel like we don't particularly want or need, um but if it provides a way for us to, let's have a look. What the template looks like um I'm, hoping it sort of provides us with believed, like kind of label the operator and then the actual a slot to put the the kind of drop down in um so we've got a lot for suggestions.

D

We don't need that. We've.

A

Got a slot for a few token props.

A

Youtube, oh.

C

Sorry, we've got viewed update token. Why aren't we starting with uh duplicate of one of the other tokens, sorry I pulled the date token yeah? Why aren't we, starting with the duplicate of one of the other tokens.

A

We are a basically copied label token, but then I stripped pretty much everything out um because we don't need like these or these or these or these, um but I didn't think we wanted base token, but then now I we're kind of looking at what base token is, and it looks like it, it kind of gives us the label and so I think we do want it now so I'm, just bringing it back in essentially um so.

A

We've based token, this is where it gets really hairy.

D

A

D

A

D

A problem it looks.

A

Like the base tokens doing a lot of stuff, but we don't want so.

A

Suggestion list is I'm just worried that base tokens made for these things that basically have a finite list of selectable values um like labels, assignees milestones and what we want the date. Picker isn't isn't like that, so I I, just don't know whether this base token is going to work for what we want.

A

um Maybe we should be using layout to search token, which is what I was suggesting a minute ago, which is this thing here? um Yeah sorry I know we're going around the houses, but.

C

So what is that? One.

A

So I think um I'm a little bit confused here between geofiltered search token and Geo token.

A

Oh, no, that's filtered suggestion. So it looks like base token, is a wrapper around GL filtered search token.

A

So because we don't really want like the suggestions- and we don't need this specific implementation, it might be better just to grab dual filtered search. Token.

C

So base token includes a template with full suggestions.

A

List yeah exactly exactly which we don't really want so.

C

A

So, let's, let's have a quick look at this, so I need suggestions. So that's what I'm worried that this? Let me just reread this bill. It's taken as a helper intended to simplify the creation of build tokens which consist of a title operators and an editable value with auto can play this component, see I I, yeah I! Don't know that this is going to work for us and it's token management logic and allows you to focus on implementing Auto completion.

A

I think you know looked at the source.

A

Yes, it's got a list of available.

A

A

I'm just worried that, so what have we got? We've got.

A

So we've got a segment which is the title. Awesome, that's fine. We've got a segment which is the operator awesome, that's fine and then we've got options. That's still part of the operator, then we've got a segment which is.

C

A

This is where it gets confusing. So that's suggestions.

A

D

A

B

A lot further suggestions is I, guess uh how it is triggered. uh Is there any logic for that.

A

Well, has data or data segment is currently active.

B

I guess that's where we trigger the date picker right and when we we get in output from the date figure yeah. We have to render a token I guess uh over there right.

A

It was like see things, so let me just so: we've got suggestions if you improves how the token is rendered- okay, okay, so this is rendering it. So it's not names, so we could just put past the date picker into the suggestions slot. Do you think yeah, maybe maybe okay, so this is GL field search, open.

A

A

That so our slots or.

D

A

Back to base token and just see what we've passed, so you know like.

D

A

Or complex than I wanted it to be.

A

D

A

Admit: I, don't know how we're passing the value back.

A

When you select it, but maybe I'm jumping a bit too far ahead anyway, um so this had.

A

View token, View and suggestions.

A

B

Is the templating should work uh more or less.

A

It's just gonna complain about I, don't know which of these like can I just get rid of everything at the moment, because it's going to complain if none of these methods exist, but equally yeah I can't see that working either.

D

So have a look at.

A

Oh, so this one only passing in suggestions.

A

So, okay, okay, yes, we can do a title that value to value and on thisness. So let's just pass the title.

A

Okay, well, that's you know it's not great, but it hasn't completely explode. It's uh um I hope if we.

B

You can put small I guess spans labels to just to if we can see well.

A

I think if I just uh um all right, so let's just do.

D

C

I'm just reading through the filtered search like gitlab, UI, yep stocks and like I, think maybe it'd be best if we add like a date to that, like give it the support.

A

Instead of in gilwi, that makes sense is.

C

Because it's the one that's controlling.

D

It and it's yeah.

C

Okay, can you it can do a bunch of different things, but it can't do dates.

A

C

Sense than if we add a date bigger in there yeah then we're working with the component at least yeah.

A

I think you're right um this conflict off right, so we can pass the operators in.

D

Yeah just gonna send.

C

But then it's probably not a filtered search either.

C

Because it would filtered search is not the right name for well I'm, not sure. Maybe it is maybe it's not builted search. It would mean, like here's, a search that we're adding a filter on right, yeah, yeah, it's not like okay, yeah well yeah. Then that's fine I.

A

Think so yeah I think so um so operates.

C

D

A

I had an operators.

A

I know it's inconvict, okay, awesome.

D

D

A

We just passed that in then I guess I think it's already gonna have access to.

A

It's almost up.

A

And there's going to be some magic there, where the The Operators come through in the config.

A

As we're already defining the operators in here.

C

A

We've got the label so that is coming from the config. So that's a good start, so we don't need my city title there.

A

um Yeah, obviously it doesn't I, don't know how to render.

A

Who don't quite know why, where Apollo is trying to to kick in, but not too fast at the moment, although that's the only error that he's stuck out so yeah the operate? uh Let's excuse me Dev tools again a couple of minutes, then we'll call.

D

It a day, so you.

A

Know it's the conflict being passed in.

A

Yes, the config's got the icon and The Operators, which should be.

A

Or an after yeah, so they should be.

D

Getting passed.

A

In uh what then happens with those operates, it's just.

C

Where are you setting the config in your code.

A

um So I'm just kind of passing it, so it's a prop for the the token and then I'm passing it through to jail, filtered search, token and I I. Think whatever's looping through this array and generating like saying oh I, need to use the date. Token component is then passing these things in as options.

D

A

That makes sense so.

C

It's kind of go on this so, um like uh you created both of these token type created and.

A

Close yeah yeah exactly um so yeah, that's it's! It's definitely progress! um I! Don't know why it's struggling.

A

D

Going to jail, build.

A

Search token, that's still got the operators, so then there should be a computed in here called operators. Yeah.

C

Operator description available tokens with self that one.

A

Just unsure why these operators aren't I, don't know if it's because he operated description is, is empty but I when I select this. It should give me another option so like when you say author, you get equals no equals or with create a date. It should say you should be able to speak from is after or is before. It's not quite sure why it's not.

B

If there is something breaking before they render operators.

A

See you think it could be just whatever's going wrong here, that's preventing it from rendering.

B

A

Error in data uh Ray properties that undefined reading of hollow data it just uh oh, oh I, wonder, is it something because stupid as this just needs to be removed or it needs to return like an empty, as data probably has to return? Something um could be that simple, probably.

D

A

So it's not Erin anymore, which is good, but that didn't help with our uh our problem.

D

A

So that you don't write the description operator, is this the operators by this okay? So that's only once you've selected, but it's not even giving us the opportunity to select an operator.

A

um So how should that.

A

To the first segment.

A

I think was the title yeah the title segment, so the second one is the operating segment. So.

A

Confused why this.

A

Isn't given us, you know it's not prompting us when we click in let's say close day. It should then ask us to say, is before or is after and it's not doing that.

C

Looks like it's just me and you now, but I'm, not I'm, not sure I'm helping here.

A

That's all right, I should probably call it a day. Anyway. We've made a little bit of progress, but I think you're right, ultimately, James we do want it in GitHub. Ui um I was just hoping that this was supposed to be a bit of a quick win this summer um and I guess when I got the ux feedback trying to implement a whole bunch of like error, handling and um date, formatting and other bits and pieces seemed a bit like pointless and Reinventing the world.

A

If we could just adopt the date picker so I'm kind of looking to see whether there's a happy medium um because I yeah I I, don't I, don't really want to stretch the scope of this Mr to end up having to make a change to get that Bui and yeah.

C

A

We'll see how it goes, but thank you for jumping on.

C

A

Will let you know if I make some more progress, bye.