feat(dashboard): workflow trigger integration instructions MRK-317

.cspell.json

@@ -724,7 +724,9 @@
     "facated",
     "dotenvcreate",
     "querybuilder",
-    "liquified"
+    "liquified",
+    "autoload",
+    "novugo"
   ],
   "flagWords": [],
   "patterns": [

apps/dashboard/src/components/primitives/code-block.tsx

@@ -1,28 +1,88 @@
-import { useState } from 'react';
+import { tags as t } from '@lezer/highlight';
+import { langs, loadLanguage } from '@uiw/codemirror-extensions-langs';
+import { createTheme } from '@uiw/codemirror-themes';
 import CodeMirror from '@uiw/react-codemirror';
-import { materialDark } from '@uiw/codemirror-theme-material';
 import { Check, Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
 import { RiFileCopyLine } from 'react-icons/ri';
 import { cn } from '../../utils/ui';
-import { langs, loadLanguage } from '@uiw/codemirror-extensions-langs';
 
 loadLanguage('tsx');
 loadLanguage('json');
 loadLanguage('shell');
 loadLanguage('typescript');
+loadLanguage('php');
+loadLanguage('go');
+loadLanguage('python');
 
 const languageMap = {
   typescript: langs.typescript,
   tsx: langs.tsx,
   json: langs.json,
   shell: langs.shell,
+  php: langs.php,
+  go: langs.go,
+  python: langs.python,
 } as const;
 
 export type Language = keyof typeof languageMap;
 
+const darkTheme = createTheme({
+  theme: 'dark',
+  settings: {
+    background: 'rgba(14, 18, 27, 0.90)',
+    foreground: '#EEFFFF',
+    caret: '#FFCC00',
+    selection: '#80CBC440',
+    lineHighlight: '#000000',
+    gutterBackground: 'rgba(14, 18, 27, 0.90)',
+    gutterForeground: '#545454',
+  },
+  styles: [
+    { tag: t.keyword, color: '#C792EA' },
+    { tag: t.operator, color: '#89DDFF' },
+    { tag: t.special(t.brace), color: '#89DDFF' },
+    { tag: t.propertyName, color: '#FFCB6B' },
+    { tag: t.definition(t.propertyName), color: '#82AAFF' },
+    { tag: t.string, color: '#C3E88D' },
+    { tag: t.comment, color: '#546E7A' },
+    { tag: t.variableName, color: '#EEFFFF' },
+    { tag: [t.function(t.variableName), t.definition(t.variableName)], color: '#82AAFF' },
+    { tag: t.typeName, color: '#F07178' },
+    { tag: t.className, color: '#FFCB6B' },
+    { tag: t.number, color: '#F78C6C' },
+    { tag: t.bool, color: '#F78C6C' },
+  ],
+});
+
+const lightTheme = createTheme({
+  theme: 'light',
+  settings: {
+    background: 'white',
+    foreground: '#24292e',
+    caret: '#24292e',
+    selection: '#0366d625',
+    lineHighlight: '#0366d608',
+  },
+  styles: [
+    { tag: t.keyword, color: '#FF5D00' },
+    { tag: t.operator, color: '#FF5D00' },
+    { tag: t.special(t.brace), color: '#24292e' },
+    { tag: t.propertyName, color: '#FB4BA3' },
+    { tag: t.definition(t.propertyName), color: '#24292e' },
+    { tag: t.string, color: '#8B41E1' },
+    { tag: t.comment, color: '#6e7781' },
+    { tag: t.variableName, color: '#24292e' },
+    { tag: [t.function(t.variableName), t.definition(t.variableName)], color: '#24292e' },
+    { tag: t.typeName, color: '#0550ae' },
+    { tag: t.className, color: '#0550ae' },
+  ],
+});
+
 interface CodeBlockProps {
   code: string;
   language?: Language;
+  theme?: 'dark' | 'light';
   title?: string;
   className?: string;
   secretMask?: {
@@ -69,7 +129,14 @@ interface CodeBlockProps {
  *   title="Configuration"
  * />
  */
-export function CodeBlock({ code, language = 'typescript', title, className, secretMask = [] }: CodeBlockProps) {
+export function CodeBlock({
+  code,
+  language = 'typescript',
+  theme = 'dark',
+  title,
+  className,
+  secretMask = [],
+}: CodeBlockProps) {
   const [isCopied, setIsCopied] = useState(false);
   const [showSecrets, setShowSecrets] = useState(false);
 
@@ -105,32 +172,71 @@ export function CodeBlock({ code, language = 'typescript', title, className, sec
     return lines.join('\n');
   };
 
-  return (
-    <div className={cn('w-full rounded-xl border bg-neutral-800 p-[5px] pt-0', className)}>
-      <div className="flex items-center justify-between px-2 py-1">
-        {title && <span className="text-foreground-400 text-xs">{title}</span>}
-        <div className="ml-auto flex items-center gap-1">
-          {hasSecrets && (
-            <button
-              onClick={() => setShowSecrets(!showSecrets)}
-              className="text-foreground-400 hover:text-foreground-50 rounded-md p-2 transition-all duration-200 hover:bg-[#32424a] active:scale-95"
-              title={showSecrets ? 'Hide secrets' : 'Reveal secrets'}
-            >
-              {showSecrets ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-            </button>
+  const ActionButtons = () => (
+    <>
+      {hasSecrets && (
+        <button
+          type="button"
+          onClick={() => setShowSecrets(!showSecrets)}
+          className={cn(
+            'rounded-md p-2 transition-all duration-200 active:scale-95',
+            theme === 'light'
+              ? 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
+              : 'text-foreground-400 hover:text-foreground-50 hover:bg-[#32424a]'
           )}
-          <button
-            onClick={copyToClipboard}
-            className="text-foreground-400 hover:text-foreground-50 rounded-md p-2 transition-all duration-200 hover:bg-[#32424a] active:scale-95"
-            title="Copy code"
+          title={showSecrets ? 'Hide secrets' : 'Reveal secrets'}
+        >
+          {showSecrets ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+        </button>
+      )}
+      <button
+        onClick={copyToClipboard}
+        type="button"
+        className={cn(
+          'rounded-md p-2 transition-all duration-200 active:scale-95',
+          theme === 'light'
+            ? 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
+            : 'text-foreground-400 hover:text-foreground-50 hover:bg-[#32424a]'
+        )}
+        title="Copy code"
+      >
+        {isCopied ? <Check className="h-4 w-4" /> : <RiFileCopyLine className="h-4 w-4" />}
+      </button>
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        'w-full rounded-xl border px-2 py-1',
+        theme === 'light' ? 'border-neutral-200 bg-white' : 'border-neutral-700 bg-neutral-800',
+        !title && 'rounded-b-none py-3',
+        className
+      )}
+    >
+      {title ? (
+        <div className={cn('-mx-[5px] -mt-[5px] mb-0 flex items-center justify-between px-2 py-1')}>
+          <span className={cn('text-xs', theme === 'light' ? 'text-gray-600' : 'text-foreground-400')}>{title}</span>
+          <div className="ml-auto flex items-center gap-1">
+            <ActionButtons />
+          </div>
+        </div>
+      ) : (
+        <div className="relative">
+          <div
+            className={cn(
+              'absolute right-1 top-0 z-10 flex items-center gap-1 rounded-md',
+              theme === 'light' ? '' : 'bg-neutral-800/80',
+              'backdrop-blur-sm'
+            )}
           >
-            {isCopied ? <Check className="h-4 w-4" /> : <RiFileCopyLine className="h-4 w-4" />}
-          </button>
+            <ActionButtons />
+          </div>
         </div>
-      </div>
+      )}
       <CodeMirror
         value={getMaskedCode()}
-        theme={materialDark}
+        theme={theme === 'dark' ? darkTheme : lightTheme}
         extensions={[languageMap[language]()]}
         basicSetup={{
           lineNumbers: true,
@@ -139,7 +245,7 @@ export function CodeBlock({ code, language = 'typescript', title, className, sec
           foldGutter: false,
         }}
         editable={false}
-        className="overflow-hidden rounded-lg text-xs [&_.cm-gutters]:bg-[#263238] [&_.cm-scroller]:font-mono"
+        className={cn('overflow-hidden rounded-lg text-xs [&_.cm-editor]:py-3 [&_.cm-scroller]:font-mono')}
       />
     </div>
   );

apps/dashboard/src/components/primitives/sonner-helpers.tsx

@@ -1,6 +1,6 @@
+import { ReactNode } from 'react';
 import { ExternalToast, toast } from 'sonner';
 import { Toast, ToastIcon, ToastProps } from './sonner';
-import { ReactNode } from 'react';
 
 export const showToast = ({
   options,
@@ -33,7 +33,7 @@ export const showSuccessToast = (message: string, position: 'bottom-center' | 't
 export const showErrorToast = (
   message: string,
   title?: string,
-  position: 'bottom-center' | 'top-center' = 'bottom-center'
+  position: 'bottom-center' | 'top-center' | 'bottom-right' = 'bottom-right'
 ) => {
   showToast({
     title,

apps/dashboard/src/components/workflow-editor/test-workflow/snippet-editor.tsx

@@ -1,40 +1,5 @@
-import { Editor } from '@/components/primitives/editor';
-import { LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
-import { EditorView } from '@uiw/react-codemirror';
-import { useMemo } from 'react';
-import type { SnippetLanguage } from './types';
+import { CodeBlock, Language } from '../../primitives/code-block';
 
-const basicSetup = { lineNumbers: true };
-
-export const SnippetEditor = ({
-  language,
-  value,
-  readOnly = false,
-}: {
-  language: SnippetLanguage;
-  value: string;
-  readOnly?: boolean;
-}) => {
-  const editorLanguage: LanguageName = language === 'framework' ? 'typescript' : language;
-
-  const extensions = useMemo(() => {
-    const res = [EditorView.lineWrapping];
-    const langExtension = loadLanguage(editorLanguage)?.extension;
-    if (langExtension) {
-      res.push(langExtension);
-    }
-    return res;
-  }, [editorLanguage]);
-
-  return (
-    <Editor
-      readOnly={readOnly}
-      lang={editorLanguage}
-      className="h-full"
-      value={value}
-      extensions={extensions}
-      basicSetup={basicSetup}
-      multiline
-    />
-  );
+export const SnippetEditor = ({ language, value }: { language: Language; value: string }) => {
+  return <CodeBlock theme="light" className="h-full overflow-auto" language={language} code={value} />;
 };