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
} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button";
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 {Card} from "@/components/ui/card";
import {ArrowLeft} from "lucide-react";
@@ -93,29 +93,54 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
});
const provider = form.watch("provider");
const selectedProviderDetails = notificationTypes.find(t => t.value === provider);
const selectedProviderDetails = notificationProviders.find(t => t.value === provider);
if (isCreate && !provider) {
return (
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4">
{notificationTypes.map((type) => {
{notificationProviders.map((type) => {
const Icon = type.icon;
return (
<Card
key={type.value}
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={() => {
if (type.preview) return;
form.setValue("provider", type.value as any);
form.setValue("config", {});
}}
>
<div className="h-10 w-10 bg-secondary rounded-full flex items-center justify-center">
<Icon className="h-6 w-6 text-foreground"/>
{type.preview && (
<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>
<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>
);
})}
</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">
{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"/>
</div>
)}
@@ -163,7 +189,8 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
<FormItem>
<FormLabel>Channel Name</FormLabel>
<FormControl>
<Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`} value={field.value ?? ""}/>
<Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`}
value={field.value ?? ""}/>
</FormControl>
<FormMessage/>
</FormItem>
@@ -174,7 +201,7 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
control={form.control}
name="provider"
render={({field}) => (
<input type="hidden" {...field} value={field.value || ""} />
<input type="hidden" {...field} value={field.value || ""}/>
)}
/>