Skip to content

Commit 966fc7f

Browse files
keithchongkeithchong
authored
Merge pull request #159 from aali309/MinorchangesToDetailsPage
fix: Apply Minor changes to AppProjects Details Page and Tabs
2 parents 3ef81ba + 278c641 commit 966fc7f

File tree

12 files changed

+276
-150
lines changed

12 files changed

+276
-150
lines changed

‎locales/en/plugin__gitops-plugin.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,11 @@
207207
"Allow/Deny": "Allow/Deny",
208208
"ArgoCD AppProject": "ArgoCD AppProject",
209209
"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.",
210+
"Policy Role": "Role",
211+
"Policy Resource Type": "Resource Type",
212+
"Policy Permission": "Permission",
213+
"Policy Object": "Object",
214+
"Policy Effect": "Effect",
210215
"No roles configured": "No roles configured",
211216
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
212217
"Groups": "Groups",
@@ -257,7 +262,7 @@
257262
"No Argo Rollouts": "No Argo Rollouts",
258263
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
259264
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
260-
"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.",
265+
"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.",
261266
"Argo Rollouts": "Argo Rollouts",
262267
"Create Rollout": "Create Rollout",
263268
"Pods": "Pods",
@@ -287,6 +292,7 @@
287292
"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.",
288293
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
289294
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
295+
"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.",
290296
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
291297
"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.",
292298
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

‎locales/ja/plugin__gitops-plugin.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,11 @@
207207
"Allow/Deny": "Allow/Deny",
208208
"ArgoCD AppProject": "ArgoCD AppProject",
209209
"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.",
210+
"Policy Role": "Policy Role",
211+
"Policy Resource Type": "Policy Resource Type",
212+
"Policy Permission": "Policy Permission",
213+
"Policy Object": "Policy Object",
214+
"Policy Effect": "Policy Effect",
210215
"No roles configured": "No roles configured",
211216
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
212217
"Groups": "Groups",
@@ -257,7 +262,7 @@
257262
"No Argo Rollouts": "No Argo Rollouts",
258263
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
259264
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
260-
"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.",
265+
"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.",
261266
"Argo Rollouts": "Argo Rollouts",
262267
"Create Rollout": "Create Rollout",
263268
"Pods": "Pods",
@@ -287,6 +292,7 @@
287292
"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.",
288293
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
289294
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
295+
"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.",
290296
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
291297
"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.",
292298
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

‎locales/ko/plugin__gitops-plugin.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,11 @@
207207
"Allow/Deny": "Allow/Deny",
208208
"ArgoCD AppProject": "ArgoCD AppProject",
209209
"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.",
210+
"Policy Role": "Policy Role",
211+
"Policy Resource Type": "Policy Resource Type",
212+
"Policy Permission": "Policy Permission",
213+
"Policy Object": "Policy Object",
214+
"Policy Effect": "Policy Effect",
210215
"No roles configured": "No roles configured",
211216
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
212217
"Groups": "Groups",
@@ -257,7 +262,7 @@
257262
"No Argo Rollouts": "No Argo Rollouts",
258263
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
259264
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
260-
"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.",
265+
"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.",
261266
"Argo Rollouts": "Argo Rollouts",
262267
"Create Rollout": "Create Rollout",
263268
"Pods": "Pods",
@@ -287,6 +292,7 @@
287292
"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.",
288293
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
289294
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
295+
"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.",
290296
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
291297
"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.",
292298
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

‎locales/zh/plugin__gitops-plugin.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,11 @@
207207
"Allow/Deny": "Allow/Deny",
208208
"ArgoCD AppProject": "ArgoCD AppProject",
209209
"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.",
210+
"Policy Role": "Policy Role",
211+
"Policy Resource Type": "Policy Resource Type",
212+
"Policy Permission": "Policy Permission",
213+
"Policy Object": "Policy Object",
214+
"Policy Effect": "Policy Effect",
210215
"No roles configured": "No roles configured",
211216
"This AppProject does not have any roles configured.": "This AppProject does not have any roles configured.",
212217
"Groups": "Groups",
@@ -257,7 +262,7 @@
257262
"No Argo Rollouts": "No Argo Rollouts",
258263
"There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
259264
"There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
260-
"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.",
265+
"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.",
261266
"Argo Rollouts": "Argo Rollouts",
262267
"Create Rollout": "Create Rollout",
263268
"Pods": "Pods",
@@ -287,6 +292,7 @@
287292
"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.",
288293
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
289294
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
295+
"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.",
290296
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
291297
"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.",
292298
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

‎src/gitops/components/project/ProjectAllowDenyTab.tsx‎

Lines changed: 30 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,22 @@ import {
77
Card,
88
CardBody,
99
CardHeader,
10-
Flex,
11-
FlexItem,
1210
Grid,
1311
GridItem,
1412
List,
1513
ListItem,
1614
PageSection,
1715
PageSectionVariants,
1816
Panel,
19-
Popover,
2017
Title,
2118
} from '@patternfly/react-core';
22-
import { QuestionCircleIcon } from '@patternfly/react-icons';
2319

