fix(frontend): Use yaml mode for PipelineSpec editor view (kubeflow#7637

)

frontend/src/pages/PipelineDetailsV2.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import jsyaml from 'js-yaml';
 import React, { useState } from 'react';
 import { Elements, FlowElement } from 'react-flow-renderer';
 import { ApiPipeline, ApiPipelineVersion } from 'src/apis/pipeline';
@@ -26,7 +27,6 @@ import { isSafari } from 'src/lib/Utils';
 import { PipelineFlowElement } from 'src/lib/v2/StaticFlow';
 import { commonCss, padding } from '../Css';
 import DagCanvas from './v2/DagCanvas';
-import jsyaml from 'js-yaml';
 
 const TAB_NAMES = ['Graph', 'Pipeline Spec'];
 
@@ -126,7 +126,7 @@ function PipelineDetailsV2({
             value={jsyaml.safeDump(jsyaml.safeLoad(templateString || ''))} // Use safeLoad and then safeDump to make sure the Pipeline Spec is in Yaml Form.
             height={editorHeightWidth}
             width={editorHeightWidth}
-            mode='json'
+            mode='yaml'
             theme='github'
             editorProps={{ $blockScrolling: true }}
             readOnly={true}