[Replace yup] Refactor deprecated components in DiskSizeConfigurationModal

apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx

@@ -1,36 +1,33 @@
 import Link from 'next/link'
 
 import { useParams } from 'common'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
+import { DocsButton } from 'components/ui/DocsButton'
+import { ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
 import { Button } from 'ui'
-import { NoticeBar } from './ui/NoticeBar'
+import { Admonition } from 'ui-patterns/admonition'
 
 // [Joshen] Only used for non AWS projects
-export function DiskManagementPanelForm() {
+export const DiskManagementPanelForm = () => {
   const { ref: projectRef } = useParams()
 
   return (
-    <div id="disk-management">
-      <FormHeader
-        title="Disk Management"
-        docsUrl="https://supabase.com/docs/guides/platform/database-size#disk-management"
-      />
-      <NoticeBar
-        visible={true}
-        type="default"
-        title="Disk Management has moved"
-        description="Disk configuration is now managed alongside Project Compute on the new Compute and Disk page."
-        actions={
-          <Button type="default" asChild>
-            <Link
-              href={`/project/${projectRef}/settings/compute-and-disk`}
-              className="!no-underline"
-            >
-              Go to Compute and Disk
-            </Link>
-          </Button>
-        }
-      />
-    </div>
+    <ScaffoldSection id="disk-management" className="gap-6">
+      <ScaffoldSectionTitle className="flex items-center justify-between  gap-2">
+        Disk Management
+        <DocsButton href="https://supabase.com/docs/guides/platform/database-size#disk-management" />
+      </ScaffoldSectionTitle>
+
+      <Admonition type="default" title="Disk Management has moved">
+        <p>
+          Disk configuration is now managed alongside Project Compute on the new Compute and Disk
+          page.
+        </p>
+        <Button type="default" asChild>
+          <Link href={`/project/${projectRef}/settings/compute-and-disk`} className="!no-underline">
+            Go to Compute and Disk
+          </Link>
+        </Button>
+      </Admonition>
+    </ScaffoldSection>
   )
 }

apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx

@@ -7,17 +7,21 @@ import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { DocsButton } from 'components/ui/DocsButton'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
-import { FormPanel } from 'components/ui/Forms/FormPanel'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useBannedIPsDeleteMutation } from 'data/banned-ips/banned-ips-delete-mutations'
 import { useBannedIPsQuery } from 'data/banned-ips/banned-ips-query'
 import { useUserIPAddressQuery } from 'data/misc/user-ip-address-query'
 import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { Badge, Skeleton } from 'ui'
+import {
+  ScaffoldSection,
+  ScaffoldSectionTitle,
+  ScaffoldSectionDescription,
+} from 'components/layouts/Scaffold'
+import { Badge, Card, CardContent } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
-const BannedIPs = () => {
+export const BannedIPs = () => {
   const { ref } = useParams()
   const { data: project } = useSelectedProjectQuery()
 
@@ -75,60 +79,64 @@ const BannedIPs = () => {
   }
 
   return (
-    <div id="banned-ips">
-      <div className="flex items-center justify-between mb-6">
-        <FormHeader
-          className="mb-0"
-          title="Network Bans"
-          description="List of IP addresses that are temporarily blocked if their traffic pattern looks abusive"
-        />
+    <ScaffoldSection id="banned-ips" className="gap-6">
+      <ScaffoldSectionTitle className="flex items-center justify-between  gap-2">
+        <div className="flex flex-col gap-1">
+          Network Bans
+          <ScaffoldSectionDescription>
+            List of IP addresses that are temporarily blocked if their traffic pattern looks
+            abusive.
+          </ScaffoldSectionDescription>
+        </div>
         <DocsButton href="https://supabase.com/docs/reference/cli/supabase-network-bans" />
-      </div>
-      <FormPanel>
-        {ipListLoading ? (
-          <div className="px-8 py-4 space-y-4">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-full" />
-          </div>
-        ) : ipListError ? (
-          <AlertError
-            className="border-0 rounded-none"
-            error={ipListError}
-            subject="Failed to retrieve banned IP addresses"
-          />
-        ) : ipList && ipList.banned_ipv4_addresses.length > 0 ? (
-          ipList.banned_ipv4_addresses.map((ip) => (
-            <div key={ip} className="px-8 py-4 flex items-center justify-between">
-              <div className="flex items-center space-x-5">
-                <Globe size={16} className="text-foreground-lighter" />
+      </ScaffoldSectionTitle>
+
+      {ipListLoading ? (
+        <Card>
+          <CardContent>
+            <GenericSkeletonLoader />
+          </CardContent>
+        </Card>
+      ) : ipListError ? (
+        <AlertError
+          className="border-0 rounded-none"
+          error={ipListError}
+          subject="Failed to retrieve banned IP addresses"
+        />
+      ) : ipList && ipList.banned_ipv4_addresses.length > 0 ? (
+        <Card>
+          {ipList.banned_ipv4_addresses.map((ip) => (
+            <CardContent className="flex items-center justify-between gap-4">
+              <Globe size={16} className="text-foreground-light" />
+              <div className="w-full flex items-center gap-4">
+                {ip === userIPAddress && <Badge variant="warning">Your IP address</Badge>}
                 <p className="text-sm font-mono">{ip}</p>
-                {ip === userIPAddress && <Badge>Your IP address</Badge>}
               </div>
-              <div>
-                <ButtonTooltip
-                  type="default"
-                  disabled={!canUnbanNetworks}
-                  onClick={() => openConfirmationModal(ip)}
-                  tooltip={{
-                    content: {
-                      side: 'bottom',
-                      text: !canUnbanNetworks
-                        ? 'You need additional permissions to unban networks'
-                        : undefined,
-                    },
-                  }}
-                >
-                  Unban IP
-                </ButtonTooltip>
-              </div>
-            </div>
-          ))
-        ) : (
-          <p className="text-foreground-light text-sm px-8 py-4">
+              <ButtonTooltip
+                type="default"
+                disabled={!canUnbanNetworks}
+                onClick={() => openConfirmationModal(ip)}
+                tooltip={{
+                  content: {
+                    side: 'bottom',
+                    text: !canUnbanNetworks
+                      ? 'You need additional permissions to unban networks'
+                      : undefined,
+                  },
+                }}
+              >
+                Unban IP
+              </ButtonTooltip>
+            </CardContent>
+          ))}
+        </Card>
+      ) : (
+        <Card>
+          <CardContent className="text-sm text-foreground-light">
             There are no banned IP addresses for your project.
-          </p>
-        )}
-      </FormPanel>
+          </CardContent>
+        </Card>
+      )}
 
       <ConfirmationModal
         variant="destructive"
@@ -145,8 +153,6 @@ const BannedIPs = () => {
           description: `Are you sure you want to unban this IP address ${selectedIPToUnban}?`,
         }}
       />
-    </div>
+    </ScaffoldSection>
   )
 }
-
-export default BannedIPs