fix: tweak action UI (#3136)

This commit is contained in:
Johannes
2024-09-12 13:50:58 +02:00
committed by GitHub
parent 80ef504bef
commit 426a0a3847
4 changed files with 14 additions and 17 deletions

View File

@@ -56,6 +56,7 @@ export const AddActionModal = ({
return (
<ModalWithTabs
label="Add action"
description="Capture a new action to trigger a survey on."
open={open}
setOpen={setOpen}
tabs={tabs}

View File

@@ -171,14 +171,14 @@ export const CreateNewActionTab = ({
<div>
<FormProvider {...form}>
<form onSubmit={handleSubmit(submitHandler)}>
<div className="max-h-[400px] w-full space-y-4 overflow-y-auto">
<div className="max-h-[500px] w-full space-y-4 overflow-y-auto pr-4">
<div className="w-3/5">
<FormField
name={`type`}
control={control}
render={({ field }) => (
<div>
<Label className="font-semibold">Type</Label>
<Label className="font-semibold">Action Type</Label>
<TabToggle
id="type"
options={[

View File

@@ -369,7 +369,7 @@ export const TargetingCard = ({
{isFormbricksCloud ? (
<UpgradePlanNotice
message="For advanced targeting, please"
textForUrl="upgrade to the User Identification plan."
textForUrl="upgrade to the Scale plan."
url={`/environments/${environmentId}/settings/billing`}
/>
) : (

View File

@@ -1,12 +1,16 @@
import { Globe, PlusIcon, TrashIcon } from "lucide-react";
import { PlusIcon, TrashIcon } from "lucide-react";
import { useState } from "react";
import { Control, FieldArrayWithId, UseFieldArrayRemove, useFieldArray } from "react-hook-form";
import { UseFormReturn } from "react-hook-form";
import {
Control,
FieldArrayWithId,
UseFieldArrayRemove,
UseFormReturn,
useFieldArray,
} from "react-hook-form";
import toast from "react-hot-toast";
import { cn } from "@formbricks/lib/cn";
import { testURLmatch } from "@formbricks/lib/utils/url";
import { TActionClassInput, TActionClassPageUrlRule } from "@formbricks/types/action-classes";
import { Alert, AlertDescription, AlertTitle } from "../../../Alert";
import { Button } from "../../../Button";
import { FormControl, FormField, FormItem } from "../../../Form";
import { Input } from "../../../Input";
@@ -64,7 +68,7 @@ export const PageUrlSelector = ({ form }: PageUrlSelectorProps) => {
name="noCodeConfig.urlFilters"
render={() => (
<div>
<Label className="font-semibold">Filter</Label>
<Label className="font-semibold">Page Filter</Label>
<p className="text-sm font-normal text-slate-500">
Limit the pages on which this action gets captured
</p>
@@ -83,7 +87,7 @@ export const PageUrlSelector = ({ form }: PageUrlSelectorProps) => {
)}
/>
</div>
{filterType === "specific" ? (
{filterType === "specific" && (
<div className="mb-2 mt-4 w-full space-y-3 pe-2">
<Label>URL</Label>
<UrlInput control={form.control} fields={fields} removeUrlRule={removeUrlRule} />
@@ -130,14 +134,6 @@ export const PageUrlSelector = ({ form }: PageUrlSelectorProps) => {
</div>
</div>
</div>
) : (
<div className="mr-2">
<Alert className="my-2">
<Globe className="h-4 w-4" />
<AlertTitle>Visible on all pages</AlertTitle>
<AlertDescription>This action will be captured on all pages of your website</AlertDescription>
</Alert>
</div>
)}
</>
);