Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: implement renderer 2024 provider #177

Merged
merged 47 commits into from
Jun 13, 2024
Merged

feat: implement renderer 2024 provider #177

merged 47 commits into from
Jun 13, 2024

Conversation

ducpm511
Copy link
Contributor

@ducpm511 ducpm511 commented May 7, 2024

What type of PR is this? (check all applicable)

  • πŸ• Feature
  • πŸ› Bug Fix
  • πŸ“ Documentation Update
  • 🎨 Style
  • πŸ§‘β€πŸ’» Code Refactor
  • πŸ”₯ Performance Improvements
  • βœ… Test
  • πŸ€– Build
  • πŸ” CI
  • πŸ“¦ Chore (Release)
  • ⏩ Revert

Description

This PR is about implementing a new renderer provider and enhancing the UI of demo explorer to display the new templates.

Related Tickets & Documents

https://github.com/gs-gs/fa-ag-trace/issues/430
https://github.com/gs-gs/fa-ag-trace/issues/431

Mobile & Desktop Screenshots/Recordings

new-renderer.mov

Added tests?

  • πŸ‘ yes
  • πŸ™… no, because they aren't needed
  • πŸ™‹ no, because I need help

Added to documentation?

  • πŸ“œ README.md
  • πŸ““ vc-kit doc site
  • πŸ“• storybook
  • πŸ™… no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

huynguyen-hl
huynguyen-hl previously approved these changes May 8, 2024
if (
digestMultibase &&
context &&
typeof context.agent.createVerifiableCredentialOA === 'function'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to check createVerifiableCredentialOA?

/**
* @public
*/
export class WebRenderingTemplate2024 implements IRendererProvider {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on w3c-ccg/vc-render-method#9, the name should be RenderTemplate2024

context?: IRendererContext;
}): Promise<string> {
try {
let svgTemplate: string | any = '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the name of the variable is svgTemplate ? And the type should be only string

return('<p style="color: red">Error: Template hash does not match the provided digest</p>');
}
}
const compiledTemplate = handlebars.compile(svgTemplate);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we check the mediaType to choose the template engine? Like the XML can not use with the handlebars

} from '@vckit/core-types';
import schema from '@vckit/core-types/build/plugin.schema.json' assert { type: 'json' };
import { url } from 'inspector';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where is it used?

