Skip to content

EDM-4157: [SPUR] Add divider before Delete #706

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

Open
bugs-buddy-jira-ai-issue-solver wants to merge 4 commits into
base: main
Choose a base branch
from
+421 −289
Open

EDM-4157: [SPUR] Add divider before Delete #706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6280108
EDM-4157: [SPUR] Add divider before Delete
bugs-buddy-jira-ai-issue-solver[bot] Jun 17, 2026
64c144e
EDM-4157: Define common ways to separate danger actions
celdrake Jun 17, 2026
057963b
Addressing image export actions
celdrake Jun 17, 2026
b6bb5ca
EDM-4157: address PR feedback
bugs-buddy-jira-ai-issue-solver[bot] Jun 21, 2026
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
3 changes: 1 addition & 2 deletions libs/i18n/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,7 +344,7 @@
"Data": "Data",
"Actions dropdown": "Actions dropdown",
"This catalog is managed by a resource sync and cannot be directly removed. Either remove the catalog definition from the resource sync configuration, or delete the resource sync first.": "This catalog is managed by a resource sync and cannot be directly removed. Either remove the catalog definition from the resource sync configuration, or delete the resource sync first.",
"Remove": "Remove",
"Delete catalog": "Delete catalog",
"Category": "Category",
"Get started": "Get started",
"Help cards": "Help cards",
Expand All @@ -360,7 +360,6 @@
"Are you sure you want to delete the catalog <1>{catalogDisplayName}</1>?": "Are you sure you want to delete the catalog <1>{catalogDisplayName}</1>?",
"Checking if the catalog has items": "Checking if the catalog has items",
"Reload catalog items": "Reload catalog items",
"Delete catalog": "Delete catalog",
"Deprecate catalog item": "Deprecate catalog item",
"Are you sure you want to deprecate <1>{itemName}</1>?": "Are you sure you want to deprecate <1>{itemName}</1>?",
"Reason": "Reason",
Expand Down
39 changes: 22 additions & 17 deletions libs/ui-components/src/components/AuthProvider/AuthProviderDetails/AuthProviderDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { DropdownItem, DropdownList, Tab } from '@patternfly/react-core';
import { DropdownItem, Tab } from '@patternfly/react-core';

import { AuthProvider } from '@flightctl/types';

Expand All @@ -17,6 +17,7 @@ import { usePermissionsContext } from '../../common/PermissionsContext';
import YamlEditor from '../../common/CodeEditor/YamlEditor';
import { ProviderType } from '../../../types/extraTypes';
import TabsNav from '../../TabsNav/TabsNav';
import ActionsDropdownList from '../../common/ActionsDropdownList';

