[Workplace Search] Add i18n to Add Source component tree (#85590)

* Add i18n for AddSourceList * Add i18n for AvailableSourcesList * Replace all instances of interal Link This was missed during the migration. We need to use the components we wrap Eui components with internally. Also fixes some imports that were unnecessarily going up one level and back down for imports. * Add i18n for ConfigCompleted * Add i18n for ConfigDocsLinks * Add i18n for ConfigurationIntro * Add i18n for ConfigureCustom * Add i18n for ConfigureOauth * Add i18n for ConfiguredSourcesList * Add i18n for ReAuthenticate * Add i18n for shared field labels Also includea shared SourceConfigFields * Add i18n for SaveConfig * Add i18n for SaveCustom * Add i18n for SourceFeatures * Add i18n for ConnectInstance * Fix duplicate i18n ID Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 15, 2020 · 7c6f1b8 · 7c6f1b8
1 parent 43e2011
commit 7c6f1b8
Show file tree

Hide file tree

Showing 18 changed files with 947 additions and 209 deletions.
diff --git a/...ications/workplace_search/components/shared/source_config_fields/source_config_fields.tsx b/...ications/workplace_search/components/shared/source_config_fields/source_config_fields.tsx
@@ -8,6 +8,14 @@ import React from 'react';
 
 import { EuiSpacer } from '@elastic/eui';
 
+import {
+  PUBLIC_KEY_LABEL,
+  CONSUMER_KEY_LABEL,
+  BASE_URL_LABEL,
+  CLIENT_ID_LABEL,
+  CLIENT_SECRET_LABEL,
+} from '../../../constants';
+
 import { ApiKey } from '../api_key';
 import { CredentialItem } from '../credential_item';
 
@@ -35,13 +43,13 @@ export const SourceConfigFields: React.FC<SourceConfigFieldsProps> = ({
     <>
       {publicKey && (
         <>
-          <ApiKey label="Public Key" apiKey={publicKey} />
+          <ApiKey label={PUBLIC_KEY_LABEL} apiKey={publicKey} />
           <EuiSpacer />
         </>
       )}
       {consumerKey && (
         <>
-          <ApiKey label="Consumer Key" apiKey={consumerKey} />
+          <ApiKey label={CONSUMER_KEY_LABEL} apiKey={consumerKey} />
           <EuiSpacer />
         </>
       )}
@@ -51,11 +59,11 @@ export const SourceConfigFields: React.FC<SourceConfigFieldsProps> = ({
   return (
     <>
       {showApiKey && keyElement}
-      {credentialItem('Client id', clientId)}
+      {credentialItem(CLIENT_ID_LABEL, clientId)}
       <EuiSpacer size="s" />
-      {credentialItem('Client secret', clientSecret)}
+      {credentialItem(CLIENT_SECRET_LABEL, clientSecret)}
       <EuiSpacer size="s" />
-      {credentialItem('Base URL', baseUrl)}
+      {credentialItem(BASE_URL_LABEL, baseUrl)}
     </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/constants.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/constants.ts
@@ -260,3 +260,52 @@ export const GITHUB_LINK_TITLE = i18n.translate(
 );
 
 export const CUSTOM_SERVICE_TYPE = 'custom';
+
+export const DOCUMENTATION_LINK_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearch.sources.documentation',
+  {
+    defaultMessage: 'Documentation',
+  }
+);
+
+export const PUBLIC_KEY_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearc.publicKey.label',
+  {
+    defaultMessage: 'Public Key',
+  }
+);
+
+export const CONSUMER_KEY_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearc.consumerKey.label',
+  {
+    defaultMessage: 'Consumer Key',
+  }
+);
+
+export const BASE_URI_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearc.baseUri.label',
+  {
+    defaultMessage: 'Base URI',
+  }
+);
+
+export const BASE_URL_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearc.baseUrl.label',
+  {
+    defaultMessage: 'Base URL',
+  }
+);
+
+export const CLIENT_ID_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearc.clientId.label',
+  {
+    defaultMessage: 'Client id',
+  }
+);
+
+export const CLIENT_SECRET_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearc.clientSecret.label',
+  {
+    defaultMessage: 'Client secret',
+  }
+);
diff --git a/...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx b/...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx
@@ -26,21 +26,22 @@ import { Loading } from '../../../../../../applications/shared/loading';
 import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
 import { SourceDataItem } from '../../../../types';
 
