Allow multiple "Extra Visualisation Section" type Magda UI Plugin Components to be loaded

[t83714]

Allow multiple "Extra Visualisation Section" type Magda UI Plugin Components to be loaded

Background

We currently support loading one "Extra Visualisation Section" type Magda UI Plugin Components with the following interface:

• dataset: ParsedDataset;
• distributionId?: string;
  • Only available when it's mounted on the distribution page

Key points re: currently supported functionalities:

• An Extra Visualisation Section plugin will be mounted on both the dataset page & distribution page.
  • The plugin can detect whether it's mounted on the distribution page by checking the distributionId props
• The plugin component can decide to output null (which will render nothing) after checking dataset metadata
  • By this way, an Extra Visualisation Section plugin can choose to be only enabled for certain formats on certain pages.
• It's recommended to bundle the plugin as UMD bundle as export to global variable MagdaPluginComponentExtraVisualisationSection

Motivation & Proposal

The current API only supports one Extra Visualisation Section plugin to be loaded. However, users might want to load more than one Extra Visualisation Section plugins --- e.g. one plugin for visualising one particular format.

To accommodate that, a new technical solution proposal (backward compatible) is made here:

• the plugin will receive one more property: loadedPluginNames: string[];
  • it will include all names of loaded plugins.
• the plugin will be exported to the global scope MagdaPluginComponentExtraVisualisationSection.xxxx. Here, xxxx is a name to identify the plugin component. e.g. the DAP Image Gallery plugin chooses to export itself to MagdaPluginComponentExtraVisualisationSection.DAPImageGallery.
  • Older version plugins that are exported to the older scope MagdaPluginComponentExtraVisualisationSection will works as well. However, only one plugin will be mounted.
• Magda web client will detect & load all potential Extra Visualisation Section plugins by following the steps below:
  • Check if MagdaPluginComponentExtraVisualisationSection variable in the global scope exists. If not, exit.
  • If yes, check if the variable is a React Component.
  • If it's a react component, we will mount this only single component and exit.
  • if it's not a react component, we will:
    • Go through all object keys and mount all components if the key value is a React Component.
    • For all keys that reference a mount component, we will record as a string[] array and supply to component as loadedPluginNames property.
    • any keys that have non-react component value will be ignored.

[t83714]

closed via PR https://github.com/magda-io/magda/pull/3430