Teams UI Redesign and A11y Updates (#12142)

* WIP(a11y): task modal updates

* fix(tasks): borders in modal

* fix(tasks): circley locks

* fix(task-modal): placeholders

* WIP(task-modal): disabled states, hide empty options, +/- restyle

* fix(task-modal): box shadows instead of borders, habit control pointer

* fix(task-modal): button states?

* fix(modal): tighten up layout, new spacing utils

* fix(tasks): more stylin

* fix(tasks): habit hovers

* fix(css): checklist labels, a11y colors

* fix(css): one more missed hover issue

* fix(css): lock Challenges, label fixes

* fix(css): scope input/textarea changes

* fix(style): task tweakies

* fix(style): more button fixage

* WIP(component): start select list story

* working example of a templated selectList

* fix(style): more button corrections

* fix(lint): EOL

* fix(buttons): factor btn-secondary to better override Bootstrap

* fix(styles): standardize more buttons

* wip: difficulty select - style fixes

* selectDifficulty works! 🎉 - fix styles

* change the dropdown-item sizes only for the selectList ones

* selectTranslatedArray

* changed many label margins

* more correct dropdown style

* fix(modals): button corrections

* input-group styling + datetime picker without today button

* Style/margins for "repeat every" - extract selectTag.vue

* working tag-selection / update - cleanup

* fix stories

* fix svg color on create modal (purple)

* fix task modal bottom padding

* correct dropdown shadow

* update dropdown-toggle caret size / color

* fixed checklist style

* sync checked state

* selectTag padding

* fix spacing between positive/negative streak inputs

* toggle-checkbox + fix some spacings

* disable repeat-on when its a groupTask

* fix new checklist-item

* fix toggle-checkbox style - fix difficulty style

* fix checklist ui

* add tags label , when there arent any tags selected

* WORKING select-tag component 🎉

* fix taglist story

* show max 5 items in tag dropdown + "X more" label

* fix datetime clear button

* replace m-b-xs to mb-1 (bootstrap) - fix input-group-text style

* fix styles of advanced settings

* fix delete task styles

* always show grippy on hover of the item

* extract modal-text-input mixin + fix the borders/dropshadow

* fix(spacing): revert most to Bootstrap

* feat(checklists): make local copy of master checklist non-editable
also aggressively update checklists because they weren't syncing??

* fix(checklists): handle add/remove options better

* feat(teams): manager notes field

* fix select/dropdown styles

* input border + icon colors

* delete task underline color

* fix checklist "delete icon" vertical position

* selectTag fixes - normal open/close toggle working again - remove icon color

* fixing icons:

Trash can - Delete
Little X - Remove
Big X - Close
Block - Block

* fix taglist margins / icon sizes

* wip margin overview (in storybook)

* fix routerlink

* remove unused method

* new selectTag style + add markdown inside tagList + scrollable tag selection

* fix selectTag / selectList active border

* fix difficulty select (svg default color)

* fix input padding-left + fix reset habit streak fullwidth / padding + "repeat every" gray text (no border)

* feat(teams): improved approval request > approve > reward flow

* fix(tests): address failures

* fix(lint): oops only

* fix(tasks): short-circuit group related logic

* fix(tasks): more short circuiting

* fix(tasks): more lines, less lint

* fix(tasks): how do i keep missing these

* feat(teams): provide assigning user summary

* fix(teams): don't attempt to record assiging user if not supplied

* fix advanced-settings styling / margin

* fix merge + hide advanced streak settings when none enabled

* fix styles

* set Roboto font for advanced settings

* Add Challenge flag to the tag list

* add tag with enter, when no other tag is found

* fix styles + tag cancel button

* refactor footer / margin

* split repeat fields into option mt-3 groups

* button all the things

* fix(tasks): style updates
* no hover state for non-editable tasks on team board
* keep assign/claim footer on task after requesting approval
* disable more fields on user copy of team task, and remove hover states 
for them

* fix(tasks): functional revisions
* "Claim Rewards" instead of "x" in task approved notif
* Remove default transition supplied by Bootstrap, apply individually to 
some elements
* Delete individual tasks and related notifications when master task 
deleted from team board
* Manager notes now save when supplied at task initial creation
* Can no longer dismiss rewards from approved task by hitting Dismiss 
All

* fix(tasks): clean tasksOrder
also adjust related test expectation

* fix(tests): adjust integration expectations

* fix(test): ratzen fratzen only

* fix(teams): checklist, notes

* fix(teams): improve disabled states

* fix(teams): more style fixage

* BREAKING(teams): return 202 instead of 401 for approval request

* fix(teams): better taskboard sync
also re-re-fix checklist borders

* fix(tests): update expectations for breaking change

* refactor(task-modal): lockable label component

* refactor(teams): move task scoring to mixin

* fix(teams): style corrections

* fix(tasks): spacing and wording corrections

* fix(teams): don't bork manager notes

* fix(teams): assignment fix and more approval flow revisions

* WIP(teams): use tag dropdown control for assignment

* refactor(tasks): better spacing, generic multi select

* fix(tasks): various visual and behavior updates

* fix(tasks): incidental style tweaks

* fix(teams): standardize approval request response

* refactor(teams): correct test, use res.respond message param

* fix(storybook): renamed component

* fix(teams): age approval-required To Do's
Fixes #8730

* fix(teams): sync personal data as well as team on mixin sync

* fix(teams): hide unclaim button, not whole footer; fix switch focus

* fix(achievements): unrevert width fix

Co-authored-by: Sabe Jones <sabrecat@gmail.com>

website/server/models/group.js

@@ -1472,6 +1472,7 @@ schema.methods.updateTask = async function updateTask (taskToSync, options = {})
   updateCmd.$set['group.approval.required'] = taskToSync.group.approval.required;
   updateCmd.$set['group.assignedUsers'] = taskToSync.group.assignedUsers;
   updateCmd.$set['group.sharedCompletion'] = taskToSync.group.sharedCompletion;
+  updateCmd.$set['group.managerNotes'] = taskToSync.group.managerNotes;
 
   const taskSchema = Tasks[taskToSync.type];
 
@@ -1492,26 +1493,8 @@ schema.methods.updateTask = async function updateTask (taskToSync, options = {})
     updateCmd.$pull = { checklist: { linkId: { $in: [options.removedCheckListItemId] } } };
   }
 
