PipelineGraph and Pipeline Studio visual view integration (#532)

* pipeline-graph-v3

* add size example

* context menu example

* update pnpm-lock.yaml

* move pipeline-edit to pages-v2

* fix broken imports

* cleanup

* fix; rename types

* remove obsolete code

* multiple improvements

* feat: add v2 route for pipeline studio

* prettier css changes

---------

Co-authored-by: Abhinav Rastogi <abhinav.rastogi@harness.io>

apps/gitness/package.json

@@ -23,7 +23,7 @@
     "@harnessio/code-service-client": "3.2.1-beta.1",
     "@harnessio/forms": "workspace:*",
     "@harnessio/ui": "workspace:*",
-    "@harnessio/unified-pipeline": "workspace:*",
+    "@harnessio/pipeline-graph": "workspace:*",
     "@harnessio/views": "workspace:*",
     "@harnessio/yaml-editor": "workspace:*",
     "@hookform/resolvers": "^3.6.0",

apps/gitness/src/App.tsx

@@ -23,9 +23,11 @@ import { ThemeProvider } from './framework/context/ThemeContext'
 import { queryClient } from './framework/queryClient'
 import i18n from './i18n/i18n'
 import { useTranslationStore } from './i18n/stores/i18n-store'
+import PipelineLayout from './layouts/PipelineStudioLayout'
 import CreateProject from './pages-v2/create-project/create-project-container'
 import { LandingPage } from './pages-v2/landing-page-container'
 import { Logout } from './pages-v2/logout'
+import PipelineEditPage from './pages-v2/pipeline/pipeline-edit/pipeline-edit'
 import { SettingsProfileGeneralPage } from './pages-v2/profile-settings/profile-settings-general-container'
 import { SettingsProfileKeysPage } from './pages-v2/profile-settings/profile-settings-keys-container'
 import { ProfileSettingsThemePage } from './pages-v2/profile-settings/profile-settings-theme-page'
@@ -148,6 +150,26 @@ export default function App() {
           path: ':spaceId/repos',
           element: <ReposListPage />
         },
+        {
+          path: ':spaceId/repos/:repoId/pipelines/:pipelineId',
+          element: <PipelineLayout />,
+          children: [
+            {
+              index: true,
+              element: <RepoExecutionListPage />
+              // children: [
+              //   {
+              //     path: 'edit',
+              //     element: <PipelineEditPage />
+              //   }
+              // ]
+            },
+            {
+              path: 'edit',
+              element: <PipelineEditPage />
+            }
+          ]
+        },
         {
           path: ':spaceId/repos/:repoId',
           element: <RepoLayout />,
@@ -275,13 +297,7 @@ export default function App() {
             },
             {
               path: 'pipelines',
-              children: [
-                { index: true, element: <RepoPipelineListPage /> },
-                {
-                  path: ':pipelineId',
-                  element: <RepoExecutionListPage />
-                }
-              ]
+              children: [{ index: true, element: <RepoPipelineListPage /> }]
             }
           ]
         },

apps/gitness/src/components-v2/file-content-viewer.tsx

@@ -11,8 +11,8 @@ import { useThemeStore } from '../framework/context/ThemeContext'
 import { useDownloadRawFile } from '../framework/hooks/useDownloadRawFile'
 import { useGetRepoRef } from '../framework/hooks/useGetRepoPath'
 import useCodePathDetails from '../hooks/useCodePathDetails'
+import { themes } from '../pages-v2/pipeline/pipeline-edit/theme/monaco-theme'
 import { useRepoBranchesStore } from '../pages-v2/repo/stores/repo-branches-store'
-import { themes } from '../pages/pipeline-edit/theme/monaco-theme'
 import { PathParams } from '../RouteDefinitions'
 import { decodeGitContent, FILE_SEPERATOR, filenameToLanguage, formatBytes, GitCommitAction } from '../utils/git-utils'
 

apps/gitness/src/components-v2/file-editor.tsx

@@ -11,8 +11,8 @@ import { useThemeStore } from '../framework/context/ThemeContext'
 import { useExitConfirm } from '../framework/hooks/useExitConfirm'
 import useCodePathDetails from '../hooks/useCodePathDetails'
 import { useTranslationStore } from '../i18n/stores/i18n-store'
