Policies.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { useMemo, useState } from 'react'
  2. import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
  3. import { Policies } from '@/components/interfaces/Auth/Policies/Policies'
  4. import { PoliciesDataProvider } from '@/components/interfaces/Auth/Policies/PoliciesDataContext'
  5. import { PolicyEditorPanel } from '@/components/interfaces/Auth/Policies/PolicyEditorPanel'
  6. import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
  7. import AlertError from '@/components/ui/AlertError'
  8. import { useDatabasePoliciesQuery } from '@/data/database-policies/database-policies-query'
  9. import { useTablesQuery } from '@/data/tables/tables-query'
  10. import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
  11. export const RealtimePolicies = () => {
  12. const { data: project } = useSelectedProjectQuery()
  13. const [showPolicyEditor, setShowPolicyEditor] = useState(false)
  14. const [selectedPolicyToEdit, setSelectedPolicyToEdit] = useState<Policy>()
  15. const {
  16. data: tables,
  17. isPending: isLoading,
  18. isSuccess,
  19. isError,
  20. error,
  21. } = useTablesQuery({
  22. projectRef: project?.ref,
  23. connectionString: project?.connectionString,
  24. schema: 'realtime',
  25. })
  26. const filteredTables = useMemo(
  27. () => (tables ?? []).filter((table) => table.name === 'messages'),
  28. [tables]
  29. )
  30. const visibleTableIds = useMemo(
  31. () => new Set(filteredTables.map((table) => table.id)),
  32. [filteredTables]
  33. )
  34. const {
  35. data: policies,
  36. isPending: isLoadingPolicies,
  37. isError: isPoliciesError,
  38. error: policiesError,
  39. } = useDatabasePoliciesQuery({
  40. projectRef: project?.ref,
  41. connectionString: project?.connectionString,
  42. })
  43. // realtime is never in PostgREST's db_schema — skip the config query to avoid a false warning
  44. const exposedSchemas = useMemo(() => ['realtime'], [])
  45. return (
  46. <>
  47. {isLoading && <GenericSkeletonLoader />}
  48. {isError && <AlertError error={error} subject="Failed to retrieve tables" />}
  49. {isSuccess && (
  50. <PoliciesDataProvider
  51. policies={policies ?? []}
  52. isPoliciesLoading={isLoadingPolicies}
  53. isPoliciesError={isPoliciesError}
  54. policiesError={policiesError ?? undefined}
  55. exposedSchemas={exposedSchemas}
  56. >
  57. <Policies
  58. schema="realtime"
  59. tables={filteredTables}
  60. hasTables
  61. isLocked={false}
  62. visibleTableIds={visibleTableIds}
  63. onSelectCreatePolicy={(_tableName) => {
  64. setSelectedPolicyToEdit(undefined)
  65. setShowPolicyEditor(true)
  66. }}
  67. onSelectEditPolicy={(policy) => {
  68. setSelectedPolicyToEdit(policy)
  69. setShowPolicyEditor(true)
  70. }}
  71. />
  72. </PoliciesDataProvider>
  73. )}
  74. <PolicyEditorPanel
  75. visible={showPolicyEditor}
  76. searchString="messages"
  77. schema="realtime"
  78. selectedPolicy={selectedPolicyToEdit}
  79. onSelectCancel={() => setShowPolicyEditor(false)}
  80. authContext="realtime"
  81. />
  82. </>
  83. )
  84. }