[FIX] *: use Color alias wherever we work with color strings

closes #2309 Signed-off-by: Lucas Lefèvre (lul) <[email protected]> Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Apr 4, 2023 · c17bb3e · c17bb3e
1 parent 084a0f5
commit c17bb3e
Show file tree

Hide file tree

Showing 22 changed files with 63 additions and 49 deletions.
diff --git a/src/components/collaborative_client_tag/collaborative_client_tag.ts b/src/components/collaborative_client_tag/collaborative_client_tag.ts
@@ -1,12 +1,12 @@
 import { Component } from "@odoo/owl";
 import { DEFAULT_FONT_SIZE } from "../../constants";
-import { HeaderIndex, SpreadsheetChildEnv } from "../../types";
+import { Color, HeaderIndex, SpreadsheetChildEnv } from "../../types";
 import { css, cssPropertiesToCss } from "../helpers/css";
 
 interface ClientTagProps {
   active: boolean;
   name: string;
-  color: string;
+  color: Color;
   col: HeaderIndex;
   row: HeaderIndex;
 }

diff --git a/src/components/composer/composer/composer.ts b/src/components/composer/composer/composer.ts
@@ -10,7 +10,9 @@ import {
   splitReference,
 } from "../../../helpers/index";
 import { ComposerSelection } from "../../../plugins/ui_stateful/edition";
+
 import {
+  Color,
   CSSProperties,
   DOMDimension,
   FunctionDescription,
@@ -35,7 +37,7 @@ const selectionIndicator = "␣";
 
 export type HtmlContent = {
   value: string;
-  color?: string;
+  color?: Color;
   class?: string;
 };
 
@@ -590,7 +592,7 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
     return !(content.value || content.class);
   }
 
