Skip to content

Commit e1ce48c

Browse files
VincentvanMedenbachVincentvanMedenbach
authored
Datamapper small bugfixes (#414)
* Added z-index to export button * Moved mapping nodes hover info slightly * Improved the styling of the dropdowns on the forms Kinda hacky, kinda wacky but don't really have time to do it better and debug
1 parent ddc29ea commit e1ce48c

7 files changed

Lines changed: 29 additions & 15 deletions

File tree

‎src/main/frontend/app/components/datamapper/forms/add-conditions-form.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ function AddConditionForm({ sources, onSave, conditionToEdit }: Readonly<AddCond
6161
<div className="mb-4 flex flex-col">
6262
<label className="mb-1">Condition type:</label>
6363
<Dropdown
64+
className="max-w-55"
6465
value={condition.type?.name ?? ''}
6566
onChange={(event) => {
6667
const conditionType = conditionsConfig.conditions.find((condition) => condition.name === event) ?? null
@@ -161,7 +162,7 @@ function ConditionInputField({
161162
<div className="mb-2 flex flex-col">
162163
<label className="mb-1">{inputConfig.label}</label>
163164
<Dropdown
164-
className="mb-4"
165+
className="mb-4 max-w-55"
165166
value={selectedIsDefault ? 'defaultValue' : (value?.sourceId ?? '')}
166167
onChange={handleSourceChange}
167168
options={Object.fromEntries([
@@ -208,6 +209,7 @@ function ConditionInputField({
208209
<div className="mb-2 flex flex-col">
209210
<label className="mb-1">{operatorConfig.label}</label>
210211
<Dropdown
212+
className="max-w-55"
211213
value={value?.value ?? ''}
212214
onChange={(val) => onChange({ type: 'operator', value: val })}
213215
options={Object.fromEntries(operatorConfig.allowedValues.map((option) => [option, option]))}

‎src/main/frontend/app/components/datamapper/forms/add-field-form.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
100100
}
101101

102102
return (
103-
<div className="text-foreground">
103+
<div className="text-foreground max-w-55">
104104
<h1 className="mb-2 text-xl font-bold">
105105
{initialData ? 'Edit' : 'Add'} {fieldType} property
106106
</h1>
@@ -109,6 +109,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
109109
<>
110110
<label htmlFor="parentId">Parent</label>
111111
<Dropdown
112+
className="max-w-55"
112113
id="parentId"
113114
value={parentId}
114115
onChange={(e) => setParent(e)}
@@ -121,6 +122,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
121122

122123
<label htmlFor="variableType">Variable Type:</label>
123124
<Dropdown
125+
className="max-w-55"
124126
id="variableType"
125127
value={variableType}
126128
onChange={(value) => setVariableType(value)}
@@ -135,6 +137,7 @@ function AddFieldForm({ fieldType, onSave, parents, formatDefinition, initialDat
135137
<label htmlFor="defaultValue">Default value:</label>
136138
{defaultValueInputType === 'boolean' ? (
137139
<Dropdown
140+
className="max-w-55"
138141
id="defaultValue"
139142
value={defaultValue}
140143
onChange={(value: string) => setDefaultValue(value)}

‎src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
119119

120120
const isFormIncomplete = sourceIds.some((id) => !id) || !targetId || !output
121121

122-
const scrollable = 'flex-1 min-h-0 overflow-y-auto space-y-2'
122+
const scrollable = 'flex-1 min-h-0 overflow-y-auto space-y-2 max-w-55 truncate'
123123

124124
return (
125125
<div className="text-foreground mx-auto flex max-h-[90vh] min-h-0 w-full max-w-225 flex-col">
@@ -136,6 +136,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
136136
{sourceIds.map((id, value) => (
137137
<div key={value} className="flex items-center gap-2">
138138
<Dropdown
139+
className="max-w-45"
139140
id={value.toString()}
140141
value={id}
141142
onChange={(event) => updateArrayItem(setSourceIds, value, event)}
@@ -163,7 +164,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
163164
{mutations.map((mutation) => (
164165
<div key={mutation.id} className="rounded border p-2">
165166
<div className="flex items-center justify-between">
166-
<span className="max-w-40 font-semibold break-words">{mutation.name}</span>
167+
<span className="max-w-40 truncate font-semibold">{mutation.name}</span>
167168
<div className="flex gap-2">
168169
<EditButton
169170
onClick={() => {
@@ -196,7 +197,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
196197
{conditions.map((condition) => (
197198
<div key={condition.id} className="rounded border p-2">
198199
<div className="flex items-center justify-between">
199-
<span className="font-semibold">{condition.name}</span>
200+
<span className="truncate font-semibold">{condition.name}</span>
200201
<div className="flex gap-2">
201202
<EditButton
202203
onClick={() => {
@@ -229,6 +230,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
229230
<div className="flex flex-col gap-1">
230231
<label className="text-muted-foreground text-sm font-semibold">Output</label>
231232
<Dropdown
233+
className="max-w-50"
232234
value={output}
233235
onChange={setOutput}
234236
options={Object.fromEntries(
@@ -243,6 +245,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
243245
<label className="text-muted-foreground text-sm font-semibold">Target</label>
244246

245247
<Dropdown
248+
className="max-w-50"
246249
value={targetId}
247250
onChange={setTargetId}
248251
options={Object.fromEntries(targets.map((target) => [target.id, `${target.label} (${target.type})`]))}
@@ -259,6 +262,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
259262

260263
{isConditional && (
261264
<Dropdown
265+
className="max-w-115 p-2"
262266
value={selectedConditional?.id ?? ''}
263267
onChange={(e) => setSelectedConditional(conditions.find((condition) => condition.id === e) ?? null)}
264268
options={Object.fromEntries(conditions.map((condition) => [condition.id, condition.name]))}

‎src/main/frontend/app/components/datamapper/forms/add-mutation-form.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function AddMutationForm({
4343
}
4444

4545
return (
46-
<div className="text-foreground border-black">
46+
<div className="text-foreground max-w-55 border-black">
4747
<h1 className="mb-2 text-xl font-bold">Add Mutation</h1>
4848

4949
<label>Mutation name:</label>
@@ -55,6 +55,7 @@ function AddMutationForm({
5555

5656
<label>Mutation type:</label>
5757
<Dropdown
58+
className="max-w-55"
5859
value={mutation.mutationType?.name ?? ''}
5960
onChange={(e) => {
6061
const mutationType = mutations.mutations.find((mutationToFind) => mutationToFind.name === e) ?? null
@@ -201,15 +202,18 @@ function MutationInputField({
201202
}
202203

203204
return (
204-
<div className="flex items-start gap-2">
205-
<div className="flex-1">
205+
<div className="flex flex-col gap-2">
206+
<div className="flex items-center gap-2">
206207
{mutationInput.label && <label className="mb-1 block">{mutationInput.label}</label>}
208+
{showDelete && onDelete && <DeleteButton onClick={onDelete} />}
209+
</div>
207210

211+
<div>
208212
{mutationInput.type === 'source' && (
209213
<Dropdown
210214
value={value.sourceId ?? ''}
211215
onChange={handleSourceChange}
212-
className="mb-4"
216+
className="mb-4 max-w-55"
213217
options={Object.fromEntries([
214218
...(mutationInput.allowDefaultValue ? [['defaultValue', 'defaultValue']] : []),
215219
...sources.map((source) => [source.id, source.label]),
@@ -229,8 +233,6 @@ function MutationInputField({
229233
/>
230234
)}
231235
</div>
232-
233-
{showDelete && onDelete && <DeleteButton onClick={onDelete} />}
234236
</div>
235237
)
236238
}

‎src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert
2626
>
2727
{/* Left: Label */}
2828
<div className="group/hoverInfoGroup flex flex-1 items-center overflow-hidden">
29-
<HoverInfo info={data.outputLabel ?? ''} className="-translate-y-10!" />
29+
<HoverInfo info={data.outputLabel ?? ''} className="-translate-x-15! -translate-y-8!" />
3030

3131
<div className="truncate text-xs text-white drop-shadow-sm">{data.outputLabel}</div>
3232
</div>

‎src/main/frontend/app/components/inputs/dropdown.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export default function Dropdown({
184184
isOpen ? 'bg-selected' : 'hover:bg-hover',
185185
)}
186186
>
187-
<span className={clsx('text-foreground block truncate sm:text-sm', !selectedValue && 'text-gray-400')}>
187+
<span className={clsx('text-foreground flex-1 truncate sm:text-sm', !selectedValue && 'text-gray-400')}>
188188
{getSelectedLabel()}
189189
</span>
190190
<AltArrowDownIcon className={clsx('fill-foreground h-4 w-4', isOpen && 'rotate-180')} />
@@ -193,7 +193,10 @@ export default function Dropdown({
193193
{isOpen && !disabled && (
194194
<ul
195195
ref={listReference}
196-
className="border-border text-foreground bg-background absolute z-200 mt-1 max-h-60 overflow-auto rounded-md border py-1 shadow-lg"
196+
className={clsx(
197+
'border-border text-foreground bg-background absolute z-200 mt-1 max-h-60 overflow-auto rounded-md border py-1 shadow-lg',
198+
className,
199+
)}
197200
>
198201
{optionsArray.length > 0 ? (
199202
Object.entries(options).map(([value, label], index) => (

‎src/main/frontend/app/routes/datamapper/property-list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
334334
<div className="absolute right-[65%] flex flex-row items-center justify-between px-45">
335335
<h1 className="text-l font-semibold">Source: {config.formatTypes.source?.name}</h1>
336336
</div>
337-
<div className="absolute right-[45%] left-[45%] flex flex-row items-center justify-between">
337+
<div className="absolute right-[45%] left-[45%] z-10 flex flex-row items-center justify-between">
338338
<GenerateButton highlightUnset={flow.highlightUnset} mappingListConfig={config} />
339339
</div>
340340
<div className="absolute left-[65%] flex flex-row items-center justify-between px-45">

0 commit comments

Comments
 (0)