Update knobs to controls in storybook: MetamaskTemplateRenderer

[georgewrmarshall]

Description

Currently there are a few storybook stories still using knobs in our storybook files *.stories.js. knobs have been deprecated in favour of controls. It would be great to migrate these last stories from knobs to controls.

This issue is to migrate the ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js from knobs to controls

Requirements

If you would like to take on this issue please comment but before asking to take on this issue there are a few requirements that will help complete this task:

• Get storybook up and running yarn storybook
• Some knowledge of storybook is not required but would be beneficial for this task. storybook docs here

Technical Details

• Migrate knobs to controls

Acceptance Criteria

• knobs have been migrated to controls for listed story
• Take Before / After screenshots of the knobs and new controls and attach to the PR
• Tag @georgewrmarshall, @garrettbear, or @NidhiKJha in the PR to review

[dj-pundir]

Hey @georgewrmarshall I would like to work on this assignment. Could you please assign this to me? Thanks in advance!!!

[georgewrmarshall]

Assigned thanks @dpundir-vertex!

[dj-pundir]

Thanks @georgewrmarshall to assign me this.

I have a query while checking the storyboard for MetamaskTemplateRenderer --> "With Invalid Element" Currently It is showing me following:

I understand why it is showing because we are passing element: 'Unsafe', then it goes to MetaMaskTemplateRenderer component where each section is processed. In processing first we check if the section's element is exist in the component safeComponentList or not. Here is the possible elements list:

Is that the expected behavior when we change Knobs to Controls? Actually i am confused by seeing the error page. If that's fine we can go ahead because its used for Invalid element by the way. So it should show some error somehow.

[georgewrmarshall]

Hey @dj-pundir, I'm actually not sure why the knobs implementation is working. It should also error. I understand the intention of the story but I don't think it adds much value to show the thrown error. I think we could just remove the WithInvalidElement story altogether?

[georgewrmarshall]

Also I'm curious what VS Code plugin or eslint settings you have to show these deprecated components with a strike through? I might suggest adding it to the repo it would be very helpful for an initiative to improve DX I'd like to complete