From 2e9d2c7baecd2ac6ef6e2a403073aaf3077cc7d8 Mon Sep 17 00:00:00 2001
From: Ken <ken@open.gov.sg>
Date: Thu, 14 Nov 2024 13:08:28 +0800
Subject: [PATCH] feat: switch delete to edit button on logic page

---
 .../InactiveLogicBlock/InactiveLogicBlock.tsx | 38 ++++---------------
 .../LogicBlockFactory/LogicBlockFactory.tsx   |  5 +--
 2 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/frontend/src/features/admin-form/create/logic/components/LogicContent/InactiveLogicBlock/InactiveLogicBlock.tsx b/frontend/src/features/admin-form/create/logic/components/LogicContent/InactiveLogicBlock/InactiveLogicBlock.tsx
index 595014af0d..e97f1ab6b1 100644
--- a/frontend/src/features/admin-form/create/logic/components/LogicContent/InactiveLogicBlock/InactiveLogicBlock.tsx
+++ b/frontend/src/features/admin-form/create/logic/components/LogicContent/InactiveLogicBlock/InactiveLogicBlock.tsx
@@ -1,13 +1,6 @@
 import { useCallback, useMemo } from 'react'
-import { BiTrash } from 'react-icons/bi'
-import {
-  Box,
-  chakra,
-  Divider,
-  Stack,
-  StackDivider,
-  Text,
-} from '@chakra-ui/react'
+import { BiPencil } from 'react-icons/bi'
+import { Box, Divider, Stack, StackDivider, Text } from '@chakra-ui/react'
 
 import { LogicDto, LogicType } from '~shared/types/form'
 
@@ -26,12 +19,10 @@ import { LogicConditionValues } from './LogicConditionValues'
 
 interface InactiveLogicBlockProps {
   logic: LogicDto
-  handleOpenDeleteModal: () => void
 }
 
 export const InactiveLogicBlock = ({
   logic,
-  handleOpenDeleteModal,
 }: InactiveLogicBlockProps): JSX.Element | null => {
   const { idToFieldMap } = useAdminFormLogic()
   const setToEditing = useAdminLogicStore(setToEditingSelector)
@@ -98,29 +89,15 @@ export const InactiveLogicBlock = ({
 
   return (
     <Box pos="relative">
-      <chakra.button
-        type="button"
+      <Box
         w="100%"
         textAlign="start"
         borderRadius="4px"
         bg="white"
         border="1px solid"
         borderColor="neutral.300"
-        transitionProperty="common"
-        transitionDuration="normal"
         cursor={isPreventEdit ? 'not-allowed' : 'pointer'}
-        disabled={isPreventEdit}
         aria-disabled={isPreventEdit}
-        _hover={{
-          _disabled: {
-            bg: 'white',
-          },
-          bg: 'primary.100',
-        }}
-        _focus={{
-          boxShadow: `0 0 0 4px var(--chakra-colors-primary-300)`,
-        }}
-        onClick={handleClick}
       >
         <Stack
           spacing="1.5rem"
@@ -161,16 +138,17 @@ export const InactiveLogicBlock = ({
         >
           {renderThenContent}
         </Stack>
-      </chakra.button>
+      </Box>
       <IconButton
         top={{ base: '0.5rem', md: '2rem' }}
         right={{ base: '0.5rem', md: '2rem' }}
         pos="absolute"
         aria-label="Delete logic"
         variant="clear"
-        colorScheme="danger"
-        onClick={handleOpenDeleteModal}
-        icon={<BiTrash fontSize="1.5rem" />}
+        onClick={handleClick}
+        icon={<BiPencil fontSize="1.5rem" />}
+        cursor={isPreventEdit ? 'not-allowed' : 'pointer'}
+        aria-disabled={isPreventEdit}
       />
     </Box>
   )
diff --git a/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicBlockFactory/LogicBlockFactory.tsx b/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicBlockFactory/LogicBlockFactory.tsx
index ca4a4c7e76..27962ac17c 100644
--- a/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicBlockFactory/LogicBlockFactory.tsx
+++ b/frontend/src/features/admin-form/create/logic/components/LogicContent/LogicBlockFactory/LogicBlockFactory.tsx
@@ -40,10 +40,7 @@ export const LogicBlockFactory = ({
           handleOpenDeleteModal={onDeleteModalOpen}
         />
       ) : (
-        <InactiveLogicBlock
-          logic={logic}
-          handleOpenDeleteModal={onDeleteModalOpen}
-        />
+        <InactiveLogicBlock logic={logic} />
       )}
     </>
   )