TR-106: Get the paneling layout working right

bitovi · Jan 21, 2025 · 18668bd · 18668bd
1 parent 64965b2
commit 18668bd
Show file tree

Hide file tree

Showing 7 changed files with 205 additions and 204 deletions.
diff --git a/pages/index.html.js b/pages/index.html.js
@@ -1,34 +1,5 @@
 const getSafeEnv = require("../server/client-env");
 
-const header = `
-  <div class="color-bg-white px-4 sticky top-0 z-50 border-b border-neutral-301">
-    <nav class="mx-auto py-2 place-center">
-      <div class="flex gap-4" style="align-items: center">
-        <ul class="flex gap-3 grow items-baseline">
-          <li>
-            <a
-              href="https://github.com/bitovi/jira-timeline-report" 
-              class="color-gray-900 font-3xl underline-on-hover bitovi-font-poppins font-bold"
-            >
-              Status Reports for Jira
-            </a>
-          </li>
-          <li>
-            <a 
-              href="https://www.bitovi.com/services/agile-project-management-consulting" 
-              class="bitovi-poppins color-text-bitovi-red-orange"
-              style="line-height: 37px; font-size: 14px; text-decoration: none"
-            >
-              by <img src="./images/bitovi-logo.png" class="inline align-baseline"/>
-            </a>
-          </li>
-        </ul>
-        <select-cloud></select-cloud>
-        <div id="login"></div>
-      </div>
-    </nav>
-  </div>`;
-
 module.exports = function (env, mainFileRoute, { showHeader }) {
   return `
     <!DOCTYPE html>
@@ -51,7 +22,7 @@ module.exports = function (env, mainFileRoute, { showHeader }) {
       <link rel="stylesheet" href="dist/production.css">
       <script src="https://connect-cdn.atl-paas.net/all${
         env.NODE_ENV === "development" ? "-debug" : ""
-      }.js"></script>
+    }.js"></script>
       <!-- Google tag (gtag.js) -->
       <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQR3T6BZL3"></script>
       <script>
@@ -63,12 +34,14 @@ module.exports = function (env, mainFileRoute, { showHeader }) {
       </script>
     </head>
 
-    <body class='overflow-x-hidden'>
+    <body>
 
-      ${showHeader ? header : '<div id="login"></div>'}
+      <div id="mainContent" class="flex flex-col h-screen">
+        ${Header(showHeader)}
 
-      <div id="mainElement" class='place-center w-1280'>
-        <p class="my-2">Loading the Jira Timeline Report ...</p>
+        <div id="loadingJira" class='place-center'>
+          <p class="my-2">Loading the Jira Timeline Report ...</p>
+        </div>
       </div>
 
       <script type="module">
@@ -80,3 +53,36 @@ module.exports = function (env, mainFileRoute, { showHeader }) {
     </html>
   `;
 };
