Support link to cloud variable log

Add Cloud Variables to the ‘Extension’ Chips when there are cloud variables in the project. If the user is logged in, also link to the cloud variable log for the project.

src/views/preview/extension-chip.jsx

@@ -22,16 +22,27 @@ const ExtensionChip = props => (
                     <FormattedMessage id="project.needsConnection" />
                 </div>
             )}
+            {props.action && (
+                <a href={props.action.uri}>
+                    <div className="extension-action">
+                        <FormattedMessage id={props.action.l10nId} />
+                        <img src="/svgs/project/r-arrow.svg" />
+                    </div>
+                </a>
+            )}
         </div>
     </div>
 );
 
 ExtensionChip.propTypes = {
+    action: PropTypes.shape({
+        l10nId: PropTypes.string,
+        uri: PropTypes.string
+    }),
     extensionL10n: PropTypes.string,
     extensionName: PropTypes.string,
     hasStatus: PropTypes.bool,
     iconURI: PropTypes.string
 };
 
-
 module.exports = ExtensionChip;

src/views/preview/extension-chip.scss

@@ -38,4 +38,21 @@
         color: $ui-white;
         font-size: .675rem;
     }
+    
+    .extension-action {
+        display: flex;
+        justify-content: center;
+        border-radius: 10px;
+        background-color: $ui-blue;
+        padding: 0 5px;
+        text-align: center;
+        color: $ui-white;
+        font-size: .675rem;
+        font-weight: normal;
+        
+        img {
+            width: 15px;
+            height: 15px;
+        }
+    }
 }

src/views/preview/l10n.json

@@ -35,5 +35,7 @@
     "project.notesPlaceholder": "How did you make this project? Did you use ideas, scripts or artwork from other people? Thank them here.",
     "project.descriptionPlaceholder": "Tell people how to use your project (such as which keys to press).",
     "project.cloudDataAlert": "This project uses cloud data - a feature that is only available to signed in Scratchers.",
+    "project.cloudVariables": "Cloud Variables",
+    "project.cloudDataLink": "See Data",
     "project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project."
 }

src/views/preview/presentation.jsx

@@ -182,6 +182,20 @@ const PreviewPresentation = ({
         }
     }
 
