From feb8218e4ef43028d920709a192d2eee518763d1 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Thu, 9 Mar 2023 12:14:17 +0000
Subject: [PATCH] Routing form UI update (#7452)

* Routing form UI update

* Routing form UI update

---------

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 apps/web/public/static/locales/en/common.json |  4 +--
 .../pages/forms/[...appPages].tsx             | 30 +++++++------------
 packages/ui/components/list/List.tsx          |  3 +-
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index c4f56d10d8..f42047f575 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1252,7 +1252,7 @@
   "attendee_name_info": "The person booking's name",
   "to": "To",
   "workflow_turned_on_successfully": "{{workflowName}} workflow turned {{offOn}} successfully",
-  "download_responses": "Download Responses",
+  "download_responses": "Download responses",
   "download_responses_description": "Download all responses to your form in CSV format.",
   "download": "Download",
   "create_your_first_form": "Create your first form",
@@ -1291,7 +1291,7 @@
   "exchange_authentication_standard": "Basic authentication",
   "exchange_authentication_ntlm": "NTLM authentication",
   "exchange_compression": "GZip compression",
-  "routing_forms_description": "You can see all forms and routes you have created here.",
+  "routing_forms_description": "Create forms to direct attendees to the correct destinations",
   "routing_forms_send_email_owner": "Send Email to Owner",
   "routing_forms_send_email_owner_description": "Sends an email to the owner when the form is submitted",
   "add_new_form": "Add new form",
diff --git a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
index ec7a5df3cd..cdcc5944cd 100644
--- a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
@@ -10,16 +10,7 @@ import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
-import {
-  Badge,
-  ButtonGroup,
-  DropdownMenuSeparator,
-  EmptyScreen,
-  List,
-  ListLinkItem,
-  Tooltip,
-  Button,
-} from "@calcom/ui";
+import { Badge, ButtonGroup, EmptyScreen, List, ListLinkItem, Tooltip, Button } from "@calcom/ui";
 import {
   FiPlus,
   FiGitMerge,
@@ -160,6 +151,7 @@ export default function RoutingForms({
                           heading={form.name}
                           disabled={disabled}
                           subHeading={description}
+                          className="space-x-2 rtl:space-x-reverse"
                           actions={
                             <>
                               <FormAction className="self-center" action="toggle" routingForm={form} />
@@ -184,6 +176,15 @@ export default function RoutingForms({
                                   disabled={disabled}
                                   tooltip={t("copy_link_to_form")}
                                 />
+                                <FormAction
+                                  routingForm={form}
+                                  action="embed"
+                                  color="secondary"
+                                  variant="icon"
+                                  StartIcon={FiCode}
+                                  disabled={disabled}
+                                  tooltip={t("embed")}
+                                />
                                 <FormActionsDropdown form={form}>
                                   <FormAction
                                     action="edit"
@@ -200,14 +201,6 @@ export default function RoutingForms({
                                     StartIcon={FiDownload}>
                                     {t("download_responses")}
                                   </FormAction>
-                                  <FormAction
-                                    action="embed"
-                                    routingForm={form}
-                                    color="minimal"
-                                    className="w-full"
-                                    StartIcon={FiCode}>
-                                    {t("embed")}
-                                  </FormAction>
                                   <FormAction
                                     action="duplicate"
                                     routingForm={form}
@@ -227,7 +220,6 @@ export default function RoutingForms({
                                       {t("Copy Typeform Redirect Url")}
                                     </FormAction>
                                   ) : null}
-                                  <DropdownMenuSeparator />
                                   <FormAction
                                     action="_delete"
                                     routingForm={form}
diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx
index 89ee949f5c..974896f551 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -68,7 +68,7 @@ export type ListLinkItemProps = {
 } & JSX.IntrinsicElements["li"];
 
 export function ListLinkItem(props: ListLinkItemProps) {
-  const { href, heading = "", children, disabled = false, actions = <div /> } = props;
+  const { href, heading = "", children, disabled = false, actions = <div />, className = "" } = props;
   let subHeading = props.subHeading;
   if (!subHeading) {
     subHeading = "";
@@ -77,6 +77,7 @@ export function ListLinkItem(props: ListLinkItemProps) {
     <li
       className={classNames(
         "group flex w-full items-center justify-between p-5 hover:bg-neutral-50",
+        className,
         disabled ? "hover:bg-white" : ""
       )}>
       <Link