[UI] Unify export functions into one component

[senwang86]

Summany

• Put the export functionality into one components

Before

After

[lihebi]

I like the original approach that makes each button a separate React component.

• The original exportSVG component is short and easy to understand.
• Now that you embed exportSVG into the long exportJupyter component, you lose the easy-to-understand SVG logic, and also makes the Jupyter logic even harder to read.

[lihebi]

If we want to reuse code, we could abstract the common logic into a helper function (e.g., the downloadLink function), and use it in both components.

In React, we compose components, not embed components.

Do this (compose):

<Parent>
  <Child1/>
  <Child2/>
</Parent>

Not this (embed):

<Parent>
  <Child1AndChild2/>
</Parent>

[lihebi]

I think the right refactoring is to extract Jupyter export logic into a normal TS function and put it in a utils.ts file.

[lihebi]

The Card is too complex. Let's use Stack of Buttons like the original one:

<Stack spacing={1}>
      <ExportJupyterNB />
      <ExportSVG />
</Stack>

[lihebi]

Thanks!