feat: webhooks limits

src/lib/layout/containerHeader.svelte

@@ -15,7 +15,7 @@
 
     export let titleSize: '1' | '2' | '3' | '4' | '5' | '6' | '7' = '5';
     export let serviceId = title.toLocaleLowerCase();
-    export let totalUse: number = null;
+    export let total: number = null;
 
     export let buttonText: string = null;
     export let buttonMethod: () => void = null;
@@ -28,7 +28,7 @@
     $: tier = tierToPlan($organization?.billingPlan as Tier)?.name;
 </script>
 
-{#if isCloud && totalUse && limit !== 'unlimited' && totalUse >= limit}
+{#if isCloud && total && limit !== 'unlimited' && total >= limit}
     <Alert type="warning">
         <span class="text">
             You've reached the maximum number of {title.toLowerCase()} for the {tier} plan.
@@ -68,7 +68,7 @@
         <Button
             on:click={buttonMethod}
             event={buttonEvent}
-            disabled={limit !== 'unlimited' && totalUse >= limit}>
+            disabled={limit !== 'unlimited' && total >= limit}>
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">{buttonText}</span>
         </Button>

src/routes/console/organization-[organization]/members/+page.svelte

@@ -59,7 +59,7 @@
     {#if data.organizationMembers.total}
         <ContainerHeader
             title="Members"
-            totalUse={data.organizationMembers.total}
+            total={data.organizationMembers.total}
             buttonText="Invite"
             buttonMethod={() => newMemberModal.set(true)} />
 

src/routes/console/project-[project]/overview/platforms/+page.svelte

@@ -78,7 +78,7 @@
     title="Platforms"
     titleTag="h3"
     titleSize="7"
-    totalUse={data?.platforms?.platforms?.length}>
+    total={data?.platforms?.platforms?.length}>
     <DropList bind:show={showDropdown} placement="bottom-start">
         <Button
             on:click={() => (showDropdown = !showDropdown)}

src/routes/console/project-[project]/settings/webhooks/+page.svelte

@@ -3,7 +3,6 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Empty } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import {
         TableBody,
@@ -14,11 +13,10 @@
         TableHeader,
         TableScroll
     } from '$lib/elements/table';
-    import { Container } from '$lib/layout';
+    import { Container, ContainerHeader } from '$lib/layout';
     import { wizard } from '$lib/stores/wizard';
     import type { PageData } from './$types';
     import Create from './createWebhook.svelte';
-    import Heading from '$lib/components/heading.svelte';
 
     export let data: PageData;
 
@@ -38,12 +36,12 @@
 </svelte:head>
 
 <Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Webhooks</Heading>
-        <Button on:click={openWizard} event="create_webhook">
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create webhook</span>
-        </Button>
-    </div>
+    <ContainerHeader
+        title="Webhooks"
+        buttonText="Create webhook"
+        buttonMethod={openWizard}
+        buttonEvent="create_webhook"
+        total={data.webhooks.total} />
 
     {#if data.webhooks.total}
         <TableScroll>