[Enhancement] Add i18n support for acceleration panels

public/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx

@@ -5,6 +5,7 @@
 
 import React, { useState } from 'react';
 import { EuiOverlayMask, EuiConfirmModal, EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import { CachedAcceleration } from '../../../../../../common/types/data_connections';
 import {
   ACC_DELETE_MSG,
@@ -48,9 +49,14 @@
 
   switch (actionType) {
     case 'vacuum':
-      title = `Vacuum acceleration ${displayIndexName} on ${displayFullPath} ?`;
+      title = i18n.translate('accelerationActionOverlay.vacuum.title', {
+        defaultMessage: 'Vacuum acceleration {displayIndexName} on {displayFullPath}?',
+        values: { displayIndexName, displayFullPath },
+      });
       description = ACC_VACUUM_MSG;
-      confirmButtonText = 'Vacuum';
+      confirmButtonText = i18n.translate('accelerationActionOverlay.vacuum.confirmButtonText', {
+        defaultMessage: 'Vacuum',
+      });
       confirmEnabled = confirmationInput === displayIndexName;
       break;
     case 'delete':
@@ -59,10 +65,25 @@
       confirmButtonText = 'Delete';
       break;
     case 'sync':
-      title = 'Manual sync data?';
+      title = i18n.translate('accelerationActionOverlay.sync.title', {
+        defaultMessage: 'Manual sync data?',
+      });
       description = ACC_SYNC_MSG;
-      confirmButtonText = 'Sync';
+      confirmButtonText = i18n.translate('accelerationActionOverlay.sync.confirmButtonText', {
+        defaultMessage: 'Sync',
+      });
       break;
+    default:
+      title = i18n.translate('accelerationActionOverlay.unknownAction.title', {
+        defaultMessage: 'Unknown Action',
+      });
+      description = '';
+      confirmButtonText = i18n.translate(
+        'accelerationActionOverlay.unknownAction.confirmButtonText',
+        {
+          defaultMessage: 'Confirm',
+        }
+      );
   }
 
   return (

public/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx

@@ -16,6 +16,7 @@
   EuiText,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
+import { i18n } from '@osd/i18n';
 import { AccelerationDetailsTab } from './flyout_modules/acceleration_details_tab';
 import { AccelerationSchemaTab } from './flyout_modules/accelerations_schema_tab';
 import {
@@ -61,7 +62,7 @@
   const { dataSourceName, acceleration, resetFlyout, handleRefresh } = props;
   const { flintIndexName } = acceleration;
   const [selectedTab, setSelectedTab] = useState('details');
   const tabsMap: { [key: string]: any } = {
     details: AccelerationDetailsTab,
     schema: AccelerationSchemaTab,
   };
@@ -141,7 +142,7 @@
     if (flintIndexName !== undefined && flintIndexName.trim().length > 0) {
       getAccDetail(flintIndexName);
     }
   }, [flintIndexName]);
 
   const DiscoverIcon = () => {
     return (
@@ -186,12 +187,16 @@
   const accelerationDetailsTabs = [
     {
       id: 'details',
-      name: 'Details',
+      name: i18n.translate('accelerationDetailsFlyout.tabs.details', {
+        defaultMessage: 'Details',
+      }),
       disabled: false,
     },
     {
       id: 'schema',
-      name: 'Schema',
+      name: i18n.translate('accelerationDetailsFlyout.tabs.schema', {
+        defaultMessage: 'Schema',
+      }),
       disabled: false,
     },
   ];

public/components/datasources/components/manage/accelerations/acceleration_operation.tsx

@@ -4,6 +4,7 @@
  */
 
 import { useEffect, useState } from 'react';
+import { i18n } from '@osd/i18n';
 import { CachedAcceleration } from '../../../../../../common/types/data_connections';
 import { useToast } from '../../../../common/toast';
 import { useDirectQuery } from '../../../../../framework/datasources/direct_query_hook';
@@ -36,17 +37,38 @@
 
     switch (operationType) {
       case 'delete':
-        operationInProgressMessage = `Deleting acceleration: ${displayAccelerationName}`;
-        operationSuccessMessage = `Successfully deleted acceleration: ${displayAccelerationName}`;
-        operationFailureMessage = `Failed to delete acceleration: ${displayAccelerationName}`;
+        operationInProgressMessage = i18n.translate('useAccelerationOperation.deletingInProgress', {
+          defaultMessage: 'Deleting acceleration: {displayAccelerationName}',
+          values: { displayAccelerationName },
+        });
+        operationSuccessMessage = i18n.translate('useAccelerationOperation.deleteSuccess', {
+          defaultMessage: 'Successfully deleted acceleration: {displayAccelerationName}',
+          values: { displayAccelerationName },
+        });
+        operationFailureMessage = i18n.translate('useAccelerationOperation.deleteFailure', {
+          defaultMessage: 'Failed to delete acceleration: {displayAccelerationName}',
+          values: { displayAccelerationName },
+        });
         break;
       case 'vacuum':
-        operationInProgressMessage = `Vacuuming acceleration: ${displayAccelerationName}`;
-        operationSuccessMessage = `Successfully vacuumed acceleration: ${displayAccelerationName}`;
-        operationFailureMessage = `Failed to vacuum acceleration: ${displayAccelerationName}`;
+        operationInProgressMessage = i18n.translate('useAccelerationOperation.vacuumInProgress', {
+          defaultMessage: 'Vacuuming acceleration: {displayAccelerationName}',
+          values: { displayAccelerationName },
+        });
+        operationSuccessMessage = i18n.translate('useAccelerationOperation.vacuumSuccess', {
+          defaultMessage: 'Successfully vacuumed acceleration: {displayAccelerationName}',
+          values: { displayAccelerationName },
+        });
+        operationFailureMessage = i18n.translate('useAccelerationOperation.vacuumFailure', {
+          defaultMessage: 'Failed to vacuum acceleration: {displayAccelerationName}',
+          values: { displayAccelerationName },
+        });
         break;
       case 'sync':
-        operationInProgressMessage = `Syncing acceleration: ${displayAccelerationName}`;
+        operationInProgressMessage = i18n.translate('useAccelerationOperation.syncInProgress', {
+          defaultMessage: 'Syncing acceleration: {displayAccelerationName}',
+          values: { displayAccelerationName },
+        });
         break;
     }
 
@@ -68,13 +90,13 @@
     }
 
     setCurrentStatus(loadStatus);
   }, [loadStatus, setToast, accelerationToOperate, operationType, currentStatus]);
 
   useEffect(() => {
     return () => {
       stopLoading();
     };
   }, []);
 
   const performOperation = (
     acceleration: CachedAcceleration,

public/components/datasources/components/manage/accelerations/acceleration_table.tsx

@@ -24,9 +24,11 @@
   ACC_LOADING_MSG,
   ACC_PANEL_TITLE,
   ACC_PANEL_DESC,
+  ACC_TABLE_ACTION_DESC,
   getAccelerationName,
   AccelerationActionType,
   CreateAccelerationFlyoutButton,
+  ACC_TABLE_COLUMN_NAMES,
 } from './utils/acceleration_utils';
 import { getRenderAccelerationDetailsFlyout } from '../../../../../plugin';
 import { CatalogCacheManager } from '../../../../../framework/catalog_cache/cache_manager';
@@ -42,7 +44,7 @@
 
 interface AccelerationTableProps {
   dataSourceName: string;
   cacheLoadingHooks: any;
 }
 
 interface ModalState {
@@ -73,7 +75,7 @@
     if (operationSuccess) {
       handleRefresh();
     }
   }, [operationSuccess]);
 
   const handleActionClick = (
     actionType: ModalState['actionType'],
@@ -113,7 +115,7 @@
       setAccelerations(cachedDataSource.accelerations);
       setUpdatedTime(cachedDataSource.lastUpdated);
     }
   }, []);
 
   useEffect(() => {
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.SUCCESS) {
@@ -127,14 +129,14 @@
     if (accelerationsLoadStatus === DirectQueryLoadingStatus.FAILED) {
       setIsRefreshing(false);
     }
   }, [accelerationsLoadStatus]);
 
   const handleRefresh = useCallback(() => {
     if (!isCatalogCacheFetching(accelerationsLoadStatus)) {
       setIsRefreshing(true);
       startLoadingAccelerations(dataSourceName);
     }
   }, [accelerationsLoadStatus]);
 
   const RefreshButton = () => {
     return (
@@ -213,21 +215,21 @@
     },
     {
       name: 'Sync',
-      description: 'Manual Sync Data',
+      description: ACC_TABLE_ACTION_DESC.syncAction,
       icon: 'inputOutput',
       onClick: (item: CachedAcceleration) => handleActionClick('sync', item),
       enabled: (item: CachedAcceleration) => !item.autoRefresh && item.status === 'active',
     },
     {
       name: 'Delete',
-      description: 'Delete acceleration',
+      description: ACC_TABLE_ACTION_DESC.deleteAction,
       icon: 'trash',
       onClick: (item: CachedAcceleration) => handleActionClick('delete', item),
       enabled: (item: CachedAcceleration) => item.status !== 'deleted',
     },
     {
       name: 'Vacuum',
-      description: 'Vacuum acceleration',
+      description: ACC_TABLE_ACTION_DESC.vacuumAction,
       icon: 'broom',
       onClick: (item: CachedAcceleration) => handleActionClick('vacuum', item),
       enabled: (item: CachedAcceleration) => item.status === 'deleted',
@@ -237,7 +239,7 @@
   const accelerationTableColumns = [
     {
       field: 'indexName',
-      name: 'Name',
+      name: ACC_TABLE_COLUMN_NAMES.columnName,
       sortable: true,
       render: (indexName: string, acceleration: CachedAcceleration) => {
         const displayName = getAccelerationName(acceleration);
@@ -254,13 +256,13 @@
     },
     {
       field: 'status',
-      name: 'Status',
+      name: ACC_TABLE_COLUMN_NAMES.columnStatus,
       sortable: true,
       render: (status: string) => <AccelerationStatus status={status} />,
     },
     {
       field: 'type',
-      name: 'Type',
+      name: ACC_TABLE_COLUMN_NAMES.columnType,
       sortable: true,
       render: (type: string) => {
         let label;
@@ -282,27 +284,27 @@
     },
     {
       field: 'database',
-      name: 'Database',
+      name: ACC_TABLE_COLUMN_NAMES.columnDatabase,
       sortable: true,
       render: (database: string) => <EuiText size="s">{database}</EuiText>,
     },
     {
       field: 'table',
-      name: 'Table',
+      name: ACC_TABLE_COLUMN_NAMES.columnTable,
       sortable: true,
       render: (table: string) => <EuiText size="s">{table || '-'}</EuiText>,
     },
     {
       field: 'refreshType',
-      name: 'Refresh Type',
+      name: ACC_TABLE_COLUMN_NAMES.columnRefreshType,
       sortable: true,
       render: (autoRefresh: boolean, acceleration: CachedAcceleration) => {
         return <EuiText size="s">{acceleration.autoRefresh ? 'Auto refresh' : 'Manual'}</EuiText>;
       },
     },
     {
       field: 'flintIndexName',
-      name: 'Destination Index',
+      name: ACC_TABLE_COLUMN_NAMES.columnDestinationIndex,
       sortable: true,
       render: (flintIndexName: string, acceleration: CachedAcceleration) => {
         if (acceleration.type === 'skipping') {
@@ -315,7 +317,7 @@
       name: 'Actions',
       actions: tableActions,
     },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 
   const pagination = {
     initialPageSize: 10,

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration_button.tsx

@@ -15,6 +15,10 @@
 import { useToast } from '../../../../../../common/toast';
 import { accelerationQueryBuilder } from '../visual_editors/query_builder';
 import { formValidator, hasError } from './utils';
+import {
+  ACC_CREATE_SUBMIT_SUCCESS_MSG,
+  ACC_CREATE_SUBMIT_FAIL_MSG,
+} from '../../utils/acceleration_utils';
 
 interface CreateAccelerationButtonProps {
   accelerationFormData: CreateAccelerationForm;
@@ -54,7 +58,7 @@
     const status = directqueryLoadStatus.toLowerCase();
     if (status === DirectQueryLoadingStatus.SUCCESS) {
       setIsLoading(false);
-      setToast('Create acceleration query submitted successfully!', 'success');
+      setToast(ACC_CREATE_SUBMIT_SUCCESS_MSG, 'success');
       if (refreshHandler) refreshHandler();
       resetFlyout();
     } else if (