[CCR] i18n feedback

x-pack/plugins/cross_cluster_replication/public/app/app.js

@@ -10,7 +10,7 @@ import { Route, Switch, Redirect } from 'react-router-dom';
 import chrome from 'ui/chrome';
 import { fatalError } from 'ui/notify';
 import { i18n } from '@kbn/i18n';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiEmptyPrompt,
@@ -36,186 +36,187 @@ import {
   FollowerIndexEdit,
 } from './sections';
 
-export const App = injectI18n(
-  class extends Component {
-    static contextTypes = {
-      router: PropTypes.shape({
-        history: PropTypes.shape({
-          push: PropTypes.func.isRequired,
-          createHref: PropTypes.func.isRequired
-        }).isRequired
+export class App extends Component {
+  static contextTypes = {
+    router: PropTypes.shape({
+      history: PropTypes.shape({
+        push: PropTypes.func.isRequired,
+        createHref: PropTypes.func.isRequired
       }).isRequired
-    }
+    }).isRequired
+  }
 
-    constructor(...args) {
-      super(...args);
-      this.registerRouter();
+  constructor(...args) {
+    super(...args);
+    this.registerRouter();
 
-      this.state = {
-        isFetchingPermissions: false,
-        fetchPermissionError: undefined,
-        hasPermission: false,
-        missingClusterPrivileges: [],
-      };
-    }
+    this.state = {
+      isFetchingPermissions: false,
+      fetchPermissionError: undefined,
+      hasPermission: false,
+      missingClusterPrivileges: [],
+    };
+  }
 
-    componentWillMount() {
-      routing.userHasLeftApp = false;
-    }
+  componentWillMount() {
+    routing.userHasLeftApp = false;
+  }
 
-    componentDidMount() {
-      this.checkPermissions();
-    }
+  componentDidMount() {
+    this.checkPermissions();
+  }
 
-    componentWillUnmount() {
-      routing.userHasLeftApp = true;
-    }
+  componentWillUnmount() {
+    routing.userHasLeftApp = true;
+  }
 
-    async checkPermissions() {
-      this.setState({
-        isFetchingPermissions: true,
-      });
+  async checkPermissions() {
+    this.setState({
+      isFetchingPermissions: true,
+    });
 
-      try {
-        const { hasPermission, missingClusterPrivileges } = await loadPermissions();
+    try {
+      const { hasPermission, missingClusterPrivileges } = await loadPermissions();
 
-        this.setState({
+      this.setState({
+        isFetchingPermissions: false,
+        hasPermission,
+        missingClusterPrivileges,
+      });
+    } catch (error) {
+      // Expect an error in the shape provided by Angular's $http service.
+      if (error && error.data) {
+        return this.setState({
           isFetchingPermissions: false,
-          hasPermission,
-          missingClusterPrivileges,
+          fetchPermissionError: error,
         });
-      } catch (error) {
-        // Expect an error in the shape provided by Angular's $http service.
-        if (error && error.data) {
-          return this.setState({
-            isFetchingPermissions: false,
-            fetchPermissionError: error,
-          });
-        }
-
-        // This error isn't an HTTP error, so let the fatal error screen tell the user something
-        // unexpected happened.
-        fatalError(error, i18n.translate('xpack.crossClusterReplication.app.checkPermissionsFatalErrorTitle', {
-          defaultMessage: 'Cross Cluster Replication app',
-        }));
       }
+
+      // This error isn't an HTTP error, so let the fatal error screen tell the user something
+      // unexpected happened.
+      fatalError(error, i18n.translate('xpack.crossClusterReplication.app.checkPermissionsFatalErrorTitle', {
+        defaultMessage: 'Cross Cluster Replication app',
+      }));
     }
+  }
+
+  registerRouter() {
+    const { router } = this.context;
+    routing.reactRouter = router;
+  }
+
+  render() {
+    const {
+      isFetchingPermissions,
+      fetchPermissionError,
+      hasPermission,
+      missingClusterPrivileges,
+    } = this.state;
 
-    registerRouter() {
-      const { router } = this.context;
-      routing.reactRouter = router;
+    if (!isAvailable() || !isActive()) {
+      return (
+        <SectionUnauthorized
+          title={(
+            <FormattedMessage
+              id="xpack.crossClusterReplication.app.licenseErrorTitle"
+              defaultMessage="License error"
+            />
+          )}
+        >
+          {getReason()}
+          {' '}
+          <a href={chrome.addBasePath('/app/kibana#/management/elasticsearch/license_management/home')}>
+            <FormattedMessage
+              id="xpack.crossClusterReplication.app.licenseErrorLinkText"
+              defaultMessage="Manage your license."
+            />
+          </a>
+        </SectionUnauthorized>
+      );
     }
 
-    render() {
-      const {
-        isFetchingPermissions,
-        fetchPermissionError,
-        hasPermission,
-        missingClusterPrivileges,
-      } = this.state;
+    if (isFetchingPermissions) {
+      return (
+        <EuiPageContent horizontalPosition="center">
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner size="l" />
+            </EuiFlexItem>
+
+            <EuiFlexItem>
+              <EuiTitle size="s">
+                <h2>
+                  <FormattedMessage
+                    id="xpack.crossClusterReplication.app.permissionCheckTitle"
+                    defaultMessage="Checking permissions…"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageContent>
+      );
+    }
 
-      if (!isAvailable() || !isActive()) {
-        return (
-          <SectionUnauthorized
+    if (fetchPermissionError) {
+      return (
+        <Fragment>
+          <SectionError
             title={(
               <FormattedMessage
-                id="xpack.crossClusterReplication.app.licenseErrorTitle"
-                defaultMessage="License error"
+                id="xpack.crossClusterReplication.app.permissionCheckErrorTitle"
+                defaultMessage="Error checking permissions"
               />
             )}
-          >
-            {getReason()}
-            {' '}
-            <a href={chrome.addBasePath('/app/kibana#/management/elasticsearch/license_management/home')}>
-              <FormattedMessage
-                id="xpack.crossClusterReplication.app.licenseErrorLinkText"
-                defaultMessage="Manage your license."
-              />
-            </a>
-          </SectionUnauthorized>
-        );
-      }
+            error={fetchPermissionError}
+          />
 
-      if (isFetchingPermissions) {
-        return (
-          <EuiPageContent horizontalPosition="center">
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiLoadingSpinner size="xl"/>
-              </EuiFlexItem>
-
-              <EuiFlexItem>
-                <EuiTitle>
-                  <h2>
-                    <FormattedMessage
-                      id="xpack.crossClusterReplication.app.permissionCheckTitle"
-                      defaultMessage="Checking permissions..."
-                    />
-                  </h2>
-                </EuiTitle>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPageContent>
-        );
-      }
+          <EuiSpacer size="m" />
+        </Fragment>
+      );
+    }
 
-      if (fetchPermissionError) {
-        return (
-          <Fragment>
-            <SectionError
-              title={(
+    if (!hasPermission) {
+      return (
+        <EuiPageContent horizontalPosition="center">
+          <EuiEmptyPrompt
+            iconType="securityApp"
+            iconColor={null}
+            title={
+              <h2>
                 <FormattedMessage
-                  id="xpack.crossClusterReplication.app.permissionCheckErrorTitle"
-                  defaultMessage="Error checking permissions"
+                  id="xpack.crossClusterReplication.app.deniedPermissionTitle"
+                  defaultMessage="You're missing cluster privileges"
                 />
-              )}
-              error={fetchPermissionError}
-            />
-
-            <EuiSpacer size="m" />
-          </Fragment>
-        );
-      }
-
-      if (!hasPermission) {
-        return (
-          <EuiPageContent horizontalPosition="center">
-            <EuiEmptyPrompt
-              iconType="securityApp"
-              iconColor={null}
-              title={
-                <h2>
-                  <FormattedMessage
-                    id="xpack.crossClusterReplication.app.deniedPermissionTitle"
-                    defaultMessage="You're missing cluster privileges"
-                  />
-                </h2>}
-              body={
-                <p>
-                  <FormattedMessage
-                    id="xpack.crossClusterReplication.app.deniedPermissionDescription"
-                    defaultMessage="To use Cross Cluster Replication, you must have {clusterPrivileges,
-                      plural, one {this cluster privilege} other {these cluster privileges}}: {clusterPrivileges}."
-                    values={{ clusterPrivileges: missingClusterPrivileges.join(', ') }}
-                  />
-                </p>}
-            />
-          </EuiPageContent>
-        );
-      }
-
-      return (
-        <div>
-          <Switch>
-            <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/follower_indices`} />
-            <Route exact path={`${BASE_PATH}/auto_follow_patterns/add`} component={AutoFollowPatternAdd} />
-            <Route exact path={`${BASE_PATH}/auto_follow_patterns/edit/:id`} component={AutoFollowPatternEdit} />
-            <Route exact path={`${BASE_PATH}/follower_indices/add`} component={FollowerIndexAdd} />
-            <Route exact path={`${BASE_PATH}/follower_indices/edit/:id`} component={FollowerIndexEdit} />
-            <Route exact path={`${BASE_PATH}/:section`} component={CrossClusterReplicationHome} />
-          </Switch>
-        </div>
+              </h2>}
+            body={
+              <p>
+                <FormattedMessage
+                  id="xpack.crossClusterReplication.app.deniedPermissionDescription"
+                  defaultMessage="To use Cross Cluster Replication, you must have {clusterPrivilegesCount,
+                    plural, one {this cluster privilege} other {these cluster privileges}}: {clusterPrivileges}."
+                  values={{
+                    clusterPrivileges: missingClusterPrivileges.join(', '),
+                    clusterPrivilegesCount: missingClusterPrivileges.length,
+                  }}
+                />
+              </p>}
+          />
+        </EuiPageContent>
       );
     }
+
+    return (
+      <div>
+        <Switch>
+          <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/follower_indices`} />
+          <Route exact path={`${BASE_PATH}/auto_follow_patterns/add`} component={AutoFollowPatternAdd} />
+          <Route exact path={`${BASE_PATH}/auto_follow_patterns/edit/:id`} component={AutoFollowPatternEdit} />
+          <Route exact path={`${BASE_PATH}/follower_indices/add`} component={FollowerIndexAdd} />
+          <Route exact path={`${BASE_PATH}/follower_indices/edit/:id`} component={FollowerIndexEdit} />
+          <Route exact path={`${BASE_PATH}/:section`} component={CrossClusterReplicationHome} />
+        </Switch>
+      </div>
+    );
   }
-);
+}