Use CSS class for synthetic stages styling in console view (#132)

* Use CSS class for synthetic stages styling in console view

* Prefix synthetic CSS class names to avoid clashes

Author: mikedld

src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx

@@ -35,10 +35,6 @@ export interface TreeItemData {
   children: TreeItemData[];
 }
 
-interface StageTreeItemProps extends TreeItemProps {
-  synthetic?: boolean;
-}
-
 // Tree Item for stages
 const StageTreeItem = withStyles((theme: Theme) =>
   createStyles({
@@ -53,12 +49,9 @@ const StageTreeItem = withStyles((theme: Theme) =>
       paddingLeft: 18,
       borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
     },
-    label: {
-      fontStyle: (props: StageTreeItemProps) =>
-        props.synthetic ? "italic" : "inherit",
-    },
+    label: {},
   })
-)((props: StageTreeItemProps) => <TreeItem {...props} />);
+)((props: TreeItemProps) => <TreeItem {...props} />);
 
 // Tree Item for steps
 const StepTreeItem = withStyles((theme: Theme) =>
@@ -101,7 +94,11 @@ const getTreeItemsFromStage = (
         nodeId={String(stageItemData.id)}
         label={stageItemData.name}
         children={children}
-        synthetic={stageItemData.synthetic}
+        classes={{
+          label: stageItemData.synthetic
+            ? "pgw-graph-node--synthetic"
+            : undefined,
+        }}
       />
     );
   });

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -136,6 +136,10 @@
   box-shadow: 0 0 1px rgb(0 0 0 / 6%);
 }
 
+.MuiTreeItem-label.pgw-graph-node--synthetic {
+  font-style: italic;
+}
+
 #main-panel {
   padding-left: 0;
 }

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx

@@ -78,7 +78,7 @@ export function BigLabel({
     classNames.push("selected");
   }
   if (details.stage && details.stage.synthetic) {
-    classNames.push("synthetic");
+    classNames.push("pgw-graph-node--synthetic");
   }
 
   return (

src/main/frontend/pipeline-graph-view/pipeline-graph/styles/PipelineGraphWidget.scss

@@ -142,7 +142,7 @@ circle.halo {
   font-weight: bold;
 }
 
-.PWGx-pipeline-big-label.synthetic {
+.PWGx-pipeline-big-label.pgw-graph-node--synthetic {
   font-style: italic;
 }