Show placeholder for empty comment(preview)

Sascha created 4 years ago

Change summary

webui/src/components/CommentInput/CommentInput.tsx | 13 ++++++++++++-
webui/src/pages/bug/Message.tsx                    |  6 +++++-
webui/src/pages/bug/MessageHistoryDialog.tsx       |  6 +++++-
3 files changed, 22 insertions(+), 3 deletions(-)

Detailed changes

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>

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

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