Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace @radix-ui/react-select with react-select #647

Merged
merged 6 commits into from
Nov 13, 2023
Merged

Replace @radix-ui/react-select with react-select #647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dac6825
Replace @radix-ui/react-select with react-select
serprex Nov 11, 2023
8744906
Rip out Select from ui/lib
serprex Nov 11, 2023
3240310
missed a spot
serprex Nov 11, 2023
4bcff9c
get past typecheck
serprex Nov 11, 2023
22d6641
fixes from testing
serprex Nov 11, 2023
ecd6f97
Merge branch 'main' into remove-radix-ui-select
serprex Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions ui/app/mirrors/create/cdc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { QRepSyncMode } from '@/grpc_generated/flow';
import { DBType } from '@/grpc_generated/peers';
import { Label } from '@/lib/Label';
import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
import { Select, SelectItem } from '@/lib/Select';
import { Switch } from '@/lib/Switch';
import { TextField } from '@/lib/TextField';
import { Dispatch, SetStateAction } from 'react';
import ReactSelect from 'react-select';
import { InfoPopover } from '../../../components/InfoPopover';
import { CDCConfig, MirrorSetter, TableMapRow } from '../../dto/MirrorsDTO';
import { MirrorSetting } from './helpers/common';
Expand All @@ -23,6 +23,11 @@ interface MirrorConfigProps {
setSchema: Dispatch<SetStateAction<string>>;
}

const SyncModeOptions = ['AVRO', 'Copy with Binary'].map((value) => ({
label: value,
value,
}));

export const defaultSyncMode = (dtype: DBType | undefined) => {
switch (dtype) {
case DBType.POSTGRES:
Expand Down Expand Up @@ -133,24 +138,23 @@ export default function CDCConfigForm({
alignItems: 'center',
}}
>
<Select
placeholder={`Select a sync mode`}
onValueChange={(val) => handleChange(val, setting)}
disabled={setToDefault(setting)}
<ReactSelect
placeholder='Select a sync mode'
onChange={(val, action) =>
val && handleChange(val.value, setting)
}
isDisabled={setToDefault(setting)}
value={
setToDefault(setting)
? defaultSyncMode(mirrorConfig.destination?.type)
? SyncModeOptions.find(
(opt) =>
opt.value ===
defaultSyncMode(mirrorConfig.destination?.type)
)
: undefined
}
>
{['AVRO', 'Copy with Binary'].map((item, id) => {
return (
<SelectItem key={id} value={item.toString()}>
{item.toString()}
</SelectItem>
);
})}
</Select>
options={SyncModeOptions}
/>
{setting.tips && (
<InfoPopover
tips={setting.tips}
Expand Down
99 changes: 44 additions & 55 deletions ui/app/mirrors/create/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
} from '@/lib/Layout';
import { Panel } from '@/lib/Panel';
import { RadioButton, RadioButtonGroup } from '@/lib/RadioButtonGroup';
import { Select, SelectItem } from '@/lib/Select';
import { TextField } from '@/lib/TextField';
import { Divider } from '@tremor/react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import ReactSelect from 'react-select';
import { InfoPopover } from '../../../components/InfoPopover';
import { CDCConfig, TableMapRow } from '../../dto/MirrorsDTO';
import CDCConfigForm from './cdc';
Expand All @@ -30,6 +30,27 @@ import { qrepSettings } from './helpers/qrep';
import QRepConfigForm from './qrep';
import QRepQuery from './query';

function getPeerValue(peer: Peer) {
return peer.name;
}

function getPeerLabel(peer: Peer) {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: '5%', height: '5%' }}>
<Image
src={DBTypeToImageMapping(peer.type)}
alt='me'
width={500}
height={500}
style={{ objectFit: 'cover' }}
/>
</div>
<div style={{ marginLeft: '1rem' }}>{peer.name}</div>
</div>
);
}

