fix: In chart gallery thumbnail is rendered in case of no example in #16707

[sivasathyaseeelan]

SUMMARY

This PR solves the issue mentioned in #16707 . I have made VizTypeGallery component to render the thumbnail image for selected chart for which example images are not available.

BEFORE

Screencast.from.05-01-24.03.39.58.PM.IST.webm

AFTER

Screencast.from.05-01-24.03.41.23.PM.IST.webm

TESTING INSTRUCTIONS

Kindly go to http://localhost:9000/chart/add and please select any chart so that you can be able to see example images of selected chart

ADDITIONAL INFORMATION

• Has associated issue: Fixes [Gallery] Some chart type in gallery do not have example #16707
• 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

All modified and coverable lines are covered by tests ✅

Comparison is base (3a7d76c) 69.15% compared to head (66790e3) 69.16%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #26415   +/-   ##
=======================================
  Coverage   69.15%   69.16%           
=======================================
  Files        1947     1947           
  Lines       76010    76009    -1     
  Branches     8481     8481           
=======================================
+ Hits        52565    52568    +3     
+ Misses      21264    21261    -3     
+ Partials     2181     2180    -1     

Flag	Coverage Δ
javascript	56.49% <100.00%> (+<0.01%)	⬆️

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

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

[michael-s-molina]

Maybe this looks more readable?

<Examples>
  {(
    selectedVizMetadata?.exampleGallery || [
      {
        url: selectedVizMetadata.thumbnail,
        caption: selectedVizMetadata.name,
      },
    ]
  ).map(example => (
    <img
      key={example.url}
      src={example.url}
      alt={example.caption}
      title={example.caption}
    />
  ))}
</Examples>

[sivasathyaseeelan]

Hi @michael-s-molina, The above piece of code which you have mentioned doesn't render the thumbnail image in case of no exampleGallery in my local machine.

But,

           <Examples>
              {(selectedVizMetadata?.exampleGallery?.length
                ? selectedVizMetadata.exampleGallery
                : [
                    {
                      url: selectedVizMetadata?.thumbnail,
                      caption: selectedVizMetadata?.name,
                    },
                  ]
              ).map(example => (
                <img
                  key={example.url}
                  src={example.url}
                  alt={example.caption}
                  title={example.caption}
                />
              ))}
            </Examples>

this code works.

Can I apply this piece of code to modify this PR?

[michael-s-molina]

👍🏼

[michael-s-molina]

LGTM. Thanks for the improvement @sivasathyaseeelan!