feat(react-components): Add filter command and make mocks for the set…

…tings commands. (#4688)

* Initial commit

* Update according to review

react-components/src/architecture/base/commands/BaseCommand.ts

@@ -103,6 +103,8 @@ export abstract class BaseCommand {
     return false;
   }
 
+  protected *getChildren(): Generator<BaseCommand> {}
+
   /*
    * Called when the command is invoked
    * Return true if successful, false otherwise
@@ -144,6 +146,9 @@ export abstract class BaseCommand {
     for (const listener of this._listeners) {
       listener(this);
     }
+    for (const child of this.getChildren()) {
+      child.update();
+    }
   }
 
   // ==================================================

react-components/src/architecture/base/commands/BaseFilterCommand.ts

@@ -0,0 +1,126 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { RenderTargetCommand } from './RenderTargetCommand';
+import { type TranslateDelegate } from '../utilities/TranslateKey';
+import { type Color } from 'three';
+import { type BaseCommand } from './BaseCommand';
+
+export abstract class BaseFilterCommand extends RenderTargetCommand {
+  // ==================================================
+  // INSTANCE FIELDS/PROPERTIES
+  // ==================================================
+
+  protected _children: BaseFilterItemCommand[] | undefined = undefined;
+
+  public get children(): BaseFilterItemCommand[] | undefined {
+    return this._children;
+  }
+
+  public get hasChildren(): boolean {
+    return this._children !== undefined && this._children.length > 0;
+  }
+
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get icon(): string {
+    return 'Filter';
+  }
+
+  protected override *getChildren(): Generator<BaseCommand> {
+    if (this._children === undefined) {
+      return;
+    }
+    for (const child of this._children) {
+      yield child;
+    }
+  }
+
+  // ==================================================
+  // VIRTUAL METHODS (To be overridden)
+  // ==================================================
+
+  public initializeChildrenIfNeeded(): void {
+    if (this._children !== undefined) {
+      return;
+    }
+    this._children = this.createChildren();
+    this.attachChildren();
+  }
+
+  protected abstract createChildren(): BaseFilterItemCommand[];
+
+  /**
+   * Checks if all the children of the current instance are checked.
+   * Override this method to optimize the logic.
+   * @returns A boolean value indicating whether all the children are checked.
+   */
+  public get isAllChecked(): boolean {
+    if (this._children === undefined || this._children.length === 0) {
+      return false;
+    }
+    for (const child of this._children) {
+      if (!child.isChecked) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Toggles the checked state of all child filter items.
+   * Override this method to optimize the logic.
+   * If there are no child items, this method does nothing.
+   */
+  public toggleAllChecked(): void {
+    if (this._children === undefined || this._children.length === 0) {
+      return;
+    }
+    const isAllChecked = this.isAllChecked;
+    for (const child of this._children) {
+      child.setChecked(!isAllChecked);
+    }
+  }
+
+  // ==================================================
+  // INSTANCE METHODS
+  // ==================================================
+
+  public getSelectedLabel(translate: TranslateDelegate): string {
+    if (this._children === undefined) {
+      return this.getNoneLabel(translate);
+    }
+    const selected = this._children.filter((child) => child.isChecked);
+    const counter = selected.length;
+    if (counter === 0) {
+      return this.getNoneLabel(translate);
+    }
+    if (counter === this._children.length) {
+      return this.getAllLabel(translate);
+    }
+    if (counter === 1) {
+      return selected[0].getLabel(translate);
+    }
+    return counter.toString() + ' ' + this.getSelected(translate);
+  }
+
+  public getAllLabel(translate: TranslateDelegate): string {
+    return translate('ALL', 'All');
+  }
+
+  public getNoneLabel(translate: TranslateDelegate): string {
+    return translate('NONE', 'None');
+  }
+
+  public getSelected(translate: TranslateDelegate): string {
+    return translate('SELECTED', 'Selected');
+  }
+}
+
+export abstract class BaseFilterItemCommand extends RenderTargetCommand {
+  public abstract get color(): Color | undefined;
+  public abstract setChecked(value: boolean): void;
+}

react-components/src/architecture/base/commands/BaseOptionCommand.ts

@@ -2,7 +2,6 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget';
 import { type BaseCommand } from './BaseCommand';
 import { RenderTargetCommand } from './RenderTargetCommand';
 
@@ -12,44 +11,61 @@ import { RenderTargetCommand } from './RenderTargetCommand';
  */
 
 export abstract class BaseOptionCommand extends RenderTargetCommand {
-  private _options: BaseCommand[] | undefined = undefined;
+  // ==================================================
+  // INSTANCE FIELDS/PROPERTIES
+  // ==================================================
+
+  private _children: BaseCommand[] | undefined = undefined;
+
+  public get children(): BaseCommand[] | undefined {
+    if (this._children === undefined) {
+      this._children = this.createChildren();
+    }
+    return this._children;
+  }
+
+  public get hasChildren(): boolean {
+    return this._children !== undefined && this._children.length > 0;
+  }
 
   // ==================================================
   // OVERRIDES
   // ==================================================
 
-  public override attach(renderTarget: RevealRenderTarget): void {
-    this._renderTarget = renderTarget;
-    for (const option of this.options) {
-      if (option instanceof RenderTargetCommand) {
-        option.attach(renderTarget);
-      }
+  protected override *getChildren(): Generator<BaseCommand> {
+    if (this._children === undefined) {
+      return;
+    }
+    for (const child of this._children) {
+      yield child;
     }
   }
+
   // ==================================================
   // VIRTUAL METHODS
   // ==================================================
 
-  protected createOptions(): BaseCommand[] {
-    return []; // Override this to add options or use the add method
+  protected createChildren(): BaseCommand[] {
+    return []; // Override this to add options or use the constructor and add them in
   }
 
   // ==================================================
   // INSTANCE METHODS
   // ==================================================
 
-  public get options(): BaseCommand[] {
-    if (this._options === undefined) {
-      this._options = this.createOptions();
+  public get selectedChild(): BaseCommand | undefined {
+    const children = this.children;
+    if (children === undefined) {
+      return undefined;
     }
-    return this._options;
+    return children.find((child) => child.isChecked);
   }
 
-  public get selectedOption(): BaseCommand | undefined {
-    return this.options.find((option) => option.isChecked);
-  }
-
-  protected add(command: BaseCommand): void {
-    this.options.push(command);
+  protected add(child: BaseCommand): void {
+    const children = this.children;
+    if (children === undefined) {
+      return undefined;
+    }
+    children.push(child);
   }
 }

react-components/src/architecture/base/commands/RenderTargetCommand.ts

@@ -67,12 +67,21 @@ export abstract class RenderTargetCommand extends BaseCommand {
 
   public attach(renderTarget: RevealRenderTarget): void {
     this._renderTarget = renderTarget;
+    this.attachChildren();
   }
 
   // ==================================================
   // INSTANCE METHODS
   // ==================================================
 
+  protected attachChildren(): void {
+    for (const child of this.getChildren()) {
+      if (child instanceof RenderTargetCommand) {
+        child.attach(this.renderTarget);
+      }
+    }
+  }
+
   public addTransaction(transaction: Transaction | undefined): void {
     if (transaction === undefined) {
       return;

react-components/src/architecture/base/concreteCommands/SettingsCommand.ts → react-components/src/architecture/base/commands/SettingsCommand.ts

@@ -2,17 +2,24 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget';
 import { type TranslateKey } from '../utilities/TranslateKey';
-import { type BaseCommand } from '../commands/BaseCommand';
-import { RenderTargetCommand } from '../commands/RenderTargetCommand';
+import { type BaseCommand } from './BaseCommand';
+import { RenderTargetCommand } from './RenderTargetCommand';
 
 export class SettingsCommand extends RenderTargetCommand {
   // ==================================================
-  // INSTANCE FIELDS
+  // INSTANCE FIELDS/PROPERTIES
   // ==================================================
 
-  private readonly _commands: BaseCommand[] = [];
+  private readonly _children: BaseCommand[] = [];
+
+  public get children(): BaseCommand[] {
+    return this._children;
+  }
+
+  public get hasChildren(): boolean {
+    return this._children.length > 0;
+  }
 
   // ==================================================
   // OVERRIDES
@@ -26,27 +33,24 @@ export class SettingsCommand extends RenderTargetCommand {
     return 'Settings';
   }
 
-  public override attach(renderTarget: RevealRenderTarget): void {
-    super.attach(renderTarget);
-    for (const command of this._commands) {
-      if (command instanceof RenderTargetCommand) {
-        command.attach(renderTarget);
-      }
+  protected override *getChildren(): Generator<BaseCommand> {
+    if (this._children === undefined) {
+      return;
+    }
+    for (const child of this._children) {
+      yield child;
     }
   }
+
   // ==================================================
   // INSTANCE METHODS
   // ==================================================
 
   public add(command: BaseCommand): void {
-    if (this._commands.find((c) => c.equals(command)) !== undefined) {
+    if (this._children.find((c) => c.equals(command)) !== undefined) {
       console.error('Duplicated command given: ' + command.name);
       return;
     }
-    this._commands.push(command);
-  }
-
-  public get commands(): BaseCommand[] {
-    return this._commands;
+    this._children.push(command);
   }
 }

react-components/src/architecture/base/commands/mocks/MockActionCommand.ts

@@ -0,0 +1,32 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type TranslateKey } from '../../utilities/TranslateKey';
+import { RenderTargetCommand } from '../RenderTargetCommand';
+
+export class MockActionCommand extends RenderTargetCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Action' };
+  }
+
+  public override get icon(): string {
+    return 'Sun';
+  }
+
+  public override get shortCutKey(): string | undefined {
+    return 'A';
+  }
+
+  public override get shortCutKeyOnCtrl(): boolean {
+    return true;
+  }
+
+  protected override invokeCore(): boolean {
+    return true;
+  }
+}

react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type TranslateKey } from '../../utilities/TranslateKey';
+import { RenderTargetCommand } from '../RenderTargetCommand';
+
+export class MockCheckableCommand extends RenderTargetCommand {
+  public value = false;
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Checkable action' };
+  }
+
+  public override get icon(): string {
+    return 'Snow';
+  }
+
+  public override get isChecked(): boolean {
+    return this.value;
+  }
+
+  protected override invokeCore(): boolean {
+    this.value = !this.value;
+    return true;
+  }
+}