GitLab Govern:Threat Insights Features & Demos, 24 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: MR Widget Dynaminc Content - Pairing session

Description

This video contains the brainstorming / pairing session for developing the dynamic MR widget content. The issue page is here: https://gitlab.com/gitlab-org/gitlab/-/issues/368592

A

Okay, I think it's working, uh it's gonna record on my computer and then I'm gonna put this on on youtube. um Hello. Everyone uh today is the 24th of august 2022 um and we're gonna work we're going to pair up on an mr widget issue, which is this one?

A

um Basically, the idea is uh that the mr widget, it's using a configuration like this uh and and we need to transform this into a component that renders uh this data. It takes this data as an input and then it renders something like this. uh So that's that's the idea.

A

I haven't thought about this uh so far, uh so I would appreciate if uh this is a collaborative session, so we all think about uh the solution um so yeah. I think we're ready to get started right.

A

Do you understand the problem so far? Okay, cool! So the extension api is already using this configuration um and then there is an already a component that does this, but it's since we're rewriting it and then we want to make it more view friendly, because right now it's uh like a custom solution. uh We're gonna write it from scratch, so I'm gonna go ahead and open. My editor just quick question.

B

What's the extension api so.

A

That's a very good question: uh the extension api. It's I think it's this one.

A

So in order so we have here, we have merge, request widgets, there are multiple of them and then in the past every widget was using a different implementation. So it was not consistent. So we came up with the idea to have a strict api uh which basically it looks like this uh terraform index. I think it's this file, so this is, for instance, a um a widget that exports a configuration. It looks like view, but it's not view, um so it exports this one which makes users which makes use of this configuration.

A

So if you see, for instance, there are the methods computed, telemetry model component, and then there is the base component, which takes this configuration and then renders it and displays something like like this.

A

So this this is, um it solves the consistency problem um because you can just pass a configuration object, um but if you have a more complex use case, for instance the security mr had a more uh complex use case- you are, it was very limiting. We were not. For instance, we were not able to add models uh and then, when you clicked on the model, uh we had to come up with uh with the implementation once again, because we cannot reuse view components.

A

So, therefore, we came up with the idea uh to refactor it and then make it less strict, but still try to make it consistent and the extension apis is basically uh this is we call this the extension api. So this this configuration it's it's not an api, it's not a rest call uh or whatever it's just uh on the client side.

A

For instance, um if you look here the data structure, so if you pass the the extension api, this data structure, like a header text subtext, it suffices that the header it corresponds to this. um I'm sorry here it corresponds to this part. So, for instance, new is the header and then for the text. You need to pass this, but for some cases, uh since this is a string, we had to do uh html injection.

A

So it was not very optimal.

A

Okay and now the idea is to pass this object and create a component that takes this in and then renders it using view, and let me quickly walk you through the the mr widgets security reports component. So this is the new way of writing a vmr widget. So, instead of exporting an object, we export a view component, a traditional view component and we use dmr widget wrapper component to pass data. For instance, the fetch collapse data.

A

It's this part, so this this one. So if I refresh the page, it's making an api call and it's making use of the fetch collapse data, and then there is the fetch expanded data. So there are two data handlers and they are taken care of by the widget component by this one.

A

So we're gonna pass today. um We're gonna pass here, um something that is called content. I think, um and that content is going to be transformed uh into a real, a ui into a ui, um so vmr visit the way it works.

A

It still supports this this api because we want to make it backward compatible, but on top of that it adds slots so, for instance, the summary part and the content parts they are slot slots, but you can also pass them as properties.

A

So, if you, if you pass them as properties, uh they are rendered otherwise slots are rendered and um sorry widgets view so, for instance, the content part um it's just it's a slot and if there is no slot it renders the content property. So today we're going to use this content property and then pass this data so, for instance, content equals to uh this part.

A

uh Let's take, I think this is this should be an array by the way this should be. An array of um this is an image.

A

uh This should be an array of items because every array is going to be rendered as a row. Every I uh item of the array um so yeah is: is it clear.

C

A

B

Thanks for the explanation that makes sense.

A

um So let's get started, this is the widget component um and I think what we need to do is um so this content it we. We cannot display it like this, because it's going to be an object, so we need something, a component that is called, for instance, dynamic, content or whatever, and then we need to pass the content uh to this component, so we're gonna create this component today.

