UI implementation for allowing to have api policy and a common policy with same name and same version #809

RusJaI · 2024-10-15T11:55:48Z

Public fix for https://github.com/wso2-enterprise/wso2-apim-internal/issues/7352

sonarqubecloud · 2024-10-15T11:57:35Z

Quality Gate failed

Failed conditions
38.2% Duplication on New Code (required ≤ 3%)

ashera96 · 2025-01-02T11:02:42Z

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx

-    setDrawerOpen,
-    PolicyConfigurationEditDrawer
-}) => {
+const AttachedPolicyCardShared: FC<AttachedPolicyCardSharedProps> = (props) => {


Shall we revert back to the prop destructuring here?

Suggested change

const AttachedPolicyCardShared: FC<AttachedPolicyCardSharedProps> = (props) => {

const AttachedPolicyCardShared: FC<AttachedPolicyCardSharedProps> = ({

...

}) => {

This change was introduced based on the following considerations:

Data flows through this shared component to both the Global Policy UIs and the API/Common Policy UIs. In the context of Global Policy flows, the concept represented by listOriginatedFromCommonPolicies does not apply, and as a result, this prop is not passed. Furthermore, in the API/Common Policy flows, there are scenarios where listOriginatedFromCommonPolicies may not exist.

Due to the lack of a definitive way to distinguish between a Global Policy page and a standard policy page based solely on the value of listOriginatedFromCommonPolicies in the props, destructuring was removed. Instead, a check was introduced to verify whether the corresponding prop exists among the passed props, rather than relying on its value.

ashera96 · 2025-01-02T11:03:14Z

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx

+    const policyColor = Utils.stringToColor(props.policyObj.displayName);
+    const policyBackgroundColor = props.drawerOpen


Let's not do these modifications. Check and fix similar places as well.

Suggested change

const policyColor = Utils.stringToColor(props.policyObj.displayName);

const policyBackgroundColor = props.drawerOpen

const policyColor = Utils.stringToColor(policyObj.displayName);

const policyBackgroundColor = drawerOpen

relates to #809 (comment)

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx

ashera96 · 2025-01-02T11:06:55Z

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx

+
+    if ('listOriginatedFromCommonPolicies' in props) {
+        // Props were passed, use `listOriginatedFromCommonPolicies` and `isApiRevision`
+        let policyType =   "Common Policy";


Shall we make Common Policy and API Policy constants?

ashera96 · 2025-01-02T11:08:42Z

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx

+            }
+        }
+        return (
+            (<Root>


Can't we remove this (?

Suggested change

(<Root>

<Root>

ashera96 · 2025-01-02T11:10:27Z

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx

+// Combine the two using a union type
+type AttachedPolicyListSharedProps = AttachedPolicyListWithCommonProps | AttachedPolicyListWithoutCommonProps;
+
+const AttachedPolicyListShared: FC<AttachedPolicyListSharedProps> = (props) => {


Shall we destruct the props here?

Suggested change

const AttachedPolicyListShared: FC<AttachedPolicyListSharedProps> = (props) => {

const AttachedPolicyListShared: FC<AttachedPolicyListSharedProps> = ({

...

}) => {

relates to #809 (comment)

ashera96 · 2025-01-02T11:10:38Z

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx

+type AttachedPolicyListSharedProps = AttachedPolicyListWithCommonProps | AttachedPolicyListWithoutCommonProps;
+
+const AttachedPolicyListShared: FC<AttachedPolicyListSharedProps> = (props) => {
+    if ('listOriginatedFromCommonPolicies' in props) {


Check this as well

relates to #809 (comment)

ashera96 · 2025-01-02T11:11:06Z

...publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx

+                                currentPolicyList={props.currentPolicyList}
+                                setCurrentPolicyList={props.setCurrentPolicyList}
+                                currentFlow={props.currentFlow}
+                                target={props.target}
+                                verb={props.verb}
+                                allPolicies={props.allPolicies}
+                                isAPILevelPolicy={props.isAPILevelPolicy}
+                                listOriginatedFromCommonPolicies={props.listOriginatedFromCommonPolicies}
+                                isApiRevision={props.isApiRevision}


Shall we remove the prop from these instances?

relates to #809 (comment)

ashera96 · 2025-01-02T11:11:37Z

.../publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx

-                            <FormattedMessage
-                                id='Apis.Details.Policies.PoliciesExpansion.request.flow.title'
-                                defaultMessage='Request Flow'
+const PoliciesExpansionShared: FC<PoliciesExpansionSharedProps> = (props) => {


Destruct props

relates to #809 (comment)

ashera96 · 2025-01-02T11:12:07Z

...als/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx

+// Combine the two using a union type
+type PolicyDropzoneSharedProps = PolicyDropzoneWithCommonProps | PolicyDropzoneWithoutCommonProps;
+
+const PolicyDropzoneShared: FC<PolicyDropzoneSharedProps> = (props) => {


Destruct props

relates to #809 (comment)

lasanthaS · 2025-01-16T08:35:42Z

portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/Policies.tsx


            // Get all common policies and API specific policies
            setAllPolicies(mergedList);

-            let unionByPolicyDisplayName;
+            let apiPolicyByPolicyDisplayName;
+            let commonPolicyByPolicyDisplayName;
            if (showMultiVersionPolicies) {


This can be simplified as follows.

// Get the policies depending on the policy display name and version apiPolicyByPolicyDisplayName = [...apiSpecificPoliciesList .reduce((map: Map<string, Policy>, obj: Policy) => map.set((showMultiVersionPolicies ? obj.name + obj.version : obj.name), obj), new Map()).values()]; commonPolicyByPolicyDisplayName = [...commonPoliciesList .reduce((map: Map<string, Policy>, obj: Policy) => map.set((showMultiVersionPolicies ? obj.name + obj.version : obj.name), obj), new Map()).values()];

lasanthaS · 2025-01-16T08:36:35Z

portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/Policies.tsx


-            let filteredByGatewayTypeList = null;
            if (!isChoreoConnectEnabled) {


This can be simplified as,

let gatewayType = isChoreoConnectEnabled ? 'ChoreoConnect' : 'Synapse'; // Get relevant gateway supported policies filteredApiPolicyByGatewayTypeList = apiPolicyByPolicyDisplayName.filter( (policy: Policy) => policy.supportedGateways.includes(gatewayType)); filteredCommonPolicyByGatewayTypeList = commonPolicyByPolicyDisplayName.filter( (policy: Policy) => policy.supportedGateways.includes(gatewayType));

lasanthaS · 2025-01-16T08:37:06Z

portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/Policies.tsx

-            let filteredByAPITypeList = null;
+            let filteredApiPoliciesByAPITypeList = [];
+            let filteredCommonPoliciesByAPITypeList = [];
+
            if (api.type === "HTTP") {


This can be simplify as,

if (api.type === 'HTTP' || api.type === 'SOAP' || api.type === 'SOAPTOREST') { // Get HTTP, SOAP and SOAP to REST supported policies filteredApiPoliciesByAPITypeList = filteredApiPolicyByGatewayTypeList.filter( (policy: Policy) => policy.supportedApiTypes.includes(api.type)); filteredCommonPoliciesByAPITypeList = filteredCommonPolicyByGatewayTypeList.filter( (policy: Policy) => policy.supportedApiTypes.includes(api.type)); }

lasanthaS · 2025-01-16T08:44:50Z

.../publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx

+                                    defaultMessage='Request Flow'
+                                />
+                            </Typography>
+                            <props.FlowArrow arrowDirection='left' />


It's better to assign these properties to variables beforehand as follows.

const { FlowArrow, PolicyDropzone, requestFlowPolicyList } = props;

… with same name and same version

sonarqubecloud · 2025-01-27T06:36:23Z

Quality Gate failed

Failed conditions
37.7% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

RusJaI · 2025-01-28T05:35:43Z

a new PR #856 was added addressing the review comments. Hence closing this PR

RusJaI marked this pull request as draft October 15, 2024 11:56

RusJaI force-pushed the main branch from 513e5f6 to da24076 Compare December 18, 2024 09:57

RusJaI marked this pull request as ready for review December 24, 2024 20:21

RusJaI requested review from lasanthaS, Krishanx92, tharikaGitHub and piyumaldk as code owners December 24, 2024 20:21

RusJaI changed the title ~~[DRAFT]UI implementation for allowing to have api policy and a common policy with same name and same version~~ UI implementation for allowing to have api policy and a common policy with same name and same version Dec 24, 2024

ashera96 reviewed Jan 2, 2025

View reviewed changes

RusJaI force-pushed the main branch from cd50816 to d1611ee Compare January 3, 2025 09:12

RusJaI mentioned this pull request Jan 16, 2025

Conflicting Behaviour When API-Level and Common Policies Share the Same Name wso2/api-manager#3109

Open

lasanthaS requested changes Jan 16, 2025

View reviewed changes

RusJaI added 4 commits January 27, 2025 11:56

UI implementation for allowing to have api policy and a common policy…

a97063f

… with same name and same version

Fix compilation errors and missing changes from pulled changes

4fa4dab

fix appearance of the policy list

e297577

Address review comments

8a9e6ae

RusJaI force-pushed the main branch from 0aa37d6 to 8a9e6ae Compare January 27, 2025 06:34

RusJaI closed this Jan 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI implementation for allowing to have api policy and a common policy with same name and same version #809

UI implementation for allowing to have api policy and a common policy with same name and same version #809

RusJaI commented Oct 15, 2024 •

edited

Loading

sonarqubecloud bot commented Oct 15, 2024

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

ashera96 Jan 2, 2025

RusJaI Jan 3, 2025

lasanthaS Jan 16, 2025

lasanthaS Jan 16, 2025

lasanthaS Jan 16, 2025

lasanthaS Jan 16, 2025

sonarqubecloud bot commented Jan 27, 2025

RusJaI commented Jan 28, 2025

		const policyColor = Utils.stringToColor(props.policyObj.displayName);
		const policyBackgroundColor = props.drawerOpen


		let filteredByGatewayTypeList = null;
		if (!isChoreoConnectEnabled) {

UI implementation for allowing to have api policy and a common policy with same name and same version #809

UI implementation for allowing to have api policy and a common policy with same name and same version #809

Conversation

RusJaI commented Oct 15, 2024 • edited Loading

sonarqubecloud bot commented Oct 15, 2024

Quality Gate failed

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Jan 27, 2025

Quality Gate failed

RusJaI commented Jan 28, 2025

RusJaI commented Oct 15, 2024 •

edited

Loading