fix(deps): upgrade bootstrap-vue to v2.23.1

What does this MR do?

• Upgrade to bootstrap-vue@2.23.1 and bootstrap@4.6.2.
• Fix various resulting issues in GlTable, GlTableLite, GlFormDate and GlPopover (see commit messages).

History

• Original attempt
• Revert + amended commits for changelog
• Downstream GitLab upgrade
• Downstream GitLab revert of upgrade due to incident
• Revert in GitLab UI due to above

Notes

• I did not cherry-pick 99cb9944 since the fix in that commit was not reverted by !3152 (merged).

GlTable

<div> wrapper rendering

This upstream bootstrap-vue change changed the wrapper <div> element rendering. Here's the before/after:

responsive	stacked	Renders wrapper <div>? bootstrap-vue@2.20.1	Renders wrapper <div>? bootstrap-vue@2.23.1
''	''	❌	✅
''	'sm'	❌	✅
''	true	❌	✅
''	false	✅	✅
'sm'	''	❌	✅
'sm'	'sm'	❌	✅
'sm'	true	❌	✅
'sm'	false	✅	✅
true	''	❌	✅
true	'sm'	❌	✅
true	true	❌	✅
true	false	✅	✅
false	''	❌	❌
false	'sm'	❌	❌
false	true	❌	❌
false	false	❌	❌

The reason this causes breakage is that our GlTable component applies gl-table to the root element of BTable, and our CSS assumes that that class will always be applied to a <table>. Now there are many more cases where that is not correct.

We only need to investigate two types of usage of GlTable, where:

• both responsive and stacked props are used;
  • This case corresponds to the main change in behaviour: these instances will now render with a <div> wrapper where they didn't before.
  • The fix for these is to remove responsive, as previously that had no effect when stacked is given.
  • Uses in GitLab:
    • ee/admin/subscriptions/show/components/subscription_details_history.vue
      • Introduced by gitlab!58660 (merged).
    • ee/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue
      • This is what caused the incident.
• responsive is used but not stacked.
  • This case corresponds to <div> wrappers being rendered previously and now, but now the gl-table class is applied correctly to the <table> rather than the <div>.
  • These probably don't need to be fixed, but it's possible some unnecessary styles could be removed.
  • Uses in GitLab:
    • ~/ci_settings_pipeline_triggers/components/triggers_list.vue
      • Introduced by gitlab!41864 (merged).
    • ee/product_analytics/dashboards/components/visualizations/data_table.vue
      • Introduced by gitlab!105372 (merged).

The other cases correspond to the bottom four rows of the table above, where there's no rendering behaviour change, and <table> was/is the root element.

Here's the script I used to find these cases. One case this script does not help with is where v-bind is used to dynamically provide props. Fortunately, there's only one instance of that in the codebase, and it appears to use stacked but not responsive, so it is not a concern.

Finally, it's worth noting the wrapper <div> is always rendered if the sticky-header prop is truthy, but there appears to be no usage of this in GitLab (surprisingly).

GlFormDate, GlFormGroup

These components' storyshots broke mainly because of https://github.com/twbs/bootstrap/pull/23816 and https://github.com/twbs/bootstrap/pull/32968. See this MR's commit messages for more info.

Screenshots

This is an image diff before/after of the responsive but not stacked case mentioned above:

Here's the diff of how GlFormDate changed:

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • CustomersDot: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
• Color combinations have sufficient contrast.