[ENG-8363] Add resource type helper (#2598)

* add helper

* moar fix

* add aria label translation string

Author: adlius

lib/osf-components/addon/components/addons-service/configured-addon-edit/component.ts

@@ -36,6 +36,7 @@ export default class ConfiguredAddonEdit extends Component<Args> {
     @tracked selectedResourceType = '';
     @tracked isWBGoogleDrive = false;
     @tracked accountId!: string;
+    @tracked isResourceTypeDialogOpen = false;
 
     originalName = this.displayName;
     originalRootFolder = this.selectedFolder;

lib/osf-components/addon/components/addons-service/configured-addon-edit/template.hbs

@@ -169,6 +169,13 @@
     {{#if this.isLinkAddon}}
         <label>
             {{t 'addons.configure.resource-type'}}
+            <Button
+                aria-label={{t 'addons.configure.resource-type-helper-aria-label'}}
+                @layout='fake-link'
+                {{on 'click' (fn (mut this.isResourceTypeDialogOpen) true)}}
+            >
+                <FaIcon @icon='question-circle' />
+            </Button>
             <PowerSelect
                 @options={{@supportedResourceTypes}}
                 @selected={{this.selectedResourceType}}
@@ -200,3 +207,27 @@
         </Button>
     </div>
 </div>
+
+<OsfDialog
+    @isOpen={{this.isResourceTypeDialogOpen}}
+    @onClose={{action (mut this.isResourceTypeDialogOpen) false}}
+    @closeOnOutsideClick={{true}}
+    as |dialog|
+>
+    <dialog.heading>
+        {{t 'addons.configure.resource-type-helper-header'}}
+    </dialog.heading>
+    <dialog.main tabindex='0'>
+        {{t 'addons.configure.resource-type-helper-body'
+            htmlSafe=true
+        }}
+    </dialog.main>
+    <dialog.footer>
+        <Button
+            @type='secondary'
+            {{on 'click' dialog.close}}
+        >
+            {{t 'general.close'}}
+        </Button>
+    </dialog.footer>
+</OsfDialog>

translations/en-us.yml

@@ -376,6 +376,9 @@ addons:
         heading: 'Configure {providerName}'
         resource-type: 'Resource type'
         resource-type-placeholder: 'Choose a resource type'
+        resource-type-helper-aria-label: 'More information about resource types'
+        resource-type-helper-header: 'About resource type'
+        resource-type-helper-body: 'This helps others understand what kind of material you''re sharing. Choosing the right resource type makes it easier for search engines and research tools to find and share your work—both on OSF and in other scholarly indexes.<br><br>For example, selecting <b>“Dataset”</b> tells tools and repositories that your files are research data, which helps your work appear in places that specialize in datasets.<br><br>Pick the option that best describes most of the files you''re linking.<br><br>OSF uses resource types from <b>DataCite</b>, a standard used by many research platforms. <a target="_blank" rel="noopener noreferrer" href="https://help.osf.io/article/570-resource-types-in-osf">(Learn more)</a>'
         display-name: 'Display name'
         selected-folder: 'Selected folder:'
         linked-item: 'Linked item:'