Show placeholder for empty comment(preview)

3 files changed, 22 insertions, 3 deletions

diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index 7bf0995d..03f351e7 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
+import { Typography } from '@material-ui/core';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import TextField from '@material-ui/core/TextField';
@@ -24,6 +25,10 @@ const useStyles = makeStyles((theme) => ({
     borderBottom: `solid 3px ${theme.palette.grey['200']}`,
     minHeight: '5rem',
   },
+  previewPlaceholder: {
+    color: theme.palette.text.secondary,
+    fontStyle: 'italic',
+  },
 }));
 
 type TabPanelProps = {
@@ -99,7 +104,13 @@ function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
           />
         </TabPanel>
         <TabPanel value={tab} index={1} className={classes.preview}>
-          <Content markdown={input} />
+          {input !== '' ? (
+            <Content markdown={input} />
+          ) : (
+            <Typography className={classes.previewPlaceholder}>
+              Nothing to preview.
+            </Typography>
+          )}
         </TabPanel>
       </div>
     </div>
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index bf779208..51087faa 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -157,7 +157,11 @@ function Message({ bug, op }: Props) {
           </IfLoggedIn>
         </header>
         <section className={classes.body}>
-          <Content markdown={comment.message} />
+          {comment.message !== '' ? (
+            <Content markdown={comment.message} />
+          ) : (
+            <Content markdown="*No description provided.*" />
+          )}
         </section>
       </Paper>
     );
diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 15719580..df8915d9 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -230,7 +230,11 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
               <Typography>{getSummary(index, edit.date)}</Typography>
             </AccordionSummary>
             <AccordionDetails>
-              <Content markdown={edit.message} />
+              {edit.message !== '' ? (
+                <Content markdown={edit.message} />
+              ) : (
+                <Content markdown="*No description provided.*" />
+              )}
             </AccordionDetails>
           </Accordion>
         ))}