Fix dynamic uses of i18n and correct unprefixed and duplicate i18n id…

…entifiers in dataSourceManagement plugin (#8394) * Fix dynamic uses of i18n and correct unprefixed and duplicate i18n identifiers in dataSourceManagement plugin Signed-off-by: Miki <[email protected]> * Changeset file for PR #8394 created/updated --------- Signed-off-by: Miki <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 9da5f9b) Signed-off-by: Miki <[email protected]>
opensearch-project · Oct 7, 2024 · 98818c3 · 98818c3
1 parent c5462c3
commit 98818c3
Show file tree

Hide file tree

Showing 43 changed files with 429 additions and 347 deletions.
diff --git a/changelogs/fragments/8394.yml b/changelogs/fragments/8394.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix dynamic and correct unprefixed and duplicate i18n identifiers in dataSourceManagement plugin ([#8394](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8394))
diff --git a/src/plugins/data_source_management/public/components/breadcrumbs.ts b/src/plugins/data_source_management/public/components/breadcrumbs.ts
@@ -28,16 +28,24 @@ export function getCreateBreadcrumbs() {
     },
   ];
 }
+
 export function getCreateOpenSearchDataSourceBreadcrumbs(useNewUX: boolean) {
   return [
     ...getCreateBreadcrumbs(),
     {
-      text: i18n.translate(
-        'dataSourcesManagement.dataSources.createOpenSearchDataSourceBreadcrumbs',
-        {
-          defaultMessage: useNewUX ? 'Connect OpenSearch Cluster' : 'Open Search',
-        }
-      ),
+      text: useNewUX
+        ? i18n.translate(
+            'dataSourcesManagement.dataSources.createOpenSearchDataSourceBreadcrumbs',
+            {
+              defaultMessage: 'Connect OpenSearch Cluster',
+            }
+          )
+        : i18n.translate(
+            'dataSourcesManagement.legacyUX.dataSources.createOpenSearchDataSourceBreadcrumbs',
+            {
+              defaultMessage: 'Open Search',
+            }
+          ),
       href: `/configure/OpenSearch`,
     },
   ];
@@ -47,12 +55,16 @@ export function getCreateAmazonS3DataSourceBreadcrumbs(useNewUX: boolean) {
   return [
     ...getCreateBreadcrumbs(),
     {
-      text: i18n.translate(
-        'dataSourcesManagement.dataSources.createAmazonS3DataSourceBreadcrumbs',
-        {
-          defaultMessage: useNewUX ? 'Connect Amazon S3' : 'Amazon S3',
-        }
-      ),
+      text: useNewUX
+        ? i18n.translate('dataSourcesManagement.dataSources.createAmazonS3DataSourceBreadcrumbs', {
+            defaultMessage: 'Connect Amazon S3',
+          })
+        : i18n.translate(
+            'dataSourcesManagement.legacyUX.dataSources.createAmazonS3DataSourceBreadcrumbs',
+            {
+              defaultMessage: 'Amazon S3',
+            }
+          ),
       href: `/configure/AmazonS3AWSGlue`,
     },
   ];
@@ -62,12 +74,19 @@ export function getCreatePrometheusDataSourceBreadcrumbs(useNewUX: boolean) {
   return [
     ...getCreateBreadcrumbs(),
     {
-      text: i18n.translate(
-        'dataSourcesManagement.dataSources.createPrometheusDataSourceBreadcrumbs',
-        {
-          defaultMessage: useNewUX ? 'Connect Prometheus' : 'Prometheus',
-        }
-      ),
+      text: useNewUX
+        ? i18n.translate(
+            'dataSourcesManagement.dataSources.createPrometheusDataSourceBreadcrumbs',
+            {
+              defaultMessage: 'Connect Prometheus',
+            }
+          )
+        : i18n.translate(
+            'dataSourcesManagement.legacyUX.dataSources.createPrometheusDataSourceBreadcrumbs',
+            {
+              defaultMessage: 'Prometheus',
+            }
+          ),
       href: `/configure/Prometheus`,
     },
   ];
@@ -77,12 +96,7 @@ export function getManageDirectQueryDataSourceBreadcrumbs(directQueryDatasourceN
   return [
     ...getListBreadcrumbs(),
     {
-      text: i18n.translate(
-        'dataSourcesManagement.dataSources.manageDirectQueryDataSourceBreadcrumbs',
-        {
-          defaultMessage: directQueryDatasourceName,
-        }
-      ),
+      text: directQueryDatasourceName,
       href: `/manage/${directQueryDatasourceName}`,
     },
   ];

diff --git a/src/plugins/data_source_management/public/components/constants.tsx b/src/plugins/data_source_management/public/components/constants.tsx
@@ -5,20 +5,15 @@
 
 import { i18n } from '@osd/i18n';
 import { DataSourceOption } from './data_source_menu/types';
-import { DatasourceType } from '../types';
+import { DatasourceType } from '../../framework/types';
 
 export const LocalCluster: DataSourceOption = {
-  label: i18n.translate('dataSource.localCluster', {
+  label: i18n.translate('dataSourcesManagement.localCluster', {
     defaultMessage: 'Local cluster',
   }),
   id: '',
 };
 
-export const NO_DATASOURCES_CONNECTED_MESSAGE = 'No data sources connected yet.';
-export const CONNECT_DATASOURCES_MESSAGE = 'Connect your data sources to get started.';
-export const NO_COMPATIBLE_DATASOURCES_MESSAGE = 'No compatible data sources are available.';
-export const ADD_COMPATIBLE_DATASOURCES_MESSAGE = 'Add a compatible data source.';
-
 export { DEFAULT_DATA_SOURCE_UI_SETTINGS_ID } from '../../common';
 
 export const OPENSEARCH_DOCUMENTATION_URL =

diff --git a/...urce_management/public/components/create_button/__snapshots__/create_button.test.tsx.snap b/...urce_management/public/components/create_button/__snapshots__/create_button.test.tsx.snap
diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.tsx
@@ -23,12 +23,17 @@ export const CreateButton = ({ history, isEmptyState, dataTestSubj, featureFlagS
       fill={isEmptyState ? false : true}
       onClick={() => history.push('/create')}
     >
-      <FormattedMessage
-        id="dataSourcesManagement.dataSourceListing.createButton"
-        defaultMessage={
-          featureFlagStatus ? 'Create data source connection' : 'Create direct query connection'
-        }
-      />
+      {featureFlagStatus ? (
+        <FormattedMessage
+          id="dataSourcesManagement.dataSourceListing.createDataSourceButton"
+          defaultMessage="Create data source connection"
+        />
+      ) : (
+        <FormattedMessage
+          id="dataSourcesManagement.dataSourceListing.createDirectQueryButton"
+          defaultMessage="Create direct query connection"
+        />
+      )}
     </EuiSmallButton>
   );
 };
diff --git a/...c/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/...c/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -47,6 +47,7 @@ import {
   getDefaultAuthMethod,
   isValidUrl,
 } from '../../../utils';
+import { DataSourceOptionalLabelSuffix } from '../../../data_source_optional_label_suffix';
 
 export interface CreateDataSourceProps {
   useNewUX: boolean;
@@ -399,36 +400,6 @@ export class CreateDataSourceForm extends React.Component<
     );
   };
 
-  /* Render Section header*/
-  renderSectionHeader = (i18nId: string, defaultMessage: string) => {
-    return (
-      <>
-        <EuiText grow={false} size="s">
-          <h2>
-            <FormattedMessage id={i18nId} defaultMessage={defaultMessage} />
-          </h2>
-        </EuiText>
-      </>
-    );
-  };
-  /* Render field label with Optional text*/
-  renderFieldLabelAsOptional = (i18nId: string, defaultMessage: string) => {
-    return (
-      <>
-        {<FormattedMessage id={i18nId} defaultMessage={defaultMessage} />}{' '}
-        <i style={{ fontWeight: 'normal' }}>
-          -{' '}
-          {
-            <FormattedMessage
-              id="dataSourcesManagement.createDataSource.optionalText"
-              defaultMessage="optional"
-            />
-          }
-        </i>
-      </>
-    );
-  };
-
   /* Render create new credentials*/
   renderCreateNewCredentialsForm = (type: AuthType) => {
     switch (type) {
@@ -581,10 +552,14 @@ export class CreateDataSourceForm extends React.Component<
           {this.renderHeader()}
           <EuiForm data-test-subj="data-source-creation">
             {/* Endpoint section */}
-            {this.renderSectionHeader(
-              'dataSourceManagement.connectToDataSource.connectionDetails',
-              'Connection Details'
-            )}
+            <EuiText grow={false} size="s">
+              <h2>
+                <FormattedMessage
+                  id="dataSourcesManagement.connectToDataSource.connectionDetails"
+                  defaultMessage="Connection Details"
+                />
+              </h2>
+            </EuiText>
             <EuiSpacer size="s" />
 
             {/* Title */}
@@ -613,10 +588,13 @@ export class CreateDataSourceForm extends React.Component<
 
             {/* Description */}
             <EuiCompressedFormRow
-              label={this.renderFieldLabelAsOptional(
-                'dataSourceManagement.createDataSource.description',
-                'Description'
-              )}
+              label={
+                <FormattedMessage
+                  id="dataSourcesManagement.createDataSource.descriptionOptional"
+                  defaultMessage="Description {optionalLabel}"
+                  values={{ optionalLabel: <DataSourceOptionalLabelSuffix /> }}
+                />
+              }
             >
               <EuiCompressedFieldText
                 name="dataSourceDescription"
@@ -660,32 +638,31 @@ export class CreateDataSourceForm extends React.Component<
 
             <EuiSpacer size="xl" />
 
-            {this.renderSectionHeader(
-              'dataSourceManagement.connectToDataSource.authenticationHeader',
-              'Authentication Method'
-            )}
+            <EuiText grow={false} size="s">
+              <h2>
+                <FormattedMessage
+                  id="dataSourcesManagement.connectToDataSource.authenticationHeader"
+                  defaultMessage="Authentication Method"
+                />
+              </h2>
+            </EuiText>
+
             <EuiSpacer size="m" />
 
             <EuiCompressedFormRow>
               <EuiText size="s">
-                <FormattedMessage
-                  id="dataSourcesManagement.createDataSource.authenticationMethodDescription"
-                  defaultMessage="Enter the authentication details to access the endpoint."
-                />
-                {this.isNoAuthOptionEnabled && (
+                {this.isNoAuthOptionEnabled ? (
+                  <FormattedMessage
+                    id="dataSourcesManagement.createDataSource.authenticationMethodDescriptionWithNoAuth"
+                    defaultMessage="Enter the authentication details to access the endpoint. If no authentication is required, select {buttonLabel}."
+                    values={{ buttonLabel: <b>No authentication</b> }}
+                  />
+                ) : (
                   <FormattedMessage
                     id="dataSourcesManagement.createDataSource.authenticationMethodDescription"
-                    defaultMessage=" If no authentication is required, select "
+                    defaultMessage="Enter the authentication details to access the endpoint."
                   />
                 )}
-                {this.isNoAuthOptionEnabled && (
-                  <b>
-                    <FormattedMessage
-                      id="dataSourcesManagement.createDataSource.noAuthentication"
-                      defaultMessage="No authentication"
-                    />
-                  </b>
-                )}
               </EuiText>
             </EuiCompressedFormRow>
 

diff --git a/...urce_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx b/...urce_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
@@ -11,8 +11,8 @@ import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react
 import {
   DataSourceAttributes,
   DataSourceManagementContext,
+  DataSourceManagementToastMessageItem,
   DataSourceTableItem,
-  ToastMessageItem,
 } from '../../types';
 import { getCreateOpenSearchDataSourceBreadcrumbs } from '../breadcrumbs';
 import { CreateDataSourceForm } from './components/create_form';
@@ -65,8 +65,9 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
       }
     } catch (e) {
       handleDisplayToastMessage({
-        id: 'dataSourcesManagement.createDataSource.existingDatasourceNames',
-        defaultMessage: 'Unable to fetch some resources.',
+        message: i18n.translate('dataSourcesManagement.createDataSource.existingDatasourceNames', {
+          defaultMessage: 'Unable to fetch some resources.',
+        }),
       });
       props.history.push('');
     } finally {
@@ -90,8 +91,9 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
     } catch (e) {
       setIsLoading(false);
       handleDisplayToastMessage({
-        id: 'dataSourcesManagement.createDataSource.createDataSourceFailMsg',
-        defaultMessage: 'Creation of the Data Source failed with some errors.',
+        message: i18n.translate('dataSourcesManagement.createDataSource.createDataSourceFailMsg', {
+          defaultMessage: 'Creation of the Data Source failed with some errors.',
+        }),
       });
     }
   };
@@ -102,27 +104,32 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
     try {
       await testConnection(http, attributes);
       handleDisplayToastMessage({
-        id: 'dataSourcesManagement.createDataSource.testConnectionSuccessMsg',
-        defaultMessage:
-          'Connecting to the endpoint using the provided authentication method was successful.',
+        message: i18n.translate('dataSourcesManagement.createDataSource.testConnectionSuccessMsg', {
+          defaultMessage:
+            'Connecting to the endpoint using the provided authentication method was successful.',
+        }),
         success: true,
       });
     } catch (e) {
       handleDisplayToastMessage({
-        id: 'dataSourcesManagement.createDataSource.testConnectionFailMsg',
-        defaultMessage:
-          'Failed Connecting to the endpoint using the provided authentication method.',
+        message: i18n.translate('dataSourcesManagement.createDataSource.testConnectionFailMsg', {
+          defaultMessage:
+            'Failed Connecting to the endpoint using the provided authentication method.',
+        }),
       });
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleDisplayToastMessage = ({ id, defaultMessage, success }: ToastMessageItem) => {
+  const handleDisplayToastMessage = ({
+    message,
+    success,
+  }: DataSourceManagementToastMessageItem) => {
     if (success) {
-      toasts.addSuccess(i18n.translate(id, { defaultMessage }));
+      toasts.addSuccess(message);
     } else {
-      toasts.addDanger(i18n.translate(id, { defaultMessage }));
+      toasts.addDanger(message);
     }
   };
 

diff --git a/...gement/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx b/...gement/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx
@@ -425,7 +425,8 @@ describe('DataSourceAggregatedView empty state test due to filter out with local
           dataSourceFilter={filter}
         />
       );
-      const noCompatibleDataSourcesMessage = `${NO_COMPATIBLE_DATASOURCES_MESSAGE} ${ADD_COMPATIBLE_DATASOURCES_MESSAGE}`;
+      const noCompatibleDataSourcesMessage =
+        'No compatible data sources are available. Add a compatible data source.';
 
       expect(component).toMatchSnapshot();
       await nextTick();
@@ -528,8 +529,10 @@ describe('DataSourceAggregatedView warning messages', () => {
   const dataSourceSelection = new DataSourceSelectionService();
   const nextTick = () => new Promise((res) => process.nextTick(res));
   let toasts: IToasts;
-  const noDataSourcesConnectedMessage = `${NO_DATASOURCES_CONNECTED_MESSAGE} ${CONNECT_DATASOURCES_MESSAGE}`;
-  const noCompatibleDataSourcesMessage = `${NO_COMPATIBLE_DATASOURCES_MESSAGE} ${ADD_COMPATIBLE_DATASOURCES_MESSAGE}`;
+  const noDataSourcesConnectedMessage =
+    'No data sources connected yet. Connect your data sources to get started.';
+  const noCompatibleDataSourcesMessage =
+    'No compatible data sources are available. Add a compatible data source.';
 
   beforeEach(() => {
     toasts = notificationServiceMock.createStartContract().toasts;
@@ -576,11 +579,7 @@ describe('DataSourceAggregatedView warning messages', () => {
       );
       await nextTick();
 
-      expect(toasts.add).toBeCalledWith(
-        expect.objectContaining({
-          title: i18n.translate('dataSource.noAvailableDataSourceError', { defaultMessage }),
-        })
-      );
+      expect(toasts.add).toBeCalledWith(expect.objectContaining({ title: defaultMessage }));
     }
   );
 });