fix: open reporting in new tab full screen (#13659)

* open reporting in new tab full screen

* nit

* fixed type

* Fix failing test

* Update packages/app-store/routing-forms/pages/reporting/[...appPages].tsx

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Hariom <hariombalhara@gmail.com>

packages/app-store/routing-forms/components/RoutingNavBar.tsx

@@ -21,6 +21,7 @@ export default function RoutingNavBar({
     },
     {
       name: "Reporting",
+      target: "_blank",
       href: `${appUrl}/reporting/${form?.id}`,
       className: "pointer-events-none opacity-30 lg:pointer-events-auto lg:opacity-100",
     },

packages/app-store/routing-forms/pages/reporting/[...appPages].tsx

@@ -166,18 +166,16 @@ const Reporter = ({ form }: { form: inferSSRProps<typeof getServerSideProps>["fo
     []
   );
   return (
-    <div className="flex flex-col-reverse md:flex-row">
-      <div className="cal-query-builder bg-default w-full ltr:mr-2 rtl:ml-2">
-        <Query
-          {...config}
-          value={query.state.tree}
-          onChange={(immutableTree, config) => {
-            onChange(immutableTree, config as QueryBuilderUpdatedConfig);
-          }}
-          renderBuilder={renderBuilder}
-        />
-        <Result formId={form.id} jsonLogicQuery={jsonLogicQuery as JsonLogicQuery} />
-      </div>
+    <div className="cal-query-builder bg-default fixed inset-0 w-full overflow-scroll pt-12 ltr:mr-2 rtl:ml-2 sm:pt-0">
+      <Query
+        {...config}
+        value={query.state.tree}
+        onChange={(immutableTree, config) => {
+          onChange(immutableTree, config as QueryBuilderUpdatedConfig);
+        }}
+        renderBuilder={renderBuilder}
+      />
+      <Result formId={form.id} jsonLogicQuery={jsonLogicQuery as JsonLogicQuery} />
     </div>
   );
 };

packages/app-store/routing-forms/playwright/tests/basic.e2e.ts

@@ -261,6 +261,7 @@ test.describe("Routing Forms", () => {
         ["custom-page", ""],
       ]);
 
+      await page.goto(`apps/routing-forms/route-builder/${routingForm.id}`);
       const [download] = await Promise.all([
         // Start waiting for the download
         page.waitForEvent("download"),
@@ -399,6 +400,7 @@ async function fillSeededForm(page: Page, routingFormId: string) {
   await gotoRoutingLink({ page, formId: routingFormId });
   await page.fill('[data-testid="form-field-Test field"]', "event-routing");
   page.click('button[type="submit"]');
+
   await page.waitForURL((url) => {
     return url.pathname.endsWith("/pro/30min");
   });

packages/ui/components/navigation/tabs/HorizontalTabItem.tsx

@@ -12,6 +12,7 @@ export type HorizontalTabItemProps = {
   name: string;
   disabled?: boolean;
   className?: string;
+  target?: string;
   href: string;
   linkShallow?: boolean;
   linkScroll?: boolean;
@@ -43,6 +44,7 @@ const HorizontalTabItem = function ({
         props.disabled && "pointer-events-none !opacity-30",
         props.className
       )}
+      target={props.target ? props.target : undefined}
       data-testid={`horizontal-tab-${name}`}
       aria-current={isCurrent ? "page" : undefined}>
       {props.icon && (