Fix peer dependencies (#7900)

This addresses all peer dependency warnings we get from yarn except for the `dagre-d3-react` ones, which would require a new release of that library to fix. In doing so, it: - Upgrades our typescript version - Switches to using `useResizeDetector` from the deprecated `withResizeDetector` - Switches to using `Range` instead of the removed `RangeWithKey` and `RangeKeyDict` instead of the removed `OnChangeProps` - Removes code for handling the `days` field of a `Range`, as that field no longer exists - Removes the `undefined` second positional parameter from `handleDefaultConfigClicked`, as that function no longer accepts a second positional parameter - Removes fallback values when using unary `+` to convert a `Long` to a `number`, as that now always returns a `number` - Changes our target in `tsconfig.json` from `es2016` to `es2018` to support the use of named capturing groups in `trace_events.ts` - Removes the `resolutions` block from our `package.json`, as it is no longer necessary --------- Co-authored-by: Jim Hollenbach <[email protected]>
buildbuddy-io · Dec 2, 2024 · 70ef6f7 · 70ef6f7
1 parent 581a356
commit 70ef6f7
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 135 deletions.
diff --git a/enterprise/app/auditlogs/auditlogs.tsx b/enterprise/app/auditlogs/auditlogs.tsx
@@ -7,7 +7,7 @@ import { formatDate, formatDateRange } from "../../../app/format/format";
 import Button, { OutlinedButton } from "../../../app/components/button/button";
 import { Calendar } from "lucide-react";
 import Popup from "../../../app/components/popup/popup";
-import { DateRangePicker, OnChangeProps, RangeWithKey } from "react-date-range";
+import { DateRangePicker, Range, RangeKeyDict } from "react-date-range";
 import error_service from "../../../app/errors/error_service";
 import Spinner from "../../../app/components/spinner/spinner";
 import { User } from "../../../app/auth/user";
@@ -21,7 +21,7 @@ interface State {
   entries: auditlog.Entry[];
   nextPageToken: string;
   isDatePickerOpen: boolean;
-  dateRange: RangeWithKey;
+  dateRange: Range;
 }
 
 export default class AuditLogsComponent extends React.Component<AuditLogsComponentProps, State> {
@@ -41,12 +41,12 @@ export default class AuditLogsComponent extends React.Component<AuditLogsCompone
     document.title = "Audit logs | BuildBuddy";
     const today = new Date();
     today.setHours(0, 0, 0, 0);
-    const dateRange: RangeWithKey = { startDate: today, endDate: today, key: "selection" };
+    const dateRange: Range = { startDate: today, endDate: today, key: "selection" };
     this.setState({ dateRange: dateRange });
     this.fetchAuditLogs(dateRange);
   }
 
-  async fetchAuditLogs(dateRange: RangeWithKey) {
+  async fetchAuditLogs(dateRange: Range) {
     // Default start time to the midnight today, local time.
     const start = dateRange.startDate ?? moment().startOf("day").toDate();
     // Default end time to the end of today, local time (regardless of start date).
@@ -209,8 +209,8 @@ export default class AuditLogsComponent extends React.Component<AuditLogsCompone
     this.setState({ isDatePickerOpen: false });
   }
 
-  private onDateChange(range: OnChangeProps) {
-    let dateRange = (range as { selection: RangeWithKey }).selection;
+  private onDateChange(range: RangeKeyDict) {
+    let dateRange = range.selection;
     this.setState({ dateRange: dateRange, nextPageToken: "" });
     this.fetchAuditLogs(dateRange);
   }

diff --git a/enterprise/app/code/code_build_button.tsx b/enterprise/app/code/code_build_button.tsx
@@ -82,7 +82,7 @@ export default class CodeBuildButton extends React.Component<CodeBuildButtonProp
                 {this.getConfig()}
               </MenuItem>
             ))}
-            <MenuItem onClick={this.handleDefaultConfigClicked.bind(this, undefined)}>Set default config...</MenuItem>
+            <MenuItem onClick={this.handleDefaultConfigClicked.bind(this)}>Set default config...</MenuItem>
             <MenuItem onClick={this.handleCustomClicked.bind(this, this.props.commands[0])}>Edit...</MenuItem>
             <MenuItem onClick={this.handleCustomClicked.bind(this, "")}>New...</MenuItem>
           </Menu>

diff --git a/enterprise/app/filter/date_picker_button.tsx b/enterprise/app/filter/date_picker_button.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { OutlinedButton } from "../../../app/components/button/button";
-import { DateRangePicker, OnChangeProps, Range } from "react-date-range";
+import { DateRangePicker, DateRange, Range, RangeKeyDict } from "react-date-range";
 import router from "../../../app/router/router";
 import { END_DATE_PARAM_NAME, LAST_N_DAYS_PARAM_NAME, START_DATE_PARAM_NAME } from "../../../app/router/router_params";
 import moment from "moment";
@@ -54,8 +54,8 @@ export default class DatePickerButton extends React.Component<Props, State> {
     this.setState({ isOpen: false });
   }
 
