Merge pull request #3668 from JoinColony/feature/issue-3623-connect-r…

…emove-safe-dialog

Connect `Remove Safe` dialog

src/i18n/en.json

@@ -244,6 +244,10 @@
     "transaction.group.addExistingSafe.description": "Add an existing Safe to this Colony",
     "transaction.ColonyClient.addExistingSafe.title": "Add Existing Safe",
     "transaction.ColonyClient.addExistingSafe.description": "Add an existing Safe to this Colony",
+    "transaction.group.removeExistingSafes.title": "Remove Existing Safes",
+    "transaction.group.removeExistingSafes.description": "Remove existing Safes from this Colony",
+    "transaction.ColonyClient.removeExistingSafes.title": "Remove Existing Safes",
+    "transaction.ColonyClient.removeExistingSafes.description": "Remove existing Safes from this Colony",
 
     "message.generic.title": "Generic Message",
     "message.generic.description": "This needs your wallet's signature",

src/modules/core/components/InvisibleCopyableAddress/InvisibleCopyableAddress.tsx

@@ -5,6 +5,7 @@ import {
   MessageDescriptor,
   useIntl,
 } from 'react-intl';
+import { Placement } from '@popperjs/core';
 
 import copyToClipboard from 'copy-to-clipboard';
 import { Address } from '~types/index';
