hunk.code_window:             // # Type a command
               cy.findByTestId('post_textbox').clear().type('/playbook update ');
               // * Verify suggestions number: 2 runs + 1 title
               cy.get('.slash-command').should('have.length', 3);
               // # Clear input
               cy.findByTestId('post_textbox').clear();
  
hunk.labels: keep keep keep keep replace keep keep keep keep
hunk.after_edit:             cy.get('.slash-command__info').should('have.length', 3);
  
hunk.file_path: e2e-tests/cypress/tests/integration/playbooks/channels/slash_command/commands_spec.js
hunk.type: replace
file: // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
  // See LICENSE.txt for license information.
  
  import React from 'react';
  
  import Provider from './provider';
  import type {ResultsCallback} from './provider';
  import {SuggestionContainer} from './suggestion';
  import type {SuggestionProps} from './suggestion';
  
  interface MenuAction {
      text: string;
      value: string;
  }
  
  const MenuActionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<MenuAction>>((props, ref) => {
      const {item} = props;
  
      return (
          <SuggestionContainer
              ref={ref}
              {...props}
          >
              {item.text}
          </SuggestionContainer>
      );
  });
  MenuActionSuggestion.displayName = 'MenuActionSuggestion';
  
  export default class MenuActionProvider extends Provider {
      private options: MenuAction[];
  
      constructor(options: MenuAction[]) {
          super();
          this.options = options;
      }
  
      handlePretextChanged(prefix: string, resultsCallback: ResultsCallback<MenuAction>) {
          if (prefix.length === 0) {
              this.displayAllOptions(resultsCallback);
              return true;
          }
  
          if (prefix) {
              this.filterOptions(prefix, resultsCallback);
              return true;
          }
  
          return false;
      }
  
      async displayAllOptions(resultsCallback: ResultsCallback<MenuAction>) {
          const terms = this.options.map((option) => option.text);
  
          resultsCallback({
              matchedPretext: '',
              terms,
              items: this.options,
              component: MenuActionSuggestion,
          });
      }
  
      async filterOptions(prefix: string, resultsCallback: ResultsCallback<MenuAction>) {
          const filteredOptions = this.options.filter((option) => option.text.toLowerCase().indexOf(prefix.toLowerCase()) >= 0);
          const terms = filteredOptions.map((option) => option.text);
  
          resultsCallback({
              matchedPretext: prefix,
              terms,
              items: filteredOptions,
              component: MenuActionSuggestion,
          });
      }
  }
  