fix spelling from colour to color (#27599)

static/app/components/events/interfaces/spans/filter.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import CheckboxFancy from 'app/components/checkboxFancy/checkboxFancy';
 import DropdownButton from 'app/components/dropdownButton';
 import DropdownControl from 'app/components/dropdownControl';
-import {pickBarColour} from 'app/components/performance/waterfall/utils';
+import {pickBarColor} from 'app/components/performance/waterfall/utils';
 import {IconFilter} from 'app/icons';
 import {t, tn} from 'app/locale';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
@@ -130,7 +130,7 @@ class Filter extends React.Component<Props> {
 
                 return (
                   <ListItem key={operationName} isChecked={isActive}>
-                    <OperationDot backgroundColor={pickBarColour(operationName)} />
+                    <OperationDot backgroundColor={pickBarColor(operationName)} />
                     <OperationName>{operationName}</OperationName>
                     <OperationCount>{operationCount}</OperationCount>
                     <CheckboxFancy

static/app/components/events/interfaces/spans/header.tsx

@@ -10,7 +10,7 @@ import {
 } from 'app/components/performance/waterfall/miniHeader';
 import {
   getHumanDuration,
-  pickBarColour,
+  pickBarColor,
   rectOfContent,
   toPercent,
 } from 'app/components/performance/waterfall/utils';
@@ -583,7 +583,7 @@ class ActualMinimap extends React.PureComponent<{
     spanTree: JSX.Element;
     nextSpanNumber: number;
   } {
-    const spanBarColour: string = pickBarColour(getSpanOperation(span));
+    const spanBarColor: string = pickBarColor(getSpanOperation(span));
 
     const bounds = generateBounds({
       startTimestamp: span.start_timestamp,
@@ -637,7 +637,7 @@ class ActualMinimap extends React.PureComponent<{
         <React.Fragment>
           <MinimapSpanBar
             style={{
-              backgroundColor: spanBarColour,
+              backgroundColor: spanBarColor,
               left: spanLeft,
               width: spanWidth,
             }}

static/app/components/events/interfaces/spans/spanBar.tsx

@@ -101,7 +101,7 @@ type SpanBarProps = {
   organization: Organization;
   trace: Readonly<ParsedTraceType>;
   span: Readonly<ProcessedSpanType>;
-  spanBarColour?: string;
+  spanBarColor?: string;
   spanBarHatch?: boolean;
   generateBounds: (bounds: SpanBoundsType) => SpanGeneratedBoundsType;
   treeDepth: number;
@@ -783,7 +783,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
     errors: TraceError[] | null;
     transactions: QuickTraceEvent[] | null;
   }) {
-    const {span, spanBarColour, spanBarHatch, spanNumber} = this.props;
+    const {span, spanBarColor, spanBarHatch, spanNumber} = this.props;
     const startTimestamp: number = span.start_timestamp;
     const endTimestamp: number = span.timestamp;
     const duration = Math.abs(endTimestamp - startTimestamp);
@@ -828,7 +828,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
             <RowRectangle
               spanBarHatch={!!spanBarHatch}
               style={{
-                backgroundColor: spanBarColour,
+                backgroundColor: spanBarColor,
                 left: `min(${toPercent(bounds.left || 0)}, calc(100% - 1px))`,
                 width: toPercent(bounds.width || 0),
               }}

static/app/components/events/interfaces/spans/spanTree.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
 
 import {MessageRow} from 'app/components/performance/waterfall/messageRow';
-import {pickBarColour} from 'app/components/performance/waterfall/utils';
+import {pickBarColor} from 'app/components/performance/waterfall/utils';
 import {t, tct} from 'app/locale';
 import {Organization} from 'app/types';
 
@@ -186,7 +186,7 @@ class SpanTree extends React.Component<PropType> {
 
         const isLast = payload.isLastSibling;
         const isRoot = type === 'root_span';
-        const spanBarColour: string = pickBarColour(getSpanOperation(span));
+        const spanBarColor: string = pickBarColor(getSpanOperation(span));
         const spanNumber = index + 1;
         const numOfSpanChildren = payload.numOfSpanChildren;
         const treeDepth = payload.treeDepth;
@@ -199,7 +199,7 @@ class SpanTree extends React.Component<PropType> {
             key={key}
             organization={organization}
             event={waterfallModel.event}
-            spanBarColour={spanBarColour}
+            spanBarColor={spanBarColor}
             spanBarHatch={type === 'gap'}
             span={span}
             showSpanTree={!waterfallModel.hiddenSpanGroups.has(getSpanID(span))}

static/app/components/events/opsBreakdown.tsx

@@ -10,7 +10,7 @@ import {
   TraceContextType,
 } from 'app/components/events/interfaces/spans/types';
 import {getSpanOperation} from 'app/components/events/interfaces/spans/utils';
-import {pickBarColour} from 'app/components/performance/waterfall/utils';
+import {pickBarColor} from 'app/components/performance/waterfall/utils';
 import QuestionTooltip from 'app/components/questionTooltip';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
@@ -254,7 +254,7 @@ class OpsBreakdown extends Component<Props> {
 
       const durLabel = Math.round(totalInterval * 1000 * 100) / 100;
       const pctLabel = isFinite(percentage) ? Math.round(percentage * 100) : '∞';
-      const opsColor: string = pickBarColour(operationName);
+      const opsColor: string = pickBarColor(operationName);
 
       return (
         <OpsLine key={operationName}>

static/app/components/performance/waterfall/utils.tsx

@@ -216,7 +216,7 @@ export const barColors = {
   db: CHART_PALETTE[17][17],
 };
 
-export const pickBarColour = (input: string | undefined): string => {
+export const pickBarColor = (input: string | undefined): string => {
   // We pick the color for span bars using the first three letters of the op name.
   // That way colors stay consistent between transactions.
 

static/app/utils/discover/fieldRenderers.tsx

@@ -9,7 +9,7 @@ import Duration from 'app/components/duration';
 import ProjectBadge from 'app/components/idBadge/projectBadge';
 import UserBadge from 'app/components/idBadge/userBadge';
 import {RowRectangle} from 'app/components/performance/waterfall/rowBar';
-import {pickBarColour, toPercent} from 'app/components/performance/waterfall/utils';
+import {pickBarColor, toPercent} from 'app/components/performance/waterfall/utils';
 import Tooltip from 'app/components/tooltip';
 import UserMisery from 'app/components/userMisery';
 import Version from 'app/components/version';
@@ -610,7 +610,7 @@ const spanOperationRelativeBreakdownRenderer = (
               <RectangleRelativeOpsBreakdown
                 spanBarHatch={false}
                 style={{
-                  backgroundColor: pickBarColour(operationName),
+                  backgroundColor: pickBarColor(operationName),
                   cursor: 'pointer',
                 }}
                 onClick={event => {

static/app/views/performance/traceDetails/content.tsx

@@ -23,7 +23,7 @@ import {
   VirtualScrollbar,
   VirtualScrollbarGrip,
 } from 'app/components/performance/waterfall/miniHeader';
-import {pickBarColour, toPercent} from 'app/components/performance/waterfall/utils';
+import {pickBarColor, toPercent} from 'app/components/performance/waterfall/utils';
 import TimeSince from 'app/components/timeSince';
 import {IconInfo} from 'app/icons';
 import {t, tct, tn} from 'app/locale';
@@ -437,7 +437,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
             isVisible={isVisible}
             hasGuideAnchor={hasGuideAnchor}
             renderedChildren={accumulated.renderedChildren}
-            barColour={pickBarColour(transaction['transaction.op'])}
+            barColor={pickBarColor(transaction['transaction.op'])}
           />
         </React.Fragment>
       ),
@@ -567,7 +567,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
                         isVisible
                         hasGuideAnchor={false}
                         renderedChildren={transactionGroups}
-                        barColour={pickBarColour('')}
+                        barColor={pickBarColor('')}
                       />
                     </AnchorLinkManager.Provider>
                     {this.renderInfoMessage({

static/app/views/performance/traceDetails/transactionBar.tsx

@@ -58,7 +58,7 @@ type Props = {
   isVisible: boolean;
   hasGuideAnchor: boolean;
   toggleExpandedState: () => void;
-  barColour?: string;
+  barColor?: string;
 };
 
 type State = {
@@ -332,7 +332,7 @@ class TransactionBar extends React.Component<Props, State> {
   }
 
   renderRectangle() {
-    const {transaction, traceInfo, barColour} = this.props;
+    const {transaction, traceInfo, barColor} = this.props;
     const {showDetail} = this.state;
 
     // Use 1 as the difference in the event that startTimestamp === endTimestamp
@@ -348,7 +348,7 @@ class TransactionBar extends React.Component<Props, State> {
       <RowRectangle
         spanBarHatch={false}
         style={{
-          backgroundColor: barColour,
+          backgroundColor: barColor,
           left: `min(${toPercent(startPercentage || 0)}, calc(100% - 1px))`,
           width: toPercent(widthPercentage || 0),
         }}

static/app/views/performance/traceDetails/transactionGroup.tsx

@@ -23,7 +23,7 @@ type Props = ScrollbarManagerChildrenProps & {
   isVisible: boolean;
   hasGuideAnchor: boolean;
   renderedChildren: React.ReactNode[];
-  barColour?: string;
+  barColor?: string;
 };
 
 type State = {
@@ -58,7 +58,7 @@ class TransactionGroup extends React.Component<Props, State> {
       isVisible,
       hasGuideAnchor,
       renderedChildren,
-      barColour,
+      barColor,
     } = this.props;
     const {isExpanded} = this.state;
 
@@ -77,7 +77,7 @@ class TransactionGroup extends React.Component<Props, State> {
           toggleExpandedState={this.toggleExpandedState}
           isVisible={isVisible}
           hasGuideAnchor={hasGuideAnchor}
-          barColour={barColour}
+          barColor={barColor}
         />
         {isExpanded && renderedChildren}
       </React.Fragment>