Merge pull request #328 from bitovi/TR-245-Saved-reports-opening-into…

…-configuration-sidebar-instead-of-full-screen

fix up view reports

pages/index.html.js

@@ -39,7 +39,7 @@ module.exports = function (env, mainFileRoute, { showHeader }) {
 
       <div id="mainContent" class="flex flex-col w-screen h-screen overflow-hidden">
         ${Header(showHeader)}
-
+      
         <div id="loadingJira" class='place-center'>
           <p class="my-2">Loading the Jira Timeline Report ...</p>
         </div>

public/react/SettingsSidebar/SettingsSidebar.tsx

@@ -5,7 +5,6 @@ import { value } from "../../can";
 import routeData from "../../canjs/routing/route-data";
 
 import TeamConfiguration from "./components/TeamConfiguration";
-import ViewReports from "./components/ViewReports";
 
 import { CanObservable, useCanObservable } from "../hooks/useCanObservable";
 import Branding from "./components/Branding";
@@ -65,11 +64,6 @@ const SettingsSidebar: FC<SettingsSidebarProps> = ({
           <Theme onBackButtonClicked={changeSettings} />
         </div>
       )}
-      {showSettings === "REPORTS" && (
-        <div className="h-full">
-          <ViewReports onBackButtonClicked={changeSettings} />
-        </div>
-      )}
     </div>
   );
 };

public/react/SettingsSidebar/components/ViewReports/ViewReport.test.tsx → public/react/ViewReports/ViewReport.test.tsx

@@ -1,4 +1,4 @@
-import type { AppStorage } from "../../../../jira/storage/common";
+import type { AppStorage } from "../../jira/storage/common";
 import type { ComponentProps } from "react";
 
 import React, { Suspense } from "react";
@@ -9,7 +9,7 @@ import { FlagsProvider } from "@atlaskit/flag";
 import userEvent from "@testing-library/user-event";
 
 import ViewReports from "./ViewReports";