+import {
+  ADD_SOURCE_NEW_SOURCE_DESCRIPTION,
+  ADD_SOURCE_ORG_SOURCE_DESCRIPTION,
+  ADD_SOURCE_PRIVATE_SOURCE_DESCRIPTION,
+  ADD_SOURCE_NO_SOURCES_TITLE,
+  ADD_SOURCE_ORG_SOURCES_TITLE,
+  ADD_SOURCE_PRIVATE_SOURCES_TITLE,
+  ADD_SOURCE_PLACEHOLDER,
+  ADD_SOURCE_EMPTY_TITLE,
+  ADD_SOURCE_EMPTY_BODY,
+} from './constants';
+
 import { SourcesLogic } from '../../sources_logic';
 import { AvailableSourcesList } from './available_sources_list';
 import { ConfiguredSourcesList } from './configured_sources_list';
 
-const NEW_SOURCE_DESCRIPTION =
-  'When configuring and connecting a source, you are creating distinct entities with searchable content synchronized from the content platform itself. A source can be added using one of the available source connectors or via Custom API Sources, for additional flexibility. ';
-const ORG_SOURCE_DESCRIPTION =
-  'Shared content sources are available to your entire organization or can be assigned to specific user groups.';
-const PRIVATE_SOURCE_DESCRIPTION =
-  'Connect a new source to add its content and documents to your search experience.';
-const NO_SOURCES_TITLE = 'Configure and connect your first content source';
-const ORG_SOURCES_TITLE = 'Add a shared content source';
-const PRIVATE_SOURCES_TITLE = 'Add a new content source';
-const PLACEHOLDER = 'Filter sources...';
-
 export const AddSourceList: React.FC = () => {
   const { contentSources, dataLoading, availableSources, configuredSources } = useValues(
     SourcesLogic
@@ -64,14 +65,16 @@ export const AddSourceList: React.FC = () => {
     ({ serviceType }) => serviceType !== CUSTOM_SERVICE_TYPE
   );
 
-  const BASE_DESCRIPTION = hasSources ? '' : NEW_SOURCE_DESCRIPTION;
+  const BASE_DESCRIPTION = hasSources ? '' : ADD_SOURCE_NEW_SOURCE_DESCRIPTION;
   const PAGE_CONTEXT_DESCRIPTION = isOrganization
-    ? ORG_SOURCE_DESCRIPTION
-    : PRIVATE_SOURCE_DESCRIPTION;
+    ? ADD_SOURCE_ORG_SOURCE_DESCRIPTION
+    : ADD_SOURCE_PRIVATE_SOURCE_DESCRIPTION;
 
   const PAGE_DESCRIPTION = BASE_DESCRIPTION + PAGE_CONTEXT_DESCRIPTION;
-  const HAS_SOURCES_TITLE = isOrganization ? ORG_SOURCES_TITLE : PRIVATE_SOURCES_TITLE;
-  const PAGE_TITLE = hasSources ? HAS_SOURCES_TITLE : NO_SOURCES_TITLE;
+  const HAS_SOURCES_TITLE = isOrganization
+    ? ADD_SOURCE_ORG_SOURCES_TITLE
+    : ADD_SOURCE_PRIVATE_SOURCES_TITLE;
+  const PAGE_TITLE = hasSources ? HAS_SOURCES_TITLE : ADD_SOURCE_NO_SOURCES_TITLE;
 
   const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value);
 
@@ -106,7 +109,7 @@ export const AddSourceList: React.FC = () => {
               value={filterValue}
               onChange={handleFilterChange}
               fullWidth={true}
-              placeholder={PLACEHOLDER}
+              placeholder={ADD_SOURCE_PLACEHOLDER}
             />
           </EuiFormRow>
           <EuiSpacer size="xxl" />
@@ -128,13 +131,8 @@ export const AddSourceList: React.FC = () => {
                 <EuiSpacer size="xxl" />
                 <EuiEmptyPrompt
                   iconType={noSharedSourcesIcon}
-                  title={<h2>No available sources</h2>}
-                  body={
-                    <p>
-                      Sources will be available for search when an administrator adds them to this
-                      organization.
-                    </p>
-                  }
+                  title={<h2>{ADD_SOURCE_EMPTY_TITLE}</h2>}
+                  body={<p>{ADD_SOURCE_EMPTY_BODY}</p>}
                 />
                 <EuiSpacer size="xxl" />
                 <EuiSpacer size="m" />

diff --git a/...s/workplace_search/views/content_sources/components/add_source/available_sources_list.tsx b/...s/workplace_search/views/content_sources/components/add_source/available_sources_list.tsx
@@ -5,7 +5,8 @@
  */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
+
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiCard,
@@ -19,12 +20,20 @@ import {
 
 import { useValues } from 'kea';
 
-import { LicensingLogic } from '../../../../../../applications/shared/licensing';
+import { LicensingLogic } from '../../../../../shared/licensing';
+import { EuiLinkTo } from '../../../../../shared/react_router_helpers';
 
 import { SourceIcon } from '../../../../components/shared/source_icon';
 import { SourceDataItem } from '../../../../types';
 import { ADD_CUSTOM_PATH, getSourcesPath } from '../../../../routes';
 
+import {
+  AVAILABLE_SOURCE_EMPTY_STATE,
+  AVAILABLE_SOURCE_TITLE,
+  AVAILABLE_SOURCE_BODY,
+  AVAILABLE_SOURCE_CUSTOM_SOURCE_BUTTON,
+} from './constants';
+
 interface AvailableSourcesListProps {
   sources: SourceDataItem[];
 }
@@ -54,13 +63,20 @@ export const AvailableSourcesList: React.FC<AvailableSourcesListProps> = ({ sour
       return (
         <EuiToolTip
           position="top"
-          content={`${name} is configurable as a Private Source, available with a Platinum subscription.`}
+          content={i18n.translate(
+            'xpack.enterpriseSearch.workplaceSearch.contentSource.availableSourceList.toolTipContent',
+            {
+              defaultMessage:
+                '{name} is configurable as a Private Source, available with a Platinum subscription.',
+              values: { name },
+            }
+          )}
         >
           {card}
         </EuiToolTip>
       );
     }
-    return <Link to={getSourcesPath(addPath, true)}>{card}</Link>;
+    return <EuiLinkTo to={getSourcesPath(addPath, true)}>{card}</EuiLinkTo>;
   };
 
   const visibleSources = (
@@ -73,19 +89,24 @@ export const AvailableSourcesList: React.FC<AvailableSourcesListProps> = ({ sour
     </EuiFlexGrid>
   );
 
-  const emptyState = <p>No available sources matching your query.</p>;
+  const emptyState = (
+    <p data-test-subj="AvailableSourceEmptyState">{AVAILABLE_SOURCE_EMPTY_STATE}</p>
+  );
 
   return (
     <>
       <EuiTitle size="s">
-        <h2>Available for configuration</h2>
+        <h2>{AVAILABLE_SOURCE_TITLE}</h2>
       </EuiTitle>
       <EuiText>
         <p>
-          Configure an available source or build your own with the{' '}
-          <Link to={getSourcesPath(ADD_CUSTOM_PATH, true)} data-test-subj="CustomAPISourceLink">
-            Custom API Source
-          </Link>
+          {AVAILABLE_SOURCE_BODY}
+          <EuiLinkTo
+            to={getSourcesPath(ADD_CUSTOM_PATH, true)}
+            data-test-subj="CustomAPISourceLink"
+          >
+            {AVAILABLE_SOURCE_CUSTOM_SOURCE_BUTTON}
+          </EuiLinkTo>
           .
         </p>
       </EuiText>

diff --git a/...cations/workplace_search/views/content_sources/components/add_source/config_completed.tsx b/...cations/workplace_search/views/content_sources/components/add_source/config_completed.tsx
@@ -6,7 +6,8 @@
 
 import React from 'react';
 
-import { Link } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiButton,
@@ -26,6 +27,13 @@ import {
   PRIVATE_SOURCES_DOCS_URL,
 } from '../../../../routes';
 
+import { EuiLinkTo, EuiButtonTo } from '../../../../../shared/react_router_helpers';
+
+import {
+  CONFIG_COMPLETED_PRIVATE_SOURCES_DOCS_LINK,
+  CONFIG_COMPLETED_CONFIGURE_NEW_BUTTON,
+} from './constants';
+
 interface ConfigCompletedProps {
   header: React.ReactNode;
   name: string;
@@ -58,28 +66,59 @@ export const ConfigCompleted: React.FC<ConfigCompletedProps> = ({
           <EuiFlexItem>
             <EuiText>
               <EuiTextAlign textAlign="center">
-                <h1>{name} Configured</h1>
+                <h1>
+                  {i18n.translate(
+                    'xpack.enterpriseSearch.workplaceSearch.contentSource.configCompleted.heading',
+                    {
+                      defaultMessage: '{name} Configured',
+                      values: { name },
+                    }
+                  )}
+                </h1>
               </EuiTextAlign>
             </EuiText>
             <EuiText>
               <EuiTextAlign textAlign="center">
                 {!accountContextOnly ? (
-                  <p>{name} can now be connected to Workplace Search</p>
+                  <p>
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.workplaceSearch.contentSource.configCompleted.orgCanConnect.message',
+                      {
+                        defaultMessage: '{name} can now be connected to Workplace Search',
+                        values: { name },
+                      }
+                    )}
+                  </p>
                 ) : (
                   <EuiText color="subdued" grow={false}>
-                    <p>Users can now link their {name} accounts from their personal dashboards.</p>
+                    <p>
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.workplaceSearch.contentSource.configCompleted.personalConnectLink.message',
+                        {
+                          defaultMessage:
+                            'Users can now link their {name} accounts from their personal dashboards.',
+                          values: { name },
+                        }
+                      )}
+                    </p>
                     {!privateSourcesEnabled && (
                       <p>
-                        Remember to{' '}
-                        <Link to={SECURITY_PATH}>
-                          <EuiLink>enable private source connection</EuiLink>
-                        </Link>{' '}
-                        in Security settings.
+                        <FormattedMessage
+                          id="xpack.enterpriseSearch.workplaceSearch.contentSource.configCompleted.privateDisabled.message"
+                          defaultMessage="Remember to {securityLink} in Security settings."
+                          values={{
+                            securityLink: (
+                              <EuiLinkTo to={SECURITY_PATH}>
+                                enable private source connection
+                              </EuiLinkTo>
+                            ),
+                          }}
+                        />
                       </p>
                     )}
                     <p>
                       <EuiLink target="_blank" href={PRIVATE_SOURCES_DOCS_URL}>
-                        Learn more about private content sources.
+                        {CONFIG_COMPLETED_PRIVATE_SOURCES_DOCS_LINK}
                       </EuiLink>
                     </p>
                   </EuiText>
@@ -93,16 +132,25 @@ export const ConfigCompleted: React.FC<ConfigCompletedProps> = ({
     <EuiSpacer />
     <EuiFlexGroup justifyContent="center" alignItems="center" direction="row" responsive={false}>
       <EuiFlexItem grow={false}>
-        <Link to={getSourcesPath(ADD_SOURCE_PATH, true)}>
-          <EuiButton fill={accountContextOnly} color={accountContextOnly ? 'primary' : undefined}>
-            Configure&nbsp;a&nbsp;new&nbsp;content&nbsp;source
-          </EuiButton>
-        </Link>
+        <EuiButtonTo
+          to={getSourcesPath(ADD_SOURCE_PATH, true)}
+          fill={accountContextOnly}
+          color={accountContextOnly ? 'primary' : undefined}
+          className="eui-textNoWrap"
+        >
+          {CONFIG_COMPLETED_CONFIGURE_NEW_BUTTON}
+        </EuiButtonTo>
       </EuiFlexItem>
       {!accountContextOnly && (
         <EuiFlexItem grow={false}>
-          <EuiButton color="primary" fill onClick={advanceStep}>
-            Connect&nbsp;{name}
+          <EuiButton color="primary" className="eui-textNoWrap" fill onClick={advanceStep}>
+            {i18n.translate(
+              'xpack.enterpriseSearch.workplaceSearch.contentSource.configCompleted.connect.button',
+              {
+                defaultMessage: 'Connect {name}',
+                values: { name },
+              }
+            )}
           </EuiButton>
         </EuiFlexItem>
       )}