A

Does it make sense.

A

My computer is a bit slow. I still need to retrieve my new computer waiting for that. um Okay, so let's create this dynamic content view. I'm sorry.

A

And then here we go the script part and then we go like this template so far.

A

Content it's going to be, I think an area objects required. It's going to be required. Okay, so now we need to develop any ideas, how we can start.

D

So are we? What we're doing is to create a wrapper first right and then that is consumed so then that wraps around the api just makes it easier for us. Okay, that's.

A

Cool yeah I can, I can show you the existing uh the existing implementation. I think it's this one, uh the base view component. um So there is the dynamic scroller. uh Okay, it passes the full data and then the dynamic explorer is what is it.

B

A

A

Okay and then, how do we render this.

A

Okay, it creates a template and then it passes the item. So um full data is an array of items and then for each item. We do create uh something like this child content and child content is.

A

A

So basically, it says if there is a data. Header then render the header part. If there is the icon and then render the status icon um and so on, if there is so, there are a lot of ifs and then it's renders so we should probably do something similar.

B

Should we um maybe look at what the data structure looks like for each item? It's this one. Okay,.

A

Cool awesome, so there is the header. uh So this is a content item exactly okay yeah. This one gets passed to the content item um and then.

A

Technically speaking, I I'm just thinking we can also reuse this component right.

D

I copy this part paste it and then stop.

A

Yeah, let's, let's try and see how this this looks like um widget view, and then we call dynamic content.

A

So if we do this one, I think it's this one is the extensions that is icon retails. It's here. I guess extensions.

A

A

Right so data widget label model id so the model I differences. We don't need this because uh in the previous implementation, since this this was not allowing us to use um more view components, we had to pass them through a configuration and we we don't need this anymore, um but the thing is yeah: let's just remove everything and then let's just use the data part for now, um but there is a level three level, I'm not sure. If we can reuse this one.

A

Because um one second, let me find that issue.

B

So one second.

A

I'm trying to find the design.

C

C

A

Yeah, so this this is, this is the design and uh we have the level system. So this is, for instance, level one, the header part. This is level two and then we have level level three. So you can. You can nest uh item roles with with the children property.

A

So that's why it starts with the level level three. So this is only for the for for the for the third level. I think it's easier if we start like this. uh Let's just remove this and then components tag.

A

This part as well generate text is not needed. Anymore. uh Generate text was since we were passing string and then we were hard uh html. It was kind of uh injecting them.

A

uh Let's clear this one as well, and then let's rename this to content okay, so we have start from space, so we we need to develop this part, and for that part we have this data structure.

A

um So let me just start by passing a data here that is similar to this one uh id and start.

D

With tackling all the required stuff first, yes,.

A

Which is the id, for instance? That's a very good idea. Let me just create here in the computer property um content, expanded content maybe make.

B

A

B

A

It's going to be id.

A

Yeah, let's just pick one for now uh heather, I think the header is going to be something like says: detected three potential uh sas detected, three potential uh vulnerabilities and then what else we have required text mean text for the role.

A

um By the way, I'm going to paste this link to the zoom chat.

B

A

Where's the chat here.

D

I can post it. Oh keep going.

B

C

A

Okay, so we have one oops, I'm sorry. We have only these two or yeah these three uh options that are required on the top level. So, let's see and then we need the text and text should be.

A

B

Text should be, let me close this as well.

A

What do you think the text is.

D

Are we looking at level one or because you know.

A

Okay to this one yeah, this is level one. This is level two and then this is level level three. I guess, okay, uh that was a bit confusing to me. um Okay, so I suppose.

A

We have an example here.

A

Or let me check actually, let me check one um so header.

B

They don't have header.

B

Supposed to be.

B

B

A

Let's check one other: let's just test report index header.

A

Okay, so this is map test as child. I think it's this one uh test header, but then the text is missing, so I'm not sure if this is required.

D

Is this? Is the header supposed to indicate like? Is it a header or is a subheader? Are those options or not.

A

So um if it's a structure.

D

It can be anything yeah.

A

If it's a string, it's a header, if it's an array, it's an array. uh The first item is the height.

