insights-action-bar

Overview

This library contains the React components for action elements used in the class insights page, contained within a horizontal container:

• Email button - A React component that invokes the legacy email control in a popup to email the class or a subset of selected users.
• Filter Pills - A collection of React components that represent all of the non-action-bar filters that are applied. Can be dismissed with the clear button (X).
• Filter Input (Search Bar) - A React component that returns a filter object containing a comparison function that can be invoked to filter via plain text.

Contracts

The Action-Bar component expects the following properties to be passed down:

• Filters - Object containing all of the currently applied filters. Examples of acceptable filters (langterm and fn fields are mandatory):

{
    "gradeDistributionFilter": {
        "langTerm": "Current grade",
        "barFilters": {
            "bar-50": {
                "upperBound": 50,
                "lowerBound": 0
            },
            "bar-60": {
                "upperBound": 60,
                "lowerBound": 50
            }
        },
        "fn": function(){//apply filter}
    },
    "inactiveStudentsTileKey": {
        "langTerm": "Last visited: More than 7 days ago",
        "fn": function(){//apply filter}
    }
}

• setFilter - Callback function that takes 2 parameters (filterName, filterObject) that - when invoked - should apply a filter action to the application's data source.
  • filterName - Unique String to be used as a key identifying the filter.
  • filterObject - Object with one property ('fn'), which is a function that takes a valid *student object and returns whether the user matches the search criteria.
• removeFilter - Callback function that takes 1 parameter (filterName) that - when invoked - should remove the specified filter from the application's data source.
• data - Object that contains a single property called 'students', which is an array of *student objects.This can be the full dataset or filtered, depending on your usecase.
• context - Object containing the following properties, which contains additional contextual information that controls the email button's functionality.
  • permissions - object that contains permissions relevant to the component:
    • canEmail - boolean - whether the user has permission to use the email tool within the LE.
  • orgUnit - object passed down to any embedded FRA by the ILP that contains context information about the Org/OrgUnit the user is currently within.
    • orgUnitId - integer representing the orgUnit the user is currently within. Used to determine which orgUnit to attempt to envoke the email tool within.

*Appendix

Example student object

{
   "firstName": "string", //User's first name
   "lastName": "string", //User's last name
   "studentId": "string", //User's username (Login name)
   "studentNumber": "string", //User's Org Defined ID
   "userId": "int", //User's D2LID (duplicate)
   "key": "int", //User's D2LID
   "currentGrade": "int", //Aggregated value that represents the users current grade
   "lastCourseAccess": "Moment.js object with LE timezone",
   "predictedGrade": "int", //Aggregated value that predicts the user's final grade (via S3)
   "threadsStarted": "int", //Aggregated count of threads the user has started
   "postsRepliedTo": "int", //Aggregated count of posts the user has replied to
   "fullName": "string", //full name of the student
   "discussions": "int" //value that represents the sort
}