Merge pull request #24 from contentful/smartling-fixes

adding more error handling to smartling
contentful · Feb 12, 2020 · 6fd3174 · 6fd3174
2 parents 56fc7a1 + 9128448
commit 6fd3174
Show file tree

Hide file tree

Showing 5 changed files with 376 additions and 11 deletions.
diff --git a/apps/smartling/frontend/src/AppConfig.tsx b/apps/smartling/frontend/src/AppConfig.tsx
@@ -6,7 +6,8 @@ import {
   Typography,
   FieldGroup,
   CheckboxField,
-  TextField
+  TextField,
+  TextLink
 } from '@contentful/forma-36-react-components';
 import get from 'lodash.get';
 // @ts-ignore 2307
@@ -85,7 +86,7 @@ export default class AppConfig extends React.Component<Props, State> {
   };
 
   setProjectId(id: string) {
-    this.setState({ projectId: id });
+    this.setState({ projectId: id.trim() });
   }
 
   toggleCt(id: string) {
@@ -115,7 +116,7 @@ export default class AppConfig extends React.Component<Props, State> {
                 <Heading>About Smartling</Heading>
                 <Paragraph className="about-p">
                   This app allows you to view the translation status of entries in the Contentful
-                  web app and easily find corresponding entries within Smartling.
+                  web app and easily find corresponding entries within a <TextLink href="https://dashboard.smartling.com" target="_blank" rel="noopener noreferrer">Smartling</TextLink> project. 
                 </Paragraph>
               </Typography>
               <hr />
@@ -134,7 +135,7 @@ export default class AppConfig extends React.Component<Props, State> {
                 value={this.state.projectId}
                 // @ts-ignore 2339
                 onChange={e => this.setProjectId(e.target.value)}
-                helpText="To get the project ID, see the 'API' settings of your Smartling project."
+                helpText="To get the project ID, see the 'Project Settings > API' of your Smartling project."
               />
               <Typography>
                 <Heading>Assign to content types</Heading>

diff --git a/apps/smartling/frontend/src/Sidebar.tsx b/apps/smartling/frontend/src/Sidebar.tsx
@@ -10,7 +10,8 @@ import {
   TextLink,
   SkeletonContainer,
   SkeletonImage,
-  Spinner
+  Spinner,
+  Note
 } from '@contentful/forma-36-react-components';
 import smartlingClient from './smartlingClient';
 
@@ -24,6 +25,7 @@ interface State {
   token: string;
   refreshToken: string;
   showAllSubs: boolean;
+  generalError: boolean;
 }
 
 const SUBS_TO_SHOW = 3;
@@ -127,7 +129,8 @@ export default class Sidebar extends React.Component<Props, State> {
     smartlingEntry: null,
     token: window.localStorage.getItem('token') || '',
     refreshToken: window.localStorage.getItem('refreshToken') || '',
-    showAllSubs: false
+    showAllSubs: false,
+    generalError: false,
   };
 
   componentDidMount() {
@@ -177,6 +180,8 @@ export default class Sidebar extends React.Component<Props, State> {
         smartlingEntry: formatSmartlingEntry(res.data),
         showAllSubs: res.data.translationSubmissions.length <= SUBS_TO_SHOW
       });
+    } else {
+      this.setState({generalError: true});
     }
   };
 
@@ -197,7 +202,7 @@ export default class Sidebar extends React.Component<Props, State> {
 
   render() {
     const { sdk, projectId } = this.props;
-    const { smartlingEntry, token, showAllSubs } = this.state;
+    const { smartlingEntry, token, showAllSubs, generalError } = this.state;
     const smartlingLink = makeSmartlingLink(projectId, sdk.ids.entry, sdk.ids.space);
 
     const requestButton = (
@@ -293,8 +298,23 @@ export default class Sidebar extends React.Component<Props, State> {
           </div>
         );
       } else {
+        statusTag = <></>;
         smartlingBody = <></>;
       }
+    } else if (generalError) {
+        statusTag = (
+        <Tag className="job-status" tagType="negative">
+          Disconnected
+        </Tag>
+        );
+
+        smartlingBody = (
+          <Note title="Connection error" noteType="negative" className="general-error">
+            Please ensure that you have access to the connected Smartling project.
+            <br />
+            <TextLink href="https://contentful.com/developers/docs/extensibility/apps/smartling/" target="_blank" rel="noopener noreferrer">View documentation</TextLink>
+          </Note>
+        );
     }
 
     return (