feat: Implement currencies formatter for saved metrics (#24517)

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -25,6 +25,9 @@ import Alert from 'src/components/Alert';
 import Badge from 'src/components/Badge';
 import shortid from 'shortid';
 import {
+  css,
+  getCurrencySymbol,
+  ensureIsArray,
   FeatureFlag,
   styled,
   SupersetClient,
@@ -146,6 +149,11 @@ const DATA_TYPES = [
   { value: 'BOOLEAN', label: t('BOOLEAN') },
 ];
 
+const CURRENCY_SYMBOL_POSITION = [
+  { value: 'prefix', label: t('Prefix') },
+  { value: 'suffix', label: t('Suffix') },
+];
+
 const DATASOURCE_TYPES_ARR = [
   { key: 'physical', label: t('Physical (table or view)') },
   { key: 'virtual', label: t('Virtual (SQL)') },
@@ -572,6 +580,43 @@ function OwnersSelector({ datasource, onChange }) {
   );
 }
 
+const CurrencyControlContainer = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+
+    & > :first-child {
+      width: 25%;
+      margin-right: ${theme.gridUnit * 4}px;
+    }
+  `}
+`;
+const CurrencyControl = ({ onChange, value: currency = {}, currencies }) => (
+  <CurrencyControlContainer>
+    <Select
+      ariaLabel={t('Currency prefix or suffix')}
+      options={CURRENCY_SYMBOL_POSITION}
+      placeholder={t('Prefix or suffix')}
+      onChange={symbolPosition => {
+        onChange({ ...currency, symbolPosition });
+      }}
+      value={currency?.symbolPosition}
+      allowClear
+    />
+    <Select
+      ariaLabel={t('Currency symbol')}
+      options={currencies}
+      placeholder={t('Select or type currency symbol')}
+      onChange={symbol => {
+        onChange({ ...currency, symbol });
+      }}
+      value={currency?.symbol}
+      allowClear
+      allowNewOptions
+    />
+  </CurrencyControlContainer>
+);
+
 class DatasourceEditor extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -628,6 +673,12 @@ class DatasourceEditor extends React.PureComponent {
     this.allowEditSource = !isFeatureEnabled(
       FeatureFlag.DISABLE_DATASET_SOURCE_EDIT,
     );
+    this.currencies = ensureIsArray(props.currencies).map(currencyCode => ({
+      value: currencyCode,
+      label: `${getCurrencySymbol({
+        symbol: currencyCode,
+      })} (${currencyCode})`,
+    }));
   }
 
   onChange() {
@@ -839,6 +890,20 @@ class DatasourceEditor extends React.PureComponent {
       ),
     );
 
+    // validate currency code
+    try {
+      this.state.datasource.metrics?.forEach(
+        metric =>
+          metric.currency?.symbol &&
+          new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: metric.currency.symbol,
+          }),
+      );
+    } catch {
+      errors = errors.concat([t('Invalid currency code in saved metrics')]);
+    }
+
     this.setState({ errors }, callback);
   }
 
@@ -1228,6 +1293,11 @@ class DatasourceEditor extends React.PureComponent {
                   <TextControl controlId="d3format" placeholder="%y/%m/%d" />
                 }
               />
+              <Field
+                fieldKey="currency"
+                label={t('Metric currency')}
+                control={<CurrencyControl currencies={this.currencies} />}
+              />
               <Field
                 label={t('Certified by')}
                 fieldKey="certified_by"