From 0cae877c674260738b2593607313bd6d2b987ef8 Mon Sep 17 00:00:00 2001
From: eshamard <eshamard@redhat.com>
Date: Thu, 2 May 2024 13:45:02 +0200
Subject: [PATCH] Test results select migration 3

---
 frontend/src/result-list.js | 115 ++++++++++++++++++++++++++++++++----
 1 file changed, 102 insertions(+), 13 deletions(-)

diff --git a/frontend/src/result-list.js b/frontend/src/result-list.js
index 43ffb597..5142a26e 100644
--- a/frontend/src/result-list.js
+++ b/frontend/src/result-list.js
@@ -6,6 +6,8 @@ import {
 	Card,
 	CardBody,
 	CardFooter,
+  Chip,
+  ChipGroup,
 	PageSection,
 	PageSectionVariants,
   Select,
@@ -88,7 +90,7 @@ export class ResultList extends React.Component {
       isRunOpen: false,
       runInputValue: '',
       runFilterValue: '',
-      resultSelection: 'failed',
+      resultSelection: null,
       isResultOpen: false,
       boolSelection: null,
       isBoolOpen: false,
@@ -264,10 +266,10 @@ export class ResultList extends React.Component {
     const operationMode = getOperationMode(operator);
     let value = this.state.textFilter.trim();
     if (filterMode === 'result' && operationMode !== 'bool') {
-      value = (operationMode === 'multi') ? this.state.resultSelection.join(';') : this.state.resultSelection;
+      value = (operationMode === 'multi') ? this.state.resultSelection?.join(';') : this.state.resultSelection;
     }
     else if (filterMode === 'run' && operationMode !== 'bool') {
-      value = (operationMode === 'multi') ? this.state.runSelection.join(';') : this.state.runSelection;
+      value = (operationMode === 'multi') ? this.state.runSelection?.join(';') : this.state.runSelection;
     }
     else if (operationMode === 'multi') {
       // translate list to ;-separated string for BE
@@ -281,6 +283,8 @@ export class ResultList extends React.Component {
       this.getResults();
       this.setState({
         fieldSelection: null,
+        fieldInputValue: '',
+        runInputValue: '',
         operationSelection: 'eq',
         textFilter: '',
         resultSelection: null,
@@ -487,9 +491,8 @@ export class ResultList extends React.Component {
     } = this.state;
     const filterMode = getFilterMode(fieldSelection);
     const operationMode = getOperationMode(operationSelection);
-    // console.log("OPER MODE: " + operationMode)
-    // console.log("FILTER MODE: " + filterMode)
     const operations = getOperationsFromField(fieldSelection);
+
     const fieldToggle = toggleRef => (
       <MenuToggle
         variant="typeahead"
@@ -528,7 +531,7 @@ export class ResultList extends React.Component {
     const operationToggle = toggleRef => (
       <MenuToggle
         onClick={this.onOperationToggle}
-        isExpanded={this.state.isOperationOpen}
+        isExpanded={isOperationOpen}
         isFullWidth
         ref={toggleRef}
       >
@@ -569,18 +572,62 @@ export class ResultList extends React.Component {
         onClick={this.onResultToggle}
         isExpanded={this.state.isResultOpen}
         isFullWidth
+        placeholder="Select a result"
         ref={toggleRef}
       >
-        {resultSelection}
+        {resultSelection ? resultSelection : "Select a result"}
+      </MenuToggle>
+    )
+    const resultMultiToggle = toggleRef => (
+      <MenuToggle
+        variant="typeahead"
+        onClick={this.onResultToggle}
+        isExpanded={this.state.isResultOpen}
+        isFullWidth
+        placeholder="Select a result"
+        ref={toggleRef}
+      >
+        <TextInputGroup isPlain>
+          <TextInputGroupMain
+            onClick={this.onResultToggle}
+            isExpanded={this.state.isResultOpen}
+            placeholder="Select 1 or multiple results"
+          >
+            <ChipGroup aria-label="Current selections">
+              {resultSelection?.map((selection, index) => (
+                <Chip
+                  key={index}
+                  onClick={ev => {
+                    ev.stopPropagation();
+                    this.onResultSelect(ev, selection);
+                  }}
+                >
+                  {selection}
+                </Chip>
+              ))}
+            </ChipGroup>
+          </TextInputGroupMain>
+          <TextInputGroupUtilities>
+            {!!resultSelection && (
+              <Button
+                variant="plain"
+                onClick={() => {this.onResultClear()}}
+                aria-label="Clear input value"
+              >
+                <TimesIcon aria-hidden />
+              </Button>
+            )}
+          </TextInputGroupUtilities>
+        </TextInputGroup>
       </MenuToggle>
     )
     const runToggle = toggleRef => (
       <MenuToggle
+        variant="typeahead"
         onClick={this.onRunToggle}
         isExpanded={isRunOpen}
         isFullWidth
-        style={{maxHeight: '36px'}}
-        ref={toggleRef}
+        innerRef={toggleRef}
       >
         <TextInputGroup isPlain>
           <TextInputGroupMain
@@ -604,6 +651,50 @@ export class ResultList extends React.Component {
         </TextInputGroup>
       </MenuToggle>
     )
+    const runMultiToggle = toggleRef => (
+      <MenuToggle
+        variant="typeahead"
+        onClick={this.onRunToggle}
+        isExpanded={isRunOpen}
+        isFullWidth
+        innerRef={toggleRef}
+      >
+        <TextInputGroup isPlain>
+          <TextInputGroupMain
+            value={runInputValue}
+            onClick={this.onRunToggle}
+            onChange={this.onRunTextInputChange}
+            autoComplete="off"
+            placeholder="Select 1 or multiple runs"
+            role="combobox"
+            isExpanded={isRunOpen}
+          >
+            <ChipGroup aria-label="Current selections">
+              {runSelection?.map((selection, index) => (
+                <Chip
+                  key={index}
+                  onClick={ev => {
+                    ev.stopPropagation();
+                    this.onRunSelect(ev, selection);
+                  }}
+                >
+                  {selection}
+                </Chip>
+              ))}
+            </ChipGroup>
+          </TextInputGroupMain>
+          <TextInputGroupUtilities>
+            {runSelection?.length > 0 && (
+              <Button variant="plain" onClick={() => {
+                this.onRunClear();
+              }} aria-label="Clear input value">
+                <TimesIcon aria-hidden />
+              </Button>
+            )}
+          </TextInputGroupUtilities>
+        </TextInputGroup>
+      </MenuToggle>
+    )
     const filters = [
       <Select
         id="multi-typeahead-select"
@@ -671,9 +762,7 @@ export class ResultList extends React.Component {
             selected={runSelection}
             onSelect={this.onRunSelect}
             onOpenChange={() => this.setState({isRun: false})}
-            toggle={runToggle}
-            // toggle={operationMode === 'multi' ? runMultiToggle : runToggle}
-            // variant={operationMode === 'multi' ? SelectVariant.typeaheadMulti : SelectVariant.typeahead}
+            toggle={operationMode === 'multi' ? runMultiToggle : runToggle}
           >
             <SelectList>
               {filteredRuns.length === 0 && (
@@ -696,7 +785,7 @@ export class ResultList extends React.Component {
             selected={resultSelection}
             onSelect={this.onResultSelect}
             onOpenChange={() => this.setState({isResultOpen: false})}
-            toggle={resultToggle}
+            toggle={operationMode === 'multi' ? resultMultiToggle : resultToggle}
           >
             <SelectList>
               {["passed", "xpassed", "failed", "xfailed", "skipped", "error"].map((option, index) => (