export default function CreateMirrors() {
const router = useRouter();
const [mirrorName, setMirrorName] = useState<string>('');
Expand Down Expand Up @@ -73,10 +94,10 @@ export default function CreateMirrors() {
router.push('/mirrors');
};

const handlePeer = (val: string, peerEnd: 'src' | 'dst') => {
const stateVal = peers.find((peer) => peer.name === val)!;
const handlePeer = (peer: Peer | null, peerEnd: 'src' | 'dst') => {
if (!peer) return;
if (peerEnd === 'dst') {
if (stateVal.type === DBType.POSTGRES) {
if (peer.type === DBType.POSTGRES) {
setConfig((curr) => {
return {
...curr,
Expand All @@ -86,8 +107,8 @@ export default function CreateMirrors() {
};
});
} else if (
stateVal.type === DBType.SNOWFLAKE ||
stateVal.type === DBType.BIGQUERY
peer.type === DBType.SNOWFLAKE ||
peer.type === DBType.BIGQUERY
) {
setConfig((curr) => {
return {
Expand All @@ -100,14 +121,14 @@ export default function CreateMirrors() {
}
setConfig((curr) => ({
...curr,
destination: stateVal,
destinationPeer: stateVal,
destination: peer,
destinationPeer: peer,
}));
} else {
setConfig((curr) => ({
...curr,
source: stateVal,
sourcePeer: stateVal,
source: peer,
sourcePeer: peer,
}));
}
};
Expand Down Expand Up @@ -287,31 +308,15 @@ export default function CreateMirrors() {
alignItems: 'center',
}}
>
<Select
<ReactSelect
placeholder='Select the source peer'
onValueChange={(val) => handlePeer(val, 'src')}
>
{(
onChange={(val, action) => handlePeer(val, 'src')}
options={
peers.filter((peer) => peer.type == DBType.POSTGRES) ?? []
).map((peer, id) => {
return (
<SelectItem key={id} value={peer.name}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: '5%', height: '5%' }}>
<Image
src={DBTypeToImageMapping(peer.type)}
alt='me'
width={500}
height={500}
style={{ objectFit: 'cover' }}
/>
</div>
<div style={{ marginLeft: '1rem' }}>{peer.name}</div>
</div>
</SelectItem>
);
})}
</Select>
}
getOptionValue={getPeerValue}
formatOptionLabel={getPeerLabel}
/>
<InfoPopover
tips={
'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'
Expand Down Expand Up @@ -339,29 +344,13 @@ export default function CreateMirrors() {
alignItems: 'center',
}}
>
<Select
<ReactSelect
placeholder='Select the destination peer'
onValueChange={(val) => handlePeer(val, 'dst')}
>
{(peers ?? []).map((peer, id) => {
return (
<SelectItem key={id} value={peer.name}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: '5%', height: '5%' }}>
<Image
src={DBTypeToImageMapping(peer.type)}
alt='me'
width={500}
height={500}
style={{ objectFit: 'cover' }}
/>
</div>
<div style={{ marginLeft: '1rem' }}>{peer.name}</div>
</div>
</SelectItem>
);
})}
</Select>
onChange={(val, action) => handlePeer(val, 'dst')}
options={peers ?? []}
getOptionValue={getPeerValue}
formatOptionLabel={getPeerLabel}
/>
<InfoPopover
tips={
'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'
Expand Down
77 changes: 40 additions & 37 deletions ui/app/mirrors/create/qrep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { QRepConfig, QRepSyncMode, QRepWriteType } from '@/grpc_generated/flow';
import { DBType } from '@/grpc_generated/peers';
import { Label } from '@/lib/Label';
import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
import { Select, SelectItem } from '@/lib/Select';
import { Switch } from '@/lib/Switch';
import { TextField } from '@/lib/TextField';
import { Tooltip } from '@/lib/Tooltip';
Expand All @@ -30,6 +29,15 @@ interface QRepConfigProps {
xmin?: boolean;
}

const SyncModes = ['AVRO', 'Copy with Binary'].map((value) => ({
label: value,
value,
}));
const WriteModes = ['Append', 'Upsert', 'Overwrite'].map((value) => ({
label: value,
value,
}));

export default function QRepConfigForm({
settings,
mirrorConfig,
Expand Down Expand Up @@ -114,10 +122,9 @@ export default function QRepConfigForm({

const handleSourceChange = (
val: string | undefined,
action: string,
setting: MirrorSetting
) => {
if (action == 'select-option' && val) {
if (val) {
if (setting.label === 'Table') {
setter((curr) => ({ ...curr, destinationTableIdentifier: val }));
loadColumnOptions(val);
Expand Down Expand Up @@ -192,45 +199,41 @@ export default function QRepConfigForm({
alignItems: 'center',
}}
>
{setting.label.includes('Sync') ||
setting.label.includes('Write') ? (
<Select
placeholder={`Select a mode`}
onValueChange={(val) => handleChange(val, setting)}
disabled={setToDefault(setting)}
value={
setToDefault(setting)
? defaultSyncMode(
mirrorConfig.destinationPeer?.type
)
: undefined
}
>
{(setting.label.includes('Sync')
? ['AVRO', 'Copy with Binary']
: ['Append', 'Upsert', 'Overwrite']
).map((item, id) => {
return (
<SelectItem key={id} value={item.toString()}>
{item.toString()}
</SelectItem>
);
})}
</Select>
) : (
<div style={{ width: '100%' }}>
<div style={{ width: '100%' }}>
{setting.label.includes('Sync') ||
setting.label.includes('Write') ? (
<ReactSelect
placeholder='Select a mode'
onChange={(val, action) =>
val && handleChange(val.value, setting)
}
isDisabled={setToDefault(setting)}
defaultValue={
setToDefault(setting)
? ((mode) =>
SyncModes.find((opt) => opt.value === mode) ||
WriteModes.find((opt) => opt.value === mode))(
defaultSyncMode(
mirrorConfig.destinationPeer?.type
)
)
: undefined
}
options={
setting.label.includes('Sync')
? SyncModes
: WriteModes
}
/>
) : (
<ReactSelect
placeholder={
setting.label.includes('Column')
? 'Select a column'
: 'Select a table'
}
onChange={(val, action) =>
handleSourceChange(
val?.value,
action.action,
setting
)
handleSourceChange(val?.value, setting)
}
isLoading={loading}
options={
Expand All @@ -239,8 +242,8 @@ export default function QRepConfigForm({
: sourceTables
}
/>
</div>
)}
)}
</div>
{setting.tips && (
<InfoPopover
tips={setting.tips}
Expand Down
6 changes: 3 additions & 3 deletions ui/app/mirrors/create/tablemapping.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,9 +160,9 @@ const TableMapping = ({
<ReactSelect
placeholder='Select a schema'
onChange={(val, action) => {
if (action.action == 'select-option') {
setSchema(val?.value || '');
getTablesOfSchema(val?.value || '');
if (val) {
setSchema(val.value || '');
getTablesOfSchema(val.value || '');
}
}}
defaultInputValue={schema.length > 0 ? schema : 'Loading...'}
Expand Down
Loading