Skip to content

Commit

Permalink
Test results select migration 3
Browse files Browse the repository at this point in the history
  • Loading branch information
@LightOfHeaven1994
LightOfHeaven1994 committed May 2, 2024
1 parent b77a468 commit 0cae877
Showing 1 changed file with 102 additions and 13 deletions.
115 changes: 102 additions & 13 deletions frontend/src/result-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
Card,
CardBody,
CardFooter,
Chip,
ChipGroup,
PageSection,
PageSectionVariants,
Select,
Expand Down Expand Up @@ -88,7 +90,7 @@ export class ResultList extends React.Component {
isRunOpen: false,
runInputValue: '',
runFilterValue: '',
resultSelection: 'failed',
resultSelection: null,
isResultOpen: false,
boolSelection: null,
isBoolOpen: false,
Expand Down Expand Up @@ -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
Expand All @@ -281,6 +283,8 @@ export class ResultList extends React.Component {
this.getResults();
this.setState({
fieldSelection: null,
fieldInputValue: '',
runInputValue: '',
operationSelection: 'eq',
textFilter: '',
resultSelection: null,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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}
>
Expand Down Expand Up @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -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 && (
Expand All @@ -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) => (
Expand Down

0 comments on commit 0cae877

Please sign in to comment.