+    const extensionChips = (
+        <FlexRow className="extension-list">
+            {extensions && extensions.map(extension => (
+                <ExtensionChip
+                    action={extension.action}
+                    extensionL10n={extension.l10nId}
+                    extensionName={extension.name}
+                    hasStatus={extension.hasStatus}
+                    iconURI={extension.icon && `/svgs/project/${extension.icon}`}
+                    key={extension.name || extension.l10nId}
+                />
+            ))}
+        </FlexRow>
+    );
     return (
         <div className="preview">
             {showAdminPanel && (
@@ -344,17 +358,7 @@ const PreviewPresentation = ({
                                 {/*  eslint-disable max-len */}
                                 <MediaQuery maxWidth={frameless.tablet - 1}>
                                     <FlexRow className="preview-row">
-                                        <FlexRow className="extension-list">
+                                        {extensionChips}
-                                            {extensions && extensions.map(extension => (
-                                                <ExtensionChip
-                                                    extensionL10n={extension.l10nId}
-                                                    extensionName={extension.name}
-                                                    hasStatus={extension.hasStatus}
-                                                    iconURI={extension.icon && `/svgs/project/${extension.icon}`}
-                                                    key={extension.name || extension.l10nId}
-                                                />
-                                            ))}
-                                        </FlexRow>
                                     </FlexRow>
                                 </MediaQuery>
                                 {showInstructions && (
@@ -475,17 +479,7 @@ const PreviewPresentation = ({
                         </MediaQuery>
                         <MediaQuery minWidth={frameless.tablet}>
                             <FlexRow className="preview-row">
-                                <FlexRow className="extension-list">
+                                {extensionChips}
-                                    {extensions && extensions.map(extension => (
-                                        <ExtensionChip
-                                            extensionL10n={extension.l10nId}
-                                            extensionName={extension.name}
-                                            hasStatus={extension.hasStatus}
-                                            iconURI={extension.icon && `/svgs/project/${extension.icon}`}
-                                            key={extension.name || extension.l10nId}
-                                        />
-                                    ))}
-                                </FlexRow>
                             </FlexRow>
                         </MediaQuery>
                         {showModInfo &&

src/views/preview/project-view.jsx

@@ -273,9 +273,28 @@ class Preview extends React.Component {
 
                     const helpers = ProjectInfo[projectData[0].projectVersion];
                     if (!helpers) return; // sb1 not handled
-                    newState.extensions = helpers.extensions(projectData[0]);
+                    newState.extensions = Array.from(helpers.extensions(projectData[0]));
                     newState.modInfo.scriptCount = helpers.scriptCount(projectData[0]);
                     newState.modInfo.spriteCount = helpers.spriteCount(projectData[0]);
+                    if (helpers.cloudData(projectData[0])) {
+                        if (this.props.isLoggedIn) {
+                            // show cloud variables log link if logged in
+                            newState.extensions.push({
+                                action: {
+                                    l10nId: 'project.cloudDataLink',
+                                    uri: `/cloudmonitor/${projectId}/`
+                                },
+                                icon: 'clouddata.svg',
+                                l10nId: 'project.cloudVariables',
+                                linked: true
+                            });
+                        } else {
+                            newState.extensions.push({
+                                icon: 'clouddata.svg',
+                                l10nId: 'project.cloudVariables'
+                            });
+                        }
+                    }
 
                     if (showAlerts) {
                         // Check for username block only if user is logged in

static/svgs/project/clouddata.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Extensions/Software/Cloud-Data-Block</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Extensions/Software/Cloud-Data-Block" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.15">
+        <path d="M8.79318616,28.1151638 L31.6876989,28.1151638 C33.7872628,28.1151638 35.5,26.367812 35.5,24.205767 C35.5,22.0457656 33.7861205,20.2963702 31.6876989,20.2963702 C31.0949151,20.2963702 30.5289275,20.4344685 30.0095753,20.6985405 L29.149028,21.136098 L29.2881766,20.1807783 C29.2946075,20.1366272 29.298841,20.0905134 29.3013901,20.0383827 C29.304279,19.9793044 29.3048852,19.9290931 29.3048852,19.8075819 C29.3048852,15.2142563 25.6733301,11.5 21.1912477,11.5 C18.7336811,11.5 16.4540186,12.627613 14.919198,14.5388364 L14.6395477,14.8870688 L14.2620843,14.64834 C13.7577046,14.3293423 13.1846469,14.1619751 12.5776103,14.1619751 C10.7696196,14.1619751 9.29318616,15.6720832 9.29318616,17.5332109 C9.29318616,17.9287467 9.35465627,18.2911027 9.47936861,18.6253403 L9.78978091,19.4572664 L8.91747388,19.2913226 C8.91297341,19.2904665 8.89875205,19.289116 8.87708814,19.2882944 C8.85627388,19.287505 8.83993475,19.287347 8.79318616,19.2873183 C6.42564931,19.2873183 4.5,21.2638832 4.5,23.7028427 C4.5,26.147236 6.42155665,28.1151638 8.79318616,28.1151638 Z" id="Fill-1" stroke="#000000" fill="#4D4D4D"></path>
+    </g>
+</svg>

static/svgs/project/r-arrow.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Tutorials/Navigation/Next</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M16.994992,10.6536457 L12.6535303,14.9951074 C12.2968115,15.3310867 11.796299,15.4209577 11.3663008,15.2343025 C10.9363025,15.04903 10.6708373,14.6397712 10.6708373,14.1655287 L10.6708373,12.5188151 L4.62873943,11.679558 C3.70375923,11.5592691 3,10.7545778 3,9.80747549 C3,9.72590025 3.00553052,9.64294239 3.01520894,9.56136715 C3.14932416,8.70690113 3.81575235,8.0473861 4.63565259,7.94368877 L10.6708373,7.0823096 L10.6708373,5.50749278 C10.6708373,5.02771979 10.9528941,4.60048678 11.3884229,4.4193621 C11.8267169,4.23823743 12.3120204,4.33640424 12.6535303,4.67791412 L16.994992,9.01937576 C17.2092998,9.23506621 17.3282061,9.52541874 17.3282061,9.83651074 C17.3282061,10.1476027 17.2092998,10.4379553 16.994992,10.6536457 Z" id="path-1"></path>
+    </defs>
+    <g id="Tutorials/Navigation/Next" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Fill-1" fill="#FFFFFF" xlink:href="#path-1"></use>
+        <g id="Color/White" mask="url(#mask-2)" fill="#FFFFFF">
+            <g id="Color">
+                <rect x="0" y="0" width="20" height="20"></rect>
+            </g>
+        </g>
+    </g>
+</svg>