Merge pull request #661 from GlancingMind/fix-660

Show placeholder for empty comment(preview)

1 files changed, 12 insertions, 1 deletions

diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index c0e3edfc..babd495c 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';
@@ -28,6 +29,10 @@ const useStyles = makeStyles((theme) => ({
     borderBottom: `solid 3px ${theme.palette.grey['200']}`,
     minHeight: '5rem',
   },
+  previewPlaceholder: {
+    color: theme.palette.text.secondary,
+    fontStyle: 'italic',
+  },
 }));
 
 type TabPanelProps = {
@@ -103,7 +108,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>