FEAT: Support Markdown Rendering

frontend/src/App.jsx

@@ -7,6 +7,7 @@ import { useAlertStore } from "./store/alert-store.js";
 import { useSessionStore } from "./store/session-store.js";
 import PostHogPageviewTracker from "./PostHogPageviewTracker.js";
 import { useEffect } from "react";
+import CustomMarkdown from "./components/helpers/custom-markdown/CustomMarkdown.jsx";
 
 let GoogleTagManagerHelper;
 try {
@@ -46,7 +47,7 @@ function App() {
 
     notificationAPI.open({
       message: alertDetails?.title,
-      description: alertDetails?.content,
+      description: <CustomMarkdown text={alertDetails?.content} />,
       type: alertDetails?.type,
       duration: alertDetails?.duration,
       btn,

frontend/src/components/agency/display-logs/DisplayLogs.jsx

@@ -3,6 +3,7 @@ import { Col, Row, Typography } from "antd";
 
 import "./DisplayLogs.css";
 import { useSocketLogsStore } from "../../../store/socket-logs-store";
+import CustomMarkdown from "../../helpers/custom-markdown/CustomMarkdown";
 
 function DisplayLogs() {
   const bottomRef = useRef(null);
@@ -37,9 +38,10 @@ function DisplayLogs() {
                 </Typography>
               </Col>
               <Col span={8}>
-                <Typography className="display-logs-col">
-                  {log?.message}
-                </Typography>
+                <CustomMarkdown
+                  text={log?.message}
+                  styleClassName="display-logs-col"
+                />
               </Col>
               <Col span={2}>
                 <Typography className="display-logs-col">

frontend/src/components/custom-tools/display-logs/DisplayLogs.jsx

@@ -4,6 +4,7 @@ import { Col, Row, Typography } from "antd";
 import "../../agency/display-logs/DisplayLogs.css";
 import { useSocketCustomToolStore } from "../../../store/socket-custom-tool";
 import { getDateTimeString } from "../../../helpers/GetStaticData";
+import CustomMarkdown from "../../helpers/custom-markdown/CustomMarkdown";
 
 function DisplayLogs() {
   const bottomRef = useRef(null);
@@ -48,9 +49,10 @@ function DisplayLogs() {
                 </Typography>
               </Col>
               <Col span={8}>
-                <Typography className="display-logs-col">
-                  {message?.message}
-                </Typography>
+                <CustomMarkdown
+                  text={message?.message}
+                  styleClassName="display-logs-col"
+                />
               </Col>
             </Row>
             <div ref={bottomRef} />

frontend/src/components/helpers/custom-markdown/CustomMarkdown.jsx

@@ -0,0 +1,112 @@
+import { useMemo } from "react";
+import { Typography } from "antd";
+import PropTypes from "prop-types";
+
+const { Text, Link, Paragraph } = Typography;
+
+const CustomMarkdown = ({
+  text = "",
+  renderNewLines = true,
+  isSecondary = false,
+  styleClassName,
+}) => {
+  const textType = isSecondary ? "secondary" : undefined;
+
+  /*
+    Patterns with bounded quantifiers to prevent performance issues:
+    - Triple code: ```...```
+    - Inline code: `...`
+    - Bold: **...**
+    - Link: [text](url)
+    - New line: \n
+  */
+  const patterns = [
+    { type: "tripleCode", regex: /```([^`]{1,1000})```/g },
+    { type: "inlineCode", regex: /`([^`]{1,100})`/g },
+    { type: "bold", regex: /\*\*([^*]{1,100})\*\*/g },
+    { type: "link", regex: /\[([^\]]{1,100})\]\(([^)]{1,200})\)/g },
+    { type: "newline", regex: /\n/g },
+  ];
+
+  const renderToken = (type, content, url) => {
+    switch (type) {
+      case "tripleCode":
+        return (
+          <Paragraph style={{ margin: 0 }}>
+            <pre style={{ margin: 0 }}>{content}</pre>
+          </Paragraph>
+        );
+      case "inlineCode":
+        return (
+          <Text code type={textType}>
+            {content}
+          </Text>
+        );
+      case "bold":
+        return (
+          <Text strong type={textType}>
+            {content}
+          </Text>
+        );
+      case "link":
+        return (
+          <Link href={url} target="_blank" rel="noopener noreferrer">
+            {content}
+          </Link>
+        );
+      case "newline":
+        return renderNewLines ? <br /> : "\n";
+      default:
+        return content;
+    }
+  };
+
+  const content = useMemo(() => {
+    let elements = [text];
+
+    // Process each pattern sequentially
+    patterns.forEach(({ type, regex }) => {
+      const newElements = [];
+      elements.forEach((element) => {
+        if (typeof element !== "string") {
+          newElements.push(element);
+          return;
+        }
+
+        let lastIndex = 0;
+        let match;
+        while ((match = regex.exec(element)) !== null) {
+          const matchIndex = match.index;
+          if (matchIndex > lastIndex) {
+            newElements.push(element.substring(lastIndex, matchIndex));
+          }
+          const url = match[2]; // Relevant only for link
+          newElements.push(renderToken(type, match[1], url));
+          lastIndex = matchIndex + match[0].length;
+        }
+
+        if (lastIndex < element.length) {
+          newElements.push(element.substring(lastIndex));
+        }
+      });
+      elements = newElements;
+    });
+
+    return elements;
+  }, [text, renderNewLines, textType]);
+
+  return (
+    <Text type={textType} className={styleClassName}>
+      {content}
+    </Text>
+  );
+};
+
+CustomMarkdown.propTypes = {
+  text: PropTypes.string,
+  renderNewLines: PropTypes.bool,
+  isSecondary: PropTypes.bool,
+  styleClassName: PropTypes.string,
+};
+
+export default CustomMarkdown;

frontend/src/components/pipelines-or-deployments/log-modal/LogsModal.jsx

@@ -7,6 +7,7 @@ import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate.js";
 import { useAlertStore } from "../../../store/alert-store.js";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler.jsx";
 import "./LogsModel.css";
+import CustomMarkdown from "../../helpers/custom-markdown/CustomMarkdown.jsx";
 
 const LogsModal = ({
   open,
@@ -38,16 +39,16 @@ const LogsModal = ({
     };
     axiosPrivate(requestOptions)
       .then((res) => {
-        const logDetails = res.data.results.map((item) => ({
-          id: item.id,
-          log: item.data?.log,
-          type: item.data?.type,
-          stage: item.data?.stage,
-          level: item.data?.level,
-          event_time: item.event_time,
+        const logDetails = res?.data?.results?.map((item) => ({
+          id: item?.id,
+          log: <CustomMarkdown text={item?.data?.log} />,
+          type: item?.data?.type,
+          stage: item?.data?.stage,
+          level: item?.data?.level,
+          event_time: item?.event_time,
         }));
         setLogDetails(logDetails);
-        setTotalCount(res.data.count);
+        setTotalCount(res?.data?.count);
       })
       .catch((err) => {
         setAlertDetails(handleException(err));
@@ -74,7 +75,7 @@ const LogsModal = ({
         return (
           <Button
             type="link"
-            onClick={() => handleLogIdClick(record.execution_id)}
+            onClick={() => handleLogIdClick(record?.execution_id)}
           >
             {text}
           </Button>
@@ -85,7 +86,7 @@ const LogsModal = ({
       title: "Status",
       dataIndex: "status",
       key: "status",
-      render: (level) => <span className={level.toLowerCase()}>{level}</span>,
+      render: (level) => <span className={level?.toLowerCase()}>{level}</span>,
     },
   ];
 
@@ -104,14 +105,15 @@ const LogsModal = ({
       title: "Log Level",
       dataIndex: "level",
       key: "level",
-      render: (level) => <span className={level.toLowerCase()}>{level}</span>,
+      render: (level) => <span className={level?.toLowerCase()}>{level}</span>,
     },
     {
       title: "Log",
       dataIndex: "log",
       key: "log",
     },
   ];
+
   return (
     <>
       <Modal

frontend/src/components/rjsf-custom-widgets/alt-date-time-widget/AltDateTimeWidget.jsx

@@ -4,7 +4,15 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const AltDateTimeWidget = ({ id, value, onChange, label, required }) => {
+const AltDateTimeWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+}) => {
+  const description = schema?.description || "";
   const handleDateChange = (date) => {
     onChange(date?.toISOString());
   };
@@ -17,7 +25,11 @@ const AltDateTimeWidget = ({ id, value, onChange, label, required }) => {
   };
 
   return (
-    <RjsfWidgetLayout label={label} required={required}>
+    <RjsfWidgetLayout
+      label={label}
+      description={description}
+      required={required}
+    >
       <DatePicker
         id={id}
         value={value ? moment(value) : null}
@@ -36,6 +48,7 @@ AltDateTimeWidget.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
+  schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
 };
 

frontend/src/components/rjsf-custom-widgets/alt-date-widget/AltDateWidget.jsx

@@ -4,13 +4,19 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const AltDateWidget = ({ id, value, onChange, label, required }) => {
+const AltDateWidget = ({ id, value, onChange, label, schema, required }) => {
+  const description = schema?.description || "";
+
   const handleDateChange = (date) => {
     onChange(date?.toISOString());
   };
 
   return (
-    <RjsfWidgetLayout label={label} required={required}>
+    <RjsfWidgetLayout
+      label={label}
+      description={description}
+      required={required}
+    >
       <DatePicker
         id={id}
         value={value ? moment(value) : null}
@@ -25,6 +31,7 @@ AltDateWidget.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
+  schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
 };
 

frontend/src/components/rjsf-custom-widgets/checkbox-widget/CheckboxWidget.jsx

@@ -1,22 +1,27 @@
-import { QuestionCircleOutlined } from "@ant-design/icons";
-import { Checkbox, Space, Tooltip, Typography } from "antd";
+import { Checkbox, Space, Typography } from "antd";
 import PropTypes from "prop-types";
 import "./CheckboxWidget.css";
-const CheckboxWidget = ({ id, value, onChange, label, schema }) => {
+import CustomMarkdown from "../../helpers/custom-markdown/CustomMarkdown";
+const CheckboxWidget = ({ id, value, onChange, label, schema, required }) => {
   const description = schema?.description || "";
   const handleCheckboxChange = (event) => {
     onChange(event.target.checked);
   };
 
   return (
-    <Space className="checkbox-widget-main">
+    <Space direction="vertical" className="checkbox-widget-main" size={0}>
       <Checkbox id={id} checked={value} onChange={handleCheckboxChange}>
-        <Typography>{label}</Typography>
+        <Typography>
+          {required && <span className="form-item-required">* </span>}
+          {label}
+        </Typography>
       </Checkbox>
       {description?.length > 0 && (
-        <Tooltip title={description}>
-          <QuestionCircleOutlined className="checkbox-widget-info-icon" />
-        </Tooltip>
+        <CustomMarkdown
+          text={description}
+          isSecondary={true}
+          styleClassName="rjsf-helper-font"
+        />
       )}
     </Space>
   );
@@ -28,6 +33,7 @@ CheckboxWidget.propTypes = {
   onChange: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
+  required: PropTypes.bool,
 };
 
 export { CheckboxWidget };

frontend/src/components/rjsf-custom-widgets/checkboxes-widget/CheckboxesWidget.jsx

@@ -3,7 +3,16 @@ import { Checkbox } from "antd";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const CheckboxesWidget = ({ id, options, value, onChange, label }) => {
+const CheckboxesWidget = ({
+  id,
+  options,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+}) => {
+  const description = schema?.description || "";
   const handleCheckboxChange = (optionValue) => {
     const newValue = [...(value || [])];
     const index = newValue.indexOf(optionValue);
@@ -16,7 +25,11 @@ const CheckboxesWidget = ({ id, options, value, onChange, label }) => {
   };
 
   return (
-    <RjsfWidgetLayout label={label}>
+    <RjsfWidgetLayout
+      label={label}
+      description={description}
+      required={required}
+    >
       {options.map((option) => (
         <Checkbox
           key={option.value}
@@ -36,6 +49,8 @@ CheckboxesWidget.propTypes = {
   value: PropTypes.array,
   onChange: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
+  schema: PropTypes.object.isRequired,
+  required: PropTypes.bool,
 };
 
 export { CheckboxesWidget };