Feature: Add Graph toolkit tab #452

thewahome · 2020-03-23T09:23:29Z

Overview

Adds a graph toolkit iframe that gets the toolkits from the graph toolkit website.

Fixes #359

Demo

With toolkit

Without toolkit

Notes

Queries supported so far:

'/me/planner/tasks'
'/me'
'/me/people'
'/me/calendarview\?startdatetime=([^/?]+)&enddatetime=([^/?]+)'
'/me/photo/\$value'

Displays a blue dot on supported queries

Note the escaped special characters in the last two queries supported.

Testing Instructions

Select a query to run
Click the Graph toolkit tab
View the interactive toolkit and the code snippet associated

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx

src/messages/GE.json

src/app/views/query-response/graph-toolkit/templates.json

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx

nmetulev · 2020-03-23T15:22:33Z

cc/ @beth-panx and @elisenyang

Shjokie

The code iframe seems cut short on the right, see the screenshot below:

And the i frames seems off the natural UI of Graph Explorer. It would be great to have the back ground of the code iframe consistent with the Light theme of Graph Explorer.

Also increase the font size of the words and change the wording of the link to take you to mgt to:

Open this example in Graph Toolkit Playground

thewahome · 2020-03-26T21:01:13Z

@bettirosengugi the iframe absorbs the width of the screen. And the contents of the iframe absorb the width of the iframe. Thus the code snippet is not actually short, it has responded to the width of the device that is holding it. Notice the horizontal scrollbar at the bottom

@nmetulev do you have any plans to roll out the toolkit iframe with theming to support @bettirosengugi 's insights?

nmetulev · 2020-03-26T22:49:01Z

I just created a PR to change the default theme to light theme: microsoftgraph/microsoft-graph-toolkit#350

Re: theming, it's on the roadmap (microsoftgraph/microsoft-graph-toolkit#345), but not likely in the next few months

Shjokie · 2020-03-27T21:25:11Z

@elisenyang @nmetulev @thewahome

Laura also recommended that we change the name of the tab from "Graph Toolkit" to just "Toolkit component".

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx

thewahome · 2020-04-20T16:30:36Z

This will be put on hold till the graph toolkit team get the privacy review approvals.

nmetulev

LGTM! CC @beth-panx and @elisenyang for their review

beth-panx · 2020-09-01T21:33:52Z

Super excited for this to ship! 👏🏼

