chore: Localization of Superset pt. 2

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx

@@ -93,7 +93,7 @@ const columnWidth: ControlFormItemSpec<'InputNumber'> = {
     "Default minimal column width in pixels, actual width may still be larger than this if other columns don't need much space",
   ),
   width: 120,
-  placeholder: 'auto',
+  placeholder: t('auto'),
   debounceDelay: 400,
   validators: [validateNumber],
 };

superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js

@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 import { extent as d3Extent, range as d3Range } from 'd3-array';
 import { select as d3Select } from 'd3-selection';
-import { getSequentialSchemeRegistry } from '@superset-ui/core';
+import { getSequentialSchemeRegistry, t } from '@superset-ui/core';
 import CalHeatMap from './vendor/cal-heatmap';
 
 const propTypes = {
@@ -88,7 +88,8 @@ function Calendar(element, props) {
   Object.keys(metricsData).forEach(metric => {
     const calContainer = div.append('div');
     if (showMetricName) {
-      calContainer.text(`Metric: ${verboseMap[metric] || metric}`);
+      // eslint-disable-next-line prefer-template
+      calContainer.text(t('Metric') + `: ${verboseMap[metric] || metric}`);
     }
     const timestamps = metricsData[metric];
     const extents = d3Extent(Object.keys(timestamps), key => timestamps[key]);

superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js

@@ -9,7 +9,7 @@
 /* eslint-disable */
 
 import d3tip from 'd3-tip';
-import { getContrastingColor } from '@superset-ui/core';
+import { getContrastingColor, t } from '@superset-ui/core';
 
 var d3 = typeof require === 'function' ? require('d3') : window.d3;
 
@@ -256,9 +256,9 @@ var CalHeatMap = function () {
 
     // Formatting of the title displayed when hovering a legend cell
     legendTitleFormat: {
-      lower: 'less than {min} {name}',
-      inner: 'between {down} and {up} {name}',
-      upper: 'more than {max} {name}',
+      lower: t('less than {min} {name}'),
+      inner: t('between {down} and {up} {name}'),
+      upper: t('more than {max} {name}'),
     },
 
     // Animation duration, in ms

superset-frontend/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx

@@ -111,7 +111,7 @@ class CustomHistogram extends React.PureComponent {
             renderTooltip={({ datum, color }) => (
               <div>
                 <strong style={{ color }}>
-                  {datum.bin0} to {datum.bin1}
+                  {datum.bin0} {t('to')} {datum.bin1}
                 </strong>
                 <div>
                   <strong>{t('count')} </strong>

superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.js

@@ -24,6 +24,7 @@ import {
   NumberFormats,
   CategoricalColorNamespace,
   getSequentialSchemeRegistry,
+  t,
 } from '@superset-ui/core';
 import wrapSvgText from './utils/wrapSvgText';
 
@@ -381,15 +382,17 @@ function Sunburst(element, props) {
       .append('text')
       .attr('class', 'path-abs-percent')
       .attr('y', yOffsets[offsetIndex])
-      .text(`${absolutePercString} of total`);
+      // eslint-disable-next-line prefer-template
+      .text(absolutePercString + ' ' + t('of total'));
 
     if (conditionalPercString) {
       offsetIndex += 1;
       gMiddleText
         .append('text')
         .attr('class', 'path-cond-percent')
         .attr('y', yOffsets[offsetIndex])
-        .text(`${conditionalPercString} of parent`);
+        // eslint-disable-next-line prefer-template
+        .text(conditionalPercString + ' ' + t('of parent'));
     }
 
     offsetIndex += 1;

superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx

@@ -51,7 +51,7 @@ const radarMetricMaxValue: { name: string; config: ControlFormItemSpec } = {
       'The maximum value of metrics. It is an optional configuration',
     ),
     width: 120,
-    placeholder: 'auto',
+    placeholder: t('auto'),
     debounceDelay: 400,
     validators: [validateNumber],
   },

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

@@ -52,7 +52,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
   const isXAxis = axis === 'x';
   const isVertical = (controls: ControlStateMapping) =>
     Boolean(controls?.orientation.value === OrientationType.vertical);
-  const isHorizental = (controls: ControlStateMapping) =>
+  const isHorizontal = (controls: ControlStateMapping) =>
     Boolean(controls?.orientation.value === OrientationType.horizontal);
   return [
     [
@@ -65,7 +65,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           default: '',
           description: t('Changing this control takes effect instantly'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isVertical(controls) : isHorizental(controls),
+            isXAxis ? isVertical(controls) : isHorizontal(controls),
         },
       },
     ],
@@ -82,7 +82,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
           description: t('Changing this control takes effect instantly'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isVertical(controls) : isHorizental(controls),
+            isXAxis ? isVertical(controls) : isHorizontal(controls),
         },
       },
     ],
@@ -96,7 +96,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           default: '',
           description: t('Changing this control takes effect instantly'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isHorizental(controls) : isVertical(controls),
+            isXAxis ? isHorizontal(controls) : isVertical(controls),
         },
       },
     ],
@@ -113,7 +113,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
           description: t('Changing this control takes effect instantly'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isHorizental(controls) : isVertical(controls),
+            isXAxis ? isHorizontal(controls) : isVertical(controls),
         },
       },
     ],
@@ -130,7 +130,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           choices: sections.TITLE_POSITION_OPTIONS,
           description: t('Changing this control takes effect instantly'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isHorizental(controls) : isVertical(controls),
+            isXAxis ? isHorizontal(controls) : isVertical(controls),
         },
       },
     ],
