Skip to content

Commit dac6825

Browse files
serprexserprex
committed
Replace @radix-ui/react-select with react-select
app/peers/edit was placeholder code, so deleted it instead Fixes #646
1 parent 173571e commit dac6825

File tree

7 files changed

+87
-422
lines changed

7 files changed

+87
-422
lines changed

‎ui/app/mirrors/create/cdc.tsx

+7-11
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { QRepSyncMode } from '@/grpc_generated/flow';
44
import { DBType } from '@/grpc_generated/peers';
55
import { Label } from '@/lib/Label';
66
import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
7-
import { Select, SelectItem } from '@/lib/Select';
87
import { Switch } from '@/lib/Switch';
98
import { TextField } from '@/lib/TextField';
109
import { Dispatch, SetStateAction } from 'react';
10+
import ReactSelect from 'react-select';
1111
import { InfoPopover } from '../../../components/InfoPopover';
1212
import { CDCConfig, MirrorSetter, TableMapRow } from '../../dto/MirrorsDTO';
1313
import { MirrorSetting } from './helpers/common';
@@ -133,7 +133,7 @@ export default function CDCConfigForm({
133133
alignItems: 'center',
134134
}}
135135
>
136-
<Select
136+
<ReactSelect
137137
placeholder={`Select a sync mode`}
138138
onValueChange={(val) => handleChange(val, setting)}
139139
disabled={setToDefault(setting)}
@@ -142,15 +142,11 @@ export default function CDCConfigForm({
142142
? defaultSyncMode(mirrorConfig.destination?.type)
143143
: undefined
144144
}
145-
>
146-
{['AVRO', 'Copy with Binary'].map((item, id) => {
147-
return (
148-
<SelectItem key={id} value={item.toString()}>
149-
{item.toString()}
150-
</SelectItem>
151-
);
152-
})}
153-
</Select>
145+
options={['AVRO', 'Copy with Binary'].map((value) => ({
146+
label: value,
147+
value,
148+
}))}
149+
/>
154150
{setting.tips && (
155151
<InfoPopover
156152
tips={setting.tips}

‎ui/app/mirrors/create/page.tsx

+28-23
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ import {
1313
} from '@/lib/Layout';
1414
import { Panel } from '@/lib/Panel';
1515
import { RadioButton, RadioButtonGroup } from '@/lib/RadioButtonGroup';
16-
import { Select, SelectItem } from '@/lib/Select';
1716
import { TextField } from '@/lib/TextField';
1817
import { Divider } from '@tremor/react';
1918
import Image from 'next/image';
2019
import Link from 'next/link';
2120
import { useRouter } from 'next/navigation';
2221
import { useEffect, useState } from 'react';
22+
import ReactSelect from 'react-select';
2323
import { InfoPopover } from '../../../components/InfoPopover';
2424
import { CDCConfig, TableMapRow } from '../../dto/MirrorsDTO';
2525
import CDCConfigForm from './cdc';
@@ -30,6 +30,27 @@ import { qrepSettings } from './helpers/qrep';
3030
import QRepConfigForm from './qrep';
3131
import QRepQuery from './query';
3232

33+
function getPeerValue(peer) {
34+
return peer.name;
35+
}
36+
37+
function getPeerLabel(peer) {
38+
return (
39+
<div style={{ display: 'flex', alignItems: 'center' }}>
40+
<div style={{ width: '5%', height: '5%' }}>
41+
<Image
42+
src={DBTypeToImageMapping(peer.type)}
43+
alt='me'
44+
width={500}
45+
height={500}
46+
style={{ objectFit: 'cover' }}
47+
/>
48+
</div>
49+
<div style={{ marginLeft: '1rem' }}>{peer.name}</div>
50+
</div>
51+
);
52+
}
53+
3354
export default function CreateMirrors() {
3455
const router = useRouter();
3556
const [mirrorName, setMirrorName] = useState<string>('');
@@ -287,31 +308,15 @@ export default function CreateMirrors() {
287308
alignItems: 'center',
288309
}}
289310
>
290-
<Select
311+
<ReactSelect
291312
placeholder='Select the source peer'
292313
onValueChange={(val) => handlePeer(val, 'src')}
293-
>
294-
{(
314+
options={
295315
peers.filter((peer) => peer.type == DBType.POSTGRES) ?? []
296-
).map((peer, id) => {
297-
return (
298-
<SelectItem key={id} value={peer.name}>
299-
<div style={{ display: 'flex', alignItems: 'center' }}>
300-
<div style={{ width: '5%', height: '5%' }}>
301-
<Image
302-
src={DBTypeToImageMapping(peer.type)}
303-
alt='me'
304-
width={500}
305-
height={500}
306-
style={{ objectFit: 'cover' }}
307-
/>
308-
</div>
309-
<div style={{ marginLeft: '1rem' }}>{peer.name}</div>
310-
</div>
311-
</SelectItem>
312-
);
313-
})}
314-
</Select>
316+
}
317+
getOptionValue={getPeerValue}
318+
getOptionLabel={getPeerLabel}
319+
/>
315320
<InfoPopover
316321
tips={
317322
'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'

‎ui/app/mirrors/create/qrep.tsx

+24-30
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { QRepConfig, QRepSyncMode, QRepWriteType } from '@/grpc_generated/flow';
44
import { DBType } from '@/grpc_generated/peers';
55
import { Label } from '@/lib/Label';
66
import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
7-
import { Select, SelectItem } from '@/lib/Select';
87
import { Switch } from '@/lib/Switch';
98
import { TextField } from '@/lib/TextField';
109
import { Tooltip } from '@/lib/Tooltip';
@@ -192,33 +191,28 @@ export default function QRepConfigForm({
192191
alignItems: 'center',
193192
}}
194193
>
195-
{setting.label.includes('Sync') ||
196-
setting.label.includes('Write') ? (
197-
<Select
198-
placeholder={`Select a mode`}
199-
onValueChange={(val) => handleChange(val, setting)}
200-
disabled={setToDefault(setting)}
201-
value={
202-
setToDefault(setting)
203-
? defaultSyncMode(
204-
mirrorConfig.destinationPeer?.type
205-
)
206-
: undefined
207-
}
208-
>
209-
{(setting.label.includes('Sync')
210-
? ['AVRO', 'Copy with Binary']
211-
: ['Append', 'Upsert', 'Overwrite']
212-
).map((item, id) => {
213-
return (
214-
<SelectItem key={id} value={item.toString()}>
215-
{item.toString()}
216-
</SelectItem>
217-
);
218-
})}
219-
</Select>
220-
) : (
221-
<div style={{ width: '100%' }}>
194+
<div style={{ width: '100%' }}>
195+
{setting.label.includes('Sync') ||
196+
setting.label.includes('Write') ? (
197+
<ReactSelect
198+
placeholder={`Select a mode`}
199+
onValueChange={(val) => handleChange(val, setting)}
200+
isDisabled={setToDefault(setting)}
201+
defaultValue={
202+
setToDefault(setting)
203+
? defaultSyncMode(
204+
mirrorConfig.destinationPeer?.type
205+
)
206+
: undefined
207+
}
208+
options={(setting.label.includes('Sync')
209+
? ['AVRO', 'Copy with Binary']
210+
: ['Append', 'Upsert', 'Overwrite']
211+
).map((value) => {
212+
label: value, value;
213+
})}
214+
/>
215+
) : (
222216
<ReactSelect
223217
placeholder={
224218
setting.label.includes('Column')
@@ -239,8 +233,8 @@ export default function QRepConfigForm({
239233
: sourceTables
240234
}
241235
/>
242-
</div>
243-
)}
236+
)}
237+
</div>
244238
{setting.tips && (
245239
<InfoPopover
246240
tips={setting.tips}

0 commit comments

Comments
 (0)