Schema integration

web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx

@@ -38,7 +38,8 @@ export default function MonacoSourceCodeEditor({
   height,
   autoHeight,
   wordWrap = true,
-  onChange = noop
+  onChange = noop,
+  schema
 }: SourceCodeEditorProps) {
   const [editor, setEditor] = useState<monacoEditor.editor.IStandaloneCodeEditor>()
   const scrollbar = autoHeight ? 'hidden' : 'auto'
@@ -51,6 +52,23 @@ export default function MonacoSourceCodeEditor({
     }
   }, [])
 
+  useEffect(() => {
+    if (window.monaco && language === 'yaml' && schema) {
+      monaco.languages.yaml?.yamlDefaults?.setDiagnosticsOptions?.({
+        validate: true,
+        enableSchemaRequest: false,
+        hover: true,
+        completion: true,
+        schemas: [
+          {
+            fileMatch: ['*'],
+            schema
+          }
+        ]
+      })
+    }
+  }, [language, schema])
+
   useEventListener('resize', () => {
     editor?.layout({ width: 0, height: 0 })
     window.requestAnimationFrame(() => editor?.layout())

web/src/pages/NewPipeline/NewPipeline.tsx

@@ -8,10 +8,11 @@ import { Color } from '@harnessio/design-system'
 import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
-import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
+import MonacoSourceCodeEditor from 'components/SourceCodeEditor/MonacoSourceCodeEditor'
 import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
+import pipelineSchema from './schema/pipeline-schema.json'
 
 import css from './NewPipeline.module.scss'
 
@@ -26,7 +27,7 @@ const NewPipeline = (): JSX.Element => {
 
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
-    path: `/api/v1/repos/test-space/vb-repo/+/commits`
+    path: `/api/v1/repos/${space}/vb-repo/+/commits`
   })
 
   const handleSaveAndRun = (): void => {
@@ -90,8 +91,9 @@ const NewPipeline = (): JSX.Element => {
         />
         <PageBody>
           <Container className={css.editorContainer}>
-            <SourceCodeEditor
+            <MonacoSourceCodeEditor
               language={'yaml'}
+              schema={pipelineSchema}
               source={
                 'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
               }

web/src/utils/Utils.ts

@@ -88,6 +88,7 @@ export interface SourceCodeEditorProps {
   autoHeight?: boolean
   wordWrap?: boolean
   onChange?: (value: string) => void
+  schema?: Record<string, any>
 }
 
 // Monaco editor has a bug where when its value is set, the value