From 142cf1834d33fc6642d7460b87ff4ab20e2b8d37 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 6 Dec 2024 14:55:44 +0000
Subject: [PATCH 1/4] Navigate to edit role details when clicking edit with
 role open

---
 src/components/Roles/RoleDetails.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Roles/RoleDetails.tsx b/src/components/Roles/RoleDetails.tsx
index d0e88589a..c4a72443c 100644
--- a/src/components/Roles/RoleDetails.tsx
+++ b/src/components/Roles/RoleDetails.tsx
@@ -135,19 +135,23 @@ export default function RolesDetails({
                   </Box>
                 ),
                 gap: 0,
-                children: t('editRoles'),
-                onClick: () => navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safe.address)),
+                children: t('editRole'),
+                onClick: () => {
+                  navigate(
+                    DAO_ROUTES.rolesEditDetails.relative(addressPrefix, safe.address, roleHat.id),
+                  );
+                },
               }
             : undefined
         }
       />
-      <Text
-        textStyle="heading-large"
-        color="white-0"
-        my="1rem"
-      >
-        {roleHat.name}
-      </Text>
+        <Text
+          textStyle="heading-large"
+          color="white-0"
+          my="1rem"
+        >
+          {roleHat.name}
+        </Text>
       <Grid
         gridTemplateAreas={`
               "mLabel mValue"

From 69ad9782a229494123618fd869c707aad970727b Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 6 Dec 2024 15:00:46 +0000
Subject: [PATCH 2/4] Add back button to role/edit detail

---
 src/components/Roles/RoleDetails.tsx        | 14 ++++++++++++--
 src/components/Roles/forms/RoleFormTabs.tsx | 11 +++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/Roles/RoleDetails.tsx b/src/components/Roles/RoleDetails.tsx
index c4a72443c..24e942dc7 100644
--- a/src/components/Roles/RoleDetails.tsx
+++ b/src/components/Roles/RoleDetails.tsx
@@ -1,5 +1,5 @@
-import { Badge, Box, Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
-import { CheckSquare, List, User } from '@phosphor-icons/react';
+import { Badge, Box, Button, Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
+import { ArrowLeft, CheckSquare, List, User } from '@phosphor-icons/react';
 import { RefObject, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -145,6 +145,7 @@ export default function RolesDetails({
             : undefined
         }
       />
+      <Flex justifyContent="space-between">
         <Text
           textStyle="heading-large"
           color="white-0"
@@ -152,6 +153,15 @@ export default function RolesDetails({
         >
           {roleHat.name}
         </Text>
+        <Button
+          variant="tertiary"
+          width="min-content"
+          color="lilac-0"
+          pr={2}
+          leftIcon={<ArrowLeft />}
+          onClick={() => navigate(DAO_ROUTES.roles.relative(addressPrefix, safe.address))}
+        />
+      </Flex>
       <Grid
         gridTemplateAreas={`
               "mLabel mValue"
diff --git a/src/components/Roles/forms/RoleFormTabs.tsx b/src/components/Roles/forms/RoleFormTabs.tsx
index 07235e9e7..418c6dbe8 100644
--- a/src/components/Roles/forms/RoleFormTabs.tsx
+++ b/src/components/Roles/forms/RoleFormTabs.tsx
@@ -1,4 +1,5 @@
 import { Button, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { useFormikContext } from 'formik';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -58,6 +59,16 @@ export function RoleFormTabs({
 
   return (
     <>
+      <Flex justifyContent="flex-end">
+        <Button
+          variant="tertiary"
+          width="min-content"
+          color="lilac-0"
+          pr={2}
+          leftIcon={<ArrowLeft />}
+          onClick={() => navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safe.address))}
+        />
+      </Flex>
       <Tabs variant="twoTone">
         <TabList>
           <Tab>{t('roleInfo')}</Tab>

From 5ed75bbde6b7988df07c097040be0f57af3c0ea4 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 6 Dec 2024 15:18:20 +0000
Subject: [PATCH 3/4] Fix up member input field

---
 src/components/Roles/forms/RoleFormMember.tsx | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/components/Roles/forms/RoleFormMember.tsx b/src/components/Roles/forms/RoleFormMember.tsx
index 4aebc1506..57469d44e 100644
--- a/src/components/Roles/forms/RoleFormMember.tsx
+++ b/src/components/Roles/forms/RoleFormMember.tsx
@@ -23,11 +23,9 @@ import { useTranslation } from 'react-i18next';
 import { DecentHourGlass } from '../../../assets/theme/custom/icons/DecentHourGlass';
 import { DETAILS_BOX_SHADOW } from '../../../constants/common';
 import useAddress from '../../../hooks/utils/useAddress';
-import { useGetAccountName } from '../../../hooks/utils/useGetAccountName';
 import { RoleFormValues } from '../../../types/roles';
 import DraggableDrawer from '../../ui/containers/DraggableDrawer';
-import { AddressInput } from '../../ui/forms/EthAddressInput';
-import LabelWrapper from '../../ui/forms/LabelWrapper';
+import { InputComponent } from '../../ui/forms/InputComponent';
 import { ModalBase } from '../../ui/modals/ModalBase';
 import RoleFormTerms from './RoleFormTerms';
 
@@ -38,14 +36,13 @@ function RoleMemberWearerInput() {
   const { address: resolvedWearerAddress, isValid: isValidWearerAddress } =
     useAddress(roleWearerString);
 
-  const { setFieldValue, values } = useFormikContext<RoleFormValues>();
+  const { setFieldValue } = useFormikContext<RoleFormValues>();
   useEffect(() => {
     if (isValidWearerAddress) {
       setFieldValue('roleEditing.resolvedWearer', resolvedWearerAddress);
     }
   }, [isValidWearerAddress, resolvedWearerAddress, setFieldValue]);
 
-  const { displayName } = useGetAccountName(values.roleEditing?.resolvedWearer, false);
   return (
     <FormControl>
       <Field name="roleEditing.wearer">
@@ -58,24 +55,21 @@ function RoleMemberWearerInput() {
           form: FormikProps<RoleFormValues>;
           meta: FieldMetaProps<string>;
         }) => (
-          <LabelWrapper
+          <InputComponent
             label={t('member')}
-            errorMessage={meta.touched && meta.error ? meta.error : undefined}
             isRequired
-            labelColor="neutral-7"
-          >
-            <AddressInput
-              value={displayName ?? field.value}
-              onBlur={() => {
-                setFieldTouched('roleEditing.wearer', true);
-              }}
-              onChange={e => {
-                const inputWearer = e.target.value;
-                setRoleWearerString(inputWearer);
-                setFieldValue('roleEditing.wearer', inputWearer);
-              }}
-            />
-          </LabelWrapper>
+            value={field.value}
+            errorMessage={meta.touched && meta.error ? meta.error : undefined}
+            onBlur={() => {
+              setFieldTouched('roleEditing.wearer', true);
+            }}
+            onChange={e => {
+              const inputWearer = e.target.value;
+              setRoleWearerString(inputWearer);
+              setFieldValue('roleEditing.wearer', inputWearer);
+            }}
+            testId="role-wearer"
+          />
         )}
       </Field>
     </FormControl>

From 9f6b415e655a519b1d620f10e83c6e03fed44f64 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 6 Dec 2024 15:59:03 +0000
Subject: [PATCH 4/4] Restore UnsavedChangesWarningContent to roles edit page

---
 .../dao/roles/edit/SafeRolesEditPage.tsx      | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx
index 9793477b8..31329f498 100644
--- a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx
+++ b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx
@@ -1,5 +1,5 @@
 import * as amplitude from '@amplitude/analytics-browser';
-import { Box, Button, Flex, Show } from '@chakra-ui/react';
+import { Box, Button, Flex, Hide, Show } from '@chakra-ui/react';
 import { Plus } from '@phosphor-icons/react';
 import { useFormikContext } from 'formik';
 import { useEffect, useState } from 'react';
@@ -9,7 +9,10 @@ import { Hex, toHex } from 'viem';
 import { RoleCardEdit } from '../../../../components/Roles/RoleCard';
 import { RoleCardLoading } from '../../../../components/Roles/RolePageCard';
 import { RolesEditTable } from '../../../../components/Roles/RolesTable';
+import DraggableDrawer from '../../../../components/ui/containers/DraggableDrawer';
 import NoDataCard from '../../../../components/ui/containers/NoDataCard';
+import { ModalBase } from '../../../../components/ui/modals/ModalBase';
+import { UnsavedChangesWarningContent } from '../../../../components/ui/modals/UnsavedChangesWarningContent';
 import PageHeader from '../../../../components/ui/page/Header/PageHeader';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { getRandomBytes } from '../../../../helpers';
@@ -51,6 +54,36 @@ export function SafeRolesEditPage() {
 
   return (
     <>
+      {blocker.state === 'blocked' && (
+        <>
+          <Hide above="md">
+            <DraggableDrawer
+              isOpen
+              onClose={() => {}}
+              onOpen={() => {}}
+              headerContent={null}
+              initialHeight="23rem"
+              closeOnOverlayClick={false}
+            >
+              <UnsavedChangesWarningContent
+                onDiscard={blocker.proceed}
+                onKeepEditing={blocker.reset}
+              />
+            </DraggableDrawer>
+          </Hide>
+          <Hide below="md">
+            <ModalBase
+              isOpen
+              onClose={() => {}}
+            >
+              <UnsavedChangesWarningContent
+                onDiscard={blocker.proceed}
+                onKeepEditing={blocker.reset}
+              />
+            </ModalBase>
+          </Hide>
+        </>
+      )}
       <Box>
         <PageHeader
           title={t('roles')}