status-im
/
spiff-arena
mirror of https://github.com/status-im/spiff-arena.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

make perspective dropdown bigger (#403) 

Co-authored-by: burnettk <burnettk@users.noreply.github.com>
This commit is contained in:
Kevin Burnett 2023-07-25 10:25:11 -07:00 committed by GitHub
parent 77f922f675
commit 23e5fde06e
3 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spiffworkflow-frontend/src/components/Filters.tsx
View File

@ -30,7 +30,7 @@ export default function Filters({
let reportSearchSection = null; let reportSearchSection = null;
if (reportSearchComponent) { if (reportSearchComponent) {
reportSearchSection = ( reportSearchSection = (
<Column sm={2} md={4} lg={7}> <Column sm={3} md={7} lg={15}>
{reportSearchComponent()} {reportSearchComponent()}
</Column> </Column>
); );

2
spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
View File

@ -1702,7 +1702,7 @@ export default function ProcessInstanceListTable({
const reportSearchComponent = () => { const reportSearchComponent = () => {
if (showReports) { if (showReports) {
const columns = [ const columns = [
<Column sm={2} md={4} lg={7}> <Column sm={4} md={8} lg={16}>
<ProcessInstanceReportSearch <ProcessInstanceReportSearch
onChange={processInstanceReportDidChange} onChange={processInstanceReportDidChange}
selectedItem={processInstanceReportSelection} selectedItem={processInstanceReportSelection}

48
spiffworkflow-frontend/src/components/ProcessInstanceReportSearch.tsx
View File

@ -1,11 +1,11 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { import {
ComboBox, ComboBox,
Stack, Grid,
Column,
FormLabel, FormLabel,
// @ts-ignore // @ts-ignore
} from '@carbon/react'; } from '@carbon/react';
import { truncateString } from '../helpers';
import { ProcessInstanceReport } from '../interfaces'; import { ProcessInstanceReport } from '../interfaces';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
@ -53,9 +53,7 @@ export default function ProcessInstanceReportSearch({
const reportSelectionString = ( const reportSelectionString = (
processInstanceReport: ProcessInstanceReport processInstanceReport: ProcessInstanceReport
) => { ) => {
return `${truncateString(processInstanceReport.identifier, 20)} (Id: ${ return `${processInstanceReport.identifier} (Id: ${processInstanceReport.id})`;
processInstanceReport.id
})`;
}; };
const shouldFilterProcessInstanceReport = (options: any) => { const shouldFilterProcessInstanceReport = (options: any) => {
@ -70,24 +68,28 @@ export default function ProcessInstanceReportSearch({
if (reportsAvailable()) { if (reportsAvailable()) {
return ( return (
<Stack orientation="horizontal" gap={2}> <Grid fullWidth condensed>
<FormLabel className="with-top-margin">{titleText}</FormLabel> <Column sm={2} md={3} lg={3}>
<ComboBox <FormLabel className="with-top-margin">{titleText}</FormLabel>
onChange={onChange} </Column>
id="process-instance-report-select" <Column sm={2} md={5} lg={13}>
data-qa="process-instance-report-selection" <ComboBox
items={processInstanceReports} onChange={onChange}
itemToString={(processInstanceReport: ProcessInstanceReport) => { id="process-instance-report-select"
if (processInstanceReport) { data-qa="process-instance-report-selection"
return reportSelectionString(processInstanceReport); items={processInstanceReports}
} itemToString={(processInstanceReport: ProcessInstanceReport) => {
return null; if (processInstanceReport) {
}} return reportSelectionString(processInstanceReport);
shouldFilterItem={shouldFilterProcessInstanceReport} }
placeholder="Choose a process instance perspective" return null;
selectedItem={selectedItem} }}
/> shouldFilterItem={shouldFilterProcessInstanceReport}
</Stack> placeholder="Choose a process instance perspective"
selectedItem={selectedItem}
/>
</Column>
</Grid>
); );
} }
return null; return null;