feat: Adds the MetadataBar component

[michael-s-molina]

SUMMARY

Adds the MetadataBar component

The metadata bar component is used to display additional information about an entity. Some of the common applications in Superset are:

• Display the chart’s metadata in Explore to help the user understand what dashboards this chart is added to and get to know the details of the chart
• Display the database’s metadata in a drill to detail modal to help the user understand what data they are looking at while accessing the feature in the dashboard

The metadata bar is by default a static component (besides the links in text). The variations in this component are related to content and entity type as all of the details are predefined in the code and should be specific for each metadata object.

Content types are predefined and consistent across the whole app. This means that they will be displayed and behave in a consistent manner, keeping the same ordering, information formatting, and interactions. For example, the Owner content type will always have the same icon and when hovered it will present who created the entity, its current owners, and when the entity was created.

The Overview page in the Storybook contains the component's documentation with the available content types and their properties.

Configures the Storybook to display MDX content

This will allow developers to create documentation pages about each component using the whole power of MDX. This is one of the improvements we're working on to improve our current design system.

Configures the Storybook to read and display JSDocs
With this configuration, JSDocs added to Typescript metadata will be available in the controls panel in the Storybook. This will reduce the burden when writing stories and promote well-documented components.

@kasiazjc @jess-dillard @eric-briscoe

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-08-15.at.9.11.07.AM.mov

TESTING INSTRUCTIONS

All requirements have associated RTL tests. You can interact with the component in the Storybook.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #21090 (d834952) into master (394d62e) will increase coverage by 0.02%.
The diff coverage is 91.54%.

@@            Coverage Diff             @@
##           master   #21090      +/-   ##
==========================================
+ Coverage   66.27%   66.30%   +0.02%     
==========================================
  Files        1770     1772       +2     
  Lines       67524    67611      +87     
  Branches     7178     7204      +26     
==========================================
+ Hits        44754    44827      +73     
- Misses      20936    20942       +6     
- Partials     1834     1842       +8     

Flag	Coverage Δ
javascript	52.08% <91.54%> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...dashboard/components/AddSliceCard/AddSliceCard.tsx	65.90% <0.00%> (ø)
...ntend/src/components/MetadataBar/ContentConfig.tsx	85.00% <85.00%> (ø)
...rset-frontend/src/components/MetadataBar/index.tsx	96.00% <96.00%> (ø)
...s/plugin-chart-echarts/src/Gauge/transformProps.ts	76.92% <0.00%> (-4.90%)	⬇️
...ashboard/components/BuilderComponentPane/index.tsx	76.47% <0.00%> (-2.48%)	⬇️
...perset-frontend/src/views/CRUD/welcome/Welcome.tsx	74.28% <0.00%> (-0.72%)	⬇️
...end/src/components/Datasource/DatasourceEditor.jsx	65.61% <0.00%> (-0.27%)	⬇️
...frontend/src/dashboard/components/Header/index.jsx	60.29% <0.00%> (ø)
...ns/plugin-chart-echarts/src/Gauge/controlPanel.tsx	66.66% <0.00%> (ø)
...d/components/DashboardBuilder/DashboardBuilder.tsx	75.00% <0.00%> (ø)
... and 2 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[geido]

Some nits. Looks great. Looking to do some manual testing as well

[michael-s-molina]

@geido Thanks for your comments. I did all your suggestions.

[geido]

LGTM!