Skip to content

fix: Apply Minor changes to AppProjects Details Page and Tabs #159

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
aali309 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: Apply Minor changes to AppProjects Details Page and Tabs #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
982c393
Apply Minor changes to AppProjects Details Page and Tabs
aali309 Jan 15, 2026
278c641
Apply Keith's review changes && fix long group names being truncted
aali309 Jan 20, 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
8 changes: 7 additions & 1 deletion locales/en/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
"Allow/Deny": "Allow/Deny",
"ArgoCD AppProject": "ArgoCD AppProject",
"There was an error retrieving the AppProject. Check your connection and reload the page.": "There was an error retrieving the AppProject. Check your connection and reload the page.",
"Policy Role": "Role",
"Policy Resource Type": "Resource Type",
"Policy Permission": "Permission",
"Policy Object": "Object",
"Policy Effect": "Effect",
"No roles configured": "No roles configured",
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
"Groups": "Groups",
Expand Down Expand Up @@ -257,7 +262,7 @@
"No Argo Rollouts": "No Argo Rollouts",
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
"Argo Rollouts": "Argo Rollouts",
"Create Rollout": "Create Rollout",
"Pods": "Pods",
Expand Down Expand Up @@ -287,6 +292,7 @@
"Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand Down
8 changes: 7 additions & 1 deletion locales/ja/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
"Allow/Deny": "Allow/Deny",
"ArgoCD AppProject": "ArgoCD AppProject",
"There was an error retrieving the AppProject. Check your connection and reload the page.": "There was an error retrieving the AppProject. Check your connection and reload the page.",
"Policy Role": "Policy Role",
"Policy Resource Type": "Policy Resource Type",
"Policy Permission": "Policy Permission",
"Policy Object": "Policy Object",
"Policy Effect": "Policy Effect",
"No roles configured": "No roles configured",
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
"Groups": "Groups",
Expand Down Expand Up @@ -257,7 +262,7 @@
"No Argo Rollouts": "No Argo Rollouts",
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
"Argo Rollouts": "Argo Rollouts",
"Create Rollout": "Create Rollout",
"Pods": "Pods",
Expand Down Expand Up @@ -287,6 +292,7 @@
"Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand Down
8 changes: 7 additions & 1 deletion locales/ko/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
"Allow/Deny": "Allow/Deny",
"ArgoCD AppProject": "ArgoCD AppProject",
"There was an error retrieving the AppProject. Check your connection and reload the page.": "There was an error retrieving the AppProject. Check your connection and reload the page.",
"Policy Role": "Policy Role",
"Policy Resource Type": "Policy Resource Type",
"Policy Permission": "Policy Permission",
"Policy Object": "Policy Object",
"Policy Effect": "Policy Effect",
"No roles configured": "No roles configured",
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
"Groups": "Groups",
Expand Down Expand Up @@ -257,7 +262,7 @@
"No Argo Rollouts": "No Argo Rollouts",
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
"Argo Rollouts": "Argo Rollouts",
"Create Rollout": "Create Rollout",
"Pods": "Pods",
Expand Down Expand Up @@ -287,6 +292,7 @@
"Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand Down
8 changes: 7 additions & 1 deletion locales/zh/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@
"Allow/Deny": "Allow/Deny",
"ArgoCD AppProject": "ArgoCD AppProject",
"There was an error retrieving the AppProject. Check your connection and reload the page.": "There was an error retrieving the AppProject. Check your connection and reload the page.",
"Policy Role": "Policy Role",
"Policy Resource Type": "Policy Resource Type",
"Policy Permission": "Policy Permission",
"Policy Object": "Policy Object",
"Policy Effect": "Policy Effect",
"No roles configured": "No roles configured",
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
"Groups": "Groups",
Expand Down Expand Up @@ -257,7 +262,7 @@
"No Argo Rollouts": "No Argo Rollouts",
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
"Argo Rollouts": "Argo Rollouts",
"Create Rollout": "Create Rollout",
"Pods": "Pods",
Expand Down Expand Up @@ -287,6 +292,7 @@
"Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand Down
112 changes: 30 additions & 82 deletions src/gitops/components/project/ProjectAllowDenyTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,22 @@ import {
Card,
CardBody,
CardHeader,
Flex,
FlexItem,
Grid,
GridItem,
List,
ListItem,
PageSection,
PageSectionVariants,
Panel,
Popover,
Title,
} from '@patternfly/react-core';
import { QuestionCircleIcon } from '@patternfly/react-icons';

