Skip to content

Commit

Permalink
[RHOAIENG-2404] Replace PF deprecated Dropdown components with PF cor…
Browse files Browse the repository at this point in the history 
…e Dropdowns.
  • Loading branch information
@jeff-phillips-18
jeff-phillips-18 committed Aug 7, 2024
1 parent 457d01d commit c58d7a9
Show file tree
Hide file tree
Showing 6 changed files with 260 additions and 201 deletions.
199 changes: 103 additions & 96 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import * as React from 'react';
import { useNavigate } from 'react-router-dom';

import {
Dropdown,
DropdownItem,
DropdownSeparator,
DropdownToggle,
} from '@patternfly/react-core/deprecated';
import { Divider, Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';

import { usePipelinesAPI } from '~/concepts/pipelines/context';
import PipelineVersionImportModal from '~/concepts/pipelines/content/import/PipelineVersionImportModal';
Expand Down Expand Up @@ -45,99 +40,111 @@ const PipelineDetailsActions: React.FC<PipelineDetailsActionsProps> = ({
return (
<>
<Dropdown
data-testid="pipeline-version-details-actions"
onOpenChange={(isOpenChange) => setOpen(isOpenChange)}
shouldFocusToggleOnSelect
onSelect={() => setOpen(false)}
menuAppendTo={getDashboardMainContainer}
toggle={
<DropdownToggle toggleVariant="primary" onToggle={() => setOpen(!open)}>
popperProps={{ appendTo: getDashboardMainContainer, position: 'right' }}
toggle={(toggleRef) => (
<MenuToggle
data-testid="pipeline-version-details-actions"
ref={toggleRef}
variant="primary"
aria-label="Actions"
onClick={() => setOpen(!open)}
isExpanded={open}
>
Actions
</DropdownToggle>
}
</MenuToggle>
)}
isOpen={open}
position="right"
dropdownItems={[
<DropdownItem key="upload-version" onClick={() => setIsVersionImportModalOpen(true)}>
Upload new version
</DropdownItem>,
<DropdownSeparator key="separator-create" />,
<DropdownItem
isAriaDisabled={!isPipelineSupported}
tooltip={PIPELINE_CREATE_RUN_TOOLTIP_ARGO_ERROR}
key="create-run"
onClick={() =>
navigate(
pipelineVersionCreateRunRoute(
namespace,
pipeline?.pipeline_id,
pipelineVersion?.pipeline_version_id,
),
{
state: { lastPipeline: pipeline, lastVersion: pipelineVersion },
},
)
}
>
Create run
</DropdownItem>,
<DropdownItem
isAriaDisabled={!isPipelineSupported}
tooltip={PIPELINE_CREATE_SCHEDULE_TOOLTIP_ARGO_ERROR}
key="create-schedule"
onClick={() =>
navigate(
pipelineVersionCreateRecurringRunRoute(
namespace,
pipeline?.pipeline_id,
pipelineVersion?.pipeline_version_id,
),
{
state: { lastPipeline: pipeline, lastVersion: pipelineVersion },
},
)
}
>
Create schedule
</DropdownItem>,
...(pipeline && pipelineVersion
? [
<DropdownSeparator key="separator-view" />,
<DropdownItem
key="view-runs"
onClick={() =>
navigate(
pipelineVersionRunsRoute(
namespace,
pipeline.pipeline_id,
pipelineVersion.pipeline_version_id,
),
)
}
>
View runs
</DropdownItem>,
<DropdownItem
key="view-schedules"
onClick={() =>
navigate(
pipelineVersionRecurringRunsRoute(
namespace,
pipeline.pipeline_id,
pipelineVersion.pipeline_version_id,
),
)
}
>
View schedules
</DropdownItem>,
]
: []),

<DropdownSeparator key="separator-delete" />,
<DropdownItem key="delete-pipeline-version" onClick={() => onDelete()}>
Delete pipeline version
</DropdownItem>,
]}
/>
>
<DropdownList>
{[
<DropdownItem key="upload-version" onClick={() => setIsVersionImportModalOpen(true)}>
Upload new version
</DropdownItem>,
<Divider key="separator-create" />,
<DropdownItem
isAriaDisabled={!isPipelineSupported}
tooltipProps={{ content: PIPELINE_CREATE_RUN_TOOLTIP_ARGO_ERROR }}
key="create-run"
onClick={() =>
navigate(
pipelineVersionCreateRunRoute(
namespace,
pipeline?.pipeline_id,
pipelineVersion?.pipeline_version_id,
),
{
state: { lastPipeline: pipeline, lastVersion: pipelineVersion },
},
)
}
>
Create run
</DropdownItem>,
<DropdownItem
isAriaDisabled={!isPipelineSupported}
tooltipProps={{ content: PIPELINE_CREATE_SCHEDULE_TOOLTIP_ARGO_ERROR }}
key="create-schedule"
onClick={() =>
navigate(
pipelineVersionCreateRecurringRunRoute(
namespace,
pipeline?.pipeline_id,
pipelineVersion?.pipeline_version_id,
),
{
state: { lastPipeline: pipeline, lastVersion: pipelineVersion },
},
)
}
>
Create schedule
</DropdownItem>,
...(pipeline && pipelineVersion
? [
<Divider key="separator-view" />,
<DropdownItem
key="view-runs"
onClick={() =>
navigate(
pipelineVersionRunsRoute(
namespace,
pipeline.pipeline_id,
pipelineVersion.pipeline_version_id,
),
{
state: { lastVersion: pipelineVersion },
},
)
}
>
View runs
</DropdownItem>,
<DropdownItem
key="view-schedules"
onClick={() =>
navigate(
pipelineVersionRecurringRunsRoute(
namespace,
pipeline.pipeline_id,
pipelineVersion.pipeline_version_id,
),
)
}
>
View schedules
</DropdownItem>,
]
: []),
<Divider key="separator-delete" />,
<DropdownItem key="delete-pipeline-version" onClick={() => onDelete()}>
Delete pipeline version
</DropdownItem>,
]}
</DropdownList>
</Dropdown>
{isVersionImportModalOpen && (
<PipelineVersionImportModal
existingPipeline={pipeline}
Expand Down
44 changes: 26 additions & 18 deletions ...ines/content/pipelinesDetails/pipelineRecurringRun/PipelineRecurringRunDetailsActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';

import {
Divider,
Dropdown,
DropdownItem,
DropdownSeparator,
DropdownToggle,
} from '@patternfly/react-core/deprecated';
import { Spinner } from '@patternfly/react-core';

DropdownList,
MenuToggle,
Spinner,
} from '@patternfly/react-core';
import { usePipelinesAPI } from '~/concepts/pipelines/context';
import { PipelineRecurringRunKFv2, RecurringRunStatus } from '~/concepts/pipelines/kfTypes';
import { cloneRecurringRunRoute } from '~/routes';
Expand Down Expand Up @@ -70,18 +70,26 @@ const PipelineRecurringRunDetailsActions: React.FC<PipelineRecurringRunDetailsAc

return (
<Dropdown
data-testid="pipeline-recurring-run-details-actions"
onSelect={() => setOpen(false)}
menuAppendTo={getDashboardMainContainer}
toggle={
<DropdownToggle toggleVariant="primary" onToggle={() => setOpen(!open)}>
onOpenChange={(isOpenChange) => setOpen(isOpenChange)}
shouldFocusToggleOnSelect
toggle={(toggleRef) => (
<MenuToggle
ref={toggleRef}
data-testid="pipeline-recurring-run-details-actions"
aria-label="Actions"
variant="primary"
onClick={() => setOpen(!open)}
isExpanded={open}
>
Actions
</DropdownToggle>
}
</MenuToggle>
)}
isOpen={open}
position="right"
dropdownItems={
!recurringRun
popperProps={{ position: 'right', appendTo: getDashboardMainContainer() }}
>
<DropdownList>
{!recurringRun
? []
: [
...(isPipelineSupported
Expand Down Expand Up @@ -113,15 +121,15 @@ const PipelineRecurringRunDetailsActions: React.FC<PipelineRecurringRunDetailsAc
>
Duplicate
</DropdownItem>,
<DropdownSeparator key="separator" />,
<Divider key="separator" />,
]
: []),
<DropdownItem key="delete-run" onClick={() => onDelete()}>
Delete
</DropdownItem>,
]
}
/>
]}
</DropdownList>
</Dropdown>
);
};

Expand Down
44 changes: 27 additions & 17 deletions ...src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import * as React from 'react';
import { Tooltip } from '@patternfly/react-core';
import {
Tooltip,
Divider,
Dropdown,
DropdownItem,
DropdownSeparator,
DropdownToggle,
} from '@patternfly/react-core/deprecated';
MenuToggle,
DropdownList,
} from '@patternfly/react-core';

import { useNavigate, useParams } from 'react-router-dom';
import { usePipelinesAPI } from '~/concepts/pipelines/context';
import useNotification from '~/utilities/useNotification';
Expand Down Expand Up @@ -56,18 +58,26 @@ const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({

return (
<Dropdown
data-testid="pipeline-run-details-actions"
onOpenChange={(isOpenChange) => setOpen(isOpenChange)}
shouldFocusToggleOnSelect
onSelect={() => setOpen(false)}
menuAppendTo={getDashboardMainContainer}
toggle={
<DropdownToggle toggleVariant="primary" onToggle={() => setOpen(!open)}>
toggle={(toggleRef) => (
<MenuToggle
data-testid="pipeline-run-details-actions"
ref={toggleRef}
variant="primary"
aria-label="Actions"
onClick={() => setOpen(!open)}
isExpanded={open}
>
Actions
</DropdownToggle>
}
</MenuToggle>
)}
isOpen={open}
position="right"
dropdownItems={
!run
popperProps={{ position: 'right', appendTo: getDashboardMainContainer() }}
>
<DropdownList>
{!run
? []
: [
...(isPipelineSupported
Expand Down Expand Up @@ -147,7 +157,7 @@ const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({
) : (
<React.Fragment key="restore-run" />
),
<DropdownSeparator key="separator" />,
<Divider key="separator" />,
]
: []),
!isRunActive ? (
Expand All @@ -159,9 +169,9 @@ const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({
<DropdownItem onClick={() => onArchive()}>Archive</DropdownItem>
</React.Fragment>
),
]
}
/>
]}
</DropdownList>
</Dropdown>
);
};

Expand Down
Loading

0 comments on commit c58d7a9

Please sign in to comment.