fix: add http params focus & ui (#2611)

This commit is contained in:
heheer
2024-09-04 13:37:29 +08:00
committed by GitHub
parent 64708ea424
commit d6233cd7b1
8 changed files with 52 additions and 62 deletions

View File

@@ -289,7 +289,8 @@ export function RenderHttpProps({
</Flex>
<LightRowTabs<TabEnum>
width={'100%'}
mb={selectedTab === TabEnum.body ? 1 : 2}
mb={2}
defaultColor={'myGray.250'}
list={[
{ label: <RenderPropsItem text="Params" num={paramsLength} />, value: TabEnum.params },
...(!['GET', 'DELETE'].includes(requestMethods)
@@ -298,7 +299,8 @@ export function RenderHttpProps({
label: (
<Flex alignItems={'center'}>
Body
{jsonBody?.value && <Box ml={1}></Box>}
{(jsonBody?.value || !!formBody?.value?.length) &&
contentType?.value !== ContentTypes.none && <Box ml={1}></Box>}
</Flex>
),
value: TabEnum.body
@@ -313,7 +315,7 @@ export function RenderHttpProps({
value={selectedTab}
onChange={setSelectedTab}
/>
<Box bg={'white'} borderRadius={'md'} minW={'560px'}>
<Box minW={'560px'}>
{params &&
headers &&
jsonBody &&
@@ -494,7 +496,13 @@ const RenderForm = ({
const Render = useMemo(() => {
return (
<Box borderRadius={'md'} overflow={'hidden'} borderWidth={'1px'} borderBottom={'none'}>
<Box
borderRadius={'md'}
overflow={'hidden'}
borderWidth={'1px'}
borderBottom={'none'}
bg={'white'}
>
<TableContainer overflowY={'visible'} overflowX={'unset'}>
<Table>
<Thead>
@@ -508,16 +516,24 @@ const RenderForm = ({
</Tr>
</Thead>
<Tbody>
{list.map((item, index) => (
{[...list, { key: '', value: '', label: '' }].map((item, index) => (
<Tr key={`${input.key}${index}`}>
<Td p={0} w={'50%'}>
<Td p={0} w={'50%'} borderRight={'1px solid'} borderColor={'myGray.200'}>
<HttpInput
placeholder={t('common:core.module.http.Props name')}
placeholder={
index !== list.length
? t('common:core.module.http.Props name_and_tips')
: t('common:core.module.http.Add props_and_tips')
}
value={item.key}
variableLabels={variables}
variables={variables}
onBlur={(val) => {
handleKeyChange(index, val);
if (index === list.length) {
handleAddNewProps(val);
setUpdateTrigger((prev) => !prev);
}
}}
updateTrigger={updateTrigger}
/>
@@ -525,7 +541,11 @@ const RenderForm = ({
<Td p={0} w={'50%'}>
<Box display={'flex'} alignItems={'center'}>
<HttpInput
placeholder={t('common:core.module.http.Props value')}
placeholder={
index !== list.length
? t('common:core.module.http.Props value_and_tips')
: ''
}
value={item.value}
variables={variables}
variableLabels={variables}
@@ -538,40 +558,22 @@ const RenderForm = ({
setShouldUpdateNode(true);
}}
/>
<MyIcon
name={'delete'}
cursor={'pointer'}
_hover={{ color: 'red.600' }}
w={'14px'}
onClick={() => {
setList((prevlist) => prevlist.filter((val) => val.key !== item.key));
setShouldUpdateNode(true);
}}
/>
{index !== list.length && (
<MyIcon
name={'delete'}
cursor={'pointer'}
_hover={{ color: 'red.600' }}
w={'14px'}
onClick={() => {
setList((prevlist) => prevlist.filter((val) => val.key !== item.key));
setShouldUpdateNode(true);
}}
/>
)}
</Box>
</Td>
</Tr>
))}
<Tr>
<Td p={0} w={'50%'}>
<HttpInput
placeholder={t('common:core.module.http.Add props')}
value={''}
variableLabels={variables}
variables={variables}
updateTrigger={updateTrigger}
onBlur={(val) => {
handleAddNewProps(val);
setUpdateTrigger((prev) => !prev);
}}
/>
</Td>
<Td p={0} w={'50%'}>
<Box display={'flex'} alignItems={'center'}>
<HttpInput />
</Box>
</Td>
</Tr>
</Tbody>
</Table>
</TableContainer>
@@ -662,19 +664,6 @@ const RenderBody = ({
</Box>
))}
</Flex>
{typeInput?.value === ContentTypes.none && (
<Box
px={4}
py={12}
bg={'white'}
color={'myGray.400'}
borderRadius={'6px'}
border={'1px solid'}
borderColor={'myGray.200'}
>
{t('workflow:http.body_none')}
</Box>
)}
{(typeInput?.value === ContentTypes.formData ||
typeInput?.value === ContentTypes.xWwwFormUrlencoded) && (
<RenderForm nodeId={nodeId} input={formBody} variables={variables} />