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
  • Loading branch information
@jenny-s51
jenny-s51 committed Jun 27, 2024
1 parent 3f0cf84 commit 286a10c
Show file tree
Hide file tree
Showing 8 changed files with 351 additions and 347 deletions.
319 changes: 155 additions & 164 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,173 +80,166 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
);
}

const panelContent = selectedNode ? (

Check failure on line 83 in frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

View workflow job for this annotation

GitHub Actions / Tests (18.x) 

'panelContent' is assigned a value but never used
<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(
routePipelineDetailsNamespace(
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(
routePipelineDetailsNamespace(
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"
>
<Tabs
activeKey={activeTabKey}
onSelect={(e, tabIndex) => {
setActiveTabKey(tabIndex);
setSelectedId(null);
}}
aria-label="Pipeline Details tabs"
role="region"
>
<Tab
eventKey={PipelineDetailsTab.GRAPH}
title={<TabTitleText>Graph</TabTitleText>}
aria-label="Pipeline Graph Tab"
tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
/>
<Tab
eventKey={PipelineDetailsTab.SUMMARY}
title={<TabTitleText>Summary</TabTitleText>}
aria-label="Pipeline Summary Tab"
>
<Tabs
style={{ flexShrink: 0 }}
activeKey={activeTabKey}
onSelect={(e, tabIndex) => {
setActiveTabKey(tabIndex);
setSelectedId(null);
<TabContentBody hasPadding>
<PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
</TabContentBody>
</Tab>
<Tab
eventKey={PipelineDetailsTab.YAML}
title={<TabTitleText>Pipeline spec</TabTitleText>}
data-testid="pipeline-yaml-tab"
aria-label="Pipeline YAML Tab"
tabContentId={`tabContent-${PipelineDetailsTab.YAML}`}
/>
</Tabs>
<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) => {
setSelectedId(ids.length ? ids[0] : null);
}}
aria-label="Pipeline Details tabs"
role="region"
>
<Tab
eventKey={PipelineDetailsTab.GRAPH}
title={<TabTitleText>Graph</TabTitleText>}
aria-label="Pipeline Graph Tab"
tabContentId={`tabContent-${PipelineDetailsTab.GRAPH}`}
/>

<Tab
eventKey={PipelineDetailsTab.SUMMARY}
title={<TabTitleText>Summary</TabTitleText>}
aria-label="Pipeline Summary Tab"
>
<TabContentBody hasPadding>
<PipelineSummaryDescriptionList pipeline={pipeline} version={pipelineVersion} />
</TabContentBody>
</Tab>

<Tab
eventKey={PipelineDetailsTab.YAML}
title={<TabTitleText>Pipeline spec</TabTitleText>}
data-testid="pipeline-yaml-tab"
aria-label="Pipeline YAML Tab"
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 hasPadding 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>
sidePanel={
<SelectedTaskDrawerContent
task={selectedNode?.data.pipelineTask}
onClose={() => setSelectedId(null)}
/>
}
/>
)}
</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>
</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 286a10c

Please sign in to comment.