diff --git a/apps/studio/AGENTS.md b/apps/studio/AGENTS.md index d007e5dc2bd..19fb5459f2d 100644 --- a/apps/studio/AGENTS.md +++ b/apps/studio/AGENTS.md @@ -83,7 +83,7 @@ Older Studio code predates some of these conventions. For new or modified code, - **Permissions**: `useAsyncCheckPermissions` from `hooks/misc/useCheckPermissions` (returns `can: true` when self-hosted). - **Gating**: `useIsFeatureEnabled` for product features, `useFlag` from `'common'` for feature flags — two different systems. - **Dates**: `dayjs` (plugins pre-loaded at both entries, `pages/_app.tsx` and `routes/__root.tsx`), not `date-fns`. **Toasts**: `toast` from `'sonner'`. -- **Import split**: `'ui'` = primitives, `'ui-patterns'` = composed patterns (`ConfirmationModal`, …), `@ui/*` = alias into `packages/ui/src`. Icons come from `lucide-react`. +- **Import split**: `'ui'` = primitives, `'ui-patterns'` = composed patterns (`ConfirmationModal`, …), `@ui/*` = alias into `packages/ui/src`. Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). - **New tables** use `@tanstack/react-table`; `react-data-grid` is banned for new code. - **Ad-hoc SQL** against the user's database goes through `executeSql` / `useExecuteSqlMutation` (`data/sql/execute-sql-mutation`). - **Confirmations**: `ConfirmationModal` / `TextConfirmModal` from `ui-patterns`, never `window.confirm`. Disabled buttons needing an explanation use `ButtonTooltip`; inline warnings use `Admonition`. diff --git a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx index 2ffc0353016..ad4ea1b20f3 100644 --- a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx +++ b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx @@ -1,5 +1,5 @@ import dayjs from 'dayjs' -import { ChevronDown } from 'lucide-react' +import { ChevronDownIcon } from 'lucide-react' import { useEffect, useRef, useState } from 'react' import type { RenderEditCellProps } from 'react-data-grid' import { @@ -153,7 +153,7 @@ function BaseEditor({ @@ -119,14 +119,14 @@ function ColumnIcon({ return ( - +

Foreign key relation:

{name}

- +