D

A

Main text for the row: let's leave it for now um I'll I'll check that later. um Okay, so we have no, not this one, this one okay. So this is text right.

A

Let's just leave it sas detected three potential vulnerabilities and then in the dynamic content we need to make sure that this is passed. So I'm going to.

B

Console.Log, let's see directors, we don't need this props content.

B

I'm just actually just trying to do this.

B

Sorry just enter.

B

A

So, let's see if we are actually dynamic content, we need to pass here the dynamic content as well as to declare it as a component, and we need to import this import, dynamic content, um uh dynamiccontent.view.

B

A

Theory just rendering this should.

A

This is a bit tricky because um so there are multiple widgets and all of them have different displays. So it's it's hard to understand like what the whole data looks like uh when the whole data is passed.

D

I passed it. I shared a link to the pajama box that might be helpful to see the other ones.

A

D

So in the uh chat I included some pajama mocks.

A

D

A

D

And that might be helpful to visualize, because I'm guessing.

D

Oh yours is different than mine or maybe zuma, that's weird who's doing that.

C

D

Do you have to lock me.

A

D

A

Think I'm logged in.

D

Merge request report, so you go down, there should be like so you if you hit. Let me see how did I get here if you hit the stigma icon.

A

D

Yeah that one oh wow, yours, is different than mine. Oh I'm not logged in. Maybe that's why.

A

I think it's here merge request reports, okay,.

D

B

D

So we could see.

A

True, so this is the mobile yeah. This is a desktop view.

C

D

So if I look at the terraform, I'm guessing the one with the check mark is the header and then the text below it is the text.

A

It's like that's what I'm guessing or is it the sub sub header.

D

um Yeah, that's a good question too.

A

D

That's a good question.

A

But anyways: uh let's, let's see if this so far it works. Okay, um just expected con expected object gut array. Okay, um just I think it's the digit component here, content, uh which this should be an array required false type and then still it should.

A

One second, I need I need to log in.

B

B

This could be a great candidate for storybook entry, just document um right, yeah.

A

Yeah, maybe we could do another pairing uh session for that one. You lead that one.

B

Yeah no sounds good. uh You should do that.

A

Just put it here, let me login because when once you're not logged in my computer is buying.

A

I can't even click gosh.

D

Maybe you're right like if it's like story book, you can it'll indicate. Okay, this is the header.

C

D

This is the text, that's how it's supposed to be yeah. I see what you I'm seeing such benefits with the storybook entries.

B

D

Good documentation.

B

A

ah um I'm sorry, I need to change the macro here to something more um so basically, this I'm using an extension to mark the api calls uh so that I return whatever data I need, and I'm using marker for that- and here I have all the rest. Endpoints marked that I'm using for the for this widget and I put 10 seconds as return for one endpoint. That's why it was to see the spinner. That's why it was uh loading um so uh clicking on this. Okay.

A

It it does this because, right now, I don't pass any.

A

So this one needs to return something. I'm just gonna do this so that next time, when I click on this, it displays it. It displays the content, it's because to give more context, uh as mentioned before, the fetch collapse data and fetch expanded data, there are required properties for vmr widgets and the mr widget on mount calls. This fetch collapse data which renders the summary part, and then, once you click on the toggle.

A

It calls the fetch, expanded data.

A

Expanded data, I think it's what we called here right. Yes,.

B

Cool it's taking a bit of time.

A

By the way, do we have a heart stop because we're already in time and we couldn't write any code so far.

B

uh I have to jump out right. I've got an appointment, okay, um but I'll watch the rest of the recording. If you.

A

Yeah otherwise like if you also have um to jump off, I can continue recording this, and then I will post this. At least I want to display one level or two level uh content.

B

Okay, we we could set up another session. I'd be happy to do some more on this. It's really interesting, so um yeah I'd be up for more.

A

It depends like if you also have to jump uh samantha and gerardo.

D

No, I'm gonna, I'm gonna stick up a little bit more okay.

A

Cool so maybe like we record and then um I will post the the recording.

D

Yeah you can follow on the recording, bye, dave.

B

Nice thanks clear thanks. Sir. That's really good thanks cheers.

A