-  private rangeColor(xc: string, sheetName?: string): string | undefined {
+  private rangeColor(xc: string, sheetName?: string): Color | undefined {
     if (this.props.focus === "inactive") {
       return undefined;
     }

diff --git a/src/components/highlight/corner/corner.ts b/src/components/highlight/corner/corner.ts
@@ -1,6 +1,6 @@
 import { Component } from "@odoo/owl";
 import { AUTOFILL_EDGE_LENGTH } from "../../../constants";
-import { SpreadsheetChildEnv, Zone } from "../../../types";
+import { Color, SpreadsheetChildEnv, Zone } from "../../../types";
 import { css, cssPropertiesToCss } from "../../helpers/css";
 
 css/* scss */ `
@@ -31,7 +31,7 @@ type Orientation = "nw" | "ne" | "sw" | "se";
 
 interface Props {
   zone: Zone;
-  color: string;
+  color: Color;
   orientation: Orientation;
   isResizing: boolean;
   onResizeHighlight: (isLeft: boolean, isRight: boolean) => void;

diff --git a/src/components/highlight/highlight/highlight.ts b/src/components/highlight/highlight/highlight.ts
@@ -1,7 +1,7 @@
 import { Component, useState } from "@odoo/owl";
 import { ComponentsImportance } from "../../../constants";
 import { clip, isEqual } from "../../../helpers";
-import { Pixel, SpreadsheetChildEnv, Zone } from "../../../types";
+import { Color, Pixel, SpreadsheetChildEnv, Zone } from "../../../types";
 import { css } from "../../helpers/css";
 import { gridOverlayPosition } from "../../helpers/dom_helpers";
 import { dragAndDropBeyondTheViewport } from "../../helpers/drag_and_drop";
@@ -16,7 +16,7 @@ css/*SCSS*/ `
 
 interface Props {
   zone: Zone;
-  color: string;
+  color: Color;
 }
 
 interface HighlightState {

diff --git a/src/components/selection_input/selection_input.ts b/src/components/selection_input/selection_input.ts
@@ -10,7 +10,7 @@ import {
 import { SELECTION_BORDER_COLOR } from "../../constants";
 import { UuidGenerator } from "../../helpers/index";
 import { RangeInputValue } from "../../plugins/ui_feature/selection_input";
-import { SpreadsheetChildEnv } from "../../types";
+import { Color, SpreadsheetChildEnv } from "../../types";
 import { css } from "../helpers/css";
 import { updateSelectionWithArrowKeys } from "../helpers/selection_helpers";
 
@@ -82,7 +82,7 @@ interface State {
 interface SelectionRange extends Omit<RangeInputValue, "color"> {
   isFocused: boolean;
   isValidRange: boolean;
-  color?: string;
+  color?: Color;
 }
 /**
  * This component can be used when the user needs to input some

diff --git a/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.ts b/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.ts
@@ -1,7 +1,13 @@
 import { Component, useExternalListener, useState } from "@odoo/owl";
 import { deepCopy } from "../../../../helpers/index";
 import { GaugeChartDefinition, SectionRule } from "../../../../types/chart/gauge_chart";
-import { CommandResult, DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import {
+  Color,
+  CommandResult,
+  DispatchResult,
+  SpreadsheetChildEnv,
+  UID,
+} from "../../../../types/index";
 import { css } from "../../../helpers/css";
 import { ChartTerms } from "../../../translations_terms";
 import { ColorPickerWidget } from "./../../../color_picker/color_picker_widget";
@@ -75,7 +81,7 @@ export class GaugeChartDesignPanel extends Component<Props, SpreadsheetChildEnv>
     );
   }
 
-  updateBackgroundColor(color: string) {
+  updateBackgroundColor(color: Color) {
     this.state.openedMenu = undefined;
     this.props.updateChart({
       background: color,
@@ -146,7 +152,7 @@ export class GaugeChartDesignPanel extends Component<Props, SpreadsheetChildEnv>
     this.updateSectionRule(sectionRule);
   }
 
-  updateSectionColor(target: string, color: string) {
+  updateSectionColor(target: string, color: Color) {
     const sectionRule = deepCopy(this.props.definition.sectionRule);
     sectionRule.colors[target] = color;
     this.updateSectionRule(sectionRule);

diff --git a/src/components/side_panel/chart/line_bar_pie_panel/design_panel.ts b/src/components/side_panel/chart/line_bar_pie_panel/design_panel.ts
@@ -2,7 +2,7 @@ import { Component, useExternalListener, useState } from "@odoo/owl";
 import { BarChartDefinition } from "../../../../types/chart/bar_chart";
 import { LineChartDefinition } from "../../../../types/chart/line_chart";
 import { PieChartDefinition } from "../../../../types/chart/pie_chart";
-import { CommandResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import { Color, CommandResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
 import { ColorPickerWidget } from "../../../color_picker/color_picker_widget";
 
 interface Props {
@@ -37,7 +37,7 @@ export class LineBarPieDesignPanel extends Component<Props, SpreadsheetChildEnv>
     this.state.fillColorTool = !this.state.fillColorTool;
   }
 
-  updateBackgroundColor(color: string) {
+  updateBackgroundColor(color: Color) {
     this.props.updateChart({
       background: color,
     });

diff --git a/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.ts b/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.ts
@@ -1,6 +1,6 @@
 import { Component, useExternalListener, useState } from "@odoo/owl";
 import { ScorecardChartDefinition } from "../../../../types/chart/scorecard_chart";
-import { DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import { Color, DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
 import { ColorPickerWidget } from "../../../color_picker/color_picker_widget";
 
 type ColorPickerId = undefined | "backgroundColor" | "baselineColorUp" | "baselineColorDown";
@@ -45,7 +45,7 @@ export class ScorecardChartDesignPanel extends Component<Props, SpreadsheetChild
     }
   }
 
-  setColor(color: string, colorPickerId: ColorPickerId) {
+  setColor(color: Color, colorPickerId: ColorPickerId) {
     switch (colorPickerId) {
       case "backgroundColor":
         this.props.updateChart({ background: color });

diff --git a/src/components/side_panel/conditional_formatting/conditional_formatting.ts b/src/components/side_panel/conditional_formatting/conditional_formatting.ts
@@ -5,6 +5,7 @@ import { _t } from "../../../translation";
 import {
   CancelledReason,
   CellIsRule,
+  Color,
   ColorScaleRule,
   ColorScaleThreshold,
   CommandResult,
@@ -634,7 +635,7 @@ export class ConditionalFormattingPanel extends Component<Props, SpreadsheetChil
     this.closeMenus();
   }
 
-  setColor(target: string, color: string) {
+  setColor(target: string, color: Color) {
     this.state.rules.cellIs.style[target] = color;
     this.closeMenus();
   }
@@ -669,7 +670,7 @@ export class ConditionalFormattingPanel extends Component<Props, SpreadsheetChil
     }
   }
 
-  setColorScaleColor(target: string, color: string) {
+  setColorScaleColor(target: string, color: Color) {
     const point = this.state.rules.colorScale[target];
     if (point) {
       point.color = Number.parseInt(color.substr(1), 16);

diff --git a/src/components/top_bar/top_bar.ts b/src/components/top_bar/top_bar.ts
@@ -21,6 +21,7 @@ import { MenuItem } from "../../registries/menu_items_registry";
 import {
   Align,
   BorderCommand,
+  Color,
   Format,
   Pixel,
   SetDecimalStep,
@@ -322,8 +323,8 @@ export class TopBar extends Component<Props, SpreadsheetChildEnv> {
   undoTool = false;
   redoTool = false;
   paintFormatTool = false;
-  fillColor: string = "#ffffff";
-  textColor: string = "#000000";
+  fillColor: Color = "#ffffff";
+  textColor: Color = "#000000";
   menus: MenuItem[] = [];
 
   setup() {
@@ -471,7 +472,7 @@ export class TopBar extends Component<Props, SpreadsheetChildEnv> {
     }
   }
 
-  setColor(target: string, color: string) {
+  setColor(target: string, color: Color) {
     setStyle(this.env, { [target]: color });
     this.onClick();
   }

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,5 +1,5 @@
 import { _lt } from "./translation";
-import { BorderDescr } from "./types";
+import { BorderDescr, Color } from "./types";
 import { CellErrorType } from "./types/errors";
 
 export const CANVAS_SHIFT = 0.5;
@@ -24,7 +24,7 @@ export const BACKGROUND_HEADER_SELECTED_FILTER_COLOR = "#CEEAD6";
 export const SEPARATOR_COLOR = "#E0E2E4";
 
 // Color picker defaults as upper case HEX to match `toHex`helper
-export const COLOR_PICKER_DEFAULTS = [
+export const COLOR_PICKER_DEFAULTS: Color[] = [
   "#000000",
   "#434343",
   "#666666",

diff --git a/src/helpers/figures/charts/gauge_chart.ts b/src/helpers/figures/charts/gauge_chart.ts
@@ -328,7 +328,7 @@ export function createGaugeChartRuntime(chart: GaugeChart, getters: Getters): Ga
   }
 
   const data: number[] = [];
-  const backgroundColor: string[] = [];
+  const backgroundColor: Color[] = [];
   needleInflectionPoint
     .sort((a, b) => a.value - b.value)
     .map((point) => {

diff --git a/src/helpers/figures/charts/pie_chart.ts b/src/helpers/figures/charts/pie_chart.ts
@@ -218,8 +218,8 @@ function getPieConfiguration(
   return config;
 }
 
-function getPieColors(colors: ChartColors, dataSetsValues: DatasetValues[]): string[] {
-  const pieColors: string[] = [];
+function getPieColors(colors: ChartColors, dataSetsValues: DatasetValues[]): Color[] {
+  const pieColors: Color[] = [];
   const maxLength = Math.max(...dataSetsValues.map((ds) => ds.data.length));
   for (let i = 0; i <= maxLength; i++) {
     pieColors.push(colors.next());

diff --git a/src/plugins/ui_feature/find_and_replace.ts b/src/plugins/ui_feature/find_and_replace.ts
@@ -1,6 +1,7 @@
 import { escapeRegExp } from "../../helpers";
 import {
   CellPosition,
+  Color,
   Command,
   GridRenderingContext,
   HeaderIndex,
@@ -9,8 +10,8 @@ import {
 } from "../../types/index";
 import { UIPlugin } from "../ui_plugin";
 
-const BORDER_COLOR: string = "#8B008B";
-const BACKGROUND_COLOR: string = "#8B008B33";
+const BORDER_COLOR: Color = "#8B008B";
+const BACKGROUND_COLOR: Color = "#8B008B33";
 
 export interface SearchOptions {
   matchCase: boolean;

diff --git a/src/plugins/ui_feature/selection_input.ts b/src/plugins/ui_feature/selection_input.ts
@@ -7,13 +7,13 @@ import {
 } from "../../helpers/index";
 import { StreamCallbacks } from "../../selection_stream/event_stream";
 import { SelectionEvent } from "../../types/event_stream";
-import { Command, CommandResult, Highlight, LAYERS, UID } from "../../types/index";
+import { Color, Command, CommandResult, Highlight, LAYERS, UID } from "../../types/index";
 import { UIPlugin, UIPluginConfig } from "../ui_plugin";
 
 export interface RangeInputValue {
   id: number;
   xc: string;
-  color: string;
+  color: Color;
 }
 
 /**

diff --git a/src/plugins/ui_feature/selection_multiuser.ts b/src/plugins/ui_feature/selection_multiuser.ts
@@ -1,6 +1,6 @@
 import { ClientDisconnectedError } from "../../collaborative/session";
 import { DEFAULT_FONT, DEFAULT_FONT_SIZE } from "../../constants";
-import { Client, ClientPosition, GridRenderingContext, LAYERS, UID } from "../../types";
+import { Client, ClientPosition, Color, GridRenderingContext, LAYERS, UID } from "../../types";
 import { UIPlugin } from "../ui_plugin";
 
 function randomChoice(arr: string[]): string {
@@ -23,14 +23,14 @@ const colors = [
 ];
 
 interface ClientToDisplay extends Required<Client> {
-  color: string;
+  color: Color;
 }
 
 export class SelectionMultiUserPlugin extends UIPlugin {
   static getters = ["getClientsToDisplay"] as const;
   static layers = [LAYERS.Selection];
   private availableColors = new Set(colors);
-  private colors: Record<UID, string> = {};
+  private colors: Record<UID, Color> = {};
 
   private isPositionValid(position: ClientPosition): boolean {
     return (
@@ -39,7 +39,7 @@ export class SelectionMultiUserPlugin extends UIPlugin {
     );
   }
 
-  private chooseNewColor(): string {
+  private chooseNewColor(): Color {
     if (this.availableColors.size === 0) {
       this.availableColors = new Set(colors);
     }

diff --git a/src/registries/menu_items_registry.ts b/src/registries/menu_items_registry.ts
@@ -1,4 +1,5 @@
 import { UuidGenerator } from "../helpers";
+import { Color } from "../types";
 import { SpreadsheetChildEnv } from "../types/env";
 import { Registry } from "./registry";
 
@@ -37,7 +38,7 @@ export interface MenuItemSpec {
   children?: MenuChildren;
   separator?: boolean;
   icon?: string;
-  textColor?: string;
+  textColor?: Color;
 }
 
 export interface MenuItem {

diff --git a/src/types/chart/gauge_chart.ts b/src/types/chart/gauge_chart.ts
@@ -18,9 +18,9 @@ export interface SectionRule {
 }
 
 interface ColorSet {
-  readonly lowerColor: string;
-  readonly middleColor: string;
-  readonly upperColor: string;
+  readonly lowerColor: Color;
+  readonly middleColor: Color;
+  readonly upperColor: Color;
 }
 
 interface SectionThreshold {
@@ -53,13 +53,13 @@ export interface GaugeChartOptions extends ChartOptions {
     radiusPercentage: number; // Needle circle radius as the percentage of the chart area width
     widthPercentage: number; // Needle width as the percentage of the chart area width
     lengthPercentage: number; // Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
-    color: string; // The color of the needle
+    color: Color; // The color of the needle
   };
   valueLabel?: {
     formatter: (() => string) | null;
     display: boolean;
-    color: string;
-    backgroundColor: string;
+    color: Color;
+    backgroundColor: Color;
     borderRadius: number;
     fontSize: number;
     padding: {

diff --git a/src/types/commands.ts b/src/types/commands.ts
@@ -10,6 +10,7 @@ import { BorderCommand, ConditionalFormat, Figure, Format, Style, Zone } from ".
 import {
   Border,
   CellPosition,
+  Color,
   Dimension,
   HeaderIndex,
   Pixel,
@@ -569,7 +570,7 @@ export interface StopSelectionCommand {
  */
 export interface SetColorCommand {
   type: "SET_HIGHLIGHT_COLOR";
-  color: string;
+  color: Color;
 }
 
 export interface EvaluateCellsCommand {