feat(tiles): revoke shareable link (#1237)

<img width="661" height="207" alt="image"
src="https://github.com/user-attachments/assets/58200ef4-1bb9-4de3-a7b2-ce8cf11cbe62"
/>

Author: pregnantboy

packages/backend/src/graphql/mutations/tiles/delete-table-shareable-link.ts

@@ -0,0 +1,23 @@
+import TableCollaborator from '@/models/table-collaborators'
+import TableMetadata from '@/models/table-metadata'
+
+import type { MutationResolvers } from '../../__generated__/types.generated'
+
+const deleteShareableTableLink: MutationResolvers['deleteShareableTableLink'] =
+  async (_parent, params, context) => {
+    const tableId = params.tableId
+
+    await TableCollaborator.hasAccess(context.currentUser.id, tableId, 'editor')
+
+    const table = await TableMetadata.query()
+      .findById(tableId)
+      .throwIfNotFound()
+
+    await table.$query().patch({
+      viewOnlyKey: null,
+    })
+
+    return true
+  }
+
+export default deleteShareableTableLink

packages/backend/src/graphql/mutations/tiles/index.ts

@@ -7,6 +7,7 @@ import createShareableTableLink from './create-table-shareable-link'
 import deleteRows from './delete-rows'
 import deleteTable from './delete-table'
 import deleteTableCollaborator from './delete-table-collaborator'
+import deleteShareableTableLink from './delete-table-shareable-link'
 import updateRow from './update-row'
 import updateTable from './update-table'
 import upsertTableCollaborator from './upsert-table-collaborator'
@@ -20,6 +21,7 @@ export default {
   updateRow,
   deleteRows,
   createShareableTableLink,
+  deleteShareableTableLink,
   deleteTableCollaborator,
   upsertTableCollaborator,
 } satisfies MutationResolvers

packages/backend/src/graphql/schema.graphql

@@ -105,6 +105,7 @@ type Mutation {
   # Tiles
   createTable(input: CreateTableInput!): TableMetadata!
   createShareableTableLink(tableId: ID!): String!
+  deleteShareableTableLink(tableId: ID!): Boolean!
   updateTable(input: UpdateTableInput!): TableMetadata!
   deleteTable(input: DeleteTableInput!): Boolean!
   # Tiles rows

packages/backend/src/models/table-metadata.ts

@@ -11,7 +11,7 @@ class TableMetadata extends Base {
   name: string
   collaborators!: User[]
   columns: TableColumnMetadata[]
-  viewOnlyKey?: string
+  viewOnlyKey?: string | null
 
   /**
    * for typescript support when creating TableCollaborator row in insertGraph
@@ -27,7 +27,7 @@ class TableMetadata extends Base {
     properties: {
       id: { type: 'string', format: 'uuid' },
       name: { type: 'string' },
-      viewOnlyKey: { type: 'string' },
+      viewOnlyKey: { type: ['string', 'null'] },
     },
   }
 

packages/frontend/src/graphql/mutations/tiles/delete-shareable-link.ts

@@ -0,0 +1,7 @@
+import { graphql } from '@/graphql/__generated__'
+
+export const DELETE_SHAREABLE_TABLE_LINK = graphql(`
+  mutation DeleteShareableTableLink($tableId: ID!) {
+    deleteShareableTableLink(tableId: $tableId)
+  }
+`)

packages/frontend/src/pages/Tile/components/TableBanner/ShareLink.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import { BiCopy } from 'react-icons/bi'
+import { BiCopy, BiTrash } from 'react-icons/bi'
 import { useMutation } from '@apollo/client'
 import {
   Divider,
@@ -20,6 +20,7 @@ import copy from 'clipboard-copy'
 
 import * as URLS from '@/config/urls'
 import { CREATE_SHAREABLE_TABLE_LINK } from '@/graphql/mutations/tiles/create-shareable-link'
+import { DELETE_SHAREABLE_TABLE_LINK } from '@/graphql/mutations/tiles/delete-shareable-link'
 import { GET_TABLE } from '@/graphql/queries/tiles/get-table'
 
 import { useTableContext } from '../../contexts/TableContext'
@@ -42,16 +43,48 @@ const ShareLink = () => {
     },
   )
 
+  const [deleteLink, { loading: isDeleting }] = useMutation(
+    DELETE_SHAREABLE_TABLE_LINK,
+    {
+      variables: { tableId },
+      refetchQueries: [GET_TABLE],
+    },
+  )
+
   const onGenerate = useCallback(async () => {
     await createNewLink()
     setIsNewLink(true)
   }, [createNewLink])
 
+  const onDelete = useCallback(async () => {
+    await deleteLink()
+    setIsNewLink(false)
+  }, [deleteLink])
+
   const inputBorderColor = isNewLink ? 'green.400' : 'secondary.200'
 
   if (!viewOnlyKey && !hasEditPermission) {
     return null
   }
+
+  const renderButton = () => {
+    if (viewOnlyKey) {
+      return (
+        <IconButton
+          variant="outline"
+          isLoading={isDeleting}
+          onClick={onDelete}
+          aria-label={'Revoke'}
+          icon={<BiTrash />}
+        />
+      )
+    }
+    return (
+      <Button variant="outline" isLoading={loading} onClick={onGenerate}>
+        Generate new link
+      </Button>
+    )
+  }
   return (
     <FormControl>
       <VStack spacing={2} alignItems="flex-start">
@@ -88,17 +121,11 @@ const ShareLink = () => {
               </InputRightAddon>
             </InputGroup>
           )}
-          {hasEditPermission && (
-            <Button variant="outline" isLoading={loading} onClick={onGenerate}>
-              Generate new link
-            </Button>
-          )}
+          {hasEditPermission && renderButton()}
         </Flex>
-        {viewOnlyKey && hasEditPermission && (
+        {isNewLink && (
           <FormHelperText variant={isNewLink ? 'success' : undefined}>
-            {isNewLink
-              ? 'New link generated!'
-              : 'By generating a new link, your previous link will not work anymore.'}
+            New link generated!
           </FormHelperText>
         )}
       </VStack>