Move pipeline studio to ui package (#851)

* move pipeline nodes to ui; add pipeline-graph to design-system; small improvements

---------

Co-authored-by: Kevin Nagurski <[email protected]>

Author: srdjan-harness

apps/design-system/package.json

@@ -13,14 +13,18 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
+    "@harnessio/pipeline-graph": "workspace:*",
     "@harnessio/ui": "workspace:*",
     "@harnessio/yaml-editor": "workspace:*",
+    "@types/lodash-es": "^4.17.12",
     "clsx": "^2.1.1",
+    "lodash-es": "^4.17.21",
     "monaco-editor": "0.50.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-live": "^4.1.8",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "vite-plugin-monaco-editor": "^1.1.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.3",

apps/design-system/src/pages/view-preview/view-preview.tsx

@@ -8,6 +8,9 @@ import { RepoSettingsViewWrapper } from '@/pages/view-preview/repo-settings-view
 import ExecutionListWrapper from '@subjects/views/execution-list/execution-list'
 import { ProjectLabelsList } from '@subjects/views/labels/project-labels-list'
 import { RepoLabelsList } from '@subjects/views/labels/repo-labels-list'
+import PipelineStudioWrapper from '@subjects/views/pipeline-edit/pipeline-edit'
+import PipelineGraphWrapper from '@subjects/views/pipeline-graph/pipeline-graph'
+import PipelineGraphMinimalWrapper from '@subjects/views/pipeline-graph/pipeline-graph-minimal'
 import PipelineListWrapper from '@subjects/views/pipeline-list/pipeline-list'
 import PullRequestCompareWrapper from '@subjects/views/pull-request-compare/pull-request-compare'
 import PullRequestChangesWrapper from '@subjects/views/pull-request-conversation/pull-request-changes-wrapper'
@@ -148,6 +151,17 @@ export const viewPreviews: Record<string, ReactNode> = {
       <PipelineListWrapper />
     </RepoViewWrapper>
   ),
+  'pipeline-studio': <PipelineStudioWrapper />,
+  'pipeline-graph': (
+    <RepoViewWrapper>
+      <PipelineGraphWrapper />
+    </RepoViewWrapper>
+  ),
+  'pipeline-graph-minimal': (
+    <RepoViewWrapper>
+      <PipelineGraphMinimalWrapper />
+    </RepoViewWrapper>
+  ),
   'execution-list': (
     <RepoViewWrapper>
       <ExecutionListWrapper />

apps/design-system/src/subjects/views/pipeline-edit/mocks/pipelineYaml1.ts

@@ -0,0 +1,19 @@
+export const pipelineYaml1 = `pipeline:
+  stages:
+    - group:
+        stages:
+            - parallel:
+                stages:
+                - steps:
+                    - run: go build
+                    - run: go test
+                - steps:
+                    - run: npm test
+            - group:
+                stages:
+                - steps:
+                    - run: go build
+                - steps:
+                    - run: npm run
+                    - run: npm test  
+`

apps/design-system/src/subjects/views/pipeline-edit/mocks/pipelineYaml2.ts

@@ -0,0 +1,11 @@
+export const pipelineYaml2 = `
+pipeline:
+  stages:
+    - group:
+        stages: []
+    - group:
+        stages:
+          - steps: []
+    - parallel:
+        stages: []
+`

apps/design-system/src/subjects/views/pipeline-edit/pipeline-edit.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react'
+
+import { Button, ButtonGroup } from '@harnessio/ui/components'
+import {
+  CommonNodeDataType,
+  deleteItemInArray,
+  injectItemInArray,
+  PipelineEdit,
+  YamlEntityType
+} from '@harnessio/ui/views'
+
+import { pipelineYaml1 } from './mocks/pipelineYaml1'
+
+const PipelineStudioWrapper = () => {
+  const [yamlRevision, setYamlRevision] = useState({ yaml: pipelineYaml1 })
+  const [view, setView] = useState<'graph' | 'yaml'>('graph')
+
+  const processAddIntention = (
+    nodeData: CommonNodeDataType,
+    position: 'after' | 'before' | 'in',
+    yamlEntityTypeToAdd?: YamlEntityType | undefined
+  ) => {
+    let newYaml = yamlRevision.yaml
+
+    switch (yamlEntityTypeToAdd) {
+      case YamlEntityType.SerialStageGroup:
+        // NOTE: if we are adding in the array we have to provide path to children array
+        newYaml = injectItemInArray(yamlRevision.yaml, {
+          path: position === 'in' && nodeData.yamlChildrenPath ? nodeData.yamlChildrenPath : nodeData.yamlPath,
+          position,
+          item: { group: { stages: [] } }
+        })
+        break
+
+      case YamlEntityType.ParallelStageGroup:
+        // NOTE: if we are adding in the array we have to provide path to children array
+        newYaml = injectItemInArray(yamlRevision.yaml, {
+          path: position === 'in' && nodeData.yamlChildrenPath ? nodeData.yamlChildrenPath : nodeData.yamlPath,
+          position,
+          item: { parallel: { stages: [] } }
+        })
+        break
+
+      case YamlEntityType.Stage:
+        // NOTE: if we are adding in the array we have to provide path to children array
+        newYaml = injectItemInArray(yamlRevision.yaml, {
+          path: position === 'in' && nodeData.yamlChildrenPath ? nodeData.yamlChildrenPath : nodeData.yamlPath,
+          position,
+          item: { steps: [] }
+        })
+        break
+
+      default:
+        if (nodeData.yamlEntityType === YamlEntityType.Stage) {
+          // TODO: set addIntent state and open drawer....
+        }
+        break
+    }
+
+    setYamlRevision({ yaml: newYaml })
+  }
+
+  return (
+    <div className="flex h-screen flex-col">
+      <ButtonGroup className="m-2 flex gap-2">
+        <Button onClick={() => setView('graph')} variant={'secondary'}>
+          Visual
+        </Button>
+        <Button onClick={() => setView('yaml')} variant={'secondary'}>
+          Yaml
+        </Button>
+      </ButtonGroup>
+
+      <PipelineEdit
+        yamlRevision={yamlRevision}
+        onYamlRevisionChange={setYamlRevision}
+        view={view}
+        onAddIntention={(nodeData, position, yamlEntityTypeToAdd) => {
+          console.log('onAddIntention')
+          processAddIntention(nodeData, position, yamlEntityTypeToAdd)
+        }}
+        onDeleteIntention={data => {
+          console.log('onDeleteIntention')
+          const updatedYaml = deleteItemInArray(yamlRevision.yaml, { path: data.yamlPath })
+          setYamlRevision({ yaml: updatedYaml })
+        }}
+        onEditIntention={() => {
+          console.log('onEditIntention')
+        }}
+        onSelectIntention={() => {
+          console.log('onSelectIntention')
+        }}
+        onRevealInYaml={() => {
+          console.log('onSelectIntention')
+        }}
+      />
+    </div>
+  )
+}
+
+export default PipelineStudioWrapper