Fix integration settings being editable while in a branch (#30290)

* Fix integration settings being editable while in a branch

* Fix

* Fix downgrade modal

* Fix warning

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx

@@ -1,8 +1,10 @@
+import { AlertOctagon, MinusCircle, PauseCircle } from 'lucide-react'
+
 import type { ProjectInfo } from 'data/projects/projects-query'
 import type { OrgSubscription, ProjectAddon } from 'data/subscriptions/types'
-import { AlertOctagon, MinusCircle, PauseCircle } from 'lucide-react'
 import { PricingInformation } from 'shared-data'
-import { Alert, Modal } from 'ui'
+import { Modal } from 'ui'
+import { Admonition } from 'ui-patterns'
 
 export interface DowngradeModalProps {
   visible: boolean
@@ -76,6 +78,7 @@ const DowngradeModal = ({
     <Modal
       size="large"
       alignFooter="right"
+      variant="warning"
       visible={visible}
       onCancel={onClose}
       onConfirm={onConfirm}
@@ -83,20 +86,16 @@ const DowngradeModal = ({
     >
       <Modal.Content>
         <div className="space-y-2">
-          <Alert
-            withIcon
-            variant="warning"
+          <Admonition
+            type="warning"
             title="Downgrading to the Free Plan will lead to reductions in your organization's quota"
-          >
-            <p>
-              If you're already past the limits of the Free Plan, your projects could become
-              unresponsive or enter read only mode.
-            </p>
-          </Alert>
+            description="If you're already past the limits of the Free Plan, your projects could become
+              unresponsive or enter read only mode."
+          />
 
           {((previousProjectAddons.length ?? 0) > 0 ||
             (hasInstancesOnMicro && downgradingToNano)) && (
-            <Alert title={`Projects affected by the downgrade`} variant="warning" withIcon>
+            <Admonition type="warning" title="Projects affected by the downgrade">
               <ul className="space-y-1 max-h-[100px] overflow-y-auto">
                 {previousProjectAddons.map((project) => (
                   <ProjectDowngradeListItem key={project.ref} projectAddon={project} />
@@ -111,39 +110,32 @@ const DowngradeModal = ({
                     </li>
                   ))}
               </ul>
-            </Alert>
+            </Admonition>
           )}
         </div>
 
         <ul className="mt-4 space-y-5 text-sm">
-          <li className="flex gap-3">
-            <div>
-              <PauseCircle />
-            </div>
+          <li className="flex items-center gap-3">
+            <PauseCircle size={18} />
             <span>Projects will be paused after a week of inactivity</span>
           </li>
 
-          <li>
-            <div className="flex gap-3 mb-2">
-              <div>
-                <MinusCircle />
-              </div>
-              <span>Add ons from all projects under this organization will be removed.</span>
-            </div>
+          <li className="flex items-center gap-3 mb-2">
+            <MinusCircle size={18} />
+            <span>Add ons from all projects under this organization will be removed.</span>
           </li>
 
           <li className="flex gap-3">
-            <AlertOctagon size={14} className="flex-shrink-0" />
             <div>
               <strong>Before you downgrade to the {selectedPlan?.name} plan, consider:</strong>
               <ul className="space-y-2 mt-2">
-                <li className="list-disc ml-4">
+                <li className="list-disc ml-6 text-foreground-light">
                   Your projects no longer require their respective add ons.
                 </li>
-                <li className="list-disc ml-4">
+                <li className="list-disc ml-6 text-foreground-light">
                   Your resource consumption are well within the {selectedPlan?.name} plan's quota.
                 </li>
-                <li className="list-disc ml-4">
+                <li className="list-disc ml-6 text-foreground-light">
                   Alternatively, you may also transfer projects across organizations.
                 </li>
               </ul>

apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx

@@ -248,7 +248,7 @@ const GitHubIntegrationConnectionForm = ({
                     <Input_Shadcn_
                       {...field}
                       className="w-80"
-                      disabled={!canUpdateGitHubConnection}
+                      disabled={disabled || !canUpdateGitHubConnection}
                       onKeyPress={(event) => {
                         if (event.key === 'Escape') form.reset()
                       }}
@@ -301,7 +301,7 @@ const GitHubIntegrationConnectionForm = ({
                   <div className="relative">
                     <Input_Shadcn_
                       {...field}
-                      disabled={!canUpdateGitHubConnection}
+                      disabled={disabled || !canUpdateGitHubConnection}
                       className="w-80"
                       onKeyPress={(event) => {
                         if (event.key === 'Escape') form.reset()
@@ -349,7 +349,7 @@ const GitHubIntegrationConnectionForm = ({
                 <FormControl_Shadcn_>
                   <Switch
                     className="mt-1"
-                    disabled={!canUpdateGitHubConnection}
+                    disabled={disabled || !canUpdateGitHubConnection}
                     checked={field.value}
                     onCheckedChange={(e) => {
                       field.onChange(e)

apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx

@@ -45,6 +45,7 @@ const GitHubSection = () => {
   const project = useSelectedProject()
   const org = useSelectedOrganization()
   const sidePanelsStateSnapshot = useSidePanelsStateSnapshot()
+  const isBranch = project?.parent_project_ref !== undefined
 
   const canReadGitHubConnection = useCheckPermissions(
     PermissionAction.READ,
@@ -67,8 +68,6 @@ const GitHubSection = () => {
     },
   })
 
-  const isBranch = project?.parent_project_ref !== undefined
-
   const connections =
     allConnections?.filter((connection) =>
       isBranch
@@ -138,7 +137,7 @@ const GitHubSection = () => {
 
                       <div className="border-b border-l border-r rounded-b-lg">
                         <GitHubIntegrationConnectionForm
-                          disabled={!canUpdateGitHubConnection}
+                          disabled={isBranch || !canUpdateGitHubConnection}
                           connection={{
                             id: String(connection.id),
                             added_by: {
@@ -170,7 +169,7 @@ const GitHubSection = () => {
                   onClick={onAddGitHubConnection}
                   orgSlug={org?.slug}
                   showNode={false}
-                  disabled={!canCreateGitHubConnection}
+                  disabled={isBranch || !canCreateGitHubConnection}
                 >
                   Add new project connection
                 </EmptyIntegrationConnection>

apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx

@@ -175,6 +175,7 @@ const VercelIntegrationConnectionForm = ({
                     <Input_Shadcn_
                       {...field}
                       className="w-full"
+                      disabled={disabled}
                       placeholder="An empty prefix will result in no public env vars"
                     />
                   </FormControl_Shadcn_>
@@ -228,6 +229,7 @@ const VercelIntegrationConnectionForm = ({
           )}
 
           <FormActions
+            disabled={disabled}
             form={vercelConnectionFormId}
             hasChanges={form.formState.isDirty}
             isSubmitting={isLoading}

apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx

@@ -40,6 +40,7 @@ const VercelSection = ({ isProjectScoped }: { isProjectScoped: boolean }) => {
   const org = useSelectedOrganization()
   const { data } = useOrgIntegrationsQuery({ orgSlug: org?.slug })
   const sidePanelsStateSnapshot = useSidePanelsStateSnapshot()
+  const isBranch = project?.parent_project_ref !== undefined
 
   const canReadVercelConnection = useCheckPermissions(
     PermissionAction.READ,
@@ -54,8 +55,6 @@ const VercelSection = ({ isProjectScoped }: { isProjectScoped: boolean }) => {
     'integrations.vercel_connections'
   )
 
-  const isBranch = project?.parent_project_ref !== undefined
-
   const { mutate: deleteVercelConnection } = useIntegrationsVercelInstalledConnectionDeleteMutation(
     {
       onSuccess: () => {
@@ -187,7 +186,7 @@ You can change the scope of the access for Supabase by configuring
                           >
                             <IntegrationConnectionItem
                               connection={connection}
-                              disabled={!canUpdateVercelConnection}
+                              disabled={isBranch || !canUpdateVercelConnection}
                               type={'Vercel' as IntegrationName}
                               onDeleteConnection={onDeleteVercelConnection}
                               className={cn(isProjectScoped && '!rounded-b-none !mb-0')}
@@ -198,7 +197,7 @@ You can change the scope of the access for Supabase by configuring
                                   <VercelIntegrationConnectionForm
                                     connection={connection}
                                     integration={vercelIntegration}
-                                    disabled={!canUpdateVercelConnection}
+                                    disabled={isBranch || !canUpdateVercelConnection}
                                   />
                                 </div>
                               </div>
@@ -216,7 +215,7 @@ You can change the scope of the access for Supabase by configuring
                   )}
                   <EmptyIntegrationConnection
                     orgSlug={org?.slug}
-                    disabled={!canCreateVercelConnection}
+                    disabled={isBranch || !canCreateVercelConnection}
                     onClick={() => onAddVercelConnection(vercelIntegration.id)}
                   >
                     Add new project connection

packages/ui/src/components/Modal/Modal.tsx

@@ -97,7 +97,6 @@ const Modal = forwardRef<
     ref
   ) => {
     const [open, setOpen] = React.useState(visible ? visible : false)
-    const __styles = styleHandler('modal')
 
     useEffect(() => {
       setOpen(visible)
@@ -121,7 +120,7 @@ const Modal = forwardRef<
           onClick={onConfirm}
           disabled={loading}
           loading={loading}
-          type={variant === 'danger' ? 'danger' : 'primary'}
+          type={variant === 'danger' ? 'danger' : variant === 'warning' ? 'warning' : 'primary'}
         >
           {confirmText}
         </Button>