enhancement: React Flow styling changes and refactoring (#1180)

pluralsh · Jul 19, 2024 · 97a5ab0 · 97a5ab0
1 parent 479e309
commit 97a5ab0
Show file tree

Hide file tree

Showing 19 changed files with 499 additions and 669 deletions.
diff --git a/assets/src/components/cd/pipelines/EdgeLine.tsx b/assets/src/components/cd/pipelines/EdgeLine.tsx
diff --git a/assets/src/components/cd/pipelines/PipelineDetails.tsx b/assets/src/components/cd/pipelines/PipelineDetails.tsx
@@ -8,7 +8,7 @@ import {
   TabList,
   useSetBreadcrumbs,
 } from '@pluralsh/design-system'
-import styled, { useTheme } from 'styled-components'
+import { useTheme } from 'styled-components'
 import { ReactFlowProvider } from 'reactflow'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
@@ -39,21 +39,6 @@ import { PipelineContexts } from './PipelineContexts'
 
 const POLL_INTERVAL = 10 * 1000
 
-export const PipelineEditAreaSC = styled.div(({ theme }) => ({
-  border: theme.borders.default,
-  width: '100%',
-  height: '100%',
-  borderRadius: theme.borderRadiuses.large,
-  position: 'relative',
-  overflow: 'hidden',
-}))
-
-export const PipelineHeadingSC = styled.div(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing.medium,
-  alignItems: 'center',
-  justifyContent: 'space-between',
-}))
 function PipelineHeading({
   pipeline,
 }: {
@@ -218,15 +203,11 @@ function PipelineDetailsBase() {
     return <LoadingIndicator />
   }
 
-  const contentGraph = (
-    <PipelineEditAreaSC>
-      {pipeline && (
-        <Pipeline
-          pipeline={pipeline}
-          key={pipeline.id}
-        />
-      )}
-    </PipelineEditAreaSC>
+  const contentGraph = pipeline && (
+    <Pipeline
+      pipeline={pipeline}
+      key={pipeline.id}
+    />
   )
 
   const contentContexts = (

diff --git a/assets/src/components/cd/pipelines/PipelineGraph.tsx b/assets/src/components/cd/pipelines/PipelineGraph.tsx
@@ -1,9 +1,4 @@
-import {
-  IconFrame,
-  ReloadIcon,
-  styledTheme,
-  usePrevious,
-} from '@pluralsh/design-system'
+import { usePrevious } from '@pluralsh/design-system'
 import { PipelineFragment } from 'generated/graphql'
 import {
   useCallback,
@@ -12,24 +7,18 @@ import {
   useMemo,
   useState,
 } from 'react'
-import ReactFlow, {
-  Background,
-  BackgroundVariant,
-  useEdgesState,
-  useNodesState,
-  useReactFlow,
-} from 'reactflow'
-import chroma from 'chroma-js'
+import { useEdgesState, useNodesState, useReactFlow } from 'reactflow'
 
 import 'reactflow/dist/style.css'
-import styled, { useTheme } from 'styled-components'
+import { useTheme } from 'styled-components'
+
+import { ReactFlowGraph } from '../../utils/reactflow/graph'
 
 import { TestsNode } from './nodes/TestsNode'
 import { StageNode } from './nodes/StageNode'
 import { ApprovalNode } from './nodes/ApprovalNode'
 import { JobNode } from './nodes/JobNode'
 import { type DagreDirection, getLayoutedElements } from './utils/nodeLayouter'
-import { EdgeLineMarkerDefs, edgeTypes } from './EdgeLine'
 import { NodeType, getNodesAndEdges } from './utils/getNodesAndEdges'
 
 const nodeTypes = {
@@ -39,11 +28,8 @@ const nodeTypes = {
   [NodeType.Tests]: TestsNode,
 }
 
-export const PIPELINE_GRID_GAP = styledTheme.spacing.large
-
 export function Pipeline({ pipeline }: { pipeline: PipelineFragment }) {
   const theme = useTheme()
-  const margin = PIPELINE_GRID_GAP * 1
   const { nodes: initialNodes, edges: initialEdges } = useMemo(
     () => getNodesAndEdges(pipeline),
     [pipeline]
@@ -61,15 +47,15 @@ export function Pipeline({ pipeline }: { pipeline: PipelineFragment }) {
       const layouted = getLayoutedElements(nodes, edges, {
         direction,
         zoom: getViewport().zoom,
-        gridGap: PIPELINE_GRID_GAP,
-        margin,
+        gridGap: theme.spacing.large,
+        margin: theme.spacing.large,
       })
 
       setNodes([...layouted.nodes])
       setEdges([...layouted.edges])
       setNeedsLayout(false)
     },
-    [nodes, edges, getViewport, margin, setNodes, setEdges]
+    [nodes, edges, getViewport, theme.spacing.large, setNodes, setEdges]
   )
 
   useLayoutEffect(() => {
@@ -101,64 +87,13 @@ export function Pipeline({ pipeline }: { pipeline: PipelineFragment }) {
   }, [pipeline, prevPipeline, setEdges, setNodes])
 
   return (
-    <ReactFlowWrapperSC>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        nodeTypes={nodeTypes}
-        draggable
-        nodesDraggable={false}
-        edgesUpdatable={false}
-        edgesFocusable={false}
-        nodesConnectable={false}
-        edgeTypes={edgeTypes}
-      >
-        <Background
-          variant={BackgroundVariant.Dots}
-          gap={PIPELINE_GRID_GAP}
-          size={1}
-          color={`${chroma(theme.colors['border-fill-three']).alpha(1)}`}
-        />
-        <EdgeLineMarkerDefs />
-      </ReactFlow>
-      <div
-        css={{
-          position: 'absolute',
-          top: theme.spacing.xsmall,
-          right: theme.spacing.xsmall,
-          display: 'flex',
-          gap: theme.spacing.xsmall,
-        }}
-      >
-        <IconFrame
-          clickable
-          type="floating"
-          icon={<ReloadIcon />}
-          tooltip="Reset view"
-          onClick={() =>
-            setViewport({ x: 0, y: 0, zoom: 1 }, { duration: 500 })
-          }
-        >
-          Reset view
-        </IconFrame>
-      </div>
-    </ReactFlowWrapperSC>
+    <ReactFlowGraph
+      resetView={() => setViewport({ x: 0, y: 0, zoom: 1 }, { duration: 500 })}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      nodeTypes={nodeTypes}
+    />
   )
 }
-
-const ReactFlowWrapperSC = styled.div<{ $hide?: boolean }>(({ $hide }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  '.react-flow__renderer': {
-    opacity: $hide ? 0 : 1,
-  },
-  '.react-flow__edge': {
-    pointerEvents: 'none',
-    cursor: 'unset',
-  },
-}))
diff --git a/assets/src/components/cd/pipelines/nodes/ApprovalNode.tsx b/assets/src/components/cd/pipelines/nodes/ApprovalNode.tsx
@@ -92,6 +92,7 @@ export function ApprovalNode(props: EdgeNode) {
         <h2 className="heading">Action</h2>
         {meta.state && (
           <Chip
+            fillLevel={0}
             size="small"
             severity={gateStateToSeverity[meta.state]}
           >
@@ -104,7 +105,10 @@ export function ApprovalNode(props: EdgeNode) {
         {gates?.map((gate) =>
           gate?.approver ? (
             <li key={gate.id}>
-              <ApproverCard gate={gate} />
+              <ApproverCard
+                gate={gate}
+                fillLevel={0}
+              />
             </li>
           ) : (
             gate && (