Add edit icon

src/components/Hoverable/HoverablePropTypes.js

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
 
 const propTypes = {
+    /** Whether to disable additional wrapper around the children. It will only work for single native(View|Text) child.  */
+    absolute: PropTypes.bool,
+
     /** Children to wrap with Hoverable. */
     children: PropTypes.oneOfType([
         PropTypes.node,
@@ -22,6 +25,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    absolute: false,
     containerStyles: [],
     onHoverIn: () => {},
     onHoverOut: () => {},

src/components/Hoverable/index.js

@@ -78,6 +78,21 @@ class Hoverable extends Component {
     }
 
     render() {
+        if (this.props.absolute && React.isValidElement(this.props.children)) {
+            return React.cloneElement(React.Children.only(this.props.children), {
+                ref: (el) => {
+                    this.wrapperView = el;
+
+                    // Call the original ref, if any
+                    const {ref} = this.props.children;
+                    if (_.isFunction(ref)) {
+                        ref(el);
+                    }
+                },
+                onMouseEnter: () => this.setIsHovered(true),
+                onMouseLeave: () => this.setIsHovered(false),
+            });
+        }
         return (
             <View
                 style={this.props.containerStyles}

src/components/Tooltip/TooltipPropTypes.js

@@ -2,6 +2,9 @@ import PropTypes from 'prop-types';
 import {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
+    /** Enable support for the absolute positioned native(View|Text) children. It will only work for single native child  */
+    absolute: PropTypes.bool,
+
     /** The text to display in the tooltip. */
     text: PropTypes.string.isRequired,
 
@@ -24,6 +27,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    absolute: false,
     shiftHorizontal: 0,
     shiftVertical: 0,
     containerStyles: [],

src/components/Tooltip/index.js

@@ -155,36 +155,55 @@ class Tooltip extends PureComponent {
     }
 
     render() {
+        let child = (
+            <View
+                ref={el => this.wrapperView = el}
+                style={this.props.containerStyles}
+            >
+                {this.props.children}
+            </View>
+        );
+
+        if (this.props.absolute && React.isValidElement(this.props.children)) {
+            child = React.cloneElement(React.Children.only(this.props.children), {
+                ref: (el) => {
+                    // Keep your own reference
+                    this.wrapperView = el;
+
+                    // Call the original ref, if any
+                    const {ref} = this.props.children;
+                    if (typeof ref === 'function') {
+                        ref(el);
+                    }
+                },
+            });
+        }
         return (
             <>
                 {this.state.isRendered && (
-                <TooltipRenderedOnPageBody
-                    animation={this.animation}
-                    windowWidth={this.props.windowWidth}
-                    xOffset={this.state.xOffset}
-                    yOffset={this.state.yOffset}
-                    wrapperWidth={this.state.wrapperWidth}
-                    wrapperHeight={this.state.wrapperHeight}
-                    tooltipWidth={this.state.tooltipWidth}
-                    tooltipHeight={this.state.tooltipHeight}
-                    setTooltipRef={el => this.tooltip = el}
-                    shiftHorizontal={_.result(this.props, 'shiftHorizontal')}
-                    shiftVertical={_.result(this.props, 'shiftVertical')}
-                    measureTooltip={this.measureTooltip}
-                    text={this.props.text}
-                />
+                    <TooltipRenderedOnPageBody
+                        animation={this.animation}
+                        windowWidth={this.props.windowWidth}
+                        xOffset={this.state.xOffset}
+                        yOffset={this.state.yOffset}
+                        wrapperWidth={this.state.wrapperWidth}
+                        wrapperHeight={this.state.wrapperHeight}
+                        tooltipWidth={this.state.tooltipWidth}
+                        tooltipHeight={this.state.tooltipHeight}
+                        setTooltipRef={el => this.tooltip = el}
+                        shiftHorizontal={_.result(this.props, 'shiftHorizontal')}
+                        shiftVertical={_.result(this.props, 'shiftVertical')}
+                        measureTooltip={this.measureTooltip}
+                        text={this.props.text}
+                    />
                 )}
                 <Hoverable
+                    absolute={this.props.absolute}
                     containerStyles={this.props.containerStyles}
                     onHoverIn={this.showTooltip}
                     onHoverOut={this.hideTooltip}
                 >
-                    <View
-                        ref={el => this.wrapperView = el}
-                        style={this.props.containerStyles}
-                    >
-                        {this.props.children}
-                    </View>
+                    {child}
                 </Hoverable>
             </>
         );

src/languages/en.js

@@ -584,6 +584,7 @@ export default {
         common: {
             card: 'Expensify Card',
             workspace: 'Workspace',
+            edit: 'Edit workspace',
         },
         new: {
             newWorkspace: 'New workspace',
@@ -619,7 +620,6 @@ export default {
             welcomeNote: ({workspaceName}) => `You have been invited to the ${workspaceName} workspace! Download the Expensify mobile app to start tracking your expenses.`,
         },
         editor: {
-            title: 'Edit workspace',
             nameInputLabel: 'Name',
             nameInputHelpText: 'This is the name you will see on your workspace.',
             save: 'Save',

src/languages/es.js

@@ -586,6 +586,7 @@ export default {
         common: {
             card: 'Tarjeta Expensify',
             workspace: 'Espacio de trabajo',
+            edit: 'Editar espacio de trabajo',
         },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',
@@ -621,7 +622,6 @@ export default {
             welcomeNote: ({workspaceName}) => `¡Has sido invitado a la ${workspaceName} Espacio de trabajo! Descargue la aplicación móvil Expensify para comenzar a rastrear sus gastos.`,
         },
         editor: {
-            title: 'Editar espacio de trabajo',
             nameInputLabel: 'Nombre',
             nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.',
             save: 'Guardar',

src/pages/workspace/WorkspaceEditorPage.js

@@ -100,7 +100,7 @@ class WorkspaceEditorPage extends React.Component {
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
-                    title={this.props.translate('workspace.editor.title')}
+                    title={this.props.translate('workspace.common.edit')}
                     onCloseButtonPress={Navigation.dismissModal}
                 />
 

src/pages/workspace/WorkspaceSidebar.js

@@ -13,6 +13,7 @@ import {
     Users,
     ExpensifyCard,
     Workspace,
+    Pencil,
 } from '../../components/Icon/Expensicons';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -26,6 +27,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import Avatar from '../../components/Avatar';
 import CONST from '../../CONST';
 import Tooltip from '../../components/Tooltip';
+import variables from '../../styles/variables';
 
 const propTypes = {
     /** Policy for the current route */
@@ -125,6 +127,16 @@ const WorkspaceSidebar = ({
                                             fill={themedefault.iconSuccessFill}
                                         />
                                     )}
+                                <Tooltip absolute text={translate('workspace.common.edit')}>
+                                    <View style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}>
+                                        <Icon
+                                            src={Pencil}
+                                            width={variables.iconSizeSmall}
+                                            height={variables.iconSizeSmall}
+                                            fill={themedefault.iconReversed}
+                                        />
+                                    </View>
+                                </Tooltip>
                             </Pressable>
 
                             <Pressable