+
+function Header(showHeader = true) {
+  return showHeader ? `
+    <div class="color-bg-white px-4 sticky top-0 z-50 border-b border-neutral-301">
+      <nav class="mx-auto py-2 place-center">
+        <div class="flex gap-4" style="align-items: center">
+          <ul class="flex gap-3 grow items-baseline">
+            <li>
+              <a
+                href="https://github.com/bitovi/jira-timeline-report" 
+                class="color-gray-900 font-3xl underline-on-hover bitovi-font-poppins font-bold"
+              >
+                Status Reports for Jira
+              </a>
+            </li>
+            <li>
+              <a 
+                href="https://www.bitovi.com/services/agile-project-management-consulting" 
+                class="bitovi-poppins color-text-bitovi-red-orange"
+                style="line-height: 37px; font-size: 14px; text-decoration: none"
+              >
+                by <img src="./images/bitovi-logo.png" class="inline align-baseline"/>
+              </a>
+            </li>
+          </ul>
+          <select-cloud></select-cloud>
+          <div id="login"></div>
+        </div>
+      </nav>
+    </div>
+  ` : 
+  '<div id="login"></div>';
+}
diff --git a/public/canjs/controls/timeline-configuration/timeline-configuration.js b/public/canjs/controls/timeline-configuration/timeline-configuration.js
@@ -189,7 +189,7 @@ export class TimelineConfiguration extends StacheElement {
         </div>
 
     </div>
-        `;
+  `;
 
   static props = {
     // passed

diff --git a/public/canjs/reports/status-report.js b/public/canjs/reports/status-report.js
@@ -21,7 +21,7 @@ const release_box_subtitle_wrapper = `flex gap-2 text-neutral-800 text-sm`
 
 export class StatusReport extends StacheElement {
     static view = `
-    <div class='release_wrapper {{# if(this.breakdown) }}extra-timings{{else}}simple-timings{{/ if}} px-2 flex gap-2'>
+    <div class='release_wrapper {{# if(this.breakdown) }}extra-timings{{else}}simple-timings{{/ if}} px-2 flex flex-wrap gap-2'>
         {{# for(primaryIssue of this.primaryIssuesOrReleases) }}
             <div class='release_box grow'>
                 <div 

diff --git a/public/react/Configure/ConfigurationPanel.tsx b/public/react/Configure/ConfigurationPanel.tsx
@@ -33,7 +33,7 @@ const ConfigurationPanel: FC<ConfigurationPanelProps> = ({
 
   return (
     <div className="w-full h-full flex">
-      <div className="w-56 border-r border-neutral-30 pr-4">
+      <div className="w-56 border-r border-neutral-30 pr-4 flex flex-col">
         <SidebarButton onClick={onBackButtonClicked}>
           <ArrowLeftCircleIcon label="go back" />
           Go back
@@ -48,12 +48,12 @@ const ConfigurationPanel: FC<ConfigurationPanelProps> = ({
       {/* checks that configuration issue exists */}
       <StorageCheck>
         {selectedTeam === "global" && (
-          <div className="w-128">
+          <div className="w-128 overflow-auto">
             <ConfigureAllTeams jiraFields={jiraFields} {...configurationProps} />
           </div>
         )}
         {!!selectedTeam && selectedTeam !== "global" && (
-          <div className="w-128">
+          <div className="w-128 overflow-auto">
             <ConfigureTeams
               teamName={selectedTeam}
               jiraFields={jiraFields}

diff --git a/public/react/Configure/components/TeamSelector/TeamSelector.tsx b/public/react/Configure/components/TeamSelector/TeamSelector.tsx
@@ -55,46 +55,48 @@ const TeamSelector: FC<TeamSelectorProps> = ({
           <div>Derived Teams Not Found please add an issue source to show teams</div>
         </>
       )}
-      {(groups.storageAndReport?.length || groups.reportOnly?.length) && (
-        <>
-          <Label htmlFor="">TEAMS IN REPORT</Label>
-          {groups.storageAndReport?.map((team) => {
-            return (
-              <TeamListItem
-                key={team.name}
-                team={team}
-                selectedTeam={selectedTeam}
-                setSelectedTeam={setSelectedTeam}
-              />
-            );
-          })}
-          {groups.reportOnly?.map((team) => {
-            return (
-              <TeamListItem
-                key={team.name}
-                team={team}
-                selectedTeam={selectedTeam}
-                setSelectedTeam={setSelectedTeam}
-              />
-            );
-          })}
-        </>
-      )}
-      {groups.storageOnly?.length && (
-        <div className="mt-2">
-          <Label htmlFor="">TEAMS OUTSIDE REPORT</Label>
-          {groups.storageOnly?.map((team) => {
-            return (
-              <TeamListItem
-                key={team.name}
-                team={team}
-                selectedTeam={selectedTeam}
-                setSelectedTeam={setSelectedTeam}
-              />
-            );
-          })}
-        </div>
-      )}
+      <div className="overflow-auto">
+        {(groups.storageAndReport?.length || groups.reportOnly?.length) && (
+          <div className="mt-2">
+            <Label htmlFor="">TEAMS IN REPORT</Label>
+            {groups.storageAndReport?.map((team) => {
+              return (
+                <TeamListItem
+                  key={team.name}
+                  team={team}
+                  selectedTeam={selectedTeam}
+                  setSelectedTeam={setSelectedTeam}
+                />
+              );
+            })}
+            {groups.reportOnly?.map((team) => {
+              return (
+                <TeamListItem
+                  key={team.name}
+                  team={team}
+                  selectedTeam={selectedTeam}
+                  setSelectedTeam={setSelectedTeam}
+                />
+              );
+            })}
+          </div>
+        )}
+        {groups.storageOnly?.length && (
+          <div className="mt-2">
+            <Label htmlFor="">TEAMS OUTSIDE REPORT</Label>
+            {groups.storageOnly?.map((team) => {
+              return (
+                <TeamListItem
+                  key={team.name}
+                  team={team}
+                  selectedTeam={selectedTeam}
+                  setSelectedTeam={setSelectedTeam}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
     </>
   );
 };

diff --git a/public/shared/main-helper.js b/public/shared/main-helper.js
@@ -11,9 +11,6 @@ import { directlyReplaceUrlParam } from "../canjs/routing/state-storage.js";
 import { route, value } from "../can.js";
 import routeData from "../canjs/routing/route-data.js";
 
-
-
-
 export default async function mainHelper(config, { host, createStorage, configureRouting, showSidebarBranding }) {
   let fix = await legacyPrimaryReportingTypeRoutingFix();
   fix = await legacyPrimaryIssueTypeRoutingFix();
@@ -48,7 +45,7 @@ export default async function mainHelper(config, { host, createStorage, configur
   const listener = ({ value }) => {
     if (value) {
       loginComponent.off("isResolved", listener);
-      mainElement.style.display = "none";
+      loadingJira.style.display = "none";
 
       const report = new TimelineReport().initialize({
         jiraHelpers,
@@ -57,8 +54,9 @@ export default async function mainHelper(config, { host, createStorage, configur
         storage,
         showSidebarBranding
       });
-      report.className = "block";
-      document.body.append(report);
+      report.className = "flex"
+      report.style = "height: calc(100svh - 5rem);"
+      mainContent.append(report);
     }
   };
   loginComponent.on("isResolved", listener);
@@ -67,7 +65,6 @@ export default async function mainHelper(config, { host, createStorage, configur
     login.style.display = "none";
   }
 
-
   return loginComponent;
 }
 
@@ -89,4 +86,4 @@ function legacyPrimaryIssueTypeRoutingFix() {
     directlyReplaceUrlParam("selectedIssueType", primaryIssueType, "");
     console.warn("fixing url");
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -189,7 +189,7 @@ export class TimelineConfiguration extends StacheElement { @@
             </div>
         </div>
-            `;
+      `;
       static props = {
         // passed
@@ Expand Down @@