Merge pull request #5921 from mananjadhav/fix/workspace-popup-menu

Added Workspace Menu

src/components/HeaderWithCloseButton.js

@@ -10,6 +10,7 @@ import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Tooltip from './Tooltip';
 import InboxCallButton from './InboxCallButton';
+import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu';
 
 const propTypes = {
     /** Title of the Header */
@@ -24,6 +25,9 @@ const propTypes = {
     /** Method to trigger when pressing back button of the header */
     onBackButtonPress: PropTypes.func,
 
+    /** Method to trigger when pressing more options button of the header */
+    onThreeDotsButtonPress: PropTypes.func,
+
     /** Whether we should show a back icon */
     shouldShowBackButton: PropTypes.bool,
 
@@ -36,6 +40,23 @@ const propTypes = {
     /** Whether we should show a inbox call button */
     shouldShowInboxCallButton: PropTypes.bool,
 
+    /** Whether we should show a more options (threedots) button */
+    shouldShowThreeDotsButton: PropTypes.bool,
+
+    /** List of menu items for more(three dots) menu */
+    threeDotsMenuItems: ThreeDotsMenuItemPropTypes,
+
+    /** The anchor position of the menu */
+    threeDotsAnchorPosition: PropTypes.shape({
+        top: PropTypes.number,
+        right: PropTypes.number,
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+    }),
+
+    /** Whether we should show a close button */
+    shouldShowCloseButton: PropTypes.bool,
+
     /** Whether we should show the step counter */
     shouldShowStepCounter: PropTypes.bool,
 
@@ -56,13 +77,21 @@ const defaultProps = {
     onDownloadButtonPress: () => {},
     onCloseButtonPress: () => {},
     onBackButtonPress: () => {},
+    onThreeDotsButtonPress: () => {},
     shouldShowBackButton: false,
     shouldShowBorderBottom: false,
     shouldShowDownloadButton: false,
     shouldShowInboxCallButton: false,
+    shouldShowThreeDotsButton: false,
+    shouldShowCloseButton: true,
     shouldShowStepCounter: true,
     inboxCallTaskID: '',
     stepCounter: null,
+    threeDotsMenuItems: [],
+    threeDotsAnchorPosition: {
+        top: 0,
+        left: 0,
+    },
 };
 
 const HeaderWithCloseButton = props => (
@@ -107,6 +136,17 @@ const HeaderWithCloseButton = props => (
 
                 {props.shouldShowInboxCallButton && <InboxCallButton taskID={props.inboxCallTaskID} />}
 
+                {props.shouldShowThreeDotsButton && (
+                    <ThreeDotsMenu
+                        menuItems={props.threeDotsMenuItems}
+                        onIconPress={props.onThreeDotsButtonPress}
+                        iconStyles={[styles.mr0]}
+                        anchorPosition={props.threeDotsAnchorPosition}
+                    />
+                )}
+
+                {props.shouldShowCloseButton
+                && (
                 <Tooltip text={props.translate('common.close')}>
                     <TouchableOpacity
                         onPress={props.onCloseButtonPress}
@@ -117,6 +157,7 @@ const HeaderWithCloseButton = props => (
                         <Icon src={Expensicons.Close} />
                     </TouchableOpacity>
                 </Tooltip>
+                )}
             </View>
         </View>
     </View>

src/components/Icon/Expensicons.js

@@ -61,6 +61,7 @@ import Users from '../../../assets/images/users.svg';
 import Venmo from '../../../assets/images/venmo.svg';
 import Wallet from '../../../assets/images/wallet.svg';
 import Workspace from '../../../assets/images/workspace-default-avatar.svg';
+import ThreeDots from '../../../assets/images/three-dots.svg';
 
 export {
     Android,
@@ -126,4 +127,5 @@ export {
     Venmo,
     Wallet,
     Workspace,
+    ThreeDots,
 };

src/components/ThreeDotsMenu/ThreeDotsMenuItemPropTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+const menuItemProps = PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+    text: PropTypes.string,
+    onPress: PropTypes.func,
+}));
+
+export default menuItemProps;

src/components/ThreeDotsMenu/index.js

@@ -0,0 +1,111 @@
+import React, {Component} from 'react';
+import {
+    View, Pressable,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+import PopoverMenu from '../PopoverMenu';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Tooltip from '../Tooltip';
+import * as Expensicons from '../Icon/Expensicons';
+import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Tooltip for the popup icon */
+    iconTooltip: PropTypes.string,
+
+    /** icon for the popup trigger */
+    icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+
+    /** Any additional styles to pass to the icon container. */
+    iconStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** The fill color to pass into the icon. */
+    iconFill: PropTypes.string,
+
+    /** Function to call on icon press */
+    onIconPress: PropTypes.func,
+
+    /** menuItems that'll show up on toggle of the popup menu */
+    menuItems: ThreeDotsMenuItemPropTypes.isRequired,
+
+    /** The anchor position of the menu */
+    anchorPosition: PropTypes.shape({
+        top: PropTypes.number,
+        right: PropTypes.number,
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+    }).isRequired,
+};
+
+const defaultProps = {
+    iconTooltip: 'common.more',
+    iconFill: undefined,
+    iconStyles: [],
+    icon: Expensicons.ThreeDots,
+    onIconPress: () => {},
+};
+
+class ThreeDotsMenu extends Component {
+    constructor(props) {
+        super(props);
+
+        this.togglePopupMenu = this.togglePopupMenu.bind(this);
+        this.state = {
+            isPopupMenuVisible: false,
+        };
+    }
+
+    /**
+     * Toggles the popup menu visibility
+     */
+    togglePopupMenu() {
+        this.setState(prevState => ({
+            isPopupMenuVisible: !prevState.isPopupMenuVisible,
+        }));
+    }
+
+    render() {
+        return (
+            <>
+                <View>
+                    <Tooltip text={this.props.translate(this.props.iconTooltip)}>
+                        <Pressable
+                            onPress={() => {
+                                this.togglePopupMenu();
+                                if (this.props.onIconPress) {
+                                    this.props.onIconPress();
+                                }
+                            }}
+                            style={[styles.touchableButtonImage, ...this.props.iconStyles]}
+                        >
+                            <Icon
+                                src={this.props.icon}
+                                fill={this.props.iconFill}
+                            />
+                        </Pressable>
+                    </Tooltip>
+                </View>
+                <PopoverMenu
+                    onClose={this.togglePopupMenu}
+                    isVisible={this.state.isPopupMenuVisible}
+                    anchorPosition={this.props.anchorPosition}
+                    onItemSelected={() => this.togglePopupMenu()}
+                    animationIn="fadeInDown"
+                    animationOut="fadeOutUp"
+                    menuItems={this.props.menuItems}
+                />
+            </>
+        );
+    }
+}
+
+ThreeDotsMenu.propTypes = propTypes;
+ThreeDotsMenu.defaultProps = defaultProps;
+ThreeDotsMenu.displayName = 'ThreeDotsMenu';
+export default withLocalize(ThreeDotsMenu);
+
+export {ThreeDotsMenuItemPropTypes};

src/languages/en.js

@@ -85,6 +85,7 @@ export default {
         confirm: 'Confirm',
         reset: 'Reset',
         done: 'Done',
+        more: 'More',
         debitCard: 'Debit card',
         payPalMe: 'PayPal.me',
     },
@@ -655,6 +656,8 @@ export default {
         common: {
             card: 'Issue corporate cards',
             workspace: 'Workspace',
+            edit: 'Edit workspace',
+            delete: 'Delete Workspace',
             settings: 'General settings',
             reimburse: 'Reimburse receipts',
             bills: 'Pay bills',
@@ -666,6 +669,8 @@ export default {
             issueAndManageCards: 'Issue and manage cards',
             reconcileCards: 'Reconcile cards',
             growlMessageOnSave: 'Your workspace settings were successfully saved!',
+            deleteConfirmation: 'Are you sure you want to delete this workspace?',
+            growlMessageOnDelete: 'Workspace deleted',
         },
         new: {
             newWorkspace: 'New workspace',

src/languages/es.js

@@ -85,6 +85,7 @@ export default {
         confirm: 'Confirmar',
         reset: 'Restablecer',
         done: 'Listo',
+        more: 'Más',
         debitCard: 'Tarjeta de débito',
         payPalMe: 'PayPal.me',
     },
@@ -657,6 +658,8 @@ export default {
         common: {
             card: 'Emitir tarjetas corporativas',
             workspace: 'Espacio de trabajo',
+            edit: 'Editar espacio de trabajo',
+            delete: 'Eliminar espacio de trabajo',
             settings: 'Configuración general',
             reimburse: 'Reembolsar recibos',
             bills: 'Pagar facturas',
@@ -668,6 +671,8 @@ export default {
             issueAndManageCards: 'Emitir y gestionar tarjetas',
             reconcileCards: 'Reconciliar tarjetas',
             growlMessageOnSave: '¡La configuración del espacio de trabajo se ha guardado correctamente!',
+            growlMessageOnDelete: 'Espacio de trabajo eliminado',
+            deleteConfirmation: '¿Estás seguro de que quieres eliminar este espacio de trabajo?',
         },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',

src/libs/API.js

@@ -1050,6 +1050,16 @@ function Policy_Create(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {String} [parameters.policyID]
+ * @returns {Promise}
+ */
+function Policy_Delete(parameters) {
+    const commandName = 'Policy_Delete';
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @param {Object} parameters
  * @param {String} parameters.policyID
@@ -1175,4 +1185,5 @@ export {
     Policy_Create,
     Policy_Employees_Remove,
     PreferredLocale_Update,
+    Policy_Delete,
 };

src/libs/Navigation/Navigation.js

@@ -4,8 +4,8 @@ import {Keyboard} from 'react-native';
 import {
     StackActions,
     DrawerActions,
-    useLinkBuilder,
     createNavigationContainerRef,
+    getPathFromState,
 } from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import Onyx from 'react-native-onyx';
@@ -15,6 +15,7 @@ import ROUTES from '../../ROUTES';
 import SCREENS from '../../SCREENS';
 import CustomActions from './CustomActions';
 import ONYXKEYS from '../../ONYXKEYS';
+import linkingConfig from './linkingConfig';
 
 let isLoggedIn = false;
 Onyx.connect({
@@ -151,21 +152,16 @@ function dismissModal(shouldOpenDrawer = false) {
 /**
  * Check whether the passed route is currently Active or not.
  *
- * Building path with useLinkBuilder since navigationRef.current.getCurrentRoute().path
+ * Building path with getPathFromState since navigationRef.current.getCurrentRoute().path
  * is undefined in the first navigation.
  *
  * @param {String} routePath Path to check
  * @return {Boolean} is active
  */
 function isActiveRoute(routePath) {
-    const buildLink = useLinkBuilder();
-
     // We remove First forward slash from the URL before matching
     const path = navigationRef.current && navigationRef.current.getCurrentRoute().name
-        ? buildLink(
-            navigationRef.current.getCurrentRoute().name,
-            navigationRef.current.getCurrentRoute().params,
-        ).substring(1)
+        ? getPathFromState(navigationRef.current.getState(), linkingConfig.config).substring(1)
         : '';
     return path === routePath;
 }