2420
import { AppProjectKind } from '../../models/AppProjectModel';
2521
import { ArgoServer, getArgoServerForProject } from '../../utils/gitops';
2622
import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
2723
import { getDisplayValue, isDenyRule } from '../../utils/project-utils';
2824
import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
25+
import { FieldLevelHelp } from '../shared/FieldLevelHelp';
2926

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

9996
return (
10097
<>
101-
<PageSection variant={PageSectionVariants.default} hasShadowTop={true}>
102-
<Flex
103-
justifyContent={{ default: 'justifyContentSpaceBetween' }}
104-
alignItems={{ default: 'alignItemsCenter' }}
105-
>
106-
<FlexItem>
107-
<Flex alignItems={{ default: 'alignItemsCenter' }}>
108-
<FlexItem>
109-
<Title headingLevel="h2" className="co-section-heading">
110-
{t('Allowed Sources')}
111-
</Title>
112-
</FlexItem>
113-
<FlexItem>
114-
<Popover
115-
headerContent={<div>{t('Allowed Sources')}</div>}
116-
bodyContent={<div>{t('Allowed Sources help')}</div>}
117-
>
118-
<QuestionCircleIcon
119-
style={{
120-
marginLeft: '8px',
121-
cursor: 'pointer',
122-
color: 'var(--pf-v5-global--Color--200)',
123-
}}
124-
/>
125-
</Popover>
126-
</FlexItem>
127-
</Flex>
128-
</FlexItem>
129-
{argoCDUrl && (
130-
<FlexItem>
131-
<ArgoCDLink href={argoCDUrl} />
132-
</FlexItem>
133-
)}
134-
</Flex>
98+
<PageSection
99+
variant={PageSectionVariants.default}
100+
className="co-m-pane__body co-m-pane__body--section-heading"
101+
hasShadowTop={true}
102+
>
103+
<FieldLevelHelp title={t('Allowed Sources')} helpText={t('Allowed Sources help')} />
104+
{argoCDUrl && (
105+
<div style={{ marginTop: '8px' }}>
106+
<ArgoCDLink href={argoCDUrl} />
107+
</div>
108+
)}
135109
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
136110
<Grid hasGutter>
137111
<GridItem span={12} md={6}>
@@ -154,28 +128,15 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
154128
</Panel>
155129
</PageSection>
156130

157-
<PageSection variant={PageSectionVariants.default} hasShadowTop={true}>
158-
<Flex alignItems={{ default: 'alignItemsCenter' }}>
159-
<FlexItem>
160-
<Title headingLevel="h2" className="co-section-heading">
161-
{t('Allowed Destinations')}
162-
</Title>
163-
</FlexItem>
164-
<FlexItem>
165-
<Popover
166-
headerContent={<div>{t('Allowed Destinations')}</div>}
167-
bodyContent={<div>{t('Allowed Destinations help')}</div>}
168-
>
169-
<QuestionCircleIcon
170-
style={{
171-
marginLeft: '8px',
172-
cursor: 'pointer',
173-
color: 'var(--pf-v5-global--Color--200)',
174-
}}
175-
/>
176-
</Popover>
177-
</FlexItem>
178-
</Flex>
131+
<PageSection
132+
variant={PageSectionVariants.default}
133+
className="co-m-pane__body co-m-pane__body--section-heading"
134+
hasShadowTop={true}
135+
>
136+
<FieldLevelHelp
137+
title={t('Allowed Destinations')}
138+
helpText={t('Allowed Destinations help')}
139+
/>
179140
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
180141
<Grid hasGutter>
181142
<GridItem>
@@ -189,28 +150,15 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
189150
</Panel>
190151
</PageSection>
191152

192-
<PageSection hasShadowTop={true} variant={PageSectionVariants.default}>
193-
<Flex alignItems={{ default: 'alignItemsCenter' }}>
194-
<FlexItem>
195-
<Title headingLevel="h2" className="co-section-heading">
196-
{t('Resource Allow/Deny Lists')}
197-
</Title>
198-
</FlexItem>
199-
<FlexItem>
200-
<Popover
201-
headerContent={<div>{t('Resource Allow/Deny Lists')}</div>}
202-
bodyContent={<div>{t('Resource Allow/Deny Lists help')}</div>}
203-
>
204-
<QuestionCircleIcon
205-
style={{
206-
marginLeft: '8px',
207-
cursor: 'pointer',
208-
color: 'var(--pf-v5-global--Color--200)',
209-
}}
210-
/>
211-
</Popover>
212-
</FlexItem>
213-
</Flex>
153+
<PageSection
154+
hasShadowTop={true}
155+
variant={PageSectionVariants.default}
156+
className="co-m-pane__body co-m-pane__body--section-heading"
157+
>
158+
<FieldLevelHelp
159+
title={t('Resource Allow/Deny Lists')}
160+
helpText={t('Resource Allow/Deny Lists help')}
161+
/>
214162
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
215163
<Grid hasGutter>
216164
<GridItem span={12} md={6} lg={3}>

‎src/gitops/components/project/ProjectRolesTab.tsx‎

Lines changed: 68 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ import {
66
Badge,
77
EmptyState,
88
EmptyStateBody,
9-
Flex,
10-
FlexItem,
119
PageSection,
1210
Title,
11+
Tooltip,
1312
} from '@patternfly/react-core';
1413
import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
1514
import { CubesIcon } from '@patternfly/react-icons';
@@ -22,6 +21,59 @@ import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
2221
import { ArgoCDLink } from '../shared/ArgoCDLink/ArgoCDLink';
2322
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
2423

24+
/**
25+
* Parses an Argo CD policy string and returns a formatted React element for tooltip
26+
* Policy format: p, <subject>, <resource>, <action>, <object>, <effect>
27+
* Example: "p, proj:myproject:myrole, applications, get, myproject/*, allow"
28+
*/
29+
const formatPolicyDescription = (policy: string, t: (key: string) => string): React.ReactNode => {
30+
const parts = policy.split(',').map((p) => p.trim());
31+
32+
// If it doesn't follow the standard format, return as-is
33+
if (parts.length < 6 || parts[0] !== 'p') {
34+
return <div>{policy}</div>;
35+
}
36+
37+
const [, subject, resource, action, object, effect] = parts;
38+
39+
return (
40+
<div style={{ textAlign: 'left', maxWidth: '350px' }}>
41+
<div style={{ marginBottom: '4px' }}>
42+
<strong>{t('Policy Role')}:</strong> {subject}
43+
</div>
44+
<div style={{ marginBottom: '4px' }}>
45+
<strong>{t('Policy Resource Type')}:</strong> {resource}
46+
</div>
47+
<div style={{ marginBottom: '4px' }}>
48+
<strong>{t('Policy Permission')}:</strong> {action}
49+
</div>
50+
<div style={{ marginBottom: '4px' }}>
51+
<strong>{t('Policy Object')}:</strong> {object}
52+
</div>
53+
<div>
54+
<strong>{t('Policy Effect')}:</strong>{' '}
55+
{effect === 'allow' ? (
56+
<>
57+
<i
58+
className="fas fa-check-circle"
59+
style={{ color: 'var(--pf-v5-global--success-color--100)' }}
60+
/>{' '}
61+
{t('Allow')}
62+
</>
63+
) : (
64+
<>
65+
<i
66+
className="fas fa-times-circle"
67+
style={{ color: 'var(--pf-v5-global--danger-color--100)' }}
68+
/>{' '}
69+
{t('Deny')}
70+
</>
71+
)}
72+
</div>
73+
</div>
74+
);
75+
};
76+
2577
type ProjectRolesTabProps = RouteComponentProps<{ ns: string; name: string }> & {
2678
obj?: AppProjectKind;
2779
};
@@ -81,21 +133,10 @@ const ProjectRolesTab: React.FC<ProjectRolesTabProps> = ({ obj }) => {
81133

82134
return (
83135
<PageSection>
84-
<Flex
85-
justifyContent={{ default: 'justifyContentSpaceBetween' }}
86-
alignItems={{ default: 'alignItemsCenter' }}
87-
>
88-
<FlexItem>
89-
<Title headingLevel="h2" className="co-section-heading">
90-
{t('Roles')}
91-
</Title>
92-
</FlexItem>
93-
{argoCDUrl && (
94-
<FlexItem>
95-
<ArgoCDLink href={argoCDUrl} />
96-
</FlexItem>
97-
)}
98-
</Flex>
136+
<Title headingLevel="h2" className="co-section-heading">
137+
{t('Roles')}
138+
</Title>
139+
{argoCDUrl && <ArgoCDLink href={argoCDUrl} />}
99140
<GitOpsDataViewTable
100141
columns={columnsDV}
101142
rows={rows}
@@ -242,11 +283,16 @@ const useRolesRowsDV = (roles: Role[], t: (key: string) => string): DataViewTr[]
242283
cell:
243284
role.policies && role.policies.length > 0 ? (
244285
<div>
245-
{role.policies.map((policy, idx) => (
246-
<Badge key={idx} isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
247-
{policy}
248-
</Badge>
249-
))}
286+
{role.policies.map((policy, idx) => {
287+
const formattedDescription = formatPolicyDescription(policy, t);
288+
return (
289+
<Tooltip key={idx} content={formattedDescription}>
290+
<Badge isRead color="grey" className="pf-u-mr-sm pf-u-mb-sm">
291+
{policy}
292+
</Badge>
293+
</Tooltip>
294+
);
295+
})}
250296
</div>
251297
) : (
252298
'-'

0 commit comments

Comments
 (0)