fix: internationalization fixes and code deduplication

splunk · Mar 16, 2021 · b41f33d · b41f33d
1 parent 86fffbe
commit b41f33d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 29 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ErrorBoundary.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ErrorBoundary.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import Heading from '@splunk/react-ui/Heading';
 import Message from '@splunk/react-ui/Message';
-import PropTypes from 'prop-types';
+import { _ } from '@splunk/ui-utils/i18n';
 
 import errorCodes from '../constants/errorCodes';
 
@@ -26,31 +28,21 @@ class ErrorBoundary extends React.Component {
     }
 
     render() {
-        if (this.state.errorCode) {
+        if (this.state.error) {
             // Error path
             return (
                 <>
                     <Heading level={2}>
-                        Something went wrong! (ERROR_CODE: {this.state.errorCode})
+                        {_('Something went wrong!')}
+                        {this.state.errorCode ? ` ERROR_CODE: ${this.state.errorCode}` : null}
                     </Heading>
-                    <Message type="info">{errorCodes[this.state.errorCode]}</Message>
-                    <details style={{ whiteSpace: 'pre-wrap' }}>
-                        {this.state.error && this.state.error.toString()}
-                        <br />
-                        {this.state.errorInfo && this.state.errorInfo.componentStack}
-                    </details>
-                </>
-            );
-        }
-
-        if (this.state.error) {
-            return (
-                <>
-                    <Heading level={2}>Something went wrong!</Heading>
+                    {this.state.errorCode ? (
+                        <Message type="info">{errorCodes[this.state.errorCode]}</Message>
+                    ) : null}
                     <details style={{ whiteSpace: 'pre-wrap' }}>
-                        {this.state.error && this.state.error.toString()}
+                        {this.state.error?.toString()}
                         <br />
-                        {this.state.errorInfo && this.state.errorInfo.componentStack}
+                        {this.state.errorInfo?.componentStack}
                     </details>
                 </>
             );

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx
@@ -19,6 +19,7 @@ function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {
     const [sortDir, setSortDir] = useState('asc');
     const unifiedConfigs = getUnifiedConfigs();
     const { moreInfo } = unifiedConfigs.pages.inputs.table;
+    // TODO: add multi field mapping support
     const statusMapping = moreInfo.filter((a) => a.mapping);
 
     const generateColumns = () => {
@@ -130,8 +131,8 @@ function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {
                                         disabled={row.__toggleDisable}
                                         appearance="toggle"
                                         style={{ padding: 0 }}
-                                        selectedLabel="Enabled"
-                                        unselectedLabel="Disabled"
+                                        selectedLabel={_(statusMapping[0].mapping.false)}
+                                        unselectedLabel={_(statusMapping[0].mapping.true)}
                                     >
                                         {statusContent}
                                     </Switch>

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
 import Select from '@splunk/react-ui/Select';
 import Paginator from '@splunk/react-ui/Paginator';
+import { _ } from '@splunk/ui-utils/i18n';
 
 import TableFilter from './TableFilter';
 import CustomTable from './CustomTable';
@@ -148,7 +149,7 @@ function TableWrapper({ isInput, serviceName }) {
             return <Select.Option key={service.name} label={service.title} value={service.name} />;
         });
 
-        arr.unshift(<Select.Option key="all" label="All" value="all" />);
+        arr.unshift(<Select.Option key="all" label={_('All')} value="all" />);
         return arr;
     };
 
@@ -217,8 +218,8 @@ function TableWrapper({ isInput, serviceName }) {
                     <ColumnLayout.Column span={4}>
                         <TableCaptionComponent>
                             <div>
-                                {totalElement} Input
-                                {totalElement > 1 && <span>s</span>}
+                                {totalElement}
+                                {totalElement > 1 ? _(' Inputs') : _(' Input')}
                                 <TableSelectBoxWrapper>
                                     <Select
                                         value={pageSize}

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
@@ -47,8 +47,8 @@ function InputPage({ isInput, serviceName }) {
             <ColumnLayout gutter={8}>
                 <ColumnLayout.Row style={{ padding: '5px 0px' }}>
                     <ColumnLayout.Column span={9}>
-                        <TitleComponent>{title}</TitleComponent>
-                        <SubTitleComponent>{description}</SubTitleComponent>
+                        <TitleComponent>{_(title)}</TitleComponent>
+                        <SubTitleComponent>{_(description)}</SubTitleComponent>
                     </ColumnLayout.Column>
                     {services && services.length > 1 && (
                         <ColumnLayout.Column span={3} style={{ textAlign: 'right' }}>

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/axiosCallWrapper.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/axiosCallWrapper.js
@@ -67,16 +67,14 @@ const axiosCallWrapper = (
               if (error.response) {
                   // The request was made and the server responded with a status code
                   message = `Error response received from server: ${error.response.data.messages[0].text}`;
-                  generateToast(message);
               } else if (error.request) {
                   // The request was made but no response was received
                   message = `No response received while making request to ${endpointUrl}`;
-                  generateToast(message);
               } else {
                   // Something happened in setting up the request that triggered an Error
                   message = `Error making ${method} request to ${endpointUrl}`;
-                  generateToast(message);
               }
+              generateToast(message);
               callbackOnError(error);
               return Promise.reject(error);
           })