JWT Decoder show timestamp as a DateTime tooltip

[sergiomontesa]

[jlevier]

I tried looking into this but I could not get the hover to show on the Monaco editor. I see we have this: https://github.com/veler/DevToys/blob/main/src/dev/impl/DevToys.MonacoEditor/ts-helpermethods/otherScriptsToBeOrganized.ts#L11 and just as a preliminary test I hardcoded a call in CodeEditorCore.html:

monaco.languages.registerHoverProvider("json", {
    provideHover: function (model, position) {
        Debug.log("5555555555");
        return {
            range: new monaco.Range(
                1,
                1,
                2,
                5
                // model.getLineCount(),
                // model.getLineMaxColumn(model.getLineCount())
            ),
            contents: [
                { value: "**SOURCE**" },
                { value: "test test 1234"},
            ],
        };
    },
});

I also added "json" as the language type explicitly via

opt["language"] = 'json';

and then checked if monaco.languages.registerHoverProvider exists via

Debug.log(typeof monaco.languages.registerHoverProvider);
Debug.log(monaco.languages.registerHoverProvider.toString());

and indeed it is there. However, nothing I do will produce a hover state. The example they provide is straightforward enough.

I am much less familiar with UWP so I might be missing something obvious. Not sure if you have got this working before, @veler?

[micahmo]

+1000 to this idea. Decoding tokens to look at the dates is such a common operation, and reading the raw timestamp is nearly impossible. This is something jwt.io does, for example.

P.S. It might not be as "pure", but even putting the human-readable date inline in the JSON (maybe a comment?) would help! Could be behind a toggle if most people don't want it.

[veler]

I tried looking into this but I could not get the hover to show on the Monaco editor. I see we have this: https://github.com/veler/DevToys/blob/main/src/dev/impl/DevToys.MonacoEditor/ts-helpermethods/otherScriptsToBeOrganized.ts#L11 and just as a preliminary test I hardcoded a call in CodeEditorCore.html:

monaco.languages.registerHoverProvider("json", {
    provideHover: function (model, position) {
        Debug.log("5555555555");
        return {
            range: new monaco.Range(
                1,
                1,
                2,
                5
                // model.getLineCount(),
                // model.getLineMaxColumn(model.getLineCount())
            ),
            contents: [
                { value: "**SOURCE**" },
                { value: "test test 1234"},
            ],
        };
    },
});

I also added "json" as the language type explicitly via

opt["language"] = 'json';

and then checked if monaco.languages.registerHoverProvider exists via

Debug.log(typeof monaco.languages.registerHoverProvider);
Debug.log(monaco.languages.registerHoverProvider.toString());

and indeed it is there. However, nothing I do will produce a hover state. The example they provide is straightforward enough.

I am much less familiar with UWP so I might be missing something obvious. Not sure if you have got this working before, @veler?

This will likely be easier with DevToys 2.0 because:

1. We're using a more recent version of Monaco (although, not the last one for now).
2. The whole app runs locally in a web-browser, so we have less limitation than in UWP.

Let's wait for DevToys 2.0 to do this?

[jlevier]

Yes, I think that makes sense and was hoping is the case! Thank you - will revisit.

[micahmo]

It might not be as "pure", but even putting the human-readable date inline in the JSON (maybe a comment?) would help!

In the short-term, would a PR that does this be accepted? It's very hacky -- I'm crudely "parsing" the JSON after it's been formatted (since I couldn't find a nice way to insert comments through the standard libraries). But it works and is formatted nicely by Monaco! 😊

https://github.com/micahmo/DevToys/compare/main...feature/jwt-datetimes

[veler]

@btiteux , what do you think of the above?

[micahmo]

Hey all, quick update (and hopeful improvement) over my previous hacky solution. I did find how to enable hovers, and it came down to these lines (which currently disable it).

https://github.com/veler/DevToys/blob/e9528b1193bda1e3f44365e50d2a0c473a5d45dc/src/dev/impl/DevToys/UI/Controls/CodeEditor.xaml.cs#L252-L255

I put together a solution that "works". However, my understanding of the architecture (especially when it gets into Monaco/WebView/JavaScript) is pretty bad. Would @veler or @jlevier be willing to peek at my branch before I formally open a PR?

https://github.com/micahmo/DevToys/compare/main...feature/jwt-datetimes2

EDIT: I went ahead and opened this as a PR: #847