Installation wizard

Webmasters are not very comfortable with adding Embedded Genesys to their pages and usually end up with invalid javascript and HTML.

This ticket adds the Embedded Genesys Installation wizard to the static Gitlab page of ui-embedded under https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/install URL.

We need a new entrypoint in webpack that will package the TS + HTML code for a new install.html page.

The working of this wizard is the similar to that of https://ggce.genesys-pgr.org/docs/install/docker/: it prompts the user to provide basic input about their configuration and generates the html that is then copy-pasted into the CMS.

Configuration questions

1. Page location: What is the URL of the website where Embedded Genesys will be deployed (<input type="text", valid URL)
2. Institute name: What is the name of your institute? (text, required)
3. INSTCODE: What is the FAO Institute Code of your institute? (text, regex ^[A-Z]{3}\d{3,4}$)
4. Block with instructions: You can specify more than one INSTCODE.
5. Block with instructions: If you don't have this information, please check https://www.genesys-pgr.org/partners or <a href="mailto:helpdesk@genesys-pgr.org?subject=What is the institute code&body=I want to embed Genesys for {instituteName} on {url}">send us a message</a>.
6. Genesys Client ID: (text)
7. Genesys Client Secret: (text)
8. Block with instructions: If you don't have this information, please <a href="mailto:helpdesk+embed@genesys-pgr.org?subject=Embed&body=I want to embed Genesys on {url} for {instCode??instituteName}">send us a message</a>.
9. Version: Which version of Embedded Genesys do you want to use (<input type="radio" group="version" for latest options listed at https://www.npmjs.com/package/@genesys-pgr/ui-embedded?activeTab=versions)
10. ... other configuration options (see below)

After all the configuration questions, there's a block with the resulting HTML+JS code. It is updated immediately when any setting is changed. This code needs to have a Copy to clipboard button.

Other configuration options

https://www.npmjs.com/package/@genesys-pgr/ui-embedded#configuration-options lists all options available.

Property	Default	Description
subsets	true	Display the list of subsets on accession details page
datasets	true	Display the list of C&E datasets on accession details page
pdci	true	Display passport data completeness index (PDCI) information on accession details page
filters	{...}	Allows for disabling individual filters on the Accession list page

The Description of the option becomes the <label and it controls a specific configuration option.

1. For example, Display the list of subsets on accession details page is a boolean that is displayed as a <input type="checkbox".
2. string type configuration options become <input type="text"

Property	Default	Description
apiUrl	sandbox	Do you want to connect to Genesys Production or Test environment?

The "Do you want to connect to Genesys Production or Test environment?" is a <input type="radio" group="apiUrl" of:

• Production Genesys https://www.genesys-pgr.org
• Genesys test environment https://sandbox.genesys-pgr.org

Remebering user's settings

All inputs entered by the user are stored to localStorage and automatically loaded when they return to the page.

We need a The data entered here is stored only in your browser. disclaimer paragraph.