Merge pull request #3232 from overleaf/ta-file-tree-react

React File Tree

GitOrigin-RevId: fb3141ba8cd9ca0d68e87edb74764a360144c8fe

services/web/frontend/js/shared/components/icon.js

@@ -2,7 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-function Icon({ type, spin, modifier, classes = {}, accessibilityLabel }) {
+function Icon({
+  type,
+  spin,
+  modifier,
+  classes = {},
+  accessibilityLabel,
+  children
+}) {
   const iconClassName = classNames(
     'fa',
     `fa-${type}`,
@@ -15,7 +22,9 @@ function Icon({ type, spin, modifier, classes = {}, accessibilityLabel }) {
 
   return (
     <>
-      <i className={iconClassName} aria-hidden="true" />
+      <i className={iconClassName} aria-hidden="true">
+        {children}
+      </i>
       {accessibilityLabel ? (
         <span className="sr-only">{accessibilityLabel}</span>
       ) : null}
@@ -30,7 +39,11 @@ Icon.propTypes = {
   classes: PropTypes.exact({
     icon: PropTypes.string
   }),
-  accessibilityLabel: PropTypes.string
+  accessibilityLabel: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ])
 }
 
 export default Icon

services/web/frontend/js/shared/components/tooltip-button.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
+
+function TooltipButton({ id, description, onClick, children }) {
+  const tooltip = <Tooltip id={`${id}_tooltip`}>{description}</Tooltip>
+
+  return (
+    <OverlayTrigger placement="bottom" overlay={tooltip}>
+      <Button onClick={onClick}>{children}</Button>
+    </OverlayTrigger>
+  )
+}
+
+TooltipButton.propTypes = {
+  id: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ])
+}
+
+export default TooltipButton