mozilla / mozmoderator

Mozilla Moderator App

Mozilla Moderator

Mozilla Moderator is a panel moderation webapp that enables users to view, vote and ask questions on different events.

Then panel moderators can export the questions and use them during panel discussions and Q&A.

License

All mozmoderator source files are made available under the terms of the GNU Affero General Public License (AGPL).

Frontend testing

Use npm to install the necessary tools. If you use docker for development this step is not necessary.

npm -g install bower gulp-cli

Use bower to download all Frontend libraries.

bower install

Install all required packages.

npm install

Finally use gulp to check in all main static files and run the tests.

gulp

CI & CD

This application is currently run through integration and deploy pipelines via both GitHub Actions & a background Kubernetes Flux setup leveraging Helm Charts.

Through those workflows, a Docker image is built, tagged, pushed to ECR, and deployed either to a staging (itse-apps-stage-1) or production (itse-apps-prod-1) Kubernetes cluster.

tl;dr: Push commits to main branch for a stage deploy, cut GitHub releases (following v1.2.3 format) for a production deploy.

The pipelines work as followed:

CI & Docker Builds:

1. (manual) create your feature branch on this repository or a fork (CI will run in our repository for PRs from forks now) & add your work;
2. (manual) push your feature branch up to GitHub & create your PR;
3. (automated) upon push (if a branch off this repository) or PR (both our repository & forks), GitHub Actions will:
   • run linting & syntax checks on the code;
   • build the Docker image & tag it with the short git commit SHA of the latest commit to confirm the image can be built;
4. (manual) create a PR from your feature branch to the main branch, have it reviewed, then merged into main;
5. (automated) Upon merge into main, GitHub Actions will:
   • run linting & syntax checks on the code;
   • build the Docker image & tag it with "stg-{the 7-digit short git commit SHA of the latest commit};
   • push that Docker image & tag to our ECR repository for Moderator;

Stage Deploy:

6. (automated): upon creation & push of any Docker Images to our ECR moderator repository with the tag pattern ^(stg-[a-f0-9]{7})$:
   • Flux will update our Stage Helm Release of the Moderator Helm Chart with that new Stage image tag;
   • Flux will rollout that release;
   • Flux will update Stage Helm Release of the Moderator Helm Chart with a git commit & the latest image changes upon successful deploy.

Production Deploy:

7. (manual) test / QA the stage deploy as desired (moderator.allizom.org).
8. (manual) Create a GitHub Release off of the main branch with appropriate semver updating (using the pattern ^(v[0-9]+.[0-9]+.[0-9]+)$);
9. (automated): upon Release, GitHub Actions will:
   • run linting & syntax checks on the code;
   • pull the docker image of the latest commit in that release & tag that image with the release version;
   • push that Docker image with release tag to our ECR repository for Moderator;
10. (automated): upon creation & push of any Docker Images to our ECR moderator repository with the tag pattern ^(v[0-9]+.[0-9]+.[0-9]+)$:
    • Flux will update our Prod Helm Release of the Moderator Helm Chart with that new release tag;
    • Flux will rollout that release;
    • Flux will update Prod Helm Release of the Moderator Helm Chart with a git commit & the latest image changes upon successful deploy.

mozmoderator's Issues

User avatar in Mozilla Moderator fails for gravatar images

For users who's mozillians image comes from gravatar, for example these profiles :

https://mozillians.org/en-US/u/gene/
https://mozillians.org/en-US/u/Mossop/
https://mozillians.org/en-US/u/sylvestre/

When that user uses the Mozilla Moderator, their avatar is represented as the default avatar of

https://future-email.paas.allizom.org/static/img/unknown.png

like in this moderator page :

https://future-email.paas.allizom.org/e/future-email

Mozilla Moderator only successfully renders user avatars which have been uploaded.

Originally reported in Bugzilla Bug 1035475

Use Jinja for templates

Mozilla moderator uses Mozillians avatar with wrong aspect ratio

When a user uploads a rectangular avatar image to their Mozillians profile, like these profiles do :

https://mozillians.org/en-US/u/jakemaul/
https://mozillians.org/en-US/u/jhford/

Mozillians saves both the original non-square image and creates a thumbnail with the sides cropped. For example, jakemaul, with the profile :

https://mozillians.org/en-US/u/jakemaul/

uploaded the photo :

https://mozillians.org/media/uploads/userprofile/5d9e2612-bb7d-440e-bcd3-5343c094bfe9.jpg

which was rendered into the thumbnail :

https://mozillians.org/media/uploads/sorl-cache/0a/71/0a71c8ed2ec2a3e9c1a10acf0a41825a.jpg

When Mozilla Moderator uses a Mozillians avatar image, it's grabbing the wrong image and deforming it to be a square. The result is that all Mozillians who uploaded non square avatar images, have squished avatars on Mozilla Moderator. Additionally, people visiting the Mozilla Moderator, are forced to download the original high resolution user avatar image (bandwidth, slowness) even though it's never actually displayed at full size or at the correct aspect ratio. You can see this bug in the avatar images in this poll :

https://future-email.paas.allizom.org/e/future-email

Originally reported in Bugzilla bug 1035479

Ability to mark a question as addressed

There needs to be the ability for an event owner (admin) to mark a question as "addressed" through the /admin/ view of the event.

In UI terms that would need to be exposed as a ribbon or a mark next to the question.

Add sentry for notifications.

Replace Background Gradient

Replace the Sandstone gradient with a skyblue gradient, to suite the new logo (attached)
The background color is the bottom of the gradient, which is #EEEEEE

moderator.mozilla.org is running with DEBUG=True

The Django setting DEBUG is set to True on a production instance of mozmoderator. This can be seen by trigger a 404 on Moderator, such as here.

This is a really bad idea. To quote the Django documentation:

You must never enable debug in production.

You’re certainly developing your project with DEBUG = True, since this enables handy features like full tracebacks in your browser.

For a production environment, though, this is a really bad idea, because it leaks lots of information about your project: excerpts of your source code, local variables, settings, libraries used, etc.

Additionally, setting DEBUG=True disables some security checks and performances optimizations. Plus it's tacky.

Use mozillians api v2 instead of v1.

Fix XSS vulnerable js code

Please replace $('.insensitive').html('supported');

https://github.com/ppapadeas/mozmoderator/blob/master/moderator/moderate/static/js/app.js#L14

Add unit tests to mozmoderator.

Replace Logo

Replace the MozModerator logo with the new updated one (attached)

Cannot edit questions

I made some typos here https://moderator.mozilla.org/e/ama-with-ari and I would like to fix them but I cannot edit them.

Home page order

It's confusing to have older events at the top. Event listing should be ordered by descendent date.

admin interface exposed to the public

The Mozilla Web Application Security Guidelines recommend not doing that..

Add a notification on unsuccessful login.

Missing usernames

Hi,

On https://moderator.mozilla.org/e/ama-with-ari some users don't have an avatar or a correct valid mozillians.org profile link.

Responsiveness on 320 screen

We need to make sure that all our UI elements and templates are gracefully scaling down to 320px width view.

Fix validator to "Question" models

Change MinLengthValidator, MaxLengthValidator

Lock votes/ideas when event is over

If event is over, it makes no sense to allow more votes or ideas.

Archive feature

For users that are flagged as admins, there should be a button on each event that archives the event.

Once the event is archived it should be listed on an opt-in-visibility list on all events landing page. (bottom of page, new archived version)

┆Issue is synchronized with this Jira Story

Use pip v8 with hash support for requirements.

Use jinja2 templates instead of django templates.

404 Not Found: /static/css/modal-gloss.png

[02/Dec/2015 03:55:49] WARNING [django.request:140] Not Found: /static/css/modal-gloss.png

Image overlaps over text on mobile.

Layout issue with questions billboard

When viewing the list of questions, the layout is strange for screen widths that are 761-1000 pixels.

Add ability for admins to *answer* a question posted.

Often times there are questions posted that require a quick response, rather than to be pushed to a meeting or other format. Would like to request this be added as a feature.

All /e/* are Server Error (500)

https://moderator.paas.allizom.org/e/town-hall-ceo-news-2014-04-04 and other pages are Server Error (500). I am logged in.

Usability Improvement: Event locations

Tag events by location and allow users to filter events for their desired location (e.g. Brussels).

Dockerize mozmoderator deployment

We need to support docker as a deployment method for moderator.mozilla.org.

Deploy moderator to community paas cluster.

SECRET_KEY in settings.py?

SECRET_KEY = '%+sf5v)#v-s#j*(#!8h1wp=suyvj8j9q7&u)dnx6x+ij8!%&5='

I hope this is not the same as in production :)

cannot undo upvote

I upvoted "what does the fox say" but I cannot undo. Now I regret having done that and cannot hide my misdeed :D

Automatically vote your own ideas

When you submit an idea it is displayed with 0 votes, you have to vote your own idea manually.

I expected my own idea to be automatically voted by myself ;)

Expose moderator data in /admin

API optimizations.

Update error message for failed signed in

When a user who does not have a vouched mozillians.org profile attempts to sign in, they are shown the error message "Server Error (500)". Let's add a helpful error explanation that vouched status is needed and also how to get help.

Suggested message:
"Mozilla Moderator is only for vouched Mozillians, and we don't see a vouched mozillians.org associated with your email address. Be sure to use the email associated with your mozillians.org profile. For further assistance, [https://github.com/ppapadeas/mozmoderator/issues/new create an issue] and we'll help you out soon."

Fix BrowserId issues.

BrowserId loops over the same page again and again upon unsuccessful login.

Models clean up and optimization.

Add python-decouple to moderator.

Unable to use moderator

When I log in to moderator and click on any event, like say https://moderator.paas.allizom.org/e/sustainability-town-hall-2014-02-13 , I get "Server Error (500)". This was happening on some other allizom.org sites too, but a few of them got fixed with the comment:

I added the required fields manually and it should be working now.
The issue is probably caused because we don't handle the mozillians API permissions correctly.

allow more than 140 character limit

as requested by Mardi, we'd like to have the ability to increase the 140 character limit. maybe 280?

Upgrade to django 1.8

Add playdoh to mozmoderator.

Allow users to submit anonymous responses

During the 2014 RR2P (Remove Roadblocks to Productivity) survey one of the responses was, "A not anonymous survey about removing roadblocks to productivity. Something we would never speak out is really hindering us, but it needs basic anonymous protection to publish." It was one of the most up-voted issues at 65 votes.

License?

Under which license this code is released?

Export questions on CSV

We would like to export questions per event in CSV with votes, asked_by, timedate, question_text

Expose more fields on /admin/

We would like to expose more fields to /admin/ so they can be editable on creation or after.

• The text call-to-action on the login page
• The question (placeholder) on the input field of event
• The number of characters allowed for a question
• The word "question" (could be "experience", "answer", "story" etc)

┆Issue is synchronized with this Jira Story

Improvement: Use CSP

There's even a django module for that, django-csp. Also, we will make this a requirement for all future mozilla web properties quite soon. So why not start learning :)

Add caching headers

GET /static/css/main.css

< HTTP/1.1 200 OK
< content-type: text/css
< Strict-Transport-Security: max-age=31536000; includeSubDomains
< Date: Wed, 02 Dec 2015 06:40:10 GMT
< connection: keep-alive
< last-modified: Wed, 02 Dec 2015 06:38:40 GMT
< content-length: 6985

This is missing the appropriate caching headers, to indicate how long static content may be cached.

Add a Dockerfile for local dev/deployment.