-  private onDateChange(range: OnChangeProps) {
-    const selection = (range as { selection: CustomDateRange }).selection;
+  private onDateChange(range: RangeKeyDict) {
+    const selection = range.selection as CustomDateRange;
     if (selection.days) {
       router.setQuery({
         ...Object.fromEntries(this.props.search.entries()),

diff --git a/enterprise/app/tap/flakes.tsx b/enterprise/app/tap/flakes.tsx
@@ -265,11 +265,11 @@ export default class FlakesComponent extends React.Component<Props, State> {
     if (!stats) {
       return "0%";
     }
-    const totalFlakes = (+stats.flakyRuns ?? 0) + (+stats.likelyFlakyRuns ?? 0);
+    const totalFlakes = +stats.flakyRuns + +stats.likelyFlakyRuns;
     if (totalFlakes === 0) {
       return "0%";
     }
-    const percent = format.percent(totalFlakes / (+stats.totalRuns ?? 1));
+    const percent = format.percent(totalFlakes / +stats.totalRuns);
 
     return percent === "0" ? "<1%" : percent + "%";
   }

diff --git a/enterprise/app/trends/drilldown_page.tsx b/enterprise/app/trends/drilldown_page.tsx
@@ -18,7 +18,7 @@ import { stats } from "../../../proto/stats_ts_proto";
 import { google as google_timestamp } from "../../../proto/timestamp_ts_proto";
 import { usecToTimestamp } from "../../../app/util/proto";
 import { getProtoFilterParams, isExecutionMetric } from "../filter/filter_util";
-import { HeatmapComponent, HeatmapSelection } from "./heatmap";
+import HeatmapComponent, { HeatmapSelection } from "./heatmap";
 import { BarChart, Bar, XAxis, Tooltip, CartesianGrid, TooltipProps } from "recharts";
 import { User } from "../../../app/auth/user";
 import Select, { Option } from "../../../app/components/select/select";

diff --git a/enterprise/app/trends/heatmap.tsx b/enterprise/app/trends/heatmap.tsx
@@ -4,13 +4,12 @@ import Long from "long";
 import { clamp } from "../../../app/util/math";
 import { stats } from "../../../proto/stats_ts_proto";
 import { ScaleBand, scaleBand } from "d3-scale";
-import { withResizeDetector } from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
 import { pinBottomLeftOffsetFromMouse, MouseCoords, Tooltip } from "../../../app/components/tooltip/tooltip";
 
 interface HeatmapProps {
   heatmapData: stats.GetStatHeatmapResponse;
-  width: number; // Use getWidth()! react-resize-detector lets this be NaN.
-  height: number; // Use getHeight()! react-resize-detector lets this be NaN.
+
   valueFormatter: (value: number) => string;
   metricBucketName: string;
   metricBucketFormatter: (value: number) => string;
@@ -19,6 +18,11 @@ interface HeatmapProps {
   selectedData?: HeatmapSelection;
 }
 
+interface ResizableHeatmapProps extends HeatmapProps {
+  width: number;
+  height: number;
+}
+
 interface State {
   // This pair indicates the cells in the heatmap that the user selected.  The
   // first entry is the cell that the user clicked on first when making the
@@ -112,7 +116,7 @@ type SelectionData = {
   selectionYEnd: number;
 };
 
-class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
+class HeatmapComponentInternal extends React.Component<ResizableHeatmapProps, State> {
   state: State = {};
   svgRef: React.RefObject<SVGSVGElement> = React.createRef();
   chartGroupRef: React.RefObject<SVGGElement> = React.createRef();
@@ -129,14 +133,6 @@ class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
     return this.props.metricBucketFormatter(v);
   }
 
-  private getHeight(): number {
-    return 275;
-  }
-
-  private getWidth(): number {
-    return Math.max(this.props.width || 0, 400);
-  }
-
   private numHeatmapRows(): number {
     return Math.max(this.props.heatmapData.bucketBracket.length - 1, 1);
   }
@@ -440,7 +436,7 @@ class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
     let lastLabelDistance = labelSpacing;
 
     return (
-      <g color="#666" transform={`translate(${CHART_MARGINS.left}, ${this.getHeight() - CHART_MARGINS.bottom})`}>
+      <g color="#666" transform={`translate(${CHART_MARGINS.left}, ${this.props.height - CHART_MARGINS.bottom})`}>
         <line stroke="#666" x1="0" y1="0" x2={width} y2="0"></line>
         {this.xScaleBand.domain().map((v, i) => {
           lastLabelDistance++;
@@ -475,7 +471,7 @@ class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
     return (
       <g
         color="#666"
-        transform={`translate(${CHART_MARGINS.left}, ${this.getHeight() - CHART_MARGINS.bottom - height})`}>
+        transform={`translate(${CHART_MARGINS.left}, ${this.props.height - CHART_MARGINS.bottom - height})`}>
         <line stroke="#666" x1="0" y1="0" x2="0" y2={height}></line>
         {this.yScaleBand.domain().map((v, i) => {
           return (
@@ -505,7 +501,7 @@ class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
     let zoomLeftEdge = selectionRightEdge + ZOOM_BUTTON_ATTRIBUTES.sideMargin;
     let zoomTopEdge = positioningData.y;
 
-    if (selectionRightEdge + ZOOM_BUTTON_ATTRIBUTES.width + 2 * ZOOM_BUTTON_ATTRIBUTES.sideMargin > this.getWidth()) {
+    if (selectionRightEdge + ZOOM_BUTTON_ATTRIBUTES.width + 2 * ZOOM_BUTTON_ATTRIBUTES.sideMargin > this.props.width) {
       zoomLeftEdge = positioningData.x - ZOOM_BUTTON_ATTRIBUTES.width - ZOOM_BUTTON_ATTRIBUTES.sideMargin;
     }
 
@@ -524,8 +520,8 @@ class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
   }
 
   render() {
-    const width = this.getWidth() - CHART_MARGINS.left - CHART_MARGINS.right;
-    const height = this.getHeight() - CHART_MARGINS.top - CHART_MARGINS.bottom;
+    const width = this.props.width - CHART_MARGINS.left - CHART_MARGINS.right;
+    const height = this.props.height - CHART_MARGINS.top - CHART_MARGINS.bottom;
 
     const xDomain = this.props.heatmapData.timestampBracket.slice(0, -1).map((v) => +v);
     const yDomain = this.props.heatmapData.bucketBracket
@@ -558,8 +554,8 @@ class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
             <svg
               className="heatmap-svg"
               onMouseDown={(e) => this.onMouseDown(e)}
-              width={this.getWidth()}
-              height={this.getHeight()}
+              width={this.props.width}
+              height={this.props.height}
               ref={this.svgRef}>
               <g transform={`translate(${CHART_MARGINS.left}, ${CHART_MARGINS.top})`} ref={this.chartGroupRef}>
                 <rect fill="#f3f3f3" x="0" y="0" width={width} height={height}></rect>
@@ -600,10 +596,18 @@ class HeatmapComponentInternal extends React.Component<HeatmapProps, State> {
   }
 }
 
-export const HeatmapComponent = withResizeDetector<HeatmapProps, HTMLElement>(HeatmapComponentInternal, {
-  handleHeight: false,
-  refreshMode: "throttle",
-  refreshRate: 500,
-});
+export const HeatmapComponent = (p: HeatmapProps) => {
+  const { width, ref } = useResizeDetector({
+    handleHeight: false,
+    refreshMode: "throttle",
+    refreshRate: 500,
+  });
+
+  return (
+    <div ref={ref}>
+      <HeatmapComponentInternal width={Math.max(width || 0, 400)} height={275} {...p}></HeatmapComponentInternal>
+    </div>
+  );
+};
 
 export default HeatmapComponent;
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@types/react-date-range": "^1.1.6",
     "@types/react-dom": "^16.8.4",
     "@types/react-modal": "^3.10.6",
-    "@types/react-slider": "^1.3.1",
+    "@types/react-slider": "^1.3.6",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/uuid": "^8.3.0",
@@ -33,7 +33,7 @@
     "d3-scale": "^4.0.2",
     "d3-time": "^3.0.0",
     "dagre-d3-react": "^0.2.4",
-    "date-fns": "^2.23.0",
+    "date-fns": "^4.1.0",
     "diff": "^5.0.0",
     "diff-match-patch": "^1.0.5",
     "jasmine": "^4.1.0",
@@ -47,23 +47,20 @@
     "path-browserify": "^1.0.1",
     "prettier": "3.3.3",
     "protobufjs": "^7.2.5",
-    "react": "^16.8.6",
-    "react-date-range": "^1.3.0",
-    "react-dom": "^16.8.6",
-    "react-modal": "^3.11.2",
-    "react-resize-detector": "^6.6.3",
-    "react-slider": "^2.0.4",
-    "react-virtualized-auto-sizer": "^1.0.6",
+    "react": "^18.3.1",
+    "react-date-range": "^2.0.1",
+    "react-dom": "^18.3.1",
+    "react-modal": "^3.16.1",
+    "react-resize-detector": "^11.0.1",
+    "react-slider": "^2.0.6",
+    "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.7",
     "recharts": "^2.1.16",
     "rxjs": "^6.6.3",
     "shlex": "^2.1.2",
     "tslib": "^2.1.0",
-    "typescript": "^4.6.3",
+    "typescript": "^5.6.3",
     "uuid": "^8.3.0",
     "varint": "^6.0.0"
-  },
-  "resolutions": {
-    "@types/react": "^16.8.17"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,8 +11,8 @@
     "downlevelIteration": true,
     "skipLibCheck": true,
     "composite": true,
-    "target": "ES2016",
-    "lib": ["es2017", "es2019", "es2021", "dom", "dom.iterable"],
+    "target": "ES2018",
+    "lib": ["es2018", "es2019", "es2021", "dom", "dom.iterable"],
     "strict": true,
     "rootDirs": [
       ".",