chore(translations): fix translation literals (#17501)

* chore(translations): fix translation literals

* fix table name types and translations

* fix lint

* join concat'd messages

superset-frontend/src/SqlLab/components/App/index.jsx

@@ -83,12 +83,14 @@ class App extends React.PureComponent {
     this.props.actions.addDangerToast(
       t(
         "SQL Lab uses your browser's local storage to store queries and results." +
-          `\n Currently, you are using ${currentUsage.toFixed(
-            2,
-          )} KB out of ${LOCALSTORAGE_MAX_USAGE_KB} KB. storage space.` +
-          '\n To keep SQL Lab from crashing, please delete some query tabs.' +
-          '\n You can re-access these queries by using the Save feature before you delete the tab. ' +
-          'Note that you will need to close other SQL Lab windows before you do this.',
+          '\nCurrently, you are using %(currentUsage)s KB out of %(maxStorage)d KB storage space.' +
+          '\nTo keep SQL Lab from crashing, please delete some query tabs.' +
+          '\nYou can re-access these queries by using the Save feature before you delete the tab.' +
+          '\nNote that you will need to close other SQL Lab windows before you do this.',
+        {
+          currentUsage: currentUsage.toFixed(2),
+          maxStorage: LOCALSTORAGE_MAX_USAGE_KB,
+        },
       ),
     );
   }

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

@@ -581,24 +581,16 @@ export default class ResultSet extends React.PureComponent<
     const isAdmin = !!this.props.user?.roles?.Admin;
     const displayMaxRowsReachedMessage = {
       withAdmin: t(
-        `The number of results displayed is limited to %(rows)d by the configuration DISPLAY_MAX_ROWS. `,
-        { rows },
-      ).concat(
-        t(
-          `Please add additional limits/filters or download to csv to see more rows up to `,
-        ),
-        t(`the %(limit)d limit.`, { limit }),
+        'The number of results displayed is limited to %(rows)d by the configuration DISPLAY_MAX_ROWS. ' +
+          'Please add additional limits/filters or download to csv to see more rows up to ' +
+          'the %(limit)d limit.',
+        { rows, limit },
       ),
       withoutAdmin: t(
-        `The number of results displayed is limited to %(rows)d. `,
-        { rows },
-      ).concat(
-        t(
-          `Please add additional limits/filters, download to csv, or contact an admin `,
-        ),
-        t(`to see more rows up to the %(limit)d limit.`, {
-          limit,
-        }),
+        'The number of results displayed is limited to %(rows)d. ' +
+          'Please add additional limits/filters, download to csv, or contact an admin ' +
+          'to see more rows up to the %(limit)d limit.',
+        { rows, limit },
       ),
     };
     const shouldUseDefaultDropdownAlert =
@@ -609,7 +601,7 @@ export default class ResultSet extends React.PureComponent<
       limitMessage = (
         <span className="limitMessage">
           {t(
-            `The number of rows displayed is limited to %(rows)d by the query`,
+            'The number of rows displayed is limited to %(rows)d by the query',
             { rows },
           )}
         </span>
@@ -621,7 +613,7 @@ export default class ResultSet extends React.PureComponent<
       limitMessage = (
         <span className="limitMessage">
           {t(
-            `The number of rows displayed is limited to %(rows)d by the limit dropdown.`,
+            'The number of rows displayed is limited to %(rows)d by the limit dropdown.',
             { rows },
           )}
         </span>
@@ -630,7 +622,7 @@ export default class ResultSet extends React.PureComponent<
       limitMessage = (
         <span className="limitMessage">
           {t(
-            `The number of rows displayed is limited to %(rows)d by the query and limit dropdown.`,
+            'The number of rows displayed is limited to %(rows)d by the query and limit dropdown.',
             { rows },
           )}
         </span>
@@ -640,17 +632,17 @@ export default class ResultSet extends React.PureComponent<
       <ReturnedRows>
         {!limitReached && !shouldUseDefaultDropdownAlert && (
           <span>
-            {t(`%(rows)d rows returned`, { rows })} {limitMessage}
+            {t('%(rows)d rows returned', { rows })} {limitMessage}
           </span>
         )}
         {!limitReached && shouldUseDefaultDropdownAlert && (
           <div ref={this.calculateAlertRefHeight}>
             <Alert
               type="warning"
-              message={t(`%(rows)d rows returned`, { rows })}
+              message={t('%(rows)d rows returned', { rows })}
               onClose={this.onAlertClose}
               description={t(
-                `The number of rows displayed is limited to %s by the dropdown.`,
+                'The number of rows displayed is limited to %s by the dropdown.',
                 rows,
               )}
             />
@@ -661,7 +653,7 @@ export default class ResultSet extends React.PureComponent<
             <Alert
               type="warning"
               onClose={this.onAlertClose}
-              message={t(`%(rows)d rows returned`, { rows })}
+              message={t('%(rows)d rows returned', { rows })}
               description={
                 isAdmin
                   ? displayMaxRowsReachedMessage.withAdmin

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx

@@ -148,7 +148,9 @@ export default class SqlEditorLeftBar extends React.PureComponent {
         transform: rotate(90deg);
       `}
       aria-label="Collapse"
-      tooltip={t(`${isActive ? 'Collapse' : 'Expand'} table preview`)}
+      tooltip={
+        isActive ? t('Collapse table preview') : t('Expand table preview')
+      }
     >
       <Icons.RightOutlined
         iconSize="s"

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -118,8 +118,13 @@ export function savePublished(id, isPublished) {
       }),
     })
       .then(() => {
-        const nowPublished = isPublished ? 'published' : 'hidden';
-        dispatch(addSuccessToast(t(`This dashboard is now ${nowPublished}`)));
+        dispatch(
+          addSuccessToast(
+            isPublished
+              ? t('This dashboard is now published')
+              : t('This dashboard is now hidden'),
+          ),
+        );
         dispatch(togglePublished(isPublished));
       })
       .catch(() => {

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -320,7 +320,9 @@ const FilterBar: React.FC<FiltersBarProps> = ({
             activeKey={editFilterSetId ? TabIds.AllFilters : undefined}
           >
             <Tabs.TabPane
-              tab={t(`All Filters (${filterValues.length})`)}
+              tab={t('All Filters (%(filterCount)d)', {
+                filterCount: filterValues.length,
+              })}
               key={TabIds.AllFilters}
               css={tabPaneStyle}
             >
@@ -340,7 +342,9 @@ const FilterBar: React.FC<FiltersBarProps> = ({
             </Tabs.TabPane>
             <Tabs.TabPane
               disabled={!!editFilterSetId}
-              tab={t(`Filter Sets (${filterSetFilterValues.length})`)}
+              tab={t('Filter Sets (%(filterSetCount)d)', {
+                filterSetCount: filterSetFilterValues.length,
+              })}
               key={TabIds.FilterSets}
               css={tabPaneStyle}
             >

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx

@@ -106,7 +106,7 @@ export default function getControlItemsMap({
             initialValue={initColumn}
             label={
               <StyledLabel>
-                {t(`${mainControlItem.config?.label}`) || t('Column')}
+                {mainControlItem.config?.label || t('Column')}
               </StyledLabel>
             }
             rules={[

superset-frontend/src/views/CRUD/alert/AlertList.tsx

@@ -50,6 +50,14 @@ import { AlertObject, AlertState } from './types';
 
 const PAGE_SIZE = 25;
 
+const AlertStateLabel: Record<AlertState, string> = {
+  [AlertState.Success]: t('Success'),
+  [AlertState.Working]: t('Working'),
+  [AlertState.Error]: t('Error'),
+  [AlertState.Noop]: t('Not triggered'),
+  [AlertState.Grace]: t('On Grace'),
+};
+
 interface AlertListProps {
   addDangerToast: (msg: string) => void;
   addSuccessToast: (msg: string) => void;
@@ -394,11 +402,17 @@ function AlertList({
         operator: FilterOperator.equals,
         unfilteredLabel: 'Any',
         selects: [
-          { label: t(`${AlertState.success}`), value: AlertState.success },
-          { label: t(`${AlertState.working}`), value: AlertState.working },
-          { label: t(`${AlertState.error}`), value: AlertState.error },
-          { label: t(`${AlertState.noop}`), value: AlertState.noop },
-          { label: t(`${AlertState.grace}`), value: AlertState.grace },
+          {
+            label: AlertStateLabel[AlertState.Success],
+            value: AlertState.Success,
+          },
+          {
+            label: AlertStateLabel[AlertState.Working],
+            value: AlertState.Working,
+          },
+          { label: AlertStateLabel[AlertState.Error], value: AlertState.Error },
+          { label: AlertStateLabel[AlertState.Noop], value: AlertState.Noop },
+          { label: AlertStateLabel[AlertState.Grace], value: AlertState.Grace },
         ],
       },
       {

superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx

@@ -1047,9 +1047,13 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
           ) : (
             <Icons.PlusLarge css={StyledIcon} />
           )}
-          {isEditMode
-            ? t(`Edit ${isReport ? 'Report' : 'Alert'}`)
-            : t(`Add ${isReport ? 'Report' : 'Alert'}`)}
+          {isEditMode && isReport
+            ? t('Edit Report')
+            : isEditMode
+            ? t('Edit Alert')
+            : isReport
+            ? t('Add Report')
+            : t('Add Alert')}
         </h4>
       }
     >

superset-frontend/src/views/CRUD/alert/ExecutionLog.tsx

@@ -153,7 +153,7 @@ function ExecutionLog({ addDangerToast, isReportEnabled }: ExecutionLogProps) {
         name={
           <StyledHeader>
             <span>
-              {t(`${alertResource?.type}`)} {alertResource?.name}
+              {alertResource?.type} {alertResource?.name}
             </span>
             <span>
               <Link to={path}>Back to all</Link>

superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx

@@ -28,17 +28,17 @@ function getStatusColor(
   theme: typeof supersetTheme,
 ) {
   switch (status) {
-    case AlertState.working:
+    case AlertState.Working:
       return theme.colors.primary.base;
-    case AlertState.error:
+    case AlertState.Error:
       return theme.colors.error.base;
-    case AlertState.success:
+    case AlertState.Success:
       return isReportEnabled
         ? theme.colors.success.base
         : theme.colors.alert.base;
-    case AlertState.noop:
+    case AlertState.Noop:
       return theme.colors.success.base;
-    case AlertState.grace:
+    case AlertState.Grace:
       return theme.colors.alert.base;
     default:
       return theme.colors.grayscale.base;
@@ -59,43 +59,43 @@ export default function AlertStatusIcon({
     status: '',
   };
   switch (state) {
-    case AlertState.success:
+    case AlertState.Success:
       lastStateConfig.icon = isReportEnabled
         ? Icons.Check
         : Icons.AlertSolidSmall;
       lastStateConfig.label = isReportEnabled
         ? t('Report sent')
         : t('Alert triggered, notification sent');
-      lastStateConfig.status = AlertState.success;
+      lastStateConfig.status = AlertState.Success;
       break;
-    case AlertState.working:
+    case AlertState.Working:
       lastStateConfig.icon = Icons.Running;
       lastStateConfig.label = isReportEnabled
         ? t('Report sending')
         : t('Alert running');
-      lastStateConfig.status = AlertState.working;
+      lastStateConfig.status = AlertState.Working;
       break;
-    case AlertState.error:
+    case AlertState.Error:
       lastStateConfig.icon = Icons.XSmall;
       lastStateConfig.label = isReportEnabled
         ? t('Report failed')
         : t('Alert failed');
-      lastStateConfig.status = AlertState.error;
+      lastStateConfig.status = AlertState.Error;
       break;
-    case AlertState.noop:
+    case AlertState.Noop:
       lastStateConfig.icon = Icons.Check;
       lastStateConfig.label = t('Nothing triggered');
-      lastStateConfig.status = AlertState.noop;
+      lastStateConfig.status = AlertState.Noop;
       break;
-    case AlertState.grace:
+    case AlertState.Grace:
       lastStateConfig.icon = Icons.AlertSolidSmall;
       lastStateConfig.label = t('Alert Triggered, In Grace Period');
-      lastStateConfig.status = AlertState.grace;
+      lastStateConfig.status = AlertState.Grace;
       break;
     default:
       lastStateConfig.icon = Icons.Check;
       lastStateConfig.label = t('Nothing triggered');
-      lastStateConfig.status = AlertState.noop;
+      lastStateConfig.status = AlertState.Noop;
   }
   const Icon = lastStateConfig.icon;
   return (

superset-frontend/src/views/CRUD/alert/components/RecipientIcon.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, SupersetTheme, css } from '@superset-ui/core';
+import { SupersetTheme, css } from '@superset-ui/core';
 import React, { ReactElement } from 'react';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
@@ -33,13 +33,13 @@ export default function RecipientIcon({ type }: { type: string }) {
     label: '',
   };
   switch (type) {
-    case RecipientIconName.email:
+    case RecipientIconName.Email:
       recipientIconConfig.icon = <Icons.Email css={StyledIcon} />;
-      recipientIconConfig.label = t(`${RecipientIconName.email}`);
+      recipientIconConfig.label = RecipientIconName.Email;
       break;
-    case RecipientIconName.slack:
+    case RecipientIconName.Slack:
       recipientIconConfig.icon = <Icons.Slack css={StyledIcon} />;
-      recipientIconConfig.label = t(`${RecipientIconName.slack}`);
+      recipientIconConfig.label = RecipientIconName.Slack;
       break;
     default:
       recipientIconConfig.icon = null;

superset-frontend/src/views/CRUD/alert/types.ts

@@ -100,14 +100,14 @@ export type LogObject = {
 };
 
 export enum AlertState {
-  success = 'Success',
-  working = 'Working',
-  error = 'Error',
-  noop = 'Not triggered',
-  grace = 'On Grace',
+  Success = 'Success',
+  Working = 'Working',
+  Error = 'Error',
+  Noop = 'Not triggered',
+  Grace = 'On Grace',
 }
 
 export enum RecipientIconName {
-  email = 'Email',
-  slack = 'Slack',
+  Email = 'Email',
+  Slack = 'Slack',
 }

superset-frontend/src/views/CRUD/hooks.ts

@@ -623,7 +623,7 @@ export const testDatabaseConnection = (
       addSuccessToast(t('Connection looks good!'));
     },
     createErrorHandler((errMsg: Record<string, string[] | string> | string) => {
-      handleErrorMsg(t(`${t('ERROR: ')}${parsedErrorMessage(errMsg)}`));
+      handleErrorMsg(t('ERROR: %s', parsedErrorMessage(errMsg)));
     }),
   );
 };