feat: add YAML syntax highlighting for resource details

[A69SHUBHAM]

Summary

This PR improves the YAML viewing experience across the dashboard by adding syntax highlighting for resource manifests.

Changes

• Added a reusable YamlViewer component.
• Integrated syntax highlighting for YAML content.
• Replaced duplicated <pre><code> blocks in:
  • Jobs
  • Queues
  • Pods
  • PodGroups
• Kept the implementation lightweight by using the react-syntax-highlighter light build with only the YAML language registered.

Verification

• Verified YAML renders correctly in Jobs, Queues, Pods, and PodGroups detail dialogs.
• Confirmed existing functionality remains unchanged.
• Ran the application locally and verified the updated views.

Motivation

The previous implementation displayed YAML as plain text, making larger manifests harder to read. Syntax highlighting improves readability while reducing duplicated rendering code through a reusable component.

Closes #292

[volcano-sh-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign william-wang for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[volcano-sh-bot]

Welcome @A69SHUBHAM! It looks like this is your first PR to volcano-sh/dashboard 🎉

[gemini-code-assist]

Code Review

This pull request introduces a new YamlViewer component using react-syntax-highlighter to display syntax-highlighted YAML configurations across several dashboard management pages, including jobs, podgroups, pods, and queues. Feedback on the changes points out potential SSR import errors and hydration mismatches in Next.js (App Router) when using react-syntax-highlighter directly. It is recommended to use CommonJS imports and implement a client-side mounting check to prevent these issues.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

In Next.js (App Router), using react-syntax-highlighter directly can lead to two major issues:

1. SSR Import Errors: Importing from dist/esm/... can cause SyntaxError: Cannot use import statement outside a module during server-side rendering. Using the dist/cjs/... paths resolves this compatibility issue.
2. Hydration Mismatches: The HTML generated by react-syntax-highlighter on the server may differ slightly from the client-side rendering, leading to React hydration warnings/errors.

To prevent these issues, we can:

• Switch to CommonJS (dist/cjs/...) imports.
• Use a mounted state with useEffect to render a simple <pre><code> block as a fallback during SSR/hydration, and swap in the syntax highlighter once mounted on the client. This avoids hydration mismatches and prevents layout shifts.

import { useEffect, useState } from 'react';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import yamlLang from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
import { vs2015 } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

SyntaxHighlighter.registerLanguage('yaml', yamlLang);

export function YamlViewer({ yaml }: { yaml: string | undefined }) {
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    if (!yaml) return null;

    if (!mounted) {
        return (
            <div className="rounded-lg overflow-hidden text-sm border border-gray-800 bg-[#111827] p-4">
                <pre className="whitespace-pre overflow-x-auto text-gray-300">
                    <code>{yaml}</code>
                </pre>
            </div>
        );
    }

    return (
        <div className="rounded-lg overflow-hidden text-sm border border-gray-800">
            <SyntaxHighlighter language="yaml" style={vs2015} customStyle={{ margin: 0, padding: '1rem', backgroundColor: '#111827' }}>
                {yaml}
            </SyntaxHighlighter>
        </div>
    );
}