@orsetra/shared-ui 1.1.36 → 1.1.38

package/components/DefinitionCode/theme.ts

@@ -0,0 +1,271 @@
+export default {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    {
+      background: '1B191A',
+      token: '',
+    },
+    {
+      foreground: '555555',
+      token: 'comment',
+    },
+    {
+      foreground: '555555',
+      token: 'comment.block',
+    },
+    {
+      foreground: 'ad9361',
+      token: 'string',
+    },
+    {
+      foreground: 'cccccc',
+      token: 'constant.numeric',
+    },
+    {
+      foreground: 'a1a1ff',
+      token: 'keyword',
+    },
+    {
+      foreground: '2f006e',
+      token: 'meta.preprocessor',
+    },
+    {
+      fontStyle: 'bold',
+      token: 'keyword.control.import',
+    },
+    {
+      foreground: 'a1a1ff',
+      token: 'support.function',
+    },
+    {
+      foreground: '0000ff',
+      token: 'declaration.function function-result',
+    },
+    {
+      fontStyle: 'bold',
+      token: 'declaration.function function-name',
+    },
+    {
+      fontStyle: 'bold',
+      token: 'declaration.function argument-name',
+    },
+    {
+      foreground: '0000ff',
+      token: 'declaration.function function-arg-type',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'declaration.function function-argument',
+    },
+    {
+      fontStyle: 'underline',
+      token: 'declaration.class class-name',
+    },
+    {
+      fontStyle: 'italic underline',
+      token: 'declaration.class class-inheritance',
+    },
+    {
+      foreground: 'fff9f9',
+      background: 'ff0000',
+      fontStyle: 'bold',
+      token: 'invalid',
+    },
+    {
+      background: 'ffd0d0',
+      token: 'invalid.deprecated.trailing-whitespace',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'declaration.section section-name',
+    },
+    {
+      foreground: 'c10006',
+      token: 'string.interpolation',
+    },
+    {
+      foreground: '666666',
+      token: 'string.regexp',
+    },
+    {
+      foreground: 'c1c144',
+      token: 'variable',
+    },
+    {
+      foreground: '6782d3',
+      token: 'constant',
+    },
+    {
+      foreground: 'afa472',
+      token: 'constant.character',
+    },
+    {
+      foreground: 'de8e30',
+      fontStyle: 'bold',
+      token: 'constant.language',
+    },
+    {
+      fontStyle: 'underline',
+      token: 'embedded',
+    },
+    {
+      foreground: '858ef4',
+      token: 'keyword.markup.element-name',
+    },
+    {
+      foreground: '9b456f',
+      token: 'keyword.markup.attribute-name',
+    },
+    {
+      foreground: '9b456f',
+      token: 'meta.attribute-with-value',
+    },
+    {
+      foreground: 'c82255',
+      fontStyle: 'bold',
+      token: 'keyword.exception',
+    },
+    {
+      foreground: '47b8d6',
+      token: 'keyword.operator',
+    },
+    {
+      foreground: '6969fa',
+      fontStyle: 'bold',
+      token: 'keyword.control',
+    },
+    {
+      foreground: '68685b',
+      token: 'meta.tag.preprocessor.xml',
+    },
+    {
+      foreground: '888888',
+      token: 'meta.tag.sgml.doctype',
+    },
+    {
+      fontStyle: 'italic',
+      token: 'string.quoted.docinfo.doctype.DTD',
+    },
+    {
+      foreground: '909090',
+      token: 'comment.other.server-side-include.xhtml',
+    },
+    {
+      foreground: '909090',
+      token: 'comment.other.server-side-include.html',
+    },
+    {
+      foreground: '858ef4',
+      token: 'text.html declaration.tag',
+    },
+    {
+      foreground: '858ef4',
+      token: 'text.html meta.tag',
+    },
+    {
+      foreground: '858ef4',
+      token: 'text.html entity.name.tag.xhtml',
+    },
+    {
+      foreground: '9b456f',
+      token: 'keyword.markup.attribute-name',
+    },
+    {
+      foreground: '777777',
+      token: 'keyword.other.phpdoc.php',
+    },
+    {
+      foreground: 'c82255',
+      token: 'keyword.other.include.php',
+    },
+    {
+      foreground: 'de8e20',
+      fontStyle: 'bold',
+      token: 'support.constant.core.php',
+    },
+    {
+      foreground: 'de8e10',
+      fontStyle: 'bold',
+      token: 'support.constant.std.php',
+    },
+    {
+      foreground: 'b72e1d',
+      token: 'variable.other.global.php',
+    },
+    {
+      foreground: '00ff00',
+      token: 'variable.other.global.safer.php',
+    },
+    {
+      foreground: 'bfa36d',
+      token: 'string.quoted.single.php',
+    },
+    {
+      foreground: '6969fa',
+      token: 'keyword.storage.php',
+    },
+    {
+      foreground: 'ad9361',
+      token: 'string.quoted.double.php',
+    },
+    {
+      foreground: 'ec9e00',
+      token: 'entity.other.attribute-name.id.css',
+    },
+    {
+      foreground: 'b8cd06',
+      fontStyle: 'bold',
+      token: 'entity.name.tag.css',
+    },
+    {
+      foreground: 'edca06',
+      token: 'entity.other.attribute-name.class.css',
+    },
+    {
+      foreground: '2e759c',
+      token: 'entity.other.attribute-name.pseudo-class.css',
+    },
+    {
+      foreground: 'ffffff',
+      background: 'ff0000',
+      token: 'invalid.bad-comma.css',
+    },
+    {
+      foreground: '9b2e4d',
+      token: 'support.constant.property-value.css',
+    },
+    {
+      foreground: 'e1c96b',
+      token: 'support.type.property-name.css',
+    },
+    {
+      foreground: '666633',
+      token: 'constant.other.rgb-value.css',
+    },
+    {
+      foreground: '666633',
+      token: 'support.constant.font-name.css',
+    },
+    {
+      foreground: '7171f3',
+      token: 'support.constant.tm-language-def',
+    },
+    {
+      foreground: '7171f3',
+      token: 'support.constant.name.tm-language-def',
+    },
+    {
+      foreground: '6969fa',
+      token: 'keyword.other.unit.css',
+    },
+  ],
+  colors: {
+    'editor.foreground': '#DADADA',
+    'editor.background': '#1B191A',
+    'editor.selectionBackground': '#73597E80',
+    'editor.lineHighlightBackground': '#353030',
+    'editorCursor.foreground': '#FFFFFF',
+    'editorWhitespace.foreground': '#4F4D4D',
+  },
+};

