Mgt-get and Template improvements

[nmetulev]

PR Type

• Feature

Description of the changes

This PR introduces new features for both the mgt-get component and our templating implementation. These changes improve the prototyping experience for building UI with the graph.

mgt-get

1. Added the polling-rate attribute. When set to a number of milliseconds, mgt-get will poll the request uri for updates in the defined interval. If using a resource that supports delta queries, polling will always query the delta api. The ui will only update if the data changes.

2. Added the refresh() method to refresh the data manually. By default, the UI will only update if the data changes. Pass true to the method to force the component to update.

3. Added the value template. Use the value template instead of the default template when expecting the response from the graph to contain an array of items - such as messages, files, users, etc. The value template will automatically be repeated for each item in the value array. The value template will also start rendering the items as soon as they are ready and doesn't have to wait for all the items to load (unlike the default template).

Templates

1. Relaxed the requirements for double or triple curly braces. Now both {{expression}} and {{{expression}}} act the same. In addition, expressions in attributes (such as data-for or data-if) now work with or without curly braces.

2. Added support for event and property binding in templates.

   <template>
       <button data-props="{{@click: myEvent, myProp: value}}"></button>
   </template>

   Where myEvent is added as additional context or is passed by the component. Ex:

   document.querySelector('mgt-get').templateContext = {
       myEvent: (e, context, root) => {
           // e - event args
           // context - data context for the template
           // root - root element of the template 
       }
   }

Deprecated MgtBaseComponent.templateConverters

and added MgtBaseComponent.templateContext instead. With support of events in templates, templateContext better represents the function than templateConverters and it avoids adding yet another propertiy.

PR checklist

• Project builds (npm run build) and changes have been tested in supported browsers (including IE11)
• All public classes and methods have been documented
• Added appropriate documentation
• License header has been added to all new source files (npm run setLicense)
• Contains NO breaking changes

Documentation added here: https://github.com/microsoftgraph/microsoft-graph-docs/commit/35096f5da1758f5e75907f15306db95eea7eb869 under the mgt-1.2 branch

[shweaver-MSFT]

This is a pretty big PR. It'll take some time to go through the code and test all the features you added. In the future, I'd love to see smaller PRs for individual features so we can review them separately, as well as clear testing instructions for each.

[nmetulev]

Agree, this would have been easier it was two separate PRs. Luckily, most of the code in the PR is sample code

[shweaver-MSFT]

@nmetulev thanks for walking me through the account creation and permissions setup. The flow you described makes more sense to me now. Please document this in the future to make it easier for other members of the team to quickly and easily provide feedback on the code and approach, without fighting with environment and configuration issues.

I'm not entirely sure what your expectations are for the views, but I see content in all of them, so I'll assume that means passing. Perhaps adding a comment header to each sample would bring clarity on its purpose and expected functionality.

Test results:

• ✔ mgt-get/email
• ✔ mgt-get/grouping-email
• ✔ mgt-get/presence
• ✔ mgt-get/teams
• ❌ agenda-template - See comment for details
• ✔ templates

The rest of the code looks good, but I don't have any real way to tell what changes correlate to which feature. Please be more granular with PRs in the future.

[nmetulev]

Thanks @shweaver-MSFT.

I've moved most samples to storybook so now it should be easier to test and validate. Could you take a look again and make sure you are not running into any issues still?

I didn't move two samples (getTeamsMessages and presence) to storybook because #302 is causing issues with running them, so for now they will remain in the samples folder until issue is resolved.

@beth-panx, FYI, I moved some of the other stories to the templates story just to keep all the templating stories in the same place

[nmetulev]

Documentation added here: https://github.com/microsoftgraph/microsoft-graph-docs/commit/35096f5da1758f5e75907f15306db95eea7eb869 under the mgt-1.2 branch

[shweaver-MSFT]

Looks good :) Love the storybook additions