chore: update table editor input and schema selector styling (#21486)

* init input and button changes

* clean up

* button now active state when dropdown or popover active

* Update TableEditorMenu.tsx

* Update TableEditorMenu.tsx

* fix hover issues

* Update SchemaSelector.tsx

apps/database-new/package.json

@@ -21,7 +21,7 @@
     "dayjs": "^1.11.10",
     "eslint-config-next": "^14.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.292.0",
+    "lucide-react": "^0.338.0",
     "next": "^14.0.3",
     "openai": "^4.17.0",
     "react": "^18.2.0",

apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx

@@ -129,7 +129,7 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
         'py-1 px-2',
         'text-light',
         'rounded-md',
-        isActive ? 'text-foreground bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
+        isActive ? 'bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
         'group',
         'transition'
       )}
@@ -177,11 +177,16 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
           isActive && 'text-foreground'
         )}
       >
-        {/* only show tooltips if required, to reduce noise */}
-        <span className="truncate text-sm text-foreground-light group-hover:text-foreground transition">
+        <span
+          className={cn(
+            isActive ? 'text-foreground' : 'text-foreground-light group-hover:text-foreground',
+            'text-sm',
+            'transition',
+            'truncate'
+          )}
+        >
           {entity.name}
         </span>
-
         {entity.type === ENTITY_TYPE.TABLE && !entity.rls_enabled && (
           <Unlock
             size={14}

apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx

@@ -1,9 +1,8 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { AnimatePresence, motion } from 'framer-motion'
 import { partition } from 'lodash'
-import { Loader2 } from 'lucide-react'
+import { Plus, Search } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
@@ -18,9 +17,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
   IconChevronsDown,
-  IconPlusCircle,
-  IconSearch,
-  IconX,
+  Input_Shadcn_,
   cn,
 } from 'ui'
 
@@ -119,197 +116,139 @@ const TableEditorMenu = () => {
   return (
     <>
       <div
-        className="pt-5 flex flex-col flex-grow space-y-3 h-full"
+        className="pt-5 flex flex-col flex-grow gap-5 h-full"
         style={{ maxHeight: 'calc(100vh - 48px)' }}
       >
-        <SchemaSelector
-          className="mx-4 h-7"
-          selectedSchemaName={snap.selectedSchemaName}
-          onSelectSchema={(name: string) => {
-            setSearchText('')
-            snap.setSelectedSchemaName(name)
-            router.push(`/project/${project?.ref}/editor`)
-          }}
-          onSelectCreateSchema={() => snap.onAddSchema()}
-        />
+        <div className="flex flex-col gap-1">
+          <SchemaSelector
+            className="mx-4 h-7"
+            selectedSchemaName={snap.selectedSchemaName}
+            onSelectSchema={(name: string) => {
+              setSearchText('')
+              snap.setSelectedSchemaName(name)
+              router.push(`/project/${project?.ref}/editor`)
+            }}
+            onSelectCreateSchema={() => snap.onAddSchema()}
+          />
 
-        <div className="grid gap-3 mx-4 zans">
-          {!isLocked ? (
-            <Tooltip.Root delayDuration={0}>
-              <Tooltip.Trigger className="w-full">
-                <Button
-                  asChild
-                  block
-                  disabled={!canCreateTables}
-                  size="tiny"
-                  icon={
-                    <div className="text-foreground-lighter">
-                      <IconPlusCircle size={14} strokeWidth={1.5} />
-                    </div>
-                  }
-                  type="default"
-                  className="justify-start h-7"
-                  onClick={snap.onAddTable}
-                >
-                  <span>New table</span>
-                </Button>
-              </Tooltip.Trigger>
-              {!canCreateTables && (
-                <Tooltip.Portal>
-                  <Tooltip.Content side="bottom">
-                    <Tooltip.Arrow className="radix-tooltip-arrow" />
-                    <div
-                      className={[
-                        'rounded bg-alternative py-1 px-2 leading-none shadow',
-                        'border border-background',
-                      ].join(' ')}
-                    >
-                      <span className="text-xs text-foreground">
-                        You need additional permissions to create tables
-                      </span>
-                    </div>
-                  </Tooltip.Content>
-                </Tooltip.Portal>
-              )}
-            </Tooltip.Root>
-          ) : (
-            <Alert_Shadcn_>
-              <AlertTitle_Shadcn_ className="text-sm">Viewing protected schema</AlertTitle_Shadcn_>
-              <AlertDescription_Shadcn_ className="text-xs">
-                <p className="mb-2">
-                  This schema is managed by Supabase and is read-only through the table editor
-                </p>
-                <Button type="default" size="tiny" onClick={() => setShowModal(true)}>
-                  Learn more
-                </Button>
-              </AlertDescription_Shadcn_>
-            </Alert_Shadcn_>
-          )}
-        </div>
-
-        <div className="flex flex-auto flex-col gap-2 pb-4 px-2">
-          <div className="relative">
-            <div className="relative flex items-center text-foreground-lighter">
-              <AnimatePresence>
-                {isSearchOpen && (
-                  <motion.div
-                    initial={{ x: 10, opacity: 0 }}
-                    animate={{ x: 0, opacity: 1, transition: { duration: 0.2 } }}
-                    exit={{ x: 20, opacity: 0, transition: { duration: 0 } }}
-                    className="absolute top-0 left-2"
+          <div className="grid gap-3 mx-4">
+            {!isLocked ? (
+              <Tooltip.Root delayDuration={0}>
+                <Tooltip.Trigger className="w-full" asChild>
+                  <Button
+                    title="Create a new table"
+                    name="New table"
+                    block
+                    disabled={!canCreateTables}
+                    size="tiny"
+                    icon={<Plus size={14} strokeWidth={1.5} className="text-foreground-muted" />}
+                    type="default"
+                    className="justify-start"
+                    onClick={snap.onAddTable}
                   >
-                    <label htmlFor={'search-tables'} className="relative">
-                      <span className="sr-only">Search tables</span>
-                      <input
-                        id="search-tables"
-                        name="search-tables"
-                        type="text"
-                        placeholder="Search..."
-                        className={cn(
-                          'bg-default text-foreground rounded-none px-1 py-1 h-5 w-44 text-sm',
-                          'border-b outline-none ',
-                          'border-transparent focus:border-transparent focus:ring-2'
-                        )}
-                        onChange={(e) => {
-                          setSearchText(e.target.value.trim())
-                        }}
-                        value={searchText}
-                        ref={(el) => {
-                          inputRef.current = el
-                          if (el) {
-                            el.addEventListener('focus', handleSearchInputFocusChange)
-                            el.addEventListener('blur', handleSearchInputFocusChange)
-                          }
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Escape') {
-                            setIsSearchOpen(false)
-                            setSearchText('')
-                          }
-                          if (e.key === 'Backspace' && searchText.length === 0) {
-                            setIsSearchOpen(false)
-                          }
-                        }}
-                      />
-                      <div
-                        className={cn(
-                          'absolute -bottom-1 w-full h-px bg-border transition-colors',
-                          isSearchInputFocused && 'bg-border-stronger'
-                        )}
-                      ></div>
-                    </label>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-              <motion.button
-                onClick={
-                  !isSearchOpen
-                    ? () => expandSearch()
-                    : () => {
-                        setSearchText('')
-                        expandSearch()
-                      }
-                }
-                initial={{ x: 0 }}
-                animate={{ x: isSearchOpen ? 185 : 0, transition: { duration: 0 } }}
-                className="px-2 py-0.5 rounded-md mt-1 transition transform hover:scale-105 focus:ring-2 "
-              >
-                {isSearchOpen ? (
-                  isSearching ? (
-                    <Loader2
-                      className="w-4 h-4 animate-spin text-foreground"
-                      size={15}
-                      strokeWidth={1}
-                    />
-                  ) : (
-                    <IconX className={cn('w-4  h-4 hover:text-foreground transition-colors')} />
-                  )
-                ) : (
-                  <IconSearch className={cn('w-4 h-4 hover:text-foreground transition-colors')} />
-                )}
-              </motion.button>
-            </div>
-            <div className="flex gap-3 items-center absolute right-1 top-1.5">
-              <DropdownMenu>
-                <Tooltip.Root delayDuration={0}>
-                  <DropdownMenuTrigger asChild>
-                    <Tooltip.Trigger>
-                      <IconChevronsDown
-                        size={18}
-                        strokeWidth={1}
-                        className="text-foreground-lighter transition-colors hover:text-foreground"
-                      />
-                    </Tooltip.Trigger>
-                  </DropdownMenuTrigger>
+                    New table
+                  </Button>
+                </Tooltip.Trigger>
+                {!canCreateTables && (
                   <Tooltip.Portal>
-                    <Tooltip.Content
-                      side="bottom"
-                      className={[
-                        'rounded bg-alternative py-1 px-2 leading-none shadow',
-                        'border border-background text-xs',
-                      ].join(' ')}
-                    >
+                    <Tooltip.Content side="bottom">
                       <Tooltip.Arrow className="radix-tooltip-arrow" />
-                      Sort By
+                      <div
+                        className={[
+                          'rounded bg-alternative py-1 px-2 leading-none shadow',
+                          'border border-background',
+                        ].join(' ')}
+                      >
+                        <span className="text-xs text-foreground">
+                          You need additional permissions to create tables
+                        </span>
+                      </div>
                     </Tooltip.Content>
                   </Tooltip.Portal>
-                </Tooltip.Root>
-
-                <DropdownMenuContent side="bottom" align="start" className="w-48">
-                  <DropdownMenuRadioGroup
-                    value={sort}
-                    onValueChange={(value: any) => setSort(value)}
+                )}
+              </Tooltip.Root>
+            ) : (
+              <Alert_Shadcn_>
+                <AlertTitle_Shadcn_ className="text-sm">
+                  Viewing protected schema
+                </AlertTitle_Shadcn_>
+                <AlertDescription_Shadcn_ className="text-xs">
+                  <p className="mb-2">
+                    This schema is managed by Supabase and is read-only through the table editor
+                  </p>
+                  <Button type="default" size="tiny" onClick={() => setShowModal(true)}>
+                    Learn more
+                  </Button>
+                </AlertDescription_Shadcn_>
+              </Alert_Shadcn_>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-auto flex-col gap-2 pb-4 px-2">
+          <div className="flex items-center px-2 w-full gap-2">
+            <label htmlFor={'search-tables'} className="relative w-full">
+              <span className="sr-only">Search tables</span>
+              <Input_Shadcn_
+                id="search-tables"
+                name="search-tables"
+                type="text"
+                placeholder="Search tables..."
+                className={cn('h-[28px] w-full', 'text-xs', 'pl-7', 'w-full')}
+                onChange={(e) => {
+                  setSearchText(e.target.value.trim())
+                }}
+                value={searchText}
+                ref={(el) => {
+                  inputRef.current = el
+                  if (el) {
+                    el.addEventListener('focus', handleSearchInputFocusChange)
+                    el.addEventListener('blur', handleSearchInputFocusChange)
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape') {
+                    setIsSearchOpen(false)
+                    setSearchText('')
+                  }
+                }}
+              />
+              <Search
+                className="absolute left-2 top-2 text-foreground-muted"
+                size={14}
+                strokeWidth={1.5}
+              />
+            </label>
+            <DropdownMenu>
+              <Tooltip.Root delayDuration={0}>
+                <DropdownMenuTrigger asChild>
+                  <Tooltip.Trigger className="text-foreground-lighter transition-colors hover:text-foreground data-[state=open]:text-foreground">
+                    <IconChevronsDown size={18} strokeWidth={1} />
+                  </Tooltip.Trigger>
+                </DropdownMenuTrigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content
+                    side="bottom"
+                    className={[
+                      'rounded bg-alternative py-1 px-2 leading-none shadow',
+                      'border border-background text-xs',
+                    ].join(' ')}
                   >
-                    <DropdownMenuRadioItem key="alphabetical" value="alphabetical">
-                      Alphabetical
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem key="grouped-alphabetical" value="grouped-alphabetical">
-                      Entity Type
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
+                    <Tooltip.Arrow className="radix-tooltip-arrow" />
+                    Sort By
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+              <DropdownMenuContent side="bottom" align="end" className="w-48">
+                <DropdownMenuRadioGroup value={sort} onValueChange={(value: any) => setSort(value)}>
+                  <DropdownMenuRadioItem key="alphabetical" value="alphabetical">
+                    Alphabetical
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem key="grouped-alphabetical" value="grouped-alphabetical">
+                    Entity Type
+                  </DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
 
           {isLoading && (

apps/studio/components/ui/SchemaSelector.tsx

@@ -23,6 +23,7 @@ import {
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useSchemasQuery } from 'data/database/schemas-query'
+import { ChevronDownIcon, ChevronsUpDown } from 'lucide-react'
 
 interface SchemaSelectorProps {
   className?: string
@@ -65,16 +66,8 @@ const SchemaSelector = ({
   return (
     <div className={className}>
       {isSchemasLoading && (
-        <Button
-          type="outline"
-          className={`w-full [&>span]:w-full ${size === 'small' ? 'py-1.5' : ''}`}
-          size={size}
-          icon={<IconLoader className="animate-spin" size={12} />}
-          disabled={!!disabled}
-        >
-          <div className="w-full flex space-x-3 py-0.5">
-            <p className="text-xs text-foreground-light">Loading schemas...</p>
-          </div>
+        <Button type="default" className="justify-start" block size={size} loading>
+          Loading schemas...
         </Button>
       )}
 
@@ -98,15 +91,16 @@ const SchemaSelector = ({
             <Button
               size={size}
               disabled={disabled}
-              type="outline"
-              className={`w-full [&>span]:w-full ${size === 'small' ? 'py-1.5' : ''}`}
+              type="default"
+              // className="w-full justify-start"
+              className={`w-full [&>span]:w-full`}
               iconRight={
-                <IconCode className="text-foreground-light rotate-90" strokeWidth={2} size={12} />
+                <ChevronsUpDown className="text-foreground-muted" strokeWidth={2} size={14} />
               }
             >
-              <div className="w-full flex space-x-3 py-0.5">
-                <p className="text-xs text-foreground-light">schema</p>
-                <p className="text-xs">
+              <div className="w-full flex gap-1">
+                <p className="text-foreground-lighter">schema:</p>
+                <p className="text-foreground">
                   {selectedSchemaName === '*' ? 'All schemas' : selectedSchemaName}
                 </p>
               </div>

apps/studio/package.json

@@ -57,7 +57,7 @@
     "json-logic-js": "^2.0.2",
     "jsonrepair": "^3.2.3",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.167.0",
+    "lucide-react": "^0.338.0",
     "markdown-table": "=2.0.0",
     "mobx": "^6.10.2",
     "mobx-react-lite": "^4.0.5",

package-lock.json

@@ -44,7 +44,7 @@
         "dayjs": "^1.11.10",
         "eslint-config-next": "^14.1.0",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.292.0",
+        "lucide-react": "^0.338.0",
         "next": "^14.0.3",
         "openai": "^4.17.0",
         "react": "^18.2.0",
@@ -384,14 +384,6 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
       }
     },
-    "apps/database-new/node_modules/lucide-react": {
-      "version": "0.292.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.292.0.tgz",
-      "integrity": "sha512-rRgUkpEHWpa5VCT66YscInCQmQuPCB1RFRzkkxMxg4b+jaL0V12E3riWWR2Sh5OIiUhCwGW/ZExuEO4Az32E6Q==",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "apps/database-new/node_modules/next": {
       "version": "14.0.3",
       "resolved": "https://registry.npmjs.org/next/-/next-14.0.3.tgz",
@@ -808,7 +800,7 @@
         "json-logic-js": "^2.0.2",
         "jsonrepair": "^3.2.3",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.167.0",
+        "lucide-react": "^0.338.0",
         "markdown-table": "=2.0.0",
         "mobx": "^6.10.2",
         "mobx-react-lite": "^4.0.5",
@@ -24269,8 +24261,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.167.0",
-      "license": "ISC",
+      "version": "0.338.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.338.0.tgz",
+      "integrity": "sha512-Uq+vcn/gp6l01GpDH8SxY6eAvO6Ur2bSU39NxEEJt35OotnVCH5q26TZEVPtJf23gTAncXd3DJQqcezIm6HA7w==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
@@ -37633,7 +37626,7 @@
         "date-fns": "^2.30.0",
         "formik": "^2.2.9",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.167.0",
+        "lucide-react": "^0.338.0",
         "next-themes": "^0.2.1",
         "openai": "^4.17.0",
         "postcss": "^8.4.31",

packages/ui/package.json

@@ -61,7 +61,7 @@
     "date-fns": "^2.30.0",
     "formik": "^2.2.9",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.167.0",
+    "lucide-react": "^0.338.0",
     "next-themes": "^0.2.1",
     "openai": "^4.17.0",
     "postcss": "^8.4.31",

packages/ui/src/components/Button/Button.tsx

@@ -37,19 +37,27 @@ const buttonVariants = cva(
             text-white
             border-brand
             focus-visible:outline-brand-600
-            shadow-sm`,
+            shadow-sm
+            data-[state=open]:bg-brand-button/80
+            data-[state=open]:outline-brand-600
+            `,
         secondary: `
             bg-foreground
             text-background hover:text-border-stronger
             focus-visible:text-border-control
             border-foreground-light hover:border-foreground-lighter
             focus-visible:outline-border-strong
+            data-[state=open]:border-foreground-lighter
+            data-[state=open]:outline-border-strong
             shadow-sm`,
         default: `
             text-foreground
             bg-button hover:bg-selection
             border-button hover:border-button-hover
             focus-visible:outline-brand-600
+            data-[state=open]:bg-selection
+            data-[state=open]:outline-brand-600
+            data-[state=open]:border-button-hover
             shadow-sm`,
         alternative: `
             text-foreground
@@ -57,12 +65,18 @@ const buttonVariants = cva(
             border-brand-500
             focus-visible:border-brand-500
             focus-visible:outline-brand-600
+            data-[state=open]:bg-brand-500
+            data-[state=open]:border-brand-500
+            data-[state=open]:outline-brand-600
             shadow-sm`,
         outline: `
             text-foreground
             bg-transparent
             border-strong hover:border-stronger
-            focus-visible:outline-border-strong`,
+            focus-visible:outline-border-strong
+            data-[state=open]:border-stronger
+            data-[state=open]:outline-border-strong
+            `,
         dashed: `
             text-foreground
             border
@@ -70,6 +84,8 @@ const buttonVariants = cva(
             border-strong hover:border-stronger
             bg-transparent
             focus-visible:outline-border-strong
+            data-[state=open]:border-stronger
+            data-[state=open]:outline-border-strong
             shadow-sm`,
         link: `
             text-brand-600
@@ -79,12 +95,17 @@ const buttonVariants = cva(
             border-opacity-0
             bg-opacity-0
             shadow-none
-            focus-visible:outline-border-strong`,
+            focus-visible:outline-border-strong
+            data-[state=open]:bg-brand-400
+            data-[state=open]:outline-border-strong
+            `,
         text: `
             text-foreground
             hover:bg-surface-300
             shadow-none
             focus-visible:outline-border-strong
+            data-[state=open]:bg-surface-300
+            data-[state=open]:outline-border-strong
             border-transparent`,
         danger: `
             text-red-1100
@@ -93,6 +114,10 @@ const buttonVariants = cva(
             hover:bg-red-900
             hover:text-lo-contrast
             focus-visible:outline-red-700
+            data-[state=open]:border-red-900
+            data-[state=open]:bg-red-900
+            data-[state=open]:text-lo-contrast
+            data-[state=open]:outline-red-700
             shadow-sm`,
         warning: `
             text-amber-1100
@@ -101,6 +126,10 @@ const buttonVariants = cva(
             hover:bg-amber-900
             hover:text-hi-contrast
             focus-visible:outline-amber-700
+            data-[state=open]:border-amber-900
+            data-[state=open]:bg-amber-900
+            data-[state=open]:text-hi-contrast
+            data-[state=open]:outline-amber-700
             shadow-sm`,
       },
       block: {