Merge pull request #9137 from supabase/chore/misc-in-dash-docs

Chore/misc in dash docs

studio/components/interfaces/Database/Hooks/CreateHook/index.tsx

@@ -415,7 +415,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                   <SidePanel.Seperator />
                   <div className="space-y-2 px-6">
                     <div className="flex items-center space-x-2">
-                      <h5 className="text-scale-1200 text-base">HTTP Headers</h5>
+                      <h5 className="text-base text-scale-1200">HTTP Headers</h5>
                       <Badge color="gray">Read only</Badge>
                     </div>
                     <div className="space-y-2">
@@ -442,6 +442,10 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                       )}
                     </div>
                   </div>
+                  <p className="mx-6 mt-12 text-sm text-scale-1100">
+                    <strong>Note:</strong> You can only edit a webhook's name and mode. To change
+                    other settings, you'll need to delete and recreate the webhook.
+                  </p>
                 </>
               )}
 
@@ -450,7 +454,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                   <SidePanel.Seperator />
                   <div className="space-y-2 px-6">
                     <div className="flex items-center space-x-2">
-                      <h5 className="text-scale-1200 text-base">HTTP Parameters</h5>
+                      <h5 className="text-base text-scale-1200">HTTP Parameters</h5>
                       <Badge color="gray">Read only</Badge>
                     </div>
                     <div className="space-y-2">
@@ -487,13 +491,13 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
               </div>
               <SidePanel.Seperator />
               <div className="space-y-6 px-6">
-                <h5 className="text-scale-1200 text-base">Conditions to fire hook</h5>
+                <h5 className="text-base text-scale-1200">Conditions to fire hook</h5>
                 <TableSelection />
                 <CheckboxEvents />
               </div>
               <SidePanel.Seperator />
               <div className="space-y-6 px-6">
-                <h5 className="text-scale-1200 text-base">Type of hook</h5>
+                <h5 className="text-base text-scale-1200">Type of hook</h5>
                 <RadioGroupHookService />
               </div>
               <ServiceConfigForm />