@@ -19,6 +20,8 @@ interface Props {
   address: Address;
   /** Text which will display in tooltip when hovering on address */
   copyMessage?: MessageDescriptor;
+  /** Determines the position of the tooltip's text */
+  tooltipPlacement?: Placement;
 }
 
 const MSG = defineMessages({
@@ -41,6 +44,7 @@ const InvisibleCopyableAddress = ({
   children,
   address,
   copyMessage,
+  tooltipPlacement = 'right',
 }: Props) => {
   const [copied, setCopied] = useState(false);
   const { formatMessage } = useIntl();
@@ -64,7 +68,7 @@ const InvisibleCopyableAddress = ({
     formatMessage(MSG.copyMessage);
   return (
     <Tooltip
-      placement="right"
+      placement={tooltipPlacement}
       trigger="hover"
       content={
         <FormattedMessage

src/modules/dashboard/components/ColonyHomeActions/ColonyHomeActions.tsx

@@ -228,23 +228,13 @@ const ColonyHomeActions = ({ colony, ethDomainId }: Props) => {
         colony,
       },
     },
-    // @todo - ready to be implemented in another PR.
     {
       component: AddExistingSafeDialog,
       props: {
         prevStep: 'dashboard.ManageGnosisSafeDialog',
         colony,
       },
     },
-    // {
-    //   component: RemoveSafeDialog,
-    //   props: {
-    //     prevStep: 'dashboard.RemoveSafeDialog',
-    //     colony,
-    //     isVotingExtensionEnabled,
-    //     ethDomainId,
-    //   },
-    // },
     {
       component: GnosisControlSafeDialog,
       props: {
@@ -260,15 +250,6 @@ const ColonyHomeActions = ({ colony, ethDomainId }: Props) => {
         colony,
       },
     },
-    // {
-    //   component: ControlSafeDialog,
-    //   props: {
-    //     prevStep: 'dashboard.ManageGnosisSafeDialog',
-    //     colony,
-    //     isVotingExtensionEnabled,
-    //     ethDomainId,
-    //   },
-    // },
 
     {
       component: PermissionManagementDialog,

src/modules/dashboard/components/Dialogs/AddExistingSafeDialog/AddExistingSafeDialog.tsx

@@ -61,9 +61,13 @@ const AddExistingSafeDialog = ({
           return {
             colonyName,
             colonyAddress,
-            chainId,
-            safeName,
-            contractAddress,
+            safeAddresses: [
+              {
+                chainId,
+                safeName,
+                contractAddress,
+              },
+            ],
             annotationMessage,
           };
         },
@@ -82,9 +86,9 @@ const AddExistingSafeDialog = ({
         contractAddress: undefined,
       }}
       validationSchema={validationSchema}
-      submit={ActionTypes.COLONY_ACTION_ADD_EXISTING_SAFE}
-      error={ActionTypes.COLONY_ACTION_ADD_EXISTING_SAFE_ERROR}
-      success={ActionTypes.COLONY_ACTION_ADD_EXISTING_SAFE_SUCCESS}
+      submit={ActionTypes.COLONY_ACTION_MANAGE_EXISTING_SAFES}
+      error={ActionTypes.COLONY_ACTION_MANAGE_EXISTING_SAFES_ERROR}
+      success={ActionTypes.COLONY_ACTION_MANAGE_EXISTING_SAFES_SUCCESS}
       transform={transform}
       onSuccess={close}
     >

src/modules/dashboard/components/Dialogs/ManageGnosisSafeDialog/ManageGnosisSafeDialog.tsx

@@ -1,10 +1,13 @@
+import { ColonyRole } from '@colony/colony-js';
 import React from 'react';
-import { defineMessages } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { DialogProps, ActionDialogProps } from '~core/Dialog';
 import IndexModal from '~core/IndexModal';
-
-import { WizardDialogType } from '~utils/hooks';
+import { useLoggedInUser } from '~data/index';
+import { getAllUserRoles } from '~modules/transformers';
+import { userHasRole } from '~modules/users/checks';
+import { useTransformer, WizardDialogType } from '~utils/hooks';
 
 const MSG = defineMessages({
   dialogHeader: {
@@ -29,13 +32,18 @@ const MSG = defineMessages({
     defaultMessage: 'Remove a Gnosis Safe you previously added to your Colony.',
   },
   controlSafeTitle: {
-    id: 'dashboard.ManageReputationDialog.controlSafeTitle',
+    id: 'dashboard.ManageGnosisSafeDialog.controlSafeTitle',
     defaultMessage: 'Control Safe',
   },
   controlSafeDescription: {
     id: 'dashboard.ManageGnosisSafeDialog.controlSafeDescription',
     defaultMessage: 'Get your colony’s Gnosis Safe to do stuff.',
   },
+  permissionText: {
+    id: 'dashboard.ManageGnosisSafeDialog.permissionsText',
+    defaultMessage: `You must have the {permission} permissions in the
+      relevant teams, in order to take this action`,
+  },
 });
 
 interface CustomWizardDialogProps extends ActionDialogProps {
@@ -50,6 +58,7 @@ type Props = DialogProps & WizardDialogType<object> & CustomWizardDialogProps;
 const displayName = 'dashboard.ManageGnosisSafeDialog';
 
 const ManageGnosisSafeDialog = ({
+  colony,
   cancel,
   close,
   callStep,
@@ -58,20 +67,47 @@ const ManageGnosisSafeDialog = ({
   nextStepRemoveSafe,
   nextStepControlSafe,
 }: Props) => {
+  const { walletAddress, username, ethereal } = useLoggedInUser();
+  const { formatMessage } = useIntl();
+  const allUserRoles = useTransformer(getAllUserRoles, [colony, walletAddress]);
+
+  const hasRegisteredProfile = !!username && !ethereal;
+  const canManageGnosisSafes =
+    (hasRegisteredProfile &&
+      userHasRole(allUserRoles, ColonyRole.Administration)) ||
+    userHasRole(allUserRoles, ColonyRole.Funding);
   const items = [
     {
       title: MSG.addExistingSafeTitle,
       description: MSG.addExistingSafeDescription,
       icon: 'plus-heavy',
       dataTest: 'gnosisAddExistingItem',
       onClick: () => callStep(nextStepAddExistingSafe),
+      permissionRequired: !canManageGnosisSafes,
+      permissionInfoText: MSG.permissionText,
+      permissionInfoTextValues: {
+        permission: `${formatMessage({
+          id: `role.${ColonyRole.Administration}`,
+        }).toLowerCase()} and ${formatMessage({
+          id: `role.${ColonyRole.Funding}`,
+        }).toLowerCase()}`,
+      },
     },
     {
       title: MSG.removeSafeTitle,
       description: MSG.removeSafeDescription,
       icon: 'trash-can',
       dataTest: 'gnosisRemoveSafeItem',
       onClick: () => callStep(nextStepRemoveSafe),
+      permissionRequired: !canManageGnosisSafes,
+      permissionInfoText: MSG.permissionText,
+      permissionInfoTextValues: {
+        permission: `${formatMessage({
+          id: `role.${ColonyRole.Administration}`,
+        }).toLowerCase()} and ${formatMessage({
+          id: `role.${ColonyRole.Funding}`,
+        }).toLowerCase()}`,
+      },
     },
     {
       title: MSG.controlSafeTitle,

src/modules/dashboard/components/Dialogs/RemoveSafeDialog/RemoveSafeDialog.tsx

@@ -1,54 +1,19 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FormikProps } from 'formik';
+import { useHistory } from 'react-router';
 
 import Dialog, { DialogProps, ActionDialogProps } from '~core/Dialog';
 import { ActionForm } from '~core/Fields';
 import { Address } from '~types/index';
 
-// import { Colony } from '~data/index';
 import { ActionTypes } from '~redux/index';
 import { WizardDialogType } from '~utils/hooks';
+import { pipe, withMeta, mapPayload } from '~utils/actions';
 
-import { Safe } from './types';
 import DialogForm from './RemoveSafeDialogForm';
 
 const displayName = 'dashboard.RemoveSafeDialog';
 
-// Mock data for testing
-const safes: Safe[] = [
-  {
-    name: 'All Saints',
-    chain: `Gnosis Chain`,
-    address: '0x3a157280ca91bB49dAe3D1619C55Da7F9D4438c2',
-  },
-  // {
-  //   name: '',
-  //   chain: `Mainnet`
-  //   address: '0x4a157280ca91bB49dAe3D1619C55Da7F9D4438c3',
-  // },
-  // {
-  //   name: 'Big safe',
-  //  chain: `Mainnet`
-  //   address: '0x5a157280ca91bB49dAe3D1619C55Da7F9D4438c2',
-  // },
-  // {
-  //   name: `Just a test with a very very long name,
-  //   hang on its even longer!!!!!!!!`,
-  //  chain: `Mainnet`
-  //   address: '0x6a157280ca91bB49dAe3D1619C55Da7F9D4438c3',
-  // },
-  // {
-  //   name: 'blalabalabal',
-  //  chain: `Mainnet`
-  //   address: '0x7a157280ca91bB49dAe3D1619C55Da7F9D4438c2',
-  // },
-  // {
-  //   name: 'final test',
-  //   chain: `Mainnet`
-  //   address: '0x8a157280ca91bB49dAe3D1619C55Da7F9D4438c3',
-  // },
-];
-
 export interface FormValues {
   safeList: Address[];
 }
@@ -64,17 +29,36 @@ const RemoveSafeDialog = ({
   prevStep,
   colony,
 }: Props) => {
+  const history = useHistory();
+  const { safes } = colony;
+
+  const transform = useCallback(
+    pipe(
+      mapPayload(({ safeList, annotation: annotationMessage }) => {
+        return {
+          colonyName: colony.colonyName,
+          colonyAddress: colony.colonyAddress,
+          safeAddresses: safeList,
+          annotationMessage,
+          isRemovingSafes: true,
+        };
+      }),
+      withMeta({ history }),
+    ),
+    [],
+  );
+
   return (
     <ActionForm
       initialValues={{
         // if there's only 1 safe then that safe is already checked.
-        safeList: safes.length === 1 ? [safes[0].address] : [],
+        safeList: safes.length === 1 ? [safes[0].contractAddress] : [],
       }}
-      // @TODO need to update action, in another PR
-      submit={ActionTypes.COLONY_ACTION_GENERIC}
-      error={ActionTypes.COLONY_ACTION_GENERIC_ERROR}
-      success={ActionTypes.COLONY_ACTION_GENERIC_SUCCESS}
+      submit={ActionTypes.COLONY_ACTION_MANAGE_EXISTING_SAFES}
+      error={ActionTypes.COLONY_ACTION_MANAGE_EXISTING_SAFES_ERROR}
+      success={ActionTypes.COLONY_ACTION_MANAGE_EXISTING_SAFES_SUCCESS}
       onSuccess={close}
+      transform={transform}
     >
       {(formValues: FormikProps<FormValues>) => {
         return (

src/modules/dashboard/components/Dialogs/RemoveSafeDialog/RemoveSafeDialogForm.tsx

@@ -7,13 +7,12 @@ import DialogSection from '~core/Dialog/DialogSection';
 import Heading from '~core/Heading';
 
 import { ActionDialogProps } from '~core/Dialog';
-import { useLoggedInUser } from '~data/index';
+import { ColonySafe, useLoggedInUser } from '~data/index';
 import { useTransformer } from '~utils/hooks';
 import { getAllUserRoles } from '~modules/transformers';
 import { canEnterRecoveryMode } from '~modules/users/checks';
 
 import SafeListItem from './SafeListItem';
-import { Safe } from './types';
 import { FormValues } from './RemoveSafeDialog';
 
 import styles from './RemoveSafeDialogForm.css';
@@ -34,7 +33,7 @@ const MSG = defineMessages({
 });
 
 interface Props extends Omit<ActionDialogProps, 'isVotingExtensionEnabled'> {
-  safeList: Safe[];
+  safeList: ColonySafe[];
 }
 
 const RemoveSafeDialogForm = ({
@@ -77,9 +76,9 @@ const RemoveSafeDialogForm = ({
             <div className={styles.content}>
               {safeList.map((item) => (
                 <SafeListItem
-                  key={item.address}
+                  key={item.contractAddress}
                   safe={item}
-                  isChecked={values?.safeList?.includes(item.address)}
+                  isChecked={values?.safeList?.includes(item.contractAddress)}
                 />
               ))}
             </div>