From 4c5a0f37f7979d29fa077c0cfcd9be936c8fc0bd Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sat, 20 Mar 2021 11:04:17 +0100
Subject: [PATCH] Improve message history accordions

- Add unfold icon to edit history accordions
- Change order of edit number. Most recent should have highest id and initial
  description should always have "#1 Edit"
- Add "(Initial description)' to title of the first comment version
---
 webui/src/pages/bug/MessageHistoryDialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 9d1578b28ae741365ccd0ae3d2825e511e0badda..139eb4a599b4146490ccbd6b6a7d33f8e118f781 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -20,6 +20,7 @@ import {
   WithStyles,
 } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
@@ -199,15 +200,17 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
             onChange={handleChange('panel' + index)}
           >
             <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
               aria-controls="panel1d-content"
               id="panel1d-header"
             >
               <Typography>
-                {`#${index + 1} • Edited `}
+                {`#${history?.length - index} • Edited `}
                 <Tooltip title={moment(edit.date).format('LLLL')}>
                   <Moment date={edit.date} format="on ll" />
                 </Tooltip>
                 {index === 0 && ' (most recent edit)'}
+                {index === history?.length - 1 && ' (Initial description)'}
               </Typography>
             </AccordionSummary>
             <AccordionDetails>{edit.message}</AccordionDetails>