studio/components/interfaces/Functions/FunctionsEmptyState.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link'
-import { Button, IconBookOpen } from '@supabase/ui'
+import { Button, IconBookOpen, IconCode } from '@supabase/ui'
 import TerminalInstructions from './TerminalInstructions'
 
 const FunctionsEmptyState = () => {
   return (
     <>
-      <div className="grid py-12 lg:grid-cols-12 gap-y-12 lg:gap-x-16 max-w-7xl">
+      <div className="grid max-w-7xl gap-y-12 py-12 lg:grid-cols-12 lg:gap-x-16">
         <div className="col-span-5 space-y-4">
           <p className="max-w-lg text-base text-scale-1200">
             Scalable functions to run your code with no server management.
@@ -21,6 +21,14 @@ const FunctionsEmptyState = () => {
                 Documentation
               </Button>
             </Link>
+            <Link
+              passHref
+              href="https://github.com/supabase/supabase/tree/chore/stripe-issue/examples/edge-functions/supabase/functions"
+            >
+              <Button as="a" type="default" iconRight={<IconCode />}>
+                Examples
+              </Button>
+            </Link>
           </div>
         </div>
         <TerminalInstructions />

studio/components/interfaces/Functions/TerminalInstructions.tsx

@@ -1,11 +1,19 @@
 import { useRouter } from 'next/router'
-import { Button, IconTerminal, IconMaximize2, IconMinimize2 } from '@supabase/ui'
+import {
+  Button,
+  IconTerminal,
+  IconMaximize2,
+  IconMinimize2,
+  IconBookOpen,
+  IconCode,
+} from '@supabase/ui'
 import { useProjectSettings } from 'hooks'
 import { useAccessTokens } from 'hooks/queries/useAccessTokens'
 import { Commands } from './Functions.types'
 import CommandRender from 'components/interfaces/Functions/CommandRender'
 import { FC, useState } from 'react'
 import { useStore } from 'hooks'
+import Link from 'next/link'
 
 interface Props {
   closable?: boolean
@@ -85,13 +93,13 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
 
   return (
     <div
-      className="col-span-7 bg-scale-100 dark:bg-scale-300 shadow border rounded overflow-hidden transition-all"
+      className="col-span-7 overflow-hidden rounded border bg-scale-100 shadow transition-all dark:bg-scale-300"
       style={{ maxHeight: showInstructions ? 500 : 80 }}
     >
-      <div className="px-8 py-6 space-y-6">
+      <div className="space-y-6 px-8 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="border p-2 flex items-center justify-center w-8 h-8 bg-scale-100 rounded">
+            <div className="flex h-8 w-8 items-center justify-center rounded border bg-scale-100 p-2">
               <IconTerminal strokeWidth={2} />
             </div>
             <h4>Terminal instructions</h4>
@@ -111,7 +119,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
         </div>
       </div>
       {tokens && tokens.length === 0 ? (
-        <div className="px-8 border-t py-6 space-y-3">
+        <div className="space-y-3 border-t px-8 py-6">
           <div>
             <h3 className="text-base text-scale-1200">You may need to create an access token</h3>
             <p className="text-sm text-scale-1100">
@@ -122,7 +130,31 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
             Access tokens
           </Button>
         </div>
-      ) : null}
+      ) : (
+        <div className="space-y-3 border-t px-8 py-6">
+          <div>
+            <h3 className="text-base text-scale-1200">Need help?</h3>
+            <p className="text-sm text-scale-1100">
+              Read the documentation, or browse some sample code.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Link passHref href="https://supabase.com/docs/guides/functions">
+              <Button as="a" type="default" iconRight={<IconBookOpen />}>
+                Documentation
+              </Button>
+            </Link>
+            <Link
+              passHref
+              href="https://github.com/supabase/supabase/tree/chore/stripe-issue/examples/edge-functions/supabase/functions"
+            >
+              <Button as="a" type="default" iconRight={<IconCode />}>
+                Examples
+              </Button>
+            </Link>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

studio/components/interfaces/SQLEditor/TabSqlQuery/FavouriteButton.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import { useState } from 'react'
 import { Button, IconHeart } from '@supabase/ui'
-
+import * as Tooltip from '@radix-ui/react-tooltip'
 import { useStore } from 'hooks'
 import Telemetry from 'lib/telemetry'
 import { useSqlStore } from 'localStores/sqlEditor/SqlEditorStore'
@@ -99,27 +99,36 @@ const FavouriteButton = () => {
     }
   }
 
+  const isFavorite = sqlEditorStore.activeTab.favorite
+
   return (
     <>
-      {sqlEditorStore.activeTab.favorite ? (
-        <Button
-          type="text"
-          size="tiny"
-          shadow={false}
-          onClick={unFavorite}
-          loading={loading}
-          icon={<IconHeart size="tiny" fill="#48bb78" />}
-        />
-      ) : (
-        <Button
-          type="text"
-          size="tiny"
-          shadow={false}
-          onClick={addToFavorite}
-          loading={loading}
-          icon={<IconHeart size="tiny" fill="gray" />}
-        />
-      )}
+      <Tooltip.Root delayDuration={0}>
+        <Tooltip.Content side="bottom">
+          <Tooltip.Arrow className="radix-tooltip-arrow" />
+          <div
+            className={[
+              'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+              'border border-scale-200',
+            ].join(' ')}
+          >
+            <span className="text-xs text-scale-1200">
+              {isFavorite ? 'Remove' : 'Add'} this query {isFavorite ? 'from' : 'to'} your
+              Favourites
+            </span>
+          </div>
+        </Tooltip.Content>
+        <Tooltip.Trigger type="button">
+          <Button
+            type="text"
+            size="tiny"
+            shadow={false}
+            onClick={isFavorite ? unFavorite : addToFavorite}
+            loading={loading}
+            icon={<IconHeart size="tiny" fill={isFavorite ? '#48bb78' : 'gray'} />}
+          />
+        </Tooltip.Trigger>
+      </Tooltip.Root>
     </>
   )
 }

studio/components/layouts/DocsLayout/DocsLayout.utils.tsx

@@ -34,7 +34,7 @@ export const generateDocsMenu = (
           url: `/project/${ref}/api?page=tables-intro`,
           items: [],
         },
-        ...tables.map((table) => {
+        ...tables.sort().map((table) => {
           return {
             name: table,
             key: table,

studio/components/to-be-cleaned/Docs/Pages/Introduction.js

@@ -24,14 +24,10 @@ export default function Introduction({ autoApiService, selectedLang }) {
         </article>
       </div>
 
-      <h2 className="doc-heading">Getting Started</h2>
+      <h2 className="doc-heading">API URL</h2>
       <div className="doc-section ">
         <article className="text ">
-          <p>Your API consists of both a RESTful interface and a realtime interface.</p>
-          <p>
-            For interacting with the realtime streams, we provide client libraries that handle the
-            websockets.
-          </p>
+          <p>The API URL for your project.</p>
         </article>
         <article className="code">
           <CodeSnippet

studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js

@@ -183,7 +183,7 @@ const MonacoEditor = ({ error, updateSqlSnippet, setUpdatingRequired }) => {
   }
 
   return (
-    <div className="dark:border-dark flex-grow overflow-y-auto border-b">
+    <div className="flex-grow overflow-y-auto border-b dark:border-dark">
       <Editor
         className="monaco-editor"
         theme={'supabase'}
@@ -289,7 +289,9 @@ const UtilityTabResults = observer(() => {
     return (
       <div className="bg-table-header-light dark:bg-table-header-dark">
         <p className="m-0 border-0 px-6 py-4 text-sm text-scale-1000">
-          Click <code>RUN</code> to execute your query.
+          Click <code>RUN</code> or hit{' '}
+          <code>{window.navigator.platform.match(/^Mac/) ? 'cmd' : 'ctrl'} + ⏎</code> to execute
+          your query.
         </p>
       </div>
     )