UI Create Peer: replace drop down with columns of buttons (#1611)

Reduces clicks, with dropdown it's: 1. click dropdown 2. scroll list 3. click peer type 4. click create Now user only needs one click Co-authored-by: Amogh-Bharadwaj <[email protected]>
PeerDB-io · Apr 17, 2024 · c73853d · c73853d
1 parent 4027a4e
commit c73853d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 80 deletions.
diff --git a/ui/app/peers/create/page.tsx b/ui/app/peers/create/page.tsx
@@ -1,16 +1,10 @@
 'use client';
 import SelectSource from '@/components/SelectSource';
 import { Action } from '@/lib/Action';
-import { Button } from '@/lib/Button';
-import { ButtonGroup } from '@/lib/ButtonGroup';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
-import { RowWithSelect } from '@/lib/Layout';
-import Link from 'next/link';
-import { useState } from 'react';
 
 export default function CreatePeer() {
-  const [peerType, setPeerType] = useState<string>('');
   return (
     <div
       style={{
@@ -43,27 +37,7 @@ export default function CreatePeer() {
           Learn about peers
         </Action>
 
-        <RowWithSelect
-          label={
-            <Label as='label' htmlFor='source'>
-              Data source
-            </Label>
-          }
-          action={
-            <SelectSource peerType={peerType} setPeerType={setPeerType} />
-          }
-        />
-
-        <ButtonGroup style={{ marginTop: '2rem' }}>
-          <Button as={Link} href='/peers'>
-            Cancel
-          </Button>
-          <Link href={`/peers/create/${peerType}`}>
-            <Button disabled={!peerType} variant='normalSolid'>
-              Continue
-            </Button>
-          </Link>
-        </ButtonGroup>
+        <SelectSource />
       </div>
     </div>
   );

diff --git a/ui/app/utils/titlecase.ts b/ui/app/utils/titlecase.ts
@@ -1,4 +1,5 @@
 function TitleCase(input: string): string {
+  if (input == 'BIGQUERY') return 'BigQuery';
   return input
     .toLowerCase()
     .replace(/\b\w/g, function (char) {

diff --git a/ui/components/SelectSource.tsx b/ui/components/SelectSource.tsx
@@ -1,65 +1,81 @@
 'use client';
-import SelectTheme from '@/app/styles/select';
 import TitleCase from '@/app/utils/titlecase';
-import { DBType } from '@/grpc_generated/peers';
+import { Button } from '@/lib/Button/Button';
 import Image from 'next/image';
-import { Dispatch, SetStateAction } from 'react';
-import ReactSelect from 'react-select';
+import Link from 'next/link';
 import { DBTypeToImageMapping } from './PeerComponent';
 
-interface SelectSourceProps {
-  peerType: string;
-  setPeerType: Dispatch<SetStateAction<string>>;
-}
-
-function SourceLabel({ value, label }: { value: string; label: string }) {
+function SourceLabel({ label }: { label: string }) {
   const peerLogo = DBTypeToImageMapping(label);
   return (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Image src={peerLogo} alt='peer' height={15} width={15} />
-      <div style={{ marginLeft: 10 }}>{TitleCase(label)}</div>
-    </div>
+    <Button
+      as={Link}
+      href={`/peers/create/${label}`}
+      style={{
+        justifyContent: 'space-between',
+        padding: '0.5rem',
+        backgroundColor: 'white',
+        borderRadius: '1rem',
+        border: '1px solid rgba(0,0,0,0.1)',
+      }}
+    >
+      <Image
+        src={peerLogo}
+        alt='peer'
+        width={20}
+        height={20}
+        objectFit='cover'
+      />
+      <div>{TitleCase(label)}</div>
+    </Button>
   );
 }
 
-export default function SelectSource({
-  peerType,
-  setPeerType,
-}: SelectSourceProps) {
-  const dbTypes = Object.values(DBType)
-    .filter(
-      (value): value is string =>
-        typeof value === 'string' &&
-        (value === 'POSTGRESQL' ||
-          value === 'SNOWFLAKE' ||
-          value === 'BIGQUERY' ||
-          value === 'S3' ||
-          value === 'CLICKHOUSE' ||
-          value === 'KAFKA' ||
-          value === 'EVENTHUBS' ||
-          value === 'PUBSUB' ||
-          value === 'ELASTICSEARCH')
-    )
-    .map((value) => ({ label: value, value }));
+const dbTypes = [
+  [
+    'Postgres',
+    'POSTGRESQL',
+    'RDS POSTGRESQL',
+    'GOOGLE CLOUD POSTGRESQL',
+    'AZURE FLEXIBLE POSTGRESQL',
+    'TEMBO',
+    'CRUNCHY POSTGRES',
+  ],
+  ['Warehouses', 'SNOWFLAKE', 'BIGQUERY', 'S3', 'CLICKHOUSE', 'ELASTICSEARCH'],
+  ['Queues', 'KAFKA', 'EVENTHUBS', 'PUBSUB'],
+];
 
-  dbTypes.push(
-    { value: 'POSTGRESQL', label: 'POSTGRESQL' },
-    { value: 'POSTGRESQL', label: 'RDS POSTGRESQL' },
-    { value: 'POSTGRESQL', label: 'GOOGLE CLOUD POSTGRESQL' },
-    { value: 'POSTGRESQL', label: 'AZURE FLEXIBLE POSTGRESQL' },
-    { value: 'POSTGRESQL', label: 'TEMBO' },
-    { value: 'POSTGRESQL', label: 'CRUNCHY POSTGRES' }
-  );
-  return (
-    <ReactSelect
-      className='w-full'
-      placeholder='Select a source'
-      options={dbTypes}
-      defaultValue={dbTypes.find((opt) => opt.label === peerType)}
-      onChange={(val, _) => val && setPeerType(val.label)}
-      formatOptionLabel={SourceLabel}
-      theme={SelectTheme}
-      getOptionValue={(option) => option.label}
-    />
-  );
+const gridContainerStyle = {
+  display: 'flex',
+  gap: '20px',
+  flexWrap: 'wrap',
+  border: 'solid #18794e',
+  borderRadius: '20px',
+  position: 'relative',
+  padding: '20px',
+  marginTop: '20px',
+} as const;
+const gridHeaderStyle = {
+  position: 'absolute',
+  top: '-15px',
+  height: '30px',
+  display: 'flex',
+  alignItems: 'center',
+  color: '#fff',
+  backgroundColor: '#18794e',
+  borderRadius: '15px',
+  marginLeft: '10px',
+  paddingLeft: '10px',
+  paddingRight: '10px',
+} as const;
+
+export default function SelectSource() {
+  return dbTypes.map(([category, ...items]) => (
+    <div key={category} style={gridContainerStyle}>
+      <div style={gridHeaderStyle}>{category}</div>
+      {items.map((item) => (
+        <SourceLabel key={item} label={item} />
+      ))}
+    </div>
+  ));
 }