-import { StorageProvider } from "../../../services/storage";
+import { StorageProvider } from "../services/storage";
 
 type OverrideStorage = Omit<AppStorage, "get"> & {
   get: (key: string) => any;

public/react/SettingsSidebar/components/ViewReports/ViewReports.tsx → public/react/ViewReports/ViewReports.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import type { Report } from "../../../../jira/reports";
+import type { Report } from "../../jira/reports";
 
 import React, { useMemo, useState } from "react";
 import DynamicTable from "@atlaskit/dynamic-table";
@@ -9,9 +9,9 @@ import DropdownMenu, { DropdownItem } from "@atlaskit/dropdown-menu";
 import { IconButton } from "@atlaskit/button/new";
 
 import ViewReportsLayout from "./components/ViewReportsLayout";
-import { useAllReports, useDeleteReport, useRecentReports } from "../../../services/reports";
+import { useAllReports, useDeleteReport, useRecentReports } from "../services/reports";
 import DeleteReportModal from "./components/DeleteReportModal";
-import { Link } from "../../../services/routing";
+import { Link } from "../services/routing";
 
 interface ViewReportProps {
   onBackButtonClicked: () => void;

public/react/SettingsSidebar/components/ViewReports/ViewReportsWrapper.tsx → public/react/ViewReports/ViewReportsWrapper.tsx

@@ -2,28 +2,55 @@ import type { FC } from "react";
 
 import React, { Suspense, useMemo } from "react";
 
+// @ts-expect-error we need to do something about all these conflicting react
+// types
+import { createPortal } from "react-dom";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { ErrorBoundary } from "@sentry/react";
 import SectionMessage from "@atlaskit/section-message";
 import DynamicTable from "@atlaskit/dynamic-table";
+import { FlagsProvider } from "@atlaskit/flag";
 
 import ViewReports from "./ViewReports";
-import LinkButton from "../../../components/LinkButton";
+import LinkButton from "../components/LinkButton";
 import ViewReportLayout from "./components/ViewReportsLayout";
-import Skeleton from "../../../components/Skeleton";
+import Skeleton from "../components/Skeleton";
+import { useCanObservable } from "../hooks/useCanObservable";
+import { value } from "../../can";
+import routeData from "../../canjs/routing/route-data";
+import { queryClient } from "../services/query";
+import { StorageProvider } from "../services/storage";
 
 interface ViewReportsWrapperProps {
   onBackButtonClicked: () => void;
 }
 
 const ViewReportsWrapper: FC<ViewReportsWrapperProps> = (viewReportProps) => {
-  return (
-    <ErrorBoundary
-      fallback={<ViewReportsError onBackButtonClicked={viewReportProps.onBackButtonClicked} />}
-    >
-      <Suspense fallback={<ViewReportSkeleton {...viewReportProps} />}>
-        <ViewReports {...viewReportProps} />
-      </Suspense>
-    </ErrorBoundary>
+  const showSettings = useCanObservable<string>(value.from(routeData, "showSettings"));
+
+  if (showSettings !== "REPORTS") {
+    return null;
+  }
+
+  return createPortal(
+    <StorageProvider storage={routeData.storage}>
+      <FlagsProvider>
+        <QueryClientProvider client={queryClient}>
+          <ErrorBoundary
+            fallback={
+              <ViewReportsError onBackButtonClicked={viewReportProps.onBackButtonClicked} />
+            }
+          >
+            <Suspense fallback={<ViewReportSkeleton {...viewReportProps} />}>
+              <div className="absolute top-0 left-0 right-0 bottom-0 bg-white z-[100]">
+                <ViewReports {...viewReportProps} />
+              </div>
+            </Suspense>
+          </ErrorBoundary>
+        </QueryClientProvider>
+      </FlagsProvider>
+    </StorageProvider>,
+    document.body
   );
 };
 

public/react/SettingsSidebar/components/ViewReports/components/DeleteReportModal/DeleteReportModal.tsx → public/react/ViewReports/components/DeleteReportModal/DeleteReportModal.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import type { Report } from "../../../../../../jira/reports";
+import type { Report } from "../../../../jira/reports";
 
 import React from "react";
 import Modal, {

public/react/SettingsSidebar/components/ViewReports/components/ViewReportsLayout/ViewReportsLayout.tsx → public/react/ViewReports/components/ViewReportsLayout/ViewReportsLayout.tsx

@@ -2,7 +2,7 @@ import type { FC, ReactNode } from "react";
 
 import React from "react";
 
-import SidebarButton from "../../../../../components/SidebarButton";
+import SidebarButton from "../../../components/SidebarButton";
 import ArrowLeftCircleIcon from "@atlaskit/icon/glyph/arrow-left-circle";
 import Heading from "@atlaskit/heading";
 

public/timeline-report.js

@@ -27,7 +27,7 @@ import SettingsSidebar from "./react/SettingsSidebar";
 import SampleDataNotice from "./react/SampleDataNotice";
 
 import { getTheme, applyThemeToCssVars } from "./jira/theme";
-
+import ViewReports from "./react/ViewReports";
 
 export class TimelineReport extends StacheElement {
   static view = `
@@ -36,10 +36,9 @@ export class TimelineReport extends StacheElement {
           class="border-gray-100 border-r border-neutral-301 relative block bg-white shrink-0" 
         ></div>
     {{/if}}
-    <div class="fullish-vh pl-4 pr-4 flex flex-1 flex-col overflow-y-auto relative">
-
-      <div id='sample-data-notice' class='pt-4'></div>
-
+    <div class="fullish-vh pl-4 pr-4 flex flex-1 flex-col overflow-y-auto relative" on:click="this.goBack()">
+    <div id="view-reports"></div>  
+    <div id='sample-data-notice' class='pt-4'></div>
       <div id="saved-reports" class='py-4'></div>
       <div class="flex gap-1">
         <select-issue-type 
@@ -176,6 +175,14 @@ export class TimelineReport extends StacheElement {
   }
 
   async connected() {
+    createRoot(document.getElementById("view-reports")).render(
+      createElement(ViewReports, {
+        onBackButtonClicked: () => {
+          this.routeData.showSettings = "";
+        },
+      })
+    );
+
     createRoot(document.getElementById("sample-data-notice")).render(
       createElement(SampleDataNotice, {
         shouldHideNoticeObservable: this.routeData.isLoggedInObservable,