fix: Routing Form - Small Improvements (#17538)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
2024-11-11 14:14:39 +05:30
parent aaf630f01f
commit 62aaba32cf
8 changed files with 62 additions and 21 deletions
@@ -161,6 +161,10 @@
 <symbol class="lucide lucide-chevron-up" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="chevron-up">
  <path d="m18 15-6-6-6 6" ></path>
 </symbol>
+<symbol class="lucide lucide-chevrons-down-up" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="chevrons-down-up">
+  <path d="m7 20 5-5 5 5" ></path>
+  <path d="m7 4 5 5 5-5" ></path>
+</symbol>
 <symbol class="lucide lucide-chevrons-left" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="chevrons-left">
  <path d="m11 17-5-5 5-5" ></path>
  <path d="m18 17-5-5 5-5" ></path>
@@ -330,11 +330,8 @@ const Route = ({
              setRoutes(newRoutes);
            },
          }}
-          label={
-            <div>
-              <span className="mr-2">{`Route ${index + 1}`}</span>
-            </div>
-          }
+          isLabelEditable={false}
+          label={route.name ?? `Route ${index + 1}`}
          className="mb-6">
          <div className="-mt-3">
            <Link href={`${appUrl}/route-builder/${route.id}`}>
@@ -460,7 +457,11 @@ const Route = ({
      className="mb-6"
      moveUp={moveUp}
      moveDown={moveDown}
-      label={route.isFallback ? "Fallback Route" : `Route ${index + 1}`}
+      label={route.name ?? (route.isFallback ? "Fallback Route" : `Route ${index + 1}`)}
+      isLabelEditable={!route.isFallback}
+      onLabelChange={(label) => {
+        setRoute(route.id, { name: label });
+      }}
      deleteField={{
        check: () => routes.length !== 1 && !route.isFallback,
        fn: () => {
@@ -716,6 +717,7 @@ function useRoutes({
        }
        return {
          id: route.id,
+          name: route.name,
          attributeRoutingConfig: route.attributeRoutingConfig,
          action: route.action,
          isFallback: route.isFallback,
@@ -130,6 +130,7 @@ export const queryValueSaveValidationSchema = queryValueSchema

 export const zodNonRouterRoute = z.object({
  id: z.string(),
+  name: z.string().optional(),
  attributeRoutingConfig: z
    .object({
      skipContactOwner: z.boolean().optional(),
@@ -168,6 +169,7 @@ export const zodNonRouterRouteView = zodNonRouterRoute;
 export const zodRouterRoute = z.object({
  // This is the id of the Form being used as router
  id: z.string(),
+  name: z.string().optional(),
  isRouter: z.literal(true),
 });

@@ -30,7 +30,7 @@ const Layout = (props: LayoutProps) => {
  const postHog = usePostHog();
  const isFullPageWithoutSidebar = pathname?.startsWith("/apps/routing-forms/reporting/");
  const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
-
+  const withoutSeo = props.withoutSeo ?? props.withoutMain ?? false;
  useBootIntercom();
  useFormbricks();

@@ -42,7 +42,7 @@ const Layout = (props: LayoutProps) => {

  return (
    <>
-      {!props.withoutSeo && (
+      {!withoutSeo && (
        <HeadSeo
          title={pageTitle ?? APP_NAME}
          description={props.description ?? props.subtitle?.toString() ?? ""}
@@ -54,7 +54,7 @@ const Layout = (props: LayoutProps) => {

      <TimezoneChangeDialog />

-      <div className="flex flex-col min-h-screen">
+      <div className="flex min-h-screen flex-col">
        {banners && !props.isPlatformUser && !isFullPageWithoutSidebar && (
          <BannerContainer banners={banners} />
        )}
@@ -65,7 +65,7 @@ const Layout = (props: LayoutProps) => {
          ) : (
            <SideBarContainer isPlatformUser={props.isPlatformUser} bannersHeight={bannersHeight} />
          )}
-          <div className="flex flex-col flex-1 w-0">
+          <div className="flex w-0 flex-1 flex-col">
            <MainContainer {...props} />
          </div>
        </div>
@@ -187,7 +187,7 @@ export function ShellMain(props: LayoutProps) {
                  </h3>
                )}
                {props.subtitle && (
-                  <p className="hidden text-sm text-default md:block" data-testid="subtitle">
+                  <p className="text-default hidden text-sm md:block" data-testid="subtitle">
                    {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
                  </p>
                )}
@@ -243,7 +243,7 @@ function MainContainer({
  ...props
 }: LayoutProps) {
  return (
-    <main className="relative z-0 flex-1 bg-default focus:outline-none">
+    <main className="bg-default relative z-0 flex-1 focus:outline-none">
      {/* show top navigation for md and smaller (tablet and phones) */}
      {TopNavContainerProp}
      <div className="max-w-full px-2 py-4 lg:px-6">
@@ -1,16 +1,22 @@
+"use client";
+
 import Link from "next/link";
+import { useState } from "react";

 import { classNames } from "@calcom/lib";

 import type { BadgeProps } from "../badge";
 import { Badge } from "../badge";
 import { Divider } from "../divider";
+import { Input } from "../form/inputs/TextField";
 import { Icon } from "../icon";

 type Action = { check: () => boolean; fn: () => void };
 export default function FormCard({
  children,
  label,
+  isLabelEditable,
+  onLabelChange,
  deleteField,
  moveUp,
  moveDown,
@@ -19,7 +25,9 @@ export default function FormCard({
  ...restProps
 }: {
  children: React.ReactNode;
-  label?: React.ReactNode;
+  label: string;
+  isLabelEditable?: boolean;
+  onLabelChange?: (label: string) => void;
  deleteField?: Action | null;
  moveUp?: Action | null;
  moveDown?: Action | null;
@@ -31,6 +39,12 @@ export default function FormCard({
    "flex items-center group relative w-full rounded-md p-4 border border-subtle"
  );

+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const toggleFormCard = () => {
+    setIsCollapsed((prev) => !prev);
+  };
+
  return (
    <div className={className} {...restProps}>
      <div>
@@ -54,26 +68,43 @@ export default function FormCard({
      <div className="w-full">
        <div className="flex items-center justify-between">
          <div>
-            <span className="text-emphasis text-sm font-semibold">{label}</span>
+            {isLabelEditable ? (
+              <Input type="text" value={label} onChange={(e) => onLabelChange?.(e.target.value)} />
+            ) : (
+              <span className="text-emphasis text-sm font-semibold">{label}</span>
+            )}
            {badge && (
              <Badge className="ml-2" variant={badge.variant}>
                {badge.href ? <Link href={badge.href}>{badge.text}</Link> : badge.text}
              </Badge>
            )}
          </div>
-          {deleteField?.check() ? (
+          <div>
            <button
              type="button"
              onClick={() => {
-                deleteField?.fn();
+                toggleFormCard();
              }}
              color="secondary">
-              <Icon name="trash-2" className="text-default h-4 w-4" />
+              <Icon name="chevrons-down-up" className="text-default h-4 w-4" />
            </button>
-          ) : null}
+            {deleteField?.check() ? (
+              <button
+                type="button"
+                className="ml-2"
+                onClick={() => {
+                  deleteField?.fn();
+                }}
+                color="secondary">
+                <Icon name="trash-2" className="text-default h-4 w-4" />
+              </button>
+            ) : null}
+          </div>
+        </div>
+        <div className={isCollapsed ? "hidden" : ""}>
+          <Divider className="mb-6 mt-3" />
+          {children}
        </div>
-        <Divider className="mb-6 mt-3" />
-        {children}
      </div>
    </div>
  );
@@ -135,5 +135,6 @@ export const lucideIconList = new Set([
  "webhook",
  "x",
  "zap",
-  "waypoints"
+  "waypoints",
+  "chevrons-down-up",
 ]);
@@ -33,6 +33,7 @@ export type IconName =
  | "chevron-left"
  | "chevron-right"
  | "chevron-up"
+  | "chevrons-down-up"
  | "chevrons-left"
  | "chevrons-right"
  | "circle-alert"