@@ -141,7 +141,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
   const isXAxis = axis === 'x';
   const isVertical = (controls: ControlStateMapping) =>
     Boolean(controls?.orientation.value === OrientationType.vertical);
-  const isHorizental = (controls: ControlStateMapping) =>
+  const isHorizontal = (controls: ControlStateMapping) =>
     Boolean(controls?.orientation.value === OrientationType.horizontal);
   return [
     [
@@ -154,7 +154,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
             'When using other than adaptive formatting, labels may overlap.',
           )}`,
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isVertical(controls) : isHorizental(controls),
+            isXAxis ? isVertical(controls) : isHorizontal(controls),
         },
       },
     ],
@@ -176,7 +176,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
             'Input field supports custom rotation. e.g. 30 for 30°',
           ),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isVertical(controls) : isHorizental(controls),
+            isXAxis ? isVertical(controls) : isHorizontal(controls),
         },
       },
     ],
@@ -187,7 +187,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
           ...sharedControls.y_axis_format,
           label: t('Axis Format'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isHorizental(controls) : isVertical(controls),
+            isXAxis ? isHorizontal(controls) : isVertical(controls),
         },
       },
     ],
@@ -201,7 +201,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
           default: logAxis,
           description: t('Logarithmic axis'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isHorizental(controls) : isVertical(controls),
+            isXAxis ? isHorizontal(controls) : isVertical(controls),
         },
       },
     ],
@@ -215,7 +215,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
           default: minorSplitLine,
           description: t('Draw split lines for minor axis ticks'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isHorizental(controls) : isVertical(controls),
+            isXAxis ? isHorizontal(controls) : isVertical(controls),
         },
       },
     ],
@@ -229,7 +229,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
           renderTrigger: true,
           description: t('It’s not recommended to truncate axis in Bar chart.'),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
-            isXAxis ? isHorizental(controls) : isVertical(controls),
+            isXAxis ? isHorizontal(controls) : isVertical(controls),
         },
       },
     ],
@@ -249,7 +249,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
           ),
           visibility: ({ controls }: ControlPanelsContainerProps) =>
             Boolean(controls?.truncateYAxis?.value) &&
-            (isXAxis ? isHorizental(controls) : isVertical(controls)),
+            (isXAxis ? isHorizontal(controls) : isVertical(controls)),
         },
       },
     ],

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -29,6 +29,7 @@ import {
   useTheme,
   isAdhocColumn,
   BinaryQueryObjectFilterClause,
+  t,
 } from '@superset-ui/core';
 import { PivotTable, sortAs, aggregatorTemplates } from './react-pivottable';
 import {
@@ -55,7 +56,7 @@ const PivotTableWrapper = styled.div`
   overflow: auto;
 `;
 
-const METRIC_KEY = 'metric';
+const METRIC_KEY = t('metric');
 const vals = ['value'];
 
 const StyledPlusSquareOutlined = styled(PlusSquareOutlined)`

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx

@@ -487,7 +487,9 @@ export class TableRenderer extends React.Component {
             true,
           )}
         >
-          {`Total (${this.props.aggregatorName})`}
+          {t('Total (%(aggregatorName)s)', {
+            aggregatorName: t(this.props.aggregatorName),
+          })}
         </th>
       ) : null;
 
