Merge pull request #2944 from appwrite/fix-tooltips-and-webhook-flows

fix: tooltips across the console and webhooks flow

Author: HarshMN2345

src/lib/elements/forms/inputURL.svelte

@@ -15,6 +15,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
     export let leadingIcon: ComponentType | undefined = undefined;
+    export let helper: string = undefined;
 
     let error: string;
 
@@ -52,7 +53,7 @@
     type="url"
     autofocus={autofocus || undefined}
     autocomplete={autocomplete ? 'on' : 'off'}
-    helper={error}
+    helper={error || helper}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input

src/lib/helpers/tooltipContent.ts

@@ -0,0 +1,7 @@
+export const BODY_TOOLTIP_MAX_WIDTH = 'min(22rem, calc(100vw - 2rem))';
+
+export const BODY_TOOLTIP_WRAPPER_STYLE =
+    'min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: normal';
+
+export const BODY_TOOLTIP_WRAPPER_STYLE_PRELINE =
+    'min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: pre-line';

src/lib/layout/containerButton.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { organization } from '$lib/stores/organization';
     import { Tooltip } from '@appwrite.io/pink-svelte';
     import { BillingPlanGroup } from '@appwrite.io/console';
@@ -23,7 +27,7 @@
     export let buttonType: 'primary' | 'secondary' | 'text' = 'primary';
 </script>
 
-<Tooltip disabled={!disabled}>
+<Tooltip disabled={!disabled} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
     <Button
         size="s"
         text={buttonType === 'text'}
@@ -38,5 +42,5 @@
         {/if}
         <span class="text">{buttonText}</span>
     </Button>
-    <div slot="tooltip">{tooltipContent}</div>
+    <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>{tooltipContent}</div>
 </Tooltip>

src/routes/(console)/account/organizations/+page.svelte