+import { themes } from '../pages-v2/pipeline/pipeline-edit/theme/monaco-theme'
 import { useRepoBranchesStore } from '../pages-v2/repo/stores/repo-branches-store'
-import { themes } from '../pages/pipeline-edit/theme/monaco-theme'
 import { PathParams } from '../RouteDefinitions'
 import { decodeGitContent, FILE_SEPERATOR, filenameToLanguage, GitCommitAction, PLAIN_TEXT } from '../utils/git-utils'
 import { splitPathWithParents } from '../utils/path-utils'

apps/gitness/src/components/FileContentViewer.tsx

@@ -22,7 +22,7 @@ import { CodeEditor } from '@harnessio/yaml-editor'
 
 import { useDownloadRawFile } from '../framework/hooks/useDownloadRawFile'
 import { useGetRepoRef } from '../framework/hooks/useGetRepoPath'
-import { themes } from '../pages/pipeline-edit/theme/monaco-theme'
+import { themes } from '../pages-v2/pipeline/pipeline-edit/theme/monaco-theme'
 import { timeAgoFromISOTime } from '../pages/pipeline-edit/utils/time-utils'
 import { PathParams } from '../RouteDefinitions'
 import { decodeGitContent, filenameToLanguage, formatBytes, getTrimmedSha, GitCommitAction } from '../utils/git-utils'

apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/graph-implementation/canvas/canvas-button.tsx

@@ -0,0 +1,14 @@
+export function CanvasButton(props: React.PropsWithChildren<{ onClick: () => void }>) {
+  const { children, onClick } = props
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      className="flex size-8 items-center justify-center border bg-muted text-primary"
+    >
+      {children}
+    </div>
+  )
+}

apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/graph-implementation/canvas/canvas-controls.tsx

@@ -0,0 +1,20 @@
+import { useCanvasContext } from '@harnessio/pipeline-graph'
+
+import { CanvasButton } from './canvas-button'
+
+export function CanvasControls() {
+  const { fit } = useCanvasContext()
+
+  return (
+    <div className="absolute bottom-2 left-2 flex flex-col gap-y-2">
+      {/* TODO: uncomment increase/decrease once its fixed in pipeline-graph */}
+      {/* 
+      <CanvasButton onClick={() => increase()}>+</CanvasButton>
+      <CanvasButton onClick={() => decrease()}>-</CanvasButton> 
+      */}
+      <CanvasButton onClick={() => fit()}>
+        <div className="size-3 border border-primary"></div>
+      </CanvasButton>
+    </div>
+  )
+}

apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/graph-implementation/content-node-types.ts

@@ -0,0 +1,11 @@
+export enum ContentNodeTypes {
+  add = 'add',
+  start = 'start',
+  end = 'end',
+  step = 'step',
+  approval = 'approval',
+  parallel = 'parallel',
+  serial = 'serial',
+  stage = 'stage',
+  form = 'form'
+}

apps/gitness/src/pages-v2/pipeline/pipeline-edit/components/graph-implementation/nodes/add-node.tsx

@@ -0,0 +1,39 @@
+import { Icon } from '@harnessio/canary'
+import { LeafNodeInternalType } from '@harnessio/pipeline-graph'
+import { Button } from '@harnessio/ui/components'
+
+import { useNodeContext } from '../../../context/NodeContextMenuProvider'
+import { CommonNodeDataType } from '../types/nodes'
+
+export interface AddNodeDataType extends CommonNodeDataType {}
+
+export function AddNode(props: { node: LeafNodeInternalType<AddNodeDataType> }) {
+  const { node } = props
+  const { data } = node
+
+  const { handleAddIn } = useNodeContext()
+
+  return (
+    <div
+      className="flex size-full items-center justify-center rounded-full border border-borders-6 bg-primary-foreground"
+      //  TODO
+      style={{
+        border: '1px solid #454545',
+        background: 'linear-gradient(-47deg, rgba(152, 150, 172, 0.05) 0%, rgba(177, 177, 177, 0.15) 100%)'
+      }}
+    >
+      <Button
+        className="self-center rounded-full p-3"
+        style={{ alignSelf: 'center' }}
+        variant="outline"
+        size="lg"
+        onMouseDown={e => e.stopPropagation()}
+        onClick={e => {
+          handleAddIn(data, e.currentTarget)
+        }}
+      >
+        <Icon name="plus" size={15} />
+      </Button>
+    </div>
+  )
+}