Chore/autofix views (supabase#33363)

* Autofix security status of views * Update apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx Co-authored-by: Charis <[email protected]> --------- Co-authored-by: Charis <[email protected]>
saltcod · Feb 5, 2025 · 4e12a1f · 4e12a1f
1 parent dd7da21
commit 4e12a1f
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 2 deletions.
diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -38,6 +38,7 @@ import {
 import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { RoleImpersonationPopover } from '../RoleImpersonationSelector'
+import ViewEntityAutofixSecurityModal from './ViewEntityAutofixSecurityModal'
 
 export interface GridHeaderActionsProps {
   table: Entity
@@ -73,7 +74,7 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
   const [open, setOpen] = useState(false)
   const [showEnableRealtime, setShowEnableRealtime] = useState(false)
   const [rlsConfirmModalOpen, setRlsConfirmModalOpen] = useState(false)
-
+  const [isAutofixViewSecurityModalOpen, setIsAutofixViewSecurityModalOpen] = useState(false)
   const state = useTrackedState()
   const { selectedRows } = state
   const showHeaderActions = selectedRows.size === 0
@@ -299,7 +300,15 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
                     APIs.
                   </p>
 
-                  <div className="mt-2">
+                  <div className="mt-2 flex items-center gap-2">
+                    <Button
+                      type="secondary"
+                      onClick={() => {
+                        setIsAutofixViewSecurityModalOpen(true)
+                      }}
+                    >
+                      Autofix
+                    </Button>
                     <Button type="default" asChild>
                       <Link
                         target="_blank"
@@ -424,6 +433,13 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
           )}
         </div>
       </ConfirmationModal>
+
+      <ViewEntityAutofixSecurityModal
+        table={table}
+        isAutofixViewSecurityModalOpen={isAutofixViewSecurityModalOpen}
+        setIsAutofixViewSecurityModalOpen={setIsAutofixViewSecurityModalOpen}
+      />
+
       {isTable && (
         <ConfirmModal
           danger={table.rls_enabled}

diff --git a/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx b/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx
@@ -0,0 +1,92 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useViewDefinitionQuery } from 'data/database/view-definition-query'
+import { useExecuteSqlMutation } from 'data/sql/execute-sql-mutation'
+import { Entity } from 'data/table-editor/table-editor-types'
+import { toast } from 'sonner'
+import { ScrollArea, SimpleCodeBlock } from 'ui'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { lintKeys } from '../../../data/lint/keys'
+
+interface ViewEntityAutofixSecurityModalProps {
+  table: Entity
+  isAutofixViewSecurityModalOpen: boolean
+  setIsAutofixViewSecurityModalOpen: (isAutofixViewSecurityModalOpen: boolean) => void
+}
+
+export default function ViewEntityAutofixSecurityModal({
+  table,
+  isAutofixViewSecurityModalOpen,
+  setIsAutofixViewSecurityModalOpen,
+}: ViewEntityAutofixSecurityModalProps) {
+  const { project } = useProjectContext()
+  const queryClient = useQueryClient()
+  const viewDefinition = useViewDefinitionQuery({
+    id: table?.id,
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+
+  const { mutate: execute } = useExecuteSqlMutation({
+    onSuccess: async () => {
+      toast.success('View security changed successfully')
+      setIsAutofixViewSecurityModalOpen(false)
+      await queryClient.invalidateQueries(lintKeys.lint(project?.ref))
+    },
+    onError: (error) => {
+      toast.error(`Failed to autofix view security: ${error.message}`)
+    },
+  })
+
+  function handleConfirm() {
+    const sql = `
+	ALTER VIEW "${table.schema}"."${table.name}" SET (security_invoker = on);
+	`
+    execute({
+      projectRef: project?.ref,
+      connectionString: project?.connectionString,
+      sql,
+    })
+  }
+
+  return (
+    <ConfirmationModal
+      visible={isAutofixViewSecurityModalOpen}
+      size="xlarge"
+      title="Confirm autofixing view security"
+      confirmLabel="Confirm"
+      onCancel={() => setIsAutofixViewSecurityModalOpen(false)}
+      onConfirm={() => {
+        handleConfirm()
+      }}
+    >
+      <p className="text-sm text-foreground-light">
+        Setting <code>security_invoker=on</code> ensures the View runs with the permissions of the
+        querying user, reducing the risk of unintended data exposure.
+      </p>
+      <div className="flex items-center gap-8 mt-8">
+        <div className=" border rounded-md w-1/2">
+          <div className="p-4 bg-200 font-mono text-sm font-semibold">Existing query</div>
+          <ScrollArea className="h-[225px] px-4 py-2">
+            {viewDefinition.data && (
+              <SimpleCodeBlock>
+                {`create view ${table.schema}.${table.name} as\n ${viewDefinition.data}`}
+              </SimpleCodeBlock>
+            )}
+          </ScrollArea>
+        </div>
+
+        <div className=" border rounded-md w-1/2">
+          <div className="p-4 bg-200 font-mono text-sm font-semibold">Updated query</div>
+          <ScrollArea className="h-[225px] px-4 py-2">
+            {viewDefinition.data && (
+              <SimpleCodeBlock>
+                {`create view ${table.schema}.${table.name} with (security_invoker = on) as\n ${viewDefinition.data}`}
+              </SimpleCodeBlock>
+            )}
+          </ScrollArea>
+        </div>
+      </div>
+    </ConfirmationModal>
+  )
+}