package/components/K8sObjectsCode/index.tsx

@@ -0,0 +1,156 @@
+import { Upload, Button, Message, Field } from '@alifd/next';
+import * as yaml from 'js-yaml';
+import React from 'react';
+import { AiOutlineCloudUpload } from 'react-icons/ai';
+import { v4 as uuid } from 'uuid';
+
+import DefinitionCode from '../../components/DefinitionCode';
+import { If } from '../../components/If';
+import { Translation } from '../../components/Translation';
+
+import type { KubernetesObject } from './objects';
+
+type Props = {
+  value?: any;
+  id: string;
+  onChange: (value: any) => void;
+};
+
+type State = {
+  message: string;
+  containerId: string;
+  showButton: boolean;
+};
+
+class K8sObjectsCode extends React.Component<Props, State> {
+  form: Field;
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      message: '',
+      containerId: uuid(),
+      showButton: false,
+    };
+    this.form = new Field(this, {
+      onChange: () => {
+        const values: { code: string } = this.form.getValues();
+        this.onChange(values.code);
+      },
+    });
+  }
+
+  componentDidMount = () => {
+    const { value } = this.props;
+    this.setValues(value);
+  };
+
+  setValues = (value: KubernetesObject[]) => {
+    if (value) {
+      try {
+        let code = '---\n';
+        if (value instanceof Array) {
+          value.map((res) => {
+            if (res) {
+              code = code + yaml.dump(res) + '---\n';
+            }
+          });
+        } else {
+          code = yaml.dump(value) + '---\n';
+        }
+        this.form.setValues({ code: code });
+      } catch {}
+    }
+  };
+
+  onChange = (v: string) => {
+    const { onChange, value } = this.props;
+    if (onChange) {
+      try {
+        let object: any = yaml.load(v);
+        if (!(object instanceof Array)) {
+          object = [object];
+        }
+        object = object.filter((ob: any) => ob != null);
+        if (yaml.dump(value) != v) {
+          onChange(object);
+        }
+        this.setState({ message: '' });
+      } catch (error: any) {
+        if ((error.message = 'expected a single document in the stream, but found more')) {
+          try {
+            let objects = yaml.loadAll(v);
+            if (yaml.dump(value) != v) {
+              objects = objects.filter((ob: any) => ob != null);
+              onChange(objects);
+            }
+            this.setState({
+              message: '',
+            });
+          } catch (err: any) {
+            this.setState({ message: err.message });
+          }
+        } else {
+          this.setState({ message: error.message });
+        }
+      }
+    }
+  };
+
+  customRequest = (option: any) => {
+    const reader = new FileReader();
+    const fileselect = option.file;
+    reader.readAsText(fileselect);
+    reader.onload = () => {
+      this.form.setValue('code', reader.result?.toString() || '');
+    };
+    return {
+      file: File,
+      abort() {},
+    };
+  };
+
+  onConvert2WebService = () => {};
+
+  render() {
+    const { id } = this.props;
+    const { init } = this.form;
+    const { message, containerId, showButton } = this.state;
+    return (
+      <div id={id}>
+        <If condition={message}>
+          <span style={{ color: 'red' }}>{message}</span>
+        </If>
+
+        <Message type="notice" style={{ marginTop: '16px' }}>
+          <Translation>
+            The input data will be automatically formatted. Ensure that the input data is a valid k8s resource YAML.
+          </Translation>
+        </Message>
+
+        <Upload request={this.customRequest}>
+          <Button text type="normal" className="padding-left-0">
+            <AiOutlineCloudUpload />
+            <Translation>Upload Yaml File</Translation>
+          </Button>
+        </Upload>
+
+        <div id={containerId} className="guide-code">
+          <DefinitionCode containerId={containerId} language={'yaml'} readOnly={false} {...init('code')} />
+        </div>
+
+        <If condition={showButton}>
+          <div style={{ marginTop: '16px' }}>
+            <span style={{ fontSize: '14px', color: '#000', marginRight: '16px' }}>
+              <Translation>Convert the kubernetes resource component to the webservice component?</Translation>
+            </span>
+            <Button type="secondary" onClick={this.onConvert2WebService}>
+              Yes
+            </Button>
+          </div>
+        </If>
+      </div>
+    );
+  }
+}
+
+export default K8sObjectsCode;

