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,169 @@
+import React 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;
+  const className = styleClassName || "";
+
+  const parseMarkdown = React.useCallback(() => {
+    const elements = [];
+    let index = 0;
+    const input = text;
+
+    const parseCodeBlock = () => {
+      const endIndex = input.indexOf("```", index + 3);
+      if (endIndex !== -1) {
+        const codeText = input.substring(index + 3, endIndex);
+        elements.push(
+          <Paragraph
+            key={elements.length}
+            className={className}
+            style={{ margin: 0 }}
+          >
+            <pre style={{ margin: 0 }}>{codeText}</pre>
+          </Paragraph>
+        );
+        index = endIndex + 3;
+        return true;
+      }
+      return false;
+    };
+
+    const parseInlineCode = () => {
+      const endIndex = input.indexOf("`", index + 1);
+      if (endIndex !== -1) {
+        const codeText = input.substring(index + 1, endIndex);
+        elements.push(
+          <Text
+            code
+            key={elements.length}
+            type={textType}
+            className={className}
+          >
+            {codeText}
+          </Text>
+        );
+        index = endIndex + 1;
+        return true;
+      }
+      return false;
+    };
+
+    const parseBoldText = () => {
+      const endIndex = input.indexOf("**", index + 2);
+      if (endIndex !== -1) {
+        const boldText = input.substring(index + 2, endIndex);
+        elements.push(
+          <Text
+            strong
+            key={elements.length}
+            type={textType}
+            className={className}
+          >
+            {boldText}
+          </Text>
+        );
+        index = endIndex + 2;
+        return true;
+      }
+      return false;
+    };
+
+    const parseLink = () => {
+      const endLinkTextIndex = input.indexOf("]", index);
+      const startUrlIndex = input.indexOf("(", endLinkTextIndex);
+      const endUrlIndex = input.indexOf(")", startUrlIndex);
+
+      if (
+        endLinkTextIndex !== -1 &&
+        startUrlIndex === endLinkTextIndex + 1 &&
+        endUrlIndex !== -1
+      ) {
+        const linkText = input.substring(index + 1, endLinkTextIndex);
+        const url = input.substring(startUrlIndex + 1, endUrlIndex);
+        elements.push(
+          <Link
+            href={url}
+            key={elements.length}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={className}
+          >
+            {linkText}
+          </Link>
+        );
+        index = endUrlIndex + 1;
+        return true;
+      }
+      return false;
+    };
+
+    while (index < input.length) {
+      const char = input[index];
+
+      if (input.startsWith("```", index)) {
+        if (parseCodeBlock()) continue;
+      } else if (input.startsWith("`", index)) {
+        if (parseInlineCode()) continue;
+      } else if (input.startsWith("**", index)) {
+        if (parseBoldText()) continue;
+      } else if (char === "[") {
+        if (parseLink()) continue;
+      } else if (char === "\n") {
+        // Handle new lines
+        if (renderNewLines) {
+          elements.push(<br key={elements.length} />);
+        } else {
+          elements.push("\n");
+        }
+        index += 1;
+        continue;
+      }
+
+      // Handle regular text
+      let nextIndex = input.length;
+      const nextSpecialIndices = [
+        input.indexOf("```", index),
+        input.indexOf("`", index),
+        input.indexOf("**", index),
+        input.indexOf("[", index),
+        input.indexOf("\n", index),
+      ].filter((i) => i !== -1);
+
+      if (nextSpecialIndices.length > 0) {
+        nextIndex = Math.min(...nextSpecialIndices);
+      }
+
+      const textSegment = input.substring(index, nextIndex);
+      elements.push(textSegment);
+      index = nextIndex;
+    }
+
+    return elements;
+  }, [text, renderNewLines, textType, className]);
+
+  const content = React.useMemo(() => parseMarkdown(), [parseMarkdown]);
+
+  return (
+    <Text type={textType} className={className}>
+      {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,
@@ -40,7 +41,7 @@ const LogsModal = ({
       .then((res) => {
         const logDetails = res.data.results.map((item) => ({
           id: item.id,
-          log: item.data?.log,
+          log: <CustomMarkdown text={item.data?.log} />,
           type: item.data?.type,
           stage: item.data?.stage,
           level: item.data?.level,

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 };