fix(backend-test-repo): show notice when test repo is in use (#2678)

packages/netlify-cms-core/src/components/App/App.js

@@ -169,6 +169,7 @@ class App extends React.Component {
           openMediaLibrary={openMediaLibrary}
           hasWorkflow={hasWorkflow}
           displayUrl={config.get('display_url')}
+          isTestRepo={config.getIn(['backend', 'name']) === 'test-repo'}
           showMediaButton={showMediaButton}
         />
         <AppMainContainer>

packages/netlify-cms-core/src/components/App/Header.js

@@ -118,6 +118,7 @@ class Header extends React.Component {
     openMediaLibrary: PropTypes.func.isRequired,
     hasWorkflow: PropTypes.bool.isRequired,
     displayUrl: PropTypes.string,
+    isTestRepo: PropTypes.bool,
     t: PropTypes.func.isRequired,
   };
 
@@ -136,6 +137,7 @@ class Header extends React.Component {
       openMediaLibrary,
       hasWorkflow,
       displayUrl,
+      isTestRepo,
       t,
       showMediaButton,
     } = this.props;
@@ -198,6 +200,7 @@ class Header extends React.Component {
             )}
             <SettingsDropdown
               displayUrl={displayUrl}
+              isTestRepo={isTestRepo}
               imageUrl={user.get('avatar_url')}
               onLogoutClick={onLogoutClick}
             />

packages/netlify-cms-core/src/components/UI/SettingsDropdown.js

@@ -39,6 +39,13 @@ const AppHeaderSiteLink = styled.a`
   padding: 10px 16px;
 `;
 
+const AppHeaderTestRepoIndicator = styled.a`
+  font-size: 14px;
+  font-weight: 400;
+  color: #7b8290;
+  padding: 10px 16px;
+`;
+
 const Avatar = ({ imageUrl }) =>
   imageUrl ? <AvatarImage src={imageUrl} /> : <AvatarPlaceholderIcon type="user" size="large" />;
 
@@ -46,8 +53,17 @@ Avatar.propTypes = {
   imageUrl: PropTypes.string,
 };
 
-const SettingsDropdown = ({ displayUrl, imageUrl, onLogoutClick, t }) => (
+const SettingsDropdown = ({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }) => (
   <React.Fragment>
+    {isTestRepo && (
+      <AppHeaderTestRepoIndicator
+        href="https://www.netlifycms.org/docs/authentication-backends#test-repo-backend"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Test Backend ↗
+      </AppHeaderTestRepoIndicator>
+    )}
     {displayUrl ? (
       <AppHeaderSiteLink href={displayUrl} target="_blank">
         {stripProtocol(displayUrl)}
@@ -70,6 +86,7 @@ const SettingsDropdown = ({ displayUrl, imageUrl, onLogoutClick, t }) => (
 
 SettingsDropdown.propTypes = {
   displayUrl: PropTypes.string,
+  isTestRepo: PropTypes.bool,
   imageUrl: PropTypes.string,
   onLogoutClick: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,