package/components/K8sObjectsCode/objects.tsx

@@ -0,0 +1,27 @@
+import type { ResourceObject } from '@velaux/data';
+
+export interface KubernetesObject extends ResourceObject {
+  apiVersion: string;
+  kind: string;
+  spec?: Record<string, any>;
+}
+
+export function isDeployment(object: KubernetesObject): boolean {
+  return object.kind === 'Deployment';
+}
+
+export function isShowConvertButton(objects: KubernetesObject[]): boolean {
+  return objects.filter((ob) => isDeployment(ob)).length > 0;
+}
+
+export function buildWebServiceBaseDeployment(object: KubernetesObject): Record<string, any> {
+  return {
+    image: object.spec?.containers[0].image,
+    ports: [],
+    readinessProbe: {},
+    livenessProbe: {},
+    env: [],
+    memory: '',
+    cpu: '',
+  };
+}

package/components/extends/CamelRouteCode/index.tsx

@@ -0,0 +1,593 @@
+"use client";
+
+import * as monaco from 'monaco-editor';
+import * as yaml from 'js-yaml';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  AlertCircle,
+  CheckCircle2,
+  FileCode2,
+  FolderGit2,
+  Loader2,
+  Lock,
+  Upload,
+  WrapText,
+} from 'lucide-react';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select';
+import { cn } from '../../../lib/utils';
+
+// ─── Public types ────────────────────────────────────────────────────────────
+
+export type ProjectItem = {
+  id: string | number;
+  owner: string;
+  name: string;
+};
+
+export type ContentItem = {
+  _links?: { git?: string; html?: string; self?: string };
+  content?: string;
+  download_url?: string;
+  encoding?: string;
+  git_url?: string;
+  html_url?: string;
+  last_commit_sha?: string;
+  name: string;
+  path: string;
+  sha?: string;
+  size?: number;
+  submodule_git_url?: string;
+  target?: string;
+  type: string;
+  url?: string;
+};
+
+// ─── Props ───────────────────────────────────────────────────────────────────
+
+type Props = {
+  /** Field identifier */
+  id: string;
+  /** Current YAML string value */
+  value?: string;
+  /** Called whenever the YAML content changes (only in editable state) */
+  onChange?: (value: string) => void;
+  /** Disable the whole widget */
+  disabled?: boolean;
+  /**
+   * Pre-selected project.
+   * When provided the project selector is hidden; the file list is loaded immediately.
+   */
+  project?: ProjectItem | null;
+  /** Returns the list of available projects (unused when `project` is provided) */
+  listProjects?: () => Promise<ProjectItem[]>;
+  /** Returns the file tree for a given project */
+  onProjectSelect?: (owner: string, repo: string) => Promise<ContentItem[]>;
+};
+
+type Tab = 'repo' | 'editor';
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+const CamelRouteCode: React.FC<Props> = ({
+  id,
+  value = '',
+  onChange,
+  disabled = false,
+  project,
+  listProjects,
+  onProjectSelect,
+}) => {
+  const [activeTab, setActiveTab] = useState<Tab>('editor');
+
+  // Editor content – shared between both tabs
+  const [editorContent, setEditorContent] = useState(value);
+  const [yamlError, setYamlError]         = useState('');
+
+  // Repo-source state
+  const [projects, setProjects]           = useState<ProjectItem[]>([]);
+  const [selectedProject, setSelectedProject] = useState<ProjectItem | null>(null);
+  const [files, setFiles]                 = useState<ContentItem[]>([]);
+  const [selectedFile, setSelectedFile]   = useState<ContentItem | null>(null);
+  const [loadingProjects, setLoadingProjects] = useState(false);
+  const [loadingFiles, setLoadingFiles]   = useState(false);
+  const [repoError, setRepoError]         = useState('');
+
+  // Refs
+  const fileInputRef       = useRef<HTMLInputElement>(null);
+  const editorContainerRef = useRef<HTMLDivElement>(null);
+  const editorRef          = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  // The editor is read-only once a file is loaded from the repo
+  const isReadOnly = disabled || selectedFile !== null;
+
+  // Mutable refs so stable callbacks always see the latest values
+  const isReadOnlyRef = useRef(isReadOnly);
+  const onChangeRef   = useRef(onChange);
+  isReadOnlyRef.current = isReadOnly;
+  onChangeRef.current   = onChange;
+
+  // ── Mount Monaco once ──────────────────────────────────────────────────────
+  useEffect(() => {
+    const container = editorContainerRef.current;
+    if (!container) return;
+
+    const modelUri = monaco.Uri.parse(`camel-route:${id}/flows.yaml`);
+    let model = monaco.editor.getModel(modelUri);
+    if (!model) {
+      model = monaco.editor.createModel(editorContent, 'yaml', modelUri);
+    } else {
+      model.setValue(editorContent);
+    }
+
+    const editor = monaco.editor.create(container, {
+      model,
+      language: 'yaml',
+      readOnly: isReadOnlyRef.current,
+      theme: 'vs',
+      minimap: { enabled: false },
+      automaticLayout: true,
+      scrollBeyondLastLine: false,
+      fontSize: 12,
+      lineNumbers: 'on',
+      wordWrap: 'on',
+      padding: { top: 8, bottom: 8 },
+    });
+
+    editorRef.current = editor;
+
+    editor.onDidChangeModelContent(() => {
+      if (isReadOnlyRef.current) return;
+      const val = editor.getValue();
+      // Validate YAML on every change
+      try {
+        yaml.load(val);
+        setYamlError('');
+      } catch (e: any) {
+        setYamlError(e.message);
+      }
+      setEditorContent(val);
+      onChangeRef.current?.(val);
+    });
+
+    return () => {
+      editor.dispose();
+      monaco.editor.getModel(modelUri)?.dispose();
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Sync readOnly option dynamically ──────────────────────────────────────
+  useEffect(() => {
+    editorRef.current?.updateOptions({ readOnly: isReadOnly });
+  }, [isReadOnly]);
+
+  // ── Push external `value` prop into the editor ────────────────────────────
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (editor.getValue() !== value) {
+      setEditorContent(value);
+      editor.setValue(value);
+    }
+  }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Re-layout editor when switching back to the editor tab ────────────────
+  useEffect(() => {
+    if (activeTab === 'editor') {
+      requestAnimationFrame(() => editorRef.current?.layout());
+    }
+  }, [activeTab]);
+
+  // ── Load projects when repo tab is first opened (no project prop) ─────────
+  useEffect(() => {
+    if (activeTab !== 'repo' || project != null || !listProjects || projects.length > 0) return;
+    setLoadingProjects(true);
+    setRepoError('');
+    listProjects()
+      .then(setProjects)
+      .catch((e: Error) => setRepoError(e.message))
+      .finally(() => setLoadingProjects(false));
+  }, [activeTab, project, listProjects]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Load file list when project prop is provided ──────────────────────────
+  useEffect(() => {
+    if (project == null || !onProjectSelect) return;
+    setLoadingFiles(true);
+    setRepoError('');
+    onProjectSelect(project.owner, project.name)
+      .then((c) => setFiles(filterYaml(c)))
+      .catch((e: Error) => setRepoError(e.message))
+      .finally(() => setLoadingFiles(false));
+  }, [project]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ─── Handlers ─────────────────────────────────────────────────────────────
+
+  const handleProjectChange = async (projectId: string) => {
+    const proj = projects.find((p) => String(p.id) === projectId) ?? null;
+    setSelectedProject(proj);
+    setFiles([]);
+    setSelectedFile(null);
+    setRepoError('');
+    if (!proj || !onProjectSelect) return;
+    setLoadingFiles(true);
+    try {
+      const contents = await onProjectSelect(proj.owner, proj.name);
+      setFiles(filterYaml(contents));
+    } catch (e: any) {
+      setRepoError(e.message);
+    } finally {
+      setLoadingFiles(false);
+    }
+  };
+
+  const handleFileChange = async (filePath: string) => {
+    const file = files.find((f) => f.path === filePath);
+    if (!file) return;
+    setRepoError('');
+    try {
+      const content = await resolveContent(file);
+      // Validate before loading
+      try { yaml.load(content); setYamlError(''); } catch (e: any) { setYamlError(e.message); }
+      setSelectedFile(file);
+      setEditorContent(content);
+      editorRef.current?.setValue(content);
+      onChange?.(content);
+    } catch (e: any) {
+      setRepoError(e.message);
+    }
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const text = reader.result?.toString() ?? '';
+      try { yaml.load(text); setYamlError(''); } catch (err: any) { setYamlError(err.message); }
+      setEditorContent(text);
+      editorRef.current?.setValue(text);
+      onChange?.(text);
+    };
+    reader.readAsText(file);
+    e.target.value = '';
+  };
+
+  const handleFormat = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor || isReadOnlyRef.current) return;
+    try {
+      const parsed = yaml.load(editor.getValue());
+      const formatted = yaml.dump(parsed, { indent: 2, lineWidth: -1, noRefs: true });
+      editor.setValue(formatted);
+    } catch {
+      // invalid yaml – cannot format
+    }
+  }, []);
+
+  // ─── Derived ──────────────────────────────────────────────────────────────
+
+  const hasProjectProp   = project != null;
+  const activeProject    = hasProjectProp ? project : selectedProject;
+  const fileSelectDisabled = disabled || !activeProject || loadingFiles;
+
+  // ─── Render ───────────────────────────────────────────────────────────────
+
+  return (
+    <div className="flex flex-col border border-ibm-gray-30 bg-white overflow-hidden" style={{ height: 420 }}>
+
+      {/* ══ Content area (both panels always rendered; inactive is hidden) ══ */}
+      <div className="flex-1 min-h-0 relative">
+
+        {/* ── Tab 1 : Source repo ────────────────────────────────────────── */}
+        <div
+          className={cn(
+            'absolute inset-0 flex flex-col p-3 gap-3 bg-white',
+            activeTab !== 'repo' && 'invisible pointer-events-none',
+          )}
+        >
+          {/* Selectors row */}
+          <div className="flex items-center gap-2">
+            {/* Project selector or badge */}
+            {!hasProjectProp ? (
+              <Select onValueChange={handleProjectChange} disabled={disabled || loadingProjects}>
+                <SelectTrigger className="h-8 text-xs w-[200px]">
+                  <SelectValue placeholder={loadingProjects ? 'Loading…' : 'Project'} />
+                </SelectTrigger>
+                <SelectContent>
+                  {projects.map((p) => (
+                    <SelectItem key={String(p.id)} value={String(p.id)}>
+                      {p.owner}/{p.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <div className="flex items-center gap-1.5 text-xs text-ibm-gray-60 border border-ibm-gray-30 bg-ibm-gray-10 px-2 h-8 shrink-0">
+                <FolderGit2 className="w-3.5 h-3.5 text-ibm-gray-50 shrink-0" />
+                <span className="truncate max-w-[180px]">{project!.owner}/{project!.name}</span>
+              </div>
+            )}
+
+            {/* File selector */}
+            <Select onValueChange={handleFileChange} disabled={fileSelectDisabled}>
+              <SelectTrigger
+                className={cn(
+                  'h-8 text-xs flex-1 max-w-[280px]',
+                  fileSelectDisabled && 'opacity-40',
+                )}
+              >
+                <SelectValue placeholder=".yaml file" />
+              </SelectTrigger>
+              <SelectContent>
+                {files.map((f) => (
+                  <SelectItem key={f.path} value={f.path}>{f.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {(loadingProjects || loadingFiles) && (
+              <Loader2 className="w-3.5 h-3.5 animate-spin text-ibm-gray-50 shrink-0" />
+            )}
+          </div>
+
+          {/* Repo error */}
+          {repoError && (
+            <div className="flex items-center gap-1.5 text-xs text-ibm-red-40 bg-ibm-red-90 border border-ibm-red-70 px-3 py-2">
+              <AlertCircle className="w-3.5 h-3.5 shrink-0" />
+              <span className="truncate">{repoError}</span>
+            </div>
+          )}
+
+          {/* Info panel */}
+          <div className="flex-1 border border-ibm-gray-20 bg-ibm-gray-10 p-3 flex flex-col gap-3 text-xs overflow-auto">
+            {!activeProject && !selectedFile ? (
+              <p className="text-ibm-gray-40 italic">
+                Select a project then a file to load the source.
+              </p>
+            ) : (
+              <>
+                {activeProject && (
+                  <InfoSection label="Project">
+                    <InfoRow icon={<FolderGit2 className="w-3 h-3" />}>
+                      <span className="font-medium text-ibm-gray-100">
+                        {activeProject.owner}/{activeProject.name}
+                      </span>
+                    </InfoRow>
+                    <InfoRow label="ID">{String(activeProject.id)}</InfoRow>
+                  </InfoSection>
+                )}
+
+                {selectedFile && (
+                  <InfoSection label="Loaded file">
+                    <InfoRow label="Name">
+                      <span className="font-medium text-ibm-gray-100">{selectedFile.name}</span>
+                    </InfoRow>
+                    <InfoRow label="Path">{selectedFile.path}</InfoRow>
+                    {selectedFile.size != null && (
+                      <InfoRow label="Size">{formatBytes(selectedFile.size)}</InfoRow>
+                    )}
+                    {selectedFile.sha && (
+                      <InfoRow label="SHA">{selectedFile.sha.slice(0, 7)}</InfoRow>
+                    )}
+                    {selectedFile.last_commit_sha && (
+                      <InfoRow label="Last commit">
+                        {selectedFile.last_commit_sha.slice(0, 7)}
+                      </InfoRow>
+                    )}
+                    <InfoRow icon={<Lock className="w-3 h-3 text-ibm-gray-50" />}>
+                      <span className="text-ibm-gray-50">Editor is read-only</span>
+                    </InfoRow>
+                  </InfoSection>
+                )}
+
+                {activeProject && !selectedFile && files.length > 0 && (
+                  <p className="text-ibm-gray-40 italic">
+                    {files.length} file{files.length > 1 ? 's' : ''} available — select one.
+                  </p>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* ── Tab 2 : Éditeur ────────────────────────────────────────────── */}
+        <div
+          className={cn(
+            'absolute inset-0 flex flex-col',
+            activeTab !== 'editor' && 'invisible pointer-events-none',
+          )}
+        >
+          {/* Editor toolbar */}
+          <div className="flex items-center gap-3 px-3 border-b border-ibm-gray-20 bg-ibm-gray-10 h-9 shrink-0">
+            {/* File upload – only meaningful when editor is writable */}
+            {!isReadOnly && (
+              <>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".yaml,.yml"
+                  className="hidden"
+                  onChange={handleFileUpload}
+                  tabIndex={-1}
+                />
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={disabled}
+                  className="flex items-center gap-1.5 text-xs text-ibm-blue-60 hover:text-ibm-blue-70 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                >
+                  <Upload className="w-3.5 h-3.5" />
+                  Load .yaml
+                </button>
+
+                <span className="text-ibm-gray-60 select-none">|</span>
+
+                <button
+                  type="button"
+                  onClick={handleFormat}
+                  disabled={disabled || !!yamlError}
+                  title="Format YAML"
+                  className="flex items-center gap-1.5 text-xs text-ibm-gray-60 hover:text-ibm-gray-80 disabled:opacity-30 disabled:pointer-events-none transition-colors"
+                >
+                  <WrapText className="w-3.5 h-3.5" />
+                  Format
+                </button>
+              </>
+            )}
+
+            {/* Spacer */}
+            <div className="flex-1" />
+
+            {/* YAML status indicator */}
+            {editorContent && (
+              yamlError ? (
+                <span className="flex items-center gap-1 text-[10px] text-ibm-red-40">
+                  <AlertCircle className="w-3 h-3" />
+                  Invalid YAML
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 text-[10px] text-ibm-green-40">
+                  <CheckCircle2 className="w-3 h-3" />
+                  Valid YAML
+                </span>
+              )
+            )}
+
+            {/* Read-only badge */}
+            {isReadOnly && !disabled && (
+              <span className="flex items-center gap-1 text-[10px] text-ibm-gray-50 ml-2">
+                <Lock className="w-3 h-3" />
+                read-only
+              </span>
+            )}
+          </div>
+
+          {/* YAML error detail */}
+          {yamlError && (
+            <div className="flex items-start gap-1.5 px-3 py-1.5 text-[11px] text-ibm-red-60 bg-ibm-red-10 border-b border-ibm-red-20 shrink-0 leading-relaxed">
+              <AlertCircle className="w-3 h-3 mt-0.5 shrink-0" />
+              <span>{yamlError}</span>
+            </div>
+          )}
+
+          {/* Monaco container – always in DOM, fills remaining space */}
+          <div
+            ref={editorContainerRef}
+            className="flex-1 min-h-0"
+          />
+        </div>
+      </div>
+
+      {/* ══ Tabs – bottom ══ */}
+      <div className="flex shrink-0 border-t border-ibm-gray-20">
+        <TabButton
+          active={activeTab === 'repo'}
+          icon={<FolderGit2 className="w-3.5 h-3.5" />}
+          label="Source repo"
+          badge={selectedFile ? <Lock className="w-3 h-3 text-ibm-gray-50" /> : undefined}
+          onClick={() => setActiveTab('repo')}
+          disabled={disabled}
+        />
+        <TabButton
+          active={activeTab === 'editor'}
+          icon={<FileCode2 className="w-3.5 h-3.5" />}
+          label="Editor"
+          onClick={() => setActiveTab('editor')}
+          disabled={disabled}
+          borderLeft
+        />
+      </div>
+    </div>
+  );
+};
+
+// ─── Internal sub-components ─────────────────────────────────────────────────
+
+type TabButtonProps = {
+  active: boolean;
+  icon: React.ReactNode;
+  label: string;
+  badge?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  borderLeft?: boolean;
+};
+
+const TabButton: React.FC<TabButtonProps> = ({
+  active, icon, label, badge, onClick, disabled, borderLeft,
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    disabled={disabled}
+    className={cn(
+      'flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition-colors',
+      'disabled:pointer-events-none disabled:opacity-40',
+      borderLeft && 'border-l border-ibm-gray-20',
+      active
+        ? 'bg-white text-ibm-blue-60 border-t-2 border-t-ibm-blue-60 -mt-px'
+        : 'bg-ibm-gray-10 text-ibm-gray-60 hover:bg-ibm-gray-20 hover:text-ibm-gray-80',
+    )}
+  >
+    {icon}
+    {label}
+    {badge && <span className="ml-1">{badge}</span>}
+  </button>
+);
+
+type InfoSectionProps = { label: string; children: React.ReactNode };
+
+const InfoSection: React.FC<InfoSectionProps> = ({ label, children }) => (
+  <div>
+    <p className="text-[10px] uppercase tracking-widest text-ibm-gray-40 mb-1.5">{label}</p>
+    <div className="flex flex-col gap-1 pl-1">{children}</div>
+  </div>
+);
+
+type InfoRowProps = {
+  label?: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+const InfoRow: React.FC<InfoRowProps> = ({ label, icon, children }) => (
+  <div className="flex items-center gap-2 text-ibm-gray-70">
+    {icon}
+    {label && <span className="text-ibm-gray-40 w-24 shrink-0">{label}</span>}
+    <span className="truncate">{children}</span>
+  </div>
+);
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function filterYaml(items: ContentItem[]): ContentItem[] {
+  return items.filter(
+    (f) => f.type === 'file' && (f.name.endsWith('.yaml') || f.name.endsWith('.yml')),
+  );
+}
+
+async function resolveContent(file: ContentItem): Promise<string> {
+  if (file.content && file.encoding === 'base64') {
+    return atob(file.content.replace(/\s/g, ''));
+  }
+  if (file.download_url) {
+    const res = await fetch(file.download_url);
+    if (!res.ok) throw new Error(`Download error: ${res.statusText}`);
+    return res.text();
+  }
+  throw new Error('Unable to retrieve file content.');
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default CamelRouteCode;

package/components/extends/index.ts

@@ -1,4 +1,6 @@
 // Extended UI Components for Dynamic Forms
+export { default as CamelRouteCode } from './CamelRouteCode'
+export type { ProjectItem, ContentItem } from './CamelRouteCode'
 export { default as CPUNumber } from './CPUNumber'
 export { default as ClassStorageSelect } from './ClassStorageSelect'
 export { default as ClusterSelect } from './ClusterSelect'

package/components/ui/project-selector-modal.tsx

@@ -21,6 +21,7 @@ import {
 import { Loader2, FolderKanban } from "lucide-react"
 
 export interface Project {
+  id: string,
   name: string
   alias?: string
   description?: string
@@ -79,7 +80,7 @@ export function ProjectSelectorModal({
       
       // If no project selected yet and we have projects, select the first one
       if (!selectedProject && projectsList.length > 0) {
-        setSelectedProject(projectsList[0].name)
+        setSelectedProject(projectsList[0].id)
       }
     } catch (err) {
       console.error("Failed to load projects:", err)
@@ -205,9 +206,9 @@ export function ProjectSelectorModal({
                   </SelectTrigger>
                   <SelectContent className="rounded-none">
                     {projects.map((project) => (
-                      <SelectItem key={project.name} value={project.name} className="rounded-none">
+                      <SelectItem key={project.id} value={project.id} className="rounded-none">
                         <div className="flex flex-col">
-                          <span className="font-medium">{project.alias || project.name}</span>
+                          <span className="font-medium">{project.alias || project.id}</span>
                           {project.description && (
                             <span className="text-xs text-ibm-gray-60">{project.description}</span>
                           )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.36",
+  "version": "1.1.38",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -88,6 +88,8 @@
     "next-themes": "^0.4.4",
     "react-avatar": "^5.0.3",
     "js-cookie": "^3.0.5",
+    "js-yaml": "^4.1.1",
+    "monaco-editor": "^0.55.1",
     "@types/js-cookie": "^3.0.6",
     "react-day-picker": "8.10.1",
     "react-easy-crop": "^5.0.8",
@@ -101,9 +103,10 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.24",
     "@types/react": "^19",
     "next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}