Fix automation edit cards height. Scroll when card longer than screen

This commit is contained in:
Debanjum Singh Solanky
2024-08-11 13:43:04 +05:30
parent d99f03e4f3
commit ec9add9a51

View File

@@ -65,7 +65,7 @@ import { useAuthenticatedData, UserProfile } from "../common/auth";
import LoginPrompt from "../components/loginPrompt/loginPrompt"; import LoginPrompt from "../components/loginPrompt/loginPrompt";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { ToastAction } from "@/components/ui/toast"; import { ToastAction } from "@/components/ui/toast";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Alert, AlertDescription } from "@/components/ui/alert";
import SidePanel from "../components/sidePanel/chatHistorySidePanel"; import SidePanel from "../components/sidePanel/chatHistorySidePanel";
import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
@@ -261,7 +261,6 @@ function AutomationsCard(props: AutomationsCardProps) {
const automation = props.automation; const automation = props.automation;
const [timeRecurrence, setTimeRecurrence] = useState(""); const [timeRecurrence, setTimeRecurrence] = useState("");
const [intervalString, setIntervalString] = useState(""); const [intervalString, setIntervalString] = useState("");
useEffect(() => { useEffect(() => {
@@ -632,10 +631,9 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
props.onSubmit(values); props.onSubmit(values);
setIsSaving(true); setIsSaving(true);
})} })}
className="space-y-8" className="space-y-6"
> >
<FormItem> <FormItem className="space-y-1">
<FormLabel>Setup</FormLabel>
<FormDescription> <FormDescription>
Emails will be sent to this address. Timezone and location data will be used Emails will be sent to this address. Timezone and location data will be used
to schedule automations. to schedule automations.
@@ -648,7 +646,7 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
control={props.form.control} control={props.form.control}
name="subject" name="subject"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="space-y-1">
<FormLabel>Subject</FormLabel> <FormLabel>Subject</FormLabel>
<FormDescription> <FormDescription>
This is the subject of the email you will receive. This is the subject of the email you will receive.
@@ -672,7 +670,7 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
control={props.form.control} control={props.form.control}
name="everyBlah" name="everyBlah"
render={({ field }) => ( render={({ field }) => (
<FormItem className="w-full"> <FormItem className="w-full space-y-1">
<FormLabel>Frequency</FormLabel> <FormLabel>Frequency</FormLabel>
<FormDescription>How often should this automation run?</FormDescription> <FormDescription>How often should this automation run?</FormDescription>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
@@ -705,7 +703,7 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
control={props.form.control} control={props.form.control}
name="dayOfWeek" name="dayOfWeek"
render={({ field }) => ( render={({ field }) => (
<FormItem className="w-full"> <FormItem className="w-full space-y-1">
<FormDescription> <FormDescription>
Every week, on which day should this automation run? Every week, on which day should this automation run?
</FormDescription> </FormDescription>
@@ -743,7 +741,7 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
control={props.form.control} control={props.form.control}
name="dayOfMonth" name="dayOfMonth"
render={({ field }) => ( render={({ field }) => (
<FormItem className="w-full"> <FormItem className="w-full space-y-1">
<FormDescription> <FormDescription>
Every month, on which day should the automation run? Every month, on which day should the automation run?
</FormDescription> </FormDescription>
@@ -780,7 +778,7 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
control={props.form.control} control={props.form.control}
name="timeRecurrence" name="timeRecurrence"
render={({ field }) => ( render={({ field }) => (
<FormItem className="w-full"> <FormItem className="w-full space-y-1">
<FormLabel>Time</FormLabel> <FormLabel>Time</FormLabel>
<FormDescription> <FormDescription>
On the days this automation runs, at what time should it run? On the days this automation runs, at what time should it run?
@@ -815,7 +813,7 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
control={props.form.control} control={props.form.control}
name="queryToRun" name="queryToRun"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="space-y-1">
<FormLabel>Instructions</FormLabel> <FormLabel>Instructions</FormLabel>
<FormDescription>What do you want Khoj to do?</FormDescription> <FormDescription>What do you want Khoj to do?</FormDescription>
{props.create && ( {props.create && (
@@ -867,7 +865,7 @@ function AutomationModificationForm(props: AutomationModificationFormProps) {
function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfile | null) { function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfile | null) {
return ( return (
<div className="flex flex-wrap gap-2 items-center justify-start md:justify-end"> <div className="flex flex-wrap gap-2 items-center justify-start">
{authenticatedData ? ( {authenticatedData ? (
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm"> <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm">
<Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" /> <Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" />
@@ -946,7 +944,7 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
{props.callToAction} {props.callToAction}
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent className="max-h-[98vh] overflow-y-auto">
<DialogTitle>Automation</DialogTitle> <DialogTitle>Automation</DialogTitle>
<EditCard <EditCard
automation={props.automation} automation={props.automation}