Merge pull request #2605 from decentdao/2582-cleanup

Role details/edit pages cleanup
decentdao · Dec 6, 2024 · e18755b · e18755b
2 parents 91591c0 + 9f6b415
commit e18755b
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 33 deletions.
diff --git 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';
@@ -135,19 +135,33 @@ 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>
+      <Flex justifyContent="space-between">
+        <Text
+          textStyle="heading-large"
+          color="white-0"
+          my="1rem"
+        >
+          {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/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>

diff --git 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>

diff --git 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')}