Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RHOAIENG-7942]: Update Side Panel Behavior to Pan Graph on Node Selection #2943

Merged
merged 1 commit into from
Jul 10, 2024
Merged

[RHOAIENG-7942]: Update Side Panel Behavior to Pan Graph on Node Selection #2943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 135 additions & 134 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
View file
Open in desktop
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;

jenny-s51 marked this conversation as resolved.
Show resolved Hide resolved
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>
jenny-s51 marked this conversation as resolved.
Show resolved Hide resolved
<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
jenny-s51 marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Loading