Chore/update shared snippet warning (#17814)

* Adjust shared snippet language in modal

* Add read-only badge if current user doesnt own snippet

* Check for snippet

* Reverse logic

* Update

* Move read only to indicator

* Cleanup

* Check owner permissions

---------

Co-authored-by: Ant Wilson <awalias@users.noreply.github.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>

apps/studio/components/interfaces/SQLEditor/UtilityPanel/ReadOnlyBadge.tsx

@@ -0,0 +1,16 @@
+import { Badge } from 'ui'
+import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useUser } from 'common'
+
+export type ReadOnlyBadgeProps = { id: string }
+const ReadOnlyBadge = ({ id }: ReadOnlyBadgeProps) => {
+  const user = useUser()
+  const snap = useSqlEditorStateSnapshot()
+
+  const snippet = snap.snippets[id]
+  const isSnippetOwner = user?.user_metadata?.user_name === snippet?.snippet?.owner?.username
+
+  return <>{isSnippetOwner ? null : <Badge color="gray">Read-only</Badge>}</>
+}
+
+export default ReadOnlyBadge

apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx

@@ -1,17 +1,22 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { useUser } from 'common'
 import { usePrevious } from 'hooks'
 import { useEffect, useState } from 'react'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
 import { Button, IconAlertCircle, IconCheck, IconLoader, IconRefreshCcw } from 'ui'
