From dba3df1c5509b9a1aef7c903810551f329308631 Mon Sep 17 00:00:00 2001 From: csirius <85753828+csirius@users.noreply.github.com> Date: Fri, 24 Sep 2021 16:36:47 -0400 Subject: [PATCH] fix: polish workflow details page (#215) * fix: polish workflow details page Signed-off-by: csirius <85753828+csirius@users.noreply.github.com> Signed-off-by: Jason Porter * fix: react flow not being displayed in version view Signed-off-by: csirius <85753828+csirius@users.noreply.github.com> Signed-off-by: Jason Porter * Added fix for providing React flow flex dimensions Signed-off-by: Jason Porter * Removed flex container for static graph to prevent bad first renders Signed-off-by: Jason Porter Co-authored-by: Jason Porter --- src/components/Entities/EntityDetails.tsx | 5 ++--- src/components/Entities/EntityVersions.tsx | 5 ++--- .../Tables/WorkflowVersionsTable.tsx | 2 ++ src/components/Tables/PaginatedDataList.tsx | 20 ++++++++++++------- .../Workflow/StaticGraphContainer.tsx | 9 ++++----- src/components/common/ContentContainer.tsx | 2 +- .../ReactFlow/ReactFlowGraphComponent.tsx | 13 ++++++++++-- .../flytegraph/ReactFlow/ReactFlowWrapper.tsx | 10 ++++++++++ 8 files changed, 45 insertions(+), 21 deletions(-) diff --git a/src/components/Entities/EntityDetails.tsx b/src/components/Entities/EntityDetails.tsx index 66f805bef..2179ce23e 100644 --- a/src/components/Entities/EntityDetails.tsx +++ b/src/components/Entities/EntityDetails.tsx @@ -33,12 +33,11 @@ const useStyles = makeStyles((theme: Theme) => ({ flex: '1 1 auto', flexDirection: 'column', margin: `0 -${theme.spacing(contentMarginGridUnits)}px`, - minHeight: theme.spacing(55) + flexBasis: theme.spacing(80) }, versionsContainer: { display: 'flex', - flexDirection: 'column', - height: theme.spacing(53) + flexDirection: 'column' }, versionView: { flex: '1 1 auto' diff --git a/src/components/Entities/EntityVersions.tsx b/src/components/Entities/EntityVersions.tsx index 7a4359f98..01c2a9ef7 100644 --- a/src/components/Entities/EntityVersions.tsx +++ b/src/components/Entities/EntityVersions.tsx @@ -1,6 +1,5 @@ import Typography from '@material-ui/core/Typography'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import { contentMarginGridUnits } from 'common/layout'; import { WaitForData } from 'components/common/WaitForData'; import { useWorkflowExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState'; import { WorkflowVersionsTable } from 'components/Executions/Tables/WorkflowVersionsTable'; @@ -20,8 +19,8 @@ const useStyles = makeStyles((theme: Theme) => ({ headerContainer: { display: 'flex', justifyContent: 'space-between', - marginLeft: theme.spacing(contentMarginGridUnits), - marginRight: theme.spacing(contentMarginGridUnits) + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1) }, header: { marginBottom: theme.spacing(1) diff --git a/src/components/Executions/Tables/WorkflowVersionsTable.tsx b/src/components/Executions/Tables/WorkflowVersionsTable.tsx index eea106091..70fbc792d 100644 --- a/src/components/Executions/Tables/WorkflowVersionsTable.tsx +++ b/src/components/Executions/Tables/WorkflowVersionsTable.tsx @@ -60,6 +60,7 @@ export const WorkflowVersionsTable: React.FC = props versionView={versionView} onClick={versionView ? handleClickRow(row.id) : undefined} isChecked={workflowVersion === row.id.version} + key={`workflow-version-row-${row.id.version}`} /> ); @@ -77,6 +78,7 @@ export const WorkflowVersionsTable: React.FC = props totalRows={workflows.length} showRadioButton={versionView} noDataString={noWorkflowVersionsFoundString} + fillEmptyRows={false} /> ); diff --git a/src/components/Tables/PaginatedDataList.tsx b/src/components/Tables/PaginatedDataList.tsx index 9f50696e2..d4e7feb80 100644 --- a/src/components/Tables/PaginatedDataList.tsx +++ b/src/components/Tables/PaginatedDataList.tsx @@ -36,6 +36,7 @@ interface PaginatedDataListProps { data: T[]; rowRenderer: (row: T) => void; noDataString: string; + fillEmptyRows?: boolean; } const useStyles = makeStyles((theme: Theme) => @@ -164,6 +165,7 @@ const PaginatedDataList = ({ rowRenderer, totalRows, showRadioButton, + fillEmptyRows = true, noDataString }: PropsWithChildren>) => { const classes = useStyles(); @@ -211,13 +213,17 @@ const PaginatedDataList = ({ {data.map((row, index) => { return rowRenderer(row); })} - {!showRadioButton && emptyRows > 0 && ( - - - - )} + {fillEmptyRows && + !showRadioButton && + emptyRows > 0 && ( + + + + )} diff --git a/src/components/Workflow/StaticGraphContainer.tsx b/src/components/Workflow/StaticGraphContainer.tsx index f03fbec2b..655040609 100644 --- a/src/components/Workflow/StaticGraphContainer.tsx +++ b/src/components/Workflow/StaticGraphContainer.tsx @@ -42,11 +42,10 @@ export interface StaticGraphContainerProps { export const StaticGraphContainer: React.FC = ({ workflowId }) => { - const containerStyle = { - width: '100%', - height: '30%', - maxHeight: '400px', - minHeight: '220px' + const containerStyle: React.CSSProperties = { + height: 300, + minHeight: 300, + padding: '1rem 0' }; const workflowQuery = useQuery( makeWorkflowQuery(useQueryClient(), workflowId) diff --git a/src/components/common/ContentContainer.tsx b/src/components/common/ContentContainer.tsx index 43c16976d..c7acef69a 100644 --- a/src/components/common/ContentContainer.tsx +++ b/src/components/common/ContentContainer.tsx @@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => { root: { display: 'flex', flexDirection: 'column', - height: '100vh', + minHeight: '100vh', padding: `${spacerHeight} ${contentMargin} 0 ${contentMargin}`, [`&.${ContainerClasses.NoMargin}`]: { margin: 0, diff --git a/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx b/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx index 2c3b8d9ad..ed81f297f 100644 --- a/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx +++ b/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx @@ -25,11 +25,20 @@ const ReactFlowGraphComponent = props => { rfGraphJson: rfGraphJson, type: RFGraphTypes.main }; + + const containerStyle: React.CSSProperties = { + display: 'flex', + flex: `1 1 100%`, + flexDirection: 'column', + minHeight: '100px', + minWidth: '200px' + }; + return ( - <> +
- +
); }; diff --git a/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index e998a35f4..e897721d4 100644 --- a/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -130,12 +130,22 @@ export const ReactFlowWrapper: React.FC = ({ * - Append that to the rf nodes {data} object. */ + /** + * React Flow's min height to make it render + */ + const reactFlowStyle: React.CSSProperties = { + display: 'flex', + flex: `1 1 100%`, + flexDirection: 'column' + }; + return (