git pushMerge branch 'main' of https://github.com/bitovi/jira-timelin…

…e-report into TR-245-Saved-reports-opening-into-configuration-sidebar-instead-of-full-screen

public/canjs/controls/select-view-settings/select-view-settings.js

@@ -102,7 +102,7 @@ class SelectViewSettingsDropdown extends StacheElement {
                     <label>Show only {{this.firstIssueTypeWithStatuses}} statuses:</label>
                 
                     <status-filter 
-                        statuses:from="this.statuses"
+                        statuses:from="this.routeData.allStatusesSorted"
                         param:raw="statusesToShow"
                         selectedStatuses:bind="this.routeData.statusesToShow"
                         inputPlaceholder:raw="Search for statuses"
@@ -112,7 +112,7 @@ class SelectViewSettingsDropdown extends StacheElement {
                     <label>Hide {{this.firstIssueTypeWithStatuses}} statuses:</label>
 
                     <status-filter 
-                        statuses:from="this.statuses" 
+                        statuses:from="this.routeData.allStatusesSorted" 
                         param:raw="statusesToRemove"
                         selectedStatuses:bind="this.routeData.statusesToRemove"
                         inputPlaceholder:raw="Search for statuses"
@@ -209,7 +209,7 @@ class SelectViewSettingsDropdown extends StacheElement {
             <div class="flex gap-2 mt-1">
                 <label>{{this.firstIssueTypeWithStatuses}} statuses to show as planning:</label>
                 <status-filter 
-                    statuses:from="this.statuses" 
+                    statuses:from="this.routeData.allStatusesSorted" 
                     param:raw="planningStatuses"
                     selectedStatuses:bind="this.routeData.planningStatuses"
                     inputPlaceholder:raw="Search for statuses"
@@ -281,9 +281,6 @@ export class SelectViewSettings extends StacheElement {
         let dropdown = new SelectViewSettingsDropdown().bindings({
             canGroup: value.from(this,"canGroup"),
             firstIssueTypeWithStatuses: value.from(this,"firstIssueTypeWithStatuses"),
-
-            // this could probably be calculated by itself
-            statuses: value.from(this,"statuses"),
             releases: value.from(this,"releases")
             // onSelection: this.onSelection.bind(this)
         })

public/canjs/reports/gantt-grid.js

@@ -88,7 +88,7 @@ export class GanttGrid extends StacheElement {
                   <div style="grid-row: {{ plus(3, rowIndex) }}; grid-column: 2"
                     class="flex z-10 items-stretch {{# if(this.alignLeft) }} justify-left {{ else }} justify-between{{/}}" on:mouseenter='this.hoverEnter(data.issue)' on:mouseleave='this.hoverLeave(data.issue)'>
                     <div on:click='this.toggleShowingChildren(data.issue)'
-                      class="pointer pt-1 pb-0.5 pl-{{multiply(data.issue.reportingHierarchy.depth,4)}} w-4 box-content">
+                      class="pointer {{this.expandPadding}} pl-{{multiply(data.issue.reportingHierarchy.depth,4)}} w-4 box-content">
 
                       {{# if(data.isShowingChildren) }}
                         <img src="/images/chevron-down-collapse.svg" class="{{^ this.showExpandChildrenIcon(data.issue) }} invisible {{/}} inline"/>
@@ -176,6 +176,9 @@ export class GanttGrid extends StacheElement {
   get shadowBarSize() {
     return this.lotsOfIssues ? "h-4" : "h-6";
   }
+  get expandPadding(){
+    return this.lotsOfIssues ? "": "pt-1 pb-0.5"
+  }
   get columnsToShow() {
     if (this.showPercentComplete) {
       return [
@@ -305,13 +308,16 @@ export class GanttGrid extends StacheElement {
     const totalTime = lastDay - firstDay;
     return ((new Date() - firstDay - 1000 * 60 * 60 * 24 * 2) / totalTime) * 100;
   }
+
   get gridRowData() {
     // we need to check here b/c primaryIssueType and groupBy can't be made atomic easily
     if (this.routeData.groupBy === "parent" && this.routeData.primaryIssueType !== "Release") {
       // get all the parents ...
 
-      let obj = Object.groupBy(this.primaryIssuesOrReleases, (issue) => issue.parentKey);
-      let keyToAllIssues = Object.groupBy(this.routeData.derivedIssues, (issue) => issue.key);
+      let obj = Object.groupBy(this.primaryIssuesOrReleases || [], (issue) => issue.parentKey);
+
+      // it's possible these are temporarily undefined or missing as route data changes
+      let keyToAllIssues = Object.groupBy(this.routeData.derivedIssues || [], (issue) => issue.key);
 
       let parentKeys = Object.keys(obj);
       let parents = parentKeys
@@ -360,9 +366,10 @@ export class GanttGrid extends StacheElement {
       return teams
         .map((team) => {
           return [
-            { type: "parent", issue: team },
+            { type: "parent", issue: team, isShowingChildren: false, rollupStatuses: {rollup: {status: null}} },
             ...issuesByTeam[team.name].map((issue) => {
-              return { type: "issue", issue };
+              const isShowingChildren = this.showChildrenByKey[issue.key];
+              return { type: "issue", issue, isShowingChildren: isShowingChildren };
             }),
           ];
         })

public/canjs/routing/route-data/route-data.js

@@ -4,6 +4,8 @@ import { DAY_IN_MS } from "../../../utils/date/date-helpers.js";
 import { daysBetween } from "../../../utils/date/days-between.js";
 import { isoToLocalDate } from "../../../utils/date/local.js";
 
+import { allStatusesSorted } from "../../../jira/normalized/normalize.ts";
+
 import {
   rawIssuesRequestData,
   configurationPromise,
@@ -269,6 +271,13 @@ export class RouteData extends ObservableObject {
         resolveValueFromPromise();
       },
     },
+    get allStatusesSorted(){
+      if (this.derivedIssues) {
+        return allStatusesSorted(this.derivedIssues);
+      } else {
+        return [];
+      }
+    },
     timingCalculations: {
       value({ resolve, lastSet, listenTo }) {
         let currentValue;

public/canjs/ui/autocomplete/autocomplete.js

@@ -3,9 +3,7 @@ import SimpleTooltip from "../simple-tooltip/simple-tooltip.js";
 
 // create global tooltip reference
 
-const TOOLTIP = new SimpleTooltip();
 
-document.body.append(TOOLTIP);
 
 class AutoCompleteSuggestions extends StacheElement {
     static view = `
@@ -58,7 +56,11 @@ class AutoComplete extends StacheElement {
         const matches = this.data.filter( item => {
             return item.toLowerCase().includes(searchTerm.toLowerCase()) && !this.selected.includes(item)
         })
-        this.showingSuggestions = true;
+        const TOOLTIP = new SimpleTooltip();
+
+        document.body.append(TOOLTIP);
+        TOOLTIP.showingSuggestions = true;
+        this.TOOLTIP = TOOLTIP;
         // this could be made more efficient, but is probably ok
         TOOLTIP.belowElementInScrollingContainer(this, 
             new AutoCompleteSuggestions().initialize({
@@ -72,23 +74,27 @@ class AutoComplete extends StacheElement {
         // handle when someone clicks off the element
         this.listenTo(window, "click", (event)=>{
             // if we aren't showing, don't worry about it
-            if(!this.showingSuggestions) {
+            if(!this?.TOOLTIP?.showingSuggestions) {
                 return;
             }
             // do nothing if the input was clicked on
             if(this.querySelector("input") === event.target) {
                 return
             }
             // do nothing if the TOOLTIP was clicked
-            if(TOOLTIP.contains(event.target)) {
+            if(this.TOOLTIP && this.TOOLTIP.contains(event.target)) {
                 return;
             }
             this.stopShowingSuggestions()
         })
     }
     stopShowingSuggestions(){
-        TOOLTIP.leftElement();
-        this.showingSuggestions = false;
+        this.TOOLTIP.leftElement();
+        this.TOOLTIP.showingSuggestions = false;
+    }
+    disconnected(){
+        // The tooltip's parent node can be moved around
+        this?.TOOLTIP?.parentNode && this.TOOLTIP.parentNode.removeChild(this.TOOLTIP);
     }
 }
 

public/canjs/ui/simple-tooltip/simple-tooltip.js

@@ -124,10 +124,15 @@ class SimpleTooltip extends HTMLElement {
     }
 
     let leftFromContainer = elementRect.left - containerRect.left;
+    // if the element would go past the page to the right
     if(elementRect.left  + tooltipRect.width > window.innerWidth) {
-      leftFromContainer = elementRect.right - containerRect.left - tooltipRect.width;
+      //leftFromContainer = elementRect.right - containerRect.left - tooltipRect.width;
+      this.style.right = (containerRect.right - elementRect.right) + "px";
+      this.style.left = "";
+    } else {
+      this.style.left = leftFromContainer +"px";
     }
-    this.style.left = leftFromContainer +"px";
+
   }
   rightOfElementInScrollingContainer(element, DOM) {
     // find if there's a scrolling container and move ourselves to that 

public/react/SettingsSidebar/components/IssueSource/components/LoadChildren/LoadChildren.test.tsx

@@ -16,9 +16,6 @@ describe("<LoadChildren />", () => {
       />
     );
 
-    const accordionTitle = screen.getByText(/load children/i);
-    expect(accordionTitle).toBeInTheDocument();
-
     const loadChildrenCheckbox = screen.getByLabelText(
       /load all children of jql specified issues/i
     );

public/react/SettingsSidebar/components/IssueSource/components/LoadChildren/LoadChildren.tsx

@@ -26,12 +26,6 @@ const LoadChildren: FC<LoadChildrenProps> = ({
 
   return (
     <div>
-      <Hr />
-      <Accordion startsOpen>
-        <AccordionTitle>
-          <p className="font-semibold">Load children</p>
-        </AccordionTitle>
-        <AccordionContent>
           <div className="flex flex-col gap-3 py-4">
             <div className="flex gap-1 items-center">
               <Checkbox
@@ -56,8 +50,6 @@ const LoadChildren: FC<LoadChildrenProps> = ({
               </div>
             )}
           </div>
-        </AccordionContent>
-      </Accordion>
       <Hr />
     </div>
   );

public/timeline-report.js

@@ -53,9 +53,7 @@ export class TimelineReport extends StacheElement {
 
         <select-view-settings
           jiraHelpers:from="this.jiraHelpers"
-          
           releasesToShow:to="this.releasesToShow"
-          statuses:from="this.statuses"
           derivedIssues:from="this.routeData.derivedIssues"
           ></select-view-settings>
       </div>