+import ReadOnlyBadge from './ReadOnlyBadge'
 
 export type SavingIndicatorProps = { id: string }
 
 const SavingIndicator = ({ id }: SavingIndicatorProps) => {
   const snap = useSqlEditorStateSnapshot()
   const savingState = snap.savingStates[id]
+  const user = useUser()
 
   const previousState = usePrevious(savingState)
   const [showSavedText, setShowSavedText] = useState(false)
+  const snippet = snap.snippets[id]
+  const isSnippetOwner = user?.user_metadata?.user_name === snippet?.snippet?.owner?.username
 
   useEffect(() => {
     let cancel = false
@@ -33,73 +38,76 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
   }
 
   return (
-    <div className="mx-2 flex items-center gap-2">
-      {savingState === 'UPDATING_FAILED' && (
-        <Button
-          type="text"
-          size="tiny"
-          icon={<IconRefreshCcw className="text-gray-1100" size="tiny" strokeWidth={2} />}
-          onClick={retry}
-        >
-          Retry
-        </Button>
-      )}
-      {showSavedText ? (
-        <Tooltip.Root delayDuration={0}>
-          <Tooltip.Trigger>
-            <IconCheck className="text-brand" size={14} strokeWidth={3} />
-          </Tooltip.Trigger>
-          <Tooltip.Content side="bottom">
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            <div
-              className={[
-                'bg-alternative rounded py-1 px-2 leading-none shadow',
-                'border-background border ',
-              ].join(' ')}
-            >
-              <span className="text-foreground text-xs">All changes saved</span>
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      ) : savingState === 'UPDATING' ? (
-        <Tooltip.Root delayDuration={0}>
-          <Tooltip.Trigger>
-            <IconLoader className="animate-spin" size={14} strokeWidth={2} />
-          </Tooltip.Trigger>
-          <Tooltip.Content side="bottom">
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            <div
-              className={[
-                'bg-alternative rounded py-1 px-2 leading-none shadow',
-                'border-background border',
-              ].join(' ')}
-            >
-              <span className="text-foreground text-xs">Saving changes...</span>
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      ) : savingState === 'UPDATING_FAILED' ? (
-        <Tooltip.Root delayDuration={0}>
-          <Tooltip.Trigger>
-            <IconAlertCircle className="text-red-900" size={14} strokeWidth={2} />
-          </Tooltip.Trigger>
-          <Tooltip.Content side="bottom">
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            <div
-              className={[
-                'bg-alternative rounded py-1 px-2 leading-none shadow',
-                'border-background border ',
-              ].join(' ')}
-            >
-              <span className="text-foreground text-xs">Failed to save changes</span>
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      ) : null}
-      <span className="text-foreground-light text-sm">
-        {savingState === 'UPDATING_FAILED' && 'Failed to save'}
-      </span>
-    </div>
+    <>
+      <div className="mx-2 flex items-center gap-2">
+        {isSnippetOwner && savingState === 'UPDATING_FAILED' && (
+          <Button
+            type="text"
+            size="tiny"
+            icon={<IconRefreshCcw className="text-gray-1100" size="tiny" strokeWidth={2} />}
+            onClick={retry}
+          >
+            Retry
+          </Button>
+        )}
+        {showSavedText ? (
+          <Tooltip.Root delayDuration={0}>
+            <Tooltip.Trigger>
+              <IconCheck className="text-brand" size={14} strokeWidth={3} />
+            </Tooltip.Trigger>
+            <Tooltip.Content side="bottom">
+              <Tooltip.Arrow className="radix-tooltip-arrow" />
+              <div
+                className={[
+                  'bg-alternative rounded py-1 px-2 leading-none shadow',
+                  'border-background border ',
+                ].join(' ')}
+              >
+                <span className="text-foreground text-xs">All changes saved</span>
+              </div>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        ) : isSnippetOwner && savingState === 'UPDATING' ? (
+          <Tooltip.Root delayDuration={0}>
+            <Tooltip.Trigger>
+              <IconLoader className="animate-spin" size={14} strokeWidth={2} />
+            </Tooltip.Trigger>
+            <Tooltip.Content side="bottom">
+              <Tooltip.Arrow className="radix-tooltip-arrow" />
+              <div
+                className={[
+                  'bg-alternative rounded py-1 px-2 leading-none shadow',
+                  'border-background border',
+                ].join(' ')}
+              >
+                <span className="text-foreground text-xs">Saving changes...</span>
+              </div>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        ) : savingState === 'UPDATING_FAILED' ? (
+          isSnippetOwner ? (
+            <Tooltip.Root delayDuration={0}>
+              <Tooltip.Trigger>
+                <IconAlertCircle className="text-red-900" size={14} strokeWidth={2} />
+              </Tooltip.Trigger>
+              <Tooltip.Content side="bottom">
+                <Tooltip.Arrow className="radix-tooltip-arrow" />
+                <div
+                  className={[
+                    'bg-alternative rounded py-1 px-2 leading-none shadow',
+                    'border-background border ',
+                  ].join(' ')}
+                >
+                  <span className="text-foreground text-xs">Failed to save changes</span>
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          ) : (
+            <ReadOnlyBadge id={id} />
+          )
+        ) : null}
+      </div>
+    </>
   )
 }
 

apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx

@@ -38,11 +38,6 @@ const UtilityActions = ({
 
       {IS_PLATFORM && <FavoriteButton id={id} />}
 
-      {/* [Joshen] Am opting to remove this - i don't think its useful? */}
-      {/* [Joshen] Keeping in mind to not sprawl controls everywhere */}
-      {/* [Joshen] There's eventually gonna be user impersonation here as well so let's see */}
-      {/* <SizeToggleButton id={id} /> */}
-
       <Tooltip.Root delayDuration={0}>
         <Tooltip.Trigger asChild>
           <Button

apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import clsx from 'clsx'
-import { useParams } from 'common'
+import { useParams, useUser } from 'common'
 import { observer } from 'mobx-react-lite'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -98,6 +98,15 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
   const snap = useSqlEditorStateSnapshot()
   const project = useSelectedProject()
 
+  const user = useUser()
+  const { id: snippetID } = tabInfo || {}
+  const snippet =
+    snippetID !== undefined && snap.snippets && snap.snippets[snippetID] !== undefined
+      ? snap.snippets[snippetID]
+      : null
+
+  const isSnippetOwner = user?.user_metadata?.user_name === snippet?.snippet?.owner?.username
+
   const { mutate: deleteContent, isLoading: isDeleting } = useContentDeleteMutation({
     onSuccess(data) {
       if (data.id) snap.removeSnippet(data.id)
@@ -218,10 +227,13 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
             </span>
           </DropdownMenuTrigger>
           <DropdownMenuContent side="bottom" align="end">
-            <DropdownMenuItem onClick={onClickRename} className="space-x-2">
-              <IconEdit2 size="tiny" />
-              <p>Rename query</p>
-            </DropdownMenuItem>
+            {isSnippetOwner && (
+              <DropdownMenuItem onClick={onClickRename} className="space-x-2">
+                <IconEdit2 size="tiny" />
+                <p>Rename query</p>
+              </DropdownMenuItem>
+            )}
+
             {visibility === 'user' && canCreateSQLSnippet && (
               <DropdownMenuItem onClick={onClickShare} className="space-x-2">
                 <IconShare size="tiny" />
@@ -244,13 +256,15 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
                 <p>Download as migration file</p>
               </DropdownMenuItem>
             )}
-            <>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={onClickDelete} className="space-x-2">
-                <IconTrash size="tiny" />
-                <p>Delete query</p>
-              </DropdownMenuItem>
-            </>
+            {isSnippetOwner && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={onClickDelete} className="space-x-2">
+                  <IconTrash size="tiny" />
+                  <p>Delete query</p>
+                </DropdownMenuItem>
+              </>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       ) : (
@@ -312,17 +326,17 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps)
                     This SQL query will become public to all team members
                   </AlertTitle_Shadcn_>
                   <AlertDescription_Shadcn_>
-                    Anyone with access to the project can edit or delete this query.
+                    Anyone with access to the project can view it
                   </AlertDescription_Shadcn_>
                 </Alert_Shadcn_>
                 <ul className="mt-4 space-y-5">
                   <li className="flex gap-3">
                     <IconEye />
-                    <span>Anyone with access to this project will be able to view it.</span>
+                    <span>Project members will have read-only access to this query.</span>
                   </li>
                   <li className="flex gap-3">
                     <IconUnlock />
-                    <span>Anyone will be able to modify or delete it.</span>
+                    <span>Anyone will be able to duplicate it to their personal snippets.</span>
                   </li>
                 </ul>
               </div>

studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx

@@ -0,0 +1,82 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { IS_PLATFORM } from 'lib/constants'
+import { detectOS } from 'lib/helpers'
+import { Button, IconAlignLeft, IconCommand, IconCornerDownLeft } from 'ui'
+
+import FavoriteButton from './FavoriteButton'
+import SavingIndicator from './SavingIndicator'
+import SizeToggleButton from './SizeToggleButton'
+import ReadOnlyBadge from './ReadOnlyBadge'
+
+export type UtilityActionsProps = {
+  id: string
+  isExecuting?: boolean
+  isDisabled?: boolean
+  hasSelection: boolean
+  prettifyQuery: () => void
+  executeQuery: () => void
+}
+
+const UtilityActions = ({
+  id,
+  isExecuting = false,
+  isDisabled = false,
+  hasSelection,
+  prettifyQuery,
+  executeQuery,
+}: UtilityActionsProps) => {
+  const os = detectOS()
+
+  return (
+    <>
+      {IS_PLATFORM && <ReadOnlyBadge id={id} />}
+      <SavingIndicator id={id} />
+      {IS_PLATFORM && <FavoriteButton id={id} />}
+      <SizeToggleButton id={id} />
+      <Tooltip.Root delayDuration={0}>
+        <Tooltip.Trigger asChild>
+          <Button
+            type="text"
+            onClick={() => prettifyQuery()}
+            icon={<IconAlignLeft size="tiny" strokeWidth={2} className="text-gray-1100" />}
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'rounded bg-alternative py-1 px-2 leading-none shadow',
+                'border border-background',
+              ].join(' ')}
+            >
+              <span className="text-xs text-foreground">Prettify SQL</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      <Button
+        onClick={() => executeQuery()}
+        disabled={isDisabled || isExecuting}
+        loading={isExecuting}
+        type="default"
+        size="tiny"
+        className="mx-2"
+        iconRight={
+          <div className="flex items-center space-x-1">
+            {os === 'macos' ? (
+              <IconCommand size={10} strokeWidth={1.5} />
+            ) : (
+              <p className="text-xs text-foreground-light">CTRL</p>
+            )}
+            <IconCornerDownLeft size={10} strokeWidth={1.5} />
+          </div>
+        }
+      >
+        {hasSelection ? 'Run selected' : 'Run'}
+      </Button>
+    </>
+  )
+}
+
+export default UtilityActions