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

app/peers/edit was placeholder code, so deleted it instead Fixes #646 Effort began in #645 but fixes need to be merged quickly, so no time to split out this PR & have a clean switch from one select component to the other
PeerDB-io · Nov 13, 2023 · 83789cc · 83789cc
1 parent fdf7bbc
commit 83789cc
Show file tree

Hide file tree

Showing 23 changed files with 139 additions and 774 deletions.
diff --git a/ui/app/mirrors/create/cdc.tsx b/ui/app/mirrors/create/cdc.tsx
@@ -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';
@@ -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:
@@ -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}

diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
@@ -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';
@@ -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>('');
@@ -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,
@@ -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 {
@@ -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,
       }));
     }
   };
@@ -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.'
@@ -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.'

diff --git a/ui/app/mirrors/create/qrep.tsx b/ui/app/mirrors/create/qrep.tsx
@@ -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';
@@ -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,
@@ -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);
@@ -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={
@@ -239,8 +242,8 @@ export default function QRepConfigForm({
                               : sourceTables
                           }
                         />
-                      </div>
-                    )}
+                      )}
+                    </div>
                     {setting.tips && (
                       <InfoPopover
                         tips={setting.tips}

diff --git a/ui/app/mirrors/create/tablemapping.tsx b/ui/app/mirrors/create/tablemapping.tsx
@@ -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...'}