feat: support markdown for the query review modal (#1568)

* feat: use markdown for the query review modal text

* add some bolds

* update version

Author: jczhong84

package.json

@@ -1,6 +1,6 @@
 {
     "name": "querybook",
-    "version": "3.41.3",
+    "version": "3.41.4",
     "description": "A Big Data Webapp",
     "private": true,
     "scripts": {

querybook/config/querybook_public_config.yaml

@@ -50,23 +50,25 @@ github_integration:
 
 peer_review:
     enabled: true
-    request_texts:  # When users request reviews
+    request_texts: # When users request reviews
         description: |
             This peer review system helps ensure query quality and data safety.
 
-            Note: Queries that fail after approval will require a new review request.
+            **Note: Queries that fail after approval will require a new review request.**
 
-            Important Guidelines:
-            • Choose reviewers familiar with the affected data
-            • Include relevant references in query title or justification
-            • Document query purpose and impact
-        guide_link: 'https://www.querybook.org/'
+            **Important Guidelines**:
+
+            - Choose reviewers familiar with the affected data
+            - Include relevant references in query title or justification
+            - Document query purpose and impact
+        guide_link: 'https://www.querybook.org/docs/user_guide/query_review/'
         tip: |
             Before Submitting:
-            • Run query to verify syntax
-            • Validate table names and fields
-            • Check query performance
-    reviewer_texts:  # When reviewers take actions
+
+            - Run query to verify syntax
+            - Validate table names and fields
+            - Check query performance
+    reviewer_texts: # When reviewers take actions
         approve_message: |
             As a reviewer, you are responsible for validating:
 

querybook/webapp/components/QueryPeerReviewModal/QueryPeerReviewModal.scss

@@ -33,32 +33,6 @@
             .main-description {
                 padding: 20px;
                 background: var(--bg);
-
-                .description-text {
-                    color: var(--text);
-                    font-size: var(--text-size);
-                    line-height: 1.6;
-                    white-space: pre-wrap;
-
-                    ul {
-                        list-style-type: none;
-                        padding-left: 0;
-                        margin: 12px 0;
-
-                        li {
-                            position: relative;
-                            padding-left: 20px;
-                            margin-bottom: 8px;
-
-                            &:before {
-                                content: "•";
-                                position: absolute;
-                                left: 0;
-                                color: var(--color-accent);
-                            }
-                        }
-                    }
-                }
             }
 
             .checklist-box {
@@ -70,25 +44,6 @@
                     color: var(--text);
                     font-size: var(--text-size);
                     line-height: 1.6;
-
-                    ul {
-                        list-style-type: none;
-                        padding-left: 0;
-                        margin: 12px 0;
-
-                        li {
-                            position: relative;
-                            padding-left: 20px;
-                            margin-bottom: 8px;
-
-                            &:before {
-                                content: "✓";
-                                position: absolute;
-                                left: 0;
-                                color: var(--color-true);
-                            }
-                        }
-                    }
                 }
 
                 .guide-link {

querybook/webapp/components/QueryPeerReviewModal/QueryPeerReviewModal.tsx

@@ -2,22 +2,23 @@ import { Form, Formik } from 'formik';
 import React, { useCallback } from 'react';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
-import { navigateWithinEnv } from 'lib/utils/query-string';
 
 import { MultiCreatableUserSelect } from 'components/UserSelect/MultiCreatableUserSelect';
 import { IPeerReviewParams } from 'const/datadoc';
+import { usePeerReview } from 'lib/peer-review/config';
+import { navigateWithinEnv } from 'lib/utils/query-string';
 import { AsyncButton } from 'ui/AsyncButton/AsyncButton';
 import { FormField } from 'ui/Form/FormField';
 import { FormWrapper } from 'ui/Form/FormWrapper';
 import { SimpleField } from 'ui/FormikField/SimpleField';
+import { Icon } from 'ui/Icon/Icon';
 import { Link } from 'ui/Link/Link';
+import { Markdown } from 'ui/Markdown/Markdown';
 import { Message } from 'ui/Message/Message';
 import { Modal } from 'ui/Modal/Modal';
 import { IStandardModalProps } from 'ui/Modal/types';
-import { Icon } from 'ui/Icon/Icon';
 
 import './QueryPeerReviewModal.scss';
-import { usePeerReview } from 'lib/peer-review/config';
 
 interface IQueryPeerReviewFormProps {
     onSubmit: (peerReviewParams: IPeerReviewParams) => Promise<number>;
@@ -40,12 +41,12 @@ const DescriptionSection: React.FC<IDescriptionSectionProps> = ({
             <div className="description-content">
                 <div className="main-description">
                     <h4>About Peer Review</h4>
-                    <div className="description-text">{description}</div>
+                    <Markdown>{description}</Markdown>
                 </div>
 
                 <div className="checklist-box">
                     <h4>Review Checklist</h4>
-                    <div className="checklist-content">{tip}</div>
+                    <Markdown>{tip}</Markdown>
                     <div className="guide-link">
                         <Link to={guideLink} newTab>
                             <Icon name="Book" size={12} />