Okay, so clicking this, um it displays the content, but then it disappears. So, let's find out why the digit component, so fetch x, I think it's the toggle uh collapsed right, so toggling the collapsed, it fetches the expanded data, and then we saw the spinner uh and the fetch expanded content should set the the data.

A

One second view: I'm gonna check here, mr digits.

A

Okay, so fetching the expanded data should set the expanded okay. So it sets it here, but it doesn't display the dynamic.

A

Oh, I think I know why. Mr widget, okay, second one, it's because here we're passing a slot, so this one is not being respected.

A

And the the reason why we have two ways of of setting the data is because, um for most of the cases the widgets are going to use this, this config object um and for other more complex cases. We want to allow the developer to have a way to modify the the content using review components.

A

So, in theory,.

A

If I reload the page, this should work. If not, we need to debug this.

A

Okay, okay, so we have the child content.

A

And child content is okay. We call this child okay, but we don't display any data, so console.log, okay, undefined, so the property is undefined content. What do we pass here.

D

Just to display anything.

A

Dynamic content content we pass it.

D

But if you go back to the component, I don't think you're outputting anything.

A

No I'll go.

D

A

But we have the console statement and.

D

Oh, okay, clouds will say: okay.

A

This content should be right: uh props, dynamic content, dynamic content, dynamic content, export default, uh hello, world mounted.

A

So um from context that object got undefined.

A

Am I doing something wrong here.

D

What's content.

A

B

A

B

A

Let's type array default undefined and then what do we pass here?

A

Content is expanded. Data and expanded data is.

D

A

Be expanded content.

A

Oh hello, world is being rendered. I think we need nice.

A

We need to set the padding and stuff, so let's just use this one.

C

A

So it's recompiling right now. In the meantime, I'm gonna check the feedback file. Okay, so the status icon is.

A

Okay, it's invented.

C

A

I think my computer's gonna die.

D

A

Okay, while this is loading, so I think here uh we need to do something like.

A

So if it's, we need to render the header first and let's assume this one is the header uh also by the way. um Okay, for this use case princess. This is a bit more complex because it has links. Then it has different colors, so probably for this one, the slot makes more sense instead of using the content, but, for instance, the theraform vision is a good candidate for um the data that the con like uh use using the the javascript object, because it just renders some some text and also license compliance.

A

um So this is standard. We first displayed the link and then the text and the this this this content is basically structured. That way, so we have the link. uh If you provide the link, it displays it first and then it displays ah text. Is this one? Okay?

A

The text is this one? I guess so. This is the header. This is the sub editor.

C

A

This is the link, and then this is the text and then yeah. If we want to go one more level down, uh it's the child content. Okay, so clicking this hello world. This one is passed so we're there, and this is indented.

A

um We need to make sure that it's this one uh is at the same level with this one.

A

But let's make it later: let's just design, okay, uh so gonna say.

A

Think content, dot header and this should be probably an h3. I guess, and then, if we have, um let's see text and subtext.

B

A

um So the header is either a.

A

Text a string or an array of um an area of strings, so for that reason I think it makes sense to create a computed property and then say return um if, let's do this content header, let's make this type of equals string then return this content header.

A

Otherwise we turn this content header first item and then subheader is the same. Let's make let's check here: it's either: okay, it's just there's only one way of setting the sub header, this content, header um zero, but only if the type of this content header equals.

A

um No, let's make. Maybe array is array.

A

Attack otherwise it's undefined and then here we should display the header.

A

Now I think it's because we don't need this anymore cool, it's recompiling, um and then we need to set the indent this to this level. Do you have any idea on how we can do this without using the icon.

D

Oh, you want to indent it right.

A

Yes, so we need to move this part, this hello world.

A

Something like this, I don't know 20 pixel, something like this.

A

D

Looking at our current mr widget and see if there's samples like what what classes they're using yeah.

B

D

That way, we can be consistent.

A

So this one has uh-huh okay, so it has a fixed width within uh with with margin.

A

So we need a width of two around. Where is that this one? Do we have the styling here now it's here. Would this work margin left to right? Okay, so this this one would work uh on package. Let's see.

A

If we have it too, I don't with.

B

Let's check it, let me wind.

A

What is the grid size? It's a pixel.

A

Do you know which one corresponds to ram.

