Repository: hashicorp/vault
File: ui/app/components/secret-engine/list.ts (TypeScript)

Code before:
    }
    // no filters, return full sorted list.
    return sortedBackends;
  }

  @action
  tooltipText(backend: SecretsEngineResource) {
    if (backend.isSupportedBackend) {
      if (backend.type === 'kv') {
        // If the backend is a KV engine, include the version in the tooltip.
        this.tooltip = `${engineDisplayData(backend.type)?.displayName} version ${backend.version}`;
      } else {
        this.tooltip = `${engineDisplayData(backend.type)?.displayName}`;
      }
    } else if (engineDisplayData(backend.type)?.type === 'generic') {
      // If a mounted engine type doesn't match any known type, the type is returned as 'generic' and set this tooltip.
      // Handles issue when a user externally mounts an engine that doesn't follow the expected naming conventions for what's in the binary, despite being a valid engine.
      this.tooltip =
        'This is an externally mounted plugin that is not recognized by the UI. Please use the CLI to manage this engine.';
    } else {
      // If the engine type is recognized but not supported, we only show configuration view and set this tooltip.
      this.tooltip =
        'The UI only supports configuration views for these secret engines. The CLI must be used to manage other engine resources.';
    }

    this.args.onHover?.(this.tooltip); // expose the tracked value
  }

  // Filtering & searching
  get secretEngineArrayByType() {
    const arrayOfAllEngineTypes = this.sortedDisplayableBackends.map((modelObject) => modelObject.engineType);
    // filter out repeated engineTypes (e.g. [kv, kv] => [kv])
    const arrayOfUniqueEngineTypes = [...new Set(arrayOfAllEngineTypes)];

    return arrayOfUniqueEngineTypes.map((engineType) => ({
      name: engineType,
      id: engineType,
    }));
  }

  get secretEngineArrayByName() {
    return this.sortedDisplayableBackends.map((modelObject) => ({
      name: modelObject.id,
      id: modelObject.id,
    }));
  }

  @action
  filterEngineType(type: string[]) {
    const [selectedType] = type;
    this.selectedEngineType = selectedType || '';

Review comment (suggestion):
This isn't my favorite approach (and kinda feels out of left field) but for whatever reason I couldn't get mouseover event to pass in tests 

Ex. something like:
```
await triggerEvent('.hds-tooltip-button', 'mouseover');
assert.dom('.hds-tooltip-container').hasText('SSH', 'shows tooltip for SSH without version');
```

should work but would always return blank in assert, in acceptance or integration tests. I tried different variations of triggerEvents, settled, waitfor etc - no dice.


So I found this as a work around, lets me set an external function in tests as an arg to verify that the event does happen on mouseover and the tooltip value is being set by the function

Code after:
    return sortedBackends;
  }

  generateToolTipText = (backend: SecretsEngineResource) => {
    const displayData = engineDisplayData(backend.type);

    if (!displayData) {
      return;
    } else if (backend.isSupportedBackend) {
      if (backend.type === 'kv') {
        // If the backend is a KV engine, include the version in the tooltip.
        return `${displayData.displayName} version ${backend.version}`;
      } else {
        return `${displayData.displayName}`;
      }
    } else if (displayData.type === 'generic') {
      // If a mounted engine type doesn't match any known type, the type is returned as 'generic' and set this tooltip.
      // Handles issue when a user externally mounts an engine that doesn't follow the expected naming conventions for what's in the binary, despite being a valid engine.
      return 'This plugin is not supported by the UI. Please use the CLI to manage this engine.';
    } else {
      // If the engine type is recognized but not supported, we only show configuration view and set this tooltip.
      return 'The UI only supports configuration views for these secret engines. The CLI must be used to manage other engine resources.';
    }
  };

  // Filtering & searching
  get secretEngineArrayByType() {
    const arrayOfAllEngineTypes = this.sortedDisplayableBackends.map((modelObject) => modelObject.engineType);
    // filter out repeated engineTypes (e.g. [kv, kv] => [kv])
    const arrayOfUniqueEngineTypes = [...new Set(arrayOfAllEngineTypes)];

    return arrayOfUniqueEngineTypes.map((engineType) => ({
      name: engineType,
      id: engineType,
    }));
  }

  get secretEngineArrayByName() {
    return this.sortedDisplayableBackends.map((modelObject) => ({
      name: modelObject.id,
      id: modelObject.id,
    }));
  }

  @action
  filterEngineType(type: string[]) {
    const [selectedType] = type;
    this.selectedEngineType = selectedType || '';
  }

  @action