@@ -17,6 +17,10 @@
     import type { Models } from '@appwrite.io/console';
     import { daysLeftInTrial, billingIdToPlan } from '$lib/stores/billing';
     import { toLocaleDate } from '$lib/helpers/date';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { goto } from '$app/navigation';
     import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -132,29 +136,30 @@
                                     {#await planName}
                                         <Skeleton width={30} height={20} variant="line" />
                                     {:then name}
-                                        <Tooltip>
+                                        <Tooltip maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                                             <Badge size="xs" variant="secondary" content={name} />
 
-                                            <span slot="tooltip">
+                                            <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                                                 You are limited to 1 free organization per account
-                                            </span>
+                                            </div>
                                         </Tooltip>
                                     {/await}
                                 {/if}
                             {/if}
 
                             {#if isOrganizationOnTrial(organization)}
-                                <Tooltip>
+                                <Tooltip maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                                     <div class="u-flex u-cross-center">
                                         <Badge
                                             class="eyebrow-heading-3"
                                             variant="secondary"
                                             content="TRIAL" />
                                     </div>
-                                    <span slot="tooltip"
-                                        >{`Your trial ends on ${toLocaleDate(
+                                    <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
+                                        {`Your trial ends on ${toLocaleDate(
                                             organization.billingStartDate
-                                        )}. ${$daysLeftInTrial} days remaining.`}</span>
+                                        )}. ${$daysLeftInTrial} days remaining.`}
+                                    </div>
                                 </Tooltip>
                             {/if}
 

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

@@ -35,6 +35,10 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { PageProps } from './$types';
     import { getPlatformInfo } from '$lib/helpers/platform';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import CreateProjectCloud from './createProjectCloud.svelte';
     import { regions as regionsStore } from '$lib/stores/organization';
 
@@ -147,16 +151,16 @@
 
         {#if $canWriteProjects}
             {#if projectCreationDisabled && reachedProjectLimit}
-                <Tooltip placement="bottom">
+                <Tooltip placement="bottom" maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                     <div>
                         <Button event="create_project" disabled>
                             <Icon icon={IconPlus} slot="start" size="s" />
                             Create project
                         </Button>
                     </div>
-                    <span slot="tooltip">
+                    <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                         You have reached your limit of {projectsLimit} projects.
-                    </span>
+                    </div>
                 </Tooltip>
             {:else}
                 <Button

src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte

@@ -11,6 +11,7 @@
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { BODY_TOOLTIP_WRAPPER_STYLE_PRELINE } from '$lib/helpers/tooltipContent';
     import { page } from '$app/state';
     import { recordTypes } from './store';
     import { Dependencies } from '$lib/constants';
@@ -99,7 +100,7 @@
         </Layout.Stack>
 
         <InputText id="value" label="Value" {placeholder} bind:value required>
-            <Tooltip slot="info">
+            <Tooltip slot="info" maxWidth="fit-content">
                 <Icon icon={IconInfo} size="s" />
                 <span slot="tooltip">
                     Enter the target or destination for this DNS record (e.g., IP address, hostname,
@@ -111,10 +112,10 @@
             <InputNumber id="ttl" label="TTL" placeholder="Enter number" bind:value={ttl}>
                 <Tooltip slot="info">
                     <Icon icon={IconInfo} size="s" />
-                    <span slot="tooltip">
+                    <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE} slot="tooltip">
                         TTL defines how long DNS information is cached. Lower values update faster;
                         higher values reduce server load.
-                    </span>
+                    </div>
                 </Tooltip>
             </InputNumber>
             {#if showPriority(type)}

src/routes/(console)/organization-[organization]/header.svelte

@@ -5,6 +5,10 @@
     import { AvatarGroup, Tab, Tabs } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { daysLeftInTrial, getServiceLimit, readOnly } from '$lib/stores/billing';
@@ -110,12 +114,14 @@
                     {/if}
 
                     {#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlanDetails.trial && organization?.billingTrialDays}
-                        <Tooltip>
+                        <Tooltip maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                             <Badge variant="secondary" content="Trial" />
                             <svelte:fragment slot="tooltip">
-                                {`Your trial ends on ${toLocaleDate(
-                                    organization.billingStartDate
-                                )}. ${$daysLeftInTrial} days remaining.`}
+                                <div style={BODY_TOOLTIP_WRAPPER_STYLE}>
+                                    {`Your trial ends on ${toLocaleDate(
+                                        organization.billingStartDate
+                                    )}. ${$daysLeftInTrial} days remaining.`}
+                                </div>
                             </svelte:fragment>
                         </Tooltip>
                     {/if}
@@ -139,7 +145,10 @@
                     {/if}
 
                     {#if $isOwner}
-                        <Tooltip disabled={!areMembersLimited} placement="bottom-end">
+                        <Tooltip
+                            disabled={!areMembersLimited}
+                            placement="bottom-end"
+                            maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                             <div>
                                 <Button
                                     secondary
@@ -150,7 +159,7 @@
                                     Invite
                                 </Button>
                             </div>
-                            <div slot="tooltip">
+                            <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                                 {!(
                                     organization?.billingPlanDetails?.addons?.seats?.supported ??
                                     true

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

@@ -7,6 +7,10 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import Upgrade from '$lib/components/roles/upgrade.svelte';
     import { getServiceLimit, readOnly, getRoleLabel } from '$lib/stores/billing';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { addNotification } from '$lib/stores/notifications';
     import { currentPlan, newMemberModal, organization } from '$lib/stores/organization';
     import { isOwner } from '$lib/stores/roles';
@@ -78,7 +82,10 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Members</Typography.Title>
-        <Tooltip disabled={!isButtonDisabled} placement="bottom-end">
+        <Tooltip
+            disabled={!isButtonDisabled}
+            placement="bottom-end"
+            maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
             <div>
                 <ConsoleButton
                     size="s"
@@ -89,7 +96,7 @@
                     <span class="text">Invite</span>
                 </ConsoleButton>
             </div>
-            <div slot="tooltip">
+            <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                 {!supportsMembers
                     ? 'Upgrade to add more members'
                     : `You've reached the members limit for the ${$organization?.billingPlanDetails.name} plan`}

src/routes/(console)/project-[region]-[project]/databases/+page.svelte

@@ -18,6 +18,10 @@
     import EmptySearch from '$lib/components/emptySearch.svelte';
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     import { resolveRoute } from '$lib/stores/navigation';
 
@@ -61,7 +65,7 @@
         view={data.view}
         searchPlaceholder="Search by name or ID">
         {#if $canWriteDatabases}
-            <Tooltip disabled={!isLimited}>
+            <Tooltip disabled={!isLimited} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                 <div>
                     <Button
                         disabled={isLimited}
@@ -72,7 +76,7 @@
                     </Button>
                 </div>
                 <svelte:fragment slot="tooltip">
-                    <div style="white-space: pre-line;">
+                    <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                         You have reached the maximum number of databases for your plan.
                     </div>
                 </svelte:fragment>

src/routes/(console)/project-[region]-[project]/functions/+page.svelte

@@ -16,6 +16,10 @@
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     import { parseExpression } from 'cron-parser';
     import { onMount } from 'svelte';
@@ -101,15 +105,15 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search by name or ID" />
 
-        <Tooltip disabled={!isLimited}>
+        <Tooltip disabled={!isLimited} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
             <div>
                 <Button disabled={isLimited} href={createFunctionsUrl}>
                     <Icon icon={IconPlus} slot="start" />
                     Create function
                 </Button>
             </div>
             <svelte:fragment slot="tooltip">
-                <div style="white-space: pre-line;">
+                <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                     You have reached the maximum number of functions for your plan.
                 </div>
             </svelte:fragment>