@@ -550,7 +552,9 @@ export class TableRenderer extends React.Component {
           )}
         >
           {colAttrs.length === 0
-            ? `Total (${this.props.aggregatorName})`
+            ? t('Total (%(aggregatorName)s)', {
+                aggregatorName: t(this.props.aggregatorName),
+              })
             : null}
         </th>
       </tr>
@@ -764,10 +768,9 @@ export class TableRenderer extends React.Component {
           true,
         )}
       >
-        {
-          // eslint-disable-next-line prefer-template
-          t('Total') + ` (${this.props.aggregatorName})`
-        }
+        {t('Total (%(aggregatorName)s)', {
+          aggregatorName: t(this.props.aggregatorName),
+        })}
       </th>
     );
 

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/SelectPageSize.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React from 'react';
+import { t } from '@superset-ui/core';
 import { formatSelectOptions } from '@superset-ui/chart-controls';
 
 export type SizeOption = [number, string];
@@ -34,7 +35,7 @@ function DefaultSelectRenderer({
 }: SelectPageSizeRendererProps) {
   return (
     <span className="dt-select-page-size form-inline">
-      Show{' '}
+      {t('Show')}{' '}
       <select
         className="form-control input-sm"
         value={current}
@@ -54,7 +55,7 @@ function DefaultSelectRenderer({
           );
         })}
       </select>{' '}
-      entries
+      {t('entries')}
     </span>
   );
 }

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -198,7 +198,7 @@ function SelectPageSize({
 }
 
 const getNoResultsMessage = (filter: string) =>
-  t(filter ? 'No matching records found' : 'No records found');
+  filter ? t('No matching records found') : t('No records found');
 
 export default function TableChart<D extends DataRecord = DataRecord>(
   props: TableChartTransformedProps<D> & {

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -1402,7 +1402,7 @@ export function popQuery(queryId) {
           dbId: queryData.database.id,
           schema: queryData.schema,
           sql: queryData.sql,
-          name: `Copy of ${queryData.tab_name}`,
+          title: t('Copy of %s', queryData.tab_name),
           autorun: false,
         };
         return dispatch(addQueryEditor(queryEditorProps));
@@ -1419,7 +1419,8 @@ export function popDatasourceQuery(datasourceKey, sql) {
       .then(({ json }) =>
         dispatch(
           addQueryEditor({
-            name: `Query ${json.result.name}`,
+            // eslint-disable-next-line prefer-template
+            title: t('Query') + ` ${json.result.name}`,
             dbId: json.result.database.id,
             schema: json.result.schema,
             autorun: sql !== undefined,

superset-frontend/src/SqlLab/components/QueryStateLabel/index.tsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import Label from 'src/components/Label';
-import { STATE_TYPE_MAP } from 'src/SqlLab/constants';
+import { STATE_TYPE_MAP, STATE_TYPE_MAP_LOCALIZED } from 'src/SqlLab/constants';
 import { styled, Query } from '@superset-ui/core';
 
 interface QueryStateLabelProps {
@@ -31,6 +31,8 @@ const StyledLabel = styled(Label)`
 
 export default function QueryStateLabel({ query }: QueryStateLabelProps) {
   return (
-    <StyledLabel type={STATE_TYPE_MAP[query.state]}>{query.state}</StyledLabel>
+    <StyledLabel type={STATE_TYPE_MAP[query.state]}>
+      {STATE_TYPE_MAP_LOCALIZED[query.state]}
+    </StyledLabel>
   );
 }

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -360,8 +360,8 @@ const ResultSet = ({
               message={t('%(rows)d rows returned', { rows })}
               onClose={() => setAlertIsOpen(false)}
               description={t(
-                'The number of rows displayed is limited to %s by the dropdown.',
-                rows,
+                'The number of rows displayed is limited to %(rows)d by the dropdown.',
+                { rows },
               )}
             />
           </div>

superset-frontend/src/SqlLab/components/SouthPane/index.tsx

@@ -35,6 +35,7 @@ import {
   STATUS_OPTIONS,
   STATE_TYPE_MAP,
   LOCALSTORAGE_MAX_QUERY_AGE_MS,
+  STATUS_OPTIONS_LOCALIZED,
 } from '../../constants';
 
 const TAB_HEIGHT = 140;
@@ -145,7 +146,7 @@ const SouthPane = ({
   };
   const renderOfflineStatus = () => (
     <Label className="m-r-3" type={STATE_TYPE_MAP[STATUS_OPTIONS.offline]}>
-      {STATUS_OPTIONS.offline}
+      {STATUS_OPTIONS_LOCALIZED.offline}
     </Label>
   );