[ENG-2771] Unencode special characters in Registries Custom Metadata (#1195)

* Add helper to fix strings in the templates

* Add integration test for fix-string helper

Co-authored-by: Yuhuai Liu <yuhuai@cos.io>

Author: brianjgeiger

lib/app-components/addon/helpers/fix-string.ts

@@ -0,0 +1,8 @@
+import Helper from '@ember/component/helper';
+import fixSpecialChars from 'ember-osf-web/utils/fix-special-char';
+
+export default class FixString extends Helper {
+    compute([textToFix]: [string]): string {
+        return fixSpecialChars(textToFix);
+    }
+}

lib/app-components/app/helpers/fix-string.js

@@ -0,0 +1 @@
+export { default } from 'app-components/helpers/fix-string';

lib/osf-components/addon/components/provider-metadata-display/template.hbs

@@ -12,6 +12,6 @@
         data-test-registration-provider-metadata-field-value={{@field.field_name}}
         local-class='ProviderMetadataValue'
     >
-        {{@field.field_value}}
+        {{fix-string @field.field_value}}
     </span>
 </div>

tests/engines/app-components/integration/helpers/fix-string-test.ts

@@ -0,0 +1,16 @@
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupEngineRenderingTest } from 'ember-osf-web/tests/helpers/engines';
+import { module, test } from 'qunit';
+
+module('Integration | Helper | fix-string', hooks => {
+    setupEngineRenderingTest(hooks, 'registries');
+
+    test('it renders', async function(assert) {
+        await render(hbs`
+            {{fix-string 'Unchanging < & >'}}
+        `);
+
+        assert.dom(this.element).hasText('Unchanging < & >');
+    });
+});

tests/engines/registries/acceptance/overview/overview-test.ts

@@ -461,7 +461,7 @@ module('Registries | Acceptance | overview.overview', hooks => {
             provider: server.schema.registrationProviders.find('osf'),
             providerSpecificMetadata: [
                 { field_name: 'Field 1', field_value: '' },
-                { field_name: 'Field 2', field_value: 'Value 2' },
+                { field_name: 'Field 2', field_value: 'Value 2 < & >' },
             ],
         });
         const regTwo = server.create('registration', {
@@ -496,7 +496,7 @@ module('Registries | Acceptance | overview.overview', hooks => {
         assert.dom('[data-test-registration-provider-metadata-wrapper="Field 2"]')
             .isVisible('Non moderator can see the field 2 display component');
         assert.dom('[data-test-registration-provider-metadata-field-value="Field 2"')
-            .containsText('Value 2', 'Non-moderator field two has the correct value');
+            .containsText('Value 2 < & >', 'Non-moderator field two has the correct value');
 
         await visit(`/${regTwo.id}/`);
         assert.dom('[data-test-edit-button="metadata"]').isVisible('Moderator can edit provider metadata');