-  if (options.updateCheckListItems && options.updateCheckListItems.length > 0) {
-    const checkListIdsToRemove = [];
-    const checkListItemsToAdd = [];
-
-    options.updateCheckListItems.forEach(updateCheckListItem => {
-      checkListIdsToRemove.push(updateCheckListItem.id);
-      const newCheckList = { completed: false };
-      newCheckList.linkId = updateCheckListItem.id;
-      newCheckList.text = updateCheckListItem.text;
-      checkListItemsToAdd.push(newCheckList);
-    });
-
-    updateCmd.$pull = { checklist: { linkId: { $in: checkListIdsToRemove } } };
-    await taskSchema.update(updateQuery, updateCmd, { multi: true }).exec();
-
-    delete updateCmd.$pull;
-    updateCmd.$push = { checklist: { $each: checkListItemsToAdd } };
-    await taskSchema.update(updateQuery, updateCmd, { multi: true }).exec();
-
-    return;
+  if (options.updateCheckListItems) {
+    updateCmd.$set.checklist = taskToSync.checklist;
   }
 
   // Updating instead of loading and saving for performances,
@@ -1519,7 +1502,7 @@ schema.methods.updateTask = async function updateTask (taskToSync, options = {})
   await taskSchema.update(updateQuery, updateCmd, { multi: true }).exec();
 };
 
