[FE/BE] - Mozfest Community Directory

[b-ggs]

Closes #7421 (Epic)
Related PRs/issues #7602 (BE pull request), #7422 (BE issue), #7417 (FE issue)

live link: https://mozfest-foundation-s-feature-fe-xuxj3g.mofostaging.net/en/

Link to sample test page:

Checklist

Remove unnecessary checks

Tests

• Is the code I'm adding covered by tests?

Changes in Models:

• Did I update or add new fake data?
• Did I squash my migration?
• Are my changes backward-compatible. If not, did I schedule a deploy with the rest of the team?

Documentation:

• Is my code documented?
• Did I update the READMEs or wagtail documentation?

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[github-actions]

This PR introduces visual differences. Click here to inspect the diffs.

[sabrinang]

Pulse Filters
Filter value: it would be helpful that the exact values are defined in the Pulse api/admin in the help text too as I haven't used pulse filters in a long time. It would be great if options can be sorted so I don’t have to delete everything to reorder.

Tabbed profile directory
If I just choose a pulse filter in the component for Tabs only, I get I get Server Error (500) when I preview/publish if a Subfilter isn’t selected. Is this missing a validation error if I’m not able to do this or is this a required field?

Tabs

• It wasn’t very obvious how to create another tab. I figured it out when it was done via the Pulse filter itself. I didn’t understand the help text: “The profile information to create tabs on. The first option in the snippet will be used as the initial filter.” does it mean ... that the Tabs are created based on the selected pulse filter and the first option in the snippet will be the first tab?
• Mobile: Make it go to the edge so it hints that there is more (looks cut off with the margin right now)

Content

• I’m not familiar with how the MozFest team wants to organize the content this year but for different tabs could you have different subfilters? For example, Wrangler filter by spaces then Volunteers filter by years? It may be good to check with whoever is entering to review content as I don't have the content and am not too experienced with pulse filters either which made reviewing the filtering functionality experience tricky as I didn’t want to actually update the pulse user profiles if I wasn’t suppose too but it would be most useful to test with real content.

Design

• Filter drop down box: it is too narrow for the average space names or if they are localized as well (make this wider and on mobile as well)

• Filter check box: make it #595cf3 blue instead of purple

• Profile card bottom label: if these are not links/clickable, they should be black
• Profile card on narrow 7-columns: the full-width version is preferable as the narrow photo proportions are not ideal but I saw the mockups desire having two up. If this is what is desired by the stakeholders, I'd atleast fix the alignment of the social icons (to be consistently upper right) to clean up those elements if they aren't specific of what they wanted I recommend having one profile up at a time.

[stevedya]

Hey @sabrinang I have made the necessary changes at least for the design feedback you had. I've been away from the project for the last little bit but I can put some time into getting this one finished up next week. Some of the functionality changes eg. Having the filter values defined or choosing different sub filters for each filter might need a bit more discussion though.

[sabrinang]

@stevedya thanks for getting back to this! I'm looking at https://mozfest-foundation-s-feature-fe-ovhu8u.mofostaging.net/en/ and it looks like design front-end changes haven't been updated so I'm wondering if I'm looking at the wrong deployment?

Also, it looks like the wrangler section disappears when I click elsewhere and return to it:

[stevedya]

Hey @sabrinang,

Thanks for looking at this again. I finally had some more time today to look at the outstanding issues.
Looks like I accidentally did that design change work on my previous FE branch 😣 so i moved those design updates to this one and gave it a push. Let me know if the updates still aren't showing. As per your original note these are the things I updated now:

Pulse Filters

• No updates here but we will need a list of the filter values available in pulse if we are to list the available ones in the snippet

Tabs:

• Updated help text to be clearer (similar to what you described)
• Made the filters touch the edges on mobile

Content

• Im not sure if the mozfest team will need separate sub filters for each main filter at this time, however this would be a BE change for @richbrennan or @b-ggs

Design

• Enlarged subfilters width to allow longer filter names and reduce wrapping
• Changed profile card bottom labels to black as requested
• Kept it as a 2 cards per column on the version with the sidebar for now, I can check with marc on this one what he prefers.
• Adjusted alignment of social icons to sit at the top of the card instead of centered to card title text

** Reply to your previous comment **

• I think the issue happens when there is nothing to filter by so usually we wouldn't wanna include empty filters when configuring. However I think i fixed it and added a fall back for this just incase. Let me know if its still broken in that way
  

Let me know if the new changes work or if I will have to get this to trigger a deployment again 😃
Thanks!

[richbrennan]

I've merged in the main branch and fixed the BE merge conflicts, however there are still conflicts in the following FE files:

• mozfest.scss

• tailwind.config.js

[danielfmiranda]

Hi Everyone, I believe in order to build the test app we need the node and python tests to pass.

I tried to pull this PR into my local machine to see if I can get a fix, however I was unsure how to set up the tabbed directory and thus unable to test.

However I added some suggested fixes that I think would get the tests to pass.

Thanks in advance and please let me know if you have any questions about my comments!

[kristinashu]

Design-wise this looks good and it looks like Sabrina's feedback was addressed. Like Sabrina, I'm not familiar with the real content and setting up the different filters was confusing - I think it will be helpful for Marc to test it out further once it's landed.

[kristinashu]

Design looks but but code review is still needed.

[danielfmiranda]

Hi Everyone,

Thanks for tagging me in this. After taking a look, everything looks good to me and I am approving!

taken over by Kristina

[Pomax]

Hey all - this PR duplicated code we already had in place for streamfield blocks, and should have had an issue filed for the fact that we now have duplicate code that is a source of future bugs when this code gets updated in only one place, leading to divergent behaviour between two parts that should behave the same. Hopefully we can remember to flag and file this in the future. Additionally, it looks like this new snippet cannot be regulated in terms of permissions, so even though the code landed, staff can't actually create/edit them without admin rights, so that's not great.

I've filed #8033 to address the code cleanup in the new year, and #8034 for the permission issue.