PagesEditor: split WorkflowHeader into WorkflowTopLinks and WorkflowTabs

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

@@ -12,7 +12,8 @@ import { StrictMode, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import DataManager from './DataManager.jsx';
-import WorkflowHeader from './components/WorkflowHeader.jsx';
+import WorkflowTabs from './components/WorkflowTabs.jsx';
+import WorkflowTopLinks from './components/WorkflowTopLinks.jsx';
 import TasksPage from './components/TasksPage';
 import WorkflowSettingsPage from './components/WorkflowSettingsPage';
 import strings from './strings.json';
@@ -31,11 +32,11 @@ function PagesEditor({ params }) {
   const tabs = [
     {
       id: 'pages-editor_workflow-header-tab-button_task',
-      label: strings.PagesEditor.components.WorkflowHeader.tasks,
+      label: strings.PagesEditor.components.WorkflowTabs.tasks,
       targetPanel: 'pages-editor_tab-panel_task'
     }, {
       id: 'pages-editor_workflow-header-tab-button_settings',
-      label: strings.PagesEditor.components.WorkflowHeader.workflow_settings,
+      label: strings.PagesEditor.components.WorkflowTabs.workflow_settings,
       targetPanel: 'pages-editor_tab-panel_settings'
     }
   ];
@@ -48,12 +49,20 @@ function PagesEditor({ params }) {
           projectId={projectId}
           workflowId={workflowId}
         >
-          <WorkflowHeader
+          <WorkflowTopLinks
             currentTab={currentTab}
             projectId={projectId}
             setCurrentTab={setCurrentTab}
             tabs={tabs}
           />
+          {/*
+          <WorkflowTabs
+            currentTab={currentTab}
+            projectId={projectId}
+            setCurrentTab={setCurrentTab}
+            tabs={tabs}
+          />
+          */}
           {(currentTab === 0) && (
             <div
               aria-labelledby={tabs[0].id}

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

@@ -0,0 +1,25 @@
+import ExternalLinkIcon from '../icons/ExternalLinkIcon.jsx';
+import ReturnIcon from '../icons/ReturnIcon.jsx';
+import { useWorkflowContext } from '../context.js';
+import strings from '../strings.json';
+import zooniverseLogo from '../assets/zooniverse-word-white.png' 
+
+const DEFAULT_HANDLER = () => {};
+
+export default function WorkflowTopLinks() {
+  const { project, workflow } = useWorkflowContext();
+  const returnUrl = `/lab/${project?.id}/workflows`;
+
+  if (!project || !workflow) return null;
+
+  return (
+    <div className="workflow-top-links">
+      <a href={returnUrl}> {/* Formerly <Link> from 'react-router', but React was throwing Legacy Context errors. */}
+        <ReturnIcon />
+        {strings.PagesEditor.components.WorkflowTopLinks.return}
+      </a>
+      <span className="flex-item" />
+      <img className="zooniverse-logo" src={zooniverseLogo} />
+    </div>
+  );
+}

app/pages/lab-pages-editor/strings.json

@@ -1,10 +1,12 @@
 {
   "PagesEditor": {
     "components": {
-      "WorkflowHeader": {
-        "return": "Back to Workflows",
+      "WorkflowTabs": {
         "tasks": "Tasks",
         "workflow_settings": "Workflow Settings"
+      },
+      "WorkflowTopLinks": {
+        "return": "Back to Workflows"
       }
     }
   }

css/lab-pages-editor.styl

@@ -48,7 +48,6 @@ $fontWeightBoldPlus = 700
   font-family: $fontFamilies
   font-size: $fontSizeM
   margin: 0 auto
-  padding: $sizeM $sizeM
 
   // General UI
   // ---------------------------------------------------------------------------
@@ -187,30 +186,35 @@ $fontWeightBoldPlus = 700
   .workflow-version
     color: $teal
 
-  // Component: Workflow Header
+  // Component: Workflow Top Links and Workflow Tabs
+  // Formerly grouped as "Workflow Header"
   // ---------------------------------------------------------------------------
 
-  .workflow-header
-    margin-bottom: $sizeXL
+  .workflow-top-links
+    flex-row()
+    background: $teal
+    color: $white
+    margin-bottom: $sizeM
+    padding: $sizeS
 
     a
+      display: inline-block
+      color: $white
+      font-size: $fontSizeS
+      text-decoration: none
       min-width: 40%
 
-    .workflow-header-top
-      flex-row()
-      background: $teal
-      color: $white
-      margin-bottom: $sizeM
-      padding: $sizeXS
+      .icon
+        margin-right: $sizeS
+
+    .zooniverse-logo
+      max-width: 160px
 
-      a
-        display: inline-block
-        color: $white
-        font-size: $fontSizeS
-        text-decoration: none
+  .workflow-header
+    margin-bottom: $sizeXL
 
-        .icon
-          margin-right: $sizeS
+    a
+      min-width: 40%
 
     .workflow-header-tabs
       main-content()