new-api/web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx

/*
Copyright (C) 2023-2026 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/
import { useState } from 'react'
import { Pencil, Trash2, Plus } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { StaticDataTable } from '@/components/data-table'
import { StatusBadge } from '@/components/status-badge'
import { useDeleteProvider } from '../hooks/use-custom-oauth-mutations'
import type { CustomOAuthProvider } from '../types'

type ProviderTableProps = {
  providers: CustomOAuthProvider[]
  onEdit: (provider: CustomOAuthProvider) => void
  onCreate: () => void
}

export function ProviderTable(props: ProviderTableProps) {
  const { t } = useTranslation()
  const deleteProvider = useDeleteProvider()
  const [deleteTarget, setDeleteTarget] = useState<CustomOAuthProvider | null>(
    null
  )

  const handleDelete = async () => {
    if (!deleteTarget) return
    await deleteProvider.mutateAsync(deleteTarget.id)
    setDeleteTarget(null)
  }

  return (
    <>
      <div className='flex items-center justify-between'>
        <p className='text-muted-foreground text-sm'>
          {t('Manage custom OAuth providers for user authentication')}
        </p>
        <Button size='sm' onClick={props.onCreate}>
          <Plus className='mr-1.5 h-4 w-4' />
          {t('Add Provider')}
        </Button>
      </div>

      <StaticDataTable
        data={props.providers}
        getRowKey={(provider) => provider.id}
        emptyClassName='text-sm'
        emptyContent={t('No custom OAuth providers configured yet.')}
        columns={[
          {
            id: 'icon',
            header: t('Icon'),
            cell: (provider) =>
              provider.icon ? (
                <span className='text-lg'>{provider.icon}</span>
              ) : (
                <span className='text-muted-foreground text-sm'>--</span>
              ),
          },
          {
            id: 'name',
            header: t('Name'),
            cellClassName: 'font-medium',
            cell: (provider) => provider.name,
          },
          {
            id: 'slug',
            header: t('Slug'),
            cell: (provider) => (
              <StatusBadge
                label={provider.slug}
                variant='neutral'
                copyable={false}
              />
            ),
          },
          {
            id: 'status',
            header: t('Status'),
            cell: (provider) => (
              <StatusBadge
                label={provider.enabled ? t('Enabled') : t('Disabled')}
                variant={provider.enabled ? 'success' : 'neutral'}
                copyable={false}
              />
            ),
          },
          {
            id: 'client-id',
            header: t('Client ID'),
            cellClassName: 'text-muted-foreground max-w-[120px] truncate font-mono',
            cell: (provider) => provider.client_id,
          },
          {
            id: 'actions',
            header: t('Actions'),
            className: 'text-right',
            cellClassName: 'text-right',
            cell: (provider) => (
              <div className='flex justify-end gap-1'>
                <Button
                  variant='ghost'
                  size='sm'
                  onClick={() => props.onEdit(provider)}
                >
                  <Pencil className='h-4 w-4' />
                </Button>
                <Button
                  variant='ghost'
                  size='sm'
                  onClick={() => setDeleteTarget(provider)}
                >
                  <Trash2 className='text-destructive h-4 w-4' />
                </Button>
              </div>
            ),
          },
        ]}
      />

      <ConfirmDialog
        open={!!deleteTarget}
        onOpenChange={(open) => !open && setDeleteTarget(null)}
        title={t('Delete Provider')}
        desc={t(
          'Are you sure you want to delete "{{name}}"? Users who authenticated with this provider will no longer be able to log in.',
          { name: deleteTarget?.name || '' }
        )}
        confirmText={t('Delete')}
        destructive
        handleConfirm={handleDelete}
        isLoading={deleteProvider.isPending}
      />
    </>
  )
}