dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

update all imports

Browse Source
This commit is contained in:
Jonathan Summers-Muir committed 2022-09-19 12:24:59 +02:00
1 parent 6103bcacf6
commit a4d37836a5
311 files changed
+1320 -1348
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

studio/components/grid/components/common/DropdownControl.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Dropdown } from '@supabase/ui'
import { Dropdown } from 'common2'
interface DropdownControlProps {
options: {
@@ -38,7 +38,7 @@ const DropdownItems: FC<DropdownControlProps> = ({ options, onSelect }) => {
return (
<Dropdown.Item key={x.value} onClick={() => onSelect(x.value)}>
<div className="flex items-center gap-2">
{x.preLabel && <span className="text-xs text-scale-900 grow">{x.preLabel}</span>}
{x.preLabel && <span className="grow text-xs text-scale-900">{x.preLabel}</span>}
<span>{x.label}</span>
{x.postLabel && <span className="text-xs text-scale-900">{x.postLabel}</span>}
</div>
studio/components/grid/components/common/ForeignTableModal/FilterHeader.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { FC, useState } from 'react'
import AwesomeDebouncePromise from 'awesome-debounce-promise'
import { Button, Input, IconChevronDown, IconSearch } from '@supabase/ui'
import { Button, Input, IconChevronDown, IconSearch } from 'common2'
import { DropdownControl } from '../../common'
import { FilterOperatorOptions } from '../../header/filter'
import { Filter, FilterOperator } from '../../../types'
studio/components/grid/components/common/ForeignTableModal/RowItem.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import * as React from 'react'
import { Menu } from '@supabase/ui'
import { Menu } from 'common2'
import { Dictionary } from '../../../types'
interface RowItemProps {
@@ -23,7 +23,7 @@ export const RowItem: React.FC<RowItemProps> = ({ item, onSelect, columnNames })
return (
<div className="foreign-table-modal__row-item__inner__key-item" key={`item-${j}`}>
<p className="text-sm text-scale-1000 foreign-table-modal__row-item__inner__key-item__key">
<p className="foreign-table-modal__row-item__inner__key-item__key text-sm text-scale-1000">
{key}
</p>
<p className="text-sm font-bold">
studio/components/grid/components/common/ForeignTableModal/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import * as React from 'react'
import { Button, Modal, Menu, IconExternalLink, IconTrash } from '@supabase/ui'
import { Button, Modal, Menu, IconExternalLink, IconTrash } from 'common2'
import { RowItem } from './RowItem'
import { FilterHeader } from './FilterHeader'
studio/components/grid/components/editor/JsonEditor.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import * as React from 'react'
import { EditorProps } from '@supabase/react-data-grid'
import { useTrackedState } from '../../store'
import { BlockKeys, MonacoEditor, NullValue } from '../common'
import { Popover } from '@supabase/ui'
import { Popover } from 'common2'
export function JsonEditor<TRow, TSummaryRow = unknown>({
row,
studio/components/grid/components/editor/NullableBooleanEditor.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'
import { EditorProps } from '@supabase/react-data-grid'
import { Button, IconX } from '@supabase/ui'
import { Button, IconX } from 'common2'
export function NullableBooleanEditor<TRow, TSummaryRow = unknown>({
row,
studio/components/grid/components/editor/TextEditor.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import * as React from 'react'
import { EditorProps } from '@supabase/react-data-grid'
import { useTrackedState } from '../../store'
import { BlockKeys, MonacoEditor, NullValue, EmptyValue } from '../common'
import { Popover } from '@supabase/ui'
import { Popover } from 'common2'
export function TextEditor<TRow, TSummaryRow = unknown>({
row,
studio/components/grid/components/footer/pagination/Pagination.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { FC, useState, useEffect } from 'react'
import AwesomeDebouncePromise from 'awesome-debounce-promise'
import { Button, InputNumber, IconArrowRight, IconArrowLeft, IconLoader } from '@supabase/ui'
import { Button, InputNumber, IconArrowRight, IconArrowLeft, IconLoader } from 'common2'
import { DropdownControl } from '../../common'
import { useDispatch, useTrackedState } from '../../../store'
import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
@@ -103,7 +103,7 @@ const Pagination: FC<PaginationProps> = () => {
return (
<div className="sb-grid-pagination">
{state.totalRows < 0 ? (
<p className="text-scale-1100 text-sm">Loading records...</p>
<p className="text-sm text-scale-1100">Loading records...</p>
) : (
<>
<Button
@@ -113,7 +113,7 @@ const Pagination: FC<PaginationProps> = () => {
onClick={onPreviousPage}
style={{ padding: '3px 10px' }}
/>
<p className="text-scale-1100 text-sm">Page</p>
<p className="text-sm text-scale-1100">Page</p>
<div className="sb-grid-pagination-input-container">
<InputNumber
// [Fran] we'll have to upgrade the UI component types to accept the null value when users delete the input content
@@ -128,7 +128,7 @@ const Pagination: FC<PaginationProps> = () => {
min={1}
/>
</div>
<p className="text-scale-1100 text-sm">{`of ${totalPages}`}</p>
<p className="text-sm text-scale-1100">{`of ${totalPages}`}</p>
<Button
icon={<IconArrowRight />}
type="outline"
@@ -149,7 +149,7 @@ const Pagination: FC<PaginationProps> = () => {
style={{ padding: '3px 10px' }}
>{`${state.rowsPerPage} rows`}</Button>
</DropdownControl>
<p className="text-scale-1100 text-sm">{`${state.totalRows.toLocaleString()} ${
<p className="text-sm text-scale-1100">{`${state.totalRows.toLocaleString()} ${
state.totalRows === 0 || state.totalRows > 1 ? `records` : 'record'
}`}</p>
{state.isLoading && <IconLoader size={14} className="animate-spin" />}
studio/components/grid/components/grid/AddColumn.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import * as React from 'react'
import { CalculatedColumn } from '@supabase/react-data-grid'
import { Button, IconPlus } from '@supabase/ui'
import { Button, IconPlus } from 'common2'
import { ADD_COLUMN_KEY } from '../../constants'
import { useTrackedState } from '../../store'
import { DefaultFormatter } from '../formatter'
studio/components/grid/components/grid/ColumnHeader.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import * as React from 'react'
import { IconKey, IconLink } from '@supabase/ui'
import { IconKey, IconLink } from 'common2'
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'
import { XYCoord } from 'dnd-core'
import { useDispatch } from '../../store'
studio/components/grid/components/grid/Grid.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { forwardRef } from 'react'
import { memo } from 'react-tracked'
import DataGrid, { DataGridHandle, RowsChangeData } from '@supabase/react-data-grid'
import { IconLoader } from '@supabase/ui'
import { IconLoader } from 'common2'
import { GridProps, SupaRow } from '../../types'
import { useDispatch, useTrackedState } from '../../store'
import RowRenderer from './RowRenderer'
@@ -71,10 +71,10 @@ export const Grid = memo(
style={{ width: width || '100%', height: height || '50vh' }}
>
<div className="sb-grid-grid--loading__inner flex items-center gap-2">
<div className="text-scale-900 animate-spin">
<div className="animate-spin text-scale-900">
<IconLoader />
</div>
<div className="text-scale-1100 text-sm">Loading...</div>
<div className="text-sm text-scale-1100">Loading...</div>
</div>
</div>
)
studio/components/grid/components/grid/SelectColumn.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import {
GroupFormatterProps,
useRowSelection,
} from '@supabase/react-data-grid'
import { Button, IconMaximize2 } from '@supabase/ui'
import { Button, IconMaximize2 } from 'common2'
import { SupaRow } from '../../types'
import { SELECT_COLUMN_KEY } from '../../constants'
import { useFocusRef } from '../../utils'
studio/components/grid/components/header/Header.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { FC, useState, ReactNode } from 'react'
import { Button, IconDownload, IconPlus, IconX, IconTrash } from '@supabase/ui'
import { Button, IconDownload, IconPlus, IconX, IconTrash } from 'common2'
import { saveAs } from 'file-saver'
import { useStore } from 'hooks'
@@ -30,7 +30,7 @@ const Header: FC<HeaderProps> = ({ sorts, filters, onAddColumn, onAddRow, header
const { selectedRows } = state
return (
<div className="bg-scale-100 dark:bg-scale-300 flex h-10 items-center justify-between px-5 py-1.5">
<div className="flex h-10 items-center justify-between bg-scale-100 px-5 py-1.5 dark:bg-scale-300">
{selectedRows.size > 0 ? (
<RowHeader sorts={sorts} filters={filters} />
) : (
@@ -82,7 +82,7 @@ const DefaultHeader: FC<DefaultHeaderProps> = ({ sorts, filters, onAddColumn, on
<FilterDropdown />
<SortPopover />
</div>
<div className="bg-scale-600 h-[50%] w-px"></div>
<div className="h-[50%] w-px bg-scale-600"></div>
<div className="flex items-center gap-2">
{renderNewColumn(onAddColumn)}
{renderAddRow(onAddRow)}
@@ -188,7 +188,7 @@ const RowHeader: FC<RowHeaderProps> = ({ sorts, filters }) => {
icon={<IconX size="tiny" strokeWidth={2} />}
onClick={deselectRows}
/>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
{allRowsSelected
? `${totalRows} rows selected`
: selectedRows.size > 1
studio/components/grid/components/header/RefreshButton.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { FC, useState } from 'react'
import { Button, IconRefreshCw } from '@supabase/ui'
import { Button, IconRefreshCw } from 'common2'
import { Filter, Sort } from 'components/grid/types'
import { useDispatch, useTrackedState } from 'components/grid/store'
import { fetchCount, fetchPage } from 'components/grid/utils'
studio/components/grid/components/header/StatusLabel.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import { useState, FC, useEffect } from 'react'
import * as Tooltip from '@radix-ui/react-tooltip'
import { IconLoader, IconCheck } from '@supabase/ui'
import { IconLoader, IconCheck } from 'common2'
import { SupabaseGridQueue } from '../../constants'
interface Props {}
@@ -35,34 +35,34 @@ const StatusLabel: FC<Props> = ({}) => {
{status === 'saving' ? (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<IconLoader className="animate-spin mx-1 text-scale-1100" size={14} strokeWidth={2} />
<IconLoader className="mx-1 animate-spin text-scale-1100" size={14} strokeWidth={2} />
</Tooltip.Trigger>
<Tooltip.Content side="left">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">Saving changes...</span>
<span className="text-xs text-scale-1200">Saving changes...</span>
</div>
</Tooltip.Content>
</Tooltip.Root>
) : status === 'saved' ? (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<IconCheck className="text-brand-900 mx-1" size={14} strokeWidth={3} />
<IconCheck className="mx-1 text-brand-900" size={14} strokeWidth={3} />
</Tooltip.Trigger>
<Tooltip.Content side="left">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border ',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200 ',
].join(' ')}
>
<span className="text-scale-1200 text-xs">All changes saved</span>
<span className="text-xs text-scale-1200">All changes saved</span>
</div>
</Tooltip.Content>
</Tooltip.Root>
studio/components/grid/components/header/filter/FilterPopover.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Button, IconPlus, IconFilter, Popover } from '@supabase/ui'
import { Button, IconPlus, IconFilter, Popover } from 'common2'
import { useUrlState } from 'hooks'
import FilterRow from './FilterRow'
@@ -60,8 +60,8 @@ const Filter: FC = () => {
))}
{formattedFilters.length == 0 && (
<div className="space-y-1 px-3">
<h5 className="text-scale-1100 text-sm">No filters applied to this view</h5>
<p className="text-scale-900 text-xs">Add a column below to filter the view</p>
<h5 className="text-sm text-scale-1100">No filters applied to this view</h5>
<p className="text-xs text-scale-900">Add a column below to filter the view</p>
</div>
)}
</div>
studio/components/grid/components/header/filter/FilterRow.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { debounce } from 'lodash'
import { FC, memo, useState, useEffect, ChangeEvent, useCallback } from 'react'
import { Button, Input, IconChevronDown, IconX } from '@supabase/ui'
import { Button, Input, IconChevronDown, IconX } from 'common2'
import { useUrlState } from 'hooks'
import { Filter } from 'components/grid/types'
studio/components/grid/components/header/sort/SortPopover.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import React, { FC } from 'react'
import { Button, IconList, IconChevronDown, Popover } from '@supabase/ui'
import { Button, IconList, IconChevronDown, Popover } from 'common2'
import { useUrlState } from 'hooks'
import SortRow from './SortRow'
@@ -65,8 +65,8 @@ const Sort: FC = () => {
))}
{formattedSorts.length === 0 && (
<div className="space-y-1 px-3">
<h5 className="text-scale-1100 text-sm">No sorts applied to this view</h5>
<p className="text-scale-900 text-xs">Add a column below to sort the view</p>
<h5 className="text-sm text-scale-1100">No sorts applied to this view</h5>
<p className="text-xs text-scale-900">Add a column below to sort the view</p>
</div>
)}
@@ -89,7 +89,7 @@ const Sort: FC = () => {
</Button>
</DropdownControl>
) : (
<p className="text-scale-1100 text-sm">All columns have been added</p>
<p className="text-sm text-scale-1100">All columns have been added</p>
)}
</div>
</div>
studio/components/grid/components/header/sort/SortRow.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import update from 'immutability-helper'
import { FC, useRef, memo } from 'react'
import { Button, IconMenu, Toggle, IconX } from '@supabase/ui'
import { Button, IconMenu, Toggle, IconX } from 'common2'
import { XYCoord } from 'dnd-core'
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'
@@ -151,13 +151,13 @@ const SortRow: FC<SortRowProps> = ({ index, columnName, sort }) => {
onClick={onRemoveSort}
/>
<div className="grow">
<span className="text-scale-1200 flex grow items-center gap-1 truncate text-sm">
<span className="text-scale-900 text-xs">{index > 0 ? 'then by' : 'sort by'}</span>
<span className="flex grow items-center gap-1 truncate text-sm text-scale-1200">
<span className="text-xs text-scale-900">{index > 0 ? 'then by' : 'sort by'}</span>
{column.name}
</span>
</div>
<div className="flex items-center gap-1">
<label className="text-scale-900 text-xs">ascending:</label>
<label className="text-xs text-scale-900">ascending:</label>
<Toggle
size="tiny"
layout="flex"
studio/components/grid/components/menu/ColumnMenu.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import {
IconTrash,
IconLock,
IconUnlock,
} from '@supabase/ui'
} from 'common2'
import * as React from 'react'
import { useDispatch, useTrackedState } from '../../store'
studio/components/grid/components/menu/RowContextMenu.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import * as React from 'react'
import { Menu, Item, ItemParams, PredicateParams } from 'react-contexify'
import { IconTrash, IconClipboard, IconEdit } from '@supabase/ui'
import { IconTrash, IconClipboard, IconEdit } from 'common2'
import { useDispatch, useTrackedState } from '../../store'
import { formatClipboardValue, copyToClipboard } from '../../utils'
import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
studio/components/interfaces/Account/AccessTokenList.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, Modal, IconTrash } from '@supabase/ui'
import { Button, Modal, IconTrash } from 'common2'
import { useStore } from 'hooks'
import { delete_ } from 'lib/common/fetch'
import { API_URL } from 'lib/constants'
studio/components/interfaces/Account/NewAccessTokenButton.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { FC, useState } from 'react'
import { Input, Button, Modal, Form, Alert } from '@supabase/ui'
import { Input, Button, Modal, Form, Alert } from 'common2'
import { useStore } from 'hooks'
import { post } from 'lib/common/fetch'
import { API_URL } from 'lib/constants'
@@ -56,7 +56,7 @@ const NewAccessTokenButton = observer(() => {
visible={isOpen}
onCancel={() => setIsOpen(!isOpen)}
header={
<div className="flex gap-2 items-baseline">
<div className="flex items-baseline gap-2">
<h5 className="text-sm text-scale-1200">Generate New Token</h5>
</div>
}
studio/components/interfaces/App/AppBannerWrapper.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { FC } from 'react'
import Link from 'next/link'
import { useFlag } from 'hooks'
import { IconExternalLink } from '@supabase/ui'
import { IconExternalLink } from 'common2'
const AppBannerWrapper: FC = ({ children }) => {
const ongoingIncident = useFlag('ongoingIncident')
@@ -11,7 +11,7 @@ const AppBannerWrapper: FC = ({ children }) => {
{ongoingIncident && (
<Link href="https://status.supabase.com">
<a target="_blank">
<div className="hover:bg-green-1000 flex cursor-pointer items-center justify-center space-x-2 bg-green-900 py-3 transition text-scale-400 dark:text-scale-1200">
<div className="flex cursor-pointer items-center justify-center space-x-2 bg-green-900 py-3 text-scale-400 transition hover:bg-green-1000 dark:text-scale-1200">
<p className="text-sm font-medium">
We are currently investigating a technical issue, follow status.supabase.com for
updates
studio/components/interfaces/App/PortalToast.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import dynamic from 'next/dynamic'
import { Toaster, ToastBar, toast } from 'react-hot-toast'
import { Button, IconX } from '@supabase/ui'
import { Button, IconX } from 'common2'
const PortalRootWithNoSSR = dynamic(
// @ts-ignore
studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { FC, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from '@supabase/ui'
import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from 'common2'
import { Enum } from './AuthProvidersForm.types'
interface Props {
@@ -48,7 +48,7 @@ const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }
onClick={() => setHidden(!hidden)}
/>
) : (
<span className="text-scale-900 mr-3">
<span className="mr-3 text-scale-900">
{properties.units ? (
<ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
{properties.units}
@@ -83,7 +83,7 @@ const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }
) : null
}
actions={
<span className="text-scale-900 mr-3">
<span className="mr-3 text-scale-900">
{properties.units ? (
<ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
{properties.units}
studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Alert, Button, Collapsible, Form, IconCheck, IconChevronUp, Input } from '@supabase/ui'
import { Alert, Button, Collapsible, Form, IconCheck, IconChevronUp, Input } from 'common2'
import { useStore, checkPermissions } from 'hooks'
import { Provider } from './AuthProvidersForm.types'
@@ -172,11 +172,11 @@ const ProviderForm: FC<Props> = ({ provider }) => {
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to update provider settings
</span>
</div>
studio/components/interfaces/Auth/AutoSchemaForm.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { boolean, number, object, string } from 'yup'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Button, Form, Input, IconEye, IconEyeOff, InputNumber, Toggle } from '@supabase/ui'
import { Button, Form, Input, IconEye, IconEyeOff, InputNumber, Toggle } from 'common2'
import { useStore, checkPermissions } from 'hooks'
import {
@@ -138,7 +138,7 @@ const AutoSchemaForm = observer(() => {
size="small"
label="JWT expiry limit"
descriptionText="How long tokens are valid for. Defaults to 3600 (1 hour), maximum 604,800 seconds (one week)."
actions={<span className="text-scale-900 mr-3">seconds</span>}
actions={<span className="mr-3 text-scale-900">seconds</span>}
disabled={!canUpdateConfig}
/>
</FormSectionContent>
@@ -184,7 +184,7 @@ const AutoSchemaForm = observer(() => {
min={0}
label="Reuse Interval"
descriptionText="Time interval where the same refresh token can be used to request for an access token."
actions={<span className="text-scale-900 mr-3">seconds</span>}
actions={<span className="mr-3 text-scale-900">seconds</span>}
disabled={!canUpdateConfig}
/>
)}
studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Tabs } from '@supabase/ui'
import { Tabs } from 'common2'
import { observer } from 'mobx-react-lite'
import { TEMPLATES_SCHEMAS } from 'stores/authConfig/schema'
studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import ReactMarkdown from 'react-markdown'
import { FC, useState, useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { Input, Form } from '@supabase/ui'
import { Input, Form } from 'common2'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useStore, checkPermissions } from 'hooks'
@@ -86,7 +86,7 @@ const TemplateEditor: FC<Props> = ({ template }) => {
if (property.type === 'string') {
return (
<div className="space-y-3">
<label className="text-scale-1200 col-span-12 text-sm lg:col-span-5">
<label className="col-span-12 text-sm text-scale-1200 lg:col-span-5">
{property.title}
</label>
<Input
studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Radio } from '@supabase/ui'
import { Radio } from 'common2'
interface Props {
operation: string
@@ -10,10 +10,10 @@ const PolicyAllowedOperation: FC<Props> = ({ operation = '', onSelectOperation }
return (
<div className="flex justify-between space-x-12">
<div className="flex w-1/3 flex-col space-y-2">
<label className="text-scale-1100 text-base" htmlFor="allowed-operation">
<label className="text-base text-scale-1100" htmlFor="allowed-operation">
Allowed operation
</label>
<p className="text-scale-900 text-sm">Select an operation for this policy</p>
<p className="text-sm text-scale-900">Select an operation for this policy</p>
</div>
<div className="w-2/3">
<div className="flex items-center space-x-8">
studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
+15 -15
View File
@@ -1,5 +1,5 @@
import { FC, useEffect } from 'react'
import { IconHelpCircle } from '@supabase/ui'
import { IconHelpCircle } from 'common2'
import * as Tooltip from '@radix-ui/react-tooltip'
import { usePrevious } from 'hooks'
@@ -36,7 +36,7 @@ const PolicyDefinition: FC<Props> = ({
<div className="flex space-x-12">
<div className="flex w-1/3 flex-col space-y-2">
<div className="flex items-center space-x-2">
<label className="text-scale-1100 text-base" htmlFor="policy-name">
<label className="text-base text-scale-1100" htmlFor="policy-name">
USING expression
</label>
<Tooltip.Root delayDuration={0}>
@@ -47,27 +47,27 @@ const PolicyDefinition: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border w-[300px] space-y-2',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'w-[300px] space-y-2 border border-scale-200',
].join(' ')}
>
<p className="text-scale-1200 text-xs">
<p className="text-xs text-scale-1200">
This expression will be added to queries that refer to the table if row-level
security is enabled.
</p>
<p className="text-scale-1200 text-xs">
<p className="text-xs text-scale-1200">
Rows for which the expression returns true will be visible. Any rows for which
the expression returns false or null will not be visible to the user (in a
SELECT), and will not be available for modification (in an UPDATE or DELETE).
</p>
<p className="text-scale-1200 text-xs">
<p className="text-xs text-scale-1200">
Such rows are silently suppressed - no error is reported.
</p>
</div>
</Tooltip.Content>
</Tooltip.Root>
</div>
<p className="text-scale-900 text-sm">
<p className="text-sm text-scale-900">
Provide a SQL conditional expression that returns a boolean.
</p>
</div>
@@ -80,7 +80,7 @@ const PolicyDefinition: FC<Props> = ({
<div className="flex space-x-12">
<div className="flex w-1/3 flex-col space-y-2">
<div className="flex items-center space-x-2">
<label className="text-scale-1100 text-base" htmlFor="policy-name">
<label className="text-base text-scale-1100" htmlFor="policy-name">
WITH CHECK expression
</label>
<Tooltip.Root delayDuration={0}>
@@ -91,20 +91,20 @@ const PolicyDefinition: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border w-[300px] space-y-2',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'w-[300px] space-y-2 border border-scale-200',
].join(' ')}
>
<p className="text-scale-1200 text-xs">
<p className="text-xs text-scale-1200">
This expression will be used in INSERT and UPDATE queries against the table if
row-level security is enabled.
</p>
<p className="text-scale-1200 text-xs">
<p className="text-xs text-scale-1200">
Only rows for which the expression evaluates to true will be allowed. An error
will be thrown if the expression evaluates to false or null for any of the
records inserted or any of the records that result from the update.
</p>
<p className="text-scale-1200 text-xs">
<p className="text-xs text-scale-1200">
Note that this expression is evaluated against the proposed new contents of
the row, not the original contents.
</p>
@@ -112,7 +112,7 @@ const PolicyDefinition: FC<Props> = ({
</Tooltip.Content>
</Tooltip.Root>
</div>
<p className="text-scale-900 text-sm">
<p className="text-sm text-scale-900">
Provide a SQL conditional expression that returns a boolean.
</p>
</div>
studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Button } from '@supabase/ui'
import { Button } from 'common2'
interface Props {
showTemplates: boolean
@@ -8,7 +8,7 @@ interface Props {
}
const PolicyEditorFooter: FC<Props> = ({ showTemplates, onViewTemplates, onReviewPolicy }) => (
<div className="dark:border-dark flex w-full items-center justify-end gap-2 border-t px-6 py-4">
<div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 dark:border-dark">
{showTemplates && (
<Button type="default" onClick={onViewTemplates}>
View templates
studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Input } from '@supabase/ui'
import { Input } from 'common2'
interface Props {
name: string
@@ -11,10 +11,10 @@ const PolicyName: FC<Props> = ({ name = '', limit = 100, onUpdatePolicyName }) =
return (
<div className="flex space-x-12">
<div className="flex w-1/3 flex-col space-y-2">
<label className="text-scale-1100 text-base" htmlFor="policy-name">
<label className="text-base text-scale-1100" htmlFor="policy-name">
Policy name
</label>
<p className="text-scale-900 text-sm">A descriptive name for your policy</p>
<p className="text-sm text-scale-900">A descriptive name for your policy</p>
</div>
<div className="relative w-2/3">
<Input
@@ -22,7 +22,7 @@ const PolicyName: FC<Props> = ({ name = '', limit = 100, onUpdatePolicyName }) =
value={name}
onChange={(e) => onUpdatePolicyName(e.target.value)}
actions={
<span className="text-scale-900 mr-3 text-sm">
<span className="mr-3 text-sm text-scale-900">
{name.length}/{limit}
</span>
}
studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Modal } from '@supabase/ui'
import { Modal } from 'common2'
import PolicyName from './PolicyName'
import PolicyDefinition from './PolicyDefinition'
studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { IconChevronLeft } from '@supabase/ui'
import { IconChevronLeft } from 'common2'
import { POLICY_MODAL_VIEWS } from 'components/interfaces/Auth/Policies'
interface Props {
@@ -31,7 +31,7 @@ const PolicyEditorModalTitle: FC<Props> = ({
<div className="flex items-center space-x-3">
<span
onClick={onSelectBackFromTemplates}
className="text-scale-900 hover:text-scale-1200 cursor-pointer transition-colors"
className="cursor-pointer text-scale-900 transition-colors hover:text-scale-1200"
>
<IconChevronLeft strokeWidth={2} size={14} />
</span>
@@ -42,7 +42,7 @@ const PolicyEditorModalTitle: FC<Props> = ({
}
return (
<div className="flex items-center space-x-3">
<h4 className="m-0 text-lg truncate">{getTitle()}</h4>
<h4 className="m-0 truncate text-lg">{getTitle()}</h4>
</div>
)
}
studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Modal } from '@supabase/ui'
import { Modal } from 'common2'
import { FC, useState, useEffect } from 'react'
import { isEmpty } from 'lodash'
import { PostgresRole } from '@supabase/postgres-meta'
studio/components/interfaces/Auth/Policies/PolicyReview.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { Button, Modal } from '@supabase/ui'
import { Button, Modal } from 'common2'
import { isEmpty } from 'lodash'
import { FC, useState } from 'react'
import SqlEditor from 'components/ui/SqlEditor'
@@ -29,7 +29,7 @@ const PolicyReview: FC<Props> = ({
<div className="space-y-6 py-8">
<div className="flex items-center justify-between space-y-8">
<div className="flex flex-col">
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
This is the SQL statement that will be used to create your policy.
</p>
</div>
@@ -37,7 +37,7 @@ const PolicyReview: FC<Props> = ({
<div className="space-y-4 overflow-y-auto" style={{ maxHeight: '25rem' }}>
{isEmpty(policy) ? (
<div className="my-10 flex items-center justify-center space-x-2 opacity-50">
<p className="text-scale-1100 text-base">
<p className="text-base text-scale-1100">
There are no changes made to this policy
</p>
</div>
@@ -52,7 +52,7 @@ const PolicyReview: FC<Props> = ({
</div>
</div>
</Modal.Content>
<div className="dark:border-dark flex w-full items-center justify-end gap-2 border-t px-6 py-4">
<div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 dark:border-dark">
<Button type="default" onClick={onSelectBack}>
Back to edit
</Button>
studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+10 -10
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { IconEdit, IconGrid, Modal } from '@supabase/ui'
import { IconEdit, IconGrid, Modal } from 'common2'
import CardButton from 'components/ui/CardButton'
interface Props {
@@ -17,7 +17,7 @@ const PolicySelection: FC<Props> = ({
<Modal.Content>
<div className="space-y-6 py-8">
<div>
<p className="text-scale-1100 text-sm">{description}</p>
<p className="text-sm text-scale-1100">{description}</p>
</div>
<div className="grid grid-cols-1 gap-2 lg:grid-cols-1">
<CardButton
@@ -27,9 +27,9 @@ const PolicySelection: FC<Props> = ({
<div className="flex">
<div
className="
bg-scale-1200 text-scale-100 flex h-8
w-8
items-center justify-center rounded
flex h-8 w-8 items-center
justify-center
rounded bg-scale-1200 text-scale-100
"
>
<IconGrid size={14} strokeWidth={2} />
@@ -45,9 +45,9 @@ const PolicySelection: FC<Props> = ({
<div className="flex">
<div
className="
bg-scale-1200 text-scale-100 flex h-8
w-8
items-center justify-center rounded
flex h-8 w-8 items-center
justify-center
rounded bg-scale-1200 text-scale-100
"
>
<IconEdit size={14} strokeWidth={2} />
@@ -57,11 +57,11 @@ const PolicySelection: FC<Props> = ({
onClick={onViewEditor}
/>
</div>
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
Not sure what policies are? Check out our resources{' '}
<a
target="_blank"
className="text-brand-900 hover:text-brand-1200 transition-colors"
className="text-brand-900 transition-colors hover:text-brand-1200"
href="https://supabase.com/docs/guides/auth#policies"
>
here
studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
+10 -10
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, Dropdown, IconEdit, IconTrash, IconMoreVertical } from '@supabase/ui'
import { Button, Dropdown, IconEdit, IconTrash, IconMoreVertical } from 'common2'
import { PostgresPolicy } from '@supabase/postgres-meta'
import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -23,19 +23,19 @@ const PolicyRow: FC<Props> = ({
return (
<Panel.Content
className={[
'border-panel-border-light dark:border-panel-border-dark flex',
'flex border-panel-border-light dark:border-panel-border-dark',
'w-full space-x-4 border-b py-4 lg:items-center',
].join(' ')}
>
<div className="flex grow flex-col truncate space-y-1">
<div className="flex grow flex-col space-y-1 truncate">
<div className="flex items-center space-x-4">
<p className="text-scale-1000 font-mono text-xs">{policy.command}</p>
<p className="text-scale-1200 max-w-xs truncate text-sm">{policy.name}</p>
<p className="font-mono text-xs text-scale-1000">{policy.command}</p>
<p className="max-w-xs truncate text-sm text-scale-1200">{policy.name}</p>
</div>
<div className="flex items-center space-x-2">
<p className="text-scale-1000 text-sm">Applied to:</p>
<p className="text-sm text-scale-1000">Applied to:</p>
{policy.roles.map((role) => (
<code className="text-scale-1000 text-xs">{role}</code>
<code className="text-xs text-scale-1000">{role}</code>
))}
</div>
</div>
@@ -84,11 +84,11 @@ const PolicyRow: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to edit RLS policies
</span>
</div>
studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
+7 -7
View File
@@ -2,7 +2,7 @@ import Link from 'next/link'
import { FC } from 'react'
import { useRouter } from 'next/router'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Badge, Button } from '@supabase/ui'
import { Badge, Button } from 'common2'
import { PostgresTable } from '@supabase/postgres-meta'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { checkPermissions } from 'hooks'
@@ -53,11 +53,11 @@ const PolicyTableRowHeader: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to create RLS policies
</span>
</div>
@@ -79,11 +79,11 @@ const PolicyTableRowHeader: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to toggle RLS
</span>
</div>
studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Menu } from '@supabase/ui'
import { Menu } from 'common2'
import { PolicyTemplate } from './PolicyTemplates.constants'
interface Props {
@@ -15,7 +15,7 @@ const TemplatesList: FC<Props> = ({
selectedTemplate,
setSelectedTemplate = () => {},
}) => (
<div className="dark:border-dark flex flex-col justify-between border-r" style={{ width: '30%' }}>
<div className="flex flex-col justify-between border-r dark:border-dark" style={{ width: '30%' }}>
<div
className="hide-scrollbar divide-border-primary space-y-0 divide-y divide-solid overflow-y-auto"
style={{ maxHeight: '24rem' }}
@@ -26,7 +26,7 @@ const TemplatesList: FC<Props> = ({
return (
<div
className={
'hover:bg-scale-400 border-scale-400 border-b ' +
'border-b border-scale-400 hover:bg-scale-400 ' +
(active ? 'bg-scale-300 dark:bg-scale-500' : '')
}
>
@@ -44,7 +44,7 @@ const TemplatesList: FC<Props> = ({
</div>
{templatesNote && (
<div className="px-4 py-2">
<p className="text-scale-900 text-xs">{templatesNote}</p>
<p className="text-xs text-scale-900">{templatesNote}</p>
</div>
)}
</div>
studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { Button } from '@supabase/ui'
import { Button } from 'common2'
import { FC, useState } from 'react'
import { isEmpty } from 'lodash'
@@ -20,7 +20,7 @@ const PolicyTemplates: FC<Props> = ({
const [selectedTemplate, setSelectedTemplate] = useState(templates[0])
return (
<div>
<div className="dark:border-dark flex justify-between border-t">
<div className="flex justify-between border-t dark:border-dark">
<TemplatesList
templatesNote={templatesNote}
templates={templates}
@@ -29,8 +29,8 @@ const PolicyTemplates: FC<Props> = ({
/>
<TemplatePreview selectedTemplate={selectedTemplate} />
</div>
<div className="dark:border-dark flex w-full items-center justify-end gap-3 border-t px-6 py-4">
<span className="text-scale-900 text-sm">
<div className="flex w-full items-center justify-end gap-3 border-t px-6 py-4 dark:border-dark">
<span className="text-sm text-scale-900">
This will override any existing code you've written
</span>
<Button
studio/components/interfaces/Auth/RedirectDomains/DomainList.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import { observer } from 'mobx-react-lite'
import { Button, IconGlobe, IconTrash } from '@supabase/ui'
import { Button, IconGlobe, IconTrash } from 'common2'
import { useStore } from 'hooks'
import ValueContainer from './ValueContainer'
@@ -55,7 +55,7 @@ const DomainList: FC<Props> = ({ canUpdate, onSelectDomainToDelete }) => {
) : (
<div
className={[
'bg-scale-200 border-scale-400 text-scale-1200 flex items-center',
'flex items-center border-scale-400 bg-scale-200 text-scale-1200',
'justify-center gap-2 rounded border px-6 py-8 text-sm',
].join(' ')}
>
studio/components/interfaces/Auth/RedirectDomains/RedirectDomains.tsx
+7 -7
View File
@@ -2,7 +2,7 @@ import { useState } from 'react'
import { object, string } from 'yup'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, Form, Input, Modal } from '@supabase/ui'
import { Button, Form, Input, Modal } from 'common2'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { checkPermissions, useStore } from 'hooks'
@@ -101,11 +101,11 @@ const RedirectDomains = () => {
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to update redirect URLs
</span>
</div>
@@ -132,7 +132,7 @@ const RedirectDomains = () => {
return (
<div className="mb-4 space-y-4 pt-4">
<div className="px-5">
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
This will add a domain to a list of allowed domains that can interact with your
Authenticaton services for this project.
</p>
@@ -173,11 +173,11 @@ const RedirectDomains = () => {
>
<div className="mb-4 space-y-4 pt-4">
<div className="px-5">
<p className="text-scale-1100 mb-2 text-sm">
<p className="mb-2 text-sm text-scale-1100">
Are you sure you want to remove{' '}
<span className="text-scale-1200">{selectedDomainToDelete}</span>?
</p>
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
This domain will no longer work with your authentication configuration.
</p>
</div>
studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
import { useEffect, useState } from 'react'
import { number, object, string } from 'yup'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Alert, Button, Form, Input, InputNumber, Toggle, IconEye, IconEyeOff } from '@supabase/ui'
import { Alert, Button, Form, Input, InputNumber, Toggle, IconEye, IconEyeOff } from 'common2'
import {
FormActions,
@@ -216,7 +216,7 @@ const SmtpForm = () => {
header={
<FormSectionLabel>
<span>SMTP Provider Settings</span>
<p className="text-scale-900 my-4">
<p className="my-4 text-scale-900">
Your SMTP Credentials will always be encrypted in our database.
</p>
</FormSectionLabel>
@@ -255,7 +255,7 @@ const SmtpForm = () => {
name="SMTP_MAX_FREQUENCY"
label="Minimum interval between emails being sent"
descriptionText="How long between each email can a new email be sent via your SMTP server."
actions={<span className="text-scale-900 mr-3">seconds</span>}
actions={<span className="mr-3 text-scale-900">seconds</span>}
disabled={!canUpdateConfig}
/>
<InputNumber
@@ -264,7 +264,7 @@ const SmtpForm = () => {
min={0}
label="Rate limit for sending emails"
descriptionText="How many emails can be sent per hour."
actions={<span className="text-scale-900 mr-3">emails per hour</span>}
actions={<span className="mr-3 text-scale-900">emails per hour</span>}
disabled={!canUpdateConfig}
/>
<Input
studio/components/interfaces/Auth/Users/InviteUserModal.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { useContext, useState } from 'react'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, Modal, Input, IconPlus, IconMail, Form } from '@supabase/ui'
import { Button, Modal, Input, IconPlus, IconMail, Form } from 'common2'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useStore, checkPermissions } from 'hooks'
@@ -67,11 +67,11 @@ const InviteUserModal = () => {
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to invite users
</span>
</div>
@@ -94,7 +94,7 @@ const InviteUserModal = () => {
onSubmit={onInviteuser}
>
{({ isSubmitting }: { isSubmitting: boolean }) => (
<div className="py-4 space-y-6">
<div className="space-y-6 py-4">
<Modal.Content>
<Input
autoFocus
studio/components/interfaces/Auth/Users/UserDropdown.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import { FC, useContext, useState } from 'react'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, Dropdown, Divider, IconTrash, IconMail, IconMoreHorizontal } from '@supabase/ui'
import { Button, Dropdown, Divider, IconTrash, IconMail, IconMoreHorizontal } from 'common2'
import { useStore } from 'hooks'
import { timeout } from 'lib/helpers'
@@ -156,11 +156,11 @@ const UserDropdown: FC<Props> = ({ user, canRemoveUser }) => {
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to delete users
</span>
</div>
studio/components/interfaces/Auth/Users/Users.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import semver from 'semver'
import { useEffect, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Button, Input, IconSearch, IconX, IconRefreshCw, Listbox, IconUsers } from '@supabase/ui'
import { Button, Input, IconSearch, IconX, IconRefreshCw, Listbox, IconUsers } from 'common2'
import { IS_PLATFORM } from 'lib/constants'
import { PageContext } from 'pages/project/[ref]/auth/users'
@@ -108,9 +108,9 @@ const Users = () => {
{inviteEnabled && <InviteUserModal />}
</div>
</div>
<section className="overflow-visible mt-4 px-6">
<div className="relative section-block--body rounded">
<div className="align-middle inline-block min-w-full">
<section className="mt-4 overflow-visible px-6">
<div className="section-block--body relative rounded">
<div className="inline-block min-w-full align-middle">
<UsersList />
</div>
</div>
studio/components/interfaces/Auth/Users/UsersList.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { IconAlertCircle, Loading } from '@supabase/ui'
import { IconAlertCircle, Loading } from 'common2'
import { PageContext } from 'pages/project/[ref]/auth/users'
import Table from 'components/to-be-cleaned/Table'
@@ -34,7 +34,7 @@ const UsersList = ({}) => {
{/* @ts-ignore */}
<Table.td
colSpan={7}
className="h-14 p-4 whitespace-nowrap border-t leading-5 text-gray-300 text-sm"
className="h-14 whitespace-nowrap border-t p-4 text-sm leading-5 text-gray-300"
>
<div className="flex items-center space-x-3 opacity-75">
<IconAlertCircle size={16} strokeWidth={2} />
studio/components/interfaces/Auth/Users/UsersListItem.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import { observer } from 'mobx-react-lite'
import { Badge } from '@supabase/ui'
import { Badge } from 'common2'
import Table from 'components/to-be-cleaned/Table'
import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
@@ -29,7 +29,7 @@ const UserListItem: FC<Props> = ({ user, canRemoveUser }) => {
<span className="text-scale-1200">{!user.phone ? '-' : user.phone}</span>
</Table.td>
<Table.td className="hidden 2xl:table-cell">
<span className="text-scale-1200 capitalize">
<span className="capitalize text-scale-1200">
{user?.raw_app_meta_data?.provider || user?.app_metadata?.provider}
</span>
</Table.td>
studio/components/interfaces/Auth/Users/UsersPagination.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Button } from '@supabase/ui'
import { Button } from 'common2'
import { PageContext } from 'pages/project/[ref]/auth/users'
@@ -28,7 +28,7 @@ const UsersPagination = () => {
results
</p>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<div className="flex flex-1 justify-between sm:justify-end">
{PageState.hasPrevious && (
<Button type="secondary" disabled={!PageState.hasPrevious} onClick={onPrevious}>
Previous
studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { FC, useEffect, useState } from 'react'
import { IconLoader, Modal } from '@supabase/ui'
import { IconLoader, Modal } from 'common2'
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from '@stripe/react-stripe-js'
studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { FC, useState } from 'react'
import { Button, Modal } from '@supabase/ui'
import { Button, Modal } from 'common2'
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js'
import { useStore } from 'hooks'
@@ -56,7 +56,7 @@ const AddPaymentMethodForm: FC<Props> = ({ returnUrl, onCancel }) => {
<form onSubmit={handleSubmit}>
<Modal.Content>
<div
className={`transition ${isSaving ? 'opacity-75 pointer-events-none' : 'opacity-100'}`}
className={`transition ${isSaving ? 'pointer-events-none opacity-75' : 'opacity-100'}`}
>
<PaymentElement />
</div>
studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import Link from 'next/link'
import { Badge, Button, Radio } from '@supabase/ui'
import { Badge, Button, Radio } from 'common2'
import { useStore, useFlag } from 'hooks'
import { getProductPrice } from '../Billing.utils'
@@ -30,7 +30,7 @@ const ComputeSizeSelection: FC<Props> = ({
<h4 className="text-lg">Database add-ons</h4>
<Badge color="green">Optional</Badge>
</div>
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
Choose the database instance size that best fits your needs
</p>
</div>
studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+8 -8
View File
@@ -2,7 +2,7 @@ import { FC, useReducer, useState, useEffect, useRef } from 'react'
import { useRouter } from 'next/router'
import { includes, without } from 'lodash'
import { Transition } from '@headlessui/react'
import { Button, Form, Input, Modal, IconArrowLeft, Alert } from '@supabase/ui'
import { Button, Form, Input, Modal, IconArrowLeft, Alert } from 'common2'
import { useStore } from 'hooks'
import { post, patch } from 'lib/common/fetch'
@@ -174,7 +174,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
enterFrom="transform opacity-0 translate-x-10"
enterTo="transform opacity-100 translate-x-0"
>
<div className="space-y-8 w-4/5">
<div className="w-4/5 space-y-8">
<div ref={formRef} className="relative">
<div className="absolute top-[2px] -left-24">
<Button type="text" icon={<IconArrowLeft />} onClick={onSelectBack}>
@@ -198,13 +198,13 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
<label
key={option}
className={`
text-center rounded-md py-1 pl-2 pr-3 shadow-sm
transition-all flex items-center space-x-2
duration-100 cursor-pointer text-sm
flex cursor-pointer items-center space-x-2 rounded-md py-1
pl-2 pr-3 text-center text-sm
shadow-sm transition-all duration-100
${
active
? ` opacity-100 bg-scale-1200 text-scale-100 hover:bg-opacity-75`
: ` bg-scale-700 opacity-25 hover:opacity-50 text-scale-1200`
? ` bg-scale-1200 text-scale-100 opacity-100 hover:bg-opacity-75`
: ` bg-scale-700 text-scale-1200 opacity-25 hover:opacity-50`
}
`}
>
@@ -259,7 +259,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
header="Downgrading project to free"
onCancel={() => setShowConfirmModal(false)}
>
<div className="py-4 space-y-4">
<div className="space-y-4 py-4">
<Modal.Content>
<Alert
withIcon
studio/components/interfaces/Billing/Invoices.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import {
IconDownload,
IconChevronLeft,
IconChevronRight,
} from '@supabase/ui'
} from 'common2'
import { useStore } from 'hooks'
import { API_URL } from 'lib/constants'
@@ -84,7 +84,7 @@ const Invoices: FC<Props> = ({ projectRef }) => {
}
return (
<div className="my-4 container max-w-4xl space-y-1">
<div className="container my-4 max-w-4xl space-y-1">
<Loading active={loading}>
<Table
head={[
@@ -125,7 +125,7 @@ const Invoices: FC<Props> = ({ projectRef }) => {
<p>{x.number}</p>
</Table.td>
<Table.td className="align-right">
<div className="flex items-center space-x-2 justify-end">
<div className="flex items-center justify-end space-x-2">
<Button
type="outline"
icon={<IconDownload />}
studio/components/interfaces/Billing/PaymentSummaryPanel/CostBreakdownModal.tsx
+18 -18
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import { groupBy } from 'lodash'
import { Modal } from '@supabase/ui'
import { Modal } from 'common2'
interface Props {
visible: boolean
@@ -27,7 +27,7 @@ const CostBreakdownModal: FC<Props> = ({
header="Cost breakdown details"
onCancel={onCancel}
>
<div className="py-4 space-y-2">
<div className="space-y-2 py-4">
<Modal.Content>
<p className="text-sm">
The following shows the cost breakdown of the invoice that will be billed on{' '}
@@ -40,11 +40,11 @@ const CostBreakdownModal: FC<Props> = ({
</p>
</Modal.Content>
<Modal.Content>
<div className="bg-scale-500 border border-scale-600 rounded">
<div className="flex items-center py-2 px-4 border-b border-scale-600">
<div className="text-xs w-[75%]">Description</div>
<div className="text-xs w-[10%] text-right">Qty</div>
<div className="text-xs w-[15%] text-right">Amount</div>
<div className="rounded border border-scale-600 bg-scale-500">
<div className="flex items-center border-b border-scale-600 py-2 px-4">
<div className="w-[75%] text-xs">Description</div>
<div className="w-[10%] text-right text-xs">Qty</div>
<div className="w-[15%] text-right text-xs">Amount</div>
</div>
{Object.keys(groupedBreakdown).map((startPeriod: any, idx: number) => {
const start = new Date(Number(startPeriod) * 1000).toLocaleDateString('en-US', {
@@ -62,16 +62,16 @@ const CostBreakdownModal: FC<Props> = ({
return (
<div key={`breakdown-${idx}`} className="border-b border-scale-600">
<div className="flex items-center py-2 px-4 ">
<div className="text-xs w-full text-scale-1100">
<div className="w-full text-xs text-scale-1100">
{start} - {end}
</div>
</div>
{groupedBreakdown[startPeriod].map((item: any, index: number) => {
return (
<div key={`breakdown-row-${index}`} className="flex items-center py-2 px-4">
<div className="text-sm w-[75%]">{item.description}</div>
<div className="text-sm w-[10%] text-right">{item.quantity}</div>
<div className="text-sm w-[15%] text-right">
<div className="w-[75%] text-sm">{item.description}</div>
<div className="w-[10%] text-right text-sm">{item.quantity}</div>
<div className="w-[15%] text-right text-sm">
${(item.amount / 100).toFixed(2)}
</div>
</div>
@@ -80,21 +80,21 @@ const CostBreakdownModal: FC<Props> = ({
</div>
)
})}
<div className="flex flex-col py-2 px-4 space-y-1">
<div className="flex flex-col space-y-1 py-2 px-4">
<div className="flex items-center">
<div className="text-sm w-[75%]">Total amount</div>
<div className="text-sm w-[10%] text-right"></div>
<div className="text-xl w-[15%] text-right">
<div className="w-[75%] text-sm">Total amount</div>
<div className="w-[10%] text-right text-sm"></div>
<div className="w-[15%] text-right text-xl">
${totalDue < 0 ? 0 : totalDue.toFixed(2)}
</div>
</div>
{totalDue < 0 && (
<div className="flex items-center text-scale-1100">
<div className="text-sm w-[75%]">
<div className="w-[75%] text-sm">
Amount returned as credits for unused resources
</div>
<div className="text-sm w-[10%] text-right"></div>
<div className="text-sm w-[15%] text-right">${Math.abs(totalDue).toFixed(2)}</div>
<div className="w-[10%] text-right text-sm"></div>
<div className="w-[15%] text-right text-sm">${Math.abs(totalDue).toFixed(2)}</div>
</div>
)}
</div>
studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+15 -15
View File
@@ -8,7 +8,7 @@ import {
IconCreditCard,
Modal,
Alert,
} from '@supabase/ui'
} from 'common2'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -93,14 +93,14 @@ const PaymentSummaryPanel: FC<Props> = ({
return (
<>
<div
className="bg-panel-body-light dark:bg-panel-body-dark w-full space-y-8 border-l px-6 py-10 lg:px-12"
className="w-full space-y-8 border-l bg-panel-body-light px-6 py-10 dark:bg-panel-body-dark lg:px-12"
style={{ height: 'calc(100vh - 57px)' }}
>
<p>Payment Summary</p>
{/* Subscription details */}
<div className="space-y-1">
<p className="text-scale-1100 text-sm">Selected subscription</p>
<p className="text-sm text-scale-1100">Selected subscription</p>
<div className="flex items-center justify-between">
<p className={`${isChangingPlan ? 'text-scale-1100 line-through' : ''} text-sm`}>
{getPlanName(currentPlan)}
@@ -124,7 +124,7 @@ const PaymentSummaryPanel: FC<Props> = ({
<div className="space-y-1">
<p className="text-sm">Selected add-ons</p>
{currentComputeSize === undefined && selectedComputeSize === undefined && (
<p className="text-scale-1100 text-sm">No add-ons selected</p>
<p className="text-sm text-scale-1100">No add-ons selected</p>
)}
{currentComputeSize !== undefined && (
<div className="flex items-center justify-between">
@@ -166,7 +166,7 @@ const PaymentSummaryPanel: FC<Props> = ({
</div>
)}
<div className="bg-scale-600 h-px w-full" />
<div className="h-px w-full bg-scale-600" />
<PaymentTotal
subscriptionPreview={subscriptionPreview}
@@ -178,13 +178,13 @@ const PaymentSummaryPanel: FC<Props> = ({
<div className="space-y-2">
<p className="text-sm">Select payment method</p>
{isLoadingPaymentMethods ? (
<div className="bg-scale-400 border-scale-700 flex items-center space-x-4 rounded-md border px-4 py-2">
<div className="flex items-center space-x-4 rounded-md border border-scale-700 bg-scale-400 px-4 py-2">
<IconLoader className="animate-spin" size={14} />
<p className="text-scale-1100 text-sm">Retrieving payment methods</p>
<p className="text-sm text-scale-1100">Retrieving payment methods</p>
</div>
) : paymentMethods.length === 0 ? (
<div className="bg-scale-100 flex items-center justify-between rounded-md border border-dashed px-4 py-2">
<div className="text-scale-1100 flex items-center space-x-4">
<div className="flex items-center justify-between rounded-md border border-dashed bg-scale-100 px-4 py-2">
<div className="flex items-center space-x-4 text-scale-1100">
<IconAlertCircle size={16} strokeWidth={1.5} />
<p className="text-sm">No saved payment methods</p>
</div>
@@ -205,11 +205,11 @@ const PaymentSummaryPanel: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
'border-scale-200 w-48 border text-center', //border
'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
'w-48 border border-scale-200 text-center', //border
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
{enablePermissions
? 'You need additional permissions to add new payment methods to this organization'
: 'Only organization owners can add new payment methods'}
@@ -244,11 +244,11 @@ const PaymentSummaryPanel: FC<Props> = ({
)
})}
<div
className="hover:bg-scale-500 group flex cursor-pointer items-center space-x-2 py-2 px-3 transition"
className="group flex cursor-pointer items-center space-x-2 py-2 px-3 transition hover:bg-scale-500"
onClick={onSelectAddNewPaymentMethod}
>
<IconPlus size={16} />
<p className="text-scale-1000 group-hover:text-scale-1200 transition">
<p className="text-scale-1000 transition group-hover:text-scale-1200">
Add new payment method
</p>
</div>
@@ -289,7 +289,7 @@ const PaymentSummaryPanel: FC<Props> = ({
</Alert>
</Modal.Content>
<Modal.Content>
<p className="text-scale-1200 text-sm">Would you like to update your project now?</p>
<p className="text-sm text-scale-1200">Would you like to update your project now?</p>
</Modal.Content>
<Modal.Seperator />
<Modal.Content>
studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentTotal.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import { FC, useState } from 'react'
import { Loading, IconHelpCircle, Button } from '@supabase/ui'
import { Loading, IconHelpCircle, Button } from 'common2'
import * as Tooltip from '@radix-ui/react-tooltip'
import { SubscriptionPreview } from '../Billing.types'
import CostBreakdownModal from './CostBreakdownModal'
@@ -48,7 +48,7 @@ const PaymentTotal: FC<Props> = ({
<IconHelpCircle
size={16}
strokeWidth={1.5}
className="cursor-pointer opacity-50 hover:opacity-100 transition"
className="cursor-pointer opacity-50 transition hover:opacity-100"
onClick={() => setShowCostBreakdown(true)}
/>
</Tooltip.Trigger>
@@ -56,11 +56,11 @@ const PaymentTotal: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 shadow py-1 px-2 rounded leading-none', // background
'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
'border border-scale-200 ', //border
].join(' ')}
>
<span className="text-scale-1200 text-xs">How is this calculated?</span>
<span className="text-xs text-scale-1200">How is this calculated?</span>
</div>
</Tooltip.Content>
</Tooltip.Root>
@@ -106,8 +106,8 @@ const PaymentTotal: FC<Props> = ({
<p className="text-sm text-scale-1100">No changes to current subscription</p>
)}
</div>
<div className="flex justify-end items-end relative -top-[8px]">
<p className="text-scale-1100 relative -top-[1px]">$</p>
<div className="relative -top-[8px] flex items-end justify-end">
<p className="relative -top-[1px] text-scale-1100">$</p>
<p className="text-2xl">
{!hasChanges
? '0.00'
studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Button, IconLoader } from '@supabase/ui'
import { Button, IconLoader } from 'common2'
import * as Tooltip from '@radix-ui/react-tooltip'
import { useFlag } from 'hooks'
@@ -86,7 +86,7 @@ const PlanCTAButton: FC<Props> = ({ plan, currentPlan, onSelectPlan }) => {
{ctaText}
</Button>
{!disabled && projectUpdateDisabled && (
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
Subscription changes are currently disabled, our engineers are working on a fix
</p>
)}
studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx
+16 -16
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { IconCheck } from '@supabase/ui'
import { IconCheck } from 'common2'
import { STRIPE_PRODUCT_IDS } from 'lib/constants'
import { StripeProduct } from 'components/interfaces/Billing'
@@ -15,7 +15,7 @@ interface Props {
const AnimatedGradientBackground = () => (
<div
className={[
'animate-sway absolute top-0 left-0 h-full w-full',
'absolute top-0 left-0 h-full w-full animate-sway',
'bg-gradient-to-b from-transparent via-transparent to-green-800',
].join(' ')}
/>
@@ -59,9 +59,9 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
)}
<div className="flex h-full flex-col overflow-hidden rounded border">
{isCurrentPlan && <CurrentSubscriptionBanner />}
<div className="dark:bg-scale-300 bg-white px-8 py-6">
<div className="bg-white px-8 py-6 dark:bg-scale-300">
<span
className="text-cd text-scale-1200 inline-flex rounded-full text-base font-normal tracking-wide"
className="text-cd inline-flex rounded-full text-base font-normal tracking-wide text-scale-1200"
id="tier-standard"
>
{PRICING_META[plan.id].name}
@@ -72,11 +72,11 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
<>
<div className="flex items-end gap-1">
{PRICING_META[plan.id].from && (
<span className="text-scale-1200 text-base font-medium">From</span>
<span className="text-base font-medium text-scale-1200">From</span>
)}
<div>
<span className="text-2xl">${PRICING_META[plan.id].priceMonthly}</span>
<span className="text-scale-900 ml-1 text-xl font-medium">/mo</span>
<span className="ml-1 text-xl font-medium text-scale-900">/mo</span>
</div>
</div>
</>
@@ -85,7 +85,7 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
)}
<div className="flex h-8">
{PRICING_META[plan.id].warning && (
<div className="bg-brand-300 text-brand-1000 mt-2 rounded-md bg-opacity-30 px-2 py-1 text-xs">
<div className="mt-2 rounded-md bg-brand-300 bg-opacity-30 px-2 py-1 text-xs text-brand-1000">
{PRICING_META[plan.id].warning}
</div>
)}
@@ -99,28 +99,28 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
onSelectPlan={onSelectPlan}
/>
</div>
<p className="text-scale-1100 text-sm">{PRICING_META[plan.id].description}</p>
<p className="text-sm text-scale-1100">{PRICING_META[plan.id].description}</p>
</div>
<div
className={[
'flex-1 flex-col justify-between',
'dark:border-scale-400 space-y-6 border-t',
'space-y-6 border-t dark:border-scale-400',
'bg-scale-100 dark:bg-scale-300',
'hidden h-full px-8 py-6 lg:flex',
].join(' ')}
>
{PRICING_META[plan.id].preface && (
<p className="text-scale-1200 text-sm">{PRICING_META[plan.id].preface}</p>
<p className="text-sm text-scale-1200">{PRICING_META[plan.id].preface}</p>
)}
<ul role="list" className="dark:divide-scale-400 divide-y">
<ul role="list" className="divide-y dark:divide-scale-400">
{PRICING_META[plan.id].features.map((feature) => (
<li key={feature} className="flex items-center py-2">
<IconCheck
className="text-brand-900 h-3 w-3 "
className="h-3 w-3 text-brand-900 "
aria-hidden="true"
strokeWidth={3}
/>
<p className="text-scale-1100 dark:text-scale-1200 mb-0 ml-3 text-xs">
<p className="mb-0 ml-3 text-xs text-scale-1100 dark:text-scale-1200">
{feature}
</p>
</li>
@@ -129,13 +129,13 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
<div className="flex flex-col gap-6">
<div className="space-y-2">
{PRICING_META[plan.id].additional && (
<p className="text-scale-1200 text-sm">{PRICING_META[plan.id].additional}</p>
<p className="text-sm text-scale-1200">{PRICING_META[plan.id].additional}</p>
)}
{PRICING_META[plan.id].scale && (
<p className="text-scale-900 text-xs">{PRICING_META[plan.id].scale}</p>
<p className="text-xs text-scale-900">{PRICING_META[plan.id].scale}</p>
)}
{PRICING_META[plan.id].shutdown && (
<p className="text-scale-900 text-xs">{PRICING_META[plan.id].shutdown}</p>
<p className="text-xs text-scale-900">{PRICING_META[plan.id].shutdown}</p>
)}
</div>
</div>
studio/components/interfaces/Billing/ProUpgrade.tsx
+13 -13
View File
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react'
import { Transition } from '@headlessui/react'
import { useRouter } from 'next/router'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, IconHelpCircle, Toggle, Modal } from '@supabase/ui'
import { Button, IconHelpCircle, Toggle, Modal } from 'common2'
import { useStore } from 'hooks'
import { post, patch } from 'lib/common/fetch'
@@ -167,7 +167,7 @@ const ProUpgrade: FC<Props> = ({
<div className="relative space-y-4 px-5">
<BackButton onClick={() => onSelectBack()} />
<div className="space-y-8">
<h4 className="text-scale-900 text-lg">Change your project's subscription</h4>
<h4 className="text-lg text-scale-900">Change your project's subscription</h4>
<div
className="space-y-8 overflow-scroll pb-8"
style={{ height: 'calc(100vh - 9rem - 57px)' }}
@@ -178,7 +178,7 @@ const ProUpgrade: FC<Props> = ({
<h3 className="text-xl">
Welcome to <span className="text-brand-900">Pro</span>
</h3>
<p className="text-scale-1100 text-base">
<p className="text-base text-scale-1100">
Your new subscription will begin immediately after payment
</p>
</>
@@ -187,13 +187,13 @@ const ProUpgrade: FC<Props> = ({
<h3 className="text-3xl">
Managing your <span className="text-brand-900">Pro</span> plan
</h3>
<p className="text-scale-1100 text-base">
<p className="text-base text-scale-1100">
Your billing cycle will reset after payment
</p>
</>
)}
</div>
<div className="bg-panel-body-light dark:bg-panel-body-dark border-panel-border-light border-panel-border-dark flex items-center justify-between gap-16 rounded border px-6 py-4 drop-shadow-sm">
<div className="flex items-center justify-between gap-16 rounded border border-panel-border-light border-panel-border-dark bg-panel-body-light px-6 py-4 drop-shadow-sm dark:bg-panel-body-dark">
<div>
<div className="flex items-center space-x-2">
<p>Enable spend cap</p>
@@ -204,7 +204,7 @@ const ProUpgrade: FC<Props> = ({
onClick={() => setShowSpendCapHelperModal(true)}
/>
</div>
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
If enabled, additional resources will not be charged on a per-usage basis
</p>
</div>
@@ -281,11 +281,11 @@ const ProUpgrade: FC<Props> = ({
</p>
{/* Maybe instead of a table, show something more interactive like a spend cap playground */}
{/* Maybe ideate this in Figma first but this is good enough for now */}
<div className="border-scale-600 bg-scale-500 rounded border">
<div className="rounded border border-scale-600 bg-scale-500">
<div className="flex items-center px-4 pt-2 pb-1">
<p className="text-scale-1100 w-[50%] text-sm">Item</p>
<p className="text-scale-1100 w-[25%] text-sm">Limit</p>
<p className="text-scale-1100 w-[25%] text-sm">Rate</p>
<p className="w-[50%] text-sm text-scale-1100">Item</p>
<p className="w-[25%] text-sm text-scale-1100">Limit</p>
<p className="w-[25%] text-sm text-scale-1100">Rate</p>
</div>
<div className="py-1">
<div className="flex items-center px-4 py-1">
@@ -315,11 +315,11 @@ const ProUpgrade: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
'border-scale-200 border ', //border
'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
'border border-scale-200 ', //border
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
Monthly Active Users: A user that has made an API request in the last
month
</span>
studio/components/interfaces/Billing/Subscription/CostBreakdownRow.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { FC } from 'react'
import { Badge } from '@supabase/ui'
import { Badge } from 'common2'
interface Props {
item: string
@@ -11,12 +11,12 @@ interface Props {
const CostBreakdownRow: FC<Props> = ({ item, amount, unitPrice, price, freeQuota }) => {
return (
<div className="border-panel-border-light dark:border-panel-border-dark relative flex items-center border-t px-6 py-3">
<div className="relative flex items-center border-t border-panel-border-light px-6 py-3 dark:border-panel-border-dark">
<div className="flex w-[40%] items-center gap-3">
<span className="text-sm">{item}</span>
{freeQuota && (
<Badge color="scale">
<span className="text-scale-900 text-xs">{`${freeQuota / 1000000000}GB included`}</span>
<span className="text-xs text-scale-900">{`${freeQuota / 1000000000}GB included`}</span>
</Badge>
)}
</div>
studio/components/interfaces/Billing/Subscription/Subscription.tsx
+14 -14
View File
@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
import { FC } from 'react'
import { sum } from 'lodash'
import { useRouter } from 'next/router'
import { Button, Loading } from '@supabase/ui'
import { Button, Loading } from 'common2'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -65,11 +65,11 @@ const Subscription: FC<Props> = ({
return (
<Loading active={loading}>
<div className="border-panel-border-light dark:border-panel-border-dark mb-8 w-full overflow-hidden rounded border">
<div className="mb-8 w-full overflow-hidden rounded border border-panel-border-light dark:border-panel-border-dark">
<div className="bg-panel-body-light dark:bg-panel-body-dark">
<div className="flex items-center justify-between px-6 pt-4">
<div className="flex flex-col">
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
{showProjectName ? project.name : 'Current subscription'}
</p>
<h3 className="mb-0 text-xl">{subscription?.tier.name ?? '-'}</h3>
@@ -95,11 +95,11 @@ const Subscription: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'border-scale-200 border text-center', //border
'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
'border border-scale-200 text-center', //border
'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
{projectUpdateDisabled ? (
<>
Subscription changes are currently disabled.
@@ -131,7 +131,7 @@ const Subscription: FC<Props> = ({
</div>
)}
<div className="mt-2 px-6 pb-4">
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
See our{' '}
<a href="https://supabase.com/pricing" target="_blank" className="underline">
pricing
@@ -147,18 +147,18 @@ const Subscription: FC<Props> = ({
) : !loading && subscription ? (
// Cost breakdown
<>
<div className="border-panel-border-light dark:border-panel-border-dark relative flex items-center border-t px-6 py-3">
<div className="relative flex items-center border-t border-panel-border-light px-6 py-3 dark:border-panel-border-dark">
<div className="w-[40%]">
<p className="text-scale-900 text-xs uppercase">Item</p>
<p className="text-xs uppercase text-scale-900">Item</p>
</div>
<div className="flex w-[20%] justify-end">
<p className="text-scale-900 text-xs uppercase">Amount</p>
<p className="text-xs uppercase text-scale-900">Amount</p>
</div>
<div className="flex w-[20%] justify-end">
<p className="text-scale-900 text-xs uppercase">Unit Price</p>
<p className="text-xs uppercase text-scale-900">Unit Price</p>
</div>
<div className="flex w-[20%] justify-end">
<p className="text-scale-900 text-xs uppercase">Price</p>
<p className="text-xs uppercase text-scale-900">Price</p>
</div>
</div>
<CostBreakdownRow
@@ -195,9 +195,9 @@ const Subscription: FC<Props> = ({
)
})
)}
<div className="border-panel-border-light dark:border-panel-border-dark relative flex items-center border-t px-6 py-3">
<div className="relative flex items-center border-t border-panel-border-light px-6 py-3 dark:border-panel-border-dark">
<div className="w-[80%]">
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
Estimated cost for {dayjs.unix(currentPeriodStart).utc().format('MMM D, YYYY')}{' '}
- {dayjs.unix(currentPeriodEnd).utc().format('MMM D, YYYY')} so far
</p>
studio/components/interfaces/Billing/UpdateSuccess.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import { useRouter } from 'next/router'
import { Button, IconCheckCircle } from '@supabase/ui'
import { Button, IconCheckCircle } from 'common2'
interface Props {
title: string
@@ -14,7 +14,7 @@ const UpdateSuccess: FC<Props> = ({ title, message, projectRef }) => {
return (
<div
style={{ height: 'calc(100vh - 5rem - 49.5px)' }}
className="space-y-4 flex flex-col justify-center max-w-xl mx-auto"
className="mx-auto flex max-w-xl flex-col justify-center space-y-4"
>
<div className="flex items-center space-x-4">
<IconCheckCircle strokeWidth={2} />
studio/components/interfaces/Database/Backups/BackupItem.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
import { FC, useState } from 'react'
import { useRouter } from 'next/router'
import { observer } from 'mobx-react-lite'
import { Badge, Button, IconDownload } from '@supabase/ui'
import { Badge, Button, IconDownload } from 'common2'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useStore, checkPermissions } from 'hooks'
@@ -121,10 +121,10 @@ const BackupItem: FC<Props> = ({ projectRef, backup, index }) => {
return (
<div
className={`flex h-12 items-center justify-between px-6 ${
index ? 'dark:border-dark border-t' : ''
index ? 'border-t dark:border-dark' : ''
}`}
>
<p className="text-scale-1200 text-sm ">
<p className="text-sm text-scale-1200 ">
{dayjs(backup.inserted_at).format('DD MMM YYYY HH:mm:ss')}
</p>
<div className="">{generateSideButtons(backup)}</div>
studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { IconInfo } from '@supabase/ui'
import { IconInfo } from 'common2'
const BackupsEmpty = () => {
return (
studio/components/interfaces/Database/Backups/BackupsError.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { IconInfo } from '@supabase/ui'
import { IconInfo } from 'common2'
import Link from 'next/link'
const BackupsError = () => {
studio/components/interfaces/Database/Backups/BackupsList.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import BackupsError from './BackupsError'
import BackupsEmpty from './BackupsEmpty'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import InformationBox from 'components/ui/InformationBox'
import { IconAlertCircle } from '@supabase/ui'
import { IconAlertCircle } from 'common2'
interface Props {}
studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx
+6 -6
View File
@@ -12,7 +12,7 @@ import {
Button,
Modal,
IconAlertCircle,
} from '@supabase/ui'
} from 'common2'
import { post } from 'lib/common/fetch'
import { API_URL, PROJECT_STATUS } from 'lib/constants'
@@ -192,7 +192,7 @@ const PITRBackupSelection: FC<Props> = () => {
<IconSearch size={14} />
<input
autoFocus
className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
className="w-72 bg-transparent text-sm placeholder-scale-1000 outline-none"
value={searchString}
placeholder={''}
onChange={(e: FormEvent<HTMLInputElement>) =>
@@ -252,7 +252,7 @@ const PITRBackupSelection: FC<Props> = () => {
<div className="flex justify-between space-x-8 py-2">
<div className="w-2/5 space-y-2 pl-4">
<p className="text-sm">Recovery point</p>
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
Select a date and time that you would like to restore your project to
</p>
</div>
@@ -286,15 +286,15 @@ const PITRBackupSelection: FC<Props> = () => {
<Modal.Content>
<div className="space-y-2 py-4">
<div className="space-y-1">
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
Are you sure you want to restore your database from:
</p>
<p className="text-scale-1200 text-sm">
<p className="text-sm text-scale-1200">
{dayjs(recoveryPoint).format('DD MMM YYYY, HH:mm:ss')} (
{getTimezoneOffsetText(selectedTimezone)})?
</p>
</div>
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
This will destroy any new data written since this backup was made.
</p>
</div>
studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { FC, useEffect, useState } from 'react'
import { Button, Input, Form, Modal, Listbox, IconPlus, IconDatabase } from '@supabase/ui'
import { Button, Input, Form, Modal, Listbox, IconPlus, IconDatabase } from 'common2'
import { PostgresExtension, PostgresSchema } from '@supabase/postgres-meta'
import { useStore } from 'hooks'
@@ -102,7 +102,7 @@ const EnableExtensionModal: FC<Props> = ({ visible, extension, onCancel }) => {
onCancel={onCancel}
size="small"
header={
<div className="flex gap-2 items-baseline">
<div className="flex items-baseline gap-2">
<h5 className="text-sm text-scale-1200">Confirm to enable</h5>
<code className="text-xs">{extension.name}</code>
</div>
studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Badge, IconLoader, Toggle } from '@supabase/ui'
import { Badge, IconLoader, Toggle } from 'common2'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { checkPermissions, useStore } from 'hooks'
@@ -62,19 +62,19 @@ const ExtensionCard: FC<Props> = ({ extension }) => {
<>
<div
className={[
'border-panel-border-light dark:border-panel-border-dark flex',
'flex border-panel-border-light dark:border-panel-border-dark',
'flex-col overflow-hidden rounded border shadow-sm',
].join(' ')}
>
<div
className={[
'bg-panel-header-light dark:bg-panel-header-dark border-panel-border-light',
'dark:border-panel-border-dark flex border-b p-4 px-6',
'border-panel-border-light bg-panel-header-light dark:bg-panel-header-dark',
'flex border-b p-4 px-6 dark:border-panel-border-dark',
].join(' ')}
>
<h3
title={extension.name}
className="text-scale-1200 m-0 h-5 flex-1 truncate text-base uppercase"
className="m-0 h-5 flex-1 truncate text-base uppercase text-scale-1200"
>
{extension.name}
</h3>
@@ -96,13 +96,13 @@ const ExtensionCard: FC<Props> = ({ extension }) => {
].join(' ')}
>
<div className="p-4 px-6">
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
<span className="flex-grow capitalize">{extension.comment}</span>
</p>
</div>
{isOn && extension.schema && (
<div className="p-4 px-6">
<div className="text-scale-1100 text-sm flex-grow space-x-2 flex items-center">
<div className="flex flex-grow items-center space-x-2 text-sm text-scale-1100">
<span>Schema:</span>
<Badge>{`${extension.schema}`}</Badge>
</div>
studio/components/interfaces/Database/Extensions/Extensions.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { partition, isNull } from 'lodash'
import { Input, IconSearch, IconAlertCircle } from '@supabase/ui'
import { Input, IconSearch, IconAlertCircle } from 'common2'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useStore, useFlag, checkPermissions } from 'hooks'
studio/components/interfaces/Database/Functions/CreateFunction.tsx
+8 -8
View File
@@ -11,7 +11,7 @@ import {
IconPlus,
Toggle,
Modal,
} from '@supabase/ui'
} from 'common2'
import { Dictionary } from 'components/grid'
import { makeAutoObservable } from 'mobx'
@@ -368,12 +368,12 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
visible={visible}
onCancel={isClosingSidePanel}
header={_localState.title}
className="hooks-sidepanel transform transition-all duration-300 ease-in-out mr-0"
className="hooks-sidepanel mr-0 transform transition-all duration-300 ease-in-out"
loading={_localState.loading}
onConfirm={handleSubmit}
>
<CreateFunctionContext.Provider value={_localState}>
<div className="space-y-10 mt-4">
<div className="mt-4 space-y-10">
{_localState.isEditing ? (
<>
<SidePanel.Content>
@@ -414,7 +414,7 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
<SidePanel.Seperator />
<SidePanel.Content>
<Panel>
<div className={`space-y-8 py-4 bg-bg-alt-light dark:bg-bg-alt-dark rounded`}>
<div className={`space-y-8 rounded bg-bg-alt-light py-4 dark:bg-bg-alt-dark`}>
<div className={`px-6`}>
<Toggle
onChange={() => _localState.toggleAdvancedVisible()}
@@ -460,7 +460,7 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
}}
children={
<Modal.Content>
<p className="text-scale-1100 py-4 text-sm">
<p className="py-4 text-sm text-scale-1100">
There are unsaved changes. Are you sure you want to close the panel? Your changes
will be lost.
</p>
@@ -519,7 +519,7 @@ const InputMultiArguments: FC<InputMultiArgumentsProps> = observer(({ readonly }
Arguments can be referenced in the function body using either names or numbers.
</p>
</div>
<div className="pt-4 space-y-2">
<div className="space-y-2 pt-4">
{readonly && isEmpty(_localState!.formState.args.value) && (
<span className="text-scale-900">No argument for this function</span>
)}
@@ -640,10 +640,10 @@ const InputMultiConfigParams: FC = observer(({}) => {
return (
<div>
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<h5 className="text-base text-scale-1200">Config Params</h5>
</div>
<div className="pt-4 space-y-2">
<div className="space-y-2 pt-4">
{_localState!.formState.configParams.value.map(
(
x: { name: string; value: string; error?: { name?: string; value?: string } },
studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
+4 -11
View File
@@ -1,14 +1,7 @@
import { FC } from 'react'
import { useRouter } from 'next/router'
import { includes } from 'lodash'
import {
Button,
Dropdown,
IconEdit3,
IconFileText,
IconMoreVertical,
IconTrash,
} from '@supabase/ui'
import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'common2'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -100,11 +93,11 @@ const FunctionList: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to update functions
</span>
</div>
studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import { uniqBy, map as lodashMap, includes } from 'lodash'
import { Button, IconSearch, IconLoader, Input } from '@supabase/ui'
import { Button, IconSearch, IconLoader, Input } from 'common2'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -53,11 +53,11 @@ const FunctionsList: FC<any> = ({
onClickCta={() => createFunction()}
>
<AlphaPreview />
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
PostgreSQL functions, also known as stored procedures, is a set of SQL and procedural
commands such as declarations, assignments, loops, flow-of-control, etc.
</p>
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
It's stored on the database server and can be invoked using the SQL interface.
</p>
</ProductEmptyState>
@@ -83,11 +83,11 @@ const FunctionsList: FC<any> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to create functions
</span>
</div>
@@ -96,7 +96,7 @@ const FunctionsList: FC<any> = ({
</Tooltip.Root>
</div>
{filteredFunctions.length <= 0 && (
<div className="dark:border-dark mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md">
<div className="mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md dark:border-dark">
<p>No results match your filter query</p>
<Button type="outline" onClick={() => setFilterString('')}>
Reset filter
studio/components/interfaces/Database/Hooks/CreateHook/CheckboxEvents.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Checkbox } from '@supabase/ui'
import { Checkbox } from 'common2'
import { union, without } from 'lodash'
import { CreateHookContext } from './'
studio/components/interfaces/Database/Hooks/CreateHook/InputName.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Input } from '@supabase/ui'
import { Input } from 'common2'
import { CreateHookContext } from './'
const InputName: FC = observer(({}) => {
studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import Image from 'next/image'
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Radio, Badge } from '@supabase/ui'
import { Radio, Badge } from 'common2'
import { CreateHookContext } from '../'
interface Props {
studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/index.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Radio } from '@supabase/ui'
import { Radio } from 'common2'
import { CreateHookContext } from '../'
import RadioHookService from './RadioHookService'
studio/components/interfaces/Database/Hooks/CreateHook/SelectEnabledMode.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Select } from '@supabase/ui'
import { Select } from 'common2'
import { CreateHookContext } from './'
const SelectEnabledMode: FC = observer(({}) => {
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceHeaders.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Button, IconPlus } from '@supabase/ui'
import { Button, IconPlus } from 'common2'
import { CreateHookContext } from '../'
import InputServiceHeader from './InputServiceHeader'
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceParams.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Button, IconPlus } from '@supabase/ui'
import { Button, IconPlus } from 'common2'
import { CreateHookContext } from '../'
import InputServiceParam from './InputServiceParam'
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceHeader.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext, FormEvent } from 'react'
import { observer } from 'mobx-react-lite'
import { Input, IconTrash, Button } from '@supabase/ui'
import { Input, IconTrash, Button } from 'common2'
import { CreateHookContext } from '../'
interface Props {
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceParam.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext, FormEvent } from 'react'
import { observer } from 'mobx-react-lite'
import { Input, IconTrash, Button } from '@supabase/ui'
import { Input, IconTrash, Button } from 'common2'
import { CreateHookContext } from '../'
interface Props {
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceTimeout.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Input } from '@supabase/ui'
import { Input } from 'common2'
import { CreateHookContext } from '../'
// Not used currently
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceUrl.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Input } from '@supabase/ui'
import { Input } from 'common2'
import { CreateHookContext } from '../'
const InputServiceUrl: FC = observer(({}) => {
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/SelectServiceMethod.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Select } from '@supabase/ui'
import { Select } from 'common2'
import { CreateHookContext } from '../'
const SelectServiceMethod: FC = observer(({}) => {
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/ServiceUnavailableBox.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Alert, Button } from '@supabase/ui'
import { Alert, Button } from 'common2'
import { CreateHookContext } from '../'
const ServiceUnavailableBox: FC = observer(({}) => {
studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { SidePanel } from '@supabase/ui'
import { SidePanel } from 'common2'
import { CreateHookContext } from '../'
import SelectServiceMethod from './SelectServiceMethod'
studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import Link from 'next/link'
import SVG from 'react-inlinesvg'
import { FC, useContext } from 'react'
import { observer } from 'mobx-react-lite'
import { Input, Listbox } from '@supabase/ui'
import { Input, Listbox } from 'common2'
import { CreateHookContext } from './'
import { useStore } from 'hooks'
@@ -71,7 +71,7 @@ const TableSelection: FC = observer(({}) => {
value={x.id}
label={x.name}
addOnBefore={() => (
<div className="bg-scale-1200 text-scale-100 flex items-center justify-center rounded p-1 ">
<div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
<SVG
src={'/img/table-editor.svg'}
style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
+5 -5
View File
@@ -3,7 +3,7 @@ import { FC, useEffect, createContext } from 'react'
import { observer, useLocalObservable } from 'mobx-react-lite'
import { isEmpty, mapValues, has, filter, keyBy, isUndefined } from 'lodash'
import { Dictionary } from 'components/grid'
import { Badge, Input, SidePanel } from '@supabase/ui'
import { Badge, Input, SidePanel } from 'common2'
import { useStore } from 'hooks'
import InputName from './InputName'
@@ -415,7 +415,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
<SidePanel.Seperator />
<div className="space-y-2 px-6">
<div className="flex items-center space-x-2">
<h5 className="text-scale-1200 text-base">HTTP Headers</h5>
<h5 className="text-base text-scale-1200">HTTP Headers</h5>
<Badge color="gray">Read only</Badge>
</div>
<div className="space-y-2">
@@ -450,7 +450,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
<SidePanel.Seperator />
<div className="space-y-2 px-6">
<div className="flex items-center space-x-2">
<h5 className="text-scale-1200 text-base">HTTP Parameters</h5>
<h5 className="text-base text-scale-1200">HTTP Parameters</h5>
<Badge color="gray">Read only</Badge>
</div>
<div className="space-y-2">
@@ -487,13 +487,13 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
</div>
<SidePanel.Seperator />
<div className="space-y-6 px-6">
<h5 className="text-scale-1200 text-base">Conditions to fire hook</h5>
<h5 className="text-base text-scale-1200">Conditions to fire hook</h5>
<TableSelection />
<CheckboxEvents />
</div>
<SidePanel.Seperator />
<div className="space-y-6 px-6">
<h5 className="text-scale-1200 text-base">Type of hook</h5>
<h5 className="text-base text-scale-1200">Type of hook</h5>
<RadioGroupHookService />
</div>
<ServiceConfigForm />
studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
+4 -4
View File
@@ -3,7 +3,7 @@ import { includes } from 'lodash'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from '@supabase/ui'
import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from 'common2'
import { checkPermissions, useStore } from 'hooks'
import Table from 'components/to-be-cleaned/Table'
@@ -89,11 +89,11 @@ const HookList: FC<Props> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to update webhooks
</span>
</div>
studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
+8 -8
View File
@@ -2,7 +2,7 @@ import { FC } from 'react'
import { includes, uniqBy, map as lodashMap } from 'lodash'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, Input, IconSearch, IconLoader } from '@supabase/ui'
import { Button, Input, IconSearch, IconLoader } from 'common2'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useStore, checkPermissions } from 'hooks'
@@ -38,7 +38,7 @@ const HooksList: FC<any> = ({
return (
<>
{schemas.length === 0 ? (
<span className="text-scale-1100 px-6 py-4">Checking if hooks are enabled...</span>
<span className="px-6 py-4 text-scale-1100">Checking if hooks are enabled...</span>
) : (
<ProductEmptyState
title="Hooks"
@@ -48,7 +48,7 @@ const HooksList: FC<any> = ({
disabledMessage="You need additional permissions to enable hooks"
>
<AlphaPreview />
<p className="text-scale-1100 text-sm">Enable hooks on your project.</p>
<p className="text-sm text-scale-1100">Enable hooks on your project.</p>
</ProductEmptyState>
)}
</>
@@ -85,7 +85,7 @@ const HooksList: FC<any> = ({
disabledMessage="You need additional permissions to create webhooks"
>
<AlphaPreview />
<p className="text-scale-1100 text-sm">
<p className="text-sm text-scale-1100">
Database Webhooks can be used to trigger serverless functions or send requests to an
HTTP endpoint.
</p>
@@ -112,11 +112,11 @@ const HooksList: FC<any> = ({
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'bg-scale-100 rounded py-1 px-2 leading-none shadow',
'border-scale-200 border',
'rounded bg-scale-100 py-1 px-2 leading-none shadow',
'border border-scale-200',
].join(' ')}
>
<span className="text-scale-1200 text-xs">
<span className="text-xs text-scale-1200">
You need additional permissions to create webhooks
</span>
</div>
@@ -125,7 +125,7 @@ const HooksList: FC<any> = ({
</Tooltip.Root>
</div>
{filteredHooks.length <= 0 && (
<div className="dark:border-dark mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md">
<div className="mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md dark:border-dark">
<p>No results match your filter query</p>
<Button type="outline" onClick={() => setFilterString('')}>
Reset filter
studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { API_URL } from 'lib/constants'
import { patch } from 'lib/common/fetch'
import ToggleField from 'components/to-be-cleaned/forms/ToggleField'
import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
import { Input } from '@supabase/ui'
import { Input } from 'common2'
interface Props {}
@@ -184,7 +184,7 @@ export const PgbouncerConfig: FC<ConfigProps> = observer(
showInlineError
errorMessage="You must select one of the three options"
/>
<div className="flex !mt-1" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
<div className="!mt-1 flex" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
<p className="text-sm text-scale-900">
Specify when a connection can be returned to the pool. To find out the most
suitable mode for your use case,{' '}
studio/components/interfaces/Database/Publications/PublicationsList.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Button, Input, Toggle, IconSearch, IconAlertCircle } from '@supabase/ui'
import { Button, Input, Toggle, IconSearch, IconAlertCircle } from 'common2'
import { checkPermissions, useStore } from 'hooks'
import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Badge, Toggle } from '@supabase/ui'
import { Badge, Toggle } from 'common2'
import { PostgresPublication, PostgresTable } from '@supabase/postgres-meta'
import { PermissionAction } from '@supabase/shared-types/out/constants'
studio/components/interfaces/Database/Publications/PublicationsTables.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Button, Input, IconChevronLeft, IconSearch, IconAlertCircle } from '@supabase/ui'
import { Button, Input, IconChevronLeft, IconSearch, IconAlertCircle } from 'common2'
import { PostgresPublication } from '@supabase/postgres-meta'
import { PermissionAction } from '@supabase/shared-types/out/constants'
studio/components/interfaces/Database/Roles/RolesList.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { FC } from 'react'
import { observer } from 'mobx-react-lite'
import { IconChevronRight } from '@supabase/ui'
import { IconChevronRight } from 'common2'
import { useStore } from 'hooks'
import SparkBar from 'components/ui/SparkBar'
Loaded 100 of 311 files, more files were not shown because too many files have changed in this diff. Show more