* chore(release): 4.1.4 * add 4.1.4 build files * chore(release): 4.1.5 * add version 4.1.5 build files * fix copy paste failure when query bar is empty * HB of localized GE.jsons (#660) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * ci: add Azure Static Web Apps workflow file on-behalf-of: @Azure opensource@microsoft.com * change multiline property * remove main tag * Fix: sovereign clouds metadata (#676) * fix crashing when fetching soverign metadata * remove dead code * add comment to explain why only the first value is taken * Feature: Add Graph toolkit tab (#452) * create graph toolkit views * add localisation for missing graph toolkit * move implementation to json file and use succinct code * display open in mgtdev message and change missing toolkit text * adds source to example url * add new examples. move file to root of project * updates icon in code snippet * fixes messaging changes requested * removes unnecessary period * display blue dot on supported queries * add space to 'no toolkit' messaging * display text and icon in mobile view * Feature: History items ttl (#677) * show history items younger than 30 days, remove the rest * change terminology to expiry * flip expiry check * Fix: add fallback texts to placeholder text (#690) * create function to provide fallback texts for placeholder texts * display object value * add fallback text translator to pivot items * Localize tooltip message * add render details header function * add tooltip on 'admin consent required' header * remove unnecessary white space * add translate message function * add tooltip on permissions panel * Fix: remove unnecessary code snippets tab (#695) * Task: update azure pipeline (#691) * create drop files and version number variable * remove publish code coverage results * remove conditions when publishing artifacts * temporarily pause reporting pipeline failure * change to ubuntu-latest * display sources directory * Change to default working directory * reset to build sources directory * pause deployment * vs2017-win2016 * remove set version number * temporarily pause the notification task * change vmImage * fix merge conflicts * add build id * remove name from pipeline * comment deployment steps * remove name from build * add test coverage back to pipeline * remove build folder from source code * add build folder to .gitignore * skip tag creation, change version script * remove condition so that there is always a build folder * disable unwanted steps * adds triggers and filters to the steps * split pipeline to two jobs * add display name * rename job id * add job dependency on previous task * move publishing tasks to publishing job * run npm install before publish * add date to run name * remove source branch from name * publish code coverage results * remove publish code coverage task * change position of setversion number; add condition * update version to latest * remove disabled tasks * Task: HandBack of localized GE.jsons (#698) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * Task: Reduce padding/spacing on request header (#696) * remove excess padding * remove styling * remove break * chore(release): 4.1.7 Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> Co-authored-by: Azure Static Web Apps <opensource@microsoft.com> Co-authored-by: Elinor <ekaguongo@gmail.com>

@sebastienlevert

* package.json * chore(release): 4.1.4 * add 4.1.4 build files * chore(release): 4.1.5 * add version 4.1.5 build files * fix copy paste failure when query bar is empty * HB of localized GE.jsons (#660) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * ci: add Azure Static Web Apps workflow file on-behalf-of: @Azure opensource@microsoft.com * change multiline property * remove main tag * Fix: sovereign clouds metadata (#676) * fix crashing when fetching soverign metadata * remove dead code * add comment to explain why only the first value is taken * Feature: Add Graph toolkit tab (#452) * create graph toolkit views * add localisation for missing graph toolkit * move implementation to json file and use succinct code * display open in mgtdev message and change missing toolkit text * adds source to example url * add new examples. move file to root of project * updates icon in code snippet * fixes messaging changes requested * removes unnecessary period * display blue dot on supported queries * add space to 'no toolkit' messaging * display text and icon in mobile view * Feature: History items ttl (#677) * show history items younger than 30 days, remove the rest * change terminology to expiry * flip expiry check * Fix: add fallback texts to placeholder text (#690) * create function to provide fallback texts for placeholder texts * display object value * add fallback text translator to pivot items * Localize tooltip message * add render details header function * add tooltip on 'admin consent required' header * remove unnecessary white space * add translate message function * add tooltip on permissions panel * Fix: remove unnecessary code snippets tab (#695) * Task: update azure pipeline (#691) * create drop files and version number variable * remove publish code coverage results * remove conditions when publishing artifacts * temporarily pause reporting pipeline failure * change to ubuntu-latest * display sources directory * Change to default working directory * reset to build sources directory * pause deployment * vs2017-win2016 * remove set version number * temporarily pause the notification task * change vmImage * fix merge conflicts * add build id * remove name from pipeline * comment deployment steps * remove name from build * add test coverage back to pipeline * remove build folder from source code * add build folder to .gitignore * skip tag creation, change version script * remove condition so that there is always a build folder * disable unwanted steps * adds triggers and filters to the steps * split pipeline to two jobs * add display name * rename job id * add job dependency on previous task * move publishing tasks to publishing job * run npm install before publish * add date to run name * remove source branch from name * publish code coverage results * remove publish code coverage task * change position of setversion number; add condition * update version to latest * remove disabled tasks * Task: HandBack of localized GE.jsons (#698) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * Task: Reduce padding/spacing on request header (#696) * remove excess padding * remove styling * remove break * Release: sept 2020 (#701) * Release: july 2020 2 (#650) * chore(release): 4.1.5 * add version 4.1.5 build files * Release: august 2020 (#662) * chore(release): 4.1.4 * add 4.1.4 build files * chore(release): 4.1.5 * add version 4.1.5 build files * fix copy paste failure when query bar is empty * HB of localized GE.jsons (#660) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * chore(release): 4.1.6 * create 4.1.6 build files Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * chore(release): 4.1.7 Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * Task: removes depracated setConsent method (#703) * Task: Change adaptive cards message (#704) * remove excess padding * remove styling * remove break * Change adaptive card message * format localized string * add label styles * refactor code * capitalize words * add query status check * rename labelStyles property * Telemetry for Graph Explorer usage (#672) * Capture telemetry data for actions on History tab * Capture telemetry data for actions on Sample Queries tab * Capture telemetry data for theme change actions * Capture telemetry data for office dev program link click * Capture telemetry data for Graph API version change event * Capture telemetry data for Adaptive Cards tab click * Capture telemetry data for Code Snippets click and copy events * Update .gitignore file * Remove QueryUrl from history item telemetry data * Capture old version and new version telemetry data on version change * Update query version comparison to strict equality comparison * Capture telemetry data for clicking history tab on header click * Capture telemetry data for Permissions and Auth tab click events * Fix imports ordering * Add telemetry for tabs in query response section * Rename RUN_QUERY_EVENT * Update how we send telemetry data for custom events * Add property to telemetry data to report if a user was authenitcated or not during an event * Update method for collecting telemetry data for request tabs * Update azure-pipelines to use a different AppInsights instrumentation key for staging * Track component usage for permissions, auth, snippets and history tabs * Provide name of component for AppInsights React component tracking * Use interface as type instead of any when tracking documentation link click event * Enable telemetry * Rename telemetry custom property from QueryUrl to QuerySignature * Disable telemetry if AppInsights instrumentation key does not exist * HB of localized GE.jsons (#727) * HB of localized GE.jsons Co-authored-by: Charles Wahome <thewahome.cw@gmail.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * Task: display history items ttl message (#733) * Fix: create onenote page (#708) * display the page content in the request body * fix linting errors * add appropriate content type header * remove filter for content-type header * refine comment for clarity * upgrade to the latest javascript sdk * remove content type header checks * simplify json content check * refactor code to be concise * Format code on save and paste * Fix: breaking change with the adaptive cards templating library (#735) * update adaptive card templating library * fix breaking change * fix linting error * fix formatting * HB of localized GE.jsons (#742) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * Release: October 2020 (#748) * chore(release): 4.1.9 (#716) * Feature: History items ttl (#677) * Fix: add fallback texts to placeholder text (#690) * Task: Reduce padding/spacing on request header (#696) * Task: removes depracated setConsent method (#703) * chore(release): 4.1.9 Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> Co-authored-by: Azure Static Web Apps <opensource@microsoft.com> Co-authored-by: Elinor <ekaguongo@gmail.com> * chore(release): 4.1.10 Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> Co-authored-by: Azure Static Web Apps <opensource@microsoft.com> Co-authored-by: Elinor <ekaguongo@gmail.com> * Fix: duplicate aria labels (#752) * Update aria-label * localize aria labels * HB of localized GE.jsons (#757) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * Adding JWT.ms support in the Access Token view (#754) * Adding JWT.ms support in the Access Token view * Adding translate method * Removing the translated keys. * format code to pass linting check Authored-by: Sebastien <@sebastienlevert> Co-authored-by: Elinor <ekaguongo@gmail.com> * descriptive message after pop-up blocked in browser (#762) * descriptive message after pop-up blocked in browser * fix lint * add message translation * Fix: focus order (#763) * restructure pivot items * add 'expand' and 'share' options as pivot items * add pivot items styling * Remove color * Add tooltips * remove unused function * add translateMessage function * HB of localized GE.jsons (#767) Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> * chore(release): 4.1.11 Co-authored-by: jobala <japhethobalak@gmail.com> Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> Co-authored-by: Azure Static Web Apps <opensource@microsoft.com> Co-authored-by: Elinor <ekaguongo@gmail.com> Co-authored-by: Millicent Achieng <achieng.milli@gmail.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> Co-authored-by: Ezrqn Kemboi <ezrqnkemboi@gmail.com>

thewahome added 2 commits March 23, 2020 12:15

create graph toolkit views

a05e2eb

add localisation for missing graph toolkit

c81b5b7

thewahome requested review from nmetulev, Shjokie and jobala March 23, 2020 09:23

jobala suggested changes Mar 23, 2020

View reviewed changes

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx Outdated Show resolved Hide resolved

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx Outdated Show resolved Hide resolved

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx Show resolved Hide resolved

move implementation to json file and use succinct code

cd8ba9f

nmetulev reviewed Mar 23, 2020

View reviewed changes

src/messages/GE.json Outdated Show resolved Hide resolved

src/app/views/query-response/graph-toolkit/templates.json Outdated Show resolved Hide resolved

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx Outdated Show resolved Hide resolved

thewahome added 3 commits March 24, 2020 13:22

display open in mgtdev message and change missing toolkit text

dbedc22

adds source to example url

f15d8ed

add new examples. move file to root of project

7c37fca

Shjokie suggested changes Mar 26, 2020

View reviewed changes

nmetulev mentioned this pull request Mar 26, 2020

mgt.dev - changed monaco editor to light theme microsoftgraph/microsoft-graph-toolkit#350

Merged

Shjokie requested a review from ddyett March 27, 2020 19:42

ddyett reviewed Mar 30, 2020

View reviewed changes

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx Outdated Show resolved Hide resolved

ddyett reviewed Mar 30, 2020

View reviewed changes

src/app/views/query-response/graph-toolkit/GraphToolkit.tsx Show resolved Hide resolved

thewahome added 5 commits April 7, 2020 11:23

brings in changes from dev

161b159

updates icon in code snippet

6a355b5

fixes messaging changes requested

8ab141e

bring in changes from latest dev 4.1.0

67b928a

removes unnecessary period

d5c6ff4

Shjokie approved these changes Apr 15, 2020

View reviewed changes

Shjokie requested a review from jobala April 15, 2020 14:05

thewahome added the status:on-hold An issue/PR that we are yet to work on and can't make a decision on when to move forward label Apr 20, 2020

Shjokie linked an issue Jul 8, 2020 that may be closed by this pull request

Use Graph toolkit for the sign in button #91

Closed

elisenyang mentioned this pull request Jul 10, 2020

Add MGT tab to Graph Explorer microsoftgraph/microsoft-graph-toolkit#547

Closed

9 tasks

Shjokie removed the status:on-hold An issue/PR that we are yet to work on and can't make a decision on when to move forward label Aug 31, 2020

Shjokie requested review from ddyett and nmetulev August 31, 2020 12:35

nmetulev approved these changes Aug 31, 2020

View reviewed changes

thewahome added 4 commits September 2, 2020 18:02

Merge branch 'dev' into feature/graph-toolkit-tab

d35f2e2

display blue dot on supported queries

f6925ab

add space to 'no toolkit' messaging

ba016e0

display text and icon in mobile view

f3a4fa1

thewahome merged commit 653e716 into dev Sep 8, 2020

thewahome deleted the feature/graph-toolkit-tab branch February 17, 2021 11:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Add Graph toolkit tab #452

Feature: Add Graph toolkit tab #452

thewahome commented Mar 23, 2020 •

edited

Loading

nmetulev commented Mar 23, 2020 •

edited

Loading

Shjokie left a comment •

edited

Loading

thewahome commented Mar 26, 2020

nmetulev commented Mar 26, 2020

Shjokie commented Mar 27, 2020

thewahome commented Apr 20, 2020

nmetulev left a comment

beth-panx commented Sep 1, 2020

Feature: Add Graph toolkit tab #452

Feature: Add Graph toolkit tab #452

Conversation

thewahome commented Mar 23, 2020 • edited Loading

Overview

Demo

Notes

Testing Instructions

nmetulev commented Mar 23, 2020 • edited Loading

Shjokie left a comment • edited Loading

Choose a reason for hiding this comment

thewahome commented Mar 26, 2020

nmetulev commented Mar 26, 2020

Shjokie commented Mar 27, 2020

thewahome commented Apr 20, 2020

nmetulev left a comment

Choose a reason for hiding this comment

beth-panx commented Sep 1, 2020

thewahome commented Mar 23, 2020 •

edited

Loading

nmetulev commented Mar 23, 2020 •

edited

Loading

Shjokie left a comment •

edited

Loading