chore: update to paragon 19.1.0

Replace our custom Tour component with the drop-in ProductTour
replacement in paragon.
This commit is contained in:
Michael Terry
2022-02-25 16:33:03 -05:00
committed by Michael Terry
parent 7049445969
commit e9f0a658d6
16 changed files with 8 additions and 1242 deletions

View File

@@ -1,32 +0,0 @@
# Tour Structure Decisions
## Compartmentalizing the tour objects
We created the directory `src/tours` in order to organize tours across the MFE. Each tour has its own JSX file where we
define a tour object to be passed to the `<Tour />` component in `<LoadedTabPage />`.
Although each tour is stored in a JSX file, the tour object itself is meant to be an `object` type. Thus, the structure
of each tour object is as follows:
```$xslt
// Note: this is a simplified version of a tour object
const exampleTour = (enabled) => ({
checkpoints: [],
enabled,
tourId: 'exampleTour',
});
```
The reason we use a JSX file rather than a JS file is to allow for use of React components within the objects such as
`<FormattedMessage />`.
## Implementing i18n in tour objects
The `<Tour />` component ingests a single prop called `tours` which expects a list of objects.
Given the structure in which we organized tour objects, there were two considerations in working with i18n:
- You can't injectIntl into something that isn't a React component without considerable adjustments,
so using the familiar `{intl.formatMessage(messages.foo)}` syntax would not be possible.
- You can't return normal objects from a React component, only React elements. I.e. switching these from arrow functions
to React function based components would not be ideal because the `tours` prop expects objects.
### Decision
We chose to use `<FormattedMessage />` directly within the tour objects. We also created shared `<FormattedMessage />`
components inside of `GenericTourFormattedMessages.jsx` for use across the tours.