This repository has been archived by the owner on Jul 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #181 from parodos-dev/FLPATH-478/revisit-options
Allow the user to revisit the workflow options at anytime
- Loading branch information
Showing
15 changed files
with
250 additions
and
36 deletions.
There are no files selected for viewing
37 changes: 37 additions & 0 deletions
37
plugins/parodos/src/components/AssessmentBreadCrumb/AssessmentBreadCrumb.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { makeStyles, Typography } from '@material-ui/core'; | ||
| import { Link, Breadcrumbs } from '@backstage/core-components'; | ||
|
|
||
| interface AssessmentBreadCrumbProps { | ||
| linkText?: string; | ||
| projectId: string; | ||
| executionId: string; | ||
| current: string; | ||
| } | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| link: { | ||
| color: theme.palette.primary.main, | ||
| }, | ||
| })); | ||
|
|
||
| export function AssessmentBreadCrumb({ | ||
| projectId, | ||
| executionId, | ||
| linkText = 'Assessment results', | ||
| current, | ||
| }: AssessmentBreadCrumbProps): JSX.Element { | ||
| const styles = useStyles(); | ||
|
|
||
| return ( | ||
| <Breadcrumbs aria-label="breadcrumb"> | ||
| <Link | ||
| className={styles.link} | ||
| to={`/parodos/workflows/assessment/${projectId}/${executionId}`} | ||
| > | ||
| {linkText} | ||
| </Link> | ||
| <Typography>{current}</Typography> | ||
| </Breadcrumbs> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
plugins/parodos/src/components/workflow/Assessment/AssessmentWorkflow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| /* eslint-disable no-console */ | ||
| import React, { useEffect } from 'react'; | ||
| import { | ||
| Breadcrumbs, | ||
| ContentHeader, | ||
| EmptyState, | ||
| InfoCard, | ||
| Link, | ||
| Progress, | ||
| SupportButton, | ||
| } from '@backstage/core-components'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import { ParodosPage } from '../../ParodosPage'; | ||
| import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; | ||
| import { assert } from 'assert-ts'; | ||
| import { WorkflowOptionsList } from '../WorkflowOptionsList'; | ||
| import useAsync from 'react-use/lib/useAsync'; | ||
| import { useStore } from '../../../stores/workflowStore/workflowStore'; | ||
| import { errorApiRef, fetchApiRef, useApi } from '@backstage/core-plugin-api'; | ||
| import { getWorkflowOptions } from '../hooks/getWorkflowOptions'; | ||
| import * as urls from '../../../urls'; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| fullHeight: { | ||
| height: '100%', | ||
| }, | ||
| link: { | ||
| color: theme.palette.primary.main, | ||
| }, | ||
| })); | ||
|
|
||
| export function AssessmentWorkflow(): JSX.Element { | ||
| const styles = useStyles(); | ||
| const { projectId, assessmentWorkflowExecutionId } = useParams(); | ||
| const errorApi = useApi(errorApiRef); | ||
| const { fetch } = useApi(fetchApiRef); | ||
| const workflowsUrl = useStore(state => state.getApiUrl(urls.Workflows)); | ||
|
|
||
| assert(!!projectId, `no projectId for assessment workflow`); | ||
| assert( | ||
| !!assessmentWorkflowExecutionId, | ||
| `no assessmentWorkflowExecutionId for assessment workflow`, | ||
| ); | ||
|
|
||
| const selectedProject = useStore(state => state.getProjectById(projectId)); | ||
|
|
||
| const { | ||
| loading, | ||
| error, | ||
| value: workflowOptions, | ||
| } = useAsync(async () => { | ||
| return await getWorkflowOptions(fetch, { | ||
| workflowsUrl, | ||
| executionId: assessmentWorkflowExecutionId, | ||
| }); | ||
| }, [assessmentWorkflowExecutionId, fetch, workflowsUrl]); | ||
|
|
||
| // console.log(workflowOptions); | ||
|
|
||
| useEffect(() => { | ||
| if (error) { | ||
| errorApi.post(new Error(`Failure retrieving workflow options`)); | ||
| } | ||
| }, [error, errorApi]); | ||
|
|
||
| const noOptions = | ||
| loading === false && workflowOptions && workflowOptions.length === 0; | ||
| const hasOptions = workflowOptions && workflowOptions.length > 0; | ||
|
|
||
| return ( | ||
| <ParodosPage stretch> | ||
| <ContentHeader title="Assessment"> | ||
| <SupportButton title="Need help?">Lorem Ipsum</SupportButton> | ||
| </ContentHeader> | ||
| <Box mb={3}> | ||
| <Breadcrumbs aria-label="breadcrumb"> | ||
| <Link className={styles.link} to="/parodos/workflows"> | ||
| Workflows | ||
| </Link> | ||
| <Typography>Assessment results</Typography> | ||
| </Breadcrumbs> | ||
| </Box> | ||
| <InfoCard className={styles.fullHeight}> | ||
| <Grid container direction="row"> | ||
| <Grid item xs={12}> | ||
| {loading && <Progress />} | ||
| {noOptions && ( | ||
| <EmptyState | ||
| missing="data" | ||
| title="There are no further workflow options to complete for this assessment." | ||
| /> | ||
| )} | ||
| {hasOptions && ( | ||
| <WorkflowOptionsList | ||
| isNew={false} | ||
| project={selectedProject} | ||
| workflowOptions={workflowOptions} | ||
| assessmentWorkflowExecutionId={assessmentWorkflowExecutionId} | ||
| /> | ||
| )} | ||
| </Grid> | ||
| </Grid> | ||
| </InfoCard> | ||
| </ParodosPage> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 33 additions & 3 deletions
36
plugins/parodos/src/components/workflow/hooks/getWorkflowOptions.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,45 @@ | ||
| import { FetchApi } from '@backstage/core-plugin-api'; | ||
| import { WorkflowOptions, workflowSchema } from '../../../models/workflow'; | ||
| import { | ||
| displayableWorkflowOptions, | ||
| workflowSchema, | ||
| } from '../../../models/workflow'; | ||
| import { taskDisplayName } from '../../../utils/string'; | ||
| import { WorkflowOptionsListItem } from './useCreateWorkflow'; | ||
|
|
||
| export async function getWorkflowOptions( | ||
| fetch: FetchApi['fetch'], | ||
| options: { workflowsUrl: string; executionId: string }, | ||
| ): Promise<Partial<WorkflowOptions>> { | ||
| ): Promise<WorkflowOptionsListItem[]> { | ||
| const response = await fetch( | ||
| `${options.workflowsUrl}/${options.executionId}/context?param=WORKFLOW_OPTIONS`, | ||
| ); | ||
| if (!response.ok) { | ||
| throw new Error(response.statusText); | ||
| } | ||
| return workflowSchema.parse(await response.json()).workFlowOptions; | ||
| const workflowOptions = workflowSchema.parse( | ||
| await response.json(), | ||
| ).workFlowOptions; | ||
|
|
||
| return displayableWorkflowOptions | ||
| .flatMap(option => { | ||
| const items = workflowOptions[option] ?? []; | ||
|
|
||
| if (items.length === 0) { | ||
| return items; | ||
| } | ||
|
|
||
| const optionType = taskDisplayName(option); | ||
|
|
||
| return items.map(item => ({ | ||
| ...item, | ||
| type: optionType, | ||
| })); | ||
| }) | ||
| .sort((left, right) => { | ||
| if (left.recommended === right.recommended) { | ||
| return left.workFlowName.localeCompare(right.workFlowName); | ||
| } | ||
|
|
||
| return left.recommended ? -1 : 0; | ||
| }) as WorkflowOptionsListItem[]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.