External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #26 from Portabase/feat/coming-soon-preview

Browse Source 
feat(ui): add preview for upcoming notification provider
This commit is contained in:
Killian Larcher
2026-01-18 12:37:29 +01:00
committed by GitHub
parent 5c682addc9 6db60f111d
commit 5668a1411f
2 changed files with 553 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/dashboard/admin/notifications/helpers.tsx
+516 -440
View File
File diff suppressed because it is too large Load Diff
src/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.tsx
+37 -10
View File
@@ -40,7 +40,7 @@ import {
NotifierTestChannelButton NotifierTestChannelButton
} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button"; } from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button";
import {useEffect} from "react"; import {useEffect} from "react";
import {notificationTypes} from "@/components/wrappers/dashboard/admin/notifications/helpers"; import {notificationProviders} from "@/components/wrappers/dashboard/admin/notifications/helpers";
import {cn} from "@/lib/utils"; import {cn} from "@/lib/utils";
import {Card} from "@/components/ui/card"; import {Card} from "@/components/ui/card";
import {ArrowLeft} from "lucide-react"; import {ArrowLeft} from "lucide-react";
@@ -93,29 +93,54 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
}); });
const provider = form.watch("provider"); const provider = form.watch("provider");
const selectedProviderDetails = notificationTypes.find(t => t.value === provider); const selectedProviderDetails = notificationProviders.find(t => t.value === provider);
if (isCreate && !provider) { if (isCreate && !provider) {
return ( return (
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4"> <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4">
{notificationTypes.map((type) => { {notificationProviders.map((type) => {
const Icon = type.icon; const Icon = type.icon;
return ( return (
<Card <Card
key={type.value} key={type.value}
className={cn( className={cn(
"flex flex-col items-center justify-center gap-3 p-4 cursor-pointer hover:bg-accent/50 hover:border-primary/50 transition-all", "relative flex flex-col items-center justify-center gap-3 p-4 transition-all",
type.preview
? "cursor-not-allowed bg-gray-200 border-gray-300 opacity-70"
: "cursor-pointer hover:bg-accent/50 hover:border-primary/50"
)} )}
onClick={() => { onClick={() => {
if (type.preview) return;
form.setValue("provider", type.value as any); form.setValue("provider", type.value as any);
form.setValue("config", {}); form.setValue("config", {});
}} }}
> >
<div className="h-10 w-10 bg-secondary rounded-full flex items-center justify-center"> {type.preview && (
<Icon className="h-6 w-6 text-foreground"/> <div
className="absolute bottom-0 right-0 overflow-hidden w-20 h-20 pointer-events-none">
<div
className="absolute bottom-0 right-0 w-38 h-6 flex items-center justify-center
transform -rotate-45 translate-x-14 -translate-y-4"
style={{backgroundColor: "#FE6702"}}
>
<span className="text-white text-[8px] pr-3 font-medium text-center w-full">coming soon</span>
</div>
</div>
)}
<div className={cn(
"h-10 w-10 rounded-full flex items-center justify-center",
type.preview ? "bg-gray-400" : "bg-secondary"
)}>
<Icon className={cn("h-6 w-6 text-foreground", type.preview && "text-gray-700")}/>
</div> </div>
<span className="font-medium text-sm">{type.label}</span> <span className={cn(
"font-medium text-sm align-middle text-center",
type.preview ? "text-gray-500" : "text-foreground"
)}>
{type.label}
</span>
</Card> </Card>
); );
})} })}
</div> </div>
@@ -132,7 +157,8 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
> >
<div className="flex items-center gap-3 mb-2 p-3 bg-secondary/30 rounded-lg border border-border"> <div className="flex items-center gap-3 mb-2 p-3 bg-secondary/30 rounded-lg border border-border">
{selectedProviderDetails && ( {selectedProviderDetails && (
<div className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm"> <div
className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm">
<selectedProviderDetails.icon className="h-5 w-5"/> <selectedProviderDetails.icon className="h-5 w-5"/>
</div> </div>
)} )}
@@ -163,7 +189,8 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
<FormItem> <FormItem>
<FormLabel>Channel Name</FormLabel> <FormLabel>Channel Name</FormLabel>
<FormControl> <FormControl>
<Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`} value={field.value ?? ""}/> <Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`}
value={field.value ?? ""}/>
</FormControl> </FormControl>
<FormMessage/> <FormMessage/>
</FormItem> </FormItem>
@@ -174,7 +201,7 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
control={form.control} control={form.control}
name="provider" name="provider"
render={({field}) => ( render={({field}) => (
<input type="hidden" {...field} value={field.value || ""} /> <input type="hidden" {...field} value={field.value || ""}/>
)} )}
/> />