[#3688] Add a new registration column in variables with summary

[Viicos]

Part of #3688

Styling TBD

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (a8b6440) 96.34% compared to head (1c16984) 96.34%.
Report is 5 commits behind head on master.

❗ Current head 1c16984 differs from pull request most recent head ae9a587. Consider uploading reports for the commit ae9a587 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3894   +/-   ##
=======================================
  Coverage   96.34%   96.34%           
=======================================
  Files         711      711           
  Lines       22252    22252           
  Branches     2554     2554           
=======================================
  Hits        21438    21438           
  Misses        566      566           
  Partials      248      248           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sergei-maertens]

Probably for a separate PR, but we will also need to add this mapping to the static variables tab 😬

[sergei-maertens]

the actions__action class probably doesn't have any effect because there's no .actions parent.

Suggested change

	extraClassname="fa-lg actions__action"
	extraClassname="fa-lg"

[Viicos]

I had to use it or it wouldn't to anything on hover

[sergei-maertens]

it violates the BEM principle, an element cannot exist without being contained inside its parent block.

[Viicos]

I initially wanted to this formVariableConfigured logic inside the component directly:

If the variable wasn't registered, it would return null.

However, doing:

const registrationSummary =
  <SummaryHandler variableKey={variableKey} backendOptions={backend.options} />
);

registrationSummary cannot be checked against null, as it will be a JSX component no matter the return value

---

So I had to an extra formVariableConfigured function to explicitly check for this, not ideal :/

[sergei-maertens]

allowing this for now until the styles are sorted out, but ideally the icons would follow the rest of the UI and be to the left:

<div style={display: 'flex'}>
  <div className="actions actions--vertical">
    <FAIcon extraClassName="actions__action" />
  </div>
  <div>
    ...
  </div>
<div>