PagesEditor: implement WorkflowHeaderTabs

zooniverse · Jan 8, 2025 · 8acccb1 · 8acccb1
1 parent 4d513c8
commit 8acccb1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 83 deletions.
diff --git a/app/pages/lab-pages-editor/PagesEditor.jsx b/app/pages/lab-pages-editor/PagesEditor.jsx
@@ -12,7 +12,7 @@ import { StrictMode, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import DataManager from './DataManager.jsx';
-import WorkflowTabs from './components/WorkflowTabs.jsx';
+import WorkflowHeaderTabs from './components/WorkflowHeaderTabs.jsx';
 import WorkflowTopLinks from './components/WorkflowTopLinks.jsx';
 import TasksPage from './components/TasksPage';
 import WorkflowSettingsPage from './components/WorkflowSettingsPage';
@@ -32,11 +32,11 @@ function PagesEditor({ params }) {
   const tabs = [
     {
       id: 'pages-editor_workflow-header-tab-button_task',
-      label: strings.PagesEditor.components.WorkflowTabs.tasks,
+      label: strings.PagesEditor.components.WorkflowHeaderTabs.tasks,
       targetPanel: 'pages-editor_tab-panel_task'
     }, {
       id: 'pages-editor_workflow-header-tab-button_settings',
-      label: strings.PagesEditor.components.WorkflowTabs.workflow_settings,
+      label: strings.PagesEditor.components.WorkflowHeaderTabs.workflow_settings,
       targetPanel: 'pages-editor_tab-panel_settings'
     }
   ];
@@ -49,20 +49,12 @@ function PagesEditor({ params }) {
           projectId={projectId}
           workflowId={workflowId}
         >
-          <WorkflowTopLinks
+          <WorkflowTopLinks />
+          <WorkflowHeaderTabs
             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}

diff --git a/...-pages-editor/components/WorkflowTabs.jsx → ...-editor/components/WorkflowHeaderTabs.jsx b/...-pages-editor/components/WorkflowTabs.jsx → ...-editor/components/WorkflowHeaderTabs.jsx
@@ -1,24 +1,15 @@
 import PropTypes from 'prop-types';
-
-import getPreviewEnv from '../helpers/getPreviewEnv.js';
-import ExternalLinkIcon from '../icons/ExternalLinkIcon.jsx';
-import ReturnIcon from '../icons/ReturnIcon.jsx';
 import { useWorkflowContext } from '../context.js';
-import strings from '../strings.json';
 
 const DEFAULT_HANDLER = () => {};
 
 export default function WorkflowHeader({
   currentTab = 0,
-  projectId = '',
   setCurrentTab = DEFAULT_HANDLER,
   tabs = []
 }) {
-  const { project, workflow } = useWorkflowContext();
-  const returnUrl = `/lab/${projectId}/workflows`;
-  const previewEnv = getPreviewEnv();
-  const previewUrl = `https://frontend.preview.zooniverse.org/projects/${project?.slug}/classify/workflow/${workflow?.id}${previewEnv}`;
-
+  const { workflow } = useWorkflowContext();
+
   // When clicking a tab button, make that tab active. This is pretty straightforward.
   function onClick(e) {
     const { tab } = e?.target?.dataset || {};
@@ -47,46 +38,29 @@ export default function WorkflowHeader({
   if (!workflow) return null;
 
   return (
-    <div className="workflow-header">
-      <div className="workflow-header-top">
-        <a href={returnUrl}> {/* Formerly <Link> from 'react-router', but React was throwing Legacy Context errors. */}
-          <ReturnIcon />
-          {strings.PagesEditor.components.WorkflowHeader.return}
-        </a>
-        <span className="flex-item" />
-        <a
-          className="button-link"
-          href={previewUrl}
-          rel="noopener noreferrer"
-          target='_blank'
-        >
-          Preview Workflow <ExternalLinkIcon />
-        </a>
-      </div>
-      <div
-        role="tablist"
-        className="workflow-header-tabs flex-row flex-item justify-around"
-      >
-        {tabs.map((tab, index) => (
-          <TabButton
-            id={tab.id}
-            index={index}
-            key={`${tab.id}`}
-            label={tab.label}
-            onClick={onClick}
-            onKeyUp={onKeyUp}
-            selected={(currentTab === index)}
-            targetPanel={tab.targetPanel}
-          />
-        ))}
-      </div>
+
+    <div
+      role="tablist"
+      className="workflow-header-tabs"
+    >
+      {tabs.map((tab, index) => (
+        <TabButton
+          id={tab.id}
+          index={index}
+          key={`${tab.id}`}
+          label={tab.label}
+          onClick={onClick}
+          onKeyUp={onKeyUp}
+          selected={(currentTab === index)}
+          targetPanel={tab.targetPanel}
+        />
+      ))}
     </div>
   );
 }
 
 WorkflowHeader.propTypes = {
   currentTab: PropTypes.number,
-  projectId: PropTypes.string,
   setCurrentTab: PropTypes.func,
   tabs: PropTypes.arrayOf(
     PropTypes.shape({

diff --git a/app/pages/lab-pages-editor/strings.json b/app/pages/lab-pages-editor/strings.json
@@ -1,7 +1,7 @@
 {
   "PagesEditor": {
     "components": {
-      "WorkflowTabs": {
+      "WorkflowHeaderTabs": {
         "tasks": "Tasks",
         "workflow_settings": "Workflow Settings"
       },

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
@@ -210,32 +210,27 @@ $fontWeightBoldPlus = 700
     .zooniverse-logo
       max-width: 160px
 
-  .workflow-header
-    margin-bottom: $sizeXL
-
-    a
-      min-width: 40%
-
-    .workflow-header-tabs
-      main-content()
-      gap: $sizeXL
-      justify-content: center
-      border-bottom: 0.5px solid $grey1
+  .workflow-header-tabs
+    main-content()
+    flex-row()
+    justify-content: center
+    gap: $sizeXL
+    border-bottom: 0.5px solid $grey1
 
-      button
-        background: none
-        border: none
-        cursor: pointer
-        font-size: $fontSizeL
-        font-weight: $fontWeightBoldPlus
-        text-transform: uppercase
+    button
+      background: none
+      border: none
+      cursor: pointer
+      font-size: $fontSizeL
+      font-weight: $fontWeightBoldPlus
+      text-transform: uppercase
 
-        &[aria-selected=true]
-          border-bottom: 4px solid $teal
-        
-        &[aria-selected=false]
-          color: $grey1
-          border-bottom: 4px solid transparent
+      &[aria-selected=true]
+        border-bottom: 4px solid $teal
+
+      &[aria-selected=false]
+        color: $grey1
+        border-bottom: 4px solid transparent
 
   // Component: Workflow Settings Page
   // ---------------------------------------------------------------------------