Merge pull request supabase#13847 from supabase/chore/add-error-handling-for-permissions

Add error handling for permissions + small style fix on triggers UI

Author: joshenlim

studio/components/interfaces/Account/NewAccessTokenButton.tsx

@@ -115,7 +115,7 @@ const NewAccessTokenButton = observer(({ onCreateToken }: NewAccessTokenButtonPr
                     </p>
                     <div className="mt-4">
                       <Link href="https://api.supabase.com/api/v0">
-                        <a target="_blank">
+                        <a target="_blank" rel="noreferrer">
                           <Button type="default" icon={<IconExternalLink strokeWidth={1.5} />}>
                             Experimental API documentation
                           </Button>

studio/components/interfaces/App/AppBannerWrapper.tsx

@@ -10,7 +10,7 @@ const AppBannerWrapper: FC = ({ children }) => {
     <div className="min-h-full flex flex-col">
       {ongoingIncident && (
         <Link href="https://status.supabase.com">
-          <a target="_blank">
+          <a target="_blank" rel="noreferrer">
             <div className="flex cursor-pointer items-center justify-center space-x-2 bg-green-900 py-3 text-scale-400 transition hover:bg-green-1000 dark:text-scale-1200">
               <p className="text-sm font-medium">
                 We are currently investigating a technical issue, follow status.supabase.com for

studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx

@@ -15,7 +15,11 @@ const EmailTemplates = observer(() => {
         />
         <div className="mb-6">
           <Button type="default" icon={<IconExternalLink size={14} strokeWidth={1.5} />}>
-            <a target="_blank" href="https://supabase.com/docs/guides/auth/auth-email-templates">
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://supabase.com/docs/guides/auth/auth-email-templates"
+            >
               Documentation
             </a>
           </Button>

studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx

@@ -9,8 +9,14 @@ interface Props {
 
 const PolicyEditorFooter: FC<Props> = ({ showTemplates, onViewTemplates, onReviewPolicy }) => (
   <div className="flex justify-between items-center border-t px-6 py-4 dark:border-dark">
-    <a href='https://supabase.com/docs/learn/auth-deep-dive/auth-policies' target="_blank">
-      <Button type='link' icon={<IconExternalLink size={14} strokeWidth={1.5} />}>Documentation</Button>
+    <a
+      href="https://supabase.com/docs/learn/auth-deep-dive/auth-policies"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <Button type="link" icon={<IconExternalLink size={14} strokeWidth={1.5} />}>
+        Documentation
+      </Button>
     </a>
     <div className="flex w-full items-center justify-end gap-2">
       {showTemplates && (

studio/components/interfaces/Auth/Policies/PolicySelection.tsx

@@ -61,6 +61,7 @@ const PolicySelection: FC<Props> = ({
           Not sure what policies are? Check out our resources{' '}
           <a
             target="_blank"
+            rel="noreferrer"
             className="text-brand-900 transition-colors hover:text-brand-1200"
             href="https://supabase.com/docs/guides/auth#policies"
           >

studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx

@@ -37,7 +37,7 @@ const ComputeSizeSelection: FC<Props> = ({
           </p>
         </div>
         <Link href="https://supabase.com/docs/guides/platform/compute-add-ons">
-          <a target="_blank">
+          <a target="_blank" rel="noreferrer">
             <Button type="default" icon={<IconExternalLink strokeWidth={1.5} />}>
               About compute add-ons
             </Button>

studio/components/interfaces/Billing/Billing.constants.tsx

@@ -31,7 +31,11 @@ export const USAGE_BASED_PRODUCTS = [
         tooltip: (
           <span>
             Billing is based on the average daily database size in GB throughout the billing period.{' '}
-            <a href="https://supabase.com/docs/guides/platform/database-usage" target="_blank">
+            <a
+              href="https://supabase.com/docs/guides/platform/database-usage"
+              target="_blank"
+              rel="noreferrer"
+            >
               Docs
             </a>
           </span>

studio/components/interfaces/Billing/Invoices.tsx

@@ -131,7 +131,7 @@ const Invoices: FC<Props> = ({ projectRef }) => {
                         <div className="flex items-center justify-end space-x-2">
                           {[InvoiceStatus.UNCOLLECTIBLE, InvoiceStatus.OPEN].includes(x.status) && (
                             <Link href={`https://redirect.revops.supabase.com/pay-invoice/${x.id}`}>
-                              <a target="_blank">
+                              <a target="_blank" rel="noreferrer">
                                 <Button>Pay Now</Button>
                               </a>
                             </Link>

studio/components/interfaces/Billing/PlanSelection/PlanSelection.tsx

@@ -45,7 +45,7 @@ const PlanSelection: FC<Props> = ({ visible, tiers, currentPlan, onSelectPlan })
         </div>
         <div className="flex justify-center items-center mt-4">
           <Link href="https://supabase.com/pricing">
-            <a target="_blank">
+            <a target="_blank" rel="noreferrer">
               <Button
                 type="link"
                 icon={<IconExternalLink size={14} strokeWidth={1.5} />}

studio/components/interfaces/Billing/SpendCapModal.tsx

@@ -129,7 +129,7 @@ const SpendCapModal: FC<Props> = ({ visible, onHide }) => {
             <p>
               See{' '}
               <Link href="https://supabase.com/pricing" passHref>
-                <a className="text-brand-900" target="_blank">
+                <a className="text-brand-900" target="_blank" rel="noreferrer">
                   <span>pricing page</span>
                 </a>
               </Link>{' '}