const authProviderDetailsPermissions = [
{ kind: RESOURCE.AUTH_PROVIDER, verb: VERB.DELETE },
Expand Down Expand Up @@ -56,26 +57,30 @@ const AuthProviderDetails = () => {
actions={
(canDelete || canEdit) && (
<DetailsPageActions>
<DropdownList>
<ActionsDropdownList>
{canEdit && (
<DropdownItem
onClick={() => navigate({ route: ROUTE.AUTH_PROVIDER_EDIT, postfix: authProviderId })}
isAriaDisabled={isOAuth2}
tooltipProps={
isOAuth2
? { content: <span>{t('OAuth2 providers can only be edited via the YAML editor')}</span> }
: undefined
}
>
{t('Edit authentication provider')}
</DropdownItem>
<ActionsDropdownList.Item>
<DropdownItem
onClick={() => navigate({ route: ROUTE.AUTH_PROVIDER_EDIT, postfix: authProviderId })}
isAriaDisabled={isOAuth2}
tooltipProps={
isOAuth2
? { content: <span>{t('OAuth2 providers can only be edited via the YAML editor')}</span> }
: undefined
}
>
{t('Edit authentication provider')}
</DropdownItem>
</ActionsDropdownList.Item>
)}
{canDelete && (
<DropdownItem onClick={() => setIsDeleteModalOpen(true)}>
{t('Delete authentication provider')}
</DropdownItem>
<ActionsDropdownList.Item isDanger>
<DropdownItem onClick={() => setIsDeleteModalOpen(true)}>
{t('Delete authentication provider')}
</DropdownItem>
</ActionsDropdownList.Item>
)}
</DropdownList>
</ActionsDropdownList>
</DetailsPageActions>
)
}
Expand Down
20 changes: 12 additions & 8 deletions libs/ui-components/src/components/AuthProvider/AuthProviderRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { DynamicAuthProviderSpec, ProviderType } from '../../types/extraTypes';
import { isOAuth2Provider } from './CreateAuthProvider/types';
import { getProviderTypeLabel } from './CreateAuthProvider/utils';
import { usePermissionsContext } from '../common/PermissionsContext';
import { buildAllDropdownActions } from '../common/ActionsDropdownList';

const authProviderPermissions = [
{ kind: RESOURCE.AUTH_PROVIDER, verb: VERB.UPDATE },
Expand All @@ -26,7 +27,7 @@ const AuthProviderRow = ({ provider, onDeleteClick }: { provider: AuthProvider;
const { checkPermissions } = usePermissionsContext();
const [canEdit, canDelete] = checkPermissions(authProviderPermissions);

const actions: IAction[] = [
const regularActions: IAction[] = [
{
title: t('View details'),
onClick: () => navigate({ route: ROUTE.AUTH_PROVIDER_DETAILS, postfix: providerName }),
Expand All @@ -35,7 +36,7 @@ const AuthProviderRow = ({ provider, onDeleteClick }: { provider: AuthProvider;

if (canEdit) {
const isDisableEdit = providerSpec.providerType === ProviderType.OAuth2;
actions.push({
regularActions.push({
title: t('Edit'),
isAriaDisabled: isDisableEdit,
tooltipProps: isDisableEdit
Expand All @@ -47,12 +48,15 @@ const AuthProviderRow = ({ provider, onDeleteClick }: { provider: AuthProvider;
});
}

if (canDelete) {
actions.push({
title: t('Delete'),
onClick: onDeleteClick,
});
}
const dangerActions: IAction[] = canDelete
? [
{
title: t('Delete'),
onClick: onDeleteClick,
},
]
: [];
const actions = buildAllDropdownActions(regularActions, dangerActions);

let url: string = 'N/A';
let urlTitle: string = '';
Expand Down
108 changes: 55 additions & 53 deletions libs/ui-components/src/components/Catalog/CatalogItemDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import * as React from 'react';
import * as semver from 'semver';
import ReactMarkdown from 'react-markdown';
import { Formik, useFormikContext } from 'formik';
import { ActionsColumn } from '@patternfly/react-table';
import { ActionsColumn, IAction } from '@patternfly/react-table';

import { useTranslation } from '../../hooks/useTranslation';
import { useFetch } from '../../hooks/useFetch';
Expand All @@ -38,6 +38,7 @@ import { getCatalogItemIcon, getFullContainerURI } from './utils';
import DeleteModal from '../modals/DeleteModal/DeleteModal';
import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
import WithTooltip from '../common/WithTooltip';
import { buildAllDropdownActions } from '../common/ActionsDropdownList';
import FlightCtlPageDrawer from '../common/FlightCtlPageDrawer';
import { InstallSpecFormik } from './InstallWizard/types';

Expand Down Expand Up @@ -129,63 +130,64 @@ const CatalogItemDetailsPanel = ({

const isManaged = !!item.metadata.owner;

const regularActions: IAction[] = [
{
title: isManaged ? t('View') : t('Edit'),
onClick: () => {
navigate({
route: ROUTE.CATALOG_EDIT_ITEM,
postfix: `${item.metadata.catalog}/${item.metadata.name}`,
});
},
},
isDeprecated
? {
title: t('Restore'),
onClick: () => setIsRestoreModalOpen(true),
tooltipProps: isManaged
? {
content: t(
"This catalog item is managed by a resource sync and cannot be directly restored. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.",
),
}
: undefined,
isAriaDisabled: isManaged,
}
: {
title: t('Deprecate'),
onClick: () => setIsDeprecateModalOpen(true),
tooltipProps: isManaged
? {
content: t(
"This catalog item is managed by a resource sync and cannot be directly deprecated. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.",
),
}
: undefined,
isAriaDisabled: isManaged,
},
];
const dangerActions: IAction[] = [
{
title: t('Delete'),
onClick: () => setIsDeleteModalOpen(true),
tooltipProps: isManaged
? {
content: t(
"This catalog item is managed by a resource sync and cannot be directly deleted. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.",
),
}
: undefined,
isAriaDisabled: isManaged,
},
];
const catalogItemActions = buildAllDropdownActions(regularActions, dangerActions);

const panelContent = (
<>
<DrawerHead>
<CatalogItemDetailsHeader item={item} />
<DrawerActions>
{showCatalogMgmt && (
<ActionsColumn
items={[
{
title: isManaged ? t('View') : t('Edit'),
onClick: () => {
navigate({
route: ROUTE.CATALOG_EDIT_ITEM,
postfix: `${item.metadata.catalog}/${item.metadata.name}`,
});
},
},
isDeprecated
? {
title: t('Restore'),
onClick: () => setIsRestoreModalOpen(true),
tooltipProps: isManaged
? {
content: t(
"This catalog item is managed by a resource sync and cannot be directly restored. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.",
),
}
: undefined,
isAriaDisabled: isManaged,
}
: {
title: t('Deprecate'),
onClick: () => setIsDeprecateModalOpen(true),
tooltipProps: isManaged
? {
content: t(
"This catalog item is managed by a resource sync and cannot be directly deprecated. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.",
),
}
: undefined,
isAriaDisabled: isManaged,
},
{
title: t('Delete'),
onClick: () => setIsDeleteModalOpen(true),
tooltipProps: isManaged
? {
content: t(
"This catalog item is managed by a resource sync and cannot be directly deleted. Either remove this catalog's definition from the resource sync configuration, or delete the resource sync first.",
),
}
: undefined,
isAriaDisabled: isManaged,
},
]}
/>
)}
{showCatalogMgmt && <ActionsColumn items={catalogItemActions} />}
<DrawerCloseButton onClose={onClose} />
</DrawerActions>
</DrawerHead>
Expand Down
40 changes: 22 additions & 18 deletions libs/ui-components/src/components/Catalog/CatalogPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
Divider,
Dropdown,
DropdownItem,
DropdownList,
EmptyStateActions,
EmptyStateBody,
EmptyStateFooter,
Expand Down Expand Up @@ -41,6 +40,7 @@ import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
import DeleteCatalogModal from './DeleteCatalogModal';
import CreateCatalogModal from './AddCatalogItemWizard/CreateCatalogModal';
import WithTooltip from '../common/WithTooltip';
import ActionsDropdownList from '../common/ActionsDropdownList';
import ResourceSyncImportStatus from '../ResourceSync/ResourceSyncImportStatus';
import CatalogLandingPage, { CatalogLandingPageContent, useLandingPagePermissions } from './CatalogLandingPage';
import PageWithPermissions from '../common/PageWithPermissions';
Expand Down Expand Up @@ -283,24 +283,28 @@ export const CatalogPageContent = ({
/>
)}
>
<DropdownList>
<DropdownItem onClick={() => setCatalogToEdit(c)}>
{!!c.metadata.owner || !canEditCatalog ? t('View') : t('Edit')}
</DropdownItem>
<WithTooltip
showTooltip={!!c.metadata.owner}
content={t(
'This catalog is managed by a resource sync and cannot be directly removed. Either remove the catalog definition from the resource sync configuration, or delete the resource sync first.',
)}
>
<DropdownItem
isAriaDisabled={!canDelete}
onClick={canDelete ? () => setCatalogToDelete(c) : undefined}
>
{t('Remove')}
<ActionsDropdownList>
<ActionsDropdownList.Item>
<DropdownItem onClick={() => setCatalogToEdit(c)}>
{!!c.metadata.owner || !canEditCatalog ? t('View catalog') : t('Edit catalog')}
</DropdownItem>
</WithTooltip>
</DropdownList>
</ActionsDropdownList.Item>
<ActionsDropdownList.Item isDanger>
<WithTooltip
showTooltip={!!c.metadata.owner}
content={t(
'This catalog is managed by a resource sync and cannot be directly removed. Either remove the catalog definition from the resource sync configuration, or delete the resource sync first.',
)}
>
<DropdownItem
isAriaDisabled={!canDelete}
onClick={canDelete ? () => setCatalogToDelete(c) : undefined}
>
{t('Delete catalog')}
</DropdownItem>
</WithTooltip>
</ActionsDropdownList.Item>
</ActionsDropdownList>
</Dropdown>
) : undefined,
};
Expand Down
Loading
Loading