From 59cd5de78baa31150958e6d0d6733407c0e95805 Mon Sep 17 00:00:00 2001
From: Tobias Urdin <tobias.urdin@binero.se>
Date: Wed, 15 Mar 2023 23:36:45 +0000
Subject: web: add dark mode and theme selection

This adds a theme selection in the preferences in the
config modal and adds a new dark theme.

Removes the line.png image and instead uses CSS
linear-gradient that is available in all browsers
since around 2018, also fixes the 15 pixels spacing
issue that is there today.

You can select between three different themes.

Auto will use your system preference to choose either the
light or dark theme, changes dynamically based on your
system preference.

Light is the current theme.

Dark is the theme added by this patch series.

The UX this changes is that if somebody has their system
preferences set to dark, for example in Mac OS X that is
in System Settings -> Appearance -> Dark the user will
get the Zuul web UI in dark by default and same for the
opposite.

This uses a poor man's dark mode for swagger-ui
as per the comment in [1].

[1] https://github.com/swagger-api/swagger-ui/issues/5327#issuecomment-742375520

Change-Id: I01cf32f3decdb885307a76eb79d644667bbbf9a3
---
 web/src/containers/jobgraph/JobGraphDisplay.jsx | 26 +++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

(limited to 'web/src/containers/jobgraph/JobGraphDisplay.jsx')

diff --git a/web/src/containers/jobgraph/JobGraphDisplay.jsx b/web/src/containers/jobgraph/JobGraphDisplay.jsx
index e5cff9cbc..c8fb938ac 100644
--- a/web/src/containers/jobgraph/JobGraphDisplay.jsx
+++ b/web/src/containers/jobgraph/JobGraphDisplay.jsx
@@ -21,10 +21,15 @@ import { useHistory } from 'react-router-dom'
 import { makeJobGraphKey, fetchJobGraphIfNeeded } from '../../actions/jobgraph'
 import { graphviz } from 'd3-graphviz'
 
-function makeDot(tenant, pipeline, project, branch, jobGraph) {
+function makeDot(tenant, pipeline, project, branch, jobGraph, dark) {
   let ret = 'digraph job_graph {\n'
+  ret += '  bgcolor="transparent"\n'
   ret += '  rankdir=LR;\n'
-  ret += '  node [shape=box];\n'
+  if (dark) {
+    ret += '  node [shape=box color="white" fontcolor="white"];\n'
+  } else {
+    ret += '  node [shape=box];\n'
+  }
   jobGraph.forEach((job) => {
     const searchParams = new URLSearchParams('')
     searchParams.append('pipeline', pipeline)
@@ -43,8 +48,15 @@ function makeDot(tenant, pipeline, project, branch, jobGraph) {
     if (job.dependencies.length) {
       job.dependencies.forEach((dep) => {
         let soft = ' [dir=back]'
+        if (dark) {
+          soft = ' [dir=back color="white" fontcolor="white"]'
+        }
         if (dep.soft) {
-          soft = ' [style=dashed dir=back]'
+          if (dark) {
+            soft = ' [style=dashed dir=back color="white" fontcolor="white"]'
+          } else {
+            soft = ' [style=dashed dir=back]'
+          }
         }
         ret += '  "' + dep.name + '" -> "' + job.name + '"' + soft + ';\n'
       })
@@ -99,7 +111,7 @@ GraphViz.propTypes = {
 
 function JobGraphDisplay(props) {
   const [dot, setDot] = useState()
-  const {fetchJobGraphIfNeeded, tenant, project, pipeline, branch} = props
+  const {fetchJobGraphIfNeeded, tenant, project, pipeline, branch, preferences } = props
 
   useEffect(() => {
     fetchJobGraphIfNeeded(tenant, project.name, pipeline, branch)
@@ -112,9 +124,9 @@ function JobGraphDisplay(props) {
   const jobGraph = tenantJobGraph ? tenantJobGraph[jobGraphKey] : undefined
   useEffect(() => {
     if (jobGraph) {
-      setDot(makeDot(tenant, pipeline, project, branch, jobGraph))
+      setDot(makeDot(tenant, pipeline, project, branch, jobGraph, preferences.darkMode))
     }
-  }, [tenant, pipeline, project, branch, jobGraph])
+  }, [tenant, pipeline, project, branch, jobGraph, preferences])
   return (
     <>
       {dot && <GraphViz dot={dot}/>}
@@ -131,11 +143,13 @@ JobGraphDisplay.propTypes = {
   jobgraph: PropTypes.object,
   dispatch: PropTypes.func,
   state: PropTypes.object,
+  preferences: PropTypes.object,
 }
 function mapStateToProps(state) {
   return {
     tenant: state.tenant,
     jobgraph: state.jobgraph,
+    preferences: state.preferences,
     state: state,
   }
 }
-- 
cgit v1.2.1

