refactor: conditionally render disabled link to analytics page when u…

…navailable

- As per: #2387 (comment)
- Move the analytics link to be the middle option to maintain groupings
- As per: #2387 (comment)
- Render a disable version of the analytics page link to covney active/inactive to improve usability

editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx

@@ -160,18 +160,7 @@ const PreviewBrowser: React.FC<{
             />
           </Tooltip>
 
-          <Tooltip arrow title="Open editor preview">
-            <Link
-              href={props.url.replace("/preview", "/unpublished")}
-              target="_blank"
-              rel="noopener noreferrer"
-              color="inherit"
-            >
-              <ExternalLink />
-            </Link>
-          </Tooltip>
-
-          {!!flowMetabaseLink && (
+          {flowMetabaseLink ? (
             <Tooltip arrow title="Open analytics page">
               <Link
                 href={flowMetabaseLink}
@@ -182,8 +171,25 @@ const PreviewBrowser: React.FC<{
                 <BarChart />
               </Link>
             </Tooltip>
+          ) : (
+            <Tooltip arrow title="Analytics page unavailable">
+              <Link component={"button"} disabled>
+                <BarChart />
+              </Link>
+            </Tooltip>
           )}
 
+          <Tooltip arrow title="Open editor preview">
+            <Link
+              href={props.url.replace("/preview", "/unpublished")}
+              target="_blank"
+              rel="noopener noreferrer"
+              color="inherit"
+            >
+              <ExternalLink />
+            </Link>
+          </Tooltip>
+
           <Tooltip arrow title="Open published service">
             <Link
               href={props.url + "?analytics=false"}