A

Well, technically, if glp 5 is.

A

A

And we don't have this, we have eight.

A

Now, six now we have six.

A

So that's this one and it seems to work eight and we don't have.

A

We have seven and we have eleven, we don't have eight.

A

And seven seems to be working: okay,.

D

Those will need to be added.

A

We don't need to edit cool, so it's this one.

A

And then, if we refresh the page.

A

This one and then we need to display the subtext right. So meanwhile, I think we can just add the subtext as well. um It's probably going to be an h4 uh if content subtext.

A

And some text this one okay.

A

The thing is um so what makes it more complex is that transforming this into? um This is simple, but on the other side, if we're using a slot like in the mr digit reports, uh we need to make sure that here we use, we reuse the same components.

A

So we should do something like widget header.

A

And then pass past the header, the header content, because otherwise uh loop wise it's going to be different than we don't want. We don't want that. So. For that reason we probably I'm not sure if it's a good idea um to group like if it's not if it's a good idea uh to transform all of these into a component or whether we should just make it more like, for instance, the header part is a component and it handles the header uh part. And then the text is is a different component.

A

So we have two or three different uh components which we can use and we don't have to like. What I mean is uh we don't have to create a component for each of these these properties, but rather we group.

C

A

Because that's that's the tricky part. That's right! Yeah go ahead.

D

No also, if they're used, if they're following that pattern, minus 12, utilize our api and then and then focus on creative they're using slots, and that's the one that we probably want to create more. It's like if, if they're going to do that, something simple, let's just for like okay, we don't have to create a new wrapper, just use the api.

D

I think it's only customization, so maybe we don't. I don't know how we can indicate like okay, if you're, using if you're conforming to the api, please just use the api. So now you don't have to rebuild a wrapper around it. With all of this little detail, customization.

A

A

I'm sorry like yeah.

D

Because right now we're building like we're, rebuilding um like just in between wrapper right, we're passing in individual values, we're creating that wrapper, so it can kind of engage with the api. I'm.

C

D

Wondering is it possible to to skip the wrapper when they're, just you conforming to our current design. That makes sense.

A

um Absolutely not so the wrapper is only going to be used if we pass the the object.

D

Okay, yeah yeah, okay,.

A

Otherwise, um if we want to customize it, we we can, we can simply skip this part, um yeah removed, and then we we provide the template content.

D

A

But the thing is if, for instance, for the security reports, if I need to do um this bit this part, then I will have to rewrite the whole child design. The dynamic content, design.

A

And I will have to duplicate it if we don't provide components, that's why I was saying uh if we, for instance, extract this part, so, for instance, this is the header. We extract this and call it a widget header or widget content header.

A

Then, uh in the security reports we can import it and then use it like this uh widgets. Oh.

D

A

Header and then we pass the header data like whatever it is, um either okay or we just um I don't know it's just uh this is still uh work in progress. Okay, then I think that's we should go in this direction because otherwise, like we will have to, we will have to uh replicate the whole um yeah. The whole design here by the.

C

A

This was failing because I cannot read properties of undefined reading zero.

A

If this content header, let's see what the content is view, mr widget child content content is header.

A

It's because content is an array, so this should be like this in the widget. We should create a dynamic content for so for free. uh We should do something like this. We for uh content- let's just let's just call it data for now data in content, uh then.

A

Equals data, and then I think we need the key right and the key was the id data id.

A

Should go before content? Okay, it's because we're passing an array of objects, uh so the dynamic content should render one one row um at least should be easier like that.

A

But this makes sense right like creating one uh component for each section and then reusing it. So we can. We can already do.

C

A

So, for instance, widget uh content, header view and then script template, and here we pass I'm sorry we get this part.

A

Like this, but the problem is that if we pass so, if we pass these these uh these values as property, then it's still not very uh flexible.

A

So, for instance, like this part.

A

The one critical one high and one other it's a bit custom. So it's this level of of of of um of design is only used for the security reports and therefore uh not going to be added in the in the represent the dynamic.

C

A

uh But we wanna allow the developer to be able and make make them um to be able to add this. This part, how are we going to do that? Any idea.

D

In that case, we don't, we probably don't. Have we just passed, create a custom component for us and pass it through the slots.