import { AppProjectKind } from '../../models/AppProjectModel';
import { ArgoServer, getArgoServerForProject } from '../../utils/gitops';
import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
import { getDisplayValue, isDenyRule } from '../../utils/project-utils';
import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
import { FieldLevelHelp } from '../shared/FieldLevelHelp';

import DestinationsList from './DestinationsList';
import ResourceAllowDenyList from './ResourceAllowDenyList';
Expand Down Expand Up @@ -98,40 +95,17 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {

return (
<>
<PageSection variant={PageSectionVariants.default} hasShadowTop={true}>
<Flex
justifyContent={{ default: 'justifyContentSpaceBetween' }}
alignItems={{ default: 'alignItemsCenter' }}
>
<FlexItem>
<Flex alignItems={{ default: 'alignItemsCenter' }}>
<FlexItem>
<Title headingLevel="h2" className="co-section-heading">
{t('Allowed Sources')}
</Title>
</FlexItem>
<FlexItem>
<Popover
headerContent={<div>{t('Allowed Sources')}</div>}
bodyContent={<div>{t('Allowed Sources help')}</div>}
>
<QuestionCircleIcon
style={{
marginLeft: '8px',
cursor: 'pointer',
color: 'var(--pf-v5-global--Color--200)',
}}
/>
</Popover>
</FlexItem>
</Flex>
</FlexItem>
{argoCDUrl && (
<FlexItem>
<ArgoCDLink href={argoCDUrl} />
</FlexItem>
)}
</Flex>
<PageSection
variant={PageSectionVariants.default}
className="co-m-pane__body co-m-pane__body--section-heading"
hasShadowTop={true}
>
<FieldLevelHelp title={t('Allowed Sources')} helpText={t('Allowed Sources help')} />
{argoCDUrl && (
<div style={{ marginTop: '8px' }}>
<ArgoCDLink href={argoCDUrl} />
</div>
)}
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
<Grid hasGutter>
<GridItem span={12} md={6}>
Expand All @@ -154,28 +128,15 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
</Panel>
</PageSection>

<PageSection variant={PageSectionVariants.default} hasShadowTop={true}>
<Flex alignItems={{ default: 'alignItemsCenter' }}>
<FlexItem>
<Title headingLevel="h2" className="co-section-heading">
{t('Allowed Destinations')}
</Title>
</FlexItem>
<FlexItem>
<Popover
headerContent={<div>{t('Allowed Destinations')}</div>}
bodyContent={<div>{t('Allowed Destinations help')}</div>}
>
<QuestionCircleIcon
style={{
marginLeft: '8px',
cursor: 'pointer',
color: 'var(--pf-v5-global--Color--200)',
}}
/>
</Popover>
</FlexItem>
</Flex>
<PageSection
variant={PageSectionVariants.default}
className="co-m-pane__body co-m-pane__body--section-heading"
hasShadowTop={true}
>
<FieldLevelHelp
title={t('Allowed Destinations')}
helpText={t('Allowed Destinations help')}
/>
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
<Grid hasGutter>
<GridItem>
Expand All @@ -189,28 +150,15 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
</Panel>
</PageSection>

<PageSection hasShadowTop={true} variant={PageSectionVariants.default}>
<Flex alignItems={{ default: 'alignItemsCenter' }}>
<FlexItem>
<Title headingLevel="h2" className="co-section-heading">
{t('Resource Allow/Deny Lists')}
</Title>
</FlexItem>
<FlexItem>
<Popover
headerContent={<div>{t('Resource Allow/Deny Lists')}</div>}
bodyContent={<div>{t('Resource Allow/Deny Lists help')}</div>}
>
<QuestionCircleIcon
style={{
marginLeft: '8px',
cursor: 'pointer',
color: 'var(--pf-v5-global--Color--200)',
}}
/>
</Popover>
</FlexItem>
</Flex>
<PageSection
hasShadowTop={true}
variant={PageSectionVariants.default}
className="co-m-pane__body co-m-pane__body--section-heading"
>
<FieldLevelHelp
title={t('Resource Allow/Deny Lists')}
helpText={t('Resource Allow/Deny Lists help')}
/>
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
<Grid hasGutter>
<GridItem span={12} md={6} lg={3}>
Expand Down
90 changes: 68 additions & 22 deletions src/gitops/components/project/ProjectRolesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@ import {
Badge,
EmptyState,
EmptyStateBody,
Flex,
FlexItem,
PageSection,
Title,
Tooltip,
} from '@patternfly/react-core';
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
import { CubesIcon } from '@patternfly/react-icons';
Expand All @@ -22,6 +21,59 @@ import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';

/**
* Parses an Argo CD policy string and returns a formatted React element for tooltip
* Policy format: p, <subject>, <resource>, <action>, <object>, <effect>
* Example: "p, proj:myproject:myrole, applications, get, myproject/*, allow"
*/
const formatPolicyDescription = (policy: string, t: (key: string) => string): React.ReactNode => {
const parts = policy.split(',').map((p) => p.trim());

// If it doesn't follow the standard format, return as-is
if (parts.length < 6 || parts[0] !== 'p') {
return <div>{policy}</div>;
}

const [, subject, resource, action, object, effect] = parts;

return (
<div style={{ textAlign: 'left', maxWidth: '350px' }}>
<div style={{ marginBottom: '4px' }}>
<strong>{t('Policy Role')}:</strong> {subject}
</div>
<div style={{ marginBottom: '4px' }}>
<strong>{t('Policy Resource Type')}:</strong> {resource}
</div>
<div style={{ marginBottom: '4px' }}>
<strong>{t('Policy Permission')}:</strong> {action}
</div>
<div style={{ marginBottom: '4px' }}>
<strong>{t('Policy Object')}:</strong> {object}
</div>
<div>
<strong>{t('Policy Effect')}:</strong>{' '}
{effect === 'allow' ? (
<>
<i
className="fas fa-check-circle"
style={{ color: 'var(--pf-v5-global--success-color--100)' }}
/>{' '}
{t('Allow')}
</>
) : (
<>
<i
className="fas fa-times-circle"
style={{ color: 'var(--pf-v5-global--danger-color--100)' }}
/>{' '}
{t('Deny')}
</>
)}
</div>
</div>
);
};

type ProjectRolesTabProps = RouteComponentProps<{ ns: string; name: string }> & {
obj?: AppProjectKind;
};
Expand Down Expand Up @@ -81,21 +133,10 @@ const ProjectRolesTab: React.FC<ProjectRolesTabProps> = ({ obj }) => {

return (
<PageSection>
<Flex
justifyContent={{ default: 'justifyContentSpaceBetween' }}
alignItems={{ default: 'alignItemsCenter' }}
>
<FlexItem>
<Title headingLevel="h2" className="co-section-heading">
{t('Roles')}
</Title>
</FlexItem>
{argoCDUrl && (
<FlexItem>
<ArgoCDLink href={argoCDUrl} />
</FlexItem>
)}
</Flex>
<Title headingLevel="h2" className="co-section-heading">
{t('Roles')}
</Title>
{argoCDUrl && <ArgoCDLink href={argoCDUrl} />}
<GitOpsDataViewTable
columns={columnsDV}
rows={rows}
Expand Down Expand Up @@ -242,11 +283,16 @@ const useRolesRowsDV = (roles: Role[], t: (key: string) => string): DataViewTr[]
cell:
role.policies && role.policies.length > 0 ? (
<div>
{role.policies.map((policy, idx) => (
<Badge key={idx} isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
{policy}
</Badge>
))}
{role.policies.map((policy, idx) => {
const formattedDescription = formatPolicyDescription(policy, t);
return (
<Tooltip key={idx} content={formattedDescription}>
<Badge isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
{policy}
</Badge>
</Tooltip>
);
})}
</div>
) : (
'-'
Expand Down
Loading