-schema.methods.syncTask = async function groupSyncTask (taskToSync, user) {
+schema.methods.syncTask = async function groupSyncTask (taskToSync, user, assigningUser) {
   const group = this;
   const toSave = [];
 
@@ -1570,6 +1553,10 @@ schema.methods.syncTask = async function groupSyncTask (taskToSync, user) {
   matchingTask.group.approval.required = taskToSync.group.approval.required;
   matchingTask.group.assignedUsers = taskToSync.group.assignedUsers;
   matchingTask.group.sharedCompletion = taskToSync.group.sharedCompletion;
+  matchingTask.group.managerNotes = taskToSync.group.managerNotes;
+  if (assigningUser && user._id !== assigningUser._id) {
+    matchingTask.group.assigningUsername = assigningUser.auth.local.username;
+  }
 
   //  sync checklist
   if (taskToSync.checklist) {
@@ -1632,15 +1619,48 @@ schema.methods.unlinkTask = async function groupUnlinkTask (
 
 schema.methods.removeTask = async function groupRemoveTask (task) {
   const group = this;
+  const removalPromises = [];
 
-  // Set the task as broken
-  await Tasks.Task.update({
+  // Delete individual task copies and related notifications
+  const userTasks = await Tasks.Task.find({
     userId: { $exists: true },
     'group.id': group.id,
     'group.taskId': task._id,
-  }, {
-    $set: { 'group.broken': 'TASK_DELETED' },
-  }, { multi: true }).exec();
+  }, { userId: 1, _id: 1 }).exec();
+
+  userTasks.forEach(async userTask => {
+    const assignedUser = await User.findOne({ _id: userTask.userId }, 'notifications tasksOrder').exec();
+
+    let notificationIndex = assignedUser.notifications.findIndex(notification => notification
+      && notification.type === 'GROUP_TASK_ASSIGNED'
+      && notification.data && notification.data.taskId === task._id);
+
+    if (notificationIndex !== -1) {
+      assignedUser.notifications.splice(notificationIndex, 1);
+    }
+
+    notificationIndex = assignedUser.notifications.findIndex(notification => notification
+      && notification.type === 'GROUP_TASK_NEEDS_WORK'
+      && notification.data && notification.data.task
+      && notification.data.task.id === userTask._id);
+
+    if (notificationIndex !== -1) {
+      assignedUser.notifications.splice(notificationIndex, 1);
+    }
+
+    notificationIndex = assignedUser.notifications.findIndex(notification => notification
+      && notification.type === 'GROUP_TASK_APPROVED'
+      && notification.data && notification.data.task
+      && notification.data.task._id === userTask._id);
+
+    if (notificationIndex !== -1) {
+      assignedUser.notifications.splice(notificationIndex, 1);
+    }
+
+    await Tasks.Task.remove({ _id: userTask._id });
+    removeFromArray(assignedUser.tasksOrder[`${task.type}s`], userTask._id);
+    removalPromises.push(assignedUser.save());
+  });
 
   // Get Managers
   const managerIds = Object.keys(group.managers);
@@ -1648,14 +1668,15 @@ schema.methods.removeTask = async function groupRemoveTask (task) {
   const managers = await User.find({ _id: managerIds }, 'notifications').exec(); // Use this method so we can get access to notifications
 
   // Remove old notifications
-  const removalPromises = [];
   managers.forEach(manager => {
-    const notificationIndex = manager.notifications.findIndex(notification => notification && notification.data && notification.data.groupTaskId === task._id && notification.type === 'GROUP_TASK_APPROVAL');
+    const notificationIndex = manager.notifications.findIndex(notification => notification
+      && notification.data && notification.data.groupTaskId === task._id
+      && notification.type === 'GROUP_TASK_APPROVAL');
 
     if (notificationIndex !== -1) {
       manager.notifications.splice(notificationIndex, 1);
-      removalPromises.push(manager.save());
     }
+    removalPromises.push(manager.save());
   });
 
   removeFromArray(group.tasksOrder[`${task.type}s`], task._id);