Skip to content

Commit

Permalink
[RHOAIENG-7942]: Update Side Panel Behavior to Pan Graph on Node Sele…
Browse files Browse the repository at this point in the history 
…ction

Fix side panel sizing, scrolling, and contents (#8)

apply light variants to page section, fix linting issue

Gage PR feedback

fix tests

add flexItems and minWidth

Fix to hide side panel completely on close

update minWidth, fix pipelineRunDetails

fix pipeline details view

update PipelineRunDetailsTabs
  • Loading branch information
@jenny-s51
jenny-s51 committed Jul 10, 2024
1 parent a90b5d7 commit 0e4ddec
Show file tree
Hide file tree
Showing 9 changed files with 378 additions and 338 deletions.
269 changes: 135 additions & 134 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ import { useNavigate, useParams } from 'react-router-dom';
import {
Breadcrumb,
BreadcrumbItem,
Drawer,
DrawerContent,
DrawerContentBody,
Flex,
FlexItem,
PageSection,
Tab,
TabContent,
TabContentBody,
Expand Down Expand Up @@ -82,92 +80,96 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
);
}

const panelContent = selectedNode ? (
<SelectedTaskDrawerContent
task={selectedNode.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
) : null;

return (
<>
<Drawer isExpanded={!!selectedNode}>
<DrawerContent
panelContent={
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
}
>
<DrawerContentBody style={{ display: 'flex', flexDirection: 'column' }}>
<ApplicationsPage
breadcrumb={
<Breadcrumb>
{breadcrumbPath}
<BreadcrumbItem style={{ maxWidth: 300 }}>
{/* TODO: Remove the custom className after upgrading to PFv6 */}
<Truncate
content={pipeline?.display_name || 'Loading...'}
className="truncate-no-min-width"
/>
</BreadcrumbItem>
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{/* TODO: Remove the custom className after upgrading to PFv6 */}
<Truncate
content={pipelineVersion?.display_name || 'Loading...'}
className="truncate-no-min-width"
/>
</BreadcrumbItem>
</Breadcrumb>
}
title={
<Truncate
content={pipelineVersion?.display_name || 'Loading...'}
// TODO: Remove the custom className after upgrading to PFv6
className="truncate-no-min-width"
<ApplicationsPage
breadcrumb={
<Breadcrumb>
{breadcrumbPath}
<BreadcrumbItem style={{ maxWidth: 300 }}>
{/* TODO: Remove the custom className after upgrading to PFv6 */}
<Truncate
content={pipeline?.display_name || 'Loading...'}
className="truncate-no-min-width"
/>
</BreadcrumbItem>
<BreadcrumbItem isActive style={{ maxWidth: 300 }}>
{/* TODO: Remove the custom className after upgrading to PFv6 */}
<Truncate
content={pipelineVersion?.display_name || 'Loading...'}
className="truncate-no-min-width"
/>
</BreadcrumbItem>
</Breadcrumb>
}
title={
<Truncate
content={pipelineVersion?.display_name || 'Loading...'}
// TODO: Remove the custom className after upgrading to PFv6
className="truncate-no-min-width"
/>
}
{...(pipelineVersion && {
description: (
<MarkdownView component="span" conciseDisplay markdown={pipelineVersion.description} />
),
})}
empty={false}
loaded={isLoaded}
headerAction={
isPipelineVersionLoaded && (
<Flex
spaceItems={{ default: 'spaceItemsMd' }}
alignItems={{ default: 'alignItemsFlexStart' }}
>
<FlexItem style={{ width: '300px' }}>
<PipelineVersionSelector
pipelineId={pipeline?.pipeline_id}
selection={pipelineVersion?.display_name}
onSelect={(version) =>
navigate(
pipelineVersionDetailsRoute(
namespace,
version.pipeline_id,
version.pipeline_version_id,
),
)
}
/>
}
{...(pipelineVersion && {
description: (
<MarkdownView
component="span"
conciseDisplay
markdown={pipelineVersion.description}
</FlexItem>
<FlexItem>
{isLoaded && (
<PipelineDetailsActions
onDelete={() => setDeletionOpen(true)}
pipeline={pipeline}
pipelineVersion={pipelineVersion}
/>
),
})}
empty={false}
loaded={isLoaded}
headerAction={
isPipelineVersionLoaded && (
<Flex
spaceItems={{ default: 'spaceItemsMd' }}
alignItems={{ default: 'alignItemsFlexStart' }}
>
<FlexItem style={{ width: '300px' }}>
<PipelineVersionSelector
pipelineId={pipeline?.pipeline_id}
selection={pipelineVersion?.display_name}
onSelect={(version) =>
navigate(
pipelineVersionDetailsRoute(
namespace,
version.pipeline_id,
version.pipeline_version_id,
),
)
}
/>
</FlexItem>
<FlexItem>
{isLoaded && (
<PipelineDetailsActions
onDelete={() => setDeletionOpen(true)}
pipeline={pipeline}
pipelineVersion={pipelineVersion}
/>
)}
</FlexItem>
</Flex>
)
}
>
)}
</FlexItem>
</Flex>
)
}
>
<PageSection
isFilled
padding={{ default: 'noPadding' }}
style={{ flexBasis: 0, overflowY: 'hidden' }}
variant="light"
>
<Flex
direction={{ default: 'column' }}
style={{ height: '100%' }}
spaceItems={{ default: 'spaceItemsNone' }}
>
<FlexItem>
<Tabs
style={{ flexShrink: 0 }}
activeKey={activeTabKey}
onSelect={(e, tabIndex) => {
setActiveTabKey(tabIndex);
Expand All @@ -182,7 +184,6 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
aria-label="Pipeline Graph Tab"
tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
/>

<Tab
eventKey={PipelineDetailsTab.SUMMARY}
title={<TabTitleText>Summary</TabTitleText>}
Expand All @@ -192,7 +193,6 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
<PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
</TabContentBody>
</Tab>

<Tab
eventKey={PipelineDetailsTab.YAML}
title={<TabTitleText>Pipeline spec</TabTitleText>}
Expand All @@ -201,54 +201,55 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
/>
</Tabs>
<div style={{ flexGrow: 1 }}>
<TabContent
id={`tabContent-${PipelineDetailsTab.GRAPH}`}
eventKey={PipelineDetailsTab.GRAPH}
activeKey={activeTabKey}
hidden={PipelineDetailsTab.GRAPH !== activeTabKey}
style={{ height: '100%' }}
data-testid="pipeline-version-topology-content"
>
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else {
setSelectedId(firstId);
}
}}
/>
)}
</TabContent>
<TabContent
id={`tabContent-${PipelineDetailsTab.YAML}`}
eventKey={PipelineDetailsTab.YAML}
activeKey={activeTabKey}
hidden={PipelineDetailsTab.YAML !== activeTabKey}
className="pf-v5-u-h-100"
>
<TabContentBody className="pf-v5-u-h-100">
<PipelineDetailsYAML
filename={`Pipeline ${
getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
'details'
}`}
content={pipelineVersion?.pipeline_spec}
/>
</TabContentBody>
</TabContent>
</div>
</ApplicationsPage>
</DrawerContentBody>
</DrawerContent>
</Drawer>
</FlexItem>
<FlexItem flex={{ default: 'flex_1' }} style={{ overflowY: 'hidden' }}>
<TabContent
id={`tabContent-${PipelineDetailsTab.GRAPH}`}
eventKey={PipelineDetailsTab.GRAPH}
activeKey={activeTabKey}
hidden={PipelineDetailsTab.GRAPH !== activeTabKey}
style={{ height: '100%' }}
data-testid="pipeline-version-topology-content"
>
{nodes.length === 0 ? (
<PipelineTopologyEmpty />
) : (
<PipelineTopology
nodes={nodes}
selectedIds={selectedId ? [selectedId] : []}
onSelectionChange={(ids) => {
const firstId = ids[0];
if (ids.length === 0) {
setSelectedId(null);
} else {
setSelectedId(firstId);
}
}}
sidePanel={panelContent}
/>
)}
</TabContent>
<TabContent
id={`tabContent-${PipelineDetailsTab.YAML}`}
eventKey={PipelineDetailsTab.YAML}
activeKey={activeTabKey}
hidden={PipelineDetailsTab.YAML !== activeTabKey}
className="pf-v5-u-h-100"
>
<TabContentBody hasPadding className="pf-v5-u-h-100">
<PipelineDetailsYAML
filename={`Pipeline ${
getCorePipelineSpec(pipelineVersion?.pipeline_spec)?.pipelineInfo.name ??
'details'
}`}
content={pipelineVersion?.pipeline_spec}
/>
</TabContentBody>
</TabContent>
</FlexItem>
</Flex>
</PageSection>
</ApplicationsPage>
{pipeline && (
<DeletePipelinesModal
isOpen={isDeletionOpen}
Expand Down
7 changes: 1 addition & 6 deletions ...nd/src/concepts/pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,7 @@ const SelectedTaskDrawerContent: React.FC<SelectedTaskDrawerContentProps> = ({ t
}

return (
<DrawerPanelContent
isResizable
widths={{ default: 'width_33', lg: 'width_50' }}
minSize="300px"
data-testid="task-drawer"
>
<DrawerPanelContent data-testid="task-drawer" style={{ height: '100%', overflowY: 'auto' }}>
<DrawerHead>
<Title headingLevel="h2" size="xl" data-testid="pipeline-task-name">
{task.name} {task.type === 'artifact' ? 'Artifact details' : ''}
Expand Down
Loading

0 comments on commit 0e4ddec

Please sign in to comment.