A

Yes, like like this, for instance, uh here we should so we should import this, this uh digit content header view, or should we yeah that's the question? Should we because if we don't import, this, then design wise.

A

D

Your word that might deviate too much.

A

Exactly like, for instance, I can, or maybe we can do the icon is- uh should be strict because we have a set of icons that that we can. We can reuse. Actually, let me open the component library here so either we have an icon and it's very strict or we don't have an icon or I'm sorry. This is this is the header for this row. This is the sub header, and then this is the text part, um but still, I think.

A

Actually, all designs have have an icon, so that's cool. Maybe we can. We can make this strict and we can pass this as a as a um as a property and then the rest.

A

We provide them as a slots again like we do with the with the widget component. So it should be something like this.

A

um So props header, it's as text um sorry type is string and required is true, and then here we do slot.

A

What was the slot name? Name equals header.

A

And if nothing is provided by default, it's it's! It's! The header property.

A

Same goes for the subheader type is string required is false, um but does this get too complex for.

D

I was just thinking like the purpose of having a slot is to have some customization, and one of my questions would be. I feel like this is still very constrained like okay. Now we it's still constrained to this kind of pattern, and I don't know it might defeat the purpose of having customers like customization in the first place like you're, you can customize but limited.

D

It's I feel like. uh We should create a component, that's really flexible, but again I don't the mr widget. The purpose I know is to have consistency and yeah, I'm just thinking if this will constrain us again.

D

That makes sense.

A

Let's think about it, um so, looking at the design, uh I see that the instance is is very strict. It's only one design.

D

The text exactly.

A

Is not so this part should be the header, for instance, and it's not very um unified right, so I think this one is the subtext or subheader, uh and then there is the text or maybe this is the design wise. It's the same anyways. Let's assume this is the the header and then this is the text, so in one case, for instance, it's bold in one case: it's not and here as well. uh This one has bold in that in the text and you cannot using the content object.

A

Otherwise we would need to inject html. um So this is the use case. I think so here. Let's assume that we are using the um dynamic. What was it called? um Widgets content header.

A

Let's assume this is our header uh and then we don't pass the data like. We don't pass the props uh because we wanna make sure uh we we want to use. uh We want to be more flexible, so uh here we're going to say, template header and in the header part it goes cest detected 3 uh and actually this is bold or strong.

A

um Potential vulnerabilities.

A

And then in the sub header, the subheader we do um like, I think it was called status page or whatever. There is a component like that.

A

Actually summary text is already using. This uh summary highlights, I think yeah. This was the computer, the component that I created for that so critical, high and other, and we need to pass, highlights okay. So here it should be summary highlights, and then we pass the highlights whatever highlights.

A

So, if we do this, uh we we will have this design, so it's already uh flexible and, let's, let's imagine you want to add your your banner, the security training banner right on top, and you can still do that. You are using the the widget con, the widget content header.

A

I know we can uh because this one so, for instance, for the other things like no. Actually we can do that in the header part, you can provide a header and then here you can say security reports, training banner.

A

So you can still use that and if we check here the content header, uh but it will go inside the h3, no, it won't because this one is the default. So it's gonna go here.

A

I think it's still still uh flexible. Isn't it or.

D

A

It's not you're, not convinced.

D

No, I think it's.

D

Because I feel like it's a wrapper around like this, is hmm I have to think about this one? Okay, so I feel like it's a wrapper against another rapper, that's only being used for our case. So why do the wrapper in the first place, when we can just.

C

D

A

Remove this for.

D

Example, like yeah, something like that.

A

um That's a that's a valid question, so the only reason why I would do this is because I would need the icon in the in the in here.

A

D

You want you guys, utilize, the icon from that api, so.

A

Let's see so there is, there is the icon here, uh design wise. I think we can just add the padding here uh in the widget. Let's see so widget is so. We can just add the padding here and inside the.

A

Dynamic content: um let's take this padding and then add it here.

A

And otherwise, I think you're right, we don't need the wrapper component. In that case,.

A

Well or just just for the icon, uh but we need to make sure that the developer includes the icon, because we wanted like at least the design. It's not true. The design doesn't always provide the icon because the icon is for the text in this case, it's not for the header.

C

A

So maybe you're right, maybe we don't even need the the wrapper.

A

And the same goes for the text.

A

But if we want to include the icon, what will be the the uh well, we can just import the icon here.

D

A

And then include it here, like in the h3 tag. We do something like yeah, that is icon.

A

A

So this would work probably.

D

That's what I was thinking.

A

Actually, the status cycle, maybe is like this uh gl flex or whatever it's called. uh Then we put it here. Status icon goes here.

A

Yeah and then for the text uh yeah we just render text links are we can use the gl link, so this one is the header or like yeah, I think you're right. I think we don't need here. We don't need the dynamic content in the dynamic content. We don't need these sub components and then we can just display this. The whole data inside this dynamic content uh or object whatever like we can rename it.

C

A

D

For me, I for me the first insane, okay slot. Let's allow the developer to have customization. That was the purpose of it. So I think maybe we don't have to make things. We don't need a wrapper against another. So I don't know. Maybe I'm I might miss some details, but this is what.

C

A

The action buttons, for instance,.

A

A

Because these ones are pretty standard, it's always on top right on the top right of the of the row.

A

So how? How would we develop this same with the status icon? uh We allow the developer to import this the actions part and then pass data inside it and then um expect them uh place them on the top right of the row.

D

Yeah, I would okay, I'm I'm now. Thinking in terms of the um mr security training see what design it is because then, that one's the really customization like we're not conforming uh just give me a sec I'll share on the screen, so people can follow along as well uh security training and.

D

This is the issue I'll share in the chat, so in this issue, looks like we're not really.

D

If you open up that issue, we're not really customizing that one, but I I don't want to introduce something that might not because right now, I can't think of a use case where we need to custom that side. So this is what it's going to look like, so we don't really need to do anything on the action part see how this one is expand. The whole thing.

C

A

Okay, so in this case it wouldn't work because we already have the padding right there yeah, I introduced the padding here. So maybe the padding needs to go here from like I just put it. It should go back to the dynamic content, uh yeah and dynamic content yeah. It should go back here. So unless.

D

Oh no you're forcing it there then right.

A

Yes, but if you, if you pass the object, ah if you press.

D

Yeah yeah got it.

A

If you pass this one, if, if we don't pass it the slot, it's going to be.

A

It's going to be empty because this is the fallback.

D

A

It's going to be empty, it's just going to have the the the the the the gray background and that's it. In that case, the security training uh banner could go.

A

Yeah yeah like like this.

D

A

And then but then we expect.

A

Or maybe what what I can do is.

A

So, let's break this down, um this is the figma right. So this part.

A

So we want the status icon and then the action buttons to be available um so to always be on the same spot like always on this left that is icon and then always the right. The status actions that they're the action buttons. So maybe we can have just one wrapper here, uh something called I don't know: uh widget content wrapper and then here we pass the step as an icon and then the action buttons uh action buttons like we do here. I think uh yeah.

A

We can do it here, but it's it's not yet there uh action buttons and then the rest is just like this. So we don't need the status icon here.

A

Would this work so this will this this component will take, so it will render the whole part here the whole content, but it's just going to or let's uh I think it's. It should be one like this yeah for each of them. So let's imagine we have tag multiple sections, because this one is a section. This one is another section.

A

So it's going to look like this um content wrapper and then status icon is going to be here. Action buttons are going to be here uh inside. We have plenty of flexibility, we can do whatever we want. We don't need this. We don't need this because it's just h3.

D

Okay and that way, yeah okay.

A

Does this make sense.

D

Yeah, in that case, it does.

A

Because otherwise,.

D

Again, yeah sorry.

A

Otherwise, if we don't provide this uh each widget that is complex enough, we'll have to re-style the action buttons and then the status icons.

D

I see what you're saying there and then we might deviate from the consistency problem. Yeah.

D

That's true yeah, because then I know the purpose of the merge request is to have some sort of consistent consistency. Hence we have some rules in place. Yeah.

B

D

I I can see how you're saying okay, we can do this, hence you're having another rapper, um but again the way you built it where, if I want like the training banner thing, it's the it takes up the whole thing. It still allows that to happen here. Yes,.

B

D

So, if your, if your design is kind of, looks like this, which is like what we have in our security training use our component. But if it's completely something different, you can use the slots.

A

D

Build it on your own okay, I see what you're saying.

A

Exactly so so we're not gonna have one wrapper for each um for each property. Sorry, this is the zoom control bar uh conflicting with with my tabs. I'm just gonna move them here. Okay, here uh we're not gonna, have one wrapper for each property here or for each section, uh we're just gonna wrapper for the whole data structure uh and it's gonna provide the status icon and then the action buttons on the right and then the content yeah you're free to do whatever you want.

A

Yes, by the content. I mean uh this part, so this the.

C

A

uh Whatever number of potential vulnerabilities to this part.

D

Okay playing devil's advocate here. What, if someone decide, you know what I don't need the action and then so now they're reverting back to using the slot method, and I'm just curious this this. This thing that you're creating here the widget content wrapper.

B

D

Is it very specific for our case? It's I feel like it's a guardrail.

D

It is it acts as a guard rail, which is great, I'm just wondering how many times would that be reused? Is it just specific for our case, like the benefit of creating a wrapper when just going in and just use that slot without that wrapper, and I just took that, let's.

A

D

That is simpler, but I don't know.

A

As far as I know, I think two uh digits are a bit more complex. I think it's one one is the license compliance and then the other one is security reports. uh So I assume this wrapper is going to be used in both cases.

D

Okay, okay, in that case, it totally makes sense, yeah.

A

And um for the others, they're going to use the object, uh syntax, so they're just going to pass the content property and then it will be populated automatically using the dynamic content component.

D

Yeah, in that case, it justifies for creating a wrapper that way the other widgets will have the same design and have using this component. There is some guardrail to ensure consistency, so that makes sense yeah. My question was more: if it's really unique to us, why.

B

D

C

D

Of wrapper and.

B

D

The complexion but yeah if someone else is going to use it, I think that'd be great.

A

You're right, um you're, absolutely right. The only thing that I see here is that this row uh this is also pretty standard uh like we need to display first, the icon and then the text, um but I think in this case they can like uh in the slot. We can just use the status icon component because it's already an export component. uh So it's, I think it's fine.

A

I was just yeah saying that um we need to make sure that this is also on the left side, but I think we can trust the developers here that they comply with the design.

C

A

Cool, um I think, if we go this way, uh we can solve a lot of problems because we can implement this design right. uh We can implement this design.

A

I'm not sure by the way, this the label here this one, I think it's specific only to the metrics.

A

But in that case they can use slots um exactly so we can do this design. Each section here would be uh the the wrapper content, uh widget content wrapper or whatever it's called.

D

A

Or they can just use the the object syntax here as well.

C

A

Object, syntax status checks, uh icon text and I think this one is just uh similar to our here. This line, it's just that we're not using a header.

A

Therefore it's yeah it's in the second level, so this is the first level. This is the second level and then the third level is that it one one more.

A

So in this case we have three levels. So one two and three right.

A

Okay, I think we can just do everything here.

A

And this is the mobile design, uh so that's fine. This is as well larger screens, so I guess this should work, and this is how it's going to look like in in the mr uh security report. So this is going to be a v4 um right.

A

We for uh we have five reports, uh report reports and then here we're gonna, say something like um yeah report. Title uh report highlights.

A

A

And then yeah the rest is just a pureview.

A

This makes sense.

D

Right: okay, yeah, that.

C

A

And otherwise, if if the widget doesn't need to use the slots, they can just remove this part and then pass the the data exactly.

D

Exactly- and they should definitely aim for this- it's only any customization. Then we utilize the slot.

B

D

A

D

Let you wrap it up, then savage. If there's any other points. One of me.

A

Yeah, um I think I'm just gonna um go this way and implement this, and then uh I think I can submit dmr and maybe you can review it.

D

Yeah, of course, and then I can probably start working on the banner like kind of in that yeah, this sort of format. This is great. Thank you. So much for doing that. This is super helpful.

A

This was indeed very helpful for me as well, because I get to use, uh I get to see the other um your use case, uh you know um shaping the thought process, so it was very helpful.

D

Yeah, thank you very much, okay, I'll! Let you wrap it up and then I'll I'll get out of here. Thank you again. Thank.

A

You, okay, bye.