@@ -82,30 +83,55 @@ export class Renderer implements IAgentPlugin {

// TODO: There's an issue with W3 availability causing the fetching of some W3 context files to fail. Since we know the exact location of the template we can bypass the JSONLD expansion. This is a temporary workaround.

const render = args.credential.render;
const render = args.credential.render || args.credential.renderMethod;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previous, we had hotfix for the performance issue. So please follow the TODO to handle it right

Comment on lines 108 to 134
return convertToBase64(document);
const responseDocument = {
type: renderMethod['@type'],
renderedTemplate: convertToBase64(document),
id: renderMethod.id,
name: renderMethod.name,
mediaType: renderMethod.mediaType,

};
return responseDocument;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the new output backward compatible with the old WebRenderingTemplate2022?

@huynguyen-hl huynguyen-hl self-requested a review May 9, 2024 14:50
@ducpm511 ducpm511 changed the title Renderer2024 feat: implement renderer 2024 provider May 17, 2024
* next:
  chore: fix the dockerfile to set entrypoint
  chore: update vckit Dockerfile (#184)
  chore: update DockerFile and agent template (#183)
  fix: bug fix for dockerize (#174)
  chore: add cicd for running unit test when creating PR (#180)
  chore: update agent config file (#181)

# Conflicts:
#	pnpm-lock.yaml
namhoang1604
namhoang1604 previously approved these changes Jun 4, 2024
Copy link

github-actions bot commented Jun 10, 2024

Coverage report

St.❔
Category Percentage Covered / Total
🟒 Statements 97.55% 398/408
🟒 Branches 83.08% 54/65
🟒 Functions 92.86% 13/14
🟒 Lines 97.55% 398/408

Test suite run success

21 tests passing in 3 suites.

Report generated by πŸ§ͺjest coverage report action from 25ff963

expect(result.renderedTemplate).toBe('Error: Unsupported media type');
});

it('should return empty string if it failed to fetch template from url', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no it's not. this is to cover the statement in the code(like if-else, try-catch etc...)

expect(result.renderedTemplate).toBe('');
});

it('should return template with style added', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is to reduce the uncovered count for statements as well, so yes, we need this case

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disagree, 2 test cases are mostly the same, please review it again

Comment on lines 45 to 58
if (url) {
try {
const response = await fetch(url);
renderTemplate = await response.text();
} catch (error) {
console.error(`Failed to fetch from ${url}:`, error);
}
}else if (template) {
renderTemplate = template;
}else{
return {
renderedTemplate: 'Error: No template or url provided',
};
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does the condition expression cover the case of the fetching URL is timeout, then using inline template to render?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks @namhoang1604 I've handled this

Comment on lines 116 to 118
expect(result).toStrictEqual(
{"renderedTemplate": "Error: No hash function provided to verify the template"}
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should assert with the error message Error: Template hash does not match the provided digest for this test case. Because the title suggests comparing the template hashed string with the digestMultibase value.

Comment on lines 168 to 173
await expect(async () => {
await renderer.renderCredential({
data,
document,
});
}).rejects.toThrow();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test case is should return an error message if the template is not a string, but the expect is throw error

Comment on lines 176 to 206
it('should return an error message if the template is not provided and there is no default template', async () => {
const data = {
'https://w3id.org/security#digestMultibase': [
{
'@type': 'https://w3id.org/security#multibase',
'@value': '',
},
],
'https://www.w3.org/2018/credentials#renderMethod#mediaQuery': [
{
'@value':
'',
},
],
'https://schema.org/encodingFormat': [
{
'@value': 'text/html',
},
],
'https://www.w3.org/2018/credentials#renderMethod#url': [
{
'@value': '',
},
],
};
const rendererWithoutDefaultTemplate = new RenderTemplate2024();
const result = await rendererWithoutDefaultTemplate.renderCredential({ data, document: {} });
expect(result).toStrictEqual(
{"renderedTemplate": "Error: No template or url provided"}
);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the default template? Please correct the test case

expect(result.renderedTemplate).toBe('');
});

it('should return template with style added', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disagree, 2 test cases are mostly the same, please review it again

Comment on lines 12 to 17
const template = this.extractTemplate(data);
if (!template?.trim()) {
return {
renderedTemplate: 'Error: invalid template provided',
};
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the empty template invalid? Where is the document saying that?

}

private extractTemplate(data: any) {
// const RENDER_METHOD = 'https://www.w3.org/2018/credentials#renderMethod';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove the comment

});

it('should throw an error if the template is not a valid handlebars template', async () => {
// const template = '<p>{{name}}</p>';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove comment

'PGRpdiBzdHlsZT0id2lkdGg6MzAwcHg7IGhlaWdodDoxMDBweDsgYm9yZGVyOiAycHggc29saWQgYmxhY2s7IHRleHQtYWxpZ246Y2VudGVyIj4KICA8ZGl2PgogICAgVGhpcyBCYWNoZWxvciBvZiBTY2llbmNlIGFuZCBBcnRzIGlzIGNvbmZlcnJlZCB0bwogIDwvZGl2PgogIDxzdHJvbmcgc3R5bGU9ImZvbnQtc2l6ZTogMTZweCI+CiAgICBKYW5lIFNtaXRoCiAgPC9zdHJvbmc+CiAgPGRpdj4KICAgIGJ5IEV4YW1wbGUgVW5pdmVyc2l0eS4KICA8L2Rpdj4KPC9kaXY+',
]);
expect(result.documents).toEqual([{
"renderedTemplate": "RXJyb3I6IGludmFsaWQgdGVtcGxhdGUgcHJvdmlkZWQ=",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the result of renderedTemplate is Error: invalid template provided? That should render the template successfully

@@ -115,29 +140,26 @@ describe('Renderer', () => {
).rejects.toThrow('Render method not found in the verifiable credential');
});

it('should throw an error if the verifiable credential contains an invalid render method', async () => {
it('should throw an error with invalid @type and non-default provider', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you edit the important test case?

});

it('should skip render methods without @type or template', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not remove the required test cases

Comment on lines 187 to 233
it('should throw an error with invalid @type and non-default provider', async () => {
it('should throw an error if there is no context file for renderer', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not remove the required test cases, you can add new ones

@namhoang1604 namhoang1604 merged commit 7bcbde3 into next Jun 13, 2024
3 checks passed
@namhoang1604 namhoang1604 deleted the renderer2024 branch June 13, 2024 09:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants