Skip to content

Commit 3dcf9a0

Browse files
nicosammitonicosammito
committed
feat: removing all hidden fields and don't show optional by default
1 parent 5f170a7 commit 3dcf9a0

2 files changed

Lines changed: 104 additions & 51 deletions

File tree

‎src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx‎

Lines changed: 53 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import {Alert, Spacing, Text, useForm, useService, useStore} from "@code0-tech/pictor";
2+
import {Alert, Button, Flex, Spacing, Text, useForm, useService, useStore} from "@code0-tech/pictor";
33
import {
44
Flow,
55
LiteralValue,
@@ -20,6 +20,8 @@ import {
2020
} from "@core/util/fallback-translations";
2121
import {useNodes} from "@xyflow/react";
2222
import {NodeSchema} from "@code0-tech/triangulum";
23+
import * as Collapsible from "@radix-ui/react-collapsible";
24+
import {IconChevronDown} from "@tabler/icons-react";
2325

2426
export interface FunctionFileDefaultComponentProps {
2527
nodeId: NodeFunction['id']
@@ -120,30 +122,55 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
120122
<Spacing spacing={"xl"}/>
121123
<Text size={"md"}>Parameters</Text>
122124
<Spacing spacing={"xs"}/>
123-
{definition?.parameterDefinitions?.nodes?.map((parameterDefinition, index) => {
124-
125-
if (!parameterDefinition) return null
126-
127-
const title = parameterDefinition?.names?.[0]?.content ?? FALLBACK_FUNCTION_PARAMETER_NAME
128-
const description = parameterDefinition?.descriptions?.[0]?.content ?? FALLBACK_FUNCTION_PARAMETER_DESCRIPTION
129-
130-
const schema = (flowNode?.data?.schema as NodeSchema[])?.[index]
131-
132-
return <div>
133-
<DataTypeInputComponent data-qa-selector={"flow-builder-parameter"}
134-
title={title}
135-
schema={schema}
136-
description={description}
137-
clearable
138-
key={parameterDefinition.id}
139-
onChange={() => {
140-
changedParameter.current.add(parameterDefinition.id!)
141-
validate()
142-
}}
143-
{...inputs.getInputProps(parameterDefinition.id!)}
144-
/>
145-
<Spacing spacing={"xl"}/>
146-
</div>
147-
})}
125+
{(() => {
126+
const indexedParameters = definition?.parameterDefinitions?.nodes
127+
?.map((parameterDefinition, index) => ({parameterDefinition, index}))
128+
?.filter(({parameterDefinition}) => parameterDefinition && !parameterDefinition.hidden) ?? []
129+
130+
const requiredParameters = indexedParameters.filter(({parameterDefinition}) => !parameterDefinition!.optional)
131+
const optionalParameters = indexedParameters.filter(({parameterDefinition}) => parameterDefinition!.optional)
132+
133+
const renderParameter = (parameterDefinition: NonNullable<typeof indexedParameters[number]['parameterDefinition']>, index: number) => {
134+
const title = parameterDefinition?.names?.[0]?.content ?? FALLBACK_FUNCTION_PARAMETER_NAME
135+
const description = parameterDefinition?.descriptions?.[0]?.content ?? FALLBACK_FUNCTION_PARAMETER_DESCRIPTION
136+
137+
const schema = (flowNode?.data?.schema as NodeSchema[])?.[index]
138+
139+
return <div key={parameterDefinition.id}>
140+
<DataTypeInputComponent data-qa-selector={"flow-builder-parameter"}
141+
title={title}
142+
schema={schema}
143+
description={description}
144+
clearable
145+
onChange={() => {
146+
changedParameter.current.add(parameterDefinition.id!)
147+
validate()
148+
}}
149+
{...inputs.getInputProps(parameterDefinition.id!)}
150+
/>
151+
<Spacing spacing={"xl"}/>
152+
</div>
153+
}
154+
155+
return <>
156+
{requiredParameters.map(({parameterDefinition, index}) => renderParameter(parameterDefinition!, index))}
157+
{optionalParameters.length > 0 && (
158+
<Collapsible.Root>
159+
<Collapsible.Trigger asChild>
160+
<Flex justify={"space-between"} align={"center"} style={{gap: "0.7rem"}}>
161+
<Text size={"md"}>Optional parameters</Text>
162+
<Button variant={"none"} color={"primary"} paddingSize={"xxs"}>
163+
<IconChevronDown size={16}/>
164+
</Button>
165+
</Flex>
166+
</Collapsible.Trigger>
167+
<Spacing spacing={"md"}/>
168+
<Collapsible.Content>
169+
{optionalParameters.map(({parameterDefinition, index}) => renderParameter(parameterDefinition!, index))}
170+
</Collapsible.Content>
171+
</Collapsible.Root>
172+
)}
173+
</>
174+
})()}
148175
</>
149176
}

‎src/packages/ce/src/function/components/files/FunctionFileTriggerComponent.tsx‎

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import {Alert, Spacing, Text, useForm, useService, useStore} from "@code0-tech/pictor";
2+
import {Alert, Button, Flex, Spacing, Text, useForm, useService, useStore} from "@code0-tech/pictor";
33
import {Flow, LiteralValue, Namespace, NamespaceProject} from "@code0-tech/sagittarius-graphql-types";
44
import {FlowTypeService} from "@edition/flowtype/services/FlowType.service";
55
import {FlowService} from "@edition/flow/services/Flow.service";
@@ -13,6 +13,8 @@ import {
1313
} from "@core/util/fallback-translations";
1414
import {useNodesData} from "@xyflow/react";
1515
import {NodeSchema} from "@code0-tech/triangulum";
16+
import * as Collapsible from "@radix-ui/react-collapsible";
17+
import {IconChevronDown} from "@tabler/icons-react";
1618

1719
export interface FunctionFileTriggerComponentProps {
1820
flowId: Flow['id']
@@ -118,30 +120,54 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
118120
<Spacing spacing={"xl"}/>
119121
<Text size={"md"}>Settings</Text>
120122
<Spacing spacing={"xl"}/>
121-
{definition?.flowTypeSettings?.map((settingDefinition, index) => {
122-
123-
if (!settingDefinition) return null
124-
125-
const title = settingDefinition.names?.[0]?.content ?? FALLBACK_FLOW_TYPE_SETTING_NAME
126-
const description = settingDefinition?.descriptions?.[0]?.content ?? FALLBACK_FLOW_TYPE_SETTING_DESCRIPTION
127-
128-
return <div>
129-
{/*@ts-ignore*/}
130-
<DataTypeInputComponent data-qa-selector={"flow-builder-setting"}
131-
title={title}
132-
schema={(flowNode?.data?.schema as NodeSchema[])?.[index]}
133-
description={description}
134-
clearable
135-
key={settingDefinition.id}
136-
onChange={() => {
137-
changedSettings.current.add(settingDefinition.id!)
138-
validate()
139-
}}
140-
{...inputs.getInputProps(settingDefinition.id!)}
141-
/>
142-
<Spacing spacing={"xl"}/>
143-
</div>
123+
{(() => {
124+
const indexedSettings = definition?.flowTypeSettings
125+
?.map((settingDefinition, index) => ({settingDefinition, index}))
126+
?.filter(({settingDefinition}) => settingDefinition && !settingDefinition.hidden) ?? []
127+
128+
const requiredSettings = indexedSettings.filter(({settingDefinition}) => !settingDefinition!.optional)
129+
const optionalSettings = indexedSettings.filter(({settingDefinition}) => settingDefinition!.optional)
130+
131+
const renderSetting = (settingDefinition: NonNullable<typeof indexedSettings[number]['settingDefinition']>, index: number) => {
132+
const title = settingDefinition.names?.[0]?.content ?? FALLBACK_FLOW_TYPE_SETTING_NAME
133+
const description = settingDefinition?.descriptions?.[0]?.content ?? FALLBACK_FLOW_TYPE_SETTING_DESCRIPTION
134+
135+
return <div key={settingDefinition.id}>
136+
{/*@ts-ignore*/}
137+
<DataTypeInputComponent data-qa-selector={"flow-builder-setting"}
138+
title={title}
139+
schema={(flowNode?.data?.schema as NodeSchema[])?.[index]}
140+
description={description}
141+
clearable
142+
onChange={() => {
143+
changedSettings.current.add(settingDefinition.id!)
144+
validate()
145+
}}
146+
{...inputs.getInputProps(settingDefinition.id!)}
147+
/>
148+
<Spacing spacing={"xl"}/>
149+
</div>
150+
}
144151

145-
})}
152+
return <>
153+
{requiredSettings.map(({settingDefinition, index}) => renderSetting(settingDefinition!, index))}
154+
{optionalSettings.length > 0 && (
155+
<Collapsible.Root>
156+
<Collapsible.Trigger asChild>
157+
<Flex justify={"space-between"} align={"center"} style={{gap: "0.7rem"}}>
158+
<Text size={"md"}>Optional settings</Text>
159+
<Button variant={"none"} color={"primary"} paddingSize={"xxs"}>
160+
<IconChevronDown size={16}/>
161+
</Button>
162+
</Flex>
163+
</Collapsible.Trigger>
164+
<Spacing spacing={"md"}/>
165+
<Collapsible.Content>
166+
{optionalSettings.map(({settingDefinition, index}) => renderSetting(settingDefinition!, index))}
167+
</Collapsible.Content>
168+
</Collapsible.Root>
169+
)}
170+
</>
171+
})()}
146172
</>
147173
})

0 commit comments

Comments
 (0)