feat: use fluent UI to theme the tasks component (#2150)

* feat: move styling from base and add fluentUI styling

* feat: theme colors changed to fluentUI token colors

* chore: refactor and re-organize element layout to remove unnecessary CSS

* chore: add new strings

* chore: set SVGs and add new ones

* fix: return users when the content is from cache

* chore: add person add svg

* chore: refactor css classes

* fix: add a task and display assign with icon

* fix: layout of icons when adding a new task

* chore: remove commented out code

* fix: strike-through the task title when checked

* fix: import required values for tasks stories

* fix: upgrade arrow and dot options colors

* chore: add assign string

* chore: change the planner icon

* fix: format and style the tasks scss

* chore: remove margin on top of start icon for add button

* refactor: change to class methods to avoid re-creation on renders

* chore: fix DOM layout for Task Options

* fix: update mgt-dot-options to fluent UI elements

* chore: add padding for menu item

* chore: use button for mgt-dot-option dots

* chore: fix failing build

* fix: add calendar and milestone icons

* chore: change title color when you check a task

* Add a css custom property file for tasks

* Add tokens for the header, checkbox, titles, icons and new button

* Add tokens for new btn,header,checkbox,icons and task

* Add header text color, font size and weight

* Add task gap,bg,border and border radius tokens

* Fix types for various props

* Add todo comments for tracking backlog

* Set header default font-size to 16px

* Fix mgt-flyout slot name

* Fix the value for the row gap of tasks

Signed-off-by: Musale Martin <[email protected]>

* Add tokens for styling the tasks area

Signed-off-by: Musale Martin <[email protected]>

* Add dot options button tokens

* Match dot options colors to the task background

* Indicate an update is happening by momentarily freezing a task

* Customize the text field inputs for a new task

* Add tokens for the dropdown and its options

* Add tokens for the assign icon and text

* Remove duplicated variables

* Add props for the add button

* Style the add button props

* Add story for styling the new task add button

* Add props for cancelling adding a new task

* Refactor and style the btn to cancel adding a new task

* Add story with custom styling of the cancel btn

* Add styling for skeleton shimmers

* Add skeleton components for loading effect

* Add space as a key event to add a task on click

* Remove person-card interaction on people

Signed-off-by: Martin Musale <[email protected]>

* Remove focusing on people-picker when you click a person

Signed-off-by: Martin Musale <[email protected]>

* Show the assigned people in the anchor slot of flyout

Signed-off-by: Martin Musale <[email protected]>

* Use avatar skeleton shimmer on the loading task

Signed-off-by: Martin Musale <[email protected]>

* Move the colors into the theme file

Signed-off-by: Martin Musale <[email protected]>

* Refactor Task Source interface methods

* Refactor Planner task source method calls

* Update the graph functions signature to accomodate ne refactors

* Fix linting errors

* Fix todo methods apis in Task sources

* Add skeleton shimmers for the heading

* Add skeleton shimmers for the heading

* Remove renderLoadingTasks tester

* Remove promise wrapper on response

Co-authored-by: Gavin Barron <[email protected]>

* Remove debounce and unnecessary click event

---------

Signed-off-by: Musale Martin <[email protected]>
Signed-off-by: Martin Musale <[email protected]>
Co-authored-by: Nickii Miaro <[email protected]>
Co-authored-by: Gavin Barron <[email protected]>

Author: 3 people

packages/mgt-components/src/components/mgt-tasks/mgt-tasks.graph.planner.ts

@@ -8,10 +8,12 @@
 import { IGraph, prepScopes } from '@microsoft/mgt-element';
 import { PlannerAssignments, PlannerBucket, PlannerPlan, PlannerTask } from '@microsoft/microsoft-graph-types';
 import { CollectionResponse } from '@microsoft/mgt-element';
+import { ITask } from './task-sources';
 
 /**
  * async promise, allows developer to create new Planner task
  *
+ * @param {IGraph} graph
  * @param {(PlannerTask)} newTask
  * @returns {Promise<any>}
  * @memberof Graph
@@ -27,110 +29,91 @@ export const addPlannerTask = async (graph: IGraph, newTask: PlannerTask): Promi
 /**
  * async promise, allows developer to assign people to task
  *
- * @param {string} taskId
- * @param {*} people
- * @param {string} eTag
+ * @param {IGraph} graph
+ * @param {ITask} task
+ * @param {PlannerAssignments} people
  * @returns {Promise<any>}
  * @memberof Graph
  */
 export const assignPeopleToPlannerTask = async (
   graph: IGraph,
-  taskId: string,
-  people: PlannerAssignments,
-  eTag: string
+  task: ITask,
+  people: PlannerAssignments
 ): Promise<void> => {
-  await setPlannerTaskDetails(
-    graph,
-    taskId,
-    {
-      assignments: people
-    },
-    eTag
-  );
+  const details: PlannerTask = { assignments: people, appliedCategories: { category4: true } };
+  await setPlannerTaskDetails(graph, task, details);
 };
 
 /**
  * async promise, allows developer to remove Planner task associated with taskId
  *
- * @param {string} taskId
- * @param {string} eTag
+ * @param {IGraph} graph
+ * @param {ITask} task the task being removed.
  * @returns {Promise<any>}
  * @memberof Graph
  */
-export const removePlannerTask = async (graph: IGraph, taskId: string, eTag: string): Promise<void> => {
+export const removePlannerTask = async (graph: IGraph, task: ITask): Promise<void> => {
   await graph
-    .api(`/planner/tasks/${taskId}`)
+    .api(`/planner/tasks/${task.id}`)
     .header('Cache-Control', 'no-store')
-    .header('If-Match', eTag)
+    .header('If-Match', task.eTag)
     .middlewareOptions(prepScopes('Group.ReadWrite.All'))
     .delete();
 };
 
 /**
  * async promise, allows developer to set a task to complete, associated with taskId
  *
- * @param {string} taskId
- * @param {string} eTag
+ * @param {IGraph} graph
+ * @param {ITask} task
  * @returns {Promise<any>}
  * @memberof Graph
  */
-export const setPlannerTaskComplete = async (graph: IGraph, taskId: string, eTag: string): Promise<void> => {
-  await setPlannerTaskDetails(
-    graph,
-    taskId,
-    {
-      percentComplete: 100
-    },
-    eTag
-  );
+export const setPlannerTaskComplete = async (graph: IGraph, task: ITask): Promise<void> => {
+  await setPlannerTaskDetails(graph, task, { percentComplete: 100 });
 };
 
 /**
  * async promise, allows developer to set a task to incomplete, associated with taskId
  *
- * @param {string} taskId
- * @param {string} eTag
+ * @param {IGraph} graph
+ * @param {ITask} task
  * @returns {Promise<any>}
  * @memberof Graph
  */
-export const setPlannerTaskIncomplete = async (graph: IGraph, taskId: string, eTag: string): Promise<void> => {
-  await setPlannerTaskDetails(
-    graph,
-    taskId,
-    {
-      percentComplete: 0
-    },
-    eTag
-  );
+export const setPlannerTaskIncomplete = async (graph: IGraph, task: ITask): Promise<void> => {
+  await setPlannerTaskDetails(graph, task, { percentComplete: 0 });
 };
 
 /**
  * async promise, allows developer to set details of planner task associated with a taskId
  *
- * @param {string} taskId
- * @param {(PlannerTask)} details
- * @param {string} eTag
+ * @param {IGraph} graph
+ * @param {ITask} task
+ * @param {PlannerTask} details
  * @returns {Promise<any>}
  * @memberof Graph
  */
-export const setPlannerTaskDetails = async (
-  graph: IGraph,
-  taskId: string,
-  details: PlannerTask,
-  eTag: string
-): Promise<any> => {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return await graph
-    .api(`/planner/tasks/${taskId}`)
-    .header('Cache-Control', 'no-store')
-    .middlewareOptions(prepScopes('Group.ReadWrite.All'))
-    .header('If-Match', eTag)
-    .patch(JSON.stringify(details));
+export const setPlannerTaskDetails = async (graph: IGraph, task: ITask, details: PlannerTask): Promise<PlannerTask> => {
+  let response: PlannerTask;
+  try {
+    response = (await graph
+      .api(`/planner/tasks/${task.id}`)
+      .header('Cache-Control', 'no-store')
+      .middlewareOptions(prepScopes('Group.ReadWrite.All'))
+      .header('Prefer', 'return=representation')
+      .header('If-Match', task.eTag)
+      .update(details)) as PlannerTask;
+  } catch (_) {
+    /* empty */
+  }
+  return response;
 };
 
 /**
  * async promise, returns all planner plans associated with the group id
  *
+ * @param {IGraph} graph
  * @param {string} groupId
  * @returns {(Promise<PlannerPlan[]>)}
  * @memberof Graph
@@ -150,6 +133,7 @@ export const getPlansForGroup = async (graph: IGraph, groupId: string): Promise<
 /**
  * async promise, returns a single plan from the Graph associated with the planId
  *
+ * @param {IGraph} graph
  * @param {string} planId
  * @returns {(Promise<PlannerPlan>)}
  * @memberof Graph
@@ -164,6 +148,7 @@ export const getSinglePlannerPlan = async (graph: IGraph, planId: string): Promi
 /**
  * async promise, returns bucket (for tasks) associated with a planId
  *
+ * @param {IGraph} graph
  * @param {string} planId
  * @returns {(Promise<PlannerBucket[]>)}
  * @memberof Graph
@@ -181,6 +166,7 @@ export const getBucketsForPlannerPlan = async (graph: IGraph, planId: string): P
 /**
  * async promise, returns all planner plans associated with the user logged in
  *
+ * @param {IGraph} graph
  * @returns {(Promise<PlannerPlan[]>)}
  * @memberof Graph
  */
@@ -197,6 +183,7 @@ export const getAllMyPlannerPlans = async (graph: IGraph): Promise<PlannerPlan[]
 /**
  * async promise, returns all tasks from planner associated with a bucketId
  *
+ * @param {IGraph} graph
  * @param {string} bucketId
  * @returns {(Promise<PlannerTask[][]>)}
  * @memberof Graph