From c13489e23238f9147222bdf6004102e056357181 Mon Sep 17 00:00:00 2001
From: Ida <i.dittrich@valueon.ch>
Date: Wed, 13 May 2026 15:03:37 +0200
Subject: [PATCH] fix: removed legacy code

---
 .../editor/Automation2FlowEditor.module.css   | 100 +++++++-------
 .../FlowEditor/editor/CanvasHeader.tsx        | 126 +++++++++---------
 2 files changed, 112 insertions(+), 114 deletions(-)

diff --git a/src/components/FlowEditor/editor/Automation2FlowEditor.module.css b/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
index 02e13e9..f6e91fa 100644
--- a/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
+++ b/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
@@ -256,11 +256,6 @@
   background: var(--bg-primary, #fff);
 }
 
-/* Single toolbar row (all controls in one flex wrap). */
-.canvasHeaderRow {
-  width: 100%;
-}
-
 .canvasHeaderToolbar {
   display: flex;
   flex-wrap: wrap;
@@ -295,48 +290,6 @@
   color: var(--text-primary, #333);
 }
 
-.canvasHeaderTitleBlock {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.canvasHeaderTitle,
-.canvasHeaderTitle input {
-  margin: 0;
-  min-width: 0;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--text-primary, #1a1a1a);
-}
-
-.canvasHeaderTitle {
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.canvasHeaderTitleMuted {
-  font-style: italic;
-  font-weight: 500;
-  opacity: 0.65;
-  color: var(--text-secondary, #666);
-}
-
-.canvasHeaderTitle input {
-  width: 100%;
-  max-width: 100%;
-  padding: 0.25rem 0.4rem;
-  border: 1px solid var(--primary-color, #007bff);
-  border-radius: 4px;
-  outline: none;
-  background: var(--bg-primary, #fff);
-  box-sizing: border-box;
-}
-
 .canvasHeaderIconBtn {
   padding: 6px !important;
   min-width: 30px !important;
@@ -375,7 +328,7 @@
   width: 100%;
 }
 
-.canvasHeaderVersionRow button {
+.canvasHeaderVersionRow :global(.button) {
   margin-top: 0;
 }
 
@@ -386,6 +339,57 @@
   flex: 0 0 auto;
 }
 
+.canvasHeaderVersionBadge {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--canvasHeaderBadgeBg, transparent);
+  color: var(--canvasHeaderBadgeFg, inherit);
+  flex: 0 0 auto;
+}
+
+.canvasHeaderVersionAction {
+  font-size: 0.8rem !important;
+  padding: 0.25rem 0.6rem !important;
+  min-height: auto !important;
+}
+
+.canvasHeaderVersionSpinner {
+  font-size: 0.85rem;
+}
+
+.canvasHeaderExecuteBanner {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+}
+
+.canvasHeaderExecuteBannerSuccess {
+  background: rgba(40, 167, 69, 0.15);
+  color: var(--success-color, #28a745);
+}
+
+.canvasHeaderExecuteBannerWarning {
+  background: rgba(255, 193, 7, 0.15);
+  color: var(--warning-color, #ffc107);
+}
+
+.canvasHeaderExecuteBannerPaused {
+  background: rgba(0, 123, 255, 0.15);
+  color: var(--primary-color, #007bff);
+}
+
+.canvasHeaderExecuteBannerError {
+  background: rgba(220, 53, 69, 0.15);
+  color: var(--danger-color, #dc3545);
+}
+
+.canvasHeaderSysadminInput {
+  margin: 0;
+}
+
 .canvasHeaderVersionSelect {
   width: 11rem;
   max-width: 100%;
diff --git a/src/components/FlowEditor/editor/CanvasHeader.tsx b/src/components/FlowEditor/editor/CanvasHeader.tsx
index bfc51ce..fe5598e 100644
--- a/src/components/FlowEditor/editor/CanvasHeader.tsx
+++ b/src/components/FlowEditor/editor/CanvasHeader.tsx
@@ -35,9 +35,9 @@ interface CanvasHeaderProps {
   saving: boolean;
   executing: boolean;
   hasNodes: boolean;
-  /** Phase-4 Schicht-4: when set, the Run button is disabled and the message
-   *  is shown as a tooltip. Click triggers `onExecuteBlockedClick` so the
-   *  parent can navigate the user to the first offending node. */
+  /** When set, required-field graph errors block a normal run; message is the
+   *  run button tooltip. Click still fires `onExecuteBlockedClick` to focus
+   *  the first offending node. */
   executeBlockedReason?: string | null;
   onExecuteBlockedClick?: () => void;
   executeResult: ExecuteGraphResponse | null;
@@ -138,14 +138,23 @@ export const CanvasHeader: React.FC<CanvasHeaderProps> = ({
       : t('Ausführen');
   const _runTitle = executeBlockedReason ?? (hasNodes ? t('Ausführen') : t('Keine Nodes zum Ausführen.'));
 
+  const _executeBannerSegmentClass = !executeResult
+    ? ''
+    : executeResult.success
+      ? executeResult.warning
+        ? styles.canvasHeaderExecuteBannerWarning
+        : styles.canvasHeaderExecuteBannerSuccess
+      : executeResult.paused
+        ? styles.canvasHeaderExecuteBannerPaused
+        : styles.canvasHeaderExecuteBannerError;
+
   return (
     <div className={styles.canvasHeader}>
-      <div className={styles.canvasHeaderRow}>
-        <div
-          className={styles.canvasHeaderToolbar}
-          role="toolbar"
-          aria-label={t('Workflow-Aktionen')}
-        >
+      <div
+        className={styles.canvasHeaderToolbar}
+        role="toolbar"
+        aria-label={t('Workflow-Aktionen')}
+      >
           {onToggleWorkspacePanel && (
             <Button
               type="button"
@@ -295,12 +304,11 @@ export const CanvasHeader: React.FC<CanvasHeaderProps> = ({
                 type="checkbox"
                 checked={!!verboseSchema}
                 onChange={(e) => onVerboseSchemaChange(e.target.checked)}
-                style={{ margin: 0 }}
+                className={styles.canvasHeaderSysadminInput}
               />
               {t('Schema-Details')}
             </label>
           )}
-        </div>
       </div>
 
       {currentWorkflowId && versions && versions.length > 0 && (
@@ -321,108 +329,94 @@ export const CanvasHeader: React.FC<CanvasHeaderProps> = ({
             ))}
           </select>
           <span
-            style={{
-              padding: '2px 8px',
-              borderRadius: 10,
-              fontSize: '0.75rem',
-              fontWeight: 600,
-              background: badge.color + '22',
-              color: badge.color,
-            }}
+            className={styles.canvasHeaderVersionBadge}
+            style={
+              {
+                '--canvasHeaderBadgeBg': `${badge.color}22`,
+                '--canvasHeaderBadgeFg': badge.color,
+              } as React.CSSProperties
+            }
           >
             {badge.label}
           </span>
           {currentVersion && currentStatus === 'draft' && onPublishVersion && (
-            <button
+            <Button
               type="button"
-              className={styles.retryButton}
+              variant={_tb}
+              size={_ts}
+              icon={FaCloudUploadAlt}
+              className={styles.canvasHeaderVersionAction}
               onClick={() => onPublishVersion(currentVersion.id)}
               disabled={versionLoading}
               title={t('Version veröffentlichen')}
-              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
             >
-              <FaCloudUploadAlt style={{ marginRight: 4 }} />
               {t('Veröffentlichen')}
-            </button>
+            </Button>
           )}
           {currentVersion && currentStatus === 'published' && onUnpublishVersion && (
-            <button
+            <Button
               type="button"
-              className={styles.retryButton}
+              variant={_tb}
+              size={_ts}
+              icon={FaCloudDownloadAlt}
+              className={styles.canvasHeaderVersionAction}
               onClick={() => onUnpublishVersion(currentVersion.id)}
               disabled={versionLoading}
               title={t('Veröffentlichung zurücknehmen')}
-              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
             >
-              <FaCloudDownloadAlt style={{ marginRight: 4 }} />
               {t('Veröffentlichung aufheben')}
-            </button>
+            </Button>
           )}
           {currentVersion && currentStatus !== 'archived' && onArchiveVersion && (
-            <button
+            <Button
               type="button"
-              className={styles.retryButton}
+              variant={_tb}
+              size={_ts}
+              icon={FaArchive}
+              className={styles.canvasHeaderVersionAction}
               onClick={() => onArchiveVersion(currentVersion.id)}
               disabled={versionLoading}
               title={t('Version archivieren')}
-              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
             >
-              <FaArchive style={{ marginRight: 4 }} />
-              Archiv
-            </button>
+              {t('Archiv')}
+            </Button>
           )}
           {onCreateDraft && (
-            <button
+            <Button
               type="button"
-              className={styles.retryButton}
+              variant={_tb}
+              size={_ts}
+              icon={FaPlus}
+              className={styles.canvasHeaderVersionAction}
               onClick={onCreateDraft}
               disabled={versionLoading}
               title={t('Neuen Entwurf erstellen')}
-              style={{ fontSize: '0.8rem', padding: '0.25rem 0.6rem' }}
             >
-              + Entwurf
-            </button>
+              {t('+ Entwurf')}
+            </Button>
           )}
-          {versionLoading && <FaSpinner className={styles.spinner} style={{ fontSize: '0.85rem' }} />}
+          {versionLoading && <FaSpinner className={`${styles.spinner} ${styles.canvasHeaderVersionSpinner}`} />}
         </div>
       )}
 
       {executeResult && (
         <div
-          style={{
-            marginTop: '0.5rem',
-            padding: '0.5rem',
-            borderRadius: 6,
-            fontSize: '0.875rem',
-            background: executeResult.success
-              ? executeResult.warning
-                ? 'rgba(255,193,7,0.15)'
-                : 'rgba(40,167,69,0.15)'
-              : (executeResult as { paused?: boolean }).paused
-                ? 'rgba(0,123,255,0.15)'
-                : 'rgba(220,53,69,0.15)',
-            color: executeResult.success
-              ? executeResult.warning
-                ? 'var(--warning-color,#ffc107)'
-                : 'var(--success-color,#28a745)'
-              : (executeResult as { paused?: boolean }).paused
-                ? 'var(--primary-color,#007bff)'
-                : 'var(--danger-color,#dc3545)',
-          }}
+          className={`${styles.canvasHeaderExecuteBanner} ${_executeBannerSegmentClass}`}
         >
           {executeResult.success ? (
             executeResult.warning ? (
-              <>⚠ {executeResult.warning}</>
+              <>{executeResult.warning}</>
             ) : (
               <>{t('Ausführung abgeschlossen')}</>
             )
-          ) : (executeResult as { paused?: boolean }).paused ? (
+          ) : executeResult.paused ? (
             <>
-              ⏸ Workflow pausiert. Öffne <strong>{t('Workflows/Tasks')}</strong> in der Sidebar, um den Task zu
-              bearbeiten.
+              {t('Workflow pausiert. Öffne ')}
+              <strong>{t('Workflows/Tasks')}</strong>
+              {t(' in der Sidebar, um den Task zu bearbeiten.')}
             </>
           ) : (
-            <>✗ {executeResult.error ?? t('Unbekannter Fehler')}</>
+            <>{executeResult.error ?? t('Unbekannter Fehler')}</>
           )}
         </div>
       )}