11583 synced onboarding

[ivanmalagon]

Implements #11583

I've done a big refactor on the layer onboardings. This is because for every corner case that we run into, the amount of CSS and custom code is exploding.

The new way of highlighting panels in these onboardings is via selector: we tell the DOM element that we want to focus on and the onboarding goes there programatically. As you can check in the code, this opens a way for having generic onboardings that are very fast to develop and the code has been cut dramatically, especially CSS.

I've also included the closing of the onboarding when clicking on the highlighted panel.

Acceptance

Since the onboardings have suffered a complete refactor we should pass:

• Original acceptance for layer onboardings -> #11532

• Check synced layers. The onboarding should highlight correctly the different steps besides having a different height than non synced layers.

• Check all possible status of feature edition:

  • No edition available: in layers with an applied analysis, for instance.
  • Edit one type of geometry: in layers with geometry, points for instance.
  • Add any geometry: in empty layers, for instance, you can see three buttons instead of one.

• Check that the onboarding gets closed when clicking the highlighted panel in every possible step.

That's all, folks!

[xavijam]

This is a mania, put clean method at the end of the class, because it is the last method to be used. Don't take it into account if you don't want :).

[xavijam]

Superb change 🇪🇸. Doing acceptance with pleasure.

[xavijam]

@matallo, this will affect us with the geocoding onboarding 💋 .

[xavijam]

Already done the acceptance, perfect man!. Smoother than ever, and working in all cases. Checked in rui account:

• Onboarding for each type of geometry (lines, polygons, points).
• Onboarding for a synced layer.
• Onboarding for a read-only layer.
• Clicking in the highlighed stuff, close the onboarding.
• Checked onboarding with different widgets (time-series, categories,...).