{foreignKey?.targetTableSchema}.{foreignKey?.targetTableName}. {foreignKey?.targetColumnName} diff --git a/apps/studio/components/grid/components/grid/ColumnOverlayItem.tsx b/apps/studio/components/grid/components/grid/ColumnOverlayItem.tsx index f48b9cedb47..45cf40cb7d2 100644 --- a/apps/studio/components/grid/components/grid/ColumnOverlayItem.tsx +++ b/apps/studio/components/grid/components/grid/ColumnOverlayItem.tsx @@ -1,4 +1,4 @@ -import { Key, Lightbulb, Link, Lock } from 'lucide-react' +import { KeyIcon, LightbulbIcon, LinkIcon, LockIcon } from 'lucide-react' import { useColumnHasIndexSuggestion } from '../../context/TableIndexAdvisorContext' import { ColumnType, SupaColumn } from '../../types' @@ -23,7 +23,7 @@ export function ColumnOverlayItem({ column }: ColumnOverlayItemProps) { {column.isPrimaryKey && (

- +
)} @@ -33,8 +33,10 @@ export function ColumnOverlayItem({ column }: ColumnOverlayItemProps) { {columnFormat} {columnFormat === 'bytea' ? ` (hex)` : ''} - {column.isEncrypted && } - {hasIndexSuggestion && } + {column.isEncrypted && } + {hasIndexSuggestion && ( + + )}
) @@ -44,7 +46,7 @@ function ColumnIcon({ type }: { type: ColumnType }) { switch (type) { case 'foreign_key': // [Joshen] Look into this separately but this should be a hover card instead - return + return default: return null } diff --git a/apps/studio/components/grid/components/grid/GridError.tsx b/apps/studio/components/grid/components/grid/GridError.tsx index f9bcd007a68..39b5f4c83f8 100644 --- a/apps/studio/components/grid/components/grid/GridError.tsx +++ b/apps/studio/components/grid/components/grid/GridError.tsx @@ -1,6 +1,6 @@ import { useQueryClient } from '@tanstack/react-query' import { useParams } from 'common' -import { ChevronDown } from 'lucide-react' +import { ChevronDownIcon } from 'lucide-react' import { useCallback } from 'react' import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui' import { Admonition } from 'ui-patterns/Admonition' @@ -224,7 +224,7 @@ const ExpandError = ({ error }: { error: ResponseError }) => {
View error - +
diff --git a/apps/studio/components/grid/components/grid/SelectColumn.tsx b/apps/studio/components/grid/components/grid/SelectColumn.tsx index 3434f3845d1..8a4360e2c55 100644 --- a/apps/studio/components/grid/components/grid/SelectColumn.tsx +++ b/apps/studio/components/grid/components/grid/SelectColumn.tsx @@ -1,4 +1,4 @@ -import { Maximize2 } from 'lucide-react' +import { Maximize2Icon } from 'lucide-react' import { ChangeEvent, InputHTMLAttributes, SyntheticEvent, useEffect, useRef } from 'react' import { CalculatedColumn, @@ -150,7 +150,7 @@ function SelectCellFormatter({ variant="text" size="tiny" className="px-1 rdg-row__select-column__edit-action" - icon={} + icon={} onClick={onEditClick} tooltip={{ content: { diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx index ea8fc957635..e09d4d1d39f 100644 --- a/apps/studio/components/grid/components/header/Header.tsx +++ b/apps/studio/components/grid/components/header/Header.tsx @@ -1,6 +1,6 @@ import { keepPreviousData } from '@tanstack/react-query' import { useBreakpoint, useParams } from 'common' -import { ChevronDown, Trash } from 'lucide-react' +import { ChevronDownIcon, TrashIcon } from 'lucide-react' import { AnimatePresence, motion } from 'motion/react' import { ReactNode, useEffect, useRef, useState } from 'react' import { toast } from 'sonner' @@ -354,7 +354,7 @@ const RowHeader = ({ rows: visibleRows, tableQueriesEnabled = true }: RowHeaderP {!snap.allRowsSelected ? ( - @@ -381,7 +381,7 @@ const RowHeader = ({ rows: visibleRows, tableQueriesEnabled = true }: RowHeaderP - @@ -433,7 +433,7 @@ const RowHeader = ({ rows: visibleRows, tableQueriesEnabled = true }: RowHeaderP } + icon={} onClick={onRowsDelete} disabled={snap.allRowsSelected && isImpersonatingRole} tooltip={{ diff --git a/apps/studio/components/grid/components/header/RefreshButton.tsx b/apps/studio/components/grid/components/header/RefreshButton.tsx index 5c9cdf67f89..04cd9d08a49 100644 --- a/apps/studio/components/grid/components/header/RefreshButton.tsx +++ b/apps/studio/components/grid/components/header/RefreshButton.tsx @@ -1,6 +1,6 @@ import { useQueryClient } from '@tanstack/react-query' import { useParams } from 'common' -import { RefreshCw } from 'lucide-react' +import { RefreshCwIcon } from 'lucide-react' import { Button } from 'ui' import { useTableIndexAdvisor } from '@/components/grid/context/TableIndexAdvisorContext' @@ -34,7 +34,7 @@ export const RefreshButton = ({ tableId, isRefetching }: RefreshButtonProps) => @@ -292,7 +292,7 @@ export const SortPopoverPrimitive = ({
@@ -63,7 +63,7 @@ const SortRow = ({ index, columnName, sort, onDelete, onToggle }: SortRowProps)
diff --git a/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx b/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx index 12ec00d3f4e..99493b1e13d 100644 --- a/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx +++ b/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx @@ -1,5 +1,5 @@ import { zodResolver } from '@hookform/resolvers/zod' -import { Plus } from 'lucide-react' +import { PlusIcon } from 'lucide-react' import { useParams } from 'next/navigation' import { parseAsString, useQueryState } from 'nuqs' import { useRef } from 'react' @@ -86,7 +86,7 @@ export const CreatePublishableAPIKeyDialog = () => { side="bottom" tooltipOpen={visible === 'publishable' ? false : undefined} > - diff --git a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx index 57a57d64f8f..c4d7284c348 100644 --- a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx +++ b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx @@ -1,6 +1,6 @@ import { zodResolver } from '@hookform/resolvers/zod' import { useParams } from 'common' -import { Plus, ShieldCheck } from 'lucide-react' +import { PlusIcon, ShieldCheckIcon } from 'lucide-react' import { parseAsString, useQueryState } from 'nuqs' import { useRef } from 'react' import { useForm, type SubmitHandler } from 'react-hook-form' @@ -92,7 +92,7 @@ export const CreateSecretAPIKeyDialog = () => { side="bottom" tooltipOpen={visible === 'secret' ? false : undefined} > - @@ -148,7 +148,7 @@ export const CreateSecretAPIKeyDialog = () => { - + Securing your API key