clean up revision history and add a tooltip (#23654)

frontend/src/metabase/components/Timeline.jsx

@@ -2,8 +2,10 @@ import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import _ from "underscore";
 import { getRelativeTime } from "metabase/lib/time";
+import { t } from "ttag";
 
 import Button from "metabase/core/components/Button";
+import Tooltip from "metabase/components/Tooltip";
 
 import {
   TimelineContainer,
@@ -87,13 +89,15 @@ function Timeline({
               <ItemHeader>
                 {title}
                 {isRevertable && revertFn && (
-                  <Button
-                    icon="revert"
-                    onlyIcon
-                    borderless
-                    onClick={() => revertFn(revision)}
-                    data-testid="question-revert-button"
-                  />
+                  <Tooltip tooltip={t`Revert to this version`}>
+                    <Button
+                      icon="revert"
+                      onlyIcon
+                      borderless
+                      onClick={() => revertFn(revision)}
+                      data-testid="question-revert-button"
+                    />
+                  </Tooltip>
                 )}
               </ItemHeader>
               <Timestamp datetime={timestamp}>{formattedTimestamp}</Timestamp>

frontend/src/metabase/components/Timeline.styled.jsx

@@ -16,7 +16,7 @@ export const TimelineItem = styled.li`
   transform: translateX(-${props => props.leftShift}px);
   white-space: pre-line;
   width: 100%;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 `;
 
 export const ItemIcon = styled(Icon)`
@@ -57,5 +57,4 @@ export const Border = styled.div`
   top: ${props => props.borderShift}px;
   left: ${props => props.borderShift}px;
   bottom: calc(-1rem - ${props => props.borderShift}px);
-  border-left: 1px solid ${color("border")};
 `;