FF: General Add List Modal

[danoswaltCL]

Implement a modal that can be utilized for adding or editing lists for both Inclusion and Exclusion flows.

We should start with just the initial type selector, then other work can follow. Depending on the type selected, form will act differently, so we can start here and then develop the rest.

Screenshot (Updated):

Considerations:

• This modal will need to be templated for use in both the Include and Exclude List functionality
• This modal will need to be able to handle both Add and Edit functions

When the user opens this modal, we will only show a type selector at first. They can select:

• Segment
• Individual
• Group (listed by each group type supported in that context)

[danoswaltCL]

hola, the design shows (All won't be used now, ignore that):

Individual
Segment
groupId1 (group)
groupId2 (group)
groupId3 (group)

Couple thoughts:

1. Is this the preferred order from user perspective? Segment will probably be the most used thing right, can it be topmost?

2. While Zack was out I suggested a different format for how we show these groups [here] so they look more like the other options (https://carnegielearning.slack.com/archives/C02QA168MNW/p1718981331228129). That would be an app-wide change that can be implemented outside this later, but that would give us a list that looks like this for assign-prog. What do you think about that @zackcl

That would look like this:

or with double-quotes:

@amurphy-cl @bcb37

[zackcl]

Yeah, I like that! I can update the options to the following in Figma if @amurphy-cl confirms:

Segment
Individual
Group: schoolId
Group: classId
Group: instructorId

What I'm not totally sure about is how the group types are ordered. It looks like it's not alphabetical. Do you know how the order is determined?

[amurphy-cl]

makes sense to be alphabetical, not sure why it wasn't previously

[zackcl]

I've updated the screenshot in the original post, where the "Group" is in alphabetical order:

Segment
Individual
Group: classId
Group: instructorId
Group: schoolId

[ppratikcr7]

@zackcl @amurphy-cl QA done for this. I dont see a decision made for the quotes around group names. But, I see that implemented in the code. Hope that's correct. Just one thing, I noticed that the segment names are not alphabetical, hope that's fine again, as we considered alphabetical order for the type dropdown.

[zackcl]

Yes, I believe both the segment and group names should appear in alphabetical order (ascending order). Also, the group type should be in this format: Group: groupId as we discussed without the quotes.

Segment
Individual
Group: classId
Group: instructorId
Group: schoolId