PagesEditor: add WorkflowHeaderTitle

app/pages/lab-pages-editor/PagesEditor.jsx

@@ -12,6 +12,7 @@ import { StrictMode, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import DataManager from './DataManager.jsx';
+import WorkflowHeaderTitle from './components/WorkflowHeaderTitle.jsx';
 import WorkflowHeaderTabs from './components/WorkflowHeaderTabs.jsx';
 import WorkflowTopLinks from './components/WorkflowTopLinks.jsx';
 import TasksPage from './components/TasksPage';
@@ -50,6 +51,7 @@ function PagesEditor({ params }) {
           workflowId={workflowId}
         >
           <WorkflowTopLinks />
+          <WorkflowHeaderTitle />
           <WorkflowHeaderTabs
             currentTab={currentTab}
             setCurrentTab={setCurrentTab}

app/pages/lab-pages-editor/components/WorkflowHeaderTabs.jsx

@@ -3,7 +3,7 @@ import { useWorkflowContext } from '../context.js';
 
 const DEFAULT_HANDLER = () => {};
 
-export default function WorkflowHeader({
+export default function WorkflowHeaderTabs({
   currentTab = 0,
   setCurrentTab = DEFAULT_HANDLER,
   tabs = []
@@ -59,7 +59,7 @@ export default function WorkflowHeader({
   );
 }
 
-WorkflowHeader.propTypes = {
+WorkflowHeaderTabs.propTypes = {
   currentTab: PropTypes.number,
   setCurrentTab: PropTypes.func,
   tabs: PropTypes.arrayOf(

app/pages/lab-pages-editor/components/WorkflowHeaderTitle.jsx

@@ -0,0 +1,27 @@
+import { useWorkflowContext } from '../context.js';
+import getPreviewEnv from '../helpers/getPreviewEnv.js';
+import ExternalLinkIcon from '../icons/ExternalLinkIcon.jsx';
+
+export default function WorkflowHeaderTitle() {
+  const { project, workflow } = useWorkflowContext();
+
+  if (!project || !workflow) return null;
+
+  const workflowTitle = workflow?.display_name ?? '(unnamed workflow)';
+  const previewEnv = getPreviewEnv();
+  const previewUrl = `https://frontend.preview.zooniverse.org/projects/${project?.slug}/classify/workflow/${workflow?.id}${previewEnv}`;
+
+  return (
+    <div className="workflow-header-title">
+      <h2>{workflowTitle}</h2>
+      <a
+        className="button-link"
+        href={previewUrl}
+        rel="noopener noreferrer"
+        target='_blank'
+      >
+        Preview Workflow <ExternalLinkIcon />
+      </a>
+    </div>
+  );
+}