From ce266ccd25ec22c60e70c185348783412cd4fed3 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 24 Oct 2023 15:37:17 +0530 Subject: [PATCH 001/102] Adding the basic structure to global policies --- .../publisher/src/main/webapp/WEB-INF/web.xml | 1 + .../main/webapp/site/public/locales/en.json | 80 ++++++++++++++++++- .../webapp/site/public/locales/raw.en.json | 41 +++++++++- .../webapp/source/src/app/ProtectedApp.jsx | 2 + .../Base/Header/navbar/GlobalNavBar.jsx | 2 +- .../Base/Header/navbar/GlobalNavLinks.jsx | 13 +++ .../Create/CreateGlobalPolicy.tsx | 33 ++++++++ .../GlobalPolicies/Edit/EditGlobalPolicy.tsx | 33 ++++++++ .../GlobalPolicies/GlobalPolicies.tsx | 43 ++++++++++ .../GlobalPolicies/Listing/Listing.tsx | 34 ++++++++ .../src/app/components/Shared/CustomIcon.jsx | 47 +++++++++++ 11 files changed, 326 insertions(+), 3 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx diff --git a/portals/publisher/src/main/webapp/WEB-INF/web.xml b/portals/publisher/src/main/webapp/WEB-INF/web.xml index 14195538220..514f259158d 100644 --- a/portals/publisher/src/main/webapp/WEB-INF/web.xml +++ b/portals/publisher/src/main/webapp/WEB-INF/web.xml @@ -126,6 +126,7 @@ /scopes/* /settings/* /policies/* + /global-policies/* /api-products/* /service-catalog/* /login/* diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index ff89ac03024..e1a16793c20 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -1611,6 +1611,12 @@ "value": "Edit Complexity Values" } ], + "Apis.Details.Configuration.ApiKeyHeader.helper.text": [ + { + "type": 0, + "value": "ApiKey header name cannot contain spaces or special characters" + } + ], "Apis.Details.Configuration.AuthHeader.helper.text": [ { "type": 0, @@ -1635,6 +1641,12 @@ "value": "Backend Throughput" } ], + "Apis.Details.Configuration.Configuration.ApiKeyHeader.tooltip": [ + { + "type": 0, + "value": "The header name that is used to send the api key information. \"ApiKey\" is the default header." + } + ], "Apis.Details.Configuration.Configuration.AuthHeader.tooltip": [ { "type": 0, @@ -1665,6 +1677,12 @@ "value": "Edit API Endpoints" } ], + "Apis.Details.Configuration.Configuration.apiKey.header.label": [ + { + "type": 0, + "value": "ApiKey Header" + } + ], "Apis.Details.Configuration.Configuration.auth.header.label": [ { "type": 0, @@ -4627,6 +4645,12 @@ "value": "Endpoint provided" } ], + "Apis.Details.LifeCycle.CheckboxLabels.mandatory.properties.provided": [ + { + "type": 0, + "value": "Mandatory Properties provided" + } + ], "Apis.Details.LifeCycle.LifeCycle.change.not.allowed": [ { "type": 0, @@ -6113,13 +6137,25 @@ "value": "Show in devportal" } ], + "Apis.Details.Properties.\n Properties.editable.show.in.devporal": [ + { + "type": 0, + "value": "Show in devportal" + } + ], + "Apis.Details.Properties.Properties.\n show.add.property.custom.property.name": [ + { + "type": 1, + "value": "message" + } + ], "Apis.Details.Properties.Properties.\n show.add.property.invalid.error": [ { "type": 0, "value": "Invalid property name" } ], - "Apis.Details.Properties.Properties.\n show.add.property.property.name": [ + "Apis.Details.Properties.Properties.\n show.add.property.property.name": [ { "type": 0, "value": "Name" @@ -7919,6 +7955,24 @@ "value": "Context" } ], + "Apis.Listing.ApiThumb.owners": [ + { + "type": 0, + "value": "Owners" + } + ], + "Apis.Listing.ApiThumb.owners.business": [ + { + "type": 0, + "value": "Business" + } + ], + "Apis.Listing.ApiThumb.owners.technical": [ + { + "type": 0, + "value": "Technical" + } + ], "Apis.Listing.ApiThumb.version": [ { "type": 0, @@ -8565,6 +8619,12 @@ "value": "Policies" } ], + "Base.Header.navbar.GlobalNavBar.global.policies": [ + { + "type": 0, + "value": "Global Policies" + } + ], "Base.Header.navbar.GlobalNavBar.scopes": [ { "type": 0, @@ -8717,6 +8777,24 @@ "value": "Error while validating the imported schema" } ], + "GlobalPolicies.Create.CreateGlobalPolicy": [ + { + "type": 0, + "value": "Hi, I am the GlobalPolicies.Create.CreateGlobalPolicy component!" + } + ], + "GlobalPolicies.Edit.EditGlobalPolicy": [ + { + "type": 0, + "value": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" + } + ], + "GlobalPolicies.Listing.listing": [ + { + "type": 0, + "value": "Hi, I am the GlobalPolicies.Listing.listing component!" + } + ], "LoginDenied.logout": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 84090bf8c12..cc223117078 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -702,6 +702,9 @@ "Apis.Details.Configurartion.components.QueryAnalysis.edit": { "defaultMessage": "Edit Complexity Values" }, + "Apis.Details.Configuration.ApiKeyHeader.helper.text": { + "defaultMessage": "ApiKey header name cannot contain spaces or special characters" + }, "Apis.Details.Configuration.AuthHeader.helper.text": { "defaultMessage": "Authorization header name cannot contain spaces or special characters" }, @@ -714,6 +717,9 @@ "Apis.Details.Configuration.Components.MaxBackendTps.maximum.backend.throughput": { "defaultMessage": "Backend Throughput" }, + "Apis.Details.Configuration.Configuration.ApiKeyHeader.tooltip": { + "defaultMessage": "The header name that is used to send the api key information. \"ApiKey\" is the default header." + }, "Apis.Details.Configuration.Configuration.AuthHeader.tooltip": { "defaultMessage": "The header name that is used to send the authorization information. \"Authorization\" is the default header." }, @@ -729,6 +735,9 @@ "Apis.Details.Configuration.Configuration.Endpoints.edit.api.endpoints": { "defaultMessage": "Edit API Endpoints" }, + "Apis.Details.Configuration.Configuration.apiKey.header.label": { + "defaultMessage": "ApiKey Header" + }, "Apis.Details.Configuration.Configuration.auth.header.label": { "defaultMessage": "Authorization Header" }, @@ -2184,6 +2193,9 @@ "Apis.Details.LifeCycle.CheckboxLabels.endpoints.provided": { "defaultMessage": "Endpoint provided" }, + "Apis.Details.LifeCycle.CheckboxLabels.mandatory.properties.provided": { + "defaultMessage": "Mandatory Properties provided" + }, "Apis.Details.LifeCycle.LifeCycle.change.not.allowed": { "defaultMessage": "* You are not authorized to change the life cycle state of the API due to insufficient permissions" }, @@ -2907,10 +2919,16 @@ "Apis.Details.Properties.\n Properties.editable.show.in.devporal": { "defaultMessage": "Show in devportal" }, + "Apis.Details.Properties.\n Properties.editable.show.in.devporal": { + "defaultMessage": "Show in devportal" + }, + "Apis.Details.Properties.Properties.\n show.add.property.custom.property.name": { + "defaultMessage": "{message}" + }, "Apis.Details.Properties.Properties.\n show.add.property.invalid.error": { "defaultMessage": "Invalid property name" }, - "Apis.Details.Properties.Properties.\n show.add.property.property.name": { + "Apis.Details.Properties.Properties.\n show.add.property.property.name": { "defaultMessage": "Name" }, "Apis.Details.Properties.Properties.\n property.name.exists": { @@ -3771,6 +3789,15 @@ "Apis.Listing.ApiThumb.context": { "defaultMessage": "Context" }, + "Apis.Listing.ApiThumb.owners": { + "defaultMessage": "Owners" + }, + "Apis.Listing.ApiThumb.owners.business": { + "defaultMessage": "Business" + }, + "Apis.Listing.ApiThumb.owners.technical": { + "defaultMessage": "Technical" + }, "Apis.Listing.ApiThumb.version": { "defaultMessage": "Version" }, @@ -4092,6 +4119,9 @@ "Base.Header.navbar.GlobalNavBar.common.policies": { "defaultMessage": "Policies" }, + "Base.Header.navbar.GlobalNavBar.global.policies": { + "defaultMessage": "Global Policies" + }, "Base.Header.navbar.GlobalNavBar.scopes": { "defaultMessage": "Scopes" }, @@ -4164,6 +4194,15 @@ "Error.while.validating.the.imported.graphQLSchema": { "defaultMessage": "Error while validating the imported schema" }, + "GlobalPolicies.Create.CreateGlobalPolicy": { + "defaultMessage": "Hi, I am the GlobalPolicies.Create.CreateGlobalPolicy component!" + }, + "GlobalPolicies.Edit.EditGlobalPolicy": { + "defaultMessage": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" + }, + "GlobalPolicies.Listing.listing": { + "defaultMessage": "Hi, I am the GlobalPolicies.Listing.listing component!" + }, "LoginDenied.logout": { "defaultMessage": "Logout" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/ProtectedApp.jsx b/portals/publisher/src/main/webapp/source/src/app/ProtectedApp.jsx index 93bbe307cb5..95fa4e583cc 100644 --- a/portals/publisher/src/main/webapp/source/src/app/ProtectedApp.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/ProtectedApp.jsx @@ -37,6 +37,7 @@ import Configurations from 'Config'; import { QueryClientProviderX } from 'AppData/hooks/ReactQueryX'; import Scopes from 'AppComponents/Scopes/Scopes'; import CommonPolicies from 'AppComponents/CommonPolicies/CommonPolicies'; +import GlobalPolicies from 'AppComponents/GlobalPolicies/GlobalPolicies'; import merge from 'lodash/merge'; import User from './data/User'; import Utils from './data/Utils'; @@ -215,6 +216,7 @@ export default class Protected extends Component { + diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavBar.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavBar.jsx index 6c2d583c8d1..1c8e795d19c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavBar.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavBar.jsx @@ -78,7 +78,7 @@ const GlobalNavBar = (props) => { let isRootPage = false; const { pathname } = location; - if (/^\/(apis|api-products|scopes|policies|service-catalog)($|\/$)/g.test(pathname)) { + if (/^\/(apis|api-products|scopes|policies|global-policies|service-catalog)($|\/$)/g.test(pathname)) { isRootPage = true; } useEffect(() => { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx index 28c963cd5bc..2fc012ddf99 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx @@ -118,6 +118,19 @@ function GlobalNavLinks(props) { defaultMessage='Policies' /> + {(adminUser) + && ( + + + + )} {analyticsMenuEnabled && ( <> diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx new file mode 100644 index 00000000000..fe3cee698c8 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -0,0 +1,33 @@ +// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. + +// WSO2 Inc. licenses this file to you under the Apache License, +// Version 2.0 (the "License"); you may not use this file except +// in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, +// software distributed under the License is distributed on an +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +// KIND, either express or implied. See the License for the +// specific language governing permissions and limitations +// under the License. + +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +/** + * Global Policies Creating Page. + * @returns {JSX} Creating Page. + */ +const CreateGlobalPolicy: React.FC = () => { + return ( + + ); +}; + +export default CreateGlobalPolicy; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx new file mode 100644 index 00000000000..8a27bc84088 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx @@ -0,0 +1,33 @@ +// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. + +// WSO2 Inc. licenses this file to you under the Apache License, +// Version 2.0 (the "License"); you may not use this file except +// in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, +// software distributed under the License is distributed on an +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +// KIND, either express or implied. See the License for the +// specific language governing permissions and limitations +// under the License. + +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +/** + * Global Policies Editing Page. + * @returns {JSX} Editing Page. + */ +const EditGlobalPolicy: React.FC = () => { + return ( + + ); +}; + +export default EditGlobalPolicy; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx new file mode 100644 index 00000000000..bd0f8667af6 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx @@ -0,0 +1,43 @@ +// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. + +// WSO2 Inc. licenses this file to you under the Apache License, +// Version 2.0 (the "License"); you may not use this file except +// in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, +// software distributed under the License is distributed on an +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +// KIND, either express or implied. See the License for the +// specific language governing permissions and limitations +// under the License. + +import React from 'react'; +import { Route, Switch } from 'react-router-dom'; +import ResourceNotFound from 'AppComponents/Base/Errors/ResourceNotFound'; +import Listing from './Listing/Listing'; +import GlobalPoliciesCreate from './Create/CreateGlobalPolicy'; +import GlobalPoliciesEdit from './Edit/EditGlobalPolicy'; + +/** + * `Route` elements for shared Global Policies UI. + * @returns {TSX} Shared Global Policies routes. + */ +const GlobalPolicies = () => { + return ( + + + + + + + ); +}; + +export default GlobalPolicies; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx new file mode 100644 index 00000000000..2257010d668 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -0,0 +1,34 @@ +// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. + +// WSO2 Inc. licenses this file to you under the Apache License, +// Version 2.0 (the "License"); you may not use this file except +// in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, +// software distributed under the License is distributed on an +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +// KIND, either express or implied. See the License for the +// specific language governing permissions and limitations +// under the License. + +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +/** + * Global Policies Lisitng Page. + * @returns {JSX} Listing Page. + */ +const Listing: React.FC = () => { + return ( + + ); +}; + +export default Listing; + diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx index ab12c48f318..d051e809332 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx @@ -417,6 +417,53 @@ export default function CustomIcon(props) { ); + } else if (icon === 'global-policies') { + // a copy of normal policies for now + // this needs be changed to a new icon later + return ( + + ); } return null; } From b95c54d21ae75eb7206278b7069f447f2bd87b20 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 25 Oct 2023 09:59:31 +0530 Subject: [PATCH 002/102] Adding basic table structure --- .../main/webapp/site/public/locales/en.json | 6 - .../webapp/site/public/locales/raw.en.json | 3 - .../Listing/CommonPolicyGatewaySelector.tsx | 138 ++++++++ .../GlobalPolicies/Listing/Listing.tsx | 323 +++++++++++++++++- 4 files changed, 456 insertions(+), 14 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/CommonPolicyGatewaySelector.tsx diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index e1a16793c20..5f3c1914f9a 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8789,12 +8789,6 @@ "value": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" } ], - "GlobalPolicies.Listing.listing": [ - { - "type": 0, - "value": "Hi, I am the GlobalPolicies.Listing.listing component!" - } - ], "LoginDenied.logout": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index cc223117078..40304c3ddf6 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4200,9 +4200,6 @@ "GlobalPolicies.Edit.EditGlobalPolicy": { "defaultMessage": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" }, - "GlobalPolicies.Listing.listing": { - "defaultMessage": "Hi, I am the GlobalPolicies.Listing.listing component!" - }, "LoginDenied.logout": { "defaultMessage": "Logout" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/CommonPolicyGatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/CommonPolicyGatewaySelector.tsx new file mode 100644 index 00000000000..fad01021c3a --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/CommonPolicyGatewaySelector.tsx @@ -0,0 +1,138 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { HelpOutline } from '@material-ui/icons'; +import Tooltip from '@material-ui/core/Tooltip'; +import { Radio } from '@material-ui/core'; +import Paper from '@material-ui/core/Paper'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Grid from '@material-ui/core/Grid'; +import FormControl from '@material-ui/core/FormControl'; +import RadioGroup from '@material-ui/core/RadioGroup'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +const SupportedGatewayTypes = { + REGULAR: 'Regular Gateway', + CC: 'Choreo Connect', +}; + +interface CommonPolicyGatewaySelectorProps { + handleGatewayTypeSelection: (isCCEnabled: boolean) => void; + isAllowedToFilterCCPolicies: boolean; +} + + +/** + * Renders the Gateway selection section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Radio group for the API Gateway type for policies. + */ +const CommonPolicyGatewaySelector: FC = ({ + handleGatewayTypeSelection, + isAllowedToFilterCCPolicies +}) => { + + const handleRadioButtonSelection = (event: React.ChangeEvent) => { + if(event.target.value === SupportedGatewayTypes.CC) { + handleGatewayTypeSelection(true) + } else { + handleGatewayTypeSelection(false); + } + } + + let selectedGatewayType; + if (isAllowedToFilterCCPolicies) { + selectedGatewayType = SupportedGatewayTypes.CC; + } else { + selectedGatewayType = SupportedGatewayTypes.REGULAR; + } + + return ( + + + + + + + API Gateway + + + + + + + + + + + + } + label='Regular Gateway' + /> + + } + label='Choreo Connect' + /> + + + + + + + + ); +} + +export default CommonPolicyGatewaySelector; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 2257010d668..9541124cfae 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -14,21 +14,334 @@ // specific language governing permissions and limitations // under the License. -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { + Button, + Grid, + IconButton, + Tooltip, + Typography, + makeStyles, +} from '@material-ui/core'; +// import API from 'AppData/api'; +import { Progress } from 'AppComponents/Shared'; import { FormattedMessage } from 'react-intl'; +import AddCircle from '@material-ui/icons/AddCircle'; +import MUIDataTable, { MUIDataTableOptions } from 'mui-datatables'; +import { isRestricted } from 'AppData/AuthManager'; +import Box from '@material-ui/core/Box'; +import OnboardingMenuCard from 'AppComponents/Shared/Onboarding/OnboardingMenuCard'; +import Onboarding from 'AppComponents/Shared/Onboarding/Onboarding'; +import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; +import ResourceNotFoundError from 'AppComponents/Base/Errors/ResourceNotFoundError'; +import CONSTS from 'AppData/Constants'; +// import Delete from './DeletePolicy'; +import CommonPolicyGatewaySelector from './CommonPolicyGatewaySelector'; + +const useStyles = makeStyles((theme) => ({ + table: { + marginLeft: 'auto', + marginRight: 'auto', + '& > td[class^=MUIDataTableBodyCell-cellHide-]': { + display: 'none', + }, + '& .MUIDataTableBodyCell-cellHide-793': { + display: 'none', + }, + '& td': { + wordBreak: 'break-word', + }, + '& th': { + minWidth: '150px', + }, + }, + heading: { + flexGrow: 1, + marginTop: 10, + }, + titleWrapper: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginBottom: theme.spacing(2), + marginLeft: 'auto', + marginRight: 'auto', + }, + mainTitle: { + paddingLeft: 0, + }, + buttonIcon: { + marginRight: theme.spacing(1), + }, + icon: { + marginRight: theme.spacing(0.5), + }, +})); + +interface Policy { + id: string; + description: string; + displayName: string; + appliedGatewayLabels: string[]; +} /** * Global Policies Lisitng Page. * @returns {JSX} Listing Page. */ const Listing: React.FC = () => { + const classes = useStyles(); + // const { commonPolicyAddIcon } = theme.custom.landingPage.icons; + const [policies, setPolicies] = useState([]); + const [loading, setLoading] = useState(false); + const [notFound, setnotFound] = useState(false); + const [isAllowedToFilterCCPolicies, setIsAllowedToFilterCCPolicies] = useState(false); + + /** + * + * @param {boolean} isCCEnabled : Indicates whether Choreo Connect is selected or not. + */ + const handleGatewayTypeSelection = (isCCEnabled: boolean) => { + setIsAllowedToFilterCCPolicies(isCCEnabled); + } + + const fetchCommonPolicies = () => { + setLoading(true); + // const promisedPolicies = API.getCommonOperationPolicies(); + // hardcoded response + const promisedPolicies = Promise.resolve({ + count: 1, + list: [ + { + id: "121223q41-24141-124124124-12414", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter", + appliedGatewayLabels: ["Synapse"] + } + ], + pagination: { + offset: 0, + limit: 1, + total: 10, + next: "string", + previous: "string" + } + }); + // hardcoded response ends + promisedPolicies + .then((response) => { + setPolicies(response.list); + }) + .catch((error) => { + console.error(error); + setnotFound(true); + }) + .finally(() => { + setLoading(false); + }); + }; + + // Provides the gateway specific policies list. + const getPoliciesList = () => { + let gatewayType = CONSTS.GATEWAY_TYPE.synapse; + if (isAllowedToFilterCCPolicies) { + gatewayType = CONSTS.GATEWAY_TYPE.choreoConnect; + } + if (policies) { + return policies.filter((policy) => policy.appliedGatewayLabels.includes(gatewayType)); + } + return []; + } + + useEffect(() => { + fetchCommonPolicies(); + }, []); + + // policies?.sort((a: string, b:string) => a.displayName.localeCompare(b.displayName)); + + const policiesList = getPoliciesList(); + + const columns = [ + { + name: 'displayName', + label: 'Display Name', + }, + { + name: 'appliedGatewayLabels', + label: 'Applied Gateway Labels', + options: { + customBodyRender: (value: string[]) => value.join(', '), + }, + }, + { + name: 'actions', + label: 'Actions', + options: { + customBodyRender: () => , + }, + }, + ]; + + const options: MUIDataTableOptions = { + filterType: 'multiselect', + selectableRows: 'none', + filter: false, + sort: false, + print: false, + download: false, + viewColumns: false, + rowsPerPageOptions: [5, 10, 25, 50, 100], + }; + + // const options = { + // filterType: 'multiselect', + // selectableRows: 'none', + // title: false, + // filter: false, + // sort: false, + // print: false, + // download: false, + // viewColumns: false, + // customToolbar: false, + // rowsPerPageOptions: [5, 10, 25, 50, 100], + // }; + + if (policies && policies.length === 0) { + return ( + + } + subTitle={ + + } + > + + + ); + } + + if (loading) { + return ; + } + + if (notFound || !policies) { + return ; + } + return ( - +
+ + + + + + } + placement='bottom-start' + > + + + + + + + + {isRestricted([ + 'apim:api_create', + 'apim:api_manage', + 'apim:mediation_policy_create', + 'apim:mediation_policy_manage', + 'apim:api_mediation_policy_manage', + ]) && ( + + + + + + )} + + + + + + + +
); }; export default Listing; + + From 957f6f748942d9547cdc1a6c9df2f3b0efda893b Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 25 Oct 2023 14:34:26 +0530 Subject: [PATCH 003/102] Add data to the MUI table to list --- .../main/webapp/site/public/locales/en.json | 12 + .../webapp/site/public/locales/raw.en.json | 6 + .../GlobalPolicies/Listing/Listing.tsx | 209 +++++++++++++++--- 3 files changed, 194 insertions(+), 33 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 5f3c1914f9a..c0a2a77cf97 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8789,6 +8789,18 @@ "value": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" } ], + "GlobalPolicies.Listing.table.header.actions.delete": [ + { + "type": 0, + "value": "Delete" + } + ], + "GlobalPolicies.Listing.table.header.actions.view": [ + { + "type": 0, + "value": "View" + } + ], "LoginDenied.logout": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 40304c3ddf6..89bc4fe8f0e 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4200,6 +4200,12 @@ "GlobalPolicies.Edit.EditGlobalPolicy": { "defaultMessage": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" }, + "GlobalPolicies.Listing.table.header.actions.delete": { + "defaultMessage": "Delete" + }, + "GlobalPolicies.Listing.table.header.actions.view": { + "defaultMessage": "View" + }, "LoginDenied.logout": { "defaultMessage": "Logout" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 9541124cfae..80d93c6c180 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -23,6 +23,7 @@ import { Typography, makeStyles, } from '@material-ui/core'; +import Icon from '@material-ui/core/Icon'; // import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import { FormattedMessage } from 'react-intl'; @@ -37,7 +38,11 @@ import ResourceNotFoundError from 'AppComponents/Base/Errors/ResourceNotFoundErr import CONSTS from 'AppData/Constants'; // import Delete from './DeletePolicy'; import CommonPolicyGatewaySelector from './CommonPolicyGatewaySelector'; +// import { data } from 'msw/lib/types/context'; +/** + * Styles for the component + */ const useStyles = makeStyles((theme) => ({ table: { marginLeft: 'auto', @@ -78,6 +83,10 @@ const useStyles = makeStyles((theme) => ({ }, })); +/** + * Policy Interface + * Policy the the data model of the policies. + */ interface Policy { id: string; description: string; @@ -86,8 +95,8 @@ interface Policy { } /** - * Global Policies Lisitng Page. - * @returns {JSX} Listing Page. + * Global Policies Lisitng Page + * @returns {TSX} Listing Page. */ const Listing: React.FC = () => { const classes = useStyles(); @@ -96,18 +105,22 @@ const Listing: React.FC = () => { const [loading, setLoading] = useState(false); const [notFound, setnotFound] = useState(false); const [isAllowedToFilterCCPolicies, setIsAllowedToFilterCCPolicies] = useState(false); + // const [expandedRows, setExpandedRows] = useState<{ [key: string]: any | null }>({}); /** - * * @param {boolean} isCCEnabled : Indicates whether Choreo Connect is selected or not. */ const handleGatewayTypeSelection = (isCCEnabled: boolean) => { setIsAllowedToFilterCCPolicies(isCCEnabled); } + /** + * Get the data from the backend to the compoenent. + */ const fetchCommonPolicies = () => { setLoading(true); // const promisedPolicies = API.getCommonOperationPolicies(); + // hardcoded response const promisedPolicies = Promise.resolve({ count: 1, @@ -117,7 +130,91 @@ const Listing: React.FC = () => { description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter", - appliedGatewayLabels: ["Synapse"] + appliedGatewayLabels: ["Gateway1", "Gateway2", "Gateway3"] + }, + { + id: "121223q41-24141-124124124-12415", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter2", + appliedGatewayLabels: ["Gateway9", "Gateway7"] + }, + { + id: "121223q41-24141-124124124-12416", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter3", + appliedGatewayLabels: ["Gateway5", "Gateway7"] + }, + { + id: "121223q41-24141-124124124-12417", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter4", + appliedGatewayLabels: ["Gateway1", "Gateway2", "Gateway3"] + }, + { + id: "121223q41-24141-124124124-12418", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter5", + appliedGatewayLabels: ["Gateway2"] + }, + { + id: "121223q41-24141-124124124-12419", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter6", + appliedGatewayLabels: ["Gateway3"] + }, + { + id: "121223q41-24141-124124124-12420", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter7", + appliedGatewayLabels: ["Gateway1", "Gateway2", "Gateway3"] + }, + { + id: "121223q41-24141-124124124-12421", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter8", + appliedGatewayLabels: ["Gateway2"] + }, + { + id: "121223q41-24141-124124124-12422", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "aitem_type_setter9", + appliedGatewayLabels: ["Gateway1"] + }, + { + id: "121223q41-24141-124124124-12423", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter10", + appliedGatewayLabels: ["Gateway5", "Gateway7"] + }, + { + id: "121223q41-24141-124124124-12424", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter11", + appliedGatewayLabels: ["Gateway5", "Gateway6",] + }, + { + id: "121223q41-24141-124124124-12425", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter12", + appliedGatewayLabels: ["Gateway2", "Gateway3"] + }, + { + id: "121223q41-24141-124124124-12426", + description: "Set header value to the request with item type and " + + "response header set with served server name", + displayName: "item_type_setter13", + appliedGatewayLabels: ["Gateway1"] } ], pagination: { @@ -129,6 +226,7 @@ const Listing: React.FC = () => { } }); // hardcoded response ends + promisedPolicies .then((response) => { setPolicies(response.list); @@ -142,47 +240,92 @@ const Listing: React.FC = () => { }); }; - // Provides the gateway specific policies list. + /** + * Provides the gateway specific policies list. + * @returns {array} Return the policy list after filtering. + */ const getPoliciesList = () => { - let gatewayType = CONSTS.GATEWAY_TYPE.synapse; - if (isAllowedToFilterCCPolicies) { - gatewayType = CONSTS.GATEWAY_TYPE.choreoConnect; - } - if (policies) { - return policies.filter((policy) => policy.appliedGatewayLabels.includes(gatewayType)); - } - return []; + // let gatewayType = CONSTS.GATEWAY_TYPE.synapse; + // if (isAllowedToFilterCCPolicies) { + // gatewayType = CONSTS.GATEWAY_TYPE.choreoConnect; + // } + // if (policies) { + // return policies.filter((policy) => policy.appliedGatewayLabels.includes(gatewayType)); + // } + // return []; + return policies; } useEffect(() => { fetchCommonPolicies(); }, []); - // policies?.sort((a: string, b:string) => a.displayName.localeCompare(b.displayName)); + /** + * Sorting Policies + */ + policies?.sort((a: Policy, b: Policy) => a.displayName.localeCompare(b.displayName)); const policiesList = getPoliciesList(); + /** + * Columns for the MUI table. + */ const columns = [ { name: 'displayName', - label: 'Display Name', + label: 'Global Policy', }, { name: 'appliedGatewayLabels', - label: 'Applied Gateway Labels', - options: { - customBodyRender: (value: string[]) => value.join(', '), - }, + label: 'Deployed Gateways', }, { name: 'actions', label: 'Actions', options: { - customBodyRender: () => , + customBodyRender: () => { + return ( + + + + + ); + }, + filter: false, + sort: false, + label: ( + + ), }, }, ]; + /** + * Options for the MUI table. + */ const options: MUIDataTableOptions = { filterType: 'multiselect', selectableRows: 'none', @@ -192,21 +335,18 @@ const Listing: React.FC = () => { download: false, viewColumns: false, rowsPerPageOptions: [5, 10, 25, 50, 100], + expandableRows: true, + expandableRowsHeader: false, + expandableRowsOnClick: true, + renderExpandableRow: (rowData, rowMeta) => { + const gatewayLabels = policiesList[rowMeta.dataIndex].appliedGatewayLabels; + return gatewayLabels; + }, }; - // const options = { - // filterType: 'multiselect', - // selectableRows: 'none', - // title: false, - // filter: false, - // sort: false, - // print: false, - // download: false, - // viewColumns: false, - // customToolbar: false, - // rowsPerPageOptions: [5, 10, 25, 50, 100], - // }; - + /** + * If there are no policies, then show the onboarding page. + */ if (policies && policies.length === 0) { return ( { return ; } + /** + * MUI Table for the policies. + */ return (
Date: Wed, 25 Oct 2023 16:24:20 +0530 Subject: [PATCH 004/102] Refactor names --- .../main/webapp/site/public/locales/en.json | 42 +++++++++++++++++++ .../webapp/site/public/locales/raw.en.json | 21 ++++++++++ ...or.tsx => GlobalPolicyGatewaySelector.tsx} | 6 +-- .../GlobalPolicies/Listing/Listing.tsx | 35 ++++++++-------- 4 files changed, 84 insertions(+), 20 deletions(-) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/{CommonPolicyGatewaySelector.tsx => GlobalPolicyGatewaySelector.tsx} (97%) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index c0a2a77cf97..b8d42d4552c 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8789,12 +8789,54 @@ "value": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" } ], + "GlobalPolicies.Listing.onboarding.create.new": [ + { + "type": 0, + "value": "Let’s get started !" + } + ], + "GlobalPolicies.Listing.onboarding.policies.tooltip": [ + { + "type": 0, + "value": "Policies provide the capability to alter the behavior of API resources" + } + ], + "GlobalPolicies.Listing.policies.title.add.new.policy": [ + { + "type": 0, + "value": "Add New Policy" + } + ], + "GlobalPolicies.Listing.policies.title.name": [ + { + "type": 0, + "value": "Global Policies" + } + ], + "GlobalPolicies.Listing.policies.title.tooltip": [ + { + "type": 0, + "value": "This will add policies globaly to the gateways.Please navigate to the Policies tab under any desired APIif you want to add API / operation level policies" + } + ], + "GlobalPolicies.Listing.policies.title.update.not.allowed": [ + { + "type": 0, + "value": "*You are not authorized to manage policies due to insufficient permissions" + } + ], "GlobalPolicies.Listing.table.header.actions.delete": [ { "type": 0, "value": "Delete" } ], + "GlobalPolicies.Listing.table.header.actions.title": [ + { + "type": 0, + "value": "Actions" + } + ], "GlobalPolicies.Listing.table.header.actions.view": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 89bc4fe8f0e..df2a29eb82e 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4200,9 +4200,30 @@ "GlobalPolicies.Edit.EditGlobalPolicy": { "defaultMessage": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" }, + "GlobalPolicies.Listing.onboarding.create.new": { + "defaultMessage": "Let’s get started !" + }, + "GlobalPolicies.Listing.onboarding.policies.tooltip": { + "defaultMessage": "Policies provide the capability to alter the behavior of API resources" + }, + "GlobalPolicies.Listing.policies.title.add.new.policy": { + "defaultMessage": "Add New Policy" + }, + "GlobalPolicies.Listing.policies.title.name": { + "defaultMessage": "Global Policies" + }, + "GlobalPolicies.Listing.policies.title.tooltip": { + "defaultMessage": "This will add policies globaly to the gateways.Please navigate to the Policies tab under any desired APIif you want to add API / operation level policies" + }, + "GlobalPolicies.Listing.policies.title.update.not.allowed": { + "defaultMessage": "*You are not authorized to manage policies due to insufficient permissions" + }, "GlobalPolicies.Listing.table.header.actions.delete": { "defaultMessage": "Delete" }, + "GlobalPolicies.Listing.table.header.actions.title": { + "defaultMessage": "Actions" + }, "GlobalPolicies.Listing.table.header.actions.view": { "defaultMessage": "View" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/CommonPolicyGatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/GlobalPolicyGatewaySelector.tsx similarity index 97% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/CommonPolicyGatewaySelector.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/GlobalPolicyGatewaySelector.tsx index fad01021c3a..feba15695cd 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/CommonPolicyGatewaySelector.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/GlobalPolicyGatewaySelector.tsx @@ -34,7 +34,7 @@ const SupportedGatewayTypes = { CC: 'Choreo Connect', }; -interface CommonPolicyGatewaySelectorProps { +interface GlobalPolicyGatewaySelectorProps { handleGatewayTypeSelection: (isCCEnabled: boolean) => void; isAllowedToFilterCCPolicies: boolean; } @@ -45,7 +45,7 @@ interface CommonPolicyGatewaySelectorProps { * @param {JSON} props Input props from parent components. * @returns {TSX} Radio group for the API Gateway type for policies. */ -const CommonPolicyGatewaySelector: FC = ({ +const GlobalPolicyGatewaySelector: FC = ({ handleGatewayTypeSelection, isAllowedToFilterCCPolicies }) => { @@ -135,4 +135,4 @@ const CommonPolicyGatewaySelector: FC = ({ ); } -export default CommonPolicyGatewaySelector; +export default GlobalPolicyGatewaySelector; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 80d93c6c180..36d096c3c1f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -37,7 +37,7 @@ import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; import ResourceNotFoundError from 'AppComponents/Base/Errors/ResourceNotFoundError'; import CONSTS from 'AppData/Constants'; // import Delete from './DeletePolicy'; -import CommonPolicyGatewaySelector from './CommonPolicyGatewaySelector'; +import GlobalPolicyGatewaySelector from './GlobalPolicyGatewaySelector'; // import { data } from 'msw/lib/types/context'; /** @@ -117,9 +117,9 @@ const Listing: React.FC = () => { /** * Get the data from the backend to the compoenent. */ - const fetchCommonPolicies = () => { + const fetchGlobalPolicies = () => { setLoading(true); - // const promisedPolicies = API.getCommonOperationPolicies(); + // const promisedPolicies = API.getGlobalOperationPolicies(); // hardcoded response const promisedPolicies = Promise.resolve({ @@ -257,7 +257,7 @@ const Listing: React.FC = () => { } useEffect(() => { - fetchCommonPolicies(); + fetchGlobalPolicies(); }, []); /** @@ -315,7 +315,7 @@ const Listing: React.FC = () => { sort: false, label: ( ), @@ -352,13 +352,13 @@ const Listing: React.FC = () => { } subTitle={ { { className={classes.mainTitle} > } @@ -431,10 +432,10 @@ const Listing: React.FC = () => { - @@ -449,7 +450,7 @@ const Listing: React.FC = () => { { item > - From 698e125eb6731b8f1612df736c01b5559d3cf673 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 25 Oct 2023 16:56:57 +0530 Subject: [PATCH 005/102] Get enviroments as gateways --- .../GlobalPolicies/Listing/Listing.tsx | 45 +++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 36d096c3c1f..c547ec07632 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -24,7 +24,7 @@ import { makeStyles, } from '@material-ui/core'; import Icon from '@material-ui/core/Icon'; -// import API from 'AppData/api'; +import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import { FormattedMessage } from 'react-intl'; import AddCircle from '@material-ui/icons/AddCircle'; @@ -94,6 +94,19 @@ interface Policy { appliedGatewayLabels: string[]; } +interface Environment { + id: string; + name: string; + displayName: string; + type: string; + serverUrl: string; + provider: string; + showInApiConsole: boolean; + vhosts: any; + endpointURIs: any; + additionalProperties: any; +} + /** * Global Policies Lisitng Page * @returns {TSX} Listing Page. @@ -102,6 +115,7 @@ const Listing: React.FC = () => { const classes = useStyles(); // const { commonPolicyAddIcon } = theme.custom.landingPage.icons; const [policies, setPolicies] = useState([]); + const [environments, setEnvironments] = useState([]); const [loading, setLoading] = useState(false); const [notFound, setnotFound] = useState(false); const [isAllowedToFilterCCPolicies, setIsAllowedToFilterCCPolicies] = useState(false); @@ -240,6 +254,22 @@ const Listing: React.FC = () => { }); }; + const fetchSettings = () => { + setLoading(true); + const promisedSettings = API.getSettings(); + promisedSettings + .then((response: any) => { + setEnvironments(response.environment); + }) + .catch((error: any) => { + console.error(error); + setnotFound(true); + }) + .finally(() => { + setLoading(false); + }); + }; + /** * Provides the gateway specific policies list. * @returns {array} Return the policy list after filtering. @@ -258,6 +288,7 @@ const Listing: React.FC = () => { useEffect(() => { fetchGlobalPolicies(); + fetchSettings(); }, []); /** @@ -338,9 +369,15 @@ const Listing: React.FC = () => { expandableRows: true, expandableRowsHeader: false, expandableRowsOnClick: true, - renderExpandableRow: (rowData, rowMeta) => { - const gatewayLabels = policiesList[rowMeta.dataIndex].appliedGatewayLabels; - return gatewayLabels; + // renderExpandableRow: (rowData, rowMeta) => { + // const gatewayLabels = policiesList[rowMeta.dataIndex].appliedGatewayLabels; + // return gatewayLabels; + // }, + renderExpandableRow: () => { + const envNames = environments.map((env: any) => { + return env.name; + }); + return envNames; }, }; From 68c48c7065df02a752632f01ab21322bbc292fcf Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 27 Oct 2023 09:21:48 +0530 Subject: [PATCH 006/102] Add baisc implementation to deploy UI --- .../GlobalPolicies/Listing/Listing.tsx | 123 ++++++++++-------- 1 file changed, 72 insertions(+), 51 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index c547ec07632..49ef6d22390 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -22,6 +22,12 @@ import { Tooltip, Typography, makeStyles, + Chip, + TableContainer, + Table, + TableBody, + TableCell, + TableRow } from '@material-ui/core'; import Icon from '@material-ui/core/Icon'; import API from 'AppData/api'; @@ -29,7 +35,6 @@ import { Progress } from 'AppComponents/Shared'; import { FormattedMessage } from 'react-intl'; import AddCircle from '@material-ui/icons/AddCircle'; import MUIDataTable, { MUIDataTableOptions } from 'mui-datatables'; -import { isRestricted } from 'AppData/AuthManager'; import Box from '@material-ui/core/Box'; import OnboardingMenuCard from 'AppComponents/Shared/Onboarding/OnboardingMenuCard'; import Onboarding from 'AppComponents/Shared/Onboarding/Onboarding'; @@ -144,91 +149,91 @@ const Listing: React.FC = () => { description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter", - appliedGatewayLabels: ["Gateway1", "Gateway2", "Gateway3"] + appliedGatewayLabels: ["Production Gateway", "Default"] }, { id: "121223q41-24141-124124124-12415", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter2", - appliedGatewayLabels: ["Gateway9", "Gateway7"] + appliedGatewayLabels: ["Production Gateway", "Default"] }, { id: "121223q41-24141-124124124-12416", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter3", - appliedGatewayLabels: ["Gateway5", "Gateway7"] + appliedGatewayLabels: ["Production Gateway", "Default"] }, { id: "121223q41-24141-124124124-12417", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter4", - appliedGatewayLabels: ["Gateway1", "Gateway2", "Gateway3"] + appliedGatewayLabels: ["Production Gateway", "Default"] }, { id: "121223q41-24141-124124124-12418", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter5", - appliedGatewayLabels: ["Gateway2"] + appliedGatewayLabels: ["Production Gateway"] }, { id: "121223q41-24141-124124124-12419", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter6", - appliedGatewayLabels: ["Gateway3"] + appliedGatewayLabels: ["Production Gateway"] }, { id: "121223q41-24141-124124124-12420", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter7", - appliedGatewayLabels: ["Gateway1", "Gateway2", "Gateway3"] + appliedGatewayLabels: ["Production Gateway", "Default"] }, { id: "121223q41-24141-124124124-12421", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter8", - appliedGatewayLabels: ["Gateway2"] + appliedGatewayLabels: ["Production Gateway"] }, { id: "121223q41-24141-124124124-12422", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "aitem_type_setter9", - appliedGatewayLabels: ["Gateway1"] + appliedGatewayLabels: ["Production Gateway"] }, { id: "121223q41-24141-124124124-12423", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter10", - appliedGatewayLabels: ["Gateway5", "Gateway7"] + appliedGatewayLabels: ["Production Gateway", "Default"] }, { id: "121223q41-24141-124124124-12424", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter11", - appliedGatewayLabels: ["Gateway5", "Gateway6",] + appliedGatewayLabels: ["Production Gateway", "Default",] }, { id: "121223q41-24141-124124124-12425", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter12", - appliedGatewayLabels: ["Gateway2", "Gateway3"] + appliedGatewayLabels: ["Production Gateway", "Default"] }, { id: "121223q41-24141-124124124-12426", description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter13", - appliedGatewayLabels: ["Gateway1"] + appliedGatewayLabels: ["Production Gateway"] } ], pagination: { @@ -286,6 +291,20 @@ const Listing: React.FC = () => { return policies; } + /** + * Check if the gateway is deployed for the Golbal Policy. + * @param {string} gateway : Gateway. + * @param {string[]} appliedGatewayLabels : Applied Gateway Labels. + * @returns {boolean} Return true if deployed. + */ + const isDeployed = (gateway: string, appliedGatewayLabels: string[]) => { + // get global policy's appliedGatewayLabels + if (appliedGatewayLabels.includes(gateway)) { + return true; + } + return false; + } + useEffect(() => { fetchGlobalPolicies(); fetchSettings(); @@ -369,15 +388,35 @@ const Listing: React.FC = () => { expandableRows: true, expandableRowsHeader: false, expandableRowsOnClick: true, - // renderExpandableRow: (rowData, rowMeta) => { - // const gatewayLabels = policiesList[rowMeta.dataIndex].appliedGatewayLabels; - // return gatewayLabels; - // }, - renderExpandableRow: () => { - const envNames = environments.map((env: any) => { + renderExpandableRow: (rowData, rowMeta) => { + const gatewayList = environments.map((env: any) => { return env.name; }); - return envNames; + const rowIndex = rowMeta.dataIndex; + const policy = policiesList[rowIndex]; + return ( + <> + {policy.description} + + + + {gatewayList.map((gateway: string) => ( + + + + + + + + + ))} + +
+ + + ); }, }; @@ -407,13 +446,6 @@ const Listing: React.FC = () => { to={CONSTS.PATH_TEMPLATES.COMMON_POLICY_CREATE} name='Policies' // iconName={globalPolicyAddIcon} - disabled={isRestricted([ - 'apim:api_create', - 'apim:api_manage', - 'apim:mediation_policy_create', - 'apim:mediation_policy_manage', - 'apim:api_mediation_policy_manage', - ])} /> ); @@ -476,26 +508,18 @@ const Listing: React.FC = () => { defaultMessage='Add New Policy' /> - - {isRestricted([ - 'apim:api_create', - 'apim:api_manage', - 'apim:mediation_policy_create', - 'apim:mediation_policy_manage', - 'apim:api_mediation_policy_manage', - ]) && ( - - - - - - )} + + + + + + { }; export default Listing; - - - From 09891443922c0387cc82756e3c9df500672424f9 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 27 Oct 2023 15:21:32 +0530 Subject: [PATCH 007/102] Add UI functions for deploy if not deployed --- .../GlobalPolicies/Listing/Listing.tsx | 84 +++++++++++++------ 1 file changed, 60 insertions(+), 24 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 49ef6d22390..f332489b8cf 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -85,7 +85,7 @@ const useStyles = makeStyles((theme) => ({ }, icon: { marginRight: theme.spacing(0.5), - }, + } })); /** @@ -177,7 +177,7 @@ const Listing: React.FC = () => { description: "Set header value to the request with item type and " + "response header set with served server name", displayName: "item_type_setter5", - appliedGatewayLabels: ["Production Gateway"] + appliedGatewayLabels: [] }, { id: "121223q41-24141-124124124-12419", @@ -328,6 +328,26 @@ const Listing: React.FC = () => { { name: 'appliedGatewayLabels', label: 'Deployed Gateways', + options: { + customBodyRender: (value: string[] | undefined) => { + if (value && value.length > 0) { + return ( +
+ {value.map((gateway: string) => ( + + ))} +
+ ); + } else { + return "No deployed gateways"; + } + } + } }, { name: 'actions', @@ -394,28 +414,44 @@ const Listing: React.FC = () => { }); const rowIndex = rowMeta.dataIndex; const policy = policiesList[rowIndex]; - return ( - <> - {policy.description} - - - - {gatewayList.map((gateway: string) => ( - - - - - - - - - ))} - -
- - + return ( + + + + + Descrpiton : {policy.description} + + + + + + {gatewayList.map((gateway: string) => ( + + + + + + {isDeployed(gateway, policy.appliedGatewayLabels) ? ( + + ) : ( + + )} + + + ))} + +
+ + + + + ); }, }; From 088a88303bba36e501603ecd1ef7db987a64cdb2 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 27 Oct 2023 15:48:07 +0530 Subject: [PATCH 008/102] Improve the UI --- .../src/main/webapp/site/public/locales/en.json | 6 ------ .../main/webapp/site/public/locales/raw.en.json | 3 --- .../components/GlobalPolicies/Listing/Listing.tsx | 15 ++------------- 3 files changed, 2 insertions(+), 22 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index b8d42d4552c..093d5d444a9 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8819,12 +8819,6 @@ "value": "This will add policies globaly to the gateways.Please navigate to the Policies tab under any desired APIif you want to add API / operation level policies" } ], - "GlobalPolicies.Listing.policies.title.update.not.allowed": [ - { - "type": 0, - "value": "*You are not authorized to manage policies due to insufficient permissions" - } - ], "GlobalPolicies.Listing.table.header.actions.delete": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index df2a29eb82e..918029d6db4 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4215,9 +4215,6 @@ "GlobalPolicies.Listing.policies.title.tooltip": { "defaultMessage": "This will add policies globaly to the gateways.Please navigate to the Policies tab under any desired APIif you want to add API / operation level policies" }, - "GlobalPolicies.Listing.policies.title.update.not.allowed": { - "defaultMessage": "*You are not authorized to manage policies due to insufficient permissions" - }, "GlobalPolicies.Listing.table.header.actions.delete": { "defaultMessage": "Delete" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index f332489b8cf..e343820ddc7 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -429,10 +429,10 @@ const Listing: React.FC = () => { - + - + {isDeployed(gateway, policy.appliedGatewayLabels) ? ( - - - - - Date: Mon, 30 Oct 2023 13:48:51 +0530 Subject: [PATCH 009/102] Update documentation --- .../GlobalPolicies/Listing/Listing.tsx | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index e343820ddc7..9b260cd7eb1 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -45,9 +45,6 @@ import CONSTS from 'AppData/Constants'; import GlobalPolicyGatewaySelector from './GlobalPolicyGatewaySelector'; // import { data } from 'msw/lib/types/context'; -/** - * Styles for the component - */ const useStyles = makeStyles((theme) => ({ table: { marginLeft: 'auto', @@ -88,10 +85,6 @@ const useStyles = makeStyles((theme) => ({ } })); -/** - * Policy Interface - * Policy the the data model of the policies. - */ interface Policy { id: string; description: string; @@ -113,7 +106,7 @@ interface Environment { } /** - * Global Policies Lisitng Page + * Global policies Lisitng Page. * @returns {TSX} Listing Page. */ const Listing: React.FC = () => { @@ -124,9 +117,10 @@ const Listing: React.FC = () => { const [loading, setLoading] = useState(false); const [notFound, setnotFound] = useState(false); const [isAllowedToFilterCCPolicies, setIsAllowedToFilterCCPolicies] = useState(false); - // const [expandedRows, setExpandedRows] = useState<{ [key: string]: any | null }>({}); /** + * Getting the selected gateway type (Choreo Connect or Synapse). + * * @param {boolean} isCCEnabled : Indicates whether Choreo Connect is selected or not. */ const handleGatewayTypeSelection = (isCCEnabled: boolean) => { @@ -134,7 +128,7 @@ const Listing: React.FC = () => { } /** - * Get the data from the backend to the compoenent. + * Fetch the data from the backend to the compoenent. */ const fetchGlobalPolicies = () => { setLoading(true); @@ -259,6 +253,9 @@ const Listing: React.FC = () => { }); }; + /** + * Fetch environements publisher settings from the backend to the compoenent. + */ const fetchSettings = () => { setLoading(true); const promisedSettings = API.getSettings(); @@ -276,7 +273,8 @@ const Listing: React.FC = () => { }; /** - * Provides the gateway specific policies list. + * Provides the gateway specific policies list (In there, we can filter the list). + * * @returns {array} Return the policy list after filtering. */ const getPoliciesList = () => { @@ -293,6 +291,7 @@ const Listing: React.FC = () => { /** * Check if the gateway is deployed for the Golbal Policy. + * * @param {string} gateway : Gateway. * @param {string[]} appliedGatewayLabels : Applied Gateway Labels. * @returns {boolean} Return true if deployed. @@ -311,10 +310,14 @@ const Listing: React.FC = () => { }, []); /** - * Sorting Policies + * Sorts an array of Policy objects by their display names in ascending order. + * + * @param {Policy[]} policies - An array of Policy objects to be sorted. + * @returns {Policy[]} The sorted array of Policy objects. */ policies?.sort((a: Policy, b: Policy) => a.displayName.localeCompare(b.displayName)); + const policiesList = getPoliciesList(); /** From fc553955b3086c929077d02e33199bde3e7eede5 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Mon, 30 Oct 2023 15:33:04 +0530 Subject: [PATCH 010/102] Implement Deploy and Undeploy functions --- .../GlobalPolicies/Listing/Listing.tsx | 113 +++++++++++++++++- 1 file changed, 109 insertions(+), 4 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 9b260cd7eb1..7a90053e488 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -132,7 +132,8 @@ const Listing: React.FC = () => { */ const fetchGlobalPolicies = () => { setLoading(true); - // const promisedPolicies = API.getGlobalOperationPolicies(); + // const promisedPolicies = API.getGatewayPolicies(); + console.log("fetching policies: 'GET' '/gateway-policies"); // hardcoded response const promisedPolicies = Promise.resolve({ @@ -304,6 +305,102 @@ const Listing: React.FC = () => { return false; } + /** + * Function to add a label to a specific policy in UI + * + * @param {string} policyId : Policy Identifier. + * @param {string} newLabel : Newly added enviroment/gateway to applied Gateway Labels. + */ + const addLabelToPolicy = (policyId: string, newLabel: string) => { + // Create a copy of the policies array with the updated label + const updatedPolicies = policies.map((policy) => { + if (policy.id === policyId) { + return { + ...policy, + appliedGatewayLabels: [...policy.appliedGatewayLabels, newLabel], + }; + } + return policy; + }); + + // Set the state with the updated policies + setPolicies(updatedPolicies); + }; + + /** + * Function to deploy a policy mapping to another enviroment/gateway + * + * @param {string} gatewayPolicyMappingId : Policy Identifier. + * @param {string} environement : Deploying enviroment/gateway. + */ + const deploy = (gatewayPolicyMappingId: string, environement: string) => { + setLoading(true); + + // call the backend API + // const requestBody = [ + // { + // "mappingUUID": {gatewayPolicyMappingId}, + // "gatewayLabel": {environement}, + // "gatewayDeployment": true + // } + // ]; + // API.postDeployGatewayPolicies(); + console.log("deploying policy to specific gateway: 'POST' '/gateway-policies/{gatewayPolicyMappingId}/deploy"); + + // If successful, update the policies list for the UI + addLabelToPolicy(gatewayPolicyMappingId, environement); + + setLoading(false); + } + + /** + * Function to remove a label from a specific policy in UI + * + * @param {string} policyId : Policy Identifier. + * @param {string} labelToRemove : Removing enviroment/gateway from applied Gateway Labels. + */ + const removeLabelFromPolicy = (policyId: string, labelToRemove: string) => { + // Create a copy of the policies array with the label removed + const updatedPolicies = policies.map((policy) => { + if (policy.id === policyId) { + return { + ...policy, + appliedGatewayLabels: policy.appliedGatewayLabels.filter((label) => label !== labelToRemove), + }; + } + return policy; + }); + + // Set the state with the updated policies + setPolicies(updatedPolicies); + }; + + /** + * Function to undeploy a policy mapping to another enviroment/gateway + * + * @param {string} gatewayPolicyMappingId : Policy Identifier. + * @param {string} environement : Deploying enviroment/gateway. + */ + const undeploy = (gatewayPolicyMappingId: string, environement: string) => { + setLoading(true); + + // call the backend API + // const requestBody = [ + // { + // "mappingUUID": {gatewayPolicyMappingId}, + // "gatewayLabel": {environement}, + // "gatewayDeployment": false + // } + // ]; + // API.postDeployGatewayPolicies(); + console.log("undeploying policy to specifc gateway: 'POST' '/gateway-policies/{gatewayPolicyMappingId}/deploy"); + + // If successful, update the policies list for the UI + removeLabelFromPolicy(gatewayPolicyMappingId, environement); + + setLoading(false); + } + useEffect(() => { fetchGlobalPolicies(); fetchSettings(); @@ -317,7 +414,7 @@ const Listing: React.FC = () => { */ policies?.sort((a: Policy, b: Policy) => a.displayName.localeCompare(b.displayName)); - + const policiesList = getPoliciesList(); /** @@ -437,11 +534,19 @@ const Listing: React.FC = () => { {isDeployed(gateway, policy.appliedGatewayLabels) ? ( - ) : ( - )} From 888a0ad307714bf482aa18c97e6e0a10532533eb Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Mon, 30 Oct 2023 19:34:53 +0530 Subject: [PATCH 011/102] Implement delete and edit functions --- .../main/webapp/site/public/locales/en.json | 10 +-- .../webapp/site/public/locales/raw.en.json | 7 +-- .../GlobalPolicies/GlobalPolicies.tsx | 12 +++- .../GlobalPolicies/Listing/Listing.tsx | 63 +++++++++++++------ 4 files changed, 57 insertions(+), 35 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 093d5d444a9..4777affdfa5 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8825,16 +8825,10 @@ "value": "Delete" } ], - "GlobalPolicies.Listing.table.header.actions.title": [ + "GlobalPolicies.Listing.table.header.actions.edit": [ { "type": 0, - "value": "Actions" - } - ], - "GlobalPolicies.Listing.table.header.actions.view": [ - { - "type": 0, - "value": "View" + "value": "Edit" } ], "LoginDenied.logout": [ diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 918029d6db4..642abc90867 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4218,11 +4218,8 @@ "GlobalPolicies.Listing.table.header.actions.delete": { "defaultMessage": "Delete" }, - "GlobalPolicies.Listing.table.header.actions.title": { - "defaultMessage": "Actions" - }, - "GlobalPolicies.Listing.table.header.actions.view": { - "defaultMessage": "View" + "GlobalPolicies.Listing.table.header.actions.edit": { + "defaultMessage": "Edit" }, "LoginDenied.logout": { "defaultMessage": "Logout" diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx index bd0f8667af6..bc3c36173af 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx @@ -33,8 +33,16 @@ const GlobalPolicies = () => { path='/global-policies' component={Listing} /> - - + + ); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 7a90053e488..0ce0d01780a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -34,16 +34,15 @@ import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import { FormattedMessage } from 'react-intl'; import AddCircle from '@material-ui/icons/AddCircle'; -import MUIDataTable, { MUIDataTableOptions } from 'mui-datatables'; +import MUIDataTable, { MUIDataTableOptions, MUIDataTableColumnDef } from 'mui-datatables'; import Box from '@material-ui/core/Box'; import OnboardingMenuCard from 'AppComponents/Shared/Onboarding/OnboardingMenuCard'; import Onboarding from 'AppComponents/Shared/Onboarding/Onboarding'; import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; import ResourceNotFoundError from 'AppComponents/Base/Errors/ResourceNotFoundError'; import CONSTS from 'AppData/Constants'; -// import Delete from './DeletePolicy'; +import { Link } from 'react-router-dom'; import GlobalPolicyGatewaySelector from './GlobalPolicyGatewaySelector'; -// import { data } from 'msw/lib/types/context'; const useStyles = makeStyles((theme) => ({ table: { @@ -401,11 +400,31 @@ const Listing: React.FC = () => { setLoading(false); } + /** + * Function to delete a policy mapping + * + * @param {string} gatewayPolicyMappingId : Policy Identifier. + */ + const deletePolicy = (gatewayPolicyMappingId: string) => { + setLoading(true); + // call the backend API + // API.deleteGatewayPolicies(); + console.log("delete policy: 'DELETE' '/gateway-policies/{gatewayPolicyMappingId}"); + // If successful, remove it from the UI + const updatedPolicies = policies.filter((policy) => policy.id !== gatewayPolicyMappingId); + setPolicies(updatedPolicies); + setLoading(false); + } + useEffect(() => { fetchGlobalPolicies(); fetchSettings(); }, []); + const getEditUrl = (policyId: String) => { + return `/global-policies/${policyId}/edit`; + }; + /** * Sorts an array of Policy objects by their display names in ascending order. * @@ -420,7 +439,14 @@ const Listing: React.FC = () => { /** * Columns for the MUI table. */ - const columns = [ + const columns: MUIDataTableColumnDef[] = [ + { + name: 'id', + options: { + display: 'excluded', + filter: false, + }, + }, { name: 'displayName', label: 'Global Policy', @@ -450,25 +476,28 @@ const Listing: React.FC = () => { } }, { - name: 'actions', - label: 'Actions', + name: 'Actions', options: { - customBodyRender: () => { + customBodyRender: (value: any, tableMeta: any) => { + const policyId = tableMeta.rowData[0]; return ( - ); + ); }, filter: false, sort: false, - label: ( - - ), }, }, ]; @@ -507,7 +530,7 @@ const Listing: React.FC = () => { rowsPerPageOptions: [5, 10, 25, 50, 100], expandableRows: true, expandableRowsHeader: false, - expandableRowsOnClick: true, + expandableRowsOnClick: false, renderExpandableRow: (rowData, rowMeta) => { const gatewayList = environments.map((env: any) => { return env.name; From 9c3777b16a446c0a0ec3c892626bcf746b94aaf5 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 31 Oct 2023 09:46:41 +0530 Subject: [PATCH 012/102] Add create new policy link --- .../src/main/webapp/site/public/locales/en.json | 2 +- .../src/main/webapp/site/public/locales/raw.en.json | 2 +- .../app/components/GlobalPolicies/GlobalPolicies.tsx | 2 +- .../app/components/GlobalPolicies/Listing/Listing.tsx | 11 +++++++++-- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 4777affdfa5..e4529d8b79e 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8804,7 +8804,7 @@ "GlobalPolicies.Listing.policies.title.add.new.policy": [ { "type": 0, - "value": "Add New Policy" + "value": "Add New Global Policy" } ], "GlobalPolicies.Listing.policies.title.name": [ diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 642abc90867..3d77fa43eb5 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4207,7 +4207,7 @@ "defaultMessage": "Policies provide the capability to alter the behavior of API resources" }, "GlobalPolicies.Listing.policies.title.add.new.policy": { - "defaultMessage": "Add New Policy" + "defaultMessage": "Add New Global Policy" }, "GlobalPolicies.Listing.policies.title.name": { "defaultMessage": "Global Policies" diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx index bc3c36173af..91a8f566ee4 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx @@ -35,7 +35,7 @@ const GlobalPolicies = () => { /> { - From c68c06bfb84bd7fab999c40cabde35868df08716 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 31 Oct 2023 10:46:30 +0530 Subject: [PATCH 013/102] Add a copy of API policy to shared --- .../main/webapp/site/public/locales/en.json | 6 - .../webapp/site/public/locales/raw.en.json | 3 - .../Create/CreateGlobalPolicy.tsx | 7 +- .../Policies/ApiOperationContext.js | 24 + .../Policies/AttachedPolicyCard.tsx | 244 ++++++ .../Policies/AttachedPolicyForm/General.tsx | 486 ++++++++++++ .../Policies/AttachedPolicyList.tsx | 130 +++ .../PolicyMapping/Policies/CreatePolicy.tsx | 187 +++++ .../PolicyMapping/Policies/DeletePolicy.tsx | 148 ++++ .../Policies/DraggablePolicyCard.tsx | 201 +++++ .../Policies/GatewaySelector.tsx | 234 ++++++ .../Policies/OperationButton.tsx | 58 ++ .../Policies/OperationPolicy.tsx | 195 +++++ .../Policies/OperationsGroup.tsx | 79 ++ .../PolicyMapping/Policies/Policies.tsx | 587 ++++++++++++++ .../Policies/PoliciesExpansion.tsx | 331 ++++++++ .../Policies/PoliciesSection.tsx | 141 ++++ .../PolicyConfigurationEditDrawer.tsx | 180 +++++ .../Policies/PolicyConfiguringDrawer.tsx | 176 +++++ .../PolicyMapping/Policies/PolicyDropzone.tsx | 154 ++++ .../Policies/PolicyForm/GeneralDetails.tsx | 414 ++++++++++ .../Policies/PolicyForm/PolicyAttributes.tsx | 740 ++++++++++++++++++ .../Policies/PolicyForm/PolicyCreateForm.tsx | 345 ++++++++ .../Policies/PolicyForm/PolicyViewForm.tsx | 101 +++ .../Policies/PolicyForm/SourceDetails.tsx | 339 ++++++++ .../Policies/PolicyForm/Types.d.ts | 40 + .../PolicyForm/UploadPolicyDropzone.tsx | 207 +++++ .../PolicyMapping/Policies/PolicyList.tsx | 191 +++++ .../Policies/SaveOperationPolicies.tsx | 95 +++ .../Shared/PolicyMapping/Policies/Types.d.ts | 94 +++ .../Shared/PolicyMapping/Policies/Utils.ts | 30 + .../PolicyMapping/Policies/ViewPolicy.tsx | 166 ++++ .../Policies/components/FlowArrow.tsx | 73 ++ .../Policies/components/PolicyPanel.tsx | 82 ++ .../Policies/components/TabPanel.tsx | 72 ++ 35 files changed, 6546 insertions(+), 14 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ApiOperationContext.js create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyCard.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyForm/General.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyList.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/CreatePolicy.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DeletePolicy.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DraggablePolicyCard.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/GatewaySelector.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationButton.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationPolicy.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationsGroup.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Policies.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesExpansion.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesSection.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfigurationEditDrawer.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfiguringDrawer.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyDropzone.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/GeneralDetails.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyAttributes.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyCreateForm.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyViewForm.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/SourceDetails.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/Types.d.ts create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/UploadPolicyDropzone.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyList.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/SaveOperationPolicies.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Types.d.ts create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Utils.ts create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ViewPolicy.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/FlowArrow.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/PolicyPanel.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/TabPanel.tsx diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index e4529d8b79e..c5fb65d88a9 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8777,12 +8777,6 @@ "value": "Error while validating the imported schema" } ], - "GlobalPolicies.Create.CreateGlobalPolicy": [ - { - "type": 0, - "value": "Hi, I am the GlobalPolicies.Create.CreateGlobalPolicy component!" - } - ], "GlobalPolicies.Edit.EditGlobalPolicy": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 3d77fa43eb5..e02447a133a 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4194,9 +4194,6 @@ "Error.while.validating.the.imported.graphQLSchema": { "defaultMessage": "Error while validating the imported schema" }, - "GlobalPolicies.Create.CreateGlobalPolicy": { - "defaultMessage": "Hi, I am the GlobalPolicies.Create.CreateGlobalPolicy component!" - }, "GlobalPolicies.Edit.EditGlobalPolicy": { "defaultMessage": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx index fe3cee698c8..aa2344a85da 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -15,7 +15,7 @@ // under the License. import React from 'react'; -import { FormattedMessage } from 'react-intl'; +import Policies from 'AppComponents/Shared/PolicyMapping/Policies/Policies'; /** * Global Policies Creating Page. @@ -23,10 +23,7 @@ import { FormattedMessage } from 'react-intl'; */ const CreateGlobalPolicy: React.FC = () => { return ( - + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ApiOperationContext.js b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ApiOperationContext.js new file mode 100644 index 00000000000..e9d946f586a --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ApiOperationContext.js @@ -0,0 +1,24 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useContext } from 'react'; + +const ApiOperationContext = React.createContext({}); +export const useApiOperationContext = () => useContext(ApiOperationContext); +export const ApiOperationContextProvider = ApiOperationContext.Provider; +export default ApiOperationContext; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyCard.tsx new file mode 100644 index 00000000000..59826a543ac --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyCard.tsx @@ -0,0 +1,244 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { CSSProperties, FC, useContext, useState } from 'react'; +import Avatar from '@material-ui/core/Avatar'; +import Box from '@material-ui/core/Box'; +import { useSortable } from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; +import { Alert } from 'AppComponents/Shared'; +import { makeStyles } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; +import DeleteIcon from '@material-ui/icons/Delete'; +import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; +import API from 'AppData/api.js'; +import Utils from 'AppData/Utils'; +import { FormattedMessage } from 'react-intl'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import type { AttachedPolicy, PolicySpec } from './Types'; +import PolicyConfigurationEditDrawer from './PolicyConfigurationEditDrawer'; +import ApiOperationContext from './ApiOperationContext'; + +const useStyles = makeStyles(() => ({ + actionsBox: { + display: 'flex', + flexDirection: 'column', + marginTop: '1em', + }, +})); + +interface AttachedPolicyCardProps { + policyObj: AttachedPolicy; + currentPolicyList: AttachedPolicy[]; + setCurrentPolicyList: React.Dispatch>; + currentFlow: string; + verb: string; + target: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; +} + +/** + * Renders a single sortable policy card. + * @param {any} AttachedPolicyCardProps Input props from parent components. + * @returns {TSX} Sortable attached policy card UI. + */ +const AttachedPolicyCard: FC = ({ + policyObj, + currentPolicyList, + setCurrentPolicyList, + currentFlow, + verb, + target, + allPolicies, + isAPILevelPolicy, +}) => { + const classes = useStyles(); + const { api } = useContext(ApiContext); + const { deleteApiOperation } = useContext(ApiOperationContext); + const [drawerOpen, setDrawerOpen] = useState(false); + const policyColor = Utils.stringToColor(policyObj.displayName); + const policyBackgroundColor = drawerOpen + ? `rgba(${Utils.hexToRGB(policyColor)}, 0.2)` + : 'rgba(0, 0, 0, 0)'; + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ id: policyObj.uniqueKey.toString() }); + const style: CSSProperties = { + transform: CSS.Transform.toString(transform), + transition, + border: '2px solid', + height: '90%', + cursor: 'move', + borderRadius: '0.3em', + padding: '0.2em', + borderColor: policyColor, + marginLeft: '0.2em', + marginRight: '0.2em', + backgroundColor: policyBackgroundColor, + opacity: isDragging ? 0.5 : 1, + }; + + /** + * Handle policy delete + * @param {React.MouseEvent} event event + */ + const handleDelete = (event: React.MouseEvent) => { + const filteredList = currentPolicyList.filter( + (policy) => policy.uniqueKey !== policyObj.uniqueKey, + ); + const policyToDelete = currentPolicyList.find( + (policy) => policy.uniqueKey === policyObj.uniqueKey, + ); + setCurrentPolicyList(filteredList); + deleteApiOperation( + policyToDelete?.uniqueKey, + target, + verb, + currentFlow, + ); + event.stopPropagation(); + event.preventDefault(); + }; + + /** + * Handle policy download + * @param {React.MouseEvent} event event + */ + const handlePolicyDownload = (event: React.MouseEvent) => { + event.stopPropagation(); + event.preventDefault(); + if (policyObj.isAPISpecific) { + const apiPolicyContentPromise = API.getOperationPolicyContent( + policyObj.id, + api.id, + ); + apiPolicyContentPromise + .then((apiPolicyResponse) => { + Utils.forceDownload(apiPolicyResponse); + }) + .catch((error) => { + console.error(error); + Alert.error( + , + ); + }); + } else { + const commonPolicyContentPromise = API.getCommonOperationPolicyContent( + policyObj.id, + ); + commonPolicyContentPromise + .then((commonPolicyResponse) => { + Utils.forceDownload(commonPolicyResponse); + }) + .catch((error) => { + console.error(error); + Alert.error( + , + ); + }); + } + }; + + const handleDrawerOpen = () => { + if (policyObj.id !== '') { + // Drawer will only appear for policies that have an ID + // Note that a migrated policy will have an empty string as the ID at the initial stage + setDrawerOpen(true); + } + }; + + return ( + <> +
+ + + {Utils.stringAvatar( + policyObj.displayName.toUpperCase(), + )} + + + + + + + + + + +
+ {drawerOpen && ( + + )} + + ); +}; + +export default AttachedPolicyCard; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyForm/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyForm/General.tsx new file mode 100644 index 00000000000..3bdb75f82a1 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyForm/General.tsx @@ -0,0 +1,486 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useState, FC, useContext } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Grid, + Typography, + Button, + TextField, + CircularProgress, + Box, + FormControlLabel, + Checkbox, + Select, + InputLabel, + FormControl, + FormHelperText, +} from '@material-ui/core'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { Progress } from 'AppComponents/Shared'; +import { PolicySpec, ApiPolicy, AttachedPolicy, Policy, PolicySpecAttribute } from '../Types'; +import ApiOperationContext from "../ApiOperationContext"; + +const useStyles = makeStyles(theme => ({ + resetBtn: { + display: 'flex', + justifyContent: 'right', + alignItems: 'center', + }, + btn: { + marginRight: '1em', + }, + drawerInfo: { + marginBottom: '1em', + }, + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, + formControl: { + width: '80%', + }, +})); + +interface GeneralProps { + policyObj: AttachedPolicy | null; + setDroppedPolicy?: React.Dispatch>; + currentFlow: string; + target: string; + verb: string; + apiPolicy: ApiPolicy; + policySpec: PolicySpec; + handleDrawerClose: () => void; + isEditMode: boolean; + isAPILevelPolicy: boolean; +} + +const General: FC = ({ + policyObj, + setDroppedPolicy, + currentFlow, + target, + verb, + apiPolicy, + policySpec, + handleDrawerClose, + isEditMode, + isAPILevelPolicy, +}) => { + const intl = useIntl(); + const classes = useStyles(); + const [saving, setSaving] = useState(false); + const [applyToAll, setApplyToAll] = useState(false); + const initState: any = {}; + const { updateApiOperations, updateAllApiOperations } = useContext(ApiOperationContext); + policySpec.policyAttributes.forEach(attr => { initState[attr.name] = null }); + const [state, setState] = useState(initState); + + if (!policyObj) { + return + } + + const onInputChange = (event: any, specType: string) => { + if (specType.toLowerCase() === 'boolean') { + setState({ ...state, [event.target.name]: event.target.checked }); + } else if ( + specType.toLowerCase() === 'string' + || specType.toLowerCase() === 'integer' + || specType.toLowerCase() === 'enum' + ) { + setState({ ...state, [event.target.name]: event.target.value }); + } + } + + const getValueOfPolicyParam = (policyParamName: string) => { + return apiPolicy.parameters[policyParamName]; + } + + /** + * This function is triggered when the form is submitted for save + * @param {React.FormEvent} event Form submit event + */ + const submitForm = async (event: React.FormEvent) => { + event.preventDefault(); + setSaving(true); + const updateCandidates: any = {}; + Object.keys(state).forEach((key) => { + const value = state[key]; + const attributeSpec = policySpec.policyAttributes.find( + (attribute: PolicySpecAttribute) => attribute.name === key, + ); + if (value === null && getValueOfPolicyParam(key) && getValueOfPolicyParam(key) !== '') { + updateCandidates[key] = getValueOfPolicyParam(key); + } else if (value === null && attributeSpec?.defaultValue && attributeSpec?.defaultValue !== null) { + updateCandidates[key] = attributeSpec.defaultValue; + } else { + updateCandidates[key] = value; + } + }); + + // Saving field changes to backend + const apiPolicyToSave = {...apiPolicy}; + apiPolicyToSave.parameters = updateCandidates; + if (!applyToAll) { + updateApiOperations(apiPolicyToSave, target, verb, currentFlow); + } else { + // Apply the same attached policy to all the resources + updateAllApiOperations(apiPolicyToSave, currentFlow); + setApplyToAll(false); + } + + if (setDroppedPolicy) setDroppedPolicy(null); + setSaving(false); + handleDrawerClose(); + }; + + /** + * Function to get the error string, if there are any errors. Empty string to indicate the absence of errors. + * @param {PolicySpecAttribute} specInCheck The policy attribute that needs to be checked for any errors. + * @returns {string} String with the error message, where empty string indicates that there are no errors. + */ + const getError = (specInCheck: PolicySpecAttribute) => { + let error = ''; + const value = state[specInCheck.name]; + if (value !== null) { + if (specInCheck.required && value === '') { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.AttachedPolicyForm.General.required.error', + defaultMessage: 'Required field is empty', + }); + } else if ( + value !== '' && + specInCheck.validationRegex && + !(!specInCheck.validationRegex || specInCheck.validationRegex === '') + ) { + // To check if the regex is a valid regex + try { + if (!new RegExp(specInCheck.validationRegex).test(value)) { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.AttachedPolicyForm.General.regex.error', + defaultMessage: 'Please enter a valid input', + }); + } + } catch(e) { + console.error(e); + } + } + } + return error; + } + + const getValue = (spec: PolicySpecAttribute) => { + const specName = spec.name; + const previousVal = getValueOfPolicyParam(specName); + if (state[specName] !== null) { + return state[specName]; + } else if (previousVal !== null && previousVal !== undefined) { + if (spec.type.toLowerCase() === 'integer') return parseInt(previousVal, 10); + else if (spec.type.toLowerCase() === 'boolean') return (previousVal.toString() === 'true'); + else return previousVal; + } else if (spec.defaultValue !== null && spec.defaultValue !== undefined) { + if (spec.type.toLowerCase() === 'integer') return parseInt(spec.defaultValue, 10); + else if (spec.type.toLowerCase() === 'boolean') return (spec.defaultValue.toString() === 'true'); + else return spec.defaultValue; + } else { + return ''; + } + } + + /** + * Reset the input fields + */ + const resetAll = () => { + setState(initState); + } + + /** + * Function to check whether there are any errors in the form. + * If there are errors, we disable the save button. + * @returns {boolean} Boolean value indicating whether or not the form has any errors. + */ + const formHasErrors = () => { + let formHasAnError = false; + policySpec.policyAttributes.forEach((spec) => { + if(getError(spec) !== '') { + formHasAnError = true + } + }) + return formHasAnError; + } + + /** + * Function to check if the form content is in state that needs to be saved. + * @returns {boolean} Whether or not the save button should be disabled. + */ + const isSaveDisabled = () => { + if (!isEditMode) { + let isDisabled = false; + policySpec.policyAttributes.forEach((spec) => { + if (spec.type !== 'Boolean') { + const currentState = state[spec.name]; + const currentVal = getValue(spec); + if (spec.required && !(currentState || currentVal)) { + isDisabled = true; + } + } + }); + return isDisabled; + } else { + let isDisabled = true; + policySpec.policyAttributes.forEach((spec) => { + if (spec.type !== 'Boolean') { + const currentState = state[spec.name]; + if (currentState !== null) { + isDisabled = false; + } + } else { + const currentState = state[spec.name]; + if ( + currentState !== null && + (currentState.toString() === 'true' || + currentState.toString() === 'false') + ) { + isDisabled = false; + } + } + }); + return isDisabled; + } + }; + + /** + * Toggle the apply to all option on initial policy drop. + */ + const toggleApplyToAll = () => { + setApplyToAll(!applyToAll); + } + + const hasAttributes = policySpec.policyAttributes.length !== 0; + const resetDisabled = Object.values(state).filter((value: any) => + (value !== null && (value.toString() !== 'true' || value.toString() !== 'false')) || !!value + ).length === 0; + + if (!policySpec) { + return + } + + return ( + +
+ + + {hasAttributes && ( +
+ +
+ )} +
+ + + + + {policySpec.description ? ( + + ) : ( + + )} + +
+ + {policySpec.policyAttributes && policySpec.policyAttributes.map((spec: PolicySpecAttribute) => ( + + + {/* When the attribute type is string or integer */} + {(spec.type.toLowerCase() === 'string' + || spec.type.toLowerCase() === 'integer') && ( + + {spec.displayName} + {spec.required && ( + * + )} + + )} + helperText={getError(spec) === '' ? spec.description : getError(spec)} + error={getError(spec) !== ''} + variant='outlined' + name={spec.name} + type={spec.type.toLowerCase() === 'integer' ? 'number' : 'text'} + value={getValue(spec)} + onChange={(e: any) => onInputChange(e, spec.type)} + fullWidth + /> + )} + + {/* When the attribute type is enum */} + {spec.type.toLowerCase() === 'enum' && ( + <> + + + <> + {spec.displayName} + {spec.required && ( + * + )} + + + + + {getError(spec) === '' ? spec.description : getError(spec)} + + + + )} + + {/* When attribute type is boolean */} + {spec.type.toLowerCase() === 'boolean' && ( + onInputChange(e, spec.type)} + name={spec.name} + color='primary' + /> + } + label={( + <> + {spec.displayName} + {spec.required && ( + * + )} + + )} + /> + )} + + ))} + {setDroppedPolicy && !isAPILevelPolicy && ( + + + } + label={( + + + + )} + /> + + )} + + + + + +
+ + ); +}; + + +export default General; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyList.tsx new file mode 100644 index 00000000000..b4d882a64d5 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyList.tsx @@ -0,0 +1,130 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useContext } from 'react'; +import { + DndContext, + closestCenter, + PointerSensor, + useSensor, + useSensors, + DragEndEvent, +} from '@dnd-kit/core'; +import { + horizontalListSortingStrategy, + SortableContext, +} from '@dnd-kit/sortable'; + +import AttachedPolicyCard from './AttachedPolicyCard'; +import type { AttachedPolicy, PolicySpec } from './Types'; +import ApiOperationContext from './ApiOperationContext'; + +interface AttachedPolicyListProps { + currentPolicyList: AttachedPolicy[]; + setCurrentPolicyList: React.Dispatch>; + policyDisplayStartDirection: string; + currentFlow: string; + target: string; + verb: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; +} + +/** + * Renders the Gateway selection section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Radio group for the API Gateway. + */ +const AttachedPolicyList: FC = ({ + currentPolicyList, + setCurrentPolicyList, + policyDisplayStartDirection, + currentFlow, + target, + verb, + allPolicies, + isAPILevelPolicy, +}) => { + const reversedPolicyList = [...currentPolicyList].reverse(); + const policyListToDisplay = + policyDisplayStartDirection === 'left' + ? currentPolicyList + : reversedPolicyList; + const { rearrangeApiOperations } = useContext(ApiOperationContext); + + const sensors = useSensors( + useSensor(PointerSensor, { + activationConstraint: { + distance: 5, + }, + }), + ); + + const handleDragEnd = (event: DragEndEvent) => { + const { active, over } = event; + + if (active.id !== over?.id) { + const policyListCopy = [...currentPolicyList]; + const oldIndex = policyListCopy.findIndex( + (item) => item.uniqueKey === active.id, + ); + const newIndex = policyListCopy.findIndex( + (item) => item.uniqueKey === over?.id, + ); + + rearrangeApiOperations( + oldIndex, + newIndex, + target, + verb, + currentFlow, + ); + } + }; + + return ( + <> + + item.uniqueKey)} + strategy={horizontalListSortingStrategy} + > + {policyListToDisplay.map((policy: AttachedPolicy) => ( + + ))} + + + + ); +}; + +export default AttachedPolicyList; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/CreatePolicy.tsx new file mode 100644 index 00000000000..b05c01e685c --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/CreatePolicy.tsx @@ -0,0 +1,187 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useContext, useState } from 'react'; +import { Typography, makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import { Link } from 'react-router-dom'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import Icon from '@material-ui/core/Icon'; +import IconButton from '@material-ui/core/IconButton'; +import LaunchIcon from '@material-ui/icons/Launch'; +import { FormattedMessage } from 'react-intl'; +import API from 'AppData/api.js'; +import Alert from 'AppComponents/Shared/Alert'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import CONSTS from 'AppData/Constants'; +import type { CreatePolicySpec } from './Types'; +import PolicyCreateForm from './PolicyForm/PolicyCreateForm'; + +const useStyles = makeStyles((theme: Theme) => ({ + link: { + color: theme.palette.primary.dark, + marginLeft: theme.spacing(2), + display: 'inline', + }, +})); + +interface CreatePolicyProps { + handleDialogClose: () => void; + dialogOpen: boolean; + fetchPolicies: () => void; +} + +/** + * Renders the UI to create a new policy. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy create UI. + */ +const CreatePolicy: React.FC = ({ + handleDialogClose, + dialogOpen, + fetchPolicies, +}) => { + const classes = useStyles(); + const { api } = useContext(ApiContext); + const [saving, setSaving] = useState(false); + const [synapsePolicyDefinitionFile, setSynapsePolicyDefinitionFile] = useState([]); + const [ccPolicyDefinitionFile, setCcPolicyDefinitionFile] = useState([]); + + const savePolicy = ( + policySpecContent: CreatePolicySpec, + synapsePolicyDefinition: any, + ccPolicyDefinition: any, + ) => { + setSaving(true); + const promisedCommonPolicyAdd = API.addOperationPolicy( + policySpecContent, + api.id, + synapsePolicyDefinition, + ccPolicyDefinition, + ); + promisedCommonPolicyAdd + .then(() => { + Alert.info('Policy created successfully!'); + setSynapsePolicyDefinitionFile([]); + setCcPolicyDefinitionFile([]); + handleDialogClose(); + fetchPolicies(); + }) + .catch((error) => { + handleDialogClose(); + console.error(error); + Alert.error('Something went wrong while creating policy'); + }) + .finally(() => { + setSaving(false); + }); + }; + + const onSave = (policySpecification: CreatePolicySpec) => { + const synapseFile = synapsePolicyDefinitionFile.length !== 0 ? synapsePolicyDefinitionFile : null; + const ccFile = ccPolicyDefinitionFile.length !== 0 ? ccPolicyDefinitionFile : null; + savePolicy( + policySpecification, + synapseFile, + ccFile, + ); + handleDialogClose(); + }; + + const stopPropagation = ( + e: React.MouseEvent, + ) => { + e.stopPropagation(); + }; + + return ( + <> + + + + + + + + + + close + + + + + + + + + + + + + + Want to create a common policy that will be visible to all APIs instead? + + + + + + + ); +}; + +export default CreatePolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DeletePolicy.tsx new file mode 100644 index 00000000000..47024537bac --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DeletePolicy.tsx @@ -0,0 +1,148 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useState, FC, useContext } from 'react'; +import { FormattedMessage } from 'react-intl'; +import DeleteIcon from '@material-ui/icons/Delete'; +import IconButton from '@material-ui/core/IconButton'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import Button from '@material-ui/core/Button'; +import DialogContent from '@material-ui/core/DialogContent'; +import Tooltip from '@material-ui/core/Tooltip'; +import Alert from 'AppComponents/Shared/Alert'; +import API from 'AppData/api'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; + +interface DeletePolicyProps { + policyId: string; + policyName: string; + fetchPolicies: () => void; +} + +/** + * Renders the policy configuring drawer. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Right drawer for policy configuration. + */ +const DeletePolicy: FC = ({ + policyId, + policyName, + fetchPolicies, +}) => { + const { api } = useContext(ApiContext); + const [open, setOpen] = useState(false); + const setOpenLocal = setOpen; // Need to copy this to access inside the promise.then + const toggleOpen = () => { + setOpen(!open); + }; + + const handleDelete = () => { + const promisedCommonPolicyDelete = API.deleteOperationPolicy( + api.id, + policyId, + ); + promisedCommonPolicyDelete + .then(() => { + Alert.info(`${policyName} policy deleted successfully!`); + setOpenLocal(!open); + fetchPolicies(); + }) + .catch((error) => { + console.error(error); + Alert.error('Error occurred while deleteting policy'); + setOpenLocal(!open); + }); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + <> + + } + > + + + + + { + e.preventDefault(); + e.stopPropagation(); + }} + open={open} + onClose={handleClose} + > + + + + + + + + + + + + + + + ); +}; + +export default DeletePolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DraggablePolicyCard.tsx new file mode 100644 index 00000000000..8622ab8aa40 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DraggablePolicyCard.tsx @@ -0,0 +1,201 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { CSSProperties, useMemo, useState } from 'react'; +import { makeStyles } from '@material-ui/core'; +import Avatar from '@material-ui/core/Avatar'; +import Box from '@material-ui/core/Box'; +import Tooltip from '@material-ui/core/Tooltip'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import Utils from 'AppData/Utils'; +import VisibilityIcon from '@material-ui/icons/Visibility'; +import IconButton from '@material-ui/core/IconButton'; +import { FormattedMessage } from 'react-intl'; +import { useDrag } from 'react-dnd'; +import type { Policy } from './Types'; +import ViewPolicy from './ViewPolicy'; +import DeletePolicy from './DeletePolicy'; + +const useStyles = makeStyles(() => ({ + policyCardText: { + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + listItem: { + maxHeight: '100%', + overflow: 'auto', + }, + policyActions: { + visibility: 'hidden', + '&:hover': { + visibility: 'inherit', + }, + }, +})); + +const style: CSSProperties = { + border: '2px solid', + marginTop: '0.4rem', + cursor: 'move', + borderRadius: '0.3em', +}; + +interface DraggablePolicyCardProps { + policyObj: Policy; + showCopyIcon?: boolean; + isLocalToAPI: boolean; + fetchPolicies: () => void; +} + +/** + * Renders a single draggable policy block. + * @param {any} DraggablePolicyCardProps Input props from parent components. + * @returns {TSX} Draggable Policy card UI. + */ +const DraggablePolicyCard: React.FC = ({ + policyObj, + showCopyIcon, + isLocalToAPI, + fetchPolicies, +}) => { + const classes = useStyles(); + const [hovered, setHovered] = useState(false); + const [dialogOpen, setDialogOpen] = useState(false); + + const [{ isDragging }, drag] = useDrag( + () => ({ + type: `policyCard-${policyObj.id}`, + item: { droppedPolicy: policyObj }, + options: { + dropEffect: showCopyIcon ? 'copy' : 'move', + }, + collect: (monitor) => ({ + isDragging: monitor.isDragging(), + }), + }), + [showCopyIcon], + ); + + const containerStyle = useMemo( + () => ({ + ...style, + opacity: isDragging ? 0.4 : 1, + borderColor: Utils.stringToColor(policyObj.displayName), + width: '100%', + }), + [isDragging], + ); + + const handleViewPolicy = () => { + setDialogOpen(true); + }; + + const handleViewPolicyClose = () => { + setDialogOpen(false); + }; + + return ( + <> + +
+ setHovered(true)} + onMouseOut={() => setHovered(false)} + > + + + {Utils.stringAvatar( + policyObj.displayName.toUpperCase(), + )} + + + + + + + + + } + > + + + + + {isLocalToAPI && ( + + )} + + +
+ + + + ); +}; + +export default DraggablePolicyCard; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/GatewaySelector.tsx new file mode 100644 index 00000000000..b713aea4e89 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/GatewaySelector.tsx @@ -0,0 +1,234 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useState } from 'react'; +import { HelpOutline } from '@material-ui/icons'; +import Tooltip from '@material-ui/core/Tooltip'; +import { + Dialog, + DialogTitle, + DialogContent, + Button, + DialogActions, + Radio, +} from '@material-ui/core'; +import Paper from '@material-ui/core/Paper'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Grid from '@material-ui/core/Grid'; +import FormControl from '@material-ui/core/FormControl'; +import RadioGroup from '@material-ui/core/RadioGroup'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import { isRestricted } from 'AppData/AuthManager'; +import { useAPI } from 'AppComponents/Apis/Details/components/ApiContext'; +import { FormattedMessage } from 'react-intl'; + +const SupportedGatewayTypes = { + REGULAR: 'Regular Gateway', + CC: 'Choreo Connect', +}; + +interface GatewaySelectorProps { + setIsChangedToCCGatewayType: (isCCEnabled: boolean) => void; + isChoreoConnectEnabled: boolean; + removeAPIPoliciesForGatewayChange: () => void; +} + +/** + * Renders the Gateway selection section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Radio group for the API Gateway. + */ +const GatewaySelector: FC = ({ + setIsChangedToCCGatewayType, + isChoreoConnectEnabled, + removeAPIPoliciesForGatewayChange +}) => { + const [apiFromContext] = useAPI(); + let selectedGatewayType; + + const [isDialogBoxVisible, setIsDialogBoxVisible] = useState(false); + // This state is maintained until user gived approval for gateway change. + // Without this state radio buttons will switch even user disagrees to proceed gateway change. + const [isCCSelected, setIsCCSelected] = useState(false); + + const saveAfterGatewayChange = () => { + if (isCCSelected) { + setIsChangedToCCGatewayType(true); + } else { + setIsChangedToCCGatewayType(false); + } + removeAPIPoliciesForGatewayChange(); + setIsDialogBoxVisible(false); + } + + if (isChoreoConnectEnabled) { + selectedGatewayType = SupportedGatewayTypes.CC; + } else { + selectedGatewayType = SupportedGatewayTypes.REGULAR; + } + + /** + * Handles accepted gateway type change after approving dialog box. + * @param {event: React.ChangeEvent} event Indicates gateway type radio button change event. + */ + const handleDialogBox = (event: React.ChangeEvent) => { + if(event.target.value === SupportedGatewayTypes.CC) { + setIsCCSelected(true) + } else { + setIsCCSelected(false); + } + setIsDialogBoxVisible(true); + } + + /** + * Handles discarded gateway type change after cancelling dialog box. + */ + const handleDiscardedGatewayChange = () => { + setIsDialogBoxVisible(false); + }; + + return ( + + + + + + + API Gateway + + + + + + + + + + + + } + label='Regular Gateway' + labelPlacement='end' + /> + + } + label='Choreo Connect' + labelPlacement='end' + /> + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default GatewaySelector; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationButton.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationButton.tsx new file mode 100644 index 00000000000..8f05f6407c1 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationButton.tsx @@ -0,0 +1,58 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import Button from '@material-ui/core/Button'; +import { makeStyles } from '@material-ui/core/styles'; + +interface OperationButtonProps { + verb: string; +} + +const getStyles = (verb: string) => { + const useStyles = makeStyles((theme: any) => { + const backgroundColor = theme.custom.resourceChipColors[verb]; + return { + customButton: { + '&:hover': { backgroundColor }, + backgroundColor, + width: theme.spacing(12), + color: theme.palette.getContrastText(backgroundColor), + } + }; + })(); + return useStyles; +} + +const OperationButton: FC = ({ verb }) => { + + const classes = getStyles(verb); + return ( + + ); +}; + +export default OperationButton; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationPolicy.tsx new file mode 100644 index 00000000000..ff53729cb57 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationPolicy.tsx @@ -0,0 +1,195 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import ExpansionPanel from '@material-ui/core/ExpansionPanel'; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; +import Divider from '@material-ui/core/Divider'; +import Button from '@material-ui/core/Button'; +import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; +import Typography from '@material-ui/core/Typography'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { makeStyles } from '@material-ui/core/styles'; +import Utils from 'AppData/Utils'; +import Badge from '@material-ui/core/Badge'; +import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined'; +import { FormattedMessage } from 'react-intl'; +import PoliciesExpansion from './PoliciesExpansion'; +import type { Policy, PolicySpec } from './Types' + +interface OperationPolicyProps { + target: string; + verb: string; + operation: any; + highlight: any; + api: any; + disableUpdate: any; + expandedResource: string | null; + setExpandedResource: React.Dispatch>; + policyList: Policy[]; + allPolicies: PolicySpec[] | null; + isChoreoConnectEnabled: boolean; +} + +const OperationPolicy: FC = ({ + operation, highlight, api, target, verb, expandedResource, setExpandedResource, + policyList, allPolicies, isChoreoConnectEnabled +}) => { + const useStyles = makeStyles((theme: any) => { + const backgroundColor = theme.custom.resourceChipColors[verb]; + return { + customButton: { + '&:hover': { backgroundColor }, + backgroundColor, + width: theme.spacing(12), + color: theme.palette.getContrastText(backgroundColor), + }, + paperStyles: { + border: `1px solid ${backgroundColor}`, + borderBottom: '', + width: '100%', + }, + customDivider: { + backgroundColor, + }, + highlightSelected: { + backgroundColor: Utils.hexToRGBA(backgroundColor, 0.1), + }, + contentNoMargin: { + margin: theme.spacing(0), + }, + targetText: { + maxWidth: 300, + margin: '0px 20px', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + display: 'inline-block', + }, + operationSummaryGrid: { + display: 'flex', + alignItems: 'center', + flexBasis: '100%', + maxWidth: '100%', + } + }; + }); + + const classes = useStyles(); + + const apiOperation = api.operations[target] && api.operations[target][verb.toUpperCase()]; + const isUsedInAPIProduct = apiOperation && Array.isArray( + apiOperation.usedProductIds, + ) && apiOperation.usedProductIds.length; + + const handleExpansion = (panel: string) => (event: any, isExpanded: boolean) => { + setExpandedResource(isExpanded ? panel : null); + }; + + const renderUsedInApiProducts = () => { + return (isUsedInAPIProduct) ? ( + + + + + + + + + ) : ( + + ); + } + + return ( + <> + + } + id={verb + target} + classes={{ content: classes.contentNoMargin }} + > + + + + + + + {target} + {(operation.summary && operation.summary !== '') && ( + + {operation.summary} + + )} + + + {renderUsedInApiProducts} + + + + + + + ); +}; + +export default OperationPolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationsGroup.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationsGroup.tsx new file mode 100644 index 00000000000..09ad0e708df --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationsGroup.tsx @@ -0,0 +1,79 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import ExpansionPanel from '@material-ui/core/ExpansionPanel'; +import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; +import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import Typography from '@material-ui/core/Typography'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { Box } from '@material-ui/core'; + +const useStyles = makeStyles((theme) => ({ + tagClass: { + maxWidth: 1000, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + [theme.breakpoints.down('md')]: { + maxWidth: 800, + }, + }, +})); + +interface OperationGroupProps { + openAPI: any; + children: any; + tag: string; +} + +const OperationGroup: FC = ({ + openAPI, children, tag +}) => { + const classes = useStyles(); + const currentTagInfo = openAPI.tags && openAPI.tags.find((tagInfo: any) => tagInfo.name === tag); + let borderColor = ""; + + return ( + + + } id={tag}> + + {tag} + + + {' '} + + {currentTagInfo && ( + + {currentTagInfo.description} + + )} + + {children} + + + ); +}; + +export default OperationGroup; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Policies.tsx new file mode 100644 index 00000000000..065b8a1a862 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Policies.tsx @@ -0,0 +1,587 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { makeStyles, Typography } from '@material-ui/core'; +import Alert from 'AppComponents/Shared/Alert'; +import React, { useState, useEffect, useMemo } from 'react'; +import cloneDeep from 'lodash.clonedeep'; +import Paper from '@material-ui/core/Paper'; +import Box from '@material-ui/core/Box'; +import { useAPI } from 'AppComponents/Apis/Details/components/ApiContext'; +import { HTML5Backend } from 'react-dnd-html5-backend'; +import { DndProvider } from 'react-dnd'; +import { FormattedMessage } from 'react-intl'; +import { mapAPIOperations } from 'AppComponents/Apis/Details/Resources/operationUtils'; +import API from 'AppData/api'; +import { Progress } from 'AppComponents/Shared'; +import { arrayMove } from '@dnd-kit/sortable'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import PolicyList from './PolicyList'; +import type { ApiPolicy, Policy, PolicySpec, ApiLevelPolicy } from './Types'; +import GatewaySelector from './GatewaySelector'; +import { ApiOperationContextProvider } from './ApiOperationContext'; +import { uuidv4 } from './Utils'; +import SaveOperationPolicies from './SaveOperationPolicies'; +import PolicyPanel from './components/PolicyPanel'; + +const Configurations = require('Config'); + +const useStyles = makeStyles(() => ({ + gridItem: { + display: 'flex', + width: '100%', + }, + operationListingBox: { + overflowY: 'scroll', + }, + paper: { + padding: '2px', + }, + ccTypography: { + paddingLeft: '10px', + marginTop: '20px', + }, + flowTabs: { + '& button': { + minWidth: 50, + }, + }, + flowTab: { + fontSize: 'smaller', + }, +})); + +/** + * Renders the policy management page. + * @returns {TSX} Policy management page to render. + */ +const Policies: React.FC = () => { + const classes = useStyles(); + const [api, updateAPI] = useAPI(); + const [updating, setUpdating] = useState(false); + const [policies, setPolicies] = useState(null); + const [allPolicies, setAllPolicies] = useState(null); + const [expandedResource, setExpandedResource] = useState(null); + const [isChoreoConnectEnabled, setIsChoreoConnectEnabled] = useState(api.gatewayType === 'wso2/choreo-connect'); + const { showMultiVersionPolicies } = Configurations.apis; + const [selectedTab, setSelectedTab] = useState((api.apiPolicies != null) ? 0 : 1); + + // If Choreo Connect radio button is selected in GatewaySelector, it will pass + // value as true to render other UI changes specific to the Choreo Connect. + const setIsChangedToCCGatewayType = (isCCEnabled: boolean) => { + setIsChoreoConnectEnabled(isCCEnabled); + } + + // Tabs + const apiLevelTab = 0; + const operationLevelTab = 1; + + const initApiLevelPolicy: ApiLevelPolicy = { + request: [], + response: [], + fault: [], + } + + const getInitPolicyState = (policyList: any) => { + // Iterating through the policy list of request flow, response flow and fault flow + for (const flow in policyList) { + if (Object.prototype.hasOwnProperty.call(policyList, flow)) { + const policyArray = policyList[flow]; + policyArray.forEach((policyItem: ApiPolicy) => { + // eslint-disable-next-line no-param-reassign + policyItem.uuid = uuidv4(); + }); + } + } + } + + /** + * Function to get the initial state of all the operation policies from the API object. + * We are setting a unique ID for all the operation policies solely for UI specific operations. + * We use this UUID for edit and delete operations. + * Before saving to backend, we are removing this UUID. + * @returns {Object} The operations object which is cloned from the API object with an additional UUID. + */ + const getInitState = () => { + const clonedOperations = cloneDeep(api.operations); + clonedOperations.forEach((operation: any) => { + if (operation.operationPolicies) { + const { operationPolicies } = operation; + getInitPolicyState(operationPolicies); + } + }); + return clonedOperations; + } + + const getInitAPILevelPoliciesState = () => { + const clonedAPIPolicies = cloneDeep(api.apiPolicies); + if (api.apiPolicies != null) { + getInitPolicyState(clonedAPIPolicies); + } + return clonedAPIPolicies || initApiLevelPolicy; + }; + + const [apiOperations, setApiOperations] = useState(getInitState); + const [apiLevelPolicies, setApiLevelPolicies] = useState(getInitAPILevelPoliciesState); + const [openAPISpec, setOpenAPISpec] = useState(null); + + useEffect(() => { + const currentOperations = getInitState(); + setApiOperations(currentOperations); + + const currentAPIPolicies = getInitAPILevelPoliciesState(); + setApiLevelPolicies(currentAPIPolicies); + }, [api]); + + /** + * Fetches all common policies & API specific policies. + * Sets the allPolicies state: this allPolicies state is used to get policies from any given policy ID. + * Sets the policies state: policy state is used to display the available policies that are draggable. + */ + const fetchPolicies = () => { + const apiPoliciesPromise = API.getOperationPolicies(api.id); + const commonPoliciesPromise = API.getCommonOperationPolicies(); + Promise.all([apiPoliciesPromise, commonPoliciesPromise]).then((response) => { + const [apiPoliciesResponse, commonPoliciesResponse] = response; + const apiSpecificPolicies = apiPoliciesResponse.body.list; + const commonPolicies = commonPoliciesResponse.body.list; + const mergedList = [...commonPolicies, ...apiSpecificPolicies]; + + // Get all common policies and API specific policies + setAllPolicies(mergedList); + + let unionByPolicyDisplayName; + if (showMultiVersionPolicies) { + // Get the union of policies depending on the policy display name and version + unionByPolicyDisplayName = [...mergedList + .reduce((map, obj) => map.set(obj.name + obj.version, obj), new Map()).values()]; + } else { + // Get the union of policies depending on the policy display name + unionByPolicyDisplayName = [...mergedList + .reduce((map, obj) => map.set(obj.name, obj), new Map()).values()]; + } + unionByPolicyDisplayName.sort( + (a: Policy, b: Policy) => a.name.localeCompare(b.name)) + + let filteredByGatewayTypeList = null; + if (!isChoreoConnectEnabled) { + // Get synpase gateway supported policies + filteredByGatewayTypeList = unionByPolicyDisplayName.filter( + (policy: Policy) => policy.supportedGateways.includes('Synapse')); + } else { + // Get CC gateway supported policies + filteredByGatewayTypeList = unionByPolicyDisplayName.filter( + (policy: Policy) => policy.supportedGateways.includes('ChoreoConnect')); + } + + let filteredByAPITypeList = null; + if (api.type === "HTTP") { + // Get HTTP supported policies + filteredByAPITypeList = filteredByGatewayTypeList.filter( + (policy: Policy) => policy.supportedApiTypes.includes('HTTP')); + } else if (api.type === "SOAP"){ + // Get SOAP supported policies + filteredByAPITypeList = filteredByGatewayTypeList.filter( + (policy: Policy) => policy.supportedApiTypes.includes('SOAP')); + } else if (api.type === "SOAPTOREST"){ + // Get SOAP to REST supported policies + filteredByAPITypeList = filteredByGatewayTypeList.filter( + (policy: Policy) => policy.supportedApiTypes.includes('SOAPTOREST')); + } + + setPolicies(filteredByAPITypeList); + + }).catch((error) => { + console.error(error); + Alert.error('Error occurred while retrieving the policy list'); + }); + } + + const removeAPIPoliciesForGatewayChange = () => { + const newApiOperations: any = cloneDeep(apiOperations); + // Set operation policies to the API object + newApiOperations.forEach((operation: any) => { + if (operation.operationPolicies) { + const { operationPolicies } = operation; + + // Iterating through the policy list of request flow, response flow and fault flow + for (const flow in operationPolicies) { + if (Object.prototype.hasOwnProperty.call(operationPolicies, flow)) { + operationPolicies[flow] = []; + } + } + } + }); + setApiOperations(newApiOperations); + setApiLevelPolicies(initApiLevelPolicy); + } + + useEffect(() => { + fetchPolicies(); + if (isChoreoConnectEnabled) { + setSelectedTab(1); + } + }, [isChoreoConnectEnabled]); + + useEffect(() => { + // Update the Swagger spec object when API object gets changed + api.getSwagger() + .then((response: any) => { + const retrievedSpec = response.body; + setOpenAPISpec(retrievedSpec); + + // To expand the first operation by default on page render + const [target, verbObject]: [string, any] = Object.entries(retrievedSpec.paths)[0]; + const verb = Object.keys(verbObject)[0] + setExpandedResource(verb + target) + }) + .catch((error: any) => { + console.error(error); + if (error.response) { + Alert.error(error.response.body.description); + } + }); + }, [api.id]); + + const localAPI = useMemo( + () => ({ + id: api.id, + operations: api.isAPIProduct() ? {} : mapAPIOperations(api.operations), + }), + [api], + ); + + /** + * To update the API Operations object and maintain the current state of attached policies. + * Note that this function does not perform an API object update, rather, just a state update. + * @param {any} updatedOperation updated operation of API object + * @param {string} target target that needs to be updated + * @param {string} verb verb of the operation that neeeds to be updated + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault + */ + const updateApiOperations = ( + updatedOperation: any, target: string, verb: string, currentFlow: string, + ) => { + const newApiOperations: any = cloneDeep(apiOperations); + const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); + + const operationInAction = + selectedTab === operationLevelTab + ? newApiOperations.find( + (op: any) => + op.target === target && + op.verb.toLowerCase() === verb.toLowerCase(), + ) + : null; + + const flowPolicy = ( + selectedTab === apiLevelTab + ? newApiLevelPolicies + : operationInAction.operationPolicies + )[currentFlow].find( + (p: any) => + p.policyId === updatedOperation.policyId && + p.uuid === updatedOperation.uuid, + ); + + + if (flowPolicy) { + // Edit policy + flowPolicy.parameters = { ...updatedOperation.parameters }; + } else { + // Add new policy + const uuid = uuidv4(); + (selectedTab === apiLevelTab ? newApiLevelPolicies : operationInAction + .operationPolicies)[currentFlow].push({ ...updatedOperation, uuid } + ); + } + + // Finally update the state + if (selectedTab === apiLevelTab) { + setApiLevelPolicies(newApiLevelPolicies); + } else { + setApiOperations(newApiOperations); + } + } + + /** + * To update all API Operations with the provided policy. + * Note that this function does not perform an API object update, rather, just a state update. + * @param {any} updatedOperation updated operation of API object + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault + */ + const updateAllApiOperations = (updatedOperation: any, currentFlow: string) => { + const newApiOperations: any = cloneDeep(apiOperations); + + // Add attached policy to the same flow of all the operations + newApiOperations.forEach((operation: any) => { + const uuid = uuidv4(); + operation.operationPolicies[currentFlow].push({ ...updatedOperation, uuid }); + }); + + // Finally update the state + setApiOperations(newApiOperations); + } + + /** + * To delete one API Operation from the apiOperations object + * Note that this function does not perform an API object update, rather, just a state update. + * @param {string} uuid operation uuid + * @param {string} target target that needs to be updated + * @param {string} verb verb of the operation that neeeds to be updated + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault + */ + const deleteApiOperation = (uuid: string, target: string, verb: string, currentFlow: string) => { + + if (selectedTab === apiLevelTab) { + const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); + const index = newApiLevelPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); + newApiLevelPolicies[currentFlow].splice(index, 1); + setApiLevelPolicies(newApiLevelPolicies); + } else { + const newApiOperations: any = cloneDeep(apiOperations); + const operationInAction = newApiOperations.find((op: any) => + op.target === target && op.verb.toLowerCase() === verb.toLowerCase()); + // Find the location of the element using the following logic + /* + [{a:'1'},{a:'2'},{a:'1'}].map( i => i.a) will output ['1', '2', '1'] + [{a:'1'},{a:'2'},{a:'1'}].map( i => i.a).indexOf('2') will output the location of '2' + */ + const index = operationInAction.operationPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); + // delete the element + operationInAction.operationPolicies[currentFlow].splice(index, 1); + + // Finally update the state + setApiOperations(newApiOperations); + } + } + + /** + * Function to rearrange the API Operation ordering + * @param {string} oldIndex original index of the policy + * @param {string} newIndex new index of the policy + * @param {string} target target that needs to be updated + * @param {string} verb verb of the operation that neeeds to be updated + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault + */ + const rearrangeApiOperations = ( + oldIndex: number, newIndex: number, target: string, verb: string, currentFlow: string, + ) => { + if (selectedTab === apiLevelTab) { + const newAPIPolicies: any = cloneDeep(apiLevelPolicies); + const policyArray = newAPIPolicies[currentFlow]; + newAPIPolicies[currentFlow] = arrayMove(policyArray, oldIndex, newIndex); + setApiLevelPolicies(newAPIPolicies); + } else { + const newApiOperations: any = cloneDeep(apiOperations); + const operationInAction = newApiOperations.find((op: any) => + op.target === target && op.verb.toLowerCase() === verb.toLowerCase()); + const policyArray = operationInAction.operationPolicies[currentFlow]; + operationInAction.operationPolicies[currentFlow] = arrayMove(policyArray, oldIndex, newIndex); + setApiOperations(newApiOperations); + } + }; + + const deletePolicyUuid = (operationPolicies: any) => { + // Iterating through the policy list of request flow, response flow and fault flow + for (const flow in operationPolicies) { + if (Object.prototype.hasOwnProperty.call(operationPolicies, flow)) { + const policyArray = operationPolicies[flow]; + policyArray.forEach((policyItem: ApiPolicy) => { + if (policyItem.uuid) { + // eslint-disable-next-line no-param-reassign + delete policyItem.uuid; + } + }); + } + } + }; + + /** + * To update the API object with the attached policies on Save. + */ + const saveApi = () => { + setUpdating(true); + const newApiOperations: any = cloneDeep(apiOperations); + const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); + let getewayTypeForPolicies = "wso2/synapse"; + const getewayVendorForPolicies = "wso2"; + + deletePolicyUuid(newApiLevelPolicies); + // Set operation policies to the API object + newApiOperations.forEach((operation: any) => { + if (operation.operationPolicies) { + const { operationPolicies } = operation; + deletePolicyUuid(operationPolicies); + } + }); + + // Handles normal policy savings for choreo connect gateway type. + if(isChoreoConnectEnabled) { + getewayTypeForPolicies = "wso2/choreo-connect"; + } + + const updatePromise = updateAPI({ + operations: newApiOperations, + apiPolicies: newApiLevelPolicies, + gatewayVendor: getewayVendorForPolicies, + gatewayType: getewayTypeForPolicies + }); + updatePromise + .finally(() => { + setUpdating(false); + }); + }; + + const handleTabChange = (tab: number) => { + setSelectedTab(tab); + }; + + /** + * To memoize the value passed into ApiOperationContextProvider + */ + const providerValue = useMemo( + () => ({ + apiOperations, + apiLevelPolicies, + updateApiOperations, + updateAllApiOperations, + deleteApiOperation, + rearrangeApiOperations, + }), + [ + apiOperations, + apiLevelPolicies, + updateApiOperations, + updateAllApiOperations, + deleteApiOperation, + rearrangeApiOperations, + ], + ); + + if (!policies || !openAPISpec || updating) { + return + } + + return ( + + + + + + + + {(api.type === 'HTTP') && ( + + + + )} + + + + + + handleTabChange(tab) + } + indicatorColor='primary' + textColor='primary' + variant='fullWidth' + aria-label='Policies local to API' + className={classes.flowTabs} + > + + API Level Policies + + } + id='api-level-policies-tab' + aria-controls='api-level-policies-tabpanel' + disabled={isChoreoConnectEnabled} + /> + + Operation Level Policies + + } + id='operation-level-policies-tab' + aria-controls='operation-level-policies-tabpanel' + /> + + + + + + + + + + + + + + + + ); +}; + +export default Policies; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesExpansion.tsx new file mode 100644 index 00000000000..d885ca37861 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesExpansion.tsx @@ -0,0 +1,331 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useContext, useEffect, useState } from 'react'; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; +import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import { FormattedMessage } from 'react-intl'; +import APIContext from 'AppComponents/Apis/Details/components/ApiContext'; +import API from 'AppData/api'; +import PolicyDropzone from './PolicyDropzone'; +import type { AttachedPolicy, Policy, PolicySpec } from './Types'; +import FlowArrow from './components/FlowArrow'; +import ApiOperationContext from './ApiOperationContext'; + +const useStyles = makeStyles((theme: Theme) => ({ + flowSpecificPolicyAttachGrid: { + marginTop: theme.spacing(1), + overflowX: 'scroll', + }, +})); + +const defaultPolicyForMigration = { + id: '', + category: 'Mediation', + name: '', + displayName: '', + version: '', + description: '', + applicableFlows: [], + supportedGateways: ['Synapse'], + supportedApiTypes: [], + policyAttributes: [], + isAPISpecific: true, +}; + +interface PoliciesExpansionProps { + target: any; + verb: string; + allPolicies: PolicySpec[] | null; + isChoreoConnectEnabled: boolean; + policyList: Policy[]; + isAPILevelPolicy: boolean; +} + +const PoliciesExpansion: FC = ({ + target, + verb, + allPolicies, + isChoreoConnectEnabled, + policyList, + isAPILevelPolicy, +}) => { + // Policies attached for each request, response and fault flow + const [requestFlowPolicyList, setRequestFlowPolicyList] = useState([]); + const [responseFlowPolicyList, setResponseFlowPolicyList] = useState([]); + const [faultFlowPolicyList, setFaultFlowPolicyList] = useState([]); + + // Droppable policy identifier list for each request, response and fault flow + const [requestFlowDroppablePolicyList, setRequestFlowDroppablePolicyList] = useState([]); + const [responseFlowDroppablePolicyList, setResponseFlowDroppablePolicyList] = useState([]); + const [faultFlowDroppablePolicyList, setFaultFlowDroppablePolicyList] = useState([]); + + const classes = useStyles(); + const { apiOperations } = useContext(ApiOperationContext); + const { apiLevelPolicies } = useContext(ApiOperationContext); + const { api } = useContext(APIContext); + + useEffect(() => { + const requestList = []; + const responseList = []; + const faultList = []; + for (const policy of policyList) { + if (policy.applicableFlows.includes('request')) { + requestList.push(`policyCard-${policy.id}`); + } + if (policy.applicableFlows.includes('response')) { + responseList.push(`policyCard-${policy.id}`); + } + if (policy.applicableFlows.includes('fault')) { + faultList.push(`policyCard-${policy.id}`); + } + } + setRequestFlowDroppablePolicyList(requestList); + setResponseFlowDroppablePolicyList(responseList); + setFaultFlowDroppablePolicyList(faultList); + }, [policyList]); + + useEffect(() => { + (async () => { + + const operationInAction = (!isAPILevelPolicy) ? apiOperations.find( + (op: any) => + op.target === target && + op.verb.toLowerCase() === verb.toLowerCase(), + ) : null; + const apiPolicies = (isAPILevelPolicy) ? apiLevelPolicies : null; + + // Populate request flow attached policy list + const requestFlowList: AttachedPolicy[] = []; + const requestFlow = (isAPILevelPolicy) ? apiPolicies.request : operationInAction.operationPolicies.request; + for (const requestFlowAttachedPolicy of requestFlow) { + const { policyId, policyName, policyVersion, uuid } = + requestFlowAttachedPolicy; + if (policyId === null) { + // Handling migration flow + requestFlowList.push({ + ...defaultPolicyForMigration, + name: policyName, + displayName: policyName, + applicableFlows: ['request'], + uniqueKey: uuid, + }); + } else { + const policyObj = allPolicies?.find( + (policy: PolicySpec) => + policy.name === policyName && + policy.version === policyVersion, + ); + if (policyObj) { + requestFlowList.push({ ...policyObj, uniqueKey: uuid }); + } else { + try { + // eslint-disable-next-line no-await-in-loop + const policyResponse = await API.getOperationPolicy( + policyId, + api.id, + ); + if (policyResponse) + requestFlowList.push({ + ...policyResponse.body, + uniqueKey: uuid, + }); + } catch (error) { + console.error(error); + } + } + } + } + setRequestFlowPolicyList(requestFlowList); + + // Populate response flow attached policy list + const responseFlowList: AttachedPolicy[] = []; + const responseFlow = isAPILevelPolicy ? apiPolicies.response : operationInAction.operationPolicies.response; + for (const responseFlowAttachedPolicy of responseFlow) { + const { policyId, policyName, policyVersion, uuid } = + responseFlowAttachedPolicy; + if (policyId === null) { + // Handling migration flow + responseFlowList.push({ + ...defaultPolicyForMigration, + name: policyName, + displayName: policyName, + applicableFlows: ['response'], + uniqueKey: uuid, + }); + } else { + const policyObj = allPolicies?.find( + (policy: PolicySpec) => + policy.name === policyName && + policy.version === policyVersion, + ); + if (policyObj) { + responseFlowList.push({ ...policyObj, uniqueKey: uuid }); + } else { + try { + // eslint-disable-next-line no-await-in-loop + const policyResponse = await API.getOperationPolicy( + policyId, + api.id, + ); + if (policyResponse) + responseFlowList.push({ + ...policyResponse.body, + uniqueKey: uuid, + }); + } catch (error) { + console.error(error); + } + } + } + } + setResponseFlowPolicyList(responseFlowList); + + if (!isChoreoConnectEnabled) { + // Populate fault flow attached policy list + const faultFlowList: AttachedPolicy[] = []; + const faultFlow = isAPILevelPolicy ? apiPolicies.fault : operationInAction.operationPolicies.fault; + for (const faultFlowAttachedPolicy of faultFlow) { + const { policyId, policyName, policyVersion, uuid } = + faultFlowAttachedPolicy; + if (policyId === null) { + // Handling migration flow + faultFlowList.push({ + ...defaultPolicyForMigration, + name: policyName, + displayName: policyName, + applicableFlows: ['fault'], + uniqueKey: uuid, + }); + } else { + const policyObj = allPolicies?.find( + (policy: PolicySpec) => + policy.name === policyName && + policy.version === policyVersion, + ); + if (policyObj) { + faultFlowList.push({ ...policyObj, uniqueKey: uuid }); + } else { + try { + // eslint-disable-next-line no-await-in-loop + const policyResponse = await API.getOperationPolicy( + policyId, + api.id, + ); + if (policyResponse) + faultFlowList.push({ + ...policyResponse.body, + uniqueKey: uuid, + }); + } catch (error) { + console.error(error); + } + } + } + } + setFaultFlowPolicyList(faultFlowList); + } + })(); + }, [apiOperations, apiLevelPolicies]); + + return ( + + + + + + + + + + + + + + + + + + {!isChoreoConnectEnabled && ( + + + + + + + + )} + + + + ); +}; + +export default PoliciesExpansion; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesSection.tsx new file mode 100644 index 00000000000..ca3960160af --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesSection.tsx @@ -0,0 +1,141 @@ +/* + * Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Grid, makeStyles } from '@material-ui/core'; +import React, { FC } from 'react'; +import Box from '@material-ui/core/Box'; +import CONSTS from 'AppData/Constants'; +import { isRestricted } from 'AppData/AuthManager'; +import Alert from '@material-ui/lab/Alert'; +import { FormattedMessage } from 'react-intl'; +import OperationPolicy from './OperationPolicy'; +import OperationsGroup from './OperationsGroup'; +import type { Policy, PolicySpec } from './Types'; +import PoliciesExpansion from './PoliciesExpansion'; + +const useStyles = makeStyles(() => ({ + gridItem: { + display: 'flex', + width: '100%', + }, + alert: { + backgroundColor: 'transparent', + marginTop: '-25px', + marginBottom: '-15px', + }, +})); + +interface PolicySectionProps { + openAPISpec: any; + isChoreoConnectEnabled: boolean; + isAPILevelTabSelected: boolean; + allPolicies: PolicySpec[] | null; + policyList: Policy[]; + api: any; + expandedResource: string | null; + setExpandedResource: React.Dispatch>; +} + +/** + * Renders the policy management page. + * @returns {TSX} Policy management page to render. + */ +const PoliciesSection: FC = ({ + openAPISpec, + isChoreoConnectEnabled, + isAPILevelTabSelected, + allPolicies, + policyList, + api, + expandedResource, + setExpandedResource, +}) => { + const classes = useStyles(); + const borderColor = ''; + + return ( + + {isAPILevelTabSelected ? ( + + + + + + + + ) : ( + + {!isChoreoConnectEnabled && ( + + + + + )} + {Object.entries(openAPISpec.paths).map(([target, verbObject]: [string, any]) => ( + + + + {Object.entries(verbObject).map(([verb, operation]) => { + return CONSTS.HTTP_METHODS.includes(verb) ? ( + + + + ) : null; + })} + + + + ))} + + )} + + ); +}; + +export default PoliciesSection; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfigurationEditDrawer.tsx new file mode 100644 index 00000000000..244469620b5 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfigurationEditDrawer.tsx @@ -0,0 +1,180 @@ +/* eslint-disable */ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useEffect, useContext, useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import Box from '@material-ui/core/Box'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import { + Drawer, + makeStyles, + ListItemIcon, + Theme, + Typography, +} from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import { Settings, Close } from '@material-ui/icons'; +import Divider from '@material-ui/core/Divider'; +import General from './AttachedPolicyForm/General'; +import type { PolicySpec, ApiPolicy, AttachedPolicy } from './Types'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import ApiOperationContext from './ApiOperationContext'; +import API from 'AppData/api'; + +const useStyles = makeStyles((theme: Theme) => ({ + drawerPaper: { + backgroundColor: 'white', + width: '30%', + }, + iconSize: { + height: '1.2em', + width: '1.2em', + color: theme.palette.grey[700], + }, +})); + +interface PolicyConfigurationEditDrawerProps { + policyObj: AttachedPolicy | null; + currentFlow: string; + target: string; + verb: string; + drawerOpen: boolean; + setDrawerOpen: React.Dispatch>; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; +} + +/** + * Renders the policy configuration edit drawer. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Right drawer for policy configuration. + */ +const PolicyConfigurationEditDrawer: FC = ({ + policyObj, + currentFlow, + target, + verb, + allPolicies, + drawerOpen, + setDrawerOpen, + isAPILevelPolicy, +}) => { + const classes = useStyles(); + const { api } = useContext(ApiContext); + const { apiOperations } = useContext(ApiOperationContext); + const { apiLevelPolicies } = useContext(ApiOperationContext); + const [policySpec, setPolicySpec] = useState(); + + useEffect(() => { + (async () => { + if (policyObj) { + let policySpecVal = allPolicies?.find( + (policy: PolicySpec) => policy.name === policyObj.name, + ); + + // If this policy is a deleted common policy we need to do an API call to get the policy specification + if (!policySpecVal) { + const policyResponse = await API.getOperationPolicy( + policyObj.id, + api.id, + ); + policySpecVal = policyResponse.body; + } + + setPolicySpec(policySpecVal); + setDrawerOpen(true); + } + })(); + }, [policyObj]); + + const operationInAction = (!isAPILevelPolicy) ? apiOperations.find( + (op: any) => + op.target === target && + op.verb.toLowerCase() === verb.toLowerCase(), + ) : null; + const operationFlowPolicy = ((isAPILevelPolicy) ? apiLevelPolicies : operationInAction.operationPolicies)[ + currentFlow + ].find((policy: any) => policy.uuid === policyObj?.uniqueKey); + + const apiPolicy: ApiPolicy = operationFlowPolicy || { + policyName: policyObj?.name, + policyId: policyObj?.id, + policyVersion: policyObj?.version, + parameters: {}, + }; + + const handleDrawerClose = () => { + setDrawerOpen(false); + }; + + return ( + + + + + + + + + + + } + /> + + + + + + + + + {policySpec && ( + + )} + + + ); +}; + +export default PolicyConfigurationEditDrawer; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfiguringDrawer.tsx new file mode 100644 index 00000000000..ca78c9767e6 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfiguringDrawer.tsx @@ -0,0 +1,176 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useEffect, useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import Box from '@material-ui/core/Box'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import { + Drawer, + makeStyles, + ListItemIcon, + Theme, + Typography, +} from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import { Settings, Close } from '@material-ui/icons'; +import Divider from '@material-ui/core/Divider'; +import { Progress } from 'AppComponents/Shared'; +import General from './AttachedPolicyForm/General'; +import { PolicySpec, ApiPolicy, Policy } from './Types'; + +const useStyles = makeStyles((theme: Theme) => ({ + drawerPaper: { + backgroundColor: 'white', + width: '30%', + }, + iconSize: { + height: '1.2em', + width: '1.2em', + color: theme.palette.grey[700], + }, +})); + +interface PolicyConfiguringDrawerProps { + policyObj: Policy | null; + setDroppedPolicy: React.Dispatch>; + currentFlow: string; + target: string; + verb: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; +} + +/** + * Renders the policy configuring drawer. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Right drawer for policy configuration. + */ +const PolicyConfiguringDrawer: FC = ({ + policyObj, + setDroppedPolicy, + currentFlow, + target, + verb, + allPolicies, + isAPILevelPolicy, +}) => { + const classes = useStyles(); + const [drawerOpen, setDrawerOpen] = useState(!!policyObj); + const [policySpec, setPolicySpec] = useState(); + + useEffect(() => { + if (policyObj) { + setPolicySpec( + allPolicies?.find( + (policy: PolicySpec) => policy.id === policyObj.id, + ), + ); + setDrawerOpen(true); + } + }, [policyObj]); + + if (!policySpec) { + return ; + } + + const apiPolicy: ApiPolicy = { + policyName: policyObj?.name, + policyId: policyObj?.id, + policyVersion: policyObj?.version, + parameters: {}, + }; + + const handleDrawerClose = () => { + setDrawerOpen(false); + setDroppedPolicy(null); + }; + + /** + * Converts the PolicyObj prop of type Policy to AttachedPolicy + * @returns {AttachedPolicy} Returns a policy object of type AttachedPolicy + */ + const getPolicyOfTypeAttachedPolicy = () => { + if (policyObj) { + return { + id: policyObj?.id, + name: policyObj?.name, + displayName: policyObj?.displayName, + version: policyObj?.version, + applicableFlows: policyObj?.applicableFlows, + uniqueKey: '', + }; + } else { + return null; + } + }; + + return ( + + + + + + + + + + + } + /> + + + + + + + + + + + + ); +}; + +export default PolicyConfiguringDrawer; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyDropzone.tsx new file mode 100644 index 00000000000..805c3a31160 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyDropzone.tsx @@ -0,0 +1,154 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useState } from 'react'; +import { Grid, makeStyles, Theme, Typography } from '@material-ui/core'; +import { useDrop } from 'react-dnd'; +import green from '@material-ui/core/colors/green'; +import red from '@material-ui/core/colors/red'; +import clsx from 'clsx'; +import type { AttachedPolicy, Policy, PolicySpec } from './Types'; +import AttachedPolicyList from './AttachedPolicyList'; +import PolicyConfiguringDrawer from './PolicyConfiguringDrawer'; + +const useStyles = makeStyles((theme: Theme) => ({ + dropzoneDiv: { + border: '1px dashed', + borderColor: theme.palette.primary.main, + height: '8rem', + padding: '0.8rem', + width: '100%', + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + textAlign: 'center', + borderRadius: '0.3em', + display: 'flex', + alignItems: 'center', + overflowX: 'scroll', + }, + acceptDrop: { + backgroundColor: green[50], + borderColor: 'green', + }, + rejectDrop: { + backgroundColor: red[50], + borderColor: 'red', + }, + alignLeft: { + justifyContent: 'left', + }, + alignRight: { + justifyContent: 'right', + }, + alignCenter: { + justifyContent: 'center', + }, +})); + +interface PolicyDropzoneProps { + policyDisplayStartDirection: string; + currentPolicyList: AttachedPolicy[]; + setCurrentPolicyList: React.Dispatch< + React.SetStateAction + >; + droppablePolicyList: string[]; + currentFlow: string; + target: string; + verb: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; +} + +/** + * Renders the dropzone which accepts policy cards that are dragged and dropped. + * @param {JSON} props Input props from parent components. + * @returns {TSX} List of policies local to the API segment. + */ +const PolicyDropzone: FC = ({ + policyDisplayStartDirection, + currentPolicyList, + setCurrentPolicyList, + droppablePolicyList, + currentFlow, + target, + verb, + allPolicies, + isAPILevelPolicy, +}) => { + const classes = useStyles(); + const [droppedPolicy, setDroppedPolicy] = useState(null); + + const [{ canDrop }, drop] = useDrop({ + accept: droppablePolicyList, + drop: (item: any) => setDroppedPolicy(item.droppedPolicy), + collect: (monitor) => ({ + canDrop: monitor.canDrop(), + }), + }); + + return ( + <> + +
+ {currentPolicyList.length === 0 ? ( + Drag and drop policies here + ) : ( + + )} +
+ + {droppedPolicy && ( + + )} + + ); +}; + +export default PolicyDropzone; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/GeneralDetails.tsx new file mode 100644 index 00000000000..8f182c18e0a --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/GeneralDetails.tsx @@ -0,0 +1,414 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import InputAdornment from '@material-ui/core/InputAdornment'; +import TextField from '@material-ui/core/TextField'; +import Typography from '@material-ui/core/Typography'; +import { FormattedMessage } from 'react-intl'; +import FormControl from '@material-ui/core/FormControl'; +import { ACTIONS } from './PolicyCreateForm'; + +const useStyles = makeStyles((theme: Theme) => ({ + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, + formGroup: { + display: 'flex', + flexDirection: 'row', + }, +})); + +interface GeneralDetailsProps { + displayName: string | null; + version: string | null; + description: string; + applicableFlows: string[]; + supportedApiTypes: string[]; + dispatch?: React.Dispatch; + isViewMode: boolean; +} + +/** + * Renders the general details section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} General details of the policy. + */ +const GeneralDetails: FC = ({ + displayName, + version, + description, + applicableFlows, + supportedApiTypes, + dispatch, + isViewMode, +}) => { + const classes = useStyles(); + + // Validates whether atleast one flow (i.e. request, response or fault) is selected + // True if none of the flows are selected. + const applicableFlowsError = applicableFlows.length === 0; + + // Validates whether atleast one Api Type (i.e. HTTP, SOAP or SOAPTOREST) is selected + // True if none of the API types are selected. + const supportedApiTypesError = supportedApiTypes.length === 0; + + // Name validation + const nameError = displayName === ''; + + // Version validation + const versionError = version === ''; + + /** + * Function to handle text field inputs + * @param {React.ChangeEvent} event event + */ + const handleInputChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_METADATA, + field: event.target.name, + value: event.target.value, + }); + } + }; + + /** + * Function to handle applicable flows related checkbox changes + * @param {React.ChangeEvent} event event + */ + const handleChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_APPLICALBLE_FLOWS, + name: event.target.name, + checked: event.target.checked, + }); + } + }; + + /** + * Function to handle supported Api Type related checkbox changes + * @param {React.ChangeEvent} event event + */ + const handleApiTypeChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_SUPPORTED_API_TYPES, + name: event.target.name, + checked: event.target.checked, + }); + } + }; + + return ( + + + + + + + + + + + + + + + } + error={nameError} + helperText={ + nameError ? ( + 'Name is Empty' + ) : ( + + ) + } + margin='dense' + variant='outlined' + value={displayName} + onChange={handleInputChange} + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? { cursor: 'auto' } : {}, + }} + /> + + + + } + error={versionError} + helperText={ + versionError ? ( + 'Version is Empty' + ) : ( + + ) + } + margin='dense' + variant='outlined' + value={ + isViewMode && version ? ( + version.replace('v', '') + ) : ( + version + ) + } + onChange={handleInputChange} + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? { cursor: 'auto' } : {}, + }} + InputProps={{ + startAdornment: v, + }} + /> + + + + } + helperText={ + + } + fullWidth + margin='dense' + variant='outlined' + value={description} + onChange={handleInputChange} + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? { cursor: 'auto' } : {}, + }} + /> + + + + * + + + + + + } + label='Request' + data-testid='request-flow' + /> + + } + label='Response' + data-testid='response-flow' + /> + + } + label='Fault' + data-testid='fault-flow' + /> + + + {applicableFlowsError + ? 'Please select one or more flows' + : ''} + + + + + + + + * + + + + + + } + label='HTTP' + data-testid='http-type' + /> + + } + label='SOAP' + data-testid='soap-type' + /> + + } + label='SOAPTOREST' + data-testid='soaptorest-flow' + /> + + + {supportedApiTypesError + ? 'Please select one or more API Types' + : ''} + + + + + + + + ); +}; + +export default React.memo(GeneralDetails); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyAttributes.tsx new file mode 100644 index 00000000000..88a6ff35950 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyAttributes.tsx @@ -0,0 +1,740 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useState, } from 'react'; +import { Button, makeStyles, Theme } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import TextField from '@material-ui/core/TextField'; +import Grid from '@material-ui/core/Grid'; +import Popover from '@material-ui/core/Popover'; +import Select from '@material-ui/core/Select'; +import FormControl from '@material-ui/core/FormControl'; +import InputLabel from '@material-ui/core/InputLabel'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import PriorityHighOutlined from '@material-ui/icons/PriorityHighOutlined'; +import { FormattedMessage, useIntl } from 'react-intl'; +import Tooltip from '@material-ui/core/Tooltip'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import SubjectOutlinedIcon from '@material-ui/icons/SubjectOutlined'; +import FormatListBulletedOutlinedIcon from '@material-ui/icons/FormatListBulletedOutlined'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { AddCircle } from '@material-ui/icons'; +import { PolicyAttribute } from './Types'; +import { ACTIONS } from './PolicyCreateForm'; + +const useStyles = makeStyles((theme: Theme) => ({ + attributeProperty: { + marginLeft: theme.spacing(0.5), + marginRight: theme.spacing(0.5), + }, + formControlSelect: { + marginTop: theme.spacing(2), + }, + selectRoot: { + padding: '11.5px 14px', + width: 100, + }, + buttonIcon: { + marginRight: theme.spacing(1), + }, + requiredToggleButton: { + height: '37.28px', + width: '37.28px', + '&.Mui-selected, &.Mui-selected:hover': { + color: 'white', + backgroundColor: theme.palette.primary.main, + } + }, + toggleButton: { + height: '37.28px', + width: '37.28px', + }, +})); + +interface PolicyAttributesProps { + policyAttributes: PolicyAttribute[]; + dispatch?: React.Dispatch; + isViewMode: boolean; +} + +/** + * Handles the addition of policy attributes for a given policy. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy attributes UI. + */ +const PolicyAttributes: FC = ({ + policyAttributes, dispatch, isViewMode +}) => { + const classes = useStyles(); + const intl = useIntl(); + const [descriptionAnchorEl, setDescriptionAnchorEl] = useState(null); + const [valuePropertiesAnchorEl, setValuePropertiesAnchorEl] = useState(null); + const [openedDescriptionPopoverId, setOpenedDescriptionPopoverId] = useState(null); + const [openedValuesPopoverId, setOpenedValuesPopoverId] = useState(null); + + const addNewPolicyAttribute = () => { + if (dispatch) { + dispatch({ type: ACTIONS.ADD_POLICY_ATTRIBUTE }); + } + } + + const getAttributeFormError = (attribute: PolicyAttribute, fieldName: string) => { + let error = ''; + switch(fieldName) { + case 'name': { + if (attribute.name === '') { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.name.required.error', + defaultMessage: 'Name is Empty', + }); + } + return error; + } + case 'displayName': { + if (attribute.displayName === '') { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.displayName.required.error', + defaultMessage: 'Display Name is Empty', + }); + } + return error; + } + case 'validationRegex': { + const regex = attribute.validationRegex; + if (regex && regex !== '') { + try { + // eslint-disable-next-line no-new + new RegExp(regex); + } catch(e) { + error = intl.formatMessage({ + id: 'AApis.Details.Policies.PolicyForm.PolicyAttributes.validationRegex.invalid', + defaultMessage: 'Provided regular expression is invalid', + }) + } + } + return error; + } + case 'defaultValue': { + const defaultVal = attribute.defaultValue; + const regex = attribute.validationRegex; + if (defaultVal && defaultVal !== '' && regex && regex !== '') { + try { + if (!new RegExp(regex).test(defaultVal)) { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.defaultValue.validation.error', + defaultMessage: 'Please enter a valid input', + }); + } + } catch(e) { + console.error(e); + } + } + return error; + } + default: + return error; + } + } + + /** + * Function to handle form inputs + * @param {any} event Event + * @param {string} id Policy Attribute ID + */ + const handleAttributeChange = (event: any, id: string) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, + id, + field: event.target.name, + value: event.target.value + }); + } + } + + /** + * Function to handle toggle of required attribute + * @param {boolean} currentState Current state of the required attrbute before toggle + * @param {string} id Policy Attribute ID + */ + const handleToggle = (currentState: boolean, id: string) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, + id, + field: 'required', + value: !currentState, + }); + } + } + + /** + * Function to handle allowed values attribute + * @param {React.ChangeEvent} event Event + * @param {string} id Policy Attribute ID + */ + const handleAllowedValues = (event: React.ChangeEvent, id: string) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, + id, + field: event.target.name, + value: event.target.value.split(/[,][\s]*/) + }); + } + } + + // Description toggle button related actions + const handleDescriptionToggle = (event: React.FormEvent, id: string) => { + setOpenedDescriptionPopoverId(id); + setDescriptionAnchorEl(event.currentTarget); + } + const handleDescriptionClose = () => { + setOpenedDescriptionPopoverId(null); + setDescriptionAnchorEl(null); + }; + + // Value properties toggle button related actions + const handleValuePropertiesToggle = (event: React.FormEvent, id: string) => { + setOpenedValuesPopoverId(id); + setValuePropertiesAnchorEl(event.currentTarget); + } + const handleValuePropertiesClose = () => { + setOpenedValuesPopoverId(null); + setValuePropertiesAnchorEl(null); + }; + + return ( + <> + + + + + + + + + + + {!isViewMode && ( + + + + + + + + )} + {isViewMode && policyAttributes.length === 0 && ( + + + + + + + + + + )} + + + + + {policyAttributes.map((attribute: PolicyAttribute) => ( + + + + + + } + error={getAttributeFormError(attribute, 'name') !== ''} + margin='dense' + value={attribute.name} + data-testid='add-policy-attribute-name-btn' + helperText={ + getAttributeFormError( + attribute, + 'name', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + } + error={getAttributeFormError(attribute, 'displayName') !== ''} + margin='dense' + value={attribute.displayName} + data-testid='add-policy-attribute-display-name-btn' + helperText={ + getAttributeFormError( + attribute, + 'displayName', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + {/* Attribute required or not */} + + } + arrow + > + handleToggle(attribute.required, attribute.id)} + style={ isViewMode ? {cursor: 'auto'} : {}} + > + + + + + {/* Attribute description */} + + } + arrow + > + handleDescriptionToggle(e, attribute.id)} + > + + + + + + + } + error={getAttributeFormError(attribute, 'description') !== ''} + margin='dense' + value={attribute.description} + helperText={ + getAttributeFormError( + attribute, + 'description', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + {/* Attribute values */} + + } + arrow + > + handleValuePropertiesToggle(e, attribute.id)} + > + + + + + + + + + + + + + {/* Type */} + + Type + + Attribute Type + + + {/* Allowed Values */} + {attribute.type.toLowerCase() === 'enum' && ( + + + } + margin='dense' + variant='outlined' + value={attribute.allowedValues} + helperText={ + + } + onChange={ + (e) => handleAllowedValues(e, attribute.id) + } + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + )} + + {/* Validation Regex */} + + + } + error={ + getAttributeFormError( + attribute, + 'validationRegex', + ) !== '' + } + margin='dense' + value={attribute.validationRegex} + helperText={ + getAttributeFormError( + attribute, + 'validationRegex', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + {/* Default Value */} + + + } + error={ + getAttributeFormError( + attribute, + 'defaultValue' + ) !== '' + } + margin='dense' + value={attribute.defaultValue} + helperText={ + getAttributeFormError( + attribute, + 'defaultValue', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + + + {/* Attribute delete */} + + } + arrow + > + + dispatch && dispatch({ + type: ACTIONS.DELETE_POLICY_ATTRIBUTE, + id: attribute.id, + }) + } + style={ isViewMode ? {cursor: 'auto'} : {}} + > + + + + + + + + + ))} + + + + ); +} + +export default React.memo(PolicyAttributes); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyCreateForm.tsx new file mode 100644 index 00000000000..6f71a321ece --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyCreateForm.tsx @@ -0,0 +1,345 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useEffect, useReducer, useState } from 'react'; +import { CircularProgress, makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Divider from '@material-ui/core/Divider'; +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import { FormattedMessage } from 'react-intl'; +import { isRestricted } from 'AppData/AuthManager'; +import CONSTS from 'AppData/Constants'; +import type { CreatePolicySpec } from '../Types'; +import type { NewPolicyState, PolicyAttribute } from './Types'; +import PolicyAttributes from './PolicyAttributes'; +import uuidv4 from '../Utils'; +import GeneralDetails from './GeneralDetails'; +import SourceDetails from './SourceDetails'; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + marginTop: 10, + display: 'flex', + flexDirection: 'column', + padding: 20, + }, + cancelBtn: { + marginLeft: theme.spacing(1), + }, +})); + +export const ACTIONS = { + UPDATE_POLICY_METADATA: 'updatePolicyMetadata', + UPDATE_APPLICALBLE_FLOWS: 'updateApplicableFlows', + UPDATE_SUPPORTED_API_TYPES: 'updateSupportedApiTypes', + UPDATE_SUPPORTED_GATEWAYS: 'updateSupportedGateways', + ADD_POLICY_ATTRIBUTE: 'addPolicyAttribute', + UPDATE_POLICY_ATTRIBUTE: 'updatePolicyAttribute', + DELETE_POLICY_ATTRIBUTE: 'deletePolicyAttribute', +}; + +/** + * Reducer to manage policy creation related logic + * @param {NewPolicyState} state State + * @param {any} action Action + * @returns {Promise} Promised state + */ +function policyReducer(state: NewPolicyState, action: any) { + switch (action.type) { + case ACTIONS.UPDATE_POLICY_METADATA: { + return { + ...state, + [action.field]: action.value, + }; + } + case ACTIONS.UPDATE_APPLICALBLE_FLOWS: { + return { + ...state, + applicableFlows: action.checked + ? [...state.applicableFlows, action.name] + : state.applicableFlows.filter( + (flow: string) => flow !== action.name, + ), + }; + } + case ACTIONS.UPDATE_SUPPORTED_API_TYPES: { + return { + ...state, + supportedApiTypes: action.checked + ? [...state.supportedApiTypes, action.name] + : state.supportedApiTypes.filter( + (apiType: string) => apiType !== action.name, + ), + }; + } + case ACTIONS.UPDATE_SUPPORTED_GATEWAYS: { + return { + ...state, + supportedGateways: action.checked + ? [...state.supportedGateways, action.name] + : state.supportedGateways.filter( + (gateway: string) => gateway !== action.name, + ), + }; + } + case ACTIONS.ADD_POLICY_ATTRIBUTE: { + return { + ...state, + policyAttributes: [ + ...state.policyAttributes, + { + id: uuidv4(), + name: null, + displayName: null, + version: null, + description: '', + required: false, + type: 'String', + validationRegex: null, + defaultValue: null, + allowedValues: [], + }, + ], + }; + } + case ACTIONS.UPDATE_POLICY_ATTRIBUTE: { + return { + ...state, + policyAttributes: state.policyAttributes.map( + (policyAttribute: PolicyAttribute) => + policyAttribute.id === action.id + ? { + ...policyAttribute, + [action.field]: action.value, + } + : policyAttribute, + ), + }; + } + case ACTIONS.DELETE_POLICY_ATTRIBUTE: { + return { + ...state, + policyAttributes: state.policyAttributes.filter( + (policyAttribute: PolicyAttribute) => + policyAttribute.id !== action.id, + ), + }; + } + default: + return state; + } +} + +interface PolicyCreateFormProps { + onSave: (policySpecification: CreatePolicySpec) => void; + synapsePolicyDefinitionFile: any[]; + setSynapsePolicyDefinitionFile: React.Dispatch>; + ccPolicyDefinitionFile: any[]; + setCcPolicyDefinitionFile: React.Dispatch>; + onCancel: () => void; + saving: boolean; +} + +/** + * Renders the policy create form. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Right drawer for policy configuration. + */ +const PolicyCreateForm: FC = ({ + onSave, + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + onCancel, + saving, +}) => { + const classes = useStyles(); + const initialState: NewPolicyState = { + displayName: null, + version: null, + description: '', + applicableFlows: ['request', 'response', 'fault'], + supportedApiTypes: ['HTTP'], + supportedGateways: ['Synapse'], + policyAttributes: [], + }; + const [state, dispatch] = useReducer(policyReducer, initialState); + const [isFormDisabled, setIsFormDisabled] = useState(false); + + useEffect(() => { + let hasError = false; + + // Display name current state validation + if (!state.displayName || state.displayName === '') hasError = true; + + // Display name current state validation + if (!state.version || state.version === '') hasError = true; + + // Applicable flows current state validation + if (state.applicableFlows.length === 0) hasError = true; + + // Applicable api types current state validation + if (state.supportedApiTypes.length === 0) hasError = true; + + // Supported gateways current state validation + if (state.supportedGateways.length === 0) hasError = true; + + // Policy file upload current state validation for Synapse + if ( + state.supportedGateways.includes(CONSTS.GATEWAY_TYPE.synapse) && + synapsePolicyDefinitionFile.length === 0 + ) + hasError = true; + + // Policy file upload current state validation for Choreo Connect + if ( + state.supportedGateways.includes(CONSTS.GATEWAY_TYPE.choreoConnect) && + ccPolicyDefinitionFile.length === 0 + ) + hasError = true; + + // Policy attributes current state validation + state.policyAttributes.forEach((attribute: PolicyAttribute) => { + if ( + !attribute.name || + !attribute.displayName || + attribute.name === '' || + attribute.displayName === '' + ) + hasError = true; + }); + + setIsFormDisabled(hasError); + }, [ + state.displayName, + state.version, + state.applicableFlows, + state.supportedApiTypes, + state.supportedGateways, + state.policyAttributes, + synapsePolicyDefinitionFile, + ccPolicyDefinitionFile + ]); + + /** + * Cleans and retrieves the policy attributes of the policy to be created + * @returns {PolicyAttribute[]} List of policy attributes relevant to the policy to be created + */ + const getPolicyAttributes = () => { + const policyAttributesCopy = state.policyAttributes.map((attribute: PolicyAttribute) => { + return { + name: attribute.name, + displayName: attribute.displayName, + version: attribute.version, + description: attribute.description, + required: attribute.required, + type: attribute.type, + ...(attribute.validationRegex !== null ? {validationRegex: attribute.validationRegex} : {}), + ...(attribute.defaultValue !== null ? {defaultValue: attribute.defaultValue} : {}), + allowedValues: attribute.allowedValues, + } + }) + return policyAttributesCopy; + } + + const onPolicySave = () => { + if (state.displayName) { + const policySpec = { + category: 'Mediation', + name: state.displayName.replace(/[^A-Za-z0-9]+/gi, ''), + displayName: state.displayName, + version: 'v' + state.version, + description: state.description, + applicableFlows: state.applicableFlows, + supportedApiTypes: state.supportedApiTypes, + supportedGateways: state.supportedGateways, + policyAttributes: getPolicyAttributes(), + }; + onSave(policySpec); + } + }; + + return ( + + {/* General details of policy */} + + + {/* Gateway specific details of policy */} + + + {/* Attributes of policy */} + + + + + + + ); +}; + +export default PolicyCreateForm; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyViewForm.tsx new file mode 100644 index 00000000000..8e427d82038 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyViewForm.tsx @@ -0,0 +1,101 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { makeStyles } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Divider from '@material-ui/core/Divider'; +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import { FormattedMessage } from 'react-intl'; +import type { PolicySpec, PolicySpecAttribute } from '../Types'; +import PolicyAttributes from './PolicyAttributes'; +import GeneralDetails from './GeneralDetails'; +import SourceDetails from './SourceDetails'; +import uuidv4 from '../Utils'; + +const useStyles = makeStyles(() => ({ + root: { + flexGrow: 1, + marginTop: 10, + display: 'flex', + flexDirection: 'column', + padding: 20, + }, +})); + +interface PolicyViewFormProps { + policySpec: PolicySpec; + onDone: () => void; +} + +/** + * Renders the policy view form. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Right drawer for policy configuration. + */ +const PolicyViewForm: FC = ({ policySpec, onDone }) => { + const classes = useStyles(); + + const getPolicyAttributes = () => { + const policyAttributeList = policySpec.policyAttributes.map( + (attribute: PolicySpecAttribute) => { + return { ...attribute, id: uuidv4() }; + }, + ); + return policyAttributeList; + }; + + return ( + + {/* General details of policy */} + + + {/* Gateway specific details of policy */} + + + {/* Attributes of policy */} + + + + + + ); +}; + +export default PolicyViewForm; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/SourceDetails.tsx new file mode 100644 index 00000000000..18098ad531d --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/SourceDetails.tsx @@ -0,0 +1,339 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC, useContext } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import Typography from '@material-ui/core/Typography'; +import { FormattedMessage } from 'react-intl'; +import FormControl from '@material-ui/core/FormControl'; +import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; +import Button from '@material-ui/core/Button'; +import Utils from 'AppData/Utils'; +import API from 'AppData/api.js'; +import { Alert } from 'AppComponents/Shared'; +import CONSTS from 'AppData/Constants'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import { ACTIONS } from './PolicyCreateForm'; +import UploadPolicyDropzone from './UploadPolicyDropzone'; + +const useStyles = makeStyles((theme: Theme) => ({ + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, + formGroup: { + display: 'flex', + flexDirection: 'row', + }, +})); + +export const GATEWAY_TYPE_LABELS = { + SYNAPSE: 'Regular Gateway', + CC: 'Choreo Connect' +} + +interface SourceDetailsProps { + supportedGateways: string[]; + synapsePolicyDefinitionFile?: any[]; + setSynapsePolicyDefinitionFile?: React.Dispatch>; + ccPolicyDefinitionFile?: any[]; + setCcPolicyDefinitionFile?: React.Dispatch>; + dispatch?: React.Dispatch; + isViewMode?: boolean; + policyId?: string; + isAPISpecific?: boolean; +} + +/** + * Renders the general details section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} General details of the policy. + */ +const SourceDetails: FC = ({ + supportedGateways, + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + dispatch, + isViewMode, + policyId, + isAPISpecific, +}) => { + const classes = useStyles(); + const { api } = useContext(ApiContext); + + // Validates whether atleast one gateway type (i.e. synapse, or CC ) is selected + // True if none of the available gateways are selected. + const supportedGatewaysError = supportedGateways.length === 0; + + /** + * Function to handle supported gateways related checkbox changes + * @param {React.ChangeEvent} event event + */ + const handleChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_SUPPORTED_GATEWAYS, + name: + event.target.name === 'regularGateway' + ? CONSTS.GATEWAY_TYPE.synapse + : CONSTS.GATEWAY_TYPE.choreoConnect, + checked: event.target.checked, + }); + } + }; + + /** + * Hanlde policy download + */ + const handlePolicyDownload = () => { + if (policyId) { + if (isAPISpecific) { + const apiPolicyContentPromise = API.getOperationPolicyContent( + policyId, + api.id, + ); + apiPolicyContentPromise + .then((apiPolicyResponse) => { + Utils.forceDownload(apiPolicyResponse); + }) + .catch((error) => { + console.error(error); + Alert.error( + , + ); + }); + } else { + const commonPolicyContentPromise = + API.getCommonOperationPolicyContent(policyId); + commonPolicyContentPromise + .then((commonPolicyResponse) => { + Utils.forceDownload(commonPolicyResponse); + }) + .catch((error) => { + console.error(error); + Alert.error( + , + ); + }); + } + } + }; + + /** + * Renders the policy file upload related section + * @param {any[]} policyFile Policy file + * @param {React.Dispatch>} setPolicyFile Policy file setter + * @param {string} gateway Gateway type + * @returns {TSX} Policy upload section + */ + const renderPolicyFileUpload = ( + policyFile: any[], + setPolicyFile: React.Dispatch>, + gateway: string, + ) => { + return ( + + ); + }; + + /** + * + * @returns {TSX} Policy download section + */ + const renderPolicyDownload = () => { + return ( + <> + + + + * + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + * + + + + + + } + label={GATEWAY_TYPE_LABELS.SYNAPSE} + data-testid='regular-gateway-label' + /> + + } + label={GATEWAY_TYPE_LABELS.CC} + data-testid='choreo-connect-label' + /> + + + {supportedGatewaysError + ? 'Please select one or more Gateways' + : ''} + + + + + + {/* Render dropzones for policy file uploads */} + {supportedGateways.includes(CONSTS.GATEWAY_TYPE.synapse) && + !isViewMode && + synapsePolicyDefinitionFile && + setSynapsePolicyDefinitionFile && + renderPolicyFileUpload( + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + GATEWAY_TYPE_LABELS.SYNAPSE, + + )} + {supportedGateways.includes(CONSTS.GATEWAY_TYPE.choreoConnect) && + !isViewMode && + ccPolicyDefinitionFile && + setCcPolicyDefinitionFile && + renderPolicyFileUpload( + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + GATEWAY_TYPE_LABELS.CC, + )} + + {/* Render policy file download option in view mode */} + {isViewMode && renderPolicyDownload()} + + + ); +}; + +export default React.memo(SourceDetails); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/Types.d.ts new file mode 100644 index 00000000000..4f135edf67d --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/Types.d.ts @@ -0,0 +1,40 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export type PolicyAttribute = { + id: string; + name: string; + displayName: string; + version: string; + description: string; + required: boolean; + type: string; + validationRegex: string; + defaultValue: any; + allowedValues: string[]; +}; + +export type NewPolicyState = { + displayName: string | null; + version: string | null; + description: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + policyAttributes: any; +}; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/UploadPolicyDropzone.tsx new file mode 100644 index 00000000000..ea5b1bb8e26 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/UploadPolicyDropzone.tsx @@ -0,0 +1,207 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { List, makeStyles, IconButton, Theme } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import { FormattedMessage } from 'react-intl'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import Tooltip from '@material-ui/core/Tooltip'; +import Avatar from '@material-ui/core/Avatar'; +import InsertDriveFile from '@material-ui/icons/InsertDriveFile'; +import DeleteIcon from '@material-ui/icons/Delete'; +import Dropzone from 'react-dropzone'; +import clsx from 'clsx'; +import green from '@material-ui/core/colors/green'; +import red from '@material-ui/core/colors/red'; +import Icon from '@material-ui/core/Icon'; +import { HelpOutline } from '@material-ui/icons'; +import { GATEWAY_TYPE_LABELS } from './SourceDetails'; + +const useStyles = makeStyles((theme: Theme) => ({ + dropZoneWrapper: { + border: '1px dashed ' + theme.palette.primary.main, + borderRadius: '5px', + cursor: 'pointer', + padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`, + position: 'relative', + textAlign: 'center', + width: '75%', + height: '4em', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + '& span': { + fontSize: 64, + color: theme.palette.primary.main, + }, + }, + acceptDrop: { + backgroundColor: green[50], + borderColor: 'green', + }, + rejectDrop: { + backgroundColor: red[50], + borderColor: 'red', + }, + uploadedFileDetails: { + width: '75%', + }, + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, +})); + +interface UploadPolicyDropzoneProps { + policyDefinitionFile: any[]; + setPolicyDefinitionFile: React.Dispatch>; + gateway: string; +} + +/** + * Handles the policy file upload. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy file upload managing UI. + */ +const UploadPolicyDropzone: FC = ({ + policyDefinitionFile, + setPolicyDefinitionFile, + gateway, +}) => { + const classes = useStyles(); + + const handleDrop = (policyDefinition: any) => { + setPolicyDefinitionFile(policyDefinition); + }; + + const renderPolicyFileDropzone = () => { + return ( + + {({ + getRootProps, + getInputProps, + isDragAccept, + isDragReject, + }) => { + return ( + // eslint-disable-next-line react/jsx-props-no-spreading +
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} + + cloud_upload + + + +
+
+ ); + }} + + ); + }; + + return ( + <> + + + + + * + + + + + + + + + + + + + {policyDefinitionFile.length === 0 ? ( + renderPolicyFileDropzone() + ) : ( + + + + + + + + + + setPolicyDefinitionFile([])} + > + + + + + + )} + + + ); +}; + +export default UploadPolicyDropzone; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyList.tsx new file mode 100644 index 00000000000..8e28939c7e8 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyList.tsx @@ -0,0 +1,191 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useState, FC } from 'react'; +import Paper from '@material-ui/core/Paper'; +import Box from '@material-ui/core/Box'; +import Card from '@material-ui/core/Card'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import CardContent from '@material-ui/core/CardContent'; +import { FormattedMessage } from 'react-intl'; +import Typography from '@material-ui/core/Typography'; +import { AddCircle } from '@material-ui/icons'; +import { Button, makeStyles, Theme } from '@material-ui/core'; +import CONSTS from 'AppData/Constants'; +import type { Policy } from './Types'; +import TabPanel from './components/TabPanel'; +import CreatePolicy from './CreatePolicy'; + +const useStyles = makeStyles((theme: Theme) => ({ + flowTabs: { + '& button': { + minWidth: 50, + }, + }, + flowTab: { + fontSize: 'smaller', + }, + addPolicyBtn: { + marginLeft: 'auto', + }, + buttonIcon: { + marginRight: theme.spacing(1), + }, + paperPosition: { + // position: 'fixed', + }, +})); + +interface PolicyListPorps { + policyList: Policy[]; + fetchPolicies: () => void; + isChoreoConnectEnabled: boolean; +} + +/** + * Renders the local policy list. + * @param {JSON} props Input props from parent components. + * @returns {TSX} List of policies local to the API segment. + */ +const PolicyList: FC = ({policyList, fetchPolicies, isChoreoConnectEnabled}) => { + const classes = useStyles(); + const [selectedTab, setSelectedTab] = useState(0); // Request flow related tab is active by default + const [dialogOpen, setDialogOpen] = React.useState(false); + let gatewayType = CONSTS.GATEWAY_TYPE.synapse; + + const handleAddPolicy = () => { + setDialogOpen(true); + }; + + const handleAddPolicyClose = () => { + setDialogOpen(false); + }; + + if (isChoreoConnectEnabled) { + gatewayType = CONSTS.GATEWAY_TYPE.choreoConnect; + } + + return ( + + + + + + + + + + + setSelectedTab(tab)} + indicatorColor='primary' + textColor='primary' + variant='standard' + aria-label='Policies local to API' + className={classes.flowTabs} + > + Request} + id='request-tab' + aria-controls='request-tabpanel' + /> + Response} + id='response-tab' + aria-controls='response-tabpanel' + /> + {!isChoreoConnectEnabled && ( + Fault} + id='fault-tab' + aria-controls='fault-tabpanel' + />) + } + + + + policy.applicableFlows.includes( + 'request', + ) && + policy.supportedGateways.includes( + gatewayType, + ), + )} + index={0} + selectedTab={selectedTab} + fetchPolicies={fetchPolicies} + /> + + policy.applicableFlows.includes( + 'response', + ) && + policy.supportedGateways.includes( + gatewayType, + ), + )} + index={1} + selectedTab={selectedTab} + fetchPolicies={fetchPolicies} + /> + {!isChoreoConnectEnabled && ( + + policy.applicableFlows.includes('fault'), + )} + index={2} + selectedTab={selectedTab} + fetchPolicies={fetchPolicies} + /> + )} + + + + + + + ); +}; + +export default PolicyList; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/SaveOperationPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/SaveOperationPolicies.tsx new file mode 100644 index 00000000000..5615c4ed6f9 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/SaveOperationPolicies.tsx @@ -0,0 +1,95 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useContext } from 'react'; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; +import { useHistory } from 'react-router-dom'; +import { isRestricted } from 'AppData/AuthManager'; +import { FormattedMessage } from 'react-intl'; +import CustomSplitButton from 'AppComponents/Shared/CustomSplitButton'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; + +interface SaveOperationPoliciesProps { + saveApi: () => void; + updating: boolean; +} + +/** + * Renders the save button (with Save option & Save and deploy option). + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policies page save button. + */ +const SaveOperationPolicies: React.FC = ({ + saveApi, updating +}) => { + const { api } = useContext(ApiContext); + const history = useHistory(); + + /** + * Handle save button event + * + */ + const handleSave = () => { + saveApi(); + } + + /** + * Handle save and deploy button event + * + */ + const handleSaveAndDeploy = () => { + saveApi(); + history.push({ + pathname: `/apis/${api.id}/deployments`, + state: 'deploy', + }); + } + + return ( + + + + {api.isRevision || isRestricted(['apim:api_create'], api) ? ( + + ) : ( + + )} + + + + ); +}; + +export default SaveOperationPolicies; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Types.d.ts new file mode 100644 index 00000000000..2f802adc12b --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Types.d.ts @@ -0,0 +1,94 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export type Policy = { + id: string; + name: string; + version: string; + displayName: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + isAPISpecific: boolean; + supportedGateways: string[]; +}; + +export type AttachedPolicy = { + id: string; + name: string; + displayName: string; + version: string; + applicableFlows: string[]; + uniqueKey: string; + attributes?: any; + isAPISpecific?: boolean; +}; + +export type PolicySpecAttribute = { + name: string; + displayName: string; + version: string; + description: string; + required: boolean; + type: string; + validationRegex: string; + defaultValue: any; + allowedValues: string[]; +}; + +export type PolicySpec = { + id: string; + category: string; + name: string; + displayName: string; + version: string; + description: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + policyAttributes: PolicySpecAttribute[]; + isAPISpecific?: boolean; + md5?: string; +}; + +export type CreatePolicySpec = { + id?: string; + category: string; + name: string; + displayName: string; + version: string; + description: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + policyAttributes: PolicySpecAttribute[]; +}; + +export type ApiPolicy = { + policyName?: string; + policyId?: string; + policyVersion?: string; + parameters: any; + uuid?: string; +}; + +export type ApiLevelPolicy = { + request?: any[]; + response?: any[]; + fault?: any[]; +}; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Utils.ts b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Utils.ts new file mode 100644 index 00000000000..483ec5bc71f --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Utils.ts @@ -0,0 +1,30 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/* eslint-disable no-mixed-operators */ +/* eslint-disable eqeqeq */ +/* eslint-disable no-bitwise */ +export const uuidv4 = () => { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { + const r = (Math.random() * 16) | 0; + const v = c == 'x' ? r : (r & 0x3) | 0x8; + return v.toString(16); + }); +}; + +export { uuidv4 as default }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ViewPolicy.tsx new file mode 100644 index 00000000000..5cee9ec5140 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ViewPolicy.tsx @@ -0,0 +1,166 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useContext, useEffect, useState } from 'react'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import Icon from '@material-ui/core/Icon'; +import IconButton from '@material-ui/core/IconButton'; +import Alert from 'AppComponents/Shared/Alert'; +import { Progress } from 'AppComponents/Shared'; +import API from 'AppData/api'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import type { Policy, PolicySpec } from './Types'; +import PolicyViewForm from './PolicyForm/PolicyViewForm'; + +interface ViewPolicyProps { + handleDialogClose: () => void; + dialogOpen: boolean; + policyObj: Policy; + isLocalToAPI: boolean; +} + +/** + * Renders the UI to view a policy selected from the policy list. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy view UI. + */ +const ViewPolicy: React.FC = ({ + handleDialogClose, + dialogOpen, + policyObj, + isLocalToAPI, +}) => { + const { api } = useContext(ApiContext); + const [policySpec, setPolicySpec] = useState(null); + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (dialogOpen && isLocalToAPI) { + setLoading(true); + const promisedPolicyGet = API.getOperationPolicy( + policyObj.id, + api.id, + ); + promisedPolicyGet + .then((response) => { + setPolicySpec(response.body); + }) + .catch((error) => { + console.error(error); + if (error.response) { + Alert.error(error.response.body.description); + } else { + Alert.error('Something went wrong while retrieving policy details'); + } + }) + .finally(() => { + setLoading(false); + }); + } else if (dialogOpen && !isLocalToAPI) { + const promisedCommonPolicyGet = API.getCommonOperationPolicy( + policyObj.id, + ); + promisedCommonPolicyGet + .then((response) => { + setPolicySpec(response.body); + }) + .catch((error) => { + console.error(error); + if (error.response) { + Alert.error(error.response.body.description); + } else { + Alert.error('Something went wrong while retrieving policy details'); + } + }) + .finally(() => { + setLoading(false); + }); + } + }, [dialogOpen]); + + const stopPropagation = ( + e: React.MouseEvent, + ) => { + e.stopPropagation(); + }; + + const toggleOpen = () => { + handleDialogClose(); + }; + + if (loading) { + return ; + } + + if (!policySpec) { + return <>; + } + + return ( + <> + + + + + {policyObj.displayName} + + + + + close + + + + + + + + + + + + + ); +}; + +export default ViewPolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/FlowArrow.tsx new file mode 100644 index 00000000000..99120036746 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/FlowArrow.tsx @@ -0,0 +1,73 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { makeStyles } from '@material-ui/core'; +import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import Box from '@material-ui/core/Box'; + +const useStyles = makeStyles(() => ({ + arrowColor: { + backgroundColor: 'black', + opacity: 0.4, + }, + iconSize: { + fontSize: '2em', + color: 'black', + opacity: 0.4, + } +})); + +interface FlowArrowProps { + arrowDirection: string; +} + +/** + * Tab panel component to render content of a particular tab. + * Renders the available policy list under the relevant flow related tab (i.e. request, response or fault). + * @param {JSON} props Input props from parent components. + * @returns {TSX} Tab panel. + */ +const FlowArrow: FC = ({ arrowDirection }) => { + const classes = useStyles(); + + return ( + <> + {arrowDirection === 'left' + ? ( + + + + + + + ) : ( + + + + + + + ) + } + + ); +} + +export default FlowArrow; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/PolicyPanel.tsx new file mode 100644 index 00000000000..3d91221a3f5 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/PolicyPanel.tsx @@ -0,0 +1,82 @@ +/* + * Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Box } from '@material-ui/core'; +import React, { FC } from 'react'; +import PoliciesSection from '../PoliciesSection'; +import type { Policy, PolicySpec } from '../Types'; + +interface PolicyPanelProps { + children?: React.ReactNode; + index: number; + selectedTab: number; + openAPISpec: any; + isChoreoConnectEnabled: boolean; + isAPILevelTabSelected: boolean; + allPolicies: PolicySpec[] | null; + policyList: Policy[]; + api: any; + expandedResource: string | null; + setExpandedResource: React.Dispatch>; +} + +/** + * Tab panel component to render content of a particular tab. + * Renders the policy section under the relevant tab (i.e. API Level or Operation Level). + * @param {JSON} props Input props from parent components. + * @returns {TSX} Tab panel. + */ +const PolicyPanel: FC = ({ + index, + selectedTab, + openAPISpec, + isChoreoConnectEnabled, + isAPILevelTabSelected, + allPolicies, + policyList, + api, + expandedResource, + setExpandedResource, +}) => { + const tabs = ['api-level', 'operation-level']; + const currentTab = tabs[index]; + + return ( + + ); +}; + +export default PolicyPanel; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/TabPanel.tsx new file mode 100644 index 00000000000..98d4be45d39 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/TabPanel.tsx @@ -0,0 +1,72 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Box } from '@material-ui/core'; +import React, { FC } from 'react'; +import DraggablePolicyCard from '../DraggablePolicyCard'; +import type { Policy } from '../Types'; + +interface TabPanelProps { + children?: React.ReactNode; + index: number; + policyList: Policy[]; + selectedTab: number; + fetchPolicies: () => void; +} + +/** + * Tab panel component to render content of a particular tab. + * Renders the available policy list under the relevant flow related tab (i.e. request, response or fault). + * @param {JSON} props Input props from parent components. + * @returns {TSX} Tab panel. + */ +const TabPanel: FC = ({ + index, + policyList, + selectedTab, + fetchPolicies, +}) => { + const flowNames = ['request', 'response', 'fault']; + const currentFlow = flowNames[index]; + + return ( + + ); +}; + +export default TabPanel; From cf1550116938bd4b819098335a2c0b01b0a1b8e7 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 1 Nov 2023 09:42:23 +0530 Subject: [PATCH 014/102] Move Policies from shared to global --- .../app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx | 2 +- .../Policies/ApiOperationContext.js | 0 .../Policies/AttachedPolicyCard.tsx | 0 .../Policies/AttachedPolicyForm/General.tsx | 0 .../Policies/AttachedPolicyList.tsx | 0 .../PolicyMapping => GlobalPolicies}/Policies/CreatePolicy.tsx | 0 .../PolicyMapping => GlobalPolicies}/Policies/DeletePolicy.tsx | 0 .../Policies/DraggablePolicyCard.tsx | 0 .../Policies/GatewaySelector.tsx | 0 .../Policies/OperationButton.tsx | 0 .../Policies/OperationPolicy.tsx | 0 .../Policies/OperationsGroup.tsx | 0 .../PolicyMapping => GlobalPolicies}/Policies/Policies.tsx | 0 .../Policies/PoliciesExpansion.tsx | 0 .../Policies/PoliciesSection.tsx | 0 .../Policies/PolicyConfigurationEditDrawer.tsx | 0 .../Policies/PolicyConfiguringDrawer.tsx | 0 .../Policies/PolicyDropzone.tsx | 0 .../Policies/PolicyForm/GeneralDetails.tsx | 0 .../Policies/PolicyForm/PolicyAttributes.tsx | 0 .../Policies/PolicyForm/PolicyCreateForm.tsx | 0 .../Policies/PolicyForm/PolicyViewForm.tsx | 0 .../Policies/PolicyForm/SourceDetails.tsx | 0 .../Policies/PolicyForm/Types.d.ts | 0 .../Policies/PolicyForm/UploadPolicyDropzone.tsx | 0 .../PolicyMapping => GlobalPolicies}/Policies/PolicyList.tsx | 0 .../Policies/SaveOperationPolicies.tsx | 0 .../PolicyMapping => GlobalPolicies}/Policies/Types.d.ts | 0 .../{Shared/PolicyMapping => GlobalPolicies}/Policies/Utils.ts | 0 .../PolicyMapping => GlobalPolicies}/Policies/ViewPolicy.tsx | 0 .../Policies/components/FlowArrow.tsx | 0 .../Policies/components/PolicyPanel.tsx | 0 .../Policies/components/TabPanel.tsx | 0 33 files changed, 1 insertion(+), 1 deletion(-) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/ApiOperationContext.js (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/AttachedPolicyCard.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/AttachedPolicyForm/General.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/AttachedPolicyList.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/CreatePolicy.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/DeletePolicy.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/DraggablePolicyCard.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/GatewaySelector.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/OperationButton.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/OperationPolicy.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/OperationsGroup.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/Policies.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PoliciesExpansion.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PoliciesSection.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyConfigurationEditDrawer.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyConfiguringDrawer.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyDropzone.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyForm/GeneralDetails.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyForm/PolicyAttributes.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyForm/PolicyCreateForm.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyForm/PolicyViewForm.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyForm/SourceDetails.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyForm/Types.d.ts (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyForm/UploadPolicyDropzone.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/PolicyList.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/SaveOperationPolicies.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/Types.d.ts (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/Utils.ts (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/ViewPolicy.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/components/FlowArrow.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/components/PolicyPanel.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PolicyMapping => GlobalPolicies}/Policies/components/TabPanel.tsx (100%) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx index aa2344a85da..ed2a179a1a8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -15,7 +15,7 @@ // under the License. import React from 'react'; -import Policies from 'AppComponents/Shared/PolicyMapping/Policies/Policies'; +import Policies from 'AppComponents/GlobalPolicies/Policies/Policies'; /** * Global Policies Creating Page. diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ApiOperationContext.js b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ApiOperationContext.js rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyCard.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyForm/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyForm/General.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/AttachedPolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/CreatePolicy.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DeletePolicy.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/DraggablePolicyCard.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/GatewaySelector.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationButton.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationButton.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationButton.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationButton.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationPolicy.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationsGroup.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationsGroup.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/OperationsGroup.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationsGroup.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Policies.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesExpansion.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesSection.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PoliciesSection.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesSection.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfigurationEditDrawer.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfigurationEditDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfigurationEditDrawer.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfiguringDrawer.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyConfiguringDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfiguringDrawer.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyDropzone.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/GeneralDetails.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyAttributes.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyCreateForm.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/PolicyViewForm.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/SourceDetails.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/Types.d.ts rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyForm/UploadPolicyDropzone.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/PolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/SaveOperationPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SaveOperationPolicies.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/SaveOperationPolicies.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SaveOperationPolicies.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Types.d.ts rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Utils.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Utils.ts similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/Utils.ts rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Utils.ts diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/ViewPolicy.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/FlowArrow.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/PolicyPanel.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PolicyMapping/Policies/components/TabPanel.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx From ade9c24beb4f3012cf3a6fad84e9a8728358489e Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 1 Nov 2023 10:37:24 +0530 Subject: [PATCH 015/102] Remove Unwanted components from Policies --- .../Policies/GatewaySelector.tsx | 12 +- .../GlobalPolicies/Policies/Policies.tsx | 421 ++---------------- 2 files changed, 34 insertions(+), 399 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx index b713aea4e89..ea4e683a4fa 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx @@ -149,10 +149,11 @@ const GatewaySelector: FC = ({ color='primary' defaultChecked id='regularGateway' - disabled={isRestricted( - ['apim:api_create'], - apiFromContext, - )} + // changedUI.commented + // disabled={isRestricted( + // ['apim:api_create'], + // apiFromContext, + // )} inputProps={{ 'aria-label': 'Regular Gateway', }} @@ -166,7 +167,8 @@ const GatewaySelector: FC = ({ control={ ({ */ const Policies: React.FC = () => { const classes = useStyles(); - const [api, updateAPI] = useAPI(); - const [updating, setUpdating] = useState(false); + // const [updating, setUpdating] = useState(false); const [policies, setPolicies] = useState(null); const [allPolicies, setAllPolicies] = useState(null); const [expandedResource, setExpandedResource] = useState(null); - const [isChoreoConnectEnabled, setIsChoreoConnectEnabled] = useState(api.gatewayType === 'wso2/choreo-connect'); + const [isChoreoConnectEnabled, setIsChoreoConnectEnabled] = useState(false); const { showMultiVersionPolicies } = Configurations.apis; - const [selectedTab, setSelectedTab] = useState((api.apiPolicies != null) ? 0 : 1); + const [selectedTab, setSelectedTab] = useState(1); + + // // If Choreo Connect radio button is selected in GatewaySelector, it will pass // value as true to render other UI changes specific to the Choreo Connect. @@ -88,66 +81,19 @@ const Policies: React.FC = () => { setIsChoreoConnectEnabled(isCCEnabled); } - // Tabs - const apiLevelTab = 0; - const operationLevelTab = 1; - const initApiLevelPolicy: ApiLevelPolicy = { request: [], response: [], fault: [], } - const getInitPolicyState = (policyList: any) => { - // Iterating through the policy list of request flow, response flow and fault flow - for (const flow in policyList) { - if (Object.prototype.hasOwnProperty.call(policyList, flow)) { - const policyArray = policyList[flow]; - policyArray.forEach((policyItem: ApiPolicy) => { - // eslint-disable-next-line no-param-reassign - policyItem.uuid = uuidv4(); - }); - } - } - } - - /** - * Function to get the initial state of all the operation policies from the API object. - * We are setting a unique ID for all the operation policies solely for UI specific operations. - * We use this UUID for edit and delete operations. - * Before saving to backend, we are removing this UUID. - * @returns {Object} The operations object which is cloned from the API object with an additional UUID. - */ - const getInitState = () => { - const clonedOperations = cloneDeep(api.operations); - clonedOperations.forEach((operation: any) => { - if (operation.operationPolicies) { - const { operationPolicies } = operation; - getInitPolicyState(operationPolicies); - } - }); - return clonedOperations; - } - - const getInitAPILevelPoliciesState = () => { - const clonedAPIPolicies = cloneDeep(api.apiPolicies); - if (api.apiPolicies != null) { - getInitPolicyState(clonedAPIPolicies); - } - return clonedAPIPolicies || initApiLevelPolicy; - }; - - const [apiOperations, setApiOperations] = useState(getInitState); - const [apiLevelPolicies, setApiLevelPolicies] = useState(getInitAPILevelPoliciesState); - const [openAPISpec, setOpenAPISpec] = useState(null); + const [apiLevelPolicies, setApiLevelPolicies] = useState(initApiLevelPolicy); useEffect(() => { - const currentOperations = getInitState(); - setApiOperations(currentOperations); - - const currentAPIPolicies = getInitAPILevelPoliciesState(); + // const currentAPIPolicies = getPolicies(); + const currentAPIPolicies = ['']; setApiLevelPolicies(currentAPIPolicies); - }, [api]); + }, []); /** * Fetches all common policies & API specific policies. @@ -155,13 +101,11 @@ const Policies: React.FC = () => { * Sets the policies state: policy state is used to display the available policies that are draggable. */ const fetchPolicies = () => { - const apiPoliciesPromise = API.getOperationPolicies(api.id); const commonPoliciesPromise = API.getCommonOperationPolicies(); - Promise.all([apiPoliciesPromise, commonPoliciesPromise]).then((response) => { - const [apiPoliciesResponse, commonPoliciesResponse] = response; - const apiSpecificPolicies = apiPoliciesResponse.body.list; + Promise.all([commonPoliciesPromise]).then((response) => { + const [commonPoliciesResponse] = response; const commonPolicies = commonPoliciesResponse.body.list; - const mergedList = [...commonPolicies, ...apiSpecificPolicies]; + const mergedList = [...commonPolicies]; // Get all common policies and API specific policies setAllPolicies(mergedList); @@ -190,22 +134,7 @@ const Policies: React.FC = () => { (policy: Policy) => policy.supportedGateways.includes('ChoreoConnect')); } - let filteredByAPITypeList = null; - if (api.type === "HTTP") { - // Get HTTP supported policies - filteredByAPITypeList = filteredByGatewayTypeList.filter( - (policy: Policy) => policy.supportedApiTypes.includes('HTTP')); - } else if (api.type === "SOAP"){ - // Get SOAP supported policies - filteredByAPITypeList = filteredByGatewayTypeList.filter( - (policy: Policy) => policy.supportedApiTypes.includes('SOAP')); - } else if (api.type === "SOAPTOREST"){ - // Get SOAP to REST supported policies - filteredByAPITypeList = filteredByGatewayTypeList.filter( - (policy: Policy) => policy.supportedApiTypes.includes('SOAPTOREST')); - } - - setPolicies(filteredByAPITypeList); + setPolicies(filteredByGatewayTypeList); }).catch((error) => { console.error(error); @@ -214,21 +143,6 @@ const Policies: React.FC = () => { } const removeAPIPoliciesForGatewayChange = () => { - const newApiOperations: any = cloneDeep(apiOperations); - // Set operation policies to the API object - newApiOperations.forEach((operation: any) => { - if (operation.operationPolicies) { - const { operationPolicies } = operation; - - // Iterating through the policy list of request flow, response flow and fault flow - for (const flow in operationPolicies) { - if (Object.prototype.hasOwnProperty.call(operationPolicies, flow)) { - operationPolicies[flow] = []; - } - } - } - }); - setApiOperations(newApiOperations); setApiLevelPolicies(initApiLevelPolicy); } @@ -237,245 +151,15 @@ const Policies: React.FC = () => { if (isChoreoConnectEnabled) { setSelectedTab(1); } - }, [isChoreoConnectEnabled]); - - useEffect(() => { - // Update the Swagger spec object when API object gets changed - api.getSwagger() - .then((response: any) => { - const retrievedSpec = response.body; - setOpenAPISpec(retrievedSpec); - - // To expand the first operation by default on page render - const [target, verbObject]: [string, any] = Object.entries(retrievedSpec.paths)[0]; - const verb = Object.keys(verbObject)[0] - setExpandedResource(verb + target) - }) - .catch((error: any) => { - console.error(error); - if (error.response) { - Alert.error(error.response.body.description); - } - }); - }, [api.id]); - - const localAPI = useMemo( - () => ({ - id: api.id, - operations: api.isAPIProduct() ? {} : mapAPIOperations(api.operations), - }), - [api], - ); - - /** - * To update the API Operations object and maintain the current state of attached policies. - * Note that this function does not perform an API object update, rather, just a state update. - * @param {any} updatedOperation updated operation of API object - * @param {string} target target that needs to be updated - * @param {string} verb verb of the operation that neeeds to be updated - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault - */ - const updateApiOperations = ( - updatedOperation: any, target: string, verb: string, currentFlow: string, - ) => { - const newApiOperations: any = cloneDeep(apiOperations); - const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); - - const operationInAction = - selectedTab === operationLevelTab - ? newApiOperations.find( - (op: any) => - op.target === target && - op.verb.toLowerCase() === verb.toLowerCase(), - ) - : null; - - const flowPolicy = ( - selectedTab === apiLevelTab - ? newApiLevelPolicies - : operationInAction.operationPolicies - )[currentFlow].find( - (p: any) => - p.policyId === updatedOperation.policyId && - p.uuid === updatedOperation.uuid, - ); - - - if (flowPolicy) { - // Edit policy - flowPolicy.parameters = { ...updatedOperation.parameters }; - } else { - // Add new policy - const uuid = uuidv4(); - (selectedTab === apiLevelTab ? newApiLevelPolicies : operationInAction - .operationPolicies)[currentFlow].push({ ...updatedOperation, uuid } - ); - } - - // Finally update the state - if (selectedTab === apiLevelTab) { - setApiLevelPolicies(newApiLevelPolicies); - } else { - setApiOperations(newApiOperations); - } - } - - /** - * To update all API Operations with the provided policy. - * Note that this function does not perform an API object update, rather, just a state update. - * @param {any} updatedOperation updated operation of API object - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault - */ - const updateAllApiOperations = (updatedOperation: any, currentFlow: string) => { - const newApiOperations: any = cloneDeep(apiOperations); - - // Add attached policy to the same flow of all the operations - newApiOperations.forEach((operation: any) => { - const uuid = uuidv4(); - operation.operationPolicies[currentFlow].push({ ...updatedOperation, uuid }); - }); - - // Finally update the state - setApiOperations(newApiOperations); - } - - /** - * To delete one API Operation from the apiOperations object - * Note that this function does not perform an API object update, rather, just a state update. - * @param {string} uuid operation uuid - * @param {string} target target that needs to be updated - * @param {string} verb verb of the operation that neeeds to be updated - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault - */ - const deleteApiOperation = (uuid: string, target: string, verb: string, currentFlow: string) => { - - if (selectedTab === apiLevelTab) { - const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); - const index = newApiLevelPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); - newApiLevelPolicies[currentFlow].splice(index, 1); - setApiLevelPolicies(newApiLevelPolicies); - } else { - const newApiOperations: any = cloneDeep(apiOperations); - const operationInAction = newApiOperations.find((op: any) => - op.target === target && op.verb.toLowerCase() === verb.toLowerCase()); - // Find the location of the element using the following logic - /* - [{a:'1'},{a:'2'},{a:'1'}].map( i => i.a) will output ['1', '2', '1'] - [{a:'1'},{a:'2'},{a:'1'}].map( i => i.a).indexOf('2') will output the location of '2' - */ - const index = operationInAction.operationPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); - // delete the element - operationInAction.operationPolicies[currentFlow].splice(index, 1); - - // Finally update the state - setApiOperations(newApiOperations); - } - } - - /** - * Function to rearrange the API Operation ordering - * @param {string} oldIndex original index of the policy - * @param {string} newIndex new index of the policy - * @param {string} target target that needs to be updated - * @param {string} verb verb of the operation that neeeds to be updated - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault - */ - const rearrangeApiOperations = ( - oldIndex: number, newIndex: number, target: string, verb: string, currentFlow: string, - ) => { - if (selectedTab === apiLevelTab) { - const newAPIPolicies: any = cloneDeep(apiLevelPolicies); - const policyArray = newAPIPolicies[currentFlow]; - newAPIPolicies[currentFlow] = arrayMove(policyArray, oldIndex, newIndex); - setApiLevelPolicies(newAPIPolicies); - } else { - const newApiOperations: any = cloneDeep(apiOperations); - const operationInAction = newApiOperations.find((op: any) => - op.target === target && op.verb.toLowerCase() === verb.toLowerCase()); - const policyArray = operationInAction.operationPolicies[currentFlow]; - operationInAction.operationPolicies[currentFlow] = arrayMove(policyArray, oldIndex, newIndex); - setApiOperations(newApiOperations); - } - }; - - const deletePolicyUuid = (operationPolicies: any) => { - // Iterating through the policy list of request flow, response flow and fault flow - for (const flow in operationPolicies) { - if (Object.prototype.hasOwnProperty.call(operationPolicies, flow)) { - const policyArray = operationPolicies[flow]; - policyArray.forEach((policyItem: ApiPolicy) => { - if (policyItem.uuid) { - // eslint-disable-next-line no-param-reassign - delete policyItem.uuid; - } - }); - } - } - }; - - /** - * To update the API object with the attached policies on Save. - */ - const saveApi = () => { - setUpdating(true); - const newApiOperations: any = cloneDeep(apiOperations); - const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); - let getewayTypeForPolicies = "wso2/synapse"; - const getewayVendorForPolicies = "wso2"; - - deletePolicyUuid(newApiLevelPolicies); - // Set operation policies to the API object - newApiOperations.forEach((operation: any) => { - if (operation.operationPolicies) { - const { operationPolicies } = operation; - deletePolicyUuid(operationPolicies); - } - }); - - // Handles normal policy savings for choreo connect gateway type. - if(isChoreoConnectEnabled) { - getewayTypeForPolicies = "wso2/choreo-connect"; - } - - const updatePromise = updateAPI({ - operations: newApiOperations, - apiPolicies: newApiLevelPolicies, - gatewayVendor: getewayVendorForPolicies, - gatewayType: getewayTypeForPolicies - }); - updatePromise - .finally(() => { - setUpdating(false); - }); - }; - - const handleTabChange = (tab: number) => { - setSelectedTab(tab); - }; + }, [isChoreoConnectEnabled]); /** * To memoize the value passed into ApiOperationContextProvider */ const providerValue = useMemo( - () => ({ - apiOperations, - apiLevelPolicies, - updateApiOperations, - updateAllApiOperations, - deleteApiOperation, - rearrangeApiOperations, - }), - [ - apiOperations, - apiLevelPolicies, - updateApiOperations, - updateAllApiOperations, - deleteApiOperation, - rearrangeApiOperations, - ], - ); + () => ({apiLevelPolicies}),[apiLevelPolicies],); - if (!policies || !openAPISpec || updating) { + if (!policies) { return } @@ -490,74 +174,27 @@ const Policies: React.FC = () => { /> - {(api.type === 'HTTP') && ( - - - - )} + + + - - handleTabChange(tab) - } - indicatorColor='primary' - textColor='primary' - variant='fullWidth' - aria-label='Policies local to API' - className={classes.flowTabs} - > - - API Level Policies - - } - id='api-level-policies-tab' - aria-controls='api-level-policies-tabpanel' - disabled={isChoreoConnectEnabled} - /> - - Operation Level Policies - - } - id='operation-level-policies-tab' - aria-controls='operation-level-policies-tabpanel' - /> - - { - ); }; From 23606099c9a770436bfc02efb047c3911e27d2fb Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 1 Nov 2023 12:35:12 +0530 Subject: [PATCH 016/102] Change 3 files to get the expected UI 1. PoliciesExpansion - UI untouched 2. PoliciesSection - Remove the Operation level UI part 3. PolicyPanel - Remove hidden div --- .../GlobalPolicies/Policies/Policies.tsx | 14 -- .../Policies/PoliciesExpansion.tsx | 164 +----------------- .../Policies/PoliciesSection.tsx | 110 ++---------- .../Policies/components/PolicyPanel.tsx | 42 +---- 4 files changed, 25 insertions(+), 305 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx index ba0e31e347d..05ecb3d2012 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx @@ -68,10 +68,8 @@ const Policies: React.FC = () => { // const [updating, setUpdating] = useState(false); const [policies, setPolicies] = useState(null); const [allPolicies, setAllPolicies] = useState(null); - const [expandedResource, setExpandedResource] = useState(null); const [isChoreoConnectEnabled, setIsChoreoConnectEnabled] = useState(false); const { showMultiVersionPolicies } = Configurations.apis; - const [selectedTab, setSelectedTab] = useState(1); // @@ -148,9 +146,6 @@ const Policies: React.FC = () => { useEffect(() => { fetchPolicies(); - if (isChoreoConnectEnabled) { - setSelectedTab(1); - } }, [isChoreoConnectEnabled]); /** @@ -187,18 +182,9 @@ const Policies: React.FC = () => { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index d885ca37861..23afe81922c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -16,19 +16,16 @@ * under the License. */ -import React, { FC, useContext, useEffect, useState } from 'react'; +import React, { FC, useEffect, useState } from 'react'; import Grid from '@material-ui/core/Grid'; import Box from '@material-ui/core/Box'; import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; import Typography from '@material-ui/core/Typography'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { FormattedMessage } from 'react-intl'; -import APIContext from 'AppComponents/Apis/Details/components/ApiContext'; -import API from 'AppData/api'; import PolicyDropzone from './PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; import FlowArrow from './components/FlowArrow'; -import ApiOperationContext from './ApiOperationContext'; const useStyles = makeStyles((theme: Theme) => ({ flowSpecificPolicyAttachGrid: { @@ -37,19 +34,6 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -const defaultPolicyForMigration = { - id: '', - category: 'Mediation', - name: '', - displayName: '', - version: '', - description: '', - applicableFlows: [], - supportedGateways: ['Synapse'], - supportedApiTypes: [], - policyAttributes: [], - isAPISpecific: true, -}; interface PoliciesExpansionProps { target: any; @@ -79,9 +63,6 @@ const PoliciesExpansion: FC = ({ const [faultFlowDroppablePolicyList, setFaultFlowDroppablePolicyList] = useState([]); const classes = useStyles(); - const { apiOperations } = useContext(ApiOperationContext); - const { apiLevelPolicies } = useContext(ApiOperationContext); - const { api } = useContext(APIContext); useEffect(() => { const requestList = []; @@ -103,149 +84,6 @@ const PoliciesExpansion: FC = ({ setFaultFlowDroppablePolicyList(faultList); }, [policyList]); - useEffect(() => { - (async () => { - - const operationInAction = (!isAPILevelPolicy) ? apiOperations.find( - (op: any) => - op.target === target && - op.verb.toLowerCase() === verb.toLowerCase(), - ) : null; - const apiPolicies = (isAPILevelPolicy) ? apiLevelPolicies : null; - - // Populate request flow attached policy list - const requestFlowList: AttachedPolicy[] = []; - const requestFlow = (isAPILevelPolicy) ? apiPolicies.request : operationInAction.operationPolicies.request; - for (const requestFlowAttachedPolicy of requestFlow) { - const { policyId, policyName, policyVersion, uuid } = - requestFlowAttachedPolicy; - if (policyId === null) { - // Handling migration flow - requestFlowList.push({ - ...defaultPolicyForMigration, - name: policyName, - displayName: policyName, - applicableFlows: ['request'], - uniqueKey: uuid, - }); - } else { - const policyObj = allPolicies?.find( - (policy: PolicySpec) => - policy.name === policyName && - policy.version === policyVersion, - ); - if (policyObj) { - requestFlowList.push({ ...policyObj, uniqueKey: uuid }); - } else { - try { - // eslint-disable-next-line no-await-in-loop - const policyResponse = await API.getOperationPolicy( - policyId, - api.id, - ); - if (policyResponse) - requestFlowList.push({ - ...policyResponse.body, - uniqueKey: uuid, - }); - } catch (error) { - console.error(error); - } - } - } - } - setRequestFlowPolicyList(requestFlowList); - - // Populate response flow attached policy list - const responseFlowList: AttachedPolicy[] = []; - const responseFlow = isAPILevelPolicy ? apiPolicies.response : operationInAction.operationPolicies.response; - for (const responseFlowAttachedPolicy of responseFlow) { - const { policyId, policyName, policyVersion, uuid } = - responseFlowAttachedPolicy; - if (policyId === null) { - // Handling migration flow - responseFlowList.push({ - ...defaultPolicyForMigration, - name: policyName, - displayName: policyName, - applicableFlows: ['response'], - uniqueKey: uuid, - }); - } else { - const policyObj = allPolicies?.find( - (policy: PolicySpec) => - policy.name === policyName && - policy.version === policyVersion, - ); - if (policyObj) { - responseFlowList.push({ ...policyObj, uniqueKey: uuid }); - } else { - try { - // eslint-disable-next-line no-await-in-loop - const policyResponse = await API.getOperationPolicy( - policyId, - api.id, - ); - if (policyResponse) - responseFlowList.push({ - ...policyResponse.body, - uniqueKey: uuid, - }); - } catch (error) { - console.error(error); - } - } - } - } - setResponseFlowPolicyList(responseFlowList); - - if (!isChoreoConnectEnabled) { - // Populate fault flow attached policy list - const faultFlowList: AttachedPolicy[] = []; - const faultFlow = isAPILevelPolicy ? apiPolicies.fault : operationInAction.operationPolicies.fault; - for (const faultFlowAttachedPolicy of faultFlow) { - const { policyId, policyName, policyVersion, uuid } = - faultFlowAttachedPolicy; - if (policyId === null) { - // Handling migration flow - faultFlowList.push({ - ...defaultPolicyForMigration, - name: policyName, - displayName: policyName, - applicableFlows: ['fault'], - uniqueKey: uuid, - }); - } else { - const policyObj = allPolicies?.find( - (policy: PolicySpec) => - policy.name === policyName && - policy.version === policyVersion, - ); - if (policyObj) { - faultFlowList.push({ ...policyObj, uniqueKey: uuid }); - } else { - try { - // eslint-disable-next-line no-await-in-loop - const policyResponse = await API.getOperationPolicy( - policyId, - api.id, - ); - if (policyResponse) - faultFlowList.push({ - ...policyResponse.body, - uniqueKey: uuid, - }); - } catch (error) { - console.error(error); - } - } - } - } - setFaultFlowPolicyList(faultFlowList); - } - })(); - }, [apiOperations, apiLevelPolicies]); - return ( ({ - gridItem: { - display: 'flex', - width: '100%', - }, - alert: { - backgroundColor: 'transparent', - marginTop: '-25px', - marginBottom: '-15px', - }, -})); - interface PolicySectionProps { - openAPISpec: any; isChoreoConnectEnabled: boolean; - isAPILevelTabSelected: boolean; allPolicies: PolicySpec[] | null; policyList: Policy[]; - api: any; - expandedResource: string | null; - setExpandedResource: React.Dispatch>; } /** @@ -56,84 +33,31 @@ interface PolicySectionProps { * @returns {TSX} Policy management page to render. */ const PoliciesSection: FC = ({ - openAPISpec, isChoreoConnectEnabled, - isAPILevelTabSelected, allPolicies, policyList, - api, - expandedResource, - setExpandedResource, }) => { - const classes = useStyles(); const borderColor = ''; return ( - {isAPILevelTabSelected ? ( - - - - - + + + + - - ) : ( - - {!isChoreoConnectEnabled && ( - - - - - )} - {Object.entries(openAPISpec.paths).map(([target, verbObject]: [string, any]) => ( - - - - {Object.entries(verbObject).map(([verb, operation]) => { - return CONSTS.HTTP_METHODS.includes(verb) ? ( - - - - ) : null; - })} - - - - ))} - - )} + + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx index 3d91221a3f5..27412a21d47 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx @@ -23,16 +23,9 @@ import type { Policy, PolicySpec } from '../Types'; interface PolicyPanelProps { children?: React.ReactNode; - index: number; - selectedTab: number; - openAPISpec: any; isChoreoConnectEnabled: boolean; - isAPILevelTabSelected: boolean; allPolicies: PolicySpec[] | null; policyList: Policy[]; - api: any; - expandedResource: string | null; - setExpandedResource: React.Dispatch>; } /** @@ -42,40 +35,19 @@ interface PolicyPanelProps { * @returns {TSX} Tab panel. */ const PolicyPanel: FC = ({ - index, - selectedTab, - openAPISpec, isChoreoConnectEnabled, - isAPILevelTabSelected, allPolicies, policyList, - api, - expandedResource, - setExpandedResource, }) => { - const tabs = ['api-level', 'operation-level']; - const currentTab = tabs[index]; return ( - + + + ); }; From 130c6347009683f65c61dc15492910749ba9fd27 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 2 Nov 2023 10:38:54 +0530 Subject: [PATCH 017/102] Fix the drag and drop to work properly --- .../Policies/AttachedPolicyForm/General.tsx | 44 +------ .../GlobalPolicies/Policies/Policies.tsx | 63 +++++++-- .../Policies/PoliciesExpansion.tsx | 121 +++++++++++++++++- .../PolicyConfigurationEditDrawer.tsx | 1 - .../Policies/PolicyConfiguringDrawer.tsx | 4 +- 5 files changed, 177 insertions(+), 56 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx index 3bdb75f82a1..6183a2e4da1 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx @@ -68,7 +68,6 @@ interface GeneralProps { policySpec: PolicySpec; handleDrawerClose: () => void; isEditMode: boolean; - isAPILevelPolicy: boolean; } const General: FC = ({ @@ -81,14 +80,12 @@ const General: FC = ({ policySpec, handleDrawerClose, isEditMode, - isAPILevelPolicy, }) => { const intl = useIntl(); const classes = useStyles(); const [saving, setSaving] = useState(false); - const [applyToAll, setApplyToAll] = useState(false); const initState: any = {}; - const { updateApiOperations, updateAllApiOperations } = useContext(ApiOperationContext); + const { updateApiOperations } = useContext(ApiOperationContext); policySpec.policyAttributes.forEach(attr => { initState[attr.name] = null }); const [state, setState] = useState(initState); @@ -137,13 +134,8 @@ const General: FC = ({ // Saving field changes to backend const apiPolicyToSave = {...apiPolicy}; apiPolicyToSave.parameters = updateCandidates; - if (!applyToAll) { - updateApiOperations(apiPolicyToSave, target, verb, currentFlow); - } else { - // Apply the same attached policy to all the resources - updateAllApiOperations(apiPolicyToSave, currentFlow); - setApplyToAll(false); - } + + updateApiOperations(apiPolicyToSave, target, verb, currentFlow); if (setDroppedPolicy) setDroppedPolicy(null); setSaving(false); @@ -265,13 +257,6 @@ const General: FC = ({ } }; - /** - * Toggle the apply to all option on initial policy drop. - */ - const toggleApplyToAll = () => { - setApplyToAll(!applyToAll); - } - const hasAttributes = policySpec.policyAttributes.length !== 0; const resetDisabled = Object.values(state).filter((value: any) => (value !== null && (value.toString() !== 'true' || value.toString() !== 'false')) || !!value @@ -417,29 +402,6 @@ const General: FC = ({ )} ))} - {setDroppedPolicy && !isAPILevelPolicy && ( - - - } - label={( - - - - )} - /> - - )} + + + ); }; From 60f431b6f38357246deaf15a7ed6233e1c058ef3 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 2 Nov 2023 19:18:15 +0530 Subject: [PATCH 020/102] Fix layout of the add global policy --- .../main/webapp/site/public/locales/en.json | 12 ++ .../webapp/site/public/locales/raw.en.json | 6 + .../GlobalPolicies/Policies/Policies.tsx | 178 ++++++++++-------- .../GlobalPolicies/Policies/PolicyList.tsx | 29 +-- 4 files changed, 120 insertions(+), 105 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index c5fb65d88a9..58278f8aacc 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -9749,6 +9749,18 @@ "value": "The server encountered an internal error or misconfiguration and was unable to complete your request." } ], + "globalPolicies.create.heading": [ + { + "type": 0, + "value": "Create A New Global Policy" + } + ], + "globalPolicies.heading": [ + { + "type": 0, + "value": "Global Policies" + } + ], "save": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index e02447a133a..dbfdf6bf254 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4662,6 +4662,12 @@ "error.list.500.description": { "defaultMessage": "The server encountered an internal error or misconfiguration and was unable to complete your request." }, + "globalPolicies.create.heading": { + "defaultMessage": "Create A New Global Policy" + }, + "globalPolicies.heading": { + "defaultMessage": "Global Policies" + }, "save": { "defaultMessage": "Save" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx index b2cc221564f..0fd8e6745a5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx @@ -24,13 +24,14 @@ import TextField from '@material-ui/core/TextField'; import React, { useState, useEffect, useMemo } from 'react'; import Paper from '@material-ui/core/Paper'; import Box from '@material-ui/core/Box'; +import Icon from '@material-ui/core/Icon'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DndProvider } from 'react-dnd'; import { FormattedMessage } from 'react-intl'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import cloneDeep from 'lodash.clonedeep'; -import { useHistory } from 'react-router-dom'; +import { useHistory, Link } from 'react-router-dom'; import PolicyList from './PolicyList'; import type { Policy, PolicySpec, ApiLevelPolicy } from './Types'; import GatewaySelector from './GatewaySelector'; @@ -40,7 +41,7 @@ import { uuidv4 } from './Utils'; const Configurations = require('Config'); -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme) => ({ gridItem: { display: 'flex', width: '100%', @@ -66,6 +67,16 @@ const useStyles = makeStyles(() => ({ textField: { backgroundColor: 'white', }, + titleLink: { + color: theme.palette.primary.dark, + marginRight: theme.spacing(1), + }, + titleWrapper: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginBottom: theme.spacing(3), + }, })); /** @@ -259,89 +270,98 @@ const Policies: React.FC = () => { return ( - - - - - - - - - - - - - - - - - - - - - + + +
+ + + - - - - - - + + keyboard_arrow_right + + + +
+ + + - - - - - - + - - + + + + + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx index 8e28939c7e8..8727b276a09 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx @@ -25,14 +25,13 @@ import Tab from '@material-ui/core/Tab'; import CardContent from '@material-ui/core/CardContent'; import { FormattedMessage } from 'react-intl'; import Typography from '@material-ui/core/Typography'; -import { AddCircle } from '@material-ui/icons'; -import { Button, makeStyles, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core'; import CONSTS from 'AppData/Constants'; import type { Policy } from './Types'; import TabPanel from './components/TabPanel'; import CreatePolicy from './CreatePolicy'; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(() => ({ flowTabs: { '& button': { minWidth: 50, @@ -44,9 +43,6 @@ const useStyles = makeStyles((theme: Theme) => ({ addPolicyBtn: { marginLeft: 'auto', }, - buttonIcon: { - marginRight: theme.spacing(1), - }, paperPosition: { // position: 'fixed', }, @@ -69,10 +65,6 @@ const PolicyList: FC = ({policyList, fetchPolicies, isChoreoCon const [dialogOpen, setDialogOpen] = React.useState(false); let gatewayType = CONSTS.GATEWAY_TYPE.synapse; - const handleAddPolicy = () => { - setDialogOpen(true); - }; - const handleAddPolicyClose = () => { setDialogOpen(false); }; @@ -83,7 +75,7 @@ const PolicyList: FC = ({policyList, fetchPolicies, isChoreoCon return ( - + @@ -92,21 +84,6 @@ const PolicyList: FC = ({policyList, fetchPolicies, isChoreoCon defaultMessage='Policy List' /> - Date: Thu, 2 Nov 2023 22:25:46 +0530 Subject: [PATCH 021/102] Improve the global policy adding card --- .../GlobalPolicies/Policies/Policies.tsx | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx index 0fd8e6745a5..8dda8f7c10d 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx @@ -16,7 +16,7 @@ * under the License. */ -import { makeStyles, Typography } from '@material-ui/core'; +import { Card, CardContent, makeStyles, Typography } from '@material-ui/core'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import Alert from 'AppComponents/Shared/Alert'; @@ -325,20 +325,24 @@ const Policies: React.FC = () => { /> - - - - - - - + + + + + + + + + + + - + { - +
@@ -356,11 +467,11 @@ const Policies: React.FC = () => { type='submit' variant='contained' color='primary' - onClick={() => save()} + onClick={() => isCreateNew? save() : update()} > From 1f465afa05d9e5339322a32a9ca72542d4aaf002 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Mon, 6 Nov 2023 15:19:00 +0530 Subject: [PATCH 024/102] Get Unique global components to an unique location --- .../GlobalPolicies/Create/CreateGlobalPolicy.tsx | 2 +- .../components/GlobalPolicies/Edit/EditGlobalPolicy.tsx | 2 +- .../GlobalPolicies/Policies/AttachedPolicyCard.tsx | 2 +- .../GlobalPolicies/Policies/OperationPolicy.tsx | 2 +- .../components/GlobalPolicies/Policies/PolicyDropzone.tsx | 4 ++-- .../Policies/{ => UIComponents}/AttachedPolicyList.tsx | 6 +++--- .../Policies/{ => UIComponents}/GatewaySelector.tsx | 3 --- .../{AttachedPolicyForm => UIComponents}/General.tsx | 0 .../Policies/{ => UIComponents}/Policies.tsx | 8 ++++---- .../Policies/{ => UIComponents}/PoliciesExpansion.tsx | 8 ++++---- .../Policies/{ => UIComponents}/PoliciesSection.tsx | 2 +- .../{ => UIComponents}/PolicyConfigurationEditDrawer.tsx | 6 +++--- .../{ => UIComponents}/PolicyConfiguringDrawer.tsx | 4 ++-- .../Policies/{ => UIComponents}/PolicyList.tsx | 6 +++--- .../Policies/{components => UIComponents}/PolicyPanel.tsx | 2 +- 15 files changed, 27 insertions(+), 30 deletions(-) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/AttachedPolicyList.tsx (95%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/GatewaySelector.tsx (98%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{AttachedPolicyForm => UIComponents}/General.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/Policies.tsx (98%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/PoliciesExpansion.tsx (98%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/PoliciesSection.tsx (97%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/PolicyConfigurationEditDrawer.tsx (97%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/PolicyConfiguringDrawer.tsx (98%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => UIComponents}/PolicyList.tsx (98%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{components => UIComponents}/PolicyPanel.tsx (96%) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx index d677ca69fe5..24b1292d3e7 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -15,7 +15,7 @@ // under the License. import React from 'react'; -import Policies from 'AppComponents/GlobalPolicies/Policies/Policies'; +import Policies from 'AppComponents/GlobalPolicies/Policies/UIComponents/Policies'; /** * Global Policies Creating Page. diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx index b1fb2dd11c9..1f22c0a0b21 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx @@ -15,7 +15,7 @@ // under the License. import React from 'react'; -import Policies from 'AppComponents/GlobalPolicies/Policies/Policies'; +import Policies from 'AppComponents/GlobalPolicies/Policies/UIComponents/Policies'; import { useParams } from 'react-router-dom'; interface RouteParams { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index 59826a543ac..dda81450b84 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -32,7 +32,7 @@ import Utils from 'AppData/Utils'; import { FormattedMessage } from 'react-intl'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import type { AttachedPolicy, PolicySpec } from './Types'; -import PolicyConfigurationEditDrawer from './PolicyConfigurationEditDrawer'; +import PolicyConfigurationEditDrawer from './UIComponents/PolicyConfigurationEditDrawer'; import ApiOperationContext from './ApiOperationContext'; const useStyles = makeStyles(() => ({ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx index ff53729cb57..663923df3b7 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx @@ -30,7 +30,7 @@ import Utils from 'AppData/Utils'; import Badge from '@material-ui/core/Badge'; import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined'; import { FormattedMessage } from 'react-intl'; -import PoliciesExpansion from './PoliciesExpansion'; +import PoliciesExpansion from './UIComponents/PoliciesExpansion'; import type { Policy, PolicySpec } from './Types' interface OperationPolicyProps { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx index 805c3a31160..c4ea9d782e3 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx @@ -23,8 +23,8 @@ import green from '@material-ui/core/colors/green'; import red from '@material-ui/core/colors/red'; import clsx from 'clsx'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; -import AttachedPolicyList from './AttachedPolicyList'; -import PolicyConfiguringDrawer from './PolicyConfiguringDrawer'; +import AttachedPolicyList from './UIComponents/AttachedPolicyList'; +import PolicyConfiguringDrawer from './UIComponents/PolicyConfiguringDrawer'; const useStyles = makeStyles((theme: Theme) => ({ dropzoneDiv: { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/AttachedPolicyList.tsx similarity index 95% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/AttachedPolicyList.tsx index b4d882a64d5..73c4f8355d6 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/AttachedPolicyList.tsx @@ -30,9 +30,9 @@ import { SortableContext, } from '@dnd-kit/sortable'; -import AttachedPolicyCard from './AttachedPolicyCard'; -import type { AttachedPolicy, PolicySpec } from './Types'; -import ApiOperationContext from './ApiOperationContext'; +import AttachedPolicyCard from '../AttachedPolicyCard'; +import type { AttachedPolicy, PolicySpec } from '../Types'; +import ApiOperationContext from '../ApiOperationContext'; interface AttachedPolicyListProps { currentPolicyList: AttachedPolicy[]; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx similarity index 98% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx index ea4e683a4fa..4cd0487fd6a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GatewaySelector.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx @@ -35,8 +35,6 @@ import Grid from '@material-ui/core/Grid'; import FormControl from '@material-ui/core/FormControl'; import RadioGroup from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -import { isRestricted } from 'AppData/AuthManager'; -import { useAPI } from 'AppComponents/Apis/Details/components/ApiContext'; import { FormattedMessage } from 'react-intl'; const SupportedGatewayTypes = { @@ -60,7 +58,6 @@ const GatewaySelector: FC = ({ isChoreoConnectEnabled, removeAPIPoliciesForGatewayChange }) => { - const [apiFromContext] = useAPI(); let selectedGatewayType; const [isDialogBoxVisible, setIsDialogBoxVisible] = useState(false); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyForm/General.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx similarity index 98% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx index 3a33e146bac..661a75c2e0d 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx @@ -33,11 +33,11 @@ import { Progress } from 'AppComponents/Shared'; import cloneDeep from 'lodash.clonedeep'; import { useHistory, Link } from 'react-router-dom'; import PolicyList from './PolicyList'; -import type { Policy, PolicySpec, ApiLevelPolicy } from './Types'; +import type { Policy, PolicySpec, ApiLevelPolicy } from '../Types'; import GatewaySelector from './GatewaySelector'; -import { ApiOperationContextProvider } from './ApiOperationContext'; -import PolicyPanel from './components/PolicyPanel'; -import { uuidv4 } from './Utils'; +import { ApiOperationContextProvider } from '../ApiOperationContext'; +import PolicyPanel from './PolicyPanel'; +import { uuidv4 } from '../Utils'; const Configurations = require('Config'); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesExpansion.tsx similarity index 98% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesExpansion.tsx index c749a01a4b5..91117f7aa75 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesExpansion.tsx @@ -23,10 +23,10 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; import Typography from '@material-ui/core/Typography'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { FormattedMessage } from 'react-intl'; -import PolicyDropzone from './PolicyDropzone'; -import type { AttachedPolicy, Policy, PolicySpec } from './Types'; -import FlowArrow from './components/FlowArrow'; -import ApiOperationContext from './ApiOperationContext'; +import PolicyDropzone from '../PolicyDropzone'; +import type { AttachedPolicy, Policy, PolicySpec } from '../Types'; +import FlowArrow from '../components/FlowArrow'; +import ApiOperationContext from '../ApiOperationContext'; const useStyles = makeStyles((theme: Theme) => ({ flowSpecificPolicyAttachGrid: { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx similarity index 97% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesSection.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx index 9a049446900..9e6130372d9 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesSection.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx @@ -19,7 +19,7 @@ import { Grid } from '@material-ui/core'; import React, { FC } from 'react'; import Box from '@material-ui/core/Box'; -import type { Policy, PolicySpec } from './Types'; +import type { Policy, PolicySpec } from '../Types'; import PoliciesExpansion from './PoliciesExpansion'; interface PolicySectionProps { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx similarity index 97% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfigurationEditDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx index 9bcefe659dd..69ab7a4f7ec 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx @@ -33,10 +33,10 @@ import { import IconButton from '@material-ui/core/IconButton'; import { Settings, Close } from '@material-ui/icons'; import Divider from '@material-ui/core/Divider'; -import General from './AttachedPolicyForm/General'; -import type { PolicySpec, ApiPolicy, AttachedPolicy } from './Types'; +import General from './General'; +import type { PolicySpec, ApiPolicy, AttachedPolicy } from '../Types'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; -import ApiOperationContext from './ApiOperationContext'; +import ApiOperationContext from '../ApiOperationContext'; import API from 'AppData/api'; const useStyles = makeStyles((theme: Theme) => ({ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx similarity index 98% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfiguringDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx index 4a7d5ffaa0a..46073b022d3 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyConfiguringDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx @@ -33,8 +33,8 @@ import IconButton from '@material-ui/core/IconButton'; import { Settings, Close } from '@material-ui/icons'; import Divider from '@material-ui/core/Divider'; import { Progress } from 'AppComponents/Shared'; -import General from './AttachedPolicyForm/General'; -import { PolicySpec, ApiPolicy, Policy } from './Types'; +import General from './General'; +import { PolicySpec, ApiPolicy, Policy } from '../Types'; const useStyles = makeStyles((theme: Theme) => ({ drawerPaper: { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx similarity index 98% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx index 7b209fb4a69..36f77d9741b 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx @@ -27,9 +27,9 @@ import { FormattedMessage } from 'react-intl'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core'; import CONSTS from 'AppData/Constants'; -import type { Policy } from './Types'; -import TabPanel from './components/TabPanel'; -import CreatePolicy from './CreatePolicy'; +import type { Policy } from '../Types'; +import TabPanel from '../components/TabPanel'; +import CreatePolicy from '../CreatePolicy'; const useStyles = makeStyles(() => ({ flowTabs: { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx similarity index 96% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx index 27412a21d47..bad39cd95ed 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/PolicyPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx @@ -18,7 +18,7 @@ import { Box } from '@material-ui/core'; import React, { FC } from 'react'; -import PoliciesSection from '../PoliciesSection'; +import PoliciesSection from './PoliciesSection'; import type { Policy, PolicySpec } from '../Types'; interface PolicyPanelProps { From d198528127ff5c30333c2b97bbb933400f41777d Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Mon, 6 Nov 2023 15:26:38 +0530 Subject: [PATCH 025/102] Shared FlowArrow Component --- .../Policies/components/FlowArrow.tsx | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx index 99120036746..e713f966629 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx @@ -22,6 +22,7 @@ import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; import Box from '@material-ui/core/Box'; +/** Shared UI Component */ const useStyles = makeStyles(() => ({ arrowColor: { backgroundColor: 'black', @@ -34,17 +35,11 @@ const useStyles = makeStyles(() => ({ } })); -interface FlowArrowProps { +interface FlowArrowSharedProps { arrowDirection: string; } -/** - * Tab panel component to render content of a particular tab. - * Renders the available policy list under the relevant flow related tab (i.e. request, response or fault). - * @param {JSON} props Input props from parent components. - * @returns {TSX} Tab panel. - */ -const FlowArrow: FC = ({ arrowDirection }) => { +const FlowArrowShared: FC = ({ arrowDirection }) => { const classes = useStyles(); return ( @@ -69,5 +64,22 @@ const FlowArrow: FC = ({ arrowDirection }) => { ); } +/** Shared UI Component Ends */ + +interface FlowArrowProps { + arrowDirection: string; +} + +/** + * Tab panel component to render content of a particular tab. + * Renders the available policy list under the relevant flow related tab (i.e. request, response or fault). + * @param {JSON} props Input props from parent components. + * @returns {TSX} Tab panel. + */ +const FlowArrow: FC = ({ arrowDirection }) => { + return ( + + ); +} export default FlowArrow; From b09c96753a2fc9e30fa2e0ef4cfc83bfefce6de8 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Mon, 6 Nov 2023 15:36:26 +0530 Subject: [PATCH 026/102] Shared TabPanel Component --- .../Policies/components/TabPanel.tsx | 53 ++++++++++++++----- 1 file changed, 41 insertions(+), 12 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx index 98d4be45d39..95d4c5e3ff5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx @@ -21,29 +21,23 @@ import React, { FC } from 'react'; import DraggablePolicyCard from '../DraggablePolicyCard'; import type { Policy } from '../Types'; -interface TabPanelProps { +/** Shared UI Component */ +interface TabPanelSharedProps { children?: React.ReactNode; + currentFlow: string; index: number; policyList: Policy[]; selectedTab: number; fetchPolicies: () => void; } -/** - * Tab panel component to render content of a particular tab. - * Renders the available policy list under the relevant flow related tab (i.e. request, response or fault). - * @param {JSON} props Input props from parent components. - * @returns {TSX} Tab panel. - */ -const TabPanel: FC = ({ +const TabPanelShared: FC = ({ + selectedTab, index, + currentFlow, policyList, - selectedTab, fetchPolicies, }) => { - const flowNames = ['request', 'response', 'fault']; - const currentFlow = flowNames[index]; - return (
= ({
); +} +/** Shared UI Component Ends */ + +interface TabPanelProps { + children?: React.ReactNode; + index: number; + policyList: Policy[]; + selectedTab: number; + fetchPolicies: () => void; +} + +/** + * Tab panel component to render content of a particular tab. + * Renders the available policy list under the relevant flow related tab (i.e. request, response or fault). + * @param {JSON} props Input props from parent components. + * @returns {TSX} Tab panel. + */ +const TabPanel: FC = ({ + index, + policyList, + selectedTab, + fetchPolicies, +}) => { + const flowNames = ['request', 'response', 'fault']; + const currentFlow = flowNames[index]; + + return ( + + ); }; export default TabPanel; From 08e71553132d71b4a3d82b3518292f43b1e4749d Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Mon, 6 Nov 2023 15:57:58 +0530 Subject: [PATCH 027/102] Fix Format issues in GeneralDetails --- .../Policies/PolicyForm/GeneralDetails.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx index 8f182c18e0a..963e6cf2c5c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx @@ -109,19 +109,19 @@ const GeneralDetails: FC = ({ } }; - /** + /** * Function to handle supported Api Type related checkbox changes * @param {React.ChangeEvent} event event */ - const handleApiTypeChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_SUPPORTED_API_TYPES, - name: event.target.name, - checked: event.target.checked, - }); - } - }; + const handleApiTypeChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_SUPPORTED_API_TYPES, + name: event.target.name, + checked: event.target.checked, + }); + } + }; return ( @@ -214,9 +214,7 @@ const GeneralDetails: FC = ({ inputProps={{ readOnly: isViewMode, style: isViewMode ? { cursor: 'auto' } : {}, - }} - InputProps={{ - startAdornment: v, + startAdornment: v, }} /> Date: Mon, 6 Nov 2023 16:17:26 +0530 Subject: [PATCH 028/102] Shared GeneralDetails Component --- .../Policies/PolicyForm/GeneralDetails.tsx | 182 +++++++++++------- 1 file changed, 117 insertions(+), 65 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx index 963e6cf2c5c..ba307ca7790 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx @@ -30,6 +30,7 @@ import { FormattedMessage } from 'react-intl'; import FormControl from '@material-ui/core/FormControl'; import { ACTIONS } from './PolicyCreateForm'; +/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ mandatoryStar: { color: theme.palette.error.main, @@ -41,88 +42,39 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -interface GeneralDetailsProps { +interface GeneralDetailsSharedProps { displayName: string | null; version: string | null; description: string; applicableFlows: string[]; supportedApiTypes: string[]; - dispatch?: React.Dispatch; isViewMode: boolean; + nameError: boolean; + versionError: boolean; + handleInputChange: (event: React.ChangeEvent) => void; + applicableFlowsError: boolean; + handleChange: (event: React.ChangeEvent) => void; + supportedApiTypesError: boolean; + handleApiTypeChange: (event: React.ChangeEvent) => void; } -/** - * Renders the general details section. - * @param {JSON} props Input props from parent components. - * @returns {TSX} General details of the policy. - */ -const GeneralDetails: FC = ({ +const GeneralDetailsShared: FC = ({ displayName, version, description, applicableFlows, supportedApiTypes, - dispatch, isViewMode, + nameError, + versionError, + handleInputChange, + applicableFlowsError, + handleChange, + supportedApiTypesError, + handleApiTypeChange }) => { const classes = useStyles(); - // Validates whether atleast one flow (i.e. request, response or fault) is selected - // True if none of the flows are selected. - const applicableFlowsError = applicableFlows.length === 0; - - // Validates whether atleast one Api Type (i.e. HTTP, SOAP or SOAPTOREST) is selected - // True if none of the API types are selected. - const supportedApiTypesError = supportedApiTypes.length === 0; - - // Name validation - const nameError = displayName === ''; - - // Version validation - const versionError = version === ''; - - /** - * Function to handle text field inputs - * @param {React.ChangeEvent} event event - */ - const handleInputChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_METADATA, - field: event.target.name, - value: event.target.value, - }); - } - }; - - /** - * Function to handle applicable flows related checkbox changes - * @param {React.ChangeEvent} event event - */ - const handleChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_APPLICALBLE_FLOWS, - name: event.target.name, - checked: event.target.checked, - }); - } - }; - - /** - * Function to handle supported Api Type related checkbox changes - * @param {React.ChangeEvent} event event - */ - const handleApiTypeChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_SUPPORTED_API_TYPES, - name: event.target.name, - checked: event.target.checked, - }); - } - }; - return ( @@ -407,6 +359,106 @@ const GeneralDetails: FC = ({ ); +} +/** Shared UI Component Ends */ + +interface GeneralDetailsProps { + displayName: string | null; + version: string | null; + description: string; + applicableFlows: string[]; + supportedApiTypes: string[]; + dispatch?: React.Dispatch; + isViewMode: boolean; +} + +/** + * Renders the general details section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} General details of the policy. + */ +const GeneralDetails: FC = ({ + displayName, + version, + description, + applicableFlows, + supportedApiTypes, + dispatch, + isViewMode, +}) => { + // Validates whether atleast one flow (i.e. request, response or fault) is selected + // True if none of the flows are selected. + const applicableFlowsError = applicableFlows.length === 0; + + // Validates whether atleast one Api Type (i.e. HTTP, SOAP or SOAPTOREST) is selected + // True if none of the API types are selected. + const supportedApiTypesError = supportedApiTypes.length === 0; + + // Name validation + const nameError = displayName === ''; + + // Version validation + const versionError = version === ''; + + /** + * Function to handle text field inputs + * @param {React.ChangeEvent} event event + */ + const handleInputChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_METADATA, + field: event.target.name, + value: event.target.value, + }); + } + }; + + /** + * Function to handle applicable flows related checkbox changes + * @param {React.ChangeEvent} event event + */ + const handleChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_APPLICALBLE_FLOWS, + name: event.target.name, + checked: event.target.checked, + }); + } + }; + + /** + * Function to handle supported Api Type related checkbox changes + * @param {React.ChangeEvent} event event + */ + const handleApiTypeChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_SUPPORTED_API_TYPES, + name: event.target.name, + checked: event.target.checked, + }); + } + }; + + return ( + + ); }; export default React.memo(GeneralDetails); From c5defe7694feb878e5e3648f779cdcf1dbcb1e7b Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 09:33:13 +0530 Subject: [PATCH 029/102] Shared PolicyAttributes component --- .../Policies/PolicyForm/GeneralDetails.tsx | 8 +- .../Policies/PolicyForm/PolicyAttributes.tsx | 354 ++++++++++-------- 2 files changed, 212 insertions(+), 150 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx index ba307ca7790..12d2f548299 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx @@ -49,12 +49,12 @@ interface GeneralDetailsSharedProps { applicableFlows: string[]; supportedApiTypes: string[]; isViewMode: boolean; - nameError: boolean; - versionError: boolean; + nameError: any; + versionError: any; handleInputChange: (event: React.ChangeEvent) => void; - applicableFlowsError: boolean; + applicableFlowsError: any; handleChange: (event: React.ChangeEvent) => void; - supportedApiTypesError: boolean; + supportedApiTypesError: any; handleApiTypeChange: (event: React.ChangeEvent) => void; } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx index 88a6ff35950..3e27a893210 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx @@ -39,6 +39,7 @@ import { AddCircle } from '@material-ui/icons'; import { PolicyAttribute } from './Types'; import { ACTIONS } from './PolicyCreateForm'; +/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ attributeProperty: { marginLeft: theme.spacing(0.5), @@ -68,158 +69,44 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -interface PolicyAttributesProps { +interface PolicyAttributesSharedProps { policyAttributes: PolicyAttribute[]; - dispatch?: React.Dispatch; + dispatch?: React.Dispatch, isViewMode: boolean; + addNewPolicyAttribute: () => void; + getAttributeFormError: (attribute: PolicyAttribute, fieldName: string) => string; + handleAttributeChange: (event: any, id: string) => void; + handleToggle: (currentState: boolean, id: string) => void; + handleDescriptionToggle: (event: React.FormEvent, id: string) => void; + openedDescriptionPopoverId: string | null; + descriptionAnchorEl: HTMLButtonElement | null; + handleDescriptionClose: () => void; + handleValuePropertiesToggle: (event: React.FormEvent, id: string) => void; + openedValuesPopoverId: string | null; + valuePropertiesAnchorEl: HTMLButtonElement | null; + handleValuePropertiesClose: () => void; + handleAllowedValues: (event: React.ChangeEvent, id: string) => void; } -/** - * Handles the addition of policy attributes for a given policy. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy attributes UI. - */ -const PolicyAttributes: FC = ({ - policyAttributes, dispatch, isViewMode +const PolicyAttributesShared: FC = ({ + policyAttributes, + dispatch, + isViewMode, + addNewPolicyAttribute, + getAttributeFormError, + handleAttributeChange, + handleToggle, + handleDescriptionToggle, + openedDescriptionPopoverId, + descriptionAnchorEl, + handleDescriptionClose, + handleValuePropertiesToggle, + openedValuesPopoverId, + valuePropertiesAnchorEl, + handleValuePropertiesClose, + handleAllowedValues }) => { const classes = useStyles(); - const intl = useIntl(); - const [descriptionAnchorEl, setDescriptionAnchorEl] = useState(null); - const [valuePropertiesAnchorEl, setValuePropertiesAnchorEl] = useState(null); - const [openedDescriptionPopoverId, setOpenedDescriptionPopoverId] = useState(null); - const [openedValuesPopoverId, setOpenedValuesPopoverId] = useState(null); - - const addNewPolicyAttribute = () => { - if (dispatch) { - dispatch({ type: ACTIONS.ADD_POLICY_ATTRIBUTE }); - } - } - - const getAttributeFormError = (attribute: PolicyAttribute, fieldName: string) => { - let error = ''; - switch(fieldName) { - case 'name': { - if (attribute.name === '') { - error = intl.formatMessage({ - id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.name.required.error', - defaultMessage: 'Name is Empty', - }); - } - return error; - } - case 'displayName': { - if (attribute.displayName === '') { - error = intl.formatMessage({ - id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.displayName.required.error', - defaultMessage: 'Display Name is Empty', - }); - } - return error; - } - case 'validationRegex': { - const regex = attribute.validationRegex; - if (regex && regex !== '') { - try { - // eslint-disable-next-line no-new - new RegExp(regex); - } catch(e) { - error = intl.formatMessage({ - id: 'AApis.Details.Policies.PolicyForm.PolicyAttributes.validationRegex.invalid', - defaultMessage: 'Provided regular expression is invalid', - }) - } - } - return error; - } - case 'defaultValue': { - const defaultVal = attribute.defaultValue; - const regex = attribute.validationRegex; - if (defaultVal && defaultVal !== '' && regex && regex !== '') { - try { - if (!new RegExp(regex).test(defaultVal)) { - error = intl.formatMessage({ - id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.defaultValue.validation.error', - defaultMessage: 'Please enter a valid input', - }); - } - } catch(e) { - console.error(e); - } - } - return error; - } - default: - return error; - } - } - - /** - * Function to handle form inputs - * @param {any} event Event - * @param {string} id Policy Attribute ID - */ - const handleAttributeChange = (event: any, id: string) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, - id, - field: event.target.name, - value: event.target.value - }); - } - } - - /** - * Function to handle toggle of required attribute - * @param {boolean} currentState Current state of the required attrbute before toggle - * @param {string} id Policy Attribute ID - */ - const handleToggle = (currentState: boolean, id: string) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, - id, - field: 'required', - value: !currentState, - }); - } - } - - /** - * Function to handle allowed values attribute - * @param {React.ChangeEvent} event Event - * @param {string} id Policy Attribute ID - */ - const handleAllowedValues = (event: React.ChangeEvent, id: string) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, - id, - field: event.target.name, - value: event.target.value.split(/[,][\s]*/) - }); - } - } - - // Description toggle button related actions - const handleDescriptionToggle = (event: React.FormEvent, id: string) => { - setOpenedDescriptionPopoverId(id); - setDescriptionAnchorEl(event.currentTarget); - } - const handleDescriptionClose = () => { - setOpenedDescriptionPopoverId(null); - setDescriptionAnchorEl(null); - }; - - // Value properties toggle button related actions - const handleValuePropertiesToggle = (event: React.FormEvent, id: string) => { - setOpenedValuesPopoverId(id); - setValuePropertiesAnchorEl(event.currentTarget); - } - const handleValuePropertiesClose = () => { - setOpenedValuesPopoverId(null); - setValuePropertiesAnchorEl(null); - }; return ( <> @@ -736,5 +623,180 @@ const PolicyAttributes: FC = ({ ); } +/** Shared UI Component Ends */ + +interface PolicyAttributesProps { + policyAttributes: PolicyAttribute[]; + dispatch?: React.Dispatch; + isViewMode: boolean; +} + +/** + * Handles the addition of policy attributes for a given policy. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy attributes UI. + */ +const PolicyAttributes: FC = ({ + policyAttributes, dispatch, isViewMode +}) => { + const intl = useIntl(); + const [descriptionAnchorEl, setDescriptionAnchorEl] = useState(null); + const [valuePropertiesAnchorEl, setValuePropertiesAnchorEl] = useState(null); + const [openedDescriptionPopoverId, setOpenedDescriptionPopoverId] = useState(null); + const [openedValuesPopoverId, setOpenedValuesPopoverId] = useState(null); + + const addNewPolicyAttribute = () => { + if (dispatch) { + dispatch({ type: ACTIONS.ADD_POLICY_ATTRIBUTE }); + } + } + + const getAttributeFormError = (attribute: PolicyAttribute, fieldName: string) => { + let error = ''; + switch(fieldName) { + case 'name': { + if (attribute.name === '') { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.name.required.error', + defaultMessage: 'Name is Empty', + }); + } + return error; + } + case 'displayName': { + if (attribute.displayName === '') { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.displayName.required.error', + defaultMessage: 'Display Name is Empty', + }); + } + return error; + } + case 'validationRegex': { + const regex = attribute.validationRegex; + if (regex && regex !== '') { + try { + // eslint-disable-next-line no-new + new RegExp(regex); + } catch(e) { + error = intl.formatMessage({ + id: 'AApis.Details.Policies.PolicyForm.PolicyAttributes.validationRegex.invalid', + defaultMessage: 'Provided regular expression is invalid', + }) + } + } + return error; + } + case 'defaultValue': { + const defaultVal = attribute.defaultValue; + const regex = attribute.validationRegex; + if (defaultVal && defaultVal !== '' && regex && regex !== '') { + try { + if (!new RegExp(regex).test(defaultVal)) { + error = intl.formatMessage({ + id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.defaultValue.validation.error', + defaultMessage: 'Please enter a valid input', + }); + } + } catch(e) { + console.error(e); + } + } + return error; + } + default: + return error; + } + } + + /** + * Function to handle form inputs + * @param {any} event Event + * @param {string} id Policy Attribute ID + */ + const handleAttributeChange = (event: any, id: string) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, + id, + field: event.target.name, + value: event.target.value + }); + } + } + + /** + * Function to handle toggle of required attribute + * @param {boolean} currentState Current state of the required attrbute before toggle + * @param {string} id Policy Attribute ID + */ + const handleToggle = (currentState: boolean, id: string) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, + id, + field: 'required', + value: !currentState, + }); + } + } + + /** + * Function to handle allowed values attribute + * @param {React.ChangeEvent} event Event + * @param {string} id Policy Attribute ID + */ + const handleAllowedValues = (event: React.ChangeEvent, id: string) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, + id, + field: event.target.name, + value: event.target.value.split(/[,][\s]*/) + }); + } + } + + // Description toggle button related actions + const handleDescriptionToggle = (event: React.FormEvent, id: string) => { + setOpenedDescriptionPopoverId(id); + setDescriptionAnchorEl(event.currentTarget); + } + const handleDescriptionClose = () => { + setOpenedDescriptionPopoverId(null); + setDescriptionAnchorEl(null); + }; + + // Value properties toggle button related actions + const handleValuePropertiesToggle = (event: React.FormEvent, id: string) => { + setOpenedValuesPopoverId(id); + setValuePropertiesAnchorEl(event.currentTarget); + } + const handleValuePropertiesClose = () => { + setOpenedValuesPopoverId(null); + setValuePropertiesAnchorEl(null); + }; + + return ( + + ); +} export default React.memo(PolicyAttributes); From 04ec8b8cd9ca0a80721409c74ad4a5bad2dc3f67 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 09:55:24 +0530 Subject: [PATCH 030/102] Shared PolicyCreateForm component --- .../Policies/PolicyForm/PolicyCreateForm.tsx | 168 +++++++++++------- 1 file changed, 106 insertions(+), 62 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx index 6f71a321ece..99e10f90f6e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx @@ -32,6 +32,7 @@ import uuidv4 from '../Utils'; import GeneralDetails from './GeneralDetails'; import SourceDetails from './SourceDetails'; +/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ root: { flexGrow: 1, @@ -45,6 +46,99 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); +interface PolicyCreateFormSharedProps { + synapsePolicyDefinitionFile: any[]; + setSynapsePolicyDefinitionFile: React.Dispatch>; + ccPolicyDefinitionFile: any[]; + setCcPolicyDefinitionFile: React.Dispatch>; + onCancel: () => void; + saving: boolean; + state: any; + dispatch: any; + onPolicySave: () => void; + isFormDisabled: boolean; +} + +const PolicyCreateFormShared: FC = ({ + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + onCancel, + saving, + state, + dispatch, + onPolicySave, + isFormDisabled +}) => { + const classes = useStyles(); + + return ( + + {/* General details of policy */} + + + {/* Gateway specific details of policy */} + + + {/* Attributes of policy */} + + + + + + + ); +} +/** Shared UI Component Ends */ + export const ACTIONS = { UPDATE_POLICY_METADATA: 'updatePolicyMetadata', UPDATE_APPLICALBLE_FLOWS: 'updateApplicableFlows', @@ -171,7 +265,6 @@ const PolicyCreateForm: FC = ({ onCancel, saving, }) => { - const classes = useStyles(); const initialState: NewPolicyState = { displayName: null, version: null, @@ -278,67 +371,18 @@ const PolicyCreateForm: FC = ({ }; return ( - - {/* General details of policy */} - - - {/* Gateway specific details of policy */} - - - {/* Attributes of policy */} - - - - - - + ); }; From 929af68ab38fed96ba677159916cb51852e1ae73 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 10:07:25 +0530 Subject: [PATCH 031/102] Shared PolicyViewForm component --- .../Policies/PolicyForm/PolicyViewForm.tsx | 54 +++++++++++++------ 1 file changed, 38 insertions(+), 16 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx index 8e427d82038..ea4debecaaa 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx @@ -29,6 +29,7 @@ import GeneralDetails from './GeneralDetails'; import SourceDetails from './SourceDetails'; import uuidv4 from '../Utils'; +/** Shared UI Component */ const useStyles = makeStyles(() => ({ root: { flexGrow: 1, @@ -39,28 +40,19 @@ const useStyles = makeStyles(() => ({ }, })); -interface PolicyViewFormProps { +interface PolicyViewFormSharedProps { policySpec: PolicySpec; onDone: () => void; + getPolicyAttributes: () => any; } -/** - * Renders the policy view form. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Right drawer for policy configuration. - */ -const PolicyViewForm: FC = ({ policySpec, onDone }) => { +const PolicyViewFormShared: FC = ({ + policySpec, + onDone, + getPolicyAttributes, +}) => { const classes = useStyles(); - const getPolicyAttributes = () => { - const policyAttributeList = policySpec.policyAttributes.map( - (attribute: PolicySpecAttribute) => { - return { ...attribute, id: uuidv4() }; - }, - ); - return policyAttributeList; - }; - return ( {/* General details of policy */} @@ -97,5 +89,35 @@ const PolicyViewForm: FC = ({ policySpec, onDone }) => { ); }; +/** Shared UI Component Ends */ + +interface PolicyViewFormProps { + policySpec: PolicySpec; + onDone: () => void; +} + +/** + * Renders the policy view form. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Right drawer for policy configuration. + */ +const PolicyViewForm: FC = ({ policySpec, onDone }) => { + const getPolicyAttributes = () => { + const policyAttributeList = policySpec.policyAttributes.map( + (attribute: PolicySpecAttribute) => { + return { ...attribute, id: uuidv4() }; + }, + ); + return policyAttributeList; + }; + + return ( + + ); +}; export default PolicyViewForm; From b16bb40e0cfa3b431a4ed355cf7fbdc871b83c1f Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 10:24:30 +0530 Subject: [PATCH 032/102] Shared SourceDetails component --- .../Policies/PolicyForm/SourceDetails.tsx | 194 +++++++++++------- 1 file changed, 120 insertions(+), 74 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx index 18098ad531d..fbf27f8e390 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx @@ -36,6 +36,7 @@ import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import { ACTIONS } from './PolicyCreateForm'; import UploadPolicyDropzone from './UploadPolicyDropzone'; +/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ mandatoryStar: { color: theme.palette.error.main, @@ -52,16 +53,16 @@ export const GATEWAY_TYPE_LABELS = { CC: 'Choreo Connect' } -interface SourceDetailsProps { +interface SourceDetailsSharedProps { supportedGateways: string[]; synapsePolicyDefinitionFile?: any[]; setSynapsePolicyDefinitionFile?: React.Dispatch>; ccPolicyDefinitionFile?: any[]; setCcPolicyDefinitionFile?: React.Dispatch>; - dispatch?: React.Dispatch; isViewMode?: boolean; - policyId?: string; - isAPISpecific?: boolean; + handlePolicyDownload?: () => void; + supportedGatewaysError: any; + handleChange?: (event: React.ChangeEvent) => void; } /** @@ -69,83 +70,18 @@ interface SourceDetailsProps { * @param {JSON} props Input props from parent components. * @returns {TSX} General details of the policy. */ -const SourceDetails: FC = ({ +const SourceDetailsShared: FC = ({ supportedGateways, synapsePolicyDefinitionFile, setSynapsePolicyDefinitionFile, ccPolicyDefinitionFile, setCcPolicyDefinitionFile, - dispatch, isViewMode, - policyId, - isAPISpecific, + handlePolicyDownload, + supportedGatewaysError, + handleChange, }) => { const classes = useStyles(); - const { api } = useContext(ApiContext); - - // Validates whether atleast one gateway type (i.e. synapse, or CC ) is selected - // True if none of the available gateways are selected. - const supportedGatewaysError = supportedGateways.length === 0; - - /** - * Function to handle supported gateways related checkbox changes - * @param {React.ChangeEvent} event event - */ - const handleChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_SUPPORTED_GATEWAYS, - name: - event.target.name === 'regularGateway' - ? CONSTS.GATEWAY_TYPE.synapse - : CONSTS.GATEWAY_TYPE.choreoConnect, - checked: event.target.checked, - }); - } - }; - - /** - * Hanlde policy download - */ - const handlePolicyDownload = () => { - if (policyId) { - if (isAPISpecific) { - const apiPolicyContentPromise = API.getOperationPolicyContent( - policyId, - api.id, - ); - apiPolicyContentPromise - .then((apiPolicyResponse) => { - Utils.forceDownload(apiPolicyResponse); - }) - .catch((error) => { - console.error(error); - Alert.error( - , - ); - }); - } else { - const commonPolicyContentPromise = - API.getCommonOperationPolicyContent(policyId); - commonPolicyContentPromise - .then((commonPolicyResponse) => { - Utils.forceDownload(commonPolicyResponse); - }) - .catch((error) => { - console.error(error); - Alert.error( - , - ); - }); - } - } - }; /** * Renders the policy file upload related section @@ -221,7 +157,7 @@ const SourceDetails: FC = ({ ); } - return ( + return ( @@ -335,5 +271,115 @@ const SourceDetails: FC = ({ ); }; +/** Shared UI Component Ends */ + +interface SourceDetailsProps { + supportedGateways: string[]; + synapsePolicyDefinitionFile?: any[]; + setSynapsePolicyDefinitionFile?: React.Dispatch>; + ccPolicyDefinitionFile?: any[]; + setCcPolicyDefinitionFile?: React.Dispatch>; + dispatch?: React.Dispatch; + isViewMode?: boolean; + policyId?: string; + isAPISpecific?: boolean; +} + +/** + * Renders the general details section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} General details of the policy. + */ +const SourceDetails: FC = ({ + supportedGateways, + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + dispatch, + isViewMode, + policyId, + isAPISpecific, +}) => { + const { api } = useContext(ApiContext); + + // Validates whether atleast one gateway type (i.e. synapse, or CC ) is selected + // True if none of the available gateways are selected. + const supportedGatewaysError = supportedGateways.length === 0; + + /** + * Function to handle supported gateways related checkbox changes + * @param {React.ChangeEvent} event event + */ + const handleChange = (event: React.ChangeEvent) => { + if (dispatch) { + dispatch({ + type: ACTIONS.UPDATE_SUPPORTED_GATEWAYS, + name: + event.target.name === 'regularGateway' + ? CONSTS.GATEWAY_TYPE.synapse + : CONSTS.GATEWAY_TYPE.choreoConnect, + checked: event.target.checked, + }); + } + }; + + /** + * Hanlde policy download + */ + const handlePolicyDownload = () => { + if (policyId) { + if (isAPISpecific) { + const apiPolicyContentPromise = API.getOperationPolicyContent( + policyId, + api.id, + ); + apiPolicyContentPromise + .then((apiPolicyResponse) => { + Utils.forceDownload(apiPolicyResponse); + }) + .catch((error) => { + console.error(error); + Alert.error( + , + ); + }); + } else { + const commonPolicyContentPromise = + API.getCommonOperationPolicyContent(policyId); + commonPolicyContentPromise + .then((commonPolicyResponse) => { + Utils.forceDownload(commonPolicyResponse); + }) + .catch((error) => { + console.error(error); + Alert.error( + , + ); + }); + } + } + }; + + return( + + ); +}; export default React.memo(SourceDetails); From 321427c4a0cd8d20a6ecac8b746685619581025d Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 10:34:18 +0530 Subject: [PATCH 033/102] Shared UploadPolicyDropzone component --- .../PolicyForm/UploadPolicyDropzone.tsx | 43 ++++++++++++++++--- 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx index ea5b1bb8e26..7df2f78dfb8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx @@ -37,6 +37,7 @@ import Icon from '@material-ui/core/Icon'; import { HelpOutline } from '@material-ui/icons'; import { GATEWAY_TYPE_LABELS } from './SourceDetails'; +/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ dropZoneWrapper: { border: '1px dashed ' + theme.palette.primary.main, @@ -73,10 +74,11 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -interface UploadPolicyDropzoneProps { +interface UploadPolicyDropzoneSharedProps { policyDefinitionFile: any[]; setPolicyDefinitionFile: React.Dispatch>; gateway: string; + handleDrop: (policyDefinition: any) => void; } /** @@ -84,17 +86,14 @@ interface UploadPolicyDropzoneProps { * @param {JSON} props Input props from parent components. * @returns {TSX} Policy file upload managing UI. */ -const UploadPolicyDropzone: FC = ({ +const UploadPolicyDropzoneShared: FC = ({ policyDefinitionFile, setPolicyDefinitionFile, gateway, + handleDrop, }) => { const classes = useStyles(); - const handleDrop = (policyDefinition: any) => { - setPolicyDefinitionFile(policyDefinition); - }; - const renderPolicyFileDropzone = () => { return ( = ({ ); }; +/** Shared UI Component ends */ + +interface UploadPolicyDropzoneProps { + policyDefinitionFile: any[]; + setPolicyDefinitionFile: React.Dispatch>; + gateway: string; +} + +/** + * Handles the policy file upload. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy file upload managing UI. + */ +const UploadPolicyDropzone: FC = ({ + policyDefinitionFile, + setPolicyDefinitionFile, + gateway, +}) => { + + const handleDrop = (policyDefinition: any) => { + setPolicyDefinitionFile(policyDefinition); + }; + + return ( + + ); +}; export default UploadPolicyDropzone; From 275f0791686370091430c5ae1ad14c1d89f170c5 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 11:22:35 +0530 Subject: [PATCH 034/102] Shared AttachedPolicyCard component --- .../Policies/AttachedPolicyCard.tsx | 196 +++++++++++------- 1 file changed, 125 insertions(+), 71 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index dda81450b84..03fabaa3a5b 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -35,6 +35,7 @@ import type { AttachedPolicy, PolicySpec } from './Types'; import PolicyConfigurationEditDrawer from './UIComponents/PolicyConfigurationEditDrawer'; import ApiOperationContext from './ApiOperationContext'; +/** Shared UI Component */ const useStyles = makeStyles(() => ({ actionsBox: { display: 'flex', @@ -43,15 +44,18 @@ const useStyles = makeStyles(() => ({ }, })); -interface AttachedPolicyCardProps { +interface AttachedPolicyCardSharedProps { policyObj: AttachedPolicy; - currentPolicyList: AttachedPolicy[]; - setCurrentPolicyList: React.Dispatch>; currentFlow: string; verb: string; target: string; allPolicies: PolicySpec[] | null; isAPILevelPolicy: boolean; + drawerOpen: any; + handleDrawerOpen: () => void; + handlePolicyDownload: (event: React.MouseEvent) => void; + handleDelete: (event: React.MouseEvent) => void; + setDrawerOpen: React.Dispatch>; } /** @@ -59,20 +63,20 @@ interface AttachedPolicyCardProps { * @param {any} AttachedPolicyCardProps Input props from parent components. * @returns {TSX} Sortable attached policy card UI. */ -const AttachedPolicyCard: FC = ({ +const AttachedPolicyCardShared: FC = ({ policyObj, - currentPolicyList, - setCurrentPolicyList, currentFlow, verb, target, allPolicies, isAPILevelPolicy, + drawerOpen, + handleDrawerOpen, + handlePolicyDownload, + handleDelete, + setDrawerOpen }) => { const classes = useStyles(); - const { api } = useContext(ApiContext); - const { deleteApiOperation } = useContext(ApiOperationContext); - const [drawerOpen, setDrawerOpen] = useState(false); const policyColor = Utils.stringToColor(policyObj.displayName); const policyBackgroundColor = drawerOpen ? `rgba(${Utils.hexToRGB(policyColor)}, 0.2)` @@ -85,6 +89,7 @@ const AttachedPolicyCard: FC = ({ transition, isDragging, } = useSortable({ id: policyObj.uniqueKey.toString() }); + const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition, @@ -99,6 +104,104 @@ const AttachedPolicyCard: FC = ({ backgroundColor: policyBackgroundColor, opacity: isDragging ? 0.5 : 1, }; + return ( + <> +
+ + + {Utils.stringAvatar( + policyObj.displayName.toUpperCase(), + )} + + + + + + + + + + +
+ {drawerOpen && ( + + )} + + ); +} +/** Shared UI Component ends */ + +interface AttachedPolicyCardProps { + policyObj: AttachedPolicy; + currentPolicyList: AttachedPolicy[]; + setCurrentPolicyList: React.Dispatch>; + currentFlow: string; + verb: string; + target: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; +} + +/** + * Renders a single sortable policy card. + * @param {any} AttachedPolicyCardProps Input props from parent components. + * @returns {TSX} Sortable attached policy card UI. + */ +const AttachedPolicyCard: FC = ({ + policyObj, + currentPolicyList, + setCurrentPolicyList, + currentFlow, + verb, + target, + allPolicies, + isAPILevelPolicy, +}) => { + + const { api } = useContext(ApiContext); + const { deleteApiOperation } = useContext(ApiOperationContext); + const [drawerOpen, setDrawerOpen] = useState(false); + /** * Handle policy delete @@ -176,68 +279,19 @@ const AttachedPolicyCard: FC = ({ }; return ( - <> -
- - - {Utils.stringAvatar( - policyObj.displayName.toUpperCase(), - )} - - - - - - - - - - -
- {drawerOpen && ( - - )} - + ); }; From 532ee693d6d8b16bf49ffa9e48c60194955d86a5 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 11:36:32 +0530 Subject: [PATCH 035/102] Shared CreatePolicy component --- .../GlobalPolicies/Policies/CreatePolicy.tsx | 161 +++++++++++------- 1 file changed, 101 insertions(+), 60 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx index b05c01e685c..30092393d79 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx @@ -34,6 +34,7 @@ import CONSTS from 'AppData/Constants'; import type { CreatePolicySpec } from './Types'; import PolicyCreateForm from './PolicyForm/PolicyCreateForm'; +/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ link: { color: theme.palette.primary.dark, @@ -42,74 +43,30 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -interface CreatePolicyProps { +interface CreatePolicySharedProps { handleDialogClose: () => void; dialogOpen: boolean; - fetchPolicies: () => void; + stopPropagation: any; + onSave: (policySpecification: CreatePolicySpec) => void; + synapsePolicyDefinitionFile: any[]; + setSynapsePolicyDefinitionFile: any; + ccPolicyDefinitionFile: any[]; + setCcPolicyDefinitionFile: any; + saving: any; } -/** - * Renders the UI to create a new policy. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy create UI. - */ -const CreatePolicy: React.FC = ({ +const CreatePolicyShared: React.FC = ({ handleDialogClose, dialogOpen, - fetchPolicies, + stopPropagation, + onSave, + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + saving }) => { const classes = useStyles(); - const { api } = useContext(ApiContext); - const [saving, setSaving] = useState(false); - const [synapsePolicyDefinitionFile, setSynapsePolicyDefinitionFile] = useState([]); - const [ccPolicyDefinitionFile, setCcPolicyDefinitionFile] = useState([]); - - const savePolicy = ( - policySpecContent: CreatePolicySpec, - synapsePolicyDefinition: any, - ccPolicyDefinition: any, - ) => { - setSaving(true); - const promisedCommonPolicyAdd = API.addOperationPolicy( - policySpecContent, - api.id, - synapsePolicyDefinition, - ccPolicyDefinition, - ); - promisedCommonPolicyAdd - .then(() => { - Alert.info('Policy created successfully!'); - setSynapsePolicyDefinitionFile([]); - setCcPolicyDefinitionFile([]); - handleDialogClose(); - fetchPolicies(); - }) - .catch((error) => { - handleDialogClose(); - console.error(error); - Alert.error('Something went wrong while creating policy'); - }) - .finally(() => { - setSaving(false); - }); - }; - - const onSave = (policySpecification: CreatePolicySpec) => { - const synapseFile = synapsePolicyDefinitionFile.length !== 0 ? synapsePolicyDefinitionFile : null; - const ccFile = ccPolicyDefinitionFile.length !== 0 ? ccPolicyDefinitionFile : null; - savePolicy( - policySpecification, - synapseFile, - ccFile, - ); - handleDialogClose(); - }; - - const stopPropagation = ( - e: React.MouseEvent, - ) => { - e.stopPropagation(); - }; return ( <> @@ -182,6 +139,90 @@ const CreatePolicy: React.FC = ({ ); +} +/** Shared UI Component Ends */ + +interface CreatePolicyProps { + handleDialogClose: () => void; + dialogOpen: boolean; + fetchPolicies: () => void; +} + +/** + * Renders the UI to create a new policy. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy create UI. + */ +const CreatePolicy: React.FC = ({ + handleDialogClose, + dialogOpen, + fetchPolicies, +}) => { + const { api } = useContext(ApiContext); + const [saving, setSaving] = useState(false); + const [synapsePolicyDefinitionFile, setSynapsePolicyDefinitionFile] = useState([]); + const [ccPolicyDefinitionFile, setCcPolicyDefinitionFile] = useState([]); + + const savePolicy = ( + policySpecContent: CreatePolicySpec, + synapsePolicyDefinition: any, + ccPolicyDefinition: any, + ) => { + setSaving(true); + const promisedCommonPolicyAdd = API.addOperationPolicy( + policySpecContent, + api.id, + synapsePolicyDefinition, + ccPolicyDefinition, + ); + promisedCommonPolicyAdd + .then(() => { + Alert.info('Policy created successfully!'); + setSynapsePolicyDefinitionFile([]); + setCcPolicyDefinitionFile([]); + handleDialogClose(); + fetchPolicies(); + }) + .catch((error) => { + handleDialogClose(); + console.error(error); + Alert.error('Something went wrong while creating policy'); + }) + .finally(() => { + setSaving(false); + }); + }; + + const onSave = (policySpecification: CreatePolicySpec) => { + const synapseFile = synapsePolicyDefinitionFile.length !== 0 ? synapsePolicyDefinitionFile : null; + const ccFile = ccPolicyDefinitionFile.length !== 0 ? ccPolicyDefinitionFile : null; + savePolicy( + policySpecification, + synapseFile, + ccFile, + ); + handleDialogClose(); + }; + + const stopPropagation = ( + e: React.MouseEvent, + ) => { + e.stopPropagation(); + }; + + return ( + + ); }; export default CreatePolicy; From 471679e92ae3464e4edd3b5d6db7bafbb7752e2f Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 11:49:32 +0530 Subject: [PATCH 036/102] Shared DeletePolicy component --- .../GlobalPolicies/Policies/DeletePolicy.tsx | 107 +++++++++++------- 1 file changed, 69 insertions(+), 38 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx index 47024537bac..ca1b62f0dc3 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx @@ -31,51 +31,24 @@ import Alert from 'AppComponents/Shared/Alert'; import API from 'AppData/api'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; -interface DeletePolicyProps { +/** Shared UI Component */ +interface DeletePolicySharedProps { policyId: string; policyName: string; - fetchPolicies: () => void; + toggleOpen: () => void; + handleClose: () => void; + open: boolean; + handleDelete: () => void; } -/** - * Renders the policy configuring drawer. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Right drawer for policy configuration. - */ -const DeletePolicy: FC = ({ +const DeletePolicyShared: FC = ({ policyId, policyName, - fetchPolicies, + toggleOpen, + handleClose, + open, + handleDelete }) => { - const { api } = useContext(ApiContext); - const [open, setOpen] = useState(false); - const setOpenLocal = setOpen; // Need to copy this to access inside the promise.then - const toggleOpen = () => { - setOpen(!open); - }; - - const handleDelete = () => { - const promisedCommonPolicyDelete = API.deleteOperationPolicy( - api.id, - policyId, - ); - promisedCommonPolicyDelete - .then(() => { - Alert.info(`${policyName} policy deleted successfully!`); - setOpenLocal(!open); - fetchPolicies(); - }) - .catch((error) => { - console.error(error); - Alert.error('Error occurred while deleteting policy'); - setOpenLocal(!open); - }); - }; - - const handleClose = () => { - setOpen(false); - }; - return ( <> = ({ ); +} +/** Shared UI Component ends */ + +interface DeletePolicyProps { + policyId: string; + policyName: string; + fetchPolicies: () => void; +} + +/** + * Renders the policy configuring drawer. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Right drawer for policy configuration. + */ +const DeletePolicy: FC = ({ + policyId, + policyName, + fetchPolicies, +}) => { + const { api } = useContext(ApiContext); + const [open, setOpen] = useState(false); + const setOpenLocal = setOpen; // Need to copy this to access inside the promise.then + const toggleOpen = () => { + setOpen(!open); + }; + + const handleDelete = () => { + const promisedCommonPolicyDelete = API.deleteOperationPolicy( + api.id, + policyId, + ); + promisedCommonPolicyDelete + .then(() => { + Alert.info(`${policyName} policy deleted successfully!`); + setOpenLocal(!open); + fetchPolicies(); + }) + .catch((error) => { + console.error(error); + Alert.error('Error occurred while deleteting policy'); + setOpenLocal(!open); + }); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + + ); }; export default DeletePolicy; From d51e5378cce1c5650b3ae7ca198f6b2c1f0eea7d Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 12:06:21 +0530 Subject: [PATCH 037/102] Shared DraggablePolicyCard component --- .../Policies/DraggablePolicyCard.tsx | 77 +++++++++++++++---- 1 file changed, 60 insertions(+), 17 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx index 8622ab8aa40..999f9287251 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx @@ -33,6 +33,7 @@ import type { Policy } from './Types'; import ViewPolicy from './ViewPolicy'; import DeletePolicy from './DeletePolicy'; +/** Shared UI Component */ const useStyles = makeStyles(() => ({ policyCardText: { overflow: 'hidden', @@ -58,27 +59,30 @@ const style: CSSProperties = { borderRadius: '0.3em', }; -interface DraggablePolicyCardProps { +interface DraggablePolicyCardSharedProps { policyObj: Policy; showCopyIcon?: boolean; isLocalToAPI: boolean; fetchPolicies: () => void; + setHovered: any; + hovered: boolean; + handleViewPolicy: () => void; + dialogOpen: boolean; + handleViewPolicyClose: () => void; } -/** - * Renders a single draggable policy block. - * @param {any} DraggablePolicyCardProps Input props from parent components. - * @returns {TSX} Draggable Policy card UI. - */ -const DraggablePolicyCard: React.FC = ({ +const DraggablePolicyCardShared: React.FC = ({ policyObj, showCopyIcon, isLocalToAPI, fetchPolicies, + setHovered, + hovered, + handleViewPolicy, + dialogOpen, + handleViewPolicyClose }) => { const classes = useStyles(); - const [hovered, setHovered] = useState(false); - const [dialogOpen, setDialogOpen] = useState(false); const [{ isDragging }, drag] = useDrag( () => ({ @@ -104,14 +108,6 @@ const DraggablePolicyCard: React.FC = ({ [isDragging], ); - const handleViewPolicy = () => { - setDialogOpen(true); - }; - - const handleViewPolicyClose = () => { - setDialogOpen(false); - }; - return ( <> @@ -196,6 +192,53 @@ const DraggablePolicyCard: React.FC = ({ /> ); +} + +/** Shared UI Component ends */ + +interface DraggablePolicyCardProps { + policyObj: Policy; + showCopyIcon?: boolean; + isLocalToAPI: boolean; + fetchPolicies: () => void; +} + +/** + * Renders a single draggable policy block. + * @param {any} DraggablePolicyCardProps Input props from parent components. + * @returns {TSX} Draggable Policy card UI. + */ +const DraggablePolicyCard: React.FC = ({ + policyObj, + showCopyIcon, + isLocalToAPI, + fetchPolicies, +}) => { + const [hovered, setHovered] = useState(false); + const [dialogOpen, setDialogOpen] = useState(false); + + + const handleViewPolicy = () => { + setDialogOpen(true); + }; + + const handleViewPolicyClose = () => { + setDialogOpen(false); + }; + + return ( + + ); }; export default DraggablePolicyCard; From 319500fc87e8b94e8d53f3dff66e43ca6cc7cddd Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 12:17:39 +0530 Subject: [PATCH 038/102] Remove Operation related components --- .../Policies/OperationButton.tsx | 58 ------ .../Policies/OperationPolicy.tsx | 195 ------------------ .../Policies/OperationsGroup.tsx | 79 ------- .../Policies/SaveOperationPolicies.tsx | 95 --------- 4 files changed, 427 deletions(-) delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationButton.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationsGroup.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SaveOperationPolicies.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationButton.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationButton.tsx deleted file mode 100644 index 8f05f6407c1..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationButton.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { FC } from 'react'; -import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; - -interface OperationButtonProps { - verb: string; -} - -const getStyles = (verb: string) => { - const useStyles = makeStyles((theme: any) => { - const backgroundColor = theme.custom.resourceChipColors[verb]; - return { - customButton: { - '&:hover': { backgroundColor }, - backgroundColor, - width: theme.spacing(12), - color: theme.palette.getContrastText(backgroundColor), - } - }; - })(); - return useStyles; -} - -const OperationButton: FC = ({ verb }) => { - - const classes = getStyles(verb); - return ( - - ); -}; - -export default OperationButton; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx deleted file mode 100644 index 663923df3b7..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationPolicy.tsx +++ /dev/null @@ -1,195 +0,0 @@ -/* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { FC } from 'react'; -import ExpansionPanel from '@material-ui/core/ExpansionPanel'; -import Grid from '@material-ui/core/Grid'; -import Box from '@material-ui/core/Box'; -import Divider from '@material-ui/core/Divider'; -import Button from '@material-ui/core/Button'; -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; -import Typography from '@material-ui/core/Typography'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { makeStyles } from '@material-ui/core/styles'; -import Utils from 'AppData/Utils'; -import Badge from '@material-ui/core/Badge'; -import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined'; -import { FormattedMessage } from 'react-intl'; -import PoliciesExpansion from './UIComponents/PoliciesExpansion'; -import type { Policy, PolicySpec } from './Types' - -interface OperationPolicyProps { - target: string; - verb: string; - operation: any; - highlight: any; - api: any; - disableUpdate: any; - expandedResource: string | null; - setExpandedResource: React.Dispatch>; - policyList: Policy[]; - allPolicies: PolicySpec[] | null; - isChoreoConnectEnabled: boolean; -} - -const OperationPolicy: FC = ({ - operation, highlight, api, target, verb, expandedResource, setExpandedResource, - policyList, allPolicies, isChoreoConnectEnabled -}) => { - const useStyles = makeStyles((theme: any) => { - const backgroundColor = theme.custom.resourceChipColors[verb]; - return { - customButton: { - '&:hover': { backgroundColor }, - backgroundColor, - width: theme.spacing(12), - color: theme.palette.getContrastText(backgroundColor), - }, - paperStyles: { - border: `1px solid ${backgroundColor}`, - borderBottom: '', - width: '100%', - }, - customDivider: { - backgroundColor, - }, - highlightSelected: { - backgroundColor: Utils.hexToRGBA(backgroundColor, 0.1), - }, - contentNoMargin: { - margin: theme.spacing(0), - }, - targetText: { - maxWidth: 300, - margin: '0px 20px', - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - display: 'inline-block', - }, - operationSummaryGrid: { - display: 'flex', - alignItems: 'center', - flexBasis: '100%', - maxWidth: '100%', - } - }; - }); - - const classes = useStyles(); - - const apiOperation = api.operations[target] && api.operations[target][verb.toUpperCase()]; - const isUsedInAPIProduct = apiOperation && Array.isArray( - apiOperation.usedProductIds, - ) && apiOperation.usedProductIds.length; - - const handleExpansion = (panel: string) => (event: any, isExpanded: boolean) => { - setExpandedResource(isExpanded ? panel : null); - }; - - const renderUsedInApiProducts = () => { - return (isUsedInAPIProduct) ? ( - - - - - - - - - ) : ( - - ); - } - - return ( - <> - - } - id={verb + target} - classes={{ content: classes.contentNoMargin }} - > - - - - - - - {target} - {(operation.summary && operation.summary !== '') && ( - - {operation.summary} - - )} - - - {renderUsedInApiProducts} - - - - - - - ); -}; - -export default OperationPolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationsGroup.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationsGroup.tsx deleted file mode 100644 index 09ad0e708df..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/OperationsGroup.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { FC } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import ExpansionPanel from '@material-ui/core/ExpansionPanel'; -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; -import Typography from '@material-ui/core/Typography'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { Box } from '@material-ui/core'; - -const useStyles = makeStyles((theme) => ({ - tagClass: { - maxWidth: 1000, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - [theme.breakpoints.down('md')]: { - maxWidth: 800, - }, - }, -})); - -interface OperationGroupProps { - openAPI: any; - children: any; - tag: string; -} - -const OperationGroup: FC = ({ - openAPI, children, tag -}) => { - const classes = useStyles(); - const currentTagInfo = openAPI.tags && openAPI.tags.find((tagInfo: any) => tagInfo.name === tag); - let borderColor = ""; - - return ( - - - } id={tag}> - - {tag} - - - {' '} - - {currentTagInfo && ( - - {currentTagInfo.description} - - )} - - {children} - - - ); -}; - -export default OperationGroup; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SaveOperationPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SaveOperationPolicies.tsx deleted file mode 100644 index 5615c4ed6f9..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SaveOperationPolicies.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { useContext } from 'react'; -import Grid from '@material-ui/core/Grid'; -import Box from '@material-ui/core/Box'; -import Button from '@material-ui/core/Button'; -import { useHistory } from 'react-router-dom'; -import { isRestricted } from 'AppData/AuthManager'; -import { FormattedMessage } from 'react-intl'; -import CustomSplitButton from 'AppComponents/Shared/CustomSplitButton'; -import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; - -interface SaveOperationPoliciesProps { - saveApi: () => void; - updating: boolean; -} - -/** - * Renders the save button (with Save option & Save and deploy option). - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policies page save button. - */ -const SaveOperationPolicies: React.FC = ({ - saveApi, updating -}) => { - const { api } = useContext(ApiContext); - const history = useHistory(); - - /** - * Handle save button event - * - */ - const handleSave = () => { - saveApi(); - } - - /** - * Handle save and deploy button event - * - */ - const handleSaveAndDeploy = () => { - saveApi(); - history.push({ - pathname: `/apis/${api.id}/deployments`, - state: 'deploy', - }); - } - - return ( - - - - {api.isRevision || isRestricted(['apim:api_create'], api) ? ( - - ) : ( - - )} - - - - ); -}; - -export default SaveOperationPolicies; From ad6d9463d0c058ce7a76ccfa47aa533292fcbc76 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 13:14:41 +0530 Subject: [PATCH 039/102] Shared PolicyDropzone component --- .../Policies/PolicyDropzone.tsx | 89 +++++++++++++++---- 1 file changed, 70 insertions(+), 19 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx index c4ea9d782e3..870f23f29e3 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx @@ -26,6 +26,7 @@ import type { AttachedPolicy, Policy, PolicySpec } from './Types'; import AttachedPolicyList from './UIComponents/AttachedPolicyList'; import PolicyConfiguringDrawer from './UIComponents/PolicyConfiguringDrawer'; +/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ dropzoneDiv: { border: '1px dashed', @@ -60,47 +61,38 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -interface PolicyDropzoneProps { +interface PolicyDropzoneSharedProps { policyDisplayStartDirection: string; currentPolicyList: AttachedPolicy[]; setCurrentPolicyList: React.Dispatch< React.SetStateAction >; - droppablePolicyList: string[]; currentFlow: string; target: string; verb: string; allPolicies: PolicySpec[] | null; isAPILevelPolicy: boolean; + drop: any; + canDrop: any; + droppedPolicy: Policy | null; + setDroppedPolicy: any; } -/** - * Renders the dropzone which accepts policy cards that are dragged and dropped. - * @param {JSON} props Input props from parent components. - * @returns {TSX} List of policies local to the API segment. - */ -const PolicyDropzone: FC = ({ +const PolicyDropzoneShared: FC = ({ policyDisplayStartDirection, currentPolicyList, setCurrentPolicyList, - droppablePolicyList, currentFlow, target, verb, allPolicies, isAPILevelPolicy, + drop, + canDrop, + droppedPolicy, + setDroppedPolicy }) => { const classes = useStyles(); - const [droppedPolicy, setDroppedPolicy] = useState(null); - - const [{ canDrop }, drop] = useDrop({ - accept: droppablePolicyList, - drop: (item: any) => setDroppedPolicy(item.droppedPolicy), - collect: (monitor) => ({ - canDrop: monitor.canDrop(), - }), - }); - return ( <> @@ -149,6 +141,65 @@ const PolicyDropzone: FC = ({ )} ); +} +/** Shared UI Component ends */ + +interface PolicyDropzoneProps { + policyDisplayStartDirection: string; + currentPolicyList: AttachedPolicy[]; + setCurrentPolicyList: React.Dispatch< + React.SetStateAction + >; + droppablePolicyList: string[]; + currentFlow: string; + target: string; + verb: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; +} + +/** + * Renders the dropzone which accepts policy cards that are dragged and dropped. + * @param {JSON} props Input props from parent components. + * @returns {TSX} List of policies local to the API segment. + */ +const PolicyDropzone: FC = ({ + policyDisplayStartDirection, + currentPolicyList, + setCurrentPolicyList, + droppablePolicyList, + currentFlow, + target, + verb, + allPolicies, + isAPILevelPolicy, +}) => { + const [droppedPolicy, setDroppedPolicy] = useState(null); + + const [{ canDrop }, drop] = useDrop({ + accept: droppablePolicyList, + drop: (item: any) => setDroppedPolicy(item.droppedPolicy), + collect: (monitor) => ({ + canDrop: monitor.canDrop(), + }), + }); + + return ( + + ); }; export default PolicyDropzone; From 517a2b627367dd904af321921734098f99d7842e Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 13:22:25 +0530 Subject: [PATCH 040/102] Shared ViewPolicy component --- .../GlobalPolicies/Policies/ViewPolicy.tsx | 121 +++++++++++------- 1 file changed, 77 insertions(+), 44 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx index 5cee9ec5140..554a849e67c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx @@ -31,6 +31,74 @@ import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import type { Policy, PolicySpec } from './Types'; import PolicyViewForm from './PolicyForm/PolicyViewForm'; +/** Shared UI Component */ +interface ViewPolicySharedProps { + handleDialogClose: () => void; + dialogOpen: boolean; + policyObj: Policy; + isLocalToAPI: boolean; + stopPropagation: (e: React.MouseEvent) => void; + toggleOpen: () => void; + policySpec: PolicySpec; +} + +const ViewPolicyShared: React.FC = ({ + handleDialogClose, + dialogOpen, + policyObj, + stopPropagation, + toggleOpen, + policySpec, +}) => { + return ( + <> + + + + + {policyObj.displayName} + + + + + close + + + + + + + + + + + + + ); +}; +/** Shared UI Component ends */ + interface ViewPolicyProps { handleDialogClose: () => void; dialogOpen: boolean; @@ -116,50 +184,15 @@ const ViewPolicy: React.FC = ({ } return ( - <> - - - - - {policyObj.displayName} - - - - - close - - - - - - - - - - - - + ); }; From 2eb9e80373353c0aa37a842068159f43df893385 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 13:45:54 +0530 Subject: [PATCH 041/102] FIx building warnings --- .../main/webapp/site/public/locales/en.json | 20 ++++++++----- .../webapp/site/public/locales/raw.en.json | 7 ++++- .../Policies/UIComponents/Policies.tsx | 30 ++++++++++++++----- 3 files changed, 41 insertions(+), 16 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 58278f8aacc..f739762d84c 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -6071,6 +6071,12 @@ "value": "Save" } ], + "Apis.Details.Policies.SaveOperationPolicies.update": [ + { + "type": 0, + "value": "Update" + } + ], "Apis.Details.ProductResources.ProductResourcesEdit.api.resources": [ { "type": 0, @@ -8777,12 +8783,6 @@ "value": "Error while validating the imported schema" } ], - "GlobalPolicies.Edit.EditGlobalPolicy": [ - { - "type": 0, - "value": "Hi, I am the GlobalPolicies.Edit.EditGlobalPolicy component!" - } - ], "GlobalPolicies.Listing.onboarding.create.new": [ { "type": 0, @@ -9749,12 +9749,18 @@ "value": "The server encountered an internal error or misconfiguration and was unable to complete your request." } ], - "globalPolicies.create.heading": [ + "globalPolicies.create.create.heading": [ { "type": 0, "value": "Create A New Global Policy" } ], + "globalPolicies.create.edit.heading": [ + { + "type": 0, + "value": "Edit Global Policy" + } + ], "globalPolicies.heading": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 2d4cf1a1129..756bb24adc3 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -2886,7 +2886,8 @@ "Apis.Details.Policies.SaveOperationPolicies.save": { "defaultMessage": "Save" }, - "Apis.Details.Policies.SaveOperationPolicies.save.update": { + "Apis.Details.Policies.SaveOperationPolicies.update": { + "defaultMessage": "Update" }, "Apis.Details.ProductResources.ProductResourcesEdit.api.resources": { "defaultMessage": "Select API Resources" @@ -4661,7 +4662,11 @@ "error.list.500.description": { "defaultMessage": "The server encountered an internal error or misconfiguration and was unable to complete your request." }, + "globalPolicies.create.create.heading": { + "defaultMessage": "Create A New Global Policy" + }, "globalPolicies.create.edit.heading": { + "defaultMessage": "Edit Global Policy" }, "globalPolicies.heading": { "defaultMessage": "Global Policies" diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx index 661a75c2e0d..a877585598f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx @@ -397,10 +397,17 @@ const Policies: FC = ({ keyboard_arrow_right - + {isCreateNew ? + + : + + } @@ -469,10 +476,17 @@ const Policies: FC = ({ color='primary' onClick={() => isCreateNew? save() : update()} > - + {isCreateNew ? + + : + + } From 95ca4ae8e1e6151b565e34799a9644652a19e29f Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 14:02:20 +0530 Subject: [PATCH 042/102] Common FlowArrow --- .../Policies/components/FlowArrow.tsx | 49 +------------- .../Shared/PoliciesUI/FlowArrow.tsx | 67 +++++++++++++++++++ 2 files changed, 68 insertions(+), 48 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/FlowArrow.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx index e713f966629..44636784ad6 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx @@ -17,54 +17,7 @@ */ import React, { FC } from 'react'; -import { makeStyles } from '@material-ui/core'; -import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; -import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; -import Box from '@material-ui/core/Box'; - -/** Shared UI Component */ -const useStyles = makeStyles(() => ({ - arrowColor: { - backgroundColor: 'black', - opacity: 0.4, - }, - iconSize: { - fontSize: '2em', - color: 'black', - opacity: 0.4, - } -})); - -interface FlowArrowSharedProps { - arrowDirection: string; -} - -const FlowArrowShared: FC = ({ arrowDirection }) => { - const classes = useStyles(); - - return ( - <> - {arrowDirection === 'left' - ? ( - - - - - - - ) : ( - - - - - - - ) - } - - ); -} -/** Shared UI Component Ends */ +import FlowArrowShared from 'AppComponents/Shared/PoliciesUI/FlowArrow'; interface FlowArrowProps { arrowDirection: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/FlowArrow.tsx new file mode 100644 index 00000000000..5f10bb627ec --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/FlowArrow.tsx @@ -0,0 +1,67 @@ +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ + +import React, { FC } from 'react'; +import { makeStyles } from '@material-ui/core'; +import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import Box from '@material-ui/core/Box'; + +const useStyles = makeStyles(() => ({ + arrowColor: { + backgroundColor: 'black', + opacity: 0.4, + }, + iconSize: { + fontSize: '2em', + color: 'black', + opacity: 0.4, + } +})); + +interface FlowArrowSharedProps { + arrowDirection: string; +} + +const FlowArrowShared: FC = ({ arrowDirection }) => { + const classes = useStyles(); + + return ( + <> + {arrowDirection === 'left' + ? ( + + + + + + + ) : ( + + + + + + + ) + } + + ); +} + +export default FlowArrowShared; \ No newline at end of file From 7e8b6b83c319b0b92ee70c1a1da7c070db2d881b Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 14:26:29 +0530 Subject: [PATCH 043/102] Common TabPanel --- .../Policies/components/TabPanel.tsx | 48 +--------- .../components/Shared/PoliciesUI/TabPanel.tsx | 48 ++++++++++ .../components/Shared/PoliciesUI/Types.d.ts | 94 +++++++++++++++++++ 3 files changed, 145 insertions(+), 45 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx index 95d4c5e3ff5..02e701fd14f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx @@ -16,53 +16,10 @@ * under the License. */ -import { Box } from '@material-ui/core'; import React, { FC } from 'react'; -import DraggablePolicyCard from '../DraggablePolicyCard'; +import TabPanelShared from 'AppComponents/Shared/PoliciesUI/TabPanel'; import type { Policy } from '../Types'; - -/** Shared UI Component */ -interface TabPanelSharedProps { - children?: React.ReactNode; - currentFlow: string; - index: number; - policyList: Policy[]; - selectedTab: number; - fetchPolicies: () => void; -} - -const TabPanelShared: FC = ({ - selectedTab, - index, - currentFlow, - policyList, - fetchPolicies, -}) => { - return ( - - ); -} -/** Shared UI Component Ends */ +import DraggablePolicyCard from '../DraggablePolicyCard'; interface TabPanelProps { children?: React.ReactNode; @@ -94,6 +51,7 @@ const TabPanel: FC = ({ currentFlow={currentFlow} policyList={policyList} fetchPolicies={fetchPolicies} + DraggablePolicyCard={DraggablePolicyCard} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx new file mode 100644 index 00000000000..fa96ad3bdb9 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx @@ -0,0 +1,48 @@ +import { Box } from '@material-ui/core'; +import React, { FC } from 'react'; +import type { Policy } from './Types'; + +interface TabPanelSharedProps { + children?: React.ReactNode; + currentFlow: string; + index: number; + policyList: Policy[]; + selectedTab: number; + fetchPolicies: () => void; + DraggablePolicyCard: any; +} + +const TabPanelShared: FC = ({ + selectedTab, + index, + currentFlow, + policyList, + fetchPolicies, + DraggablePolicyCard +}) => { + return ( + + ); +} + +export default TabPanelShared; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts new file mode 100644 index 00000000000..2f802adc12b --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts @@ -0,0 +1,94 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export type Policy = { + id: string; + name: string; + version: string; + displayName: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + isAPISpecific: boolean; + supportedGateways: string[]; +}; + +export type AttachedPolicy = { + id: string; + name: string; + displayName: string; + version: string; + applicableFlows: string[]; + uniqueKey: string; + attributes?: any; + isAPISpecific?: boolean; +}; + +export type PolicySpecAttribute = { + name: string; + displayName: string; + version: string; + description: string; + required: boolean; + type: string; + validationRegex: string; + defaultValue: any; + allowedValues: string[]; +}; + +export type PolicySpec = { + id: string; + category: string; + name: string; + displayName: string; + version: string; + description: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + policyAttributes: PolicySpecAttribute[]; + isAPISpecific?: boolean; + md5?: string; +}; + +export type CreatePolicySpec = { + id?: string; + category: string; + name: string; + displayName: string; + version: string; + description: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + policyAttributes: PolicySpecAttribute[]; +}; + +export type ApiPolicy = { + policyName?: string; + policyId?: string; + policyVersion?: string; + parameters: any; + uuid?: string; +}; + +export type ApiLevelPolicy = { + request?: any[]; + response?: any[]; + fault?: any[]; +}; From 1ced09b0439254ac938d631904a2f9e4be15e7d8 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 15:12:33 +0530 Subject: [PATCH 044/102] Common GeneralDetails --- .../Policies/PolicyForm/GeneralDetails.tsx | 344 +---------------- .../Shared/PoliciesUI/GeneralDetails.tsx | 362 ++++++++++++++++++ 2 files changed, 363 insertions(+), 343 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx index 12d2f548299..d70ad694ef6 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx @@ -17,351 +17,9 @@ */ import React, { FC } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import { FormattedMessage } from 'react-intl'; -import FormControl from '@material-ui/core/FormControl'; +import GeneralDetailsShared from 'AppComponents/Shared/PoliciesUI/GeneralDetails'; import { ACTIONS } from './PolicyCreateForm'; -/** Shared UI Component */ -const useStyles = makeStyles((theme: Theme) => ({ - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, - formGroup: { - display: 'flex', - flexDirection: 'row', - }, -})); - -interface GeneralDetailsSharedProps { - displayName: string | null; - version: string | null; - description: string; - applicableFlows: string[]; - supportedApiTypes: string[]; - isViewMode: boolean; - nameError: any; - versionError: any; - handleInputChange: (event: React.ChangeEvent) => void; - applicableFlowsError: any; - handleChange: (event: React.ChangeEvent) => void; - supportedApiTypesError: any; - handleApiTypeChange: (event: React.ChangeEvent) => void; -} - -const GeneralDetailsShared: FC = ({ - displayName, - version, - description, - applicableFlows, - supportedApiTypes, - isViewMode, - nameError, - versionError, - handleInputChange, - applicableFlowsError, - handleChange, - supportedApiTypesError, - handleApiTypeChange -}) => { - const classes = useStyles(); - - return ( - - - - - - - - - - - - - - - } - error={nameError} - helperText={ - nameError ? ( - 'Name is Empty' - ) : ( - - ) - } - margin='dense' - variant='outlined' - value={displayName} - onChange={handleInputChange} - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? { cursor: 'auto' } : {}, - }} - /> - - - - } - error={versionError} - helperText={ - versionError ? ( - 'Version is Empty' - ) : ( - - ) - } - margin='dense' - variant='outlined' - value={ - isViewMode && version ? ( - version.replace('v', '') - ) : ( - version - ) - } - onChange={handleInputChange} - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? { cursor: 'auto' } : {}, - startAdornment: v, - }} - /> - - - - } - helperText={ - - } - fullWidth - margin='dense' - variant='outlined' - value={description} - onChange={handleInputChange} - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? { cursor: 'auto' } : {}, - }} - /> - - - - * - - - - - - } - label='Request' - data-testid='request-flow' - /> - - } - label='Response' - data-testid='response-flow' - /> - - } - label='Fault' - data-testid='fault-flow' - /> - - - {applicableFlowsError - ? 'Please select one or more flows' - : ''} - - - - - - - - * - - - - - - } - label='HTTP' - data-testid='http-type' - /> - - } - label='SOAP' - data-testid='soap-type' - /> - - } - label='SOAPTOREST' - data-testid='soaptorest-flow' - /> - - - {supportedApiTypesError - ? 'Please select one or more API Types' - : ''} - - - - - - - - ); -} -/** Shared UI Component Ends */ - interface GeneralDetailsProps { displayName: string | null; version: string | null; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx new file mode 100644 index 00000000000..1f40818570c --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx @@ -0,0 +1,362 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import InputAdornment from '@material-ui/core/InputAdornment'; +import TextField from '@material-ui/core/TextField'; +import Typography from '@material-ui/core/Typography'; +import { FormattedMessage } from 'react-intl'; +import FormControl from '@material-ui/core/FormControl'; + +const useStyles = makeStyles((theme: Theme) => ({ + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, + formGroup: { + display: 'flex', + flexDirection: 'row', + }, +})); + +interface GeneralDetailsSharedProps { + displayName: string | null; + version: string | null; + description: string; + applicableFlows: string[]; + supportedApiTypes: string[]; + isViewMode: boolean; + nameError: any; + versionError: any; + handleInputChange: (event: React.ChangeEvent) => void; + applicableFlowsError: any; + handleChange: (event: React.ChangeEvent) => void; + supportedApiTypesError: any; + handleApiTypeChange: (event: React.ChangeEvent) => void; +} + +const GeneralDetailsShared: FC = ({ + displayName, + version, + description, + applicableFlows, + supportedApiTypes, + isViewMode, + nameError, + versionError, + handleInputChange, + applicableFlowsError, + handleChange, + supportedApiTypesError, + handleApiTypeChange +}) => { + const classes = useStyles(); + + return ( + + + + + + + + + + + + + + + } + error={nameError} + helperText={ + nameError ? ( + 'Name is Empty' + ) : ( + + ) + } + margin='dense' + variant='outlined' + value={displayName} + onChange={handleInputChange} + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? { cursor: 'auto' } : {}, + }} + /> + + + + } + error={versionError} + helperText={ + versionError ? ( + 'Version is Empty' + ) : ( + + ) + } + margin='dense' + variant='outlined' + value={ + isViewMode && version ? ( + version.replace('v', '') + ) : ( + version + ) + } + onChange={handleInputChange} + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? { cursor: 'auto' } : {}, + startAdornment: v, + }} + /> + + + + } + helperText={ + + } + fullWidth + margin='dense' + variant='outlined' + value={description} + onChange={handleInputChange} + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? { cursor: 'auto' } : {}, + }} + /> + + + + * + + + + + + } + label='Request' + data-testid='request-flow' + /> + + } + label='Response' + data-testid='response-flow' + /> + + } + label='Fault' + data-testid='fault-flow' + /> + + + {applicableFlowsError + ? 'Please select one or more flows' + : ''} + + + + + + + + * + + + + + + } + label='HTTP' + data-testid='http-type' + /> + + } + label='SOAP' + data-testid='soap-type' + /> + + } + label='SOAPTOREST' + data-testid='soaptorest-flow' + /> + + + {supportedApiTypesError + ? 'Please select one or more API Types' + : ''} + + + + + + + + ); +} + +export default GeneralDetailsShared; From 1c509cd46bbdbb77f3e58becd5921f6944489817 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 15:22:09 +0530 Subject: [PATCH 045/102] common Policy Attributes --- .../Policies/PolicyForm/PolicyAttributes.tsx | 608 +---------------- .../Shared/PoliciesUI/PolicyAttributes.tsx | 628 ++++++++++++++++++ .../components/Shared/PoliciesUI/Types.d.ts | 23 + 3 files changed, 654 insertions(+), 605 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx index 3e27a893210..c3b3d208e18 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx @@ -17,614 +17,11 @@ */ import React, { FC, useState, } from 'react'; -import { Button, makeStyles, Theme } from '@material-ui/core'; -import Typography from '@material-ui/core/Typography'; -import Box from '@material-ui/core/Box'; -import TextField from '@material-ui/core/TextField'; -import Grid from '@material-ui/core/Grid'; -import Popover from '@material-ui/core/Popover'; -import Select from '@material-ui/core/Select'; -import FormControl from '@material-ui/core/FormControl'; -import InputLabel from '@material-ui/core/InputLabel'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import PriorityHighOutlined from '@material-ui/icons/PriorityHighOutlined'; -import { FormattedMessage, useIntl } from 'react-intl'; -import Tooltip from '@material-ui/core/Tooltip'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -import SubjectOutlinedIcon from '@material-ui/icons/SubjectOutlined'; -import FormatListBulletedOutlinedIcon from '@material-ui/icons/FormatListBulletedOutlined'; -import DeleteIcon from '@material-ui/icons/Delete'; -import { AddCircle } from '@material-ui/icons'; +import { useIntl } from 'react-intl'; +import PolicyAttributesShared from 'AppComponents/Shared/PoliciesUI/PolicyAttributes'; import { PolicyAttribute } from './Types'; import { ACTIONS } from './PolicyCreateForm'; -/** Shared UI Component */ -const useStyles = makeStyles((theme: Theme) => ({ - attributeProperty: { - marginLeft: theme.spacing(0.5), - marginRight: theme.spacing(0.5), - }, - formControlSelect: { - marginTop: theme.spacing(2), - }, - selectRoot: { - padding: '11.5px 14px', - width: 100, - }, - buttonIcon: { - marginRight: theme.spacing(1), - }, - requiredToggleButton: { - height: '37.28px', - width: '37.28px', - '&.Mui-selected, &.Mui-selected:hover': { - color: 'white', - backgroundColor: theme.palette.primary.main, - } - }, - toggleButton: { - height: '37.28px', - width: '37.28px', - }, -})); - -interface PolicyAttributesSharedProps { - policyAttributes: PolicyAttribute[]; - dispatch?: React.Dispatch, - isViewMode: boolean; - addNewPolicyAttribute: () => void; - getAttributeFormError: (attribute: PolicyAttribute, fieldName: string) => string; - handleAttributeChange: (event: any, id: string) => void; - handleToggle: (currentState: boolean, id: string) => void; - handleDescriptionToggle: (event: React.FormEvent, id: string) => void; - openedDescriptionPopoverId: string | null; - descriptionAnchorEl: HTMLButtonElement | null; - handleDescriptionClose: () => void; - handleValuePropertiesToggle: (event: React.FormEvent, id: string) => void; - openedValuesPopoverId: string | null; - valuePropertiesAnchorEl: HTMLButtonElement | null; - handleValuePropertiesClose: () => void; - handleAllowedValues: (event: React.ChangeEvent, id: string) => void; -} - -const PolicyAttributesShared: FC = ({ - policyAttributes, - dispatch, - isViewMode, - addNewPolicyAttribute, - getAttributeFormError, - handleAttributeChange, - handleToggle, - handleDescriptionToggle, - openedDescriptionPopoverId, - descriptionAnchorEl, - handleDescriptionClose, - handleValuePropertiesToggle, - openedValuesPopoverId, - valuePropertiesAnchorEl, - handleValuePropertiesClose, - handleAllowedValues -}) => { - const classes = useStyles(); - - return ( - <> - - - - - - - - - - - {!isViewMode && ( - - - - - - - - )} - {isViewMode && policyAttributes.length === 0 && ( - - - - - - - - - - )} - - - - - {policyAttributes.map((attribute: PolicyAttribute) => ( - - - - - - } - error={getAttributeFormError(attribute, 'name') !== ''} - margin='dense' - value={attribute.name} - data-testid='add-policy-attribute-name-btn' - helperText={ - getAttributeFormError( - attribute, - 'name', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - } - error={getAttributeFormError(attribute, 'displayName') !== ''} - margin='dense' - value={attribute.displayName} - data-testid='add-policy-attribute-display-name-btn' - helperText={ - getAttributeFormError( - attribute, - 'displayName', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - {/* Attribute required or not */} - - } - arrow - > - handleToggle(attribute.required, attribute.id)} - style={ isViewMode ? {cursor: 'auto'} : {}} - > - - - - - {/* Attribute description */} - - } - arrow - > - handleDescriptionToggle(e, attribute.id)} - > - - - - - - - } - error={getAttributeFormError(attribute, 'description') !== ''} - margin='dense' - value={attribute.description} - helperText={ - getAttributeFormError( - attribute, - 'description', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - {/* Attribute values */} - - } - arrow - > - handleValuePropertiesToggle(e, attribute.id)} - > - - - - - - - - - - - - - {/* Type */} - - Type - - Attribute Type - - - {/* Allowed Values */} - {attribute.type.toLowerCase() === 'enum' && ( - - - } - margin='dense' - variant='outlined' - value={attribute.allowedValues} - helperText={ - - } - onChange={ - (e) => handleAllowedValues(e, attribute.id) - } - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - )} - - {/* Validation Regex */} - - - } - error={ - getAttributeFormError( - attribute, - 'validationRegex', - ) !== '' - } - margin='dense' - value={attribute.validationRegex} - helperText={ - getAttributeFormError( - attribute, - 'validationRegex', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - {/* Default Value */} - - - } - error={ - getAttributeFormError( - attribute, - 'defaultValue' - ) !== '' - } - margin='dense' - value={attribute.defaultValue} - helperText={ - getAttributeFormError( - attribute, - 'defaultValue', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - - - {/* Attribute delete */} - - } - arrow - > - - dispatch && dispatch({ - type: ACTIONS.DELETE_POLICY_ATTRIBUTE, - id: attribute.id, - }) - } - style={ isViewMode ? {cursor: 'auto'} : {}} - > - - - - - - - - - ))} - - - - ); -} -/** Shared UI Component Ends */ - interface PolicyAttributesProps { policyAttributes: PolicyAttribute[]; dispatch?: React.Dispatch; @@ -795,6 +192,7 @@ const PolicyAttributes: FC = ({ valuePropertiesAnchorEl={valuePropertiesAnchorEl} handleValuePropertiesClose={handleValuePropertiesClose} handleAllowedValues={handleAllowedValues} + ACTIONS={ACTIONS} /> ); } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx new file mode 100644 index 00000000000..4d88c2dc055 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx @@ -0,0 +1,628 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { Button, makeStyles, Theme } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import TextField from '@material-ui/core/TextField'; +import Grid from '@material-ui/core/Grid'; +import Popover from '@material-ui/core/Popover'; +import Select from '@material-ui/core/Select'; +import FormControl from '@material-ui/core/FormControl'; +import InputLabel from '@material-ui/core/InputLabel'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import PriorityHighOutlined from '@material-ui/icons/PriorityHighOutlined'; +import { FormattedMessage } from 'react-intl'; +import Tooltip from '@material-ui/core/Tooltip'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import SubjectOutlinedIcon from '@material-ui/icons/SubjectOutlined'; +import FormatListBulletedOutlinedIcon from '@material-ui/icons/FormatListBulletedOutlined'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { AddCircle } from '@material-ui/icons'; +import { PolicyAttribute } from './Types'; + +/** Shared UI Component */ +const useStyles = makeStyles((theme: Theme) => ({ + attributeProperty: { + marginLeft: theme.spacing(0.5), + marginRight: theme.spacing(0.5), + }, + formControlSelect: { + marginTop: theme.spacing(2), + }, + selectRoot: { + padding: '11.5px 14px', + width: 100, + }, + buttonIcon: { + marginRight: theme.spacing(1), + }, + requiredToggleButton: { + height: '37.28px', + width: '37.28px', + '&.Mui-selected, &.Mui-selected:hover': { + color: 'white', + backgroundColor: theme.palette.primary.main, + } + }, + toggleButton: { + height: '37.28px', + width: '37.28px', + }, +})); + +interface PolicyAttributesSharedProps { + policyAttributes: PolicyAttribute[]; + dispatch?: React.Dispatch, + isViewMode: boolean; + addNewPolicyAttribute: () => void; + getAttributeFormError: (attribute: PolicyAttribute, fieldName: string) => string; + handleAttributeChange: (event: any, id: string) => void; + handleToggle: (currentState: boolean, id: string) => void; + handleDescriptionToggle: (event: React.FormEvent, id: string) => void; + openedDescriptionPopoverId: string | null; + descriptionAnchorEl: HTMLButtonElement | null; + handleDescriptionClose: () => void; + handleValuePropertiesToggle: (event: React.FormEvent, id: string) => void; + openedValuesPopoverId: string | null; + valuePropertiesAnchorEl: HTMLButtonElement | null; + handleValuePropertiesClose: () => void; + handleAllowedValues: (event: React.ChangeEvent, id: string) => void; + ACTIONS: any; +} + +const PolicyAttributesShared: FC = ({ + policyAttributes, + dispatch, + isViewMode, + addNewPolicyAttribute, + getAttributeFormError, + handleAttributeChange, + handleToggle, + handleDescriptionToggle, + openedDescriptionPopoverId, + descriptionAnchorEl, + handleDescriptionClose, + handleValuePropertiesToggle, + openedValuesPopoverId, + valuePropertiesAnchorEl, + handleValuePropertiesClose, + handleAllowedValues, + ACTIONS, +}) => { + const classes = useStyles(); + + return ( + <> + + + + + + + + + + + {!isViewMode && ( + + + + + + + + )} + {isViewMode && policyAttributes.length === 0 && ( + + + + + + + + + + )} + + + + + {policyAttributes.map((attribute: PolicyAttribute) => ( + + + + + + } + error={getAttributeFormError(attribute, 'name') !== ''} + margin='dense' + value={attribute.name} + data-testid='add-policy-attribute-name-btn' + helperText={ + getAttributeFormError( + attribute, + 'name', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + } + error={getAttributeFormError(attribute, 'displayName') !== ''} + margin='dense' + value={attribute.displayName} + data-testid='add-policy-attribute-display-name-btn' + helperText={ + getAttributeFormError( + attribute, + 'displayName', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + {/* Attribute required or not */} + + } + arrow + > + handleToggle(attribute.required, attribute.id)} + style={ isViewMode ? {cursor: 'auto'} : {}} + > + + + + + {/* Attribute description */} + + } + arrow + > + handleDescriptionToggle(e, attribute.id)} + > + + + + + + + } + error={getAttributeFormError(attribute, 'description') !== ''} + margin='dense' + value={attribute.description} + helperText={ + getAttributeFormError( + attribute, + 'description', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + {/* Attribute values */} + + } + arrow + > + handleValuePropertiesToggle(e, attribute.id)} + > + + + + + + + + + + + + + {/* Type */} + + Type + + Attribute Type + + + {/* Allowed Values */} + {attribute.type.toLowerCase() === 'enum' && ( + + + } + margin='dense' + variant='outlined' + value={attribute.allowedValues} + helperText={ + + } + onChange={ + (e) => handleAllowedValues(e, attribute.id) + } + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + )} + + {/* Validation Regex */} + + + } + error={ + getAttributeFormError( + attribute, + 'validationRegex', + ) !== '' + } + margin='dense' + value={attribute.validationRegex} + helperText={ + getAttributeFormError( + attribute, + 'validationRegex', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + {/* Default Value */} + + + } + error={ + getAttributeFormError( + attribute, + 'defaultValue' + ) !== '' + } + margin='dense' + value={attribute.defaultValue} + helperText={ + getAttributeFormError( + attribute, + 'defaultValue', + ) || ( + + ) + } + onChange={(e) => handleAttributeChange(e, attribute.id)} + variant='outlined' + inputProps={{ + readOnly: isViewMode, + style: isViewMode ? {cursor: 'auto'} : {}, + }} + /> + + + + + + {/* Attribute delete */} + + } + arrow + > + + dispatch && dispatch({ + type: ACTIONS.DELETE_POLICY_ATTRIBUTE, + id: attribute.id, + }) + } + style={ isViewMode ? {cursor: 'auto'} : {}} + > + + + + + + + + + ))} + + + + ); +} + +export default PolicyAttributesShared; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts index 2f802adc12b..5ab42c687fb 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts @@ -92,3 +92,26 @@ export type ApiLevelPolicy = { response?: any[]; fault?: any[]; }; + +export type PolicyAttribute = { + id: string; + name: string; + displayName: string; + version: string; + description: string; + required: boolean; + type: string; + validationRegex: string; + defaultValue: any; + allowedValues: string[]; +}; + +export type NewPolicyState = { + displayName: string | null; + version: string | null; + description: string; + applicableFlows: string[]; + supportedGateways: string[]; + supportedApiTypes: string[]; + policyAttributes: any; +}; From b0dcdc49ce277e55b034a8a5560bc99b1843b223 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 15:43:53 +0530 Subject: [PATCH 046/102] Common PolicyCreateForm --- .../Policies/PolicyForm/PolicyCreateForm.tsx | 119 +-------------- .../Shared/PoliciesUI/PolicyCreateForm.tsx | 140 ++++++++++++++++++ 2 files changed, 145 insertions(+), 114 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx index 99e10f90f6e..aa9fd2e0e86 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx @@ -17,14 +17,8 @@ */ import React, { FC, useEffect, useReducer, useState } from 'react'; -import { CircularProgress, makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import Divider from '@material-ui/core/Divider'; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; -import { FormattedMessage } from 'react-intl'; -import { isRestricted } from 'AppData/AuthManager'; import CONSTS from 'AppData/Constants'; +import PolicyCreateFormShared from 'AppComponents/Shared/PoliciesUI/PolicyCreateForm'; import type { CreatePolicySpec } from '../Types'; import type { NewPolicyState, PolicyAttribute } from './Types'; import PolicyAttributes from './PolicyAttributes'; @@ -32,113 +26,6 @@ import uuidv4 from '../Utils'; import GeneralDetails from './GeneralDetails'; import SourceDetails from './SourceDetails'; -/** Shared UI Component */ -const useStyles = makeStyles((theme: Theme) => ({ - root: { - flexGrow: 1, - marginTop: 10, - display: 'flex', - flexDirection: 'column', - padding: 20, - }, - cancelBtn: { - marginLeft: theme.spacing(1), - }, -})); - -interface PolicyCreateFormSharedProps { - synapsePolicyDefinitionFile: any[]; - setSynapsePolicyDefinitionFile: React.Dispatch>; - ccPolicyDefinitionFile: any[]; - setCcPolicyDefinitionFile: React.Dispatch>; - onCancel: () => void; - saving: boolean; - state: any; - dispatch: any; - onPolicySave: () => void; - isFormDisabled: boolean; -} - -const PolicyCreateFormShared: FC = ({ - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - onCancel, - saving, - state, - dispatch, - onPolicySave, - isFormDisabled -}) => { - const classes = useStyles(); - - return ( - - {/* General details of policy */} - - - {/* Gateway specific details of policy */} - - - {/* Attributes of policy */} - - - - - - - ); -} -/** Shared UI Component Ends */ - export const ACTIONS = { UPDATE_POLICY_METADATA: 'updatePolicyMetadata', UPDATE_APPLICALBLE_FLOWS: 'updateApplicableFlows', @@ -382,6 +269,10 @@ const PolicyCreateForm: FC = ({ dispatch={dispatch} onPolicySave={onPolicySave} isFormDisabled={isFormDisabled} + PolicyAttributes={PolicyAttributes} + GeneralDetails={GeneralDetails} + SourceDetails={SourceDetails} + isRestricted={false} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx new file mode 100644 index 00000000000..bc8d72b6f54 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx @@ -0,0 +1,140 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { CircularProgress, makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Divider from '@material-ui/core/Divider'; +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import { FormattedMessage } from 'react-intl'; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + flexGrow: 1, + marginTop: 10, + display: 'flex', + flexDirection: 'column', + padding: 20, + }, + cancelBtn: { + marginLeft: theme.spacing(1), + }, +})); + +interface PolicyCreateFormSharedProps { + synapsePolicyDefinitionFile: any[]; + setSynapsePolicyDefinitionFile: React.Dispatch>; + ccPolicyDefinitionFile: any[]; + setCcPolicyDefinitionFile: React.Dispatch>; + onCancel: () => void; + saving: boolean; + state: any; + dispatch: any; + onPolicySave: () => void; + isFormDisabled: boolean; + PolicyAttributes: any; + GeneralDetails: any; + SourceDetails: any; + isRestricted: any; +} + +const PolicyCreateFormShared: FC = ({ + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + onCancel, + saving, + state, + dispatch, + onPolicySave, + isFormDisabled, + PolicyAttributes, + GeneralDetails, + SourceDetails, + isRestricted +}) => { + const classes = useStyles(); + + return ( + + {/* General details of policy */} + + + {/* Gateway specific details of policy */} + + + {/* Attributes of policy */} + + + + + + + ); +} + +export default PolicyCreateFormShared; \ No newline at end of file From 28c900a8826cb147c32d8534561b982311bafbd3 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 7 Nov 2023 16:12:00 +0530 Subject: [PATCH 047/102] Common PolicyViewForm --- .../Policies/PolicyForm/PolicyViewForm.tsx | 72 +------------- .../Shared/PoliciesUI/PolicyViewForm.tsx | 95 +++++++++++++++++++ 2 files changed, 99 insertions(+), 68 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx index ea4debecaaa..9e62180ad61 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx @@ -17,80 +17,13 @@ */ import React, { FC } from 'react'; -import { makeStyles } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import Divider from '@material-ui/core/Divider'; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; -import { FormattedMessage } from 'react-intl'; +import PolicyViewFormShared from 'AppComponents/Shared/PoliciesUI/PolicyViewForm'; import type { PolicySpec, PolicySpecAttribute } from '../Types'; import PolicyAttributes from './PolicyAttributes'; import GeneralDetails from './GeneralDetails'; import SourceDetails from './SourceDetails'; import uuidv4 from '../Utils'; -/** Shared UI Component */ -const useStyles = makeStyles(() => ({ - root: { - flexGrow: 1, - marginTop: 10, - display: 'flex', - flexDirection: 'column', - padding: 20, - }, -})); - -interface PolicyViewFormSharedProps { - policySpec: PolicySpec; - onDone: () => void; - getPolicyAttributes: () => any; -} - -const PolicyViewFormShared: FC = ({ - policySpec, - onDone, - getPolicyAttributes, -}) => { - const classes = useStyles(); - - return ( - - {/* General details of policy */} - - - {/* Gateway specific details of policy */} - - - {/* Attributes of policy */} - - - - - - ); -}; -/** Shared UI Component Ends */ - interface PolicyViewFormProps { policySpec: PolicySpec; onDone: () => void; @@ -116,6 +49,9 @@ const PolicyViewForm: FC = ({ policySpec, onDone }) => { policySpec={policySpec} onDone={onDone} getPolicyAttributes={getPolicyAttributes} + PolicyAttributes={PolicyAttributes} + GeneralDetails={GeneralDetails} + SourceDetails={SourceDetails} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx new file mode 100644 index 00000000000..472e714ff92 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx @@ -0,0 +1,95 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { makeStyles } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Divider from '@material-ui/core/Divider'; +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import { FormattedMessage } from 'react-intl'; +import type { PolicySpec } from './Types'; + +/** Shared UI Component */ +const useStyles = makeStyles(() => ({ + root: { + flexGrow: 1, + marginTop: 10, + display: 'flex', + flexDirection: 'column', + padding: 20, + }, +})); + +interface PolicyViewFormSharedProps { + policySpec: PolicySpec; + onDone: () => void; + getPolicyAttributes: () => any; + PolicyAttributes: any; + GeneralDetails: any; + SourceDetails: any; +} + +const PolicyViewFormShared: FC = ({ + policySpec, + onDone, + getPolicyAttributes, + PolicyAttributes, + GeneralDetails, + SourceDetails +}) => { + const classes = useStyles(); + + return ( + + {/* General details of policy */} + + + {/* Gateway specific details of policy */} + + + {/* Attributes of policy */} + + + + + + ); +}; + +export default PolicyViewFormShared; \ No newline at end of file From 466d9d03be159e788ab34481e4b6ec747474f792 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 09:27:00 +0530 Subject: [PATCH 048/102] Common SourceDetails --- .../Policies/PolicyForm/SourceDetails.tsx | 249 +--------------- .../PolicyForm/UploadPolicyDropzone.tsx | 2 +- .../Shared/PoliciesUI/PolicyViewForm.tsx | 2 +- .../Shared/PoliciesUI/SourceDetails.tsx | 270 ++++++++++++++++++ 4 files changed, 274 insertions(+), 249 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx index fbf27f8e390..d0b74cbd048 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx @@ -17,262 +17,16 @@ */ import React, { FC, useContext } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import Typography from '@material-ui/core/Typography'; import { FormattedMessage } from 'react-intl'; -import FormControl from '@material-ui/core/FormControl'; -import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; -import Button from '@material-ui/core/Button'; import Utils from 'AppData/Utils'; import API from 'AppData/api.js'; import { Alert } from 'AppComponents/Shared'; import CONSTS from 'AppData/Constants'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import SourceDetailsShared from 'AppComponents/Shared/PoliciesUI/SourceDetails'; import { ACTIONS } from './PolicyCreateForm'; import UploadPolicyDropzone from './UploadPolicyDropzone'; -/** Shared UI Component */ -const useStyles = makeStyles((theme: Theme) => ({ - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, - formGroup: { - display: 'flex', - flexDirection: 'row', - }, -})); - -export const GATEWAY_TYPE_LABELS = { - SYNAPSE: 'Regular Gateway', - CC: 'Choreo Connect' -} - -interface SourceDetailsSharedProps { - supportedGateways: string[]; - synapsePolicyDefinitionFile?: any[]; - setSynapsePolicyDefinitionFile?: React.Dispatch>; - ccPolicyDefinitionFile?: any[]; - setCcPolicyDefinitionFile?: React.Dispatch>; - isViewMode?: boolean; - handlePolicyDownload?: () => void; - supportedGatewaysError: any; - handleChange?: (event: React.ChangeEvent) => void; -} - -/** - * Renders the general details section. - * @param {JSON} props Input props from parent components. - * @returns {TSX} General details of the policy. - */ -const SourceDetailsShared: FC = ({ - supportedGateways, - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - isViewMode, - handlePolicyDownload, - supportedGatewaysError, - handleChange, -}) => { - const classes = useStyles(); - - /** - * Renders the policy file upload related section - * @param {any[]} policyFile Policy file - * @param {React.Dispatch>} setPolicyFile Policy file setter - * @param {string} gateway Gateway type - * @returns {TSX} Policy upload section - */ - const renderPolicyFileUpload = ( - policyFile: any[], - setPolicyFile: React.Dispatch>, - gateway: string, - ) => { - return ( - - ); - }; - - /** - * - * @returns {TSX} Policy download section - */ - const renderPolicyDownload = () => { - return ( - <> - - - - * - - - - - - - - - - ); - } - - return ( - - - - - - - - - - - - - - - - * - - - - - - } - label={GATEWAY_TYPE_LABELS.SYNAPSE} - data-testid='regular-gateway-label' - /> - - } - label={GATEWAY_TYPE_LABELS.CC} - data-testid='choreo-connect-label' - /> - - - {supportedGatewaysError - ? 'Please select one or more Gateways' - : ''} - - - - - - {/* Render dropzones for policy file uploads */} - {supportedGateways.includes(CONSTS.GATEWAY_TYPE.synapse) && - !isViewMode && - synapsePolicyDefinitionFile && - setSynapsePolicyDefinitionFile && - renderPolicyFileUpload( - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - GATEWAY_TYPE_LABELS.SYNAPSE, - - )} - {supportedGateways.includes(CONSTS.GATEWAY_TYPE.choreoConnect) && - !isViewMode && - ccPolicyDefinitionFile && - setCcPolicyDefinitionFile && - renderPolicyFileUpload( - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - GATEWAY_TYPE_LABELS.CC, - )} - - {/* Render policy file download option in view mode */} - {isViewMode && renderPolicyDownload()} - - - ); -}; -/** Shared UI Component Ends */ - interface SourceDetailsProps { supportedGateways: string[]; synapsePolicyDefinitionFile?: any[]; @@ -378,6 +132,7 @@ const SourceDetails: FC = ({ handlePolicyDownload={handlePolicyDownload} supportedGatewaysError={supportedGatewaysError} handleChange={handleChange} + UploadPolicyDropzone={UploadPolicyDropzone} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx index 7df2f78dfb8..3371484f139 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx @@ -35,7 +35,7 @@ import green from '@material-ui/core/colors/green'; import red from '@material-ui/core/colors/red'; import Icon from '@material-ui/core/Icon'; import { HelpOutline } from '@material-ui/icons'; -import { GATEWAY_TYPE_LABELS } from './SourceDetails'; +import { GATEWAY_TYPE_LABELS } from 'AppComponents/Shared/PoliciesUI/SourceDetails'; /** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx index 472e714ff92..f178fe3c165 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx @@ -92,4 +92,4 @@ const PolicyViewFormShared: FC = ({ ); }; -export default PolicyViewFormShared; \ No newline at end of file +export default PolicyViewFormShared; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx new file mode 100644 index 00000000000..d162a2a1b85 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx @@ -0,0 +1,270 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import Typography from '@material-ui/core/Typography'; +import { FormattedMessage } from 'react-intl'; +import FormControl from '@material-ui/core/FormControl'; +import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; +import Button from '@material-ui/core/Button'; +import CONSTS from 'AppData/Constants'; + +const useStyles = makeStyles((theme: Theme) => ({ + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, + formGroup: { + display: 'flex', + flexDirection: 'row', + }, +})); + +export const GATEWAY_TYPE_LABELS = { + SYNAPSE: 'Regular Gateway', + CC: 'Choreo Connect' +} + +interface SourceDetailsSharedProps { + supportedGateways: string[]; + synapsePolicyDefinitionFile?: any[]; + setSynapsePolicyDefinitionFile?: React.Dispatch>; + ccPolicyDefinitionFile?: any[]; + setCcPolicyDefinitionFile?: React.Dispatch>; + isViewMode?: boolean; + handlePolicyDownload?: () => void; + supportedGatewaysError: any; + handleChange?: (event: React.ChangeEvent) => void; + UploadPolicyDropzone: any; +} + +/** + * Renders the general details section. + * @param {JSON} props Input props from parent components. + * @returns {TSX} General details of the policy. + */ +const SourceDetailsShared: FC = ({ + supportedGateways, + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + isViewMode, + handlePolicyDownload, + supportedGatewaysError, + handleChange, + UploadPolicyDropzone +}) => { + const classes = useStyles(); + + /** + * Renders the policy file upload related section + * @param {any[]} policyFile Policy file + * @param {React.Dispatch>} setPolicyFile Policy file setter + * @param {string} gateway Gateway type + * @returns {TSX} Policy upload section + */ + const renderPolicyFileUpload = ( + policyFile: any[], + setPolicyFile: React.Dispatch>, + gateway: string, + ) => { + return ( + + ); + }; + + /** + * + * @returns {TSX} Policy download section + */ + const renderPolicyDownload = () => { + return ( + <> + + + + * + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + * + + + + + + } + label={GATEWAY_TYPE_LABELS.SYNAPSE} + data-testid='regular-gateway-label' + /> + + } + label={GATEWAY_TYPE_LABELS.CC} + data-testid='choreo-connect-label' + /> + + + {supportedGatewaysError + ? 'Please select one or more Gateways' + : ''} + + + + + + {/* Render dropzones for policy file uploads */} + {supportedGateways.includes(CONSTS.GATEWAY_TYPE.synapse) && + !isViewMode && + synapsePolicyDefinitionFile && + setSynapsePolicyDefinitionFile && + renderPolicyFileUpload( + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + GATEWAY_TYPE_LABELS.SYNAPSE, + + )} + {supportedGateways.includes(CONSTS.GATEWAY_TYPE.choreoConnect) && + !isViewMode && + ccPolicyDefinitionFile && + setCcPolicyDefinitionFile && + renderPolicyFileUpload( + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + GATEWAY_TYPE_LABELS.CC, + )} + + {/* Render policy file download option in view mode */} + {isViewMode && renderPolicyDownload()} + + + ); +}; + +export default SourceDetailsShared; From 8cd2e706be9a9dd3b19ccbba0c4740acae649d8c Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 09:38:27 +0530 Subject: [PATCH 049/102] Common UploadPolicyDropzone --- .../PolicyForm/UploadPolicyDropzone.tsx | 187 +----------------- .../PoliciesUI/UploadPolicyDropzone.tsx | 187 ++++++++++++++++++ 2 files changed, 188 insertions(+), 186 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx index 3371484f139..61c13a7c5a9 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx @@ -17,192 +17,7 @@ */ import React, { FC } from 'react'; -import { List, makeStyles, IconButton, Theme } from '@material-ui/core'; -import Typography from '@material-ui/core/Typography'; -import Box from '@material-ui/core/Box'; -import { FormattedMessage } from 'react-intl'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemAvatar from '@material-ui/core/ListItemAvatar'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Tooltip from '@material-ui/core/Tooltip'; -import Avatar from '@material-ui/core/Avatar'; -import InsertDriveFile from '@material-ui/icons/InsertDriveFile'; -import DeleteIcon from '@material-ui/icons/Delete'; -import Dropzone from 'react-dropzone'; -import clsx from 'clsx'; -import green from '@material-ui/core/colors/green'; -import red from '@material-ui/core/colors/red'; -import Icon from '@material-ui/core/Icon'; -import { HelpOutline } from '@material-ui/icons'; -import { GATEWAY_TYPE_LABELS } from 'AppComponents/Shared/PoliciesUI/SourceDetails'; - -/** Shared UI Component */ -const useStyles = makeStyles((theme: Theme) => ({ - dropZoneWrapper: { - border: '1px dashed ' + theme.palette.primary.main, - borderRadius: '5px', - cursor: 'pointer', - padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`, - position: 'relative', - textAlign: 'center', - width: '75%', - height: '4em', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'column', - '& span': { - fontSize: 64, - color: theme.palette.primary.main, - }, - }, - acceptDrop: { - backgroundColor: green[50], - borderColor: 'green', - }, - rejectDrop: { - backgroundColor: red[50], - borderColor: 'red', - }, - uploadedFileDetails: { - width: '75%', - }, - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, -})); - -interface UploadPolicyDropzoneSharedProps { - policyDefinitionFile: any[]; - setPolicyDefinitionFile: React.Dispatch>; - gateway: string; - handleDrop: (policyDefinition: any) => void; -} - -/** - * Handles the policy file upload. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy file upload managing UI. - */ -const UploadPolicyDropzoneShared: FC = ({ - policyDefinitionFile, - setPolicyDefinitionFile, - gateway, - handleDrop, -}) => { - const classes = useStyles(); - - const renderPolicyFileDropzone = () => { - return ( - - {({ - getRootProps, - getInputProps, - isDragAccept, - isDragReject, - }) => { - return ( - // eslint-disable-next-line react/jsx-props-no-spreading -
-
- {/* eslint-disable-next-line react/jsx-props-no-spreading */} - - cloud_upload - - - -
-
- ); - }} - - ); - }; - - return ( - <> - - - - - * - - - - - - - - - - - - - {policyDefinitionFile.length === 0 ? ( - renderPolicyFileDropzone() - ) : ( - - - - - - - - - - setPolicyDefinitionFile([])} - > - - - - - - )} - - - ); -}; -/** Shared UI Component ends */ +import UploadPolicyDropzoneShared from 'AppComponents/Shared/PoliciesUI/UploadPolicyDropzone'; interface UploadPolicyDropzoneProps { policyDefinitionFile: any[]; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx new file mode 100644 index 00000000000..2df3eb2149b --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx @@ -0,0 +1,187 @@ +import React, { FC } from 'react'; +import { List, makeStyles, IconButton, Theme } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import { FormattedMessage } from 'react-intl'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import Tooltip from '@material-ui/core/Tooltip'; +import Avatar from '@material-ui/core/Avatar'; +import InsertDriveFile from '@material-ui/icons/InsertDriveFile'; +import DeleteIcon from '@material-ui/icons/Delete'; +import Dropzone from 'react-dropzone'; +import clsx from 'clsx'; +import green from '@material-ui/core/colors/green'; +import red from '@material-ui/core/colors/red'; +import Icon from '@material-ui/core/Icon'; +import { HelpOutline } from '@material-ui/icons'; +import { GATEWAY_TYPE_LABELS } from 'AppComponents/Shared/PoliciesUI/SourceDetails'; + +const useStyles = makeStyles((theme: Theme) => ({ + dropZoneWrapper: { + border: '1px dashed ' + theme.palette.primary.main, + borderRadius: '5px', + cursor: 'pointer', + padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`, + position: 'relative', + textAlign: 'center', + width: '75%', + height: '4em', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + '& span': { + fontSize: 64, + color: theme.palette.primary.main, + }, + }, + acceptDrop: { + backgroundColor: green[50], + borderColor: 'green', + }, + rejectDrop: { + backgroundColor: red[50], + borderColor: 'red', + }, + uploadedFileDetails: { + width: '75%', + }, + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, +})); + +interface UploadPolicyDropzoneSharedProps { + policyDefinitionFile: any[]; + setPolicyDefinitionFile: React.Dispatch>; + gateway: string; + handleDrop: (policyDefinition: any) => void; +} + +/** + * Handles the policy file upload. + * @param {JSON} props Input props from parent components. + * @returns {TSX} Policy file upload managing UI. + */ +const UploadPolicyDropzoneShared: FC = ({ + policyDefinitionFile, + setPolicyDefinitionFile, + gateway, + handleDrop, +}) => { + const classes = useStyles(); + + const renderPolicyFileDropzone = () => { + return ( + + {({ + getRootProps, + getInputProps, + isDragAccept, + isDragReject, + }) => { + return ( + // eslint-disable-next-line react/jsx-props-no-spreading +
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} + + cloud_upload + + + +
+
+ ); + }} + + ); + }; + + return ( + <> + + + + + * + + + + + + + + + + + + + {policyDefinitionFile.length === 0 ? ( + renderPolicyFileDropzone() + ) : ( + + + + + + + + + + setPolicyDefinitionFile([])} + > + + + + + + )} + + + ); +}; + +export default UploadPolicyDropzoneShared; From 7d2bc4d139f545757c921914062b8761360decb3 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 09:51:51 +0530 Subject: [PATCH 050/102] Common AttachedPolicyCard --- .../Policies/AttachedPolicyCard.tsx | 149 +-------------- .../Shared/PoliciesUI/AttachedPolicyCard.tsx | 169 ++++++++++++++++++ 2 files changed, 172 insertions(+), 146 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index 03fabaa3a5b..9b06942d5db 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -16,161 +16,17 @@ * under the License. */ -import React, { CSSProperties, FC, useContext, useState } from 'react'; -import Avatar from '@material-ui/core/Avatar'; -import Box from '@material-ui/core/Box'; -import { useSortable } from '@dnd-kit/sortable'; -import { CSS } from '@dnd-kit/utilities'; +import React, { FC, useContext, useState } from 'react'; import { Alert } from 'AppComponents/Shared'; -import { makeStyles } from '@material-ui/core'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import DeleteIcon from '@material-ui/icons/Delete'; -import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; import API from 'AppData/api.js'; import Utils from 'AppData/Utils'; import { FormattedMessage } from 'react-intl'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import AttachedPolicyCardShared from 'AppComponents/Shared/PoliciesUI/AttachedPolicyCard'; import type { AttachedPolicy, PolicySpec } from './Types'; import PolicyConfigurationEditDrawer from './UIComponents/PolicyConfigurationEditDrawer'; import ApiOperationContext from './ApiOperationContext'; -/** Shared UI Component */ -const useStyles = makeStyles(() => ({ - actionsBox: { - display: 'flex', - flexDirection: 'column', - marginTop: '1em', - }, -})); - -interface AttachedPolicyCardSharedProps { - policyObj: AttachedPolicy; - currentFlow: string; - verb: string; - target: string; - allPolicies: PolicySpec[] | null; - isAPILevelPolicy: boolean; - drawerOpen: any; - handleDrawerOpen: () => void; - handlePolicyDownload: (event: React.MouseEvent) => void; - handleDelete: (event: React.MouseEvent) => void; - setDrawerOpen: React.Dispatch>; -} - -/** - * Renders a single sortable policy card. - * @param {any} AttachedPolicyCardProps Input props from parent components. - * @returns {TSX} Sortable attached policy card UI. - */ -const AttachedPolicyCardShared: FC = ({ - policyObj, - currentFlow, - verb, - target, - allPolicies, - isAPILevelPolicy, - drawerOpen, - handleDrawerOpen, - handlePolicyDownload, - handleDelete, - setDrawerOpen -}) => { - const classes = useStyles(); - const policyColor = Utils.stringToColor(policyObj.displayName); - const policyBackgroundColor = drawerOpen - ? `rgba(${Utils.hexToRGB(policyColor)}, 0.2)` - : 'rgba(0, 0, 0, 0)'; - const { - attributes, - listeners, - setNodeRef, - transform, - transition, - isDragging, - } = useSortable({ id: policyObj.uniqueKey.toString() }); - - const style: CSSProperties = { - transform: CSS.Transform.toString(transform), - transition, - border: '2px solid', - height: '90%', - cursor: 'move', - borderRadius: '0.3em', - padding: '0.2em', - borderColor: policyColor, - marginLeft: '0.2em', - marginRight: '0.2em', - backgroundColor: policyBackgroundColor, - opacity: isDragging ? 0.5 : 1, - }; - return ( - <> -
- - - {Utils.stringAvatar( - policyObj.displayName.toUpperCase(), - )} - - - - - - - - - - -
- {drawerOpen && ( - - )} - - ); -} -/** Shared UI Component ends */ - interface AttachedPolicyCardProps { policyObj: AttachedPolicy; currentPolicyList: AttachedPolicy[]; @@ -291,6 +147,7 @@ const AttachedPolicyCard: FC = ({ handlePolicyDownload={handlePolicyDownload} handleDelete={handleDelete} setDrawerOpen={setDrawerOpen} + PolicyConfigurationEditDrawer={PolicyConfigurationEditDrawer} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx new file mode 100644 index 00000000000..4b646e76665 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx @@ -0,0 +1,169 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { CSSProperties, FC } from 'react'; +import Avatar from '@material-ui/core/Avatar'; +import Box from '@material-ui/core/Box'; +import { useSortable } from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; +import { makeStyles } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; +import DeleteIcon from '@material-ui/icons/Delete'; +import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; +import Utils from 'AppData/Utils'; +import type { AttachedPolicy, PolicySpec } from './Types'; + +/** Shared UI Component */ +const useStyles = makeStyles(() => ({ + actionsBox: { + display: 'flex', + flexDirection: 'column', + marginTop: '1em', + }, +})); + +interface AttachedPolicyCardSharedProps { + policyObj: AttachedPolicy; + currentFlow: string; + verb: string; + target: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; + drawerOpen: any; + handleDrawerOpen: () => void; + handlePolicyDownload: (event: React.MouseEvent) => void; + handleDelete: (event: React.MouseEvent) => void; + setDrawerOpen: React.Dispatch>; + PolicyConfigurationEditDrawer: any; +} + +/** + * Renders a single sortable policy card. + * @param {any} AttachedPolicyCardProps Input props from parent components. + * @returns {TSX} Sortable attached policy card UI. + */ +const AttachedPolicyCardShared: FC = ({ + policyObj, + currentFlow, + verb, + target, + allPolicies, + isAPILevelPolicy, + drawerOpen, + handleDrawerOpen, + handlePolicyDownload, + handleDelete, + setDrawerOpen, + PolicyConfigurationEditDrawer +}) => { + const classes = useStyles(); + const policyColor = Utils.stringToColor(policyObj.displayName); + const policyBackgroundColor = drawerOpen + ? `rgba(${Utils.hexToRGB(policyColor)}, 0.2)` + : 'rgba(0, 0, 0, 0)'; + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ id: policyObj.uniqueKey.toString() }); + + const style: CSSProperties = { + transform: CSS.Transform.toString(transform), + transition, + border: '2px solid', + height: '90%', + cursor: 'move', + borderRadius: '0.3em', + padding: '0.2em', + borderColor: policyColor, + marginLeft: '0.2em', + marginRight: '0.2em', + backgroundColor: policyBackgroundColor, + opacity: isDragging ? 0.5 : 1, + }; + return ( + <> +
+ + + {Utils.stringAvatar( + policyObj.displayName.toUpperCase(), + )} + + + + + + + + + + +
+ {drawerOpen && ( + + )} + + ); +} + +export default AttachedPolicyCardShared; From 595eabd0348673b48a232243b1981c04aaf4da8d Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 09:57:57 +0530 Subject: [PATCH 051/102] Common CreatePolicy --- .../GlobalPolicies/Policies/CreatePolicy.tsx | 121 +-------------- .../Shared/PoliciesUI/CreatePolicy.tsx | 142 ++++++++++++++++++ 2 files changed, 144 insertions(+), 119 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx index 30092393d79..c341bb5aa55 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx @@ -17,131 +17,13 @@ */ import React, { useContext, useState } from 'react'; -import { Typography, makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import { Link } from 'react-router-dom'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Icon from '@material-ui/core/Icon'; -import IconButton from '@material-ui/core/IconButton'; -import LaunchIcon from '@material-ui/icons/Launch'; -import { FormattedMessage } from 'react-intl'; import API from 'AppData/api.js'; import Alert from 'AppComponents/Shared/Alert'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; -import CONSTS from 'AppData/Constants'; +import CreatePolicyShared from 'AppComponents/Shared/PoliciesUI/CreatePolicy'; import type { CreatePolicySpec } from './Types'; import PolicyCreateForm from './PolicyForm/PolicyCreateForm'; -/** Shared UI Component */ -const useStyles = makeStyles((theme: Theme) => ({ - link: { - color: theme.palette.primary.dark, - marginLeft: theme.spacing(2), - display: 'inline', - }, -})); - -interface CreatePolicySharedProps { - handleDialogClose: () => void; - dialogOpen: boolean; - stopPropagation: any; - onSave: (policySpecification: CreatePolicySpec) => void; - synapsePolicyDefinitionFile: any[]; - setSynapsePolicyDefinitionFile: any; - ccPolicyDefinitionFile: any[]; - setCcPolicyDefinitionFile: any; - saving: any; -} - -const CreatePolicyShared: React.FC = ({ - handleDialogClose, - dialogOpen, - stopPropagation, - onSave, - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - saving -}) => { - const classes = useStyles(); - - return ( - <> - - - - - - - - - - close - - - - - - - - - - - - - - Want to create a common policy that will be visible to all APIs instead? - - - - - - - ); -} -/** Shared UI Component Ends */ - interface CreatePolicyProps { handleDialogClose: () => void; dialogOpen: boolean; @@ -221,6 +103,7 @@ const CreatePolicy: React.FC = ({ ccPolicyDefinitionFile={ccPolicyDefinitionFile} setCcPolicyDefinitionFile={setCcPolicyDefinitionFile} saving={saving} + PolicyCreateForm={PolicyCreateForm} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx new file mode 100644 index 00000000000..e21b7d650cc --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx @@ -0,0 +1,142 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { Typography, makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import { Link } from 'react-router-dom'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import Icon from '@material-ui/core/Icon'; +import IconButton from '@material-ui/core/IconButton'; +import LaunchIcon from '@material-ui/icons/Launch'; +import { FormattedMessage } from 'react-intl'; +import CONSTS from 'AppData/Constants'; +import type { CreatePolicySpec } from './Types'; + +/** Shared UI Component */ +const useStyles = makeStyles((theme: Theme) => ({ + link: { + color: theme.palette.primary.dark, + marginLeft: theme.spacing(2), + display: 'inline', + }, +})); + +interface CreatePolicySharedProps { + handleDialogClose: () => void; + dialogOpen: boolean; + stopPropagation: any; + onSave: (policySpecification: CreatePolicySpec) => void; + synapsePolicyDefinitionFile: any[]; + setSynapsePolicyDefinitionFile: any; + ccPolicyDefinitionFile: any[]; + setCcPolicyDefinitionFile: any; + saving: any; + PolicyCreateForm: any; +} + +const CreatePolicyShared: React.FC = ({ + handleDialogClose, + dialogOpen, + stopPropagation, + onSave, + synapsePolicyDefinitionFile, + setSynapsePolicyDefinitionFile, + ccPolicyDefinitionFile, + setCcPolicyDefinitionFile, + saving, + PolicyCreateForm +}) => { + const classes = useStyles(); + + return ( + <> + + + + + + + + + + close + + + + + + + + + + + + + + Want to create a common policy that will be visible to all APIs instead? + + + + + + + ); +} + +export default CreatePolicyShared; From 9d5081685b6641bed8d4f6befe3e1898ab59e549 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 10:02:54 +0530 Subject: [PATCH 052/102] Common DeletePolicy --- .../GlobalPolicies/Policies/DeletePolicy.tsx | 99 +-------------- .../Shared/PoliciesUI/DeletePolicy.tsx | 117 ++++++++++++++++++ 2 files changed, 118 insertions(+), 98 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx index ca1b62f0dc3..16625dacb71 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx @@ -17,107 +17,10 @@ */ import React, { useState, FC, useContext } from 'react'; -import { FormattedMessage } from 'react-intl'; -import DeleteIcon from '@material-ui/icons/Delete'; -import IconButton from '@material-ui/core/IconButton'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Button from '@material-ui/core/Button'; -import DialogContent from '@material-ui/core/DialogContent'; -import Tooltip from '@material-ui/core/Tooltip'; import Alert from 'AppComponents/Shared/Alert'; import API from 'AppData/api'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; - -/** Shared UI Component */ -interface DeletePolicySharedProps { - policyId: string; - policyName: string; - toggleOpen: () => void; - handleClose: () => void; - open: boolean; - handleDelete: () => void; -} - -const DeletePolicyShared: FC = ({ - policyId, - policyName, - toggleOpen, - handleClose, - open, - handleDelete -}) => { - return ( - <> - - } - > - - - - - { - e.preventDefault(); - e.stopPropagation(); - }} - open={open} - onClose={handleClose} - > - - - - - - - - - - - - - - - ); -} -/** Shared UI Component ends */ +import DeletePolicyShared from 'AppComponents/Shared/PoliciesUI/DeletePolicy'; interface DeletePolicyProps { policyId: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx new file mode 100644 index 00000000000..0f30adcd8b6 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx @@ -0,0 +1,117 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { FormattedMessage } from 'react-intl'; +import DeleteIcon from '@material-ui/icons/Delete'; +import IconButton from '@material-ui/core/IconButton'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import Button from '@material-ui/core/Button'; +import DialogContent from '@material-ui/core/DialogContent'; +import Tooltip from '@material-ui/core/Tooltip'; + +interface DeletePolicySharedProps { + policyId: string; + policyName: string; + toggleOpen: () => void; + handleClose: () => void; + open: boolean; + handleDelete: () => void; +} + +const DeletePolicyShared: FC = ({ + policyId, + policyName, + toggleOpen, + handleClose, + open, + handleDelete +}) => { + return ( + <> + + } + > + + + + + { + e.preventDefault(); + e.stopPropagation(); + }} + open={open} + onClose={handleClose} + > + + + + + + + + + + + + + + + ); +} + +export default DeletePolicyShared; From 1f9ae3cb94f91ee6b13b83e7d465d4fcf94e32d2 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 10:11:10 +0530 Subject: [PATCH 053/102] Common DraggablePolicyCard --- .../Policies/DraggablePolicyCard.tsx | 180 +--------------- .../Shared/PoliciesUI/DraggablePolicyCard.tsx | 199 ++++++++++++++++++ 2 files changed, 203 insertions(+), 176 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx index 999f9287251..e711d1d505e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx @@ -16,186 +16,12 @@ * under the License. */ -import React, { CSSProperties, useMemo, useState } from 'react'; -import { makeStyles } from '@material-ui/core'; -import Avatar from '@material-ui/core/Avatar'; -import Box from '@material-ui/core/Box'; -import Tooltip from '@material-ui/core/Tooltip'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListItemAvatar from '@material-ui/core/ListItemAvatar'; -import Utils from 'AppData/Utils'; -import VisibilityIcon from '@material-ui/icons/Visibility'; -import IconButton from '@material-ui/core/IconButton'; -import { FormattedMessage } from 'react-intl'; -import { useDrag } from 'react-dnd'; +import React, { useState } from 'react'; +import DraggablePolicyCardShared from 'AppComponents/Shared/PoliciesUI/DraggablePolicyCard'; import type { Policy } from './Types'; import ViewPolicy from './ViewPolicy'; import DeletePolicy from './DeletePolicy'; -/** Shared UI Component */ -const useStyles = makeStyles(() => ({ - policyCardText: { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - }, - listItem: { - maxHeight: '100%', - overflow: 'auto', - }, - policyActions: { - visibility: 'hidden', - '&:hover': { - visibility: 'inherit', - }, - }, -})); - -const style: CSSProperties = { - border: '2px solid', - marginTop: '0.4rem', - cursor: 'move', - borderRadius: '0.3em', -}; - -interface DraggablePolicyCardSharedProps { - policyObj: Policy; - showCopyIcon?: boolean; - isLocalToAPI: boolean; - fetchPolicies: () => void; - setHovered: any; - hovered: boolean; - handleViewPolicy: () => void; - dialogOpen: boolean; - handleViewPolicyClose: () => void; -} - -const DraggablePolicyCardShared: React.FC = ({ - policyObj, - showCopyIcon, - isLocalToAPI, - fetchPolicies, - setHovered, - hovered, - handleViewPolicy, - dialogOpen, - handleViewPolicyClose -}) => { - const classes = useStyles(); - - const [{ isDragging }, drag] = useDrag( - () => ({ - type: `policyCard-${policyObj.id}`, - item: { droppedPolicy: policyObj }, - options: { - dropEffect: showCopyIcon ? 'copy' : 'move', - }, - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }), - [showCopyIcon], - ); - - const containerStyle = useMemo( - () => ({ - ...style, - opacity: isDragging ? 0.4 : 1, - borderColor: Utils.stringToColor(policyObj.displayName), - width: '100%', - }), - [isDragging], - ); - - return ( - <> - -
- setHovered(true)} - onMouseOut={() => setHovered(false)} - > - - - {Utils.stringAvatar( - policyObj.displayName.toUpperCase(), - )} - - - - - - - - - } - > - - - - - {isLocalToAPI && ( - - )} - - -
- - - - ); -} - -/** Shared UI Component ends */ - interface DraggablePolicyCardProps { policyObj: Policy; showCopyIcon?: boolean; @@ -237,6 +63,8 @@ const DraggablePolicyCard: React.FC = ({ handleViewPolicy={handleViewPolicy} dialogOpen={dialogOpen} handleViewPolicyClose={handleViewPolicyClose} + ViewPolicy={ViewPolicy} + DeletePolicy={DeletePolicy} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx new file mode 100644 index 00000000000..df428132545 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx @@ -0,0 +1,199 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { CSSProperties, useMemo } from 'react'; +import { makeStyles } from '@material-ui/core'; +import Avatar from '@material-ui/core/Avatar'; +import Box from '@material-ui/core/Box'; +import Tooltip from '@material-ui/core/Tooltip'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import Utils from 'AppData/Utils'; +import VisibilityIcon from '@material-ui/icons/Visibility'; +import IconButton from '@material-ui/core/IconButton'; +import { FormattedMessage } from 'react-intl'; +import { useDrag } from 'react-dnd'; +import type { Policy } from './Types'; + +/** Shared UI Component */ +const useStyles = makeStyles(() => ({ + policyCardText: { + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + listItem: { + maxHeight: '100%', + overflow: 'auto', + }, + policyActions: { + visibility: 'hidden', + '&:hover': { + visibility: 'inherit', + }, + }, +})); + +const style: CSSProperties = { + border: '2px solid', + marginTop: '0.4rem', + cursor: 'move', + borderRadius: '0.3em', +}; + +interface DraggablePolicyCardSharedProps { + policyObj: Policy; + showCopyIcon?: boolean; + isLocalToAPI: boolean; + fetchPolicies: () => void; + setHovered: any; + hovered: boolean; + handleViewPolicy: () => void; + dialogOpen: boolean; + handleViewPolicyClose: () => void; + ViewPolicy: any; + DeletePolicy: any; +} + +const DraggablePolicyCardShared: React.FC = ({ + policyObj, + showCopyIcon, + isLocalToAPI, + fetchPolicies, + setHovered, + hovered, + handleViewPolicy, + dialogOpen, + handleViewPolicyClose, + ViewPolicy, + DeletePolicy +}) => { + const classes = useStyles(); + + const [{ isDragging }, drag] = useDrag( + () => ({ + type: `policyCard-${policyObj.id}`, + item: { droppedPolicy: policyObj }, + options: { + dropEffect: showCopyIcon ? 'copy' : 'move', + }, + collect: (monitor) => ({ + isDragging: monitor.isDragging(), + }), + }), + [showCopyIcon], + ); + + const containerStyle = useMemo( + () => ({ + ...style, + opacity: isDragging ? 0.4 : 1, + borderColor: Utils.stringToColor(policyObj.displayName), + width: '100%', + }), + [isDragging], + ); + + return ( + <> + +
+ setHovered(true)} + onMouseOut={() => setHovered(false)} + > + + + {Utils.stringAvatar( + policyObj.displayName.toUpperCase(), + )} + + + + + + + + + } + > + + + + + {isLocalToAPI && ( + + )} + + +
+ + + + ); +} + +export default DraggablePolicyCardShared; From ece1ab04903351abcabd74d1ba1f671ec8c98623 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 10:27:00 +0530 Subject: [PATCH 054/102] Common PolicyDropzone --- .../Policies/PolicyDropzone.tsx | 125 +-------------- .../Shared/PoliciesUI/PolicyDropzone.tsx | 147 ++++++++++++++++++ 2 files changed, 150 insertions(+), 122 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx index 870f23f29e3..0eccbd657ef 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx @@ -17,133 +17,12 @@ */ import React, { FC, useState } from 'react'; -import { Grid, makeStyles, Theme, Typography } from '@material-ui/core'; import { useDrop } from 'react-dnd'; -import green from '@material-ui/core/colors/green'; -import red from '@material-ui/core/colors/red'; -import clsx from 'clsx'; +import PolicyDropzoneShared from 'AppComponents/Shared/PoliciesUI/PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; import AttachedPolicyList from './UIComponents/AttachedPolicyList'; import PolicyConfiguringDrawer from './UIComponents/PolicyConfiguringDrawer'; -/** Shared UI Component */ -const useStyles = makeStyles((theme: Theme) => ({ - dropzoneDiv: { - border: '1px dashed', - borderColor: theme.palette.primary.main, - height: '8rem', - padding: '0.8rem', - width: '100%', - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - textAlign: 'center', - borderRadius: '0.3em', - display: 'flex', - alignItems: 'center', - overflowX: 'scroll', - }, - acceptDrop: { - backgroundColor: green[50], - borderColor: 'green', - }, - rejectDrop: { - backgroundColor: red[50], - borderColor: 'red', - }, - alignLeft: { - justifyContent: 'left', - }, - alignRight: { - justifyContent: 'right', - }, - alignCenter: { - justifyContent: 'center', - }, -})); - -interface PolicyDropzoneSharedProps { - policyDisplayStartDirection: string; - currentPolicyList: AttachedPolicy[]; - setCurrentPolicyList: React.Dispatch< - React.SetStateAction - >; - currentFlow: string; - target: string; - verb: string; - allPolicies: PolicySpec[] | null; - isAPILevelPolicy: boolean; - drop: any; - canDrop: any; - droppedPolicy: Policy | null; - setDroppedPolicy: any; -} - -const PolicyDropzoneShared: FC = ({ - policyDisplayStartDirection, - currentPolicyList, - setCurrentPolicyList, - currentFlow, - target, - verb, - allPolicies, - isAPILevelPolicy, - drop, - canDrop, - droppedPolicy, - setDroppedPolicy -}) => { - const classes = useStyles(); - return ( - <> - -
- {currentPolicyList.length === 0 ? ( - Drag and drop policies here - ) : ( - - )} -
- - {droppedPolicy && ( - - )} - - ); -} -/** Shared UI Component ends */ - interface PolicyDropzoneProps { policyDisplayStartDirection: string; currentPolicyList: AttachedPolicy[]; @@ -198,6 +77,8 @@ const PolicyDropzone: FC = ({ canDrop={canDrop} droppedPolicy={droppedPolicy} setDroppedPolicy={setDroppedPolicy} + AttachedPolicyList={AttachedPolicyList} + PolicyConfiguringDrawer={PolicyConfiguringDrawer} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx new file mode 100644 index 00000000000..a59828d9cf8 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx @@ -0,0 +1,147 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { Grid, makeStyles, Theme, Typography } from '@material-ui/core'; +import green from '@material-ui/core/colors/green'; +import red from '@material-ui/core/colors/red'; +import clsx from 'clsx'; +import type { AttachedPolicy, Policy, PolicySpec } from './Types'; + +/** Shared UI Component */ +const useStyles = makeStyles((theme: Theme) => ({ + dropzoneDiv: { + border: '1px dashed', + borderColor: theme.palette.primary.main, + height: '8rem', + padding: '0.8rem', + width: '100%', + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + textAlign: 'center', + borderRadius: '0.3em', + display: 'flex', + alignItems: 'center', + overflowX: 'scroll', + }, + acceptDrop: { + backgroundColor: green[50], + borderColor: 'green', + }, + rejectDrop: { + backgroundColor: red[50], + borderColor: 'red', + }, + alignLeft: { + justifyContent: 'left', + }, + alignRight: { + justifyContent: 'right', + }, + alignCenter: { + justifyContent: 'center', + }, +})); + +interface PolicyDropzoneSharedProps { + policyDisplayStartDirection: string; + currentPolicyList: AttachedPolicy[]; + setCurrentPolicyList: React.Dispatch< + React.SetStateAction + >; + currentFlow: string; + target: string; + verb: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; + drop: any; + canDrop: any; + droppedPolicy: Policy | null; + setDroppedPolicy: any; + AttachedPolicyList: any; + PolicyConfiguringDrawer: any; +} + +const PolicyDropzoneShared: FC = ({ + policyDisplayStartDirection, + currentPolicyList, + setCurrentPolicyList, + currentFlow, + target, + verb, + allPolicies, + isAPILevelPolicy, + drop, + canDrop, + droppedPolicy, + setDroppedPolicy, + AttachedPolicyList, + PolicyConfiguringDrawer +}) => { + const classes = useStyles(); + return ( + <> + +
+ {currentPolicyList.length === 0 ? ( + Drag and drop policies here + ) : ( + + )} +
+ + {droppedPolicy && ( + + )} + + ); +} + +export default PolicyDropzoneShared; From 212101c100a53225b66ffcf6a2419ce31c96e33b Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 10:55:25 +0530 Subject: [PATCH 055/102] Common ViewPolicy --- .../GlobalPolicies/Policies/ViewPolicy.tsx | 77 +-------------- .../Shared/PoliciesUI/ViewPolicy.tsx | 98 +++++++++++++++++++ 2 files changed, 100 insertions(+), 75 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx index 554a849e67c..cd978e36b35 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx @@ -17,88 +17,14 @@ */ import React, { useContext, useEffect, useState } from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Icon from '@material-ui/core/Icon'; -import IconButton from '@material-ui/core/IconButton'; import Alert from 'AppComponents/Shared/Alert'; import { Progress } from 'AppComponents/Shared'; import API from 'AppData/api'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; +import ViewPolicyShared from 'AppComponents/Shared/PoliciesUI/ViewPolicy'; import type { Policy, PolicySpec } from './Types'; import PolicyViewForm from './PolicyForm/PolicyViewForm'; -/** Shared UI Component */ -interface ViewPolicySharedProps { - handleDialogClose: () => void; - dialogOpen: boolean; - policyObj: Policy; - isLocalToAPI: boolean; - stopPropagation: (e: React.MouseEvent) => void; - toggleOpen: () => void; - policySpec: PolicySpec; -} - -const ViewPolicyShared: React.FC = ({ - handleDialogClose, - dialogOpen, - policyObj, - stopPropagation, - toggleOpen, - policySpec, -}) => { - return ( - <> - - - - - {policyObj.displayName} - - - - - close - - - - - - - - - - - - - ); -}; -/** Shared UI Component ends */ - interface ViewPolicyProps { handleDialogClose: () => void; dialogOpen: boolean; @@ -192,6 +118,7 @@ const ViewPolicy: React.FC = ({ stopPropagation={stopPropagation} toggleOpen={toggleOpen} policySpec={policySpec} + PolicyViewForm={PolicyViewForm} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx new file mode 100644 index 00000000000..389af9fa608 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx @@ -0,0 +1,98 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import Icon from '@material-ui/core/Icon'; +import IconButton from '@material-ui/core/IconButton'; +import type { Policy, PolicySpec } from './Types'; + +/** Shared UI Component */ +interface ViewPolicySharedProps { + handleDialogClose: () => void; + dialogOpen: boolean; + policyObj: Policy; + isLocalToAPI: boolean; + stopPropagation: (e: React.MouseEvent) => void; + toggleOpen: () => void; + policySpec: PolicySpec; + PolicyViewForm: any; +} + +const ViewPolicyShared: React.FC = ({ + handleDialogClose, + dialogOpen, + policyObj, + stopPropagation, + toggleOpen, + policySpec, + PolicyViewForm +}) => { + return ( + <> + + + + + {policyObj.displayName} + + + + + close + + + + + + + + + + + + + ); +}; + +export default ViewPolicyShared; From e968c2e3d4b4b0ef4439ca7a537042d4383a0bdc Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 11:17:56 +0530 Subject: [PATCH 056/102] Get the AttachedPolicyList and PolicyExpansion to root --- .../Policies/{UIComponents => }/AttachedPolicyList.tsx | 6 +++--- .../Policies/{UIComponents => }/PoliciesExpansion.tsx | 8 ++++---- .../components/GlobalPolicies/Policies/PolicyDropzone.tsx | 2 +- .../Policies/UIComponents/GatewaySelector.tsx | 7 ------- .../Policies/UIComponents/PoliciesSection.tsx | 2 +- 5 files changed, 9 insertions(+), 16 deletions(-) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => }/AttachedPolicyList.tsx (95%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => }/PoliciesExpansion.tsx (98%) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx similarity index 95% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/AttachedPolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx index 73c4f8355d6..b4d882a64d5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx @@ -30,9 +30,9 @@ import { SortableContext, } from '@dnd-kit/sortable'; -import AttachedPolicyCard from '../AttachedPolicyCard'; -import type { AttachedPolicy, PolicySpec } from '../Types'; -import ApiOperationContext from '../ApiOperationContext'; +import AttachedPolicyCard from './AttachedPolicyCard'; +import type { AttachedPolicy, PolicySpec } from './Types'; +import ApiOperationContext from './ApiOperationContext'; interface AttachedPolicyListProps { currentPolicyList: AttachedPolicy[]; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx similarity index 98% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesExpansion.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index 91117f7aa75..c749a01a4b5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -23,10 +23,10 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; import Typography from '@material-ui/core/Typography'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { FormattedMessage } from 'react-intl'; -import PolicyDropzone from '../PolicyDropzone'; -import type { AttachedPolicy, Policy, PolicySpec } from '../Types'; -import FlowArrow from '../components/FlowArrow'; -import ApiOperationContext from '../ApiOperationContext'; +import PolicyDropzone from './PolicyDropzone'; +import type { AttachedPolicy, Policy, PolicySpec } from './Types'; +import FlowArrow from './components/FlowArrow'; +import ApiOperationContext from './ApiOperationContext'; const useStyles = makeStyles((theme: Theme) => ({ flowSpecificPolicyAttachGrid: { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx index 0eccbd657ef..e64fb49914f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx @@ -20,7 +20,7 @@ import React, { FC, useState } from 'react'; import { useDrop } from 'react-dnd'; import PolicyDropzoneShared from 'AppComponents/Shared/PoliciesUI/PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; -import AttachedPolicyList from './UIComponents/AttachedPolicyList'; +import AttachedPolicyList from './AttachedPolicyList'; import PolicyConfiguringDrawer from './UIComponents/PolicyConfiguringDrawer'; interface PolicyDropzoneProps { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx index 4cd0487fd6a..6442f2d4c15 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx @@ -146,11 +146,6 @@ const GatewaySelector: FC = ({ color='primary' defaultChecked id='regularGateway' - // changedUI.commented - // disabled={isRestricted( - // ['apim:api_create'], - // apiFromContext, - // )} inputProps={{ 'aria-label': 'Regular Gateway', }} @@ -164,8 +159,6 @@ const GatewaySelector: FC = ({ control={ Date: Wed, 8 Nov 2023 11:48:45 +0530 Subject: [PATCH 057/102] Common AttachedPolicyList and PoliciesExpansion --- .../Policies/AttachedPolicyList.tsx | 49 ++---- .../Policies/PoliciesExpansion.tsx | 111 +++---------- .../Shared/PoliciesUI/AttachedPolicyList.tsx | 88 ++++++++++ .../Shared/PoliciesUI/PoliciesExpansion.tsx | 156 ++++++++++++++++++ 4 files changed, 279 insertions(+), 125 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx index b4d882a64d5..75e898c44d8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx @@ -18,22 +18,18 @@ import React, { FC, useContext } from 'react'; import { - DndContext, - closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent, } from '@dnd-kit/core'; -import { - horizontalListSortingStrategy, - SortableContext, -} from '@dnd-kit/sortable'; - +import AttachedPolicyListShared from 'AppComponents/Shared/PoliciesUI/AttachedPolicyList'; import AttachedPolicyCard from './AttachedPolicyCard'; + import type { AttachedPolicy, PolicySpec } from './Types'; import ApiOperationContext from './ApiOperationContext'; + interface AttachedPolicyListProps { currentPolicyList: AttachedPolicy[]; setCurrentPolicyList: React.Dispatch>; @@ -98,32 +94,19 @@ const AttachedPolicyList: FC = ({ }; return ( - <> - - item.uniqueKey)} - strategy={horizontalListSortingStrategy} - > - {policyListToDisplay.map((policy: AttachedPolicy) => ( - - ))} - - - + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index c749a01a4b5..a5aed401b2a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -17,24 +17,12 @@ */ import React, { FC, useContext, useEffect, useState } from 'react'; -import Grid from '@material-ui/core/Grid'; -import Box from '@material-ui/core/Box'; -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import { FormattedMessage } from 'react-intl'; +import PoliciesExpansionShared from 'AppComponents/Shared/PoliciesUI/PoliciesExpansion'; import PolicyDropzone from './PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; import FlowArrow from './components/FlowArrow'; import ApiOperationContext from './ApiOperationContext'; -const useStyles = makeStyles((theme: Theme) => ({ - flowSpecificPolicyAttachGrid: { - marginTop: theme.spacing(1), - overflowX: 'scroll', - }, -})); - const defaultPolicyForMigration = { id: '', category: 'Mediation', @@ -76,7 +64,6 @@ const PoliciesExpansion: FC = ({ const [responseFlowDroppablePolicyList, setResponseFlowDroppablePolicyList] = useState([]); const [faultFlowDroppablePolicyList, setFaultFlowDroppablePolicyList] = useState([]); - const classes = useStyles(); const { apiLevelPolicies } = useContext(ApiOperationContext); useEffect(() => { @@ -204,84 +191,24 @@ const PoliciesExpansion: FC = ({ }, [apiLevelPolicies]); return ( - - - - - - - - - - - - - - - - - - {!isChoreoConnectEnabled && ( - - - - - - - - )} - - - + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx new file mode 100644 index 00000000000..84088329def --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx @@ -0,0 +1,88 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { + DndContext, + closestCenter, + DragEndEvent, +} from '@dnd-kit/core'; +import { + horizontalListSortingStrategy, + SortableContext, +} from '@dnd-kit/sortable'; +import type { AttachedPolicy, PolicySpec } from './Types'; + +interface AttachedPolicyListSharedProps { + currentPolicyList: AttachedPolicy[]; + setCurrentPolicyList: React.Dispatch>; + currentFlow: string; + target: string; + verb: string; + allPolicies: PolicySpec[] | null; + isAPILevelPolicy: boolean; + sensors: any; + handleDragEnd: (event: DragEndEvent) => void; + policyListToDisplay: AttachedPolicy[]; + AttachedPolicyCard: any; +} + +const AttachedPolicyListShared: FC = ({ + currentPolicyList, + setCurrentPolicyList, + currentFlow, + target, + verb, + allPolicies, + isAPILevelPolicy, + sensors, + handleDragEnd, + policyListToDisplay, + AttachedPolicyCard, +}) => { + return ( + <> + + item.uniqueKey)} + strategy={horizontalListSortingStrategy} + > + {policyListToDisplay.map((policy: AttachedPolicy) => ( + + ))} + + + + ); +}; + +export default AttachedPolicyListShared; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx new file mode 100644 index 00000000000..c2051234037 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx @@ -0,0 +1,156 @@ +/* + * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; +import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import { FormattedMessage } from 'react-intl'; +import type { AttachedPolicy, PolicySpec } from './Types'; + +const useStyles = makeStyles((theme: Theme) => ({ + flowSpecificPolicyAttachGrid: { + marginTop: theme.spacing(1), + overflowX: 'scroll', + }, +})); + +interface PoliciesExpansionSharedProps { + target: any; + verb: string; + allPolicies: PolicySpec[] | null; + isChoreoConnectEnabled: boolean; + isAPILevelPolicy: boolean; + requestFlowPolicyList: AttachedPolicy[]; + setRequestFlowPolicyList: React.Dispatch>; + requestFlowDroppablePolicyList: string[]; + responseFlowPolicyList: AttachedPolicy[]; + setResponseFlowPolicyList: React.Dispatch>; + responseFlowDroppablePolicyList: string[]; + faultFlowPolicyList: AttachedPolicy[]; + setFaultFlowPolicyList: React.Dispatch>; + faultFlowDroppablePolicyList: string[]; + FlowArrow: any; + PolicyDropzone: any; +} + +const PoliciesExpansionShared: FC = ({ + target, + verb, + allPolicies, + isChoreoConnectEnabled, + isAPILevelPolicy, + requestFlowPolicyList, + setRequestFlowPolicyList, + requestFlowDroppablePolicyList, + responseFlowPolicyList, + setResponseFlowPolicyList, + responseFlowDroppablePolicyList, + faultFlowPolicyList, + setFaultFlowPolicyList, + faultFlowDroppablePolicyList, + FlowArrow, + PolicyDropzone +}) => { + const classes = useStyles(); + + return ( + + + + + + + + + + + + + + + + + + {!isChoreoConnectEnabled && ( + + + + + + + + )} + + + + ); +}; + +export default PoliciesExpansionShared; From 25979e38080be71a61a88d47b45276a6dbbf1092 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 11:57:41 +0530 Subject: [PATCH 058/102] Change License Headers --- .../GlobalPolicies/Edit/EditGlobalPolicy.tsx | 32 ++++++++-------- .../GlobalPolicies/GlobalPolicies.tsx | 32 ++++++++-------- .../Listing/GlobalPolicyGatewaySelector.tsx | 32 ++++++++-------- .../GlobalPolicies/Listing/Listing.tsx | 32 ++++++++-------- .../Policies/ApiOperationContext.js | 32 ++++++++-------- .../Policies/AttachedPolicyCard.tsx | 32 ++++++++-------- .../Policies/AttachedPolicyList.tsx | 32 ++++++++-------- .../GlobalPolicies/Policies/CreatePolicy.tsx | 32 ++++++++-------- .../GlobalPolicies/Policies/DeletePolicy.tsx | 32 ++++++++-------- .../Policies/DraggablePolicyCard.tsx | 32 ++++++++-------- .../Policies/PoliciesExpansion.tsx | 32 ++++++++-------- .../Policies/PolicyDropzone.tsx | 32 ++++++++-------- .../Policies/PolicyForm/GeneralDetails.tsx | 32 ++++++++-------- .../Policies/PolicyForm/PolicyAttributes.tsx | 32 ++++++++-------- .../Policies/PolicyForm/PolicyCreateForm.tsx | 32 ++++++++-------- .../Policies/PolicyForm/PolicyViewForm.tsx | 32 ++++++++-------- .../Policies/PolicyForm/SourceDetails.tsx | 32 ++++++++-------- .../Policies/PolicyForm/Types.d.ts | 32 ++++++++-------- .../PolicyForm/UploadPolicyDropzone.tsx | 32 ++++++++-------- .../GlobalPolicies/Policies/Types.d.ts | 32 ++++++++-------- .../Policies/UIComponents/GatewaySelector.tsx | 32 ++++++++-------- .../Policies/UIComponents/General.tsx | 32 ++++++++-------- .../Policies/UIComponents/Policies.tsx | 32 ++++++++-------- .../Policies/UIComponents/PoliciesSection.tsx | 32 ++++++++-------- .../PolicyConfigurationEditDrawer.tsx | 37 +++++++++---------- .../UIComponents/PolicyConfiguringDrawer.tsx | 32 ++++++++-------- .../Policies/UIComponents/PolicyList.tsx | 32 ++++++++-------- .../Policies/UIComponents/PolicyPanel.tsx | 32 ++++++++-------- .../GlobalPolicies/Policies/Utils.ts | 32 ++++++++-------- .../GlobalPolicies/Policies/ViewPolicy.tsx | 32 ++++++++-------- .../Policies/components/FlowArrow.tsx | 32 ++++++++-------- .../Policies/components/TabPanel.tsx | 32 ++++++++-------- .../Shared/PoliciesUI/AttachedPolicyCard.tsx | 33 ++++++++--------- .../Shared/PoliciesUI/AttachedPolicyList.tsx | 32 ++++++++-------- .../Shared/PoliciesUI/CreatePolicy.tsx | 33 ++++++++--------- .../Shared/PoliciesUI/DeletePolicy.tsx | 32 ++++++++-------- .../Shared/PoliciesUI/DraggablePolicyCard.tsx | 33 ++++++++--------- .../Shared/PoliciesUI/GeneralDetails.tsx | 32 ++++++++-------- .../Shared/PoliciesUI/PoliciesExpansion.tsx | 32 ++++++++-------- .../Shared/PoliciesUI/PolicyAttributes.tsx | 33 ++++++++--------- .../Shared/PoliciesUI/PolicyCreateForm.tsx | 32 ++++++++-------- .../Shared/PoliciesUI/PolicyDropzone.tsx | 33 ++++++++--------- .../Shared/PoliciesUI/PolicyViewForm.tsx | 33 ++++++++--------- .../Shared/PoliciesUI/SourceDetails.tsx | 32 ++++++++-------- .../components/Shared/PoliciesUI/TabPanel.tsx | 18 +++++++++ .../components/Shared/PoliciesUI/Types.d.ts | 32 ++++++++-------- .../PoliciesUI/UploadPolicyDropzone.tsx | 18 +++++++++ .../Shared/PoliciesUI/ViewPolicy.tsx | 33 ++++++++--------- 48 files changed, 777 insertions(+), 743 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx index 1f22c0a0b21..61118854bf8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx @@ -1,18 +1,20 @@ -// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. - -// WSO2 Inc. licenses this file to you under the Apache License, -// Version 2.0 (the "License"); you may not use this file except -// in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, -// software distributed under the License is distributed on an -// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -// KIND, either express or implied. See the License for the -// specific language governing permissions and limitations -// under the License. +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React from 'react'; import Policies from 'AppComponents/GlobalPolicies/Policies/UIComponents/Policies'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx index 91a8f566ee4..a908f0c0e0f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx @@ -1,18 +1,20 @@ -// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. - -// WSO2 Inc. licenses this file to you under the Apache License, -// Version 2.0 (the "License"); you may not use this file except -// in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, -// software distributed under the License is distributed on an -// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -// KIND, either express or implied. See the License for the -// specific language governing permissions and limitations -// under the License. +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React from 'react'; import { Route, Switch } from 'react-router-dom'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/GlobalPolicyGatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/GlobalPolicyGatewaySelector.tsx index feba15695cd..ac20a50c864 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/GlobalPolicyGatewaySelector.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/GlobalPolicyGatewaySelector.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { HelpOutline } from '@material-ui/icons'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index e76fe35dac9..8b130038f15 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -1,18 +1,20 @@ -// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. - -// WSO2 Inc. licenses this file to you under the Apache License, -// Version 2.0 (the "License"); you may not use this file except -// in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, -// software distributed under the License is distributed on an -// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -// KIND, either express or implied. See the License for the -// specific language governing permissions and limitations -// under the License. +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useState, useEffect } from 'react'; import { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js index e9d946f586a..ff4b8170f33 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useContext } from 'react'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index 9b06942d5db..2af927d1edf 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useContext, useState } from 'react'; import { Alert } from 'AppComponents/Shared'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx index 75e898c44d8..f423cc6f1db 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useContext } from 'react'; import { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx index c341bb5aa55..c9f6a894639 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useContext, useState } from 'react'; import API from 'AppData/api.js'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx index 16625dacb71..77c581a622a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useState, FC, useContext } from 'react'; import Alert from 'AppComponents/Shared/Alert'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx index e711d1d505e..e902624384b 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useState } from 'react'; import DraggablePolicyCardShared from 'AppComponents/Shared/PoliciesUI/DraggablePolicyCard'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index a5aed401b2a..acabdd00b95 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useContext, useEffect, useState } from 'react'; import PoliciesExpansionShared from 'AppComponents/Shared/PoliciesUI/PoliciesExpansion'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx index e64fb49914f..9039b841ce6 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useState } from 'react'; import { useDrop } from 'react-dnd'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx index d70ad694ef6..45749b295d8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import GeneralDetailsShared from 'AppComponents/Shared/PoliciesUI/GeneralDetails'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx index c3b3d208e18..df56b02a4b8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useState, } from 'react'; import { useIntl } from 'react-intl'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx index aa9fd2e0e86..e3729e2d3e5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useEffect, useReducer, useState } from 'react'; import CONSTS from 'AppData/Constants'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx index 9e62180ad61..5139d9a2754 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import PolicyViewFormShared from 'AppComponents/Shared/PoliciesUI/PolicyViewForm'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx index d0b74cbd048..10c81132a92 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useContext } from 'react'; import { FormattedMessage } from 'react-intl'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts index 4f135edf67d..1b5a12165b2 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ export type PolicyAttribute = { id: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx index 61c13a7c5a9..947201c64a3 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import UploadPolicyDropzoneShared from 'AppComponents/Shared/PoliciesUI/UploadPolicyDropzone'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts index 2f802adc12b..852c2b3340c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ export type Policy = { id: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx index 6442f2d4c15..2adabc2013a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useState } from 'react'; import { HelpOutline } from '@material-ui/icons'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx index 6183a2e4da1..a12924b3507 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useState, FC, useContext } from 'react'; import { makeStyles } from '@material-ui/core/styles'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx index a877585598f..723c0e5b4f5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import { Card, CardContent, makeStyles, Typography } from '@material-ui/core'; import Grid from '@material-ui/core/Grid'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx index e940a6263e1..1809d8b71f5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 LLC. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import { Grid } from '@material-ui/core'; import React, { FC } from 'react'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx index 69ab7a4f7ec..1926f8a538c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx @@ -1,21 +1,20 @@ -/* eslint-disable */ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useEffect, useContext, useState } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -33,11 +32,11 @@ import { import IconButton from '@material-ui/core/IconButton'; import { Settings, Close } from '@material-ui/icons'; import Divider from '@material-ui/core/Divider'; +import API from 'AppData/api'; +import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import General from './General'; import type { PolicySpec, ApiPolicy, AttachedPolicy } from '../Types'; -import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import ApiOperationContext from '../ApiOperationContext'; -import API from 'AppData/api'; const useStyles = makeStyles((theme: Theme) => ({ drawerPaper: { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx index 46073b022d3..d1bedaf5e6f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC, useEffect, useState } from 'react'; import { FormattedMessage } from 'react-intl'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx index 36f77d9741b..abde7c80aeb 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useState, FC } from 'react'; import Paper from '@material-ui/core/Paper'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx index bad39cd95ed..aad2e226ec2 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 LLC. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import { Box } from '@material-ui/core'; import React, { FC } from 'react'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Utils.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Utils.ts index 483ec5bc71f..a826ad869bf 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Utils.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Utils.ts @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ /* eslint-disable no-mixed-operators */ /* eslint-disable eqeqeq */ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx index cd978e36b35..67628ce31d8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { useContext, useEffect, useState } from 'react'; import Alert from 'AppComponents/Shared/Alert'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx index 44636784ad6..bdc249d8838 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import FlowArrowShared from 'AppComponents/Shared/PoliciesUI/FlowArrow'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx index 02e701fd14f..82a513f4f6a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import TabPanelShared from 'AppComponents/Shared/PoliciesUI/TabPanel'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx index 4b646e76665..778689b6760 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyCard.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { CSSProperties, FC } from 'react'; import Avatar from '@material-ui/core/Avatar'; @@ -29,7 +29,6 @@ import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; import Utils from 'AppData/Utils'; import type { AttachedPolicy, PolicySpec } from './Types'; -/** Shared UI Component */ const useStyles = makeStyles(() => ({ actionsBox: { display: 'flex', diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx index 84088329def..2f651fcb5c6 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/AttachedPolicyList.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx index e21b7d650cc..e6affbc1307 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React from 'react'; import { Typography, makeStyles, Theme } from '@material-ui/core'; @@ -30,7 +30,6 @@ import { FormattedMessage } from 'react-intl'; import CONSTS from 'AppData/Constants'; import type { CreatePolicySpec } from './Types'; -/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ link: { color: theme.palette.primary.dark, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx index 0f30adcd8b6..cb9d767f9f8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { FormattedMessage } from 'react-intl'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx index df428132545..e481e396504 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { CSSProperties, useMemo } from 'react'; import { makeStyles } from '@material-ui/core'; @@ -31,7 +31,6 @@ import { FormattedMessage } from 'react-intl'; import { useDrag } from 'react-dnd'; import type { Policy } from './Types'; -/** Shared UI Component */ const useStyles = makeStyles(() => ({ policyCardText: { overflow: 'hidden', diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx index 1f40818570c..746d9dedc3d 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { makeStyles, Theme } from '@material-ui/core'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx index c2051234037..58194af3a1e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import Grid from '@material-ui/core/Grid'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx index 4d88c2dc055..fb6aa32c7df 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { Button, makeStyles, Theme } from '@material-ui/core'; @@ -38,7 +38,6 @@ import DeleteIcon from '@material-ui/icons/Delete'; import { AddCircle } from '@material-ui/icons'; import { PolicyAttribute } from './Types'; -/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ attributeProperty: { marginLeft: theme.spacing(0.5), diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx index bc8d72b6f54..cc1ef4c1b16 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { CircularProgress, makeStyles, Theme } from '@material-ui/core'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx index a59828d9cf8..3a2b097d838 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { Grid, makeStyles, Theme, Typography } from '@material-ui/core'; @@ -23,7 +23,6 @@ import red from '@material-ui/core/colors/red'; import clsx from 'clsx'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; -/** Shared UI Component */ const useStyles = makeStyles((theme: Theme) => ({ dropzoneDiv: { border: '1px dashed', diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx index f178fe3c165..ade614703bd 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { makeStyles } from '@material-ui/core'; @@ -25,7 +25,6 @@ import Paper from '@material-ui/core/Paper'; import { FormattedMessage } from 'react-intl'; import type { PolicySpec } from './Types'; -/** Shared UI Component */ const useStyles = makeStyles(() => ({ root: { flexGrow: 1, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx index d162a2a1b85..4ecc961aad5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React, { FC } from 'react'; import { makeStyles, Theme } from '@material-ui/core'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx index fa96ad3bdb9..5d22152f223 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx @@ -1,3 +1,21 @@ +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ + import { Box } from '@material-ui/core'; import React, { FC } from 'react'; import type { Policy } from './Types'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts index 5ab42c687fb..8f8dd083f80 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ export type Policy = { id: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx index 2df3eb2149b..212a4af5737 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx @@ -1,3 +1,21 @@ +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ + import React, { FC } from 'react'; import { List, makeStyles, IconButton, Theme } from '@material-ui/core'; import Typography from '@material-ui/core/Typography'; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx index 389af9fa608..eb95f4197c5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx @@ -1,20 +1,20 @@ /* - * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. - * - * WSO2 Inc. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React from 'react'; import Box from '@material-ui/core/Box'; @@ -26,7 +26,6 @@ import Icon from '@material-ui/core/Icon'; import IconButton from '@material-ui/core/IconButton'; import type { Policy, PolicySpec } from './Types'; -/** Shared UI Component */ interface ViewPolicySharedProps { handleDialogClose: () => void; dialogOpen: boolean; From bd7b5081ed5320e78aa5dd29bcad814f09978adc Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 12:02:35 +0530 Subject: [PATCH 059/102] Refactor Global Policies component --- .../app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx | 2 +- .../src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx | 2 +- .../components/GlobalPolicies/Policies/AttachedPolicyCard.tsx | 2 +- .../{UIComponents => GlobalComponents}/GatewaySelector.tsx | 0 .../Policies/{UIComponents => GlobalComponents}/General.tsx | 0 .../Policies/{UIComponents => GlobalComponents}/Policies.tsx | 0 .../{UIComponents => GlobalComponents}/PoliciesSection.tsx | 0 .../PolicyConfigurationEditDrawer.tsx | 0 .../PolicyConfiguringDrawer.tsx | 0 .../Policies/{UIComponents => GlobalComponents}/PolicyList.tsx | 2 +- .../Policies/{UIComponents => GlobalComponents}/PolicyPanel.tsx | 0 .../components/GlobalPolicies/Policies/PoliciesExpansion.tsx | 2 +- .../app/components/GlobalPolicies/Policies/PolicyDropzone.tsx | 2 +- 13 files changed, 6 insertions(+), 6 deletions(-) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/GatewaySelector.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/General.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/Policies.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/PoliciesSection.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/PolicyConfigurationEditDrawer.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/PolicyConfiguringDrawer.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/PolicyList.tsx (99%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{UIComponents => GlobalComponents}/PolicyPanel.tsx (100%) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx index 24b1292d3e7..29d3d4b72dd 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -15,7 +15,7 @@ // under the License. import React from 'react'; -import Policies from 'AppComponents/GlobalPolicies/Policies/UIComponents/Policies'; +import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalComponents/Policies'; /** * Global Policies Creating Page. diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx index 61118854bf8..0a451707139 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx @@ -17,7 +17,7 @@ */ import React from 'react'; -import Policies from 'AppComponents/GlobalPolicies/Policies/UIComponents/Policies'; +import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalComponents/Policies'; import { useParams } from 'react-router-dom'; interface RouteParams { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index 2af927d1edf..a525f16686d 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -24,7 +24,7 @@ import { FormattedMessage } from 'react-intl'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import AttachedPolicyCardShared from 'AppComponents/Shared/PoliciesUI/AttachedPolicyCard'; import type { AttachedPolicy, PolicySpec } from './Types'; -import PolicyConfigurationEditDrawer from './UIComponents/PolicyConfigurationEditDrawer'; +import PolicyConfigurationEditDrawer from './GlobalComponents/PolicyConfigurationEditDrawer'; import ApiOperationContext from './ApiOperationContext'; interface AttachedPolicyCardProps { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/GatewaySelector.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/GatewaySelector.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/GatewaySelector.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/General.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/Policies.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PoliciesSection.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfigurationEditDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyConfiguringDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx similarity index 99% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx index abde7c80aeb..1d1706e00a4 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx @@ -28,7 +28,7 @@ import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core'; import CONSTS from 'AppData/Constants'; import type { Policy } from '../Types'; -import TabPanel from '../components/TabPanel'; +import TabPanel from '../Components/TabPanel'; import CreatePolicy from '../CreatePolicy'; const useStyles = makeStyles(() => ({ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/UIComponents/PolicyPanel.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index acabdd00b95..85965c9d23a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -20,7 +20,7 @@ import React, { FC, useContext, useEffect, useState } from 'react'; import PoliciesExpansionShared from 'AppComponents/Shared/PoliciesUI/PoliciesExpansion'; import PolicyDropzone from './PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; -import FlowArrow from './components/FlowArrow'; +import FlowArrow from './Components/FlowArrow'; import ApiOperationContext from './ApiOperationContext'; const defaultPolicyForMigration = { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx index 9039b841ce6..2ee9ba68b6a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx @@ -21,7 +21,7 @@ import { useDrop } from 'react-dnd'; import PolicyDropzoneShared from 'AppComponents/Shared/PoliciesUI/PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; import AttachedPolicyList from './AttachedPolicyList'; -import PolicyConfiguringDrawer from './UIComponents/PolicyConfiguringDrawer'; +import PolicyConfiguringDrawer from './GlobalComponents/PolicyConfiguringDrawer'; interface PolicyDropzoneProps { policyDisplayStartDirection: string; From 60cb0f1c456d1073db6ec8adc780a42c8560ac82 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 12:56:27 +0530 Subject: [PATCH 060/102] Change ApiOperationContext to ApiGlobalPolicyContext --- .../GlobalPolicies/Policies/AttachedPolicyCard.tsx | 4 ++-- .../GlobalPolicies/Policies/AttachedPolicyList.tsx | 4 ++-- .../Policies/GlobalComponents/General.tsx | 4 ++-- .../Policies/GlobalComponents/Policies.tsx | 8 ++++---- .../PolicyConfigurationEditDrawer.tsx | 6 +++--- ...piOperationContext.js => GlobalPolicyContext.js} | 13 +++++++++---- .../GlobalPolicies/Policies/PoliciesExpansion.tsx | 4 ++-- 7 files changed, 24 insertions(+), 19 deletions(-) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ApiOperationContext.js => GlobalPolicyContext.js} (59%) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index a525f16686d..f387374cdac 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -25,7 +25,7 @@ import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import AttachedPolicyCardShared from 'AppComponents/Shared/PoliciesUI/AttachedPolicyCard'; import type { AttachedPolicy, PolicySpec } from './Types'; import PolicyConfigurationEditDrawer from './GlobalComponents/PolicyConfigurationEditDrawer'; -import ApiOperationContext from './ApiOperationContext'; +import GlobalPolicyContext from './GlobalPolicyContext'; interface AttachedPolicyCardProps { policyObj: AttachedPolicy; @@ -55,7 +55,7 @@ const AttachedPolicyCard: FC = ({ }) => { const { api } = useContext(ApiContext); - const { deleteApiOperation } = useContext(ApiOperationContext); + const { deleteApiOperation } = useContext(GlobalPolicyContext); const [drawerOpen, setDrawerOpen] = useState(false); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx index f423cc6f1db..d72a842711b 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx @@ -27,7 +27,7 @@ import AttachedPolicyListShared from 'AppComponents/Shared/PoliciesUI/AttachedPo import AttachedPolicyCard from './AttachedPolicyCard'; import type { AttachedPolicy, PolicySpec } from './Types'; -import ApiOperationContext from './ApiOperationContext'; +import GlobalPolicyContext from './GlobalPolicyContext'; interface AttachedPolicyListProps { @@ -61,7 +61,7 @@ const AttachedPolicyList: FC = ({ policyDisplayStartDirection === 'left' ? currentPolicyList : reversedPolicyList; - const { rearrangeApiOperations } = useContext(ApiOperationContext); + const { rearrangeApiOperations } = useContext(GlobalPolicyContext); const sensors = useSensors( useSensor(PointerSensor, { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx index a12924b3507..a0b060b0357 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx @@ -35,7 +35,7 @@ import { import { FormattedMessage, useIntl } from 'react-intl'; import { Progress } from 'AppComponents/Shared'; import { PolicySpec, ApiPolicy, AttachedPolicy, Policy, PolicySpecAttribute } from '../Types'; -import ApiOperationContext from "../ApiOperationContext"; +import GlobalPolicyContext from "../GlobalPolicyContext"; const useStyles = makeStyles(theme => ({ resetBtn: { @@ -85,7 +85,7 @@ const General: FC = ({ const classes = useStyles(); const [saving, setSaving] = useState(false); const initState: any = {}; - const { updateApiOperations } = useContext(ApiOperationContext); + const { updateApiOperations } = useContext(GlobalPolicyContext); policySpec.policyAttributes.forEach(attr => { initState[attr.name] = null }); const [state, setState] = useState(initState); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx index 723c0e5b4f5..4e36580b059 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx @@ -35,7 +35,7 @@ import { useHistory, Link } from 'react-router-dom'; import PolicyList from './PolicyList'; import type { Policy, PolicySpec, ApiLevelPolicy } from '../Types'; import GatewaySelector from './GatewaySelector'; -import { ApiOperationContextProvider } from '../ApiOperationContext'; +import { GlobalPolicyContextProvider } from '../GlobalPolicyContext'; import PolicyPanel from './PolicyPanel'; import { uuidv4 } from '../Utils'; @@ -354,7 +354,7 @@ const Policies: FC = ({ } /** - * To memoize the value passed into ApiOperationContextProvider + * To memoize the value passed into GlobalPolicyContextProvider */ const providerValue = useMemo( () => ({ @@ -382,7 +382,7 @@ const Policies: FC = ({ } return ( - + @@ -490,7 +490,7 @@ const Policies: FC = ({ - + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx index 1926f8a538c..bec200ee4ec 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx @@ -36,7 +36,7 @@ import API from 'AppData/api'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import General from './General'; import type { PolicySpec, ApiPolicy, AttachedPolicy } from '../Types'; -import ApiOperationContext from '../ApiOperationContext'; +import GlobalPolicyContext from '../GlobalPolicyContext'; const useStyles = makeStyles((theme: Theme) => ({ drawerPaper: { @@ -78,8 +78,8 @@ const PolicyConfigurationEditDrawer: FC = ({ }) => { const classes = useStyles(); const { api } = useContext(ApiContext); - const { apiOperations } = useContext(ApiOperationContext); - const { apiLevelPolicies } = useContext(ApiOperationContext); + const { apiOperations } = useContext(GlobalPolicyContext); + const { apiLevelPolicies } = useContext(GlobalPolicyContext); const [policySpec, setPolicySpec] = useState(); useEffect(() => { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalPolicyContext.js similarity index 59% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalPolicyContext.js index ff4b8170f33..f5cafc0fe41 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ApiOperationContext.js +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalPolicyContext.js @@ -18,7 +18,12 @@ import React, { useContext } from 'react'; -const ApiOperationContext = React.createContext({}); -export const useApiOperationContext = () => useContext(ApiOperationContext); -export const ApiOperationContextProvider = ApiOperationContext.Provider; -export default ApiOperationContext; +const GlobalPolicyContext = React.createContext({}); +export const useGlobalPolicyContext = () => useContext(GlobalPolicyContext); +export const GlobalPolicyContextProvider = GlobalPolicyContext.Provider; +export default GlobalPolicyContext; + +// const ApiOperationContext = React.createContext({}); +// export const useApiOperationContext = () => useContext(ApiOperationContext); +// export const ApiOperationContextProvider = ApiOperationContext.Provider; +// export default ApiOperationContext; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index 85965c9d23a..35262b59a52 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -21,7 +21,7 @@ import PoliciesExpansionShared from 'AppComponents/Shared/PoliciesUI/PoliciesExp import PolicyDropzone from './PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from './Types'; import FlowArrow from './Components/FlowArrow'; -import ApiOperationContext from './ApiOperationContext'; +import GlobalPolicyContext from './GlobalPolicyContext'; const defaultPolicyForMigration = { id: '', @@ -64,7 +64,7 @@ const PoliciesExpansion: FC = ({ const [responseFlowDroppablePolicyList, setResponseFlowDroppablePolicyList] = useState([]); const [faultFlowDroppablePolicyList, setFaultFlowDroppablePolicyList] = useState([]); - const { apiLevelPolicies } = useContext(ApiOperationContext); + const { apiLevelPolicies } = useContext(GlobalPolicyContext); useEffect(() => { const requestList = []; From 52851d778dab3862bfd56a7497ae0ce224fe507d Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 13:52:48 +0530 Subject: [PATCH 061/102] Implement deleteGlobalOperation and globalLevelPolicies in GlobalPoliciesContext --- .../Policies/AttachedPolicyCard.tsx | 4 +-- .../Policies/GlobalComponents/Policies.tsx | 30 +++++++++---------- .../PolicyConfigurationEditDrawer.tsx | 4 +-- .../Policies/PoliciesExpansion.tsx | 6 ++-- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index f387374cdac..5f10af0fbf2 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -55,7 +55,7 @@ const AttachedPolicyCard: FC = ({ }) => { const { api } = useContext(ApiContext); - const { deleteApiOperation } = useContext(GlobalPolicyContext); + const { deleteGlobalOperation } = useContext(GlobalPolicyContext); const [drawerOpen, setDrawerOpen] = useState(false); @@ -71,7 +71,7 @@ const AttachedPolicyCard: FC = ({ (policy) => policy.uniqueKey === policyObj.uniqueKey, ); setCurrentPolicyList(filteredList); - deleteApiOperation( + deleteGlobalOperation( policyToDelete?.uniqueKey, target, verb, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx index 4e36580b059..758f4f1a63d 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx @@ -125,8 +125,8 @@ const Policies: FC = ({ }; // As we are reusing 30+ components from the API level policies, we are using the same context provider for both. - // Even though name is apiLevelPolicies, in these cases, it will be global level policies. - const [apiLevelPolicies, setApiLevelPolicies] = useState(getInitAPILevelPoliciesState()); + // Even though name is globalLevelPolicies, in these cases, it will be global level policies. + const [globalLevelPolicies, setGlobalLevelPolicies] = useState(getInitAPILevelPoliciesState()); /** * Fetches all common policies. @@ -236,7 +236,7 @@ const Policies: FC = ({ promisedPolicy .then((response) => { const responseUpdated = assignUUIDs(response); - setApiLevelPolicies(responseUpdated.policyMapping); + setGlobalLevelPolicies(responseUpdated.policyMapping); setDescription(responseUpdated.description); setName(responseUpdated.displayName); setAppliedGatewayLabels(responseUpdated.appliedGatewayLabels); @@ -250,7 +250,7 @@ const Policies: FC = ({ } const removeAPIPoliciesForGatewayChange = () => { - setApiLevelPolicies(initApiLevelPolicy); + setGlobalLevelPolicies(initApiLevelPolicy); } useEffect(() => { @@ -267,11 +267,11 @@ const Policies: FC = ({ * @param {string} verb verb of the operation that neeeds to be updated * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault */ - const deleteApiOperation = (uuid: string, target: string, verb: string, currentFlow: string) => { - const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); + const deleteGlobalOperation = (uuid: string, target: string, verb: string, currentFlow: string) => { + const newApiLevelPolicies: any = cloneDeep(globalLevelPolicies); const index = newApiLevelPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); newApiLevelPolicies[currentFlow].splice(index, 1); - setApiLevelPolicies(newApiLevelPolicies); + setGlobalLevelPolicies(newApiLevelPolicies); } /** @@ -288,7 +288,7 @@ const Policies: FC = ({ const updateApiOperations = ( updatedOperation: any, target: string, verb: string, currentFlow: string, ) => { - const newApiLevelPolicies: any = cloneDeep(apiLevelPolicies); + const newApiLevelPolicies: any = cloneDeep(globalLevelPolicies); const flowPolicy = (newApiLevelPolicies)[currentFlow].find( (p: any) => p.policyId === updatedOperation.policyId && @@ -304,7 +304,7 @@ const Policies: FC = ({ (newApiLevelPolicies)[currentFlow].push({ ...updatedOperation, uuid } ); } - setApiLevelPolicies(newApiLevelPolicies); + setGlobalLevelPolicies(newApiLevelPolicies); } /** @@ -317,7 +317,7 @@ const Policies: FC = ({ // call the backend API const requestBody = { "id": uuidv4(), - "policyMapping": apiLevelPolicies, + "policyMapping": globalLevelPolicies, "description": description, "displayName": name, "appliedGatewayLabels": [] @@ -340,7 +340,7 @@ const Policies: FC = ({ // call the backend API const requestBody = { "id": policyID, - "policyMapping": apiLevelPolicies, + "policyMapping": globalLevelPolicies, "description": description, "displayName": name, "appliedGatewayLabels": appliedGatewayLabels @@ -358,14 +358,14 @@ const Policies: FC = ({ */ const providerValue = useMemo( () => ({ - apiLevelPolicies, + globalLevelPolicies, updateApiOperations, - deleteApiOperation, + deleteGlobalOperation, }), [ - apiLevelPolicies, + globalLevelPolicies, updateApiOperations, - deleteApiOperation, + deleteGlobalOperation, ], ); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx index bec200ee4ec..df816ca08e2 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx @@ -79,7 +79,7 @@ const PolicyConfigurationEditDrawer: FC = ({ const classes = useStyles(); const { api } = useContext(ApiContext); const { apiOperations } = useContext(GlobalPolicyContext); - const { apiLevelPolicies } = useContext(GlobalPolicyContext); + const { globalLevelPolicies } = useContext(GlobalPolicyContext); const [policySpec, setPolicySpec] = useState(); useEffect(() => { @@ -109,7 +109,7 @@ const PolicyConfigurationEditDrawer: FC = ({ op.target === target && op.verb.toLowerCase() === verb.toLowerCase(), ) : null; - const operationFlowPolicy = ((isAPILevelPolicy) ? apiLevelPolicies : operationInAction.operationPolicies)[ + const operationFlowPolicy = ((isAPILevelPolicy) ? globalLevelPolicies : operationInAction.operationPolicies)[ currentFlow ].find((policy: any) => policy.uuid === policyObj?.uniqueKey); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index 35262b59a52..e9f910393a4 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -64,7 +64,7 @@ const PoliciesExpansion: FC = ({ const [responseFlowDroppablePolicyList, setResponseFlowDroppablePolicyList] = useState([]); const [faultFlowDroppablePolicyList, setFaultFlowDroppablePolicyList] = useState([]); - const { apiLevelPolicies } = useContext(GlobalPolicyContext); + const { globalLevelPolicies } = useContext(GlobalPolicyContext); useEffect(() => { const requestList = []; @@ -94,7 +94,7 @@ const PoliciesExpansion: FC = ({ */ useEffect(() => { (async () => { - const apiPolicies = apiLevelPolicies; + const apiPolicies = globalLevelPolicies; // Populate request flow attached policy list const requestFlowList: AttachedPolicy[] = []; @@ -188,7 +188,7 @@ const PoliciesExpansion: FC = ({ setFaultFlowPolicyList(faultFlowList); } })(); - }, [apiLevelPolicies]); + }, [globalLevelPolicies]); return ( Date: Wed, 8 Nov 2023 13:59:48 +0530 Subject: [PATCH 062/102] Remove apiOperations and apiLevelPolicies from context --- .../Policies/GlobalComponents/General.tsx | 4 ++-- .../Policies/GlobalComponents/Policies.tsx | 6 +++--- .../GlobalComponents/PolicyConfigurationEditDrawer.tsx | 10 +--------- .../GlobalPolicies/Policies/PoliciesExpansion.tsx | 2 +- 4 files changed, 7 insertions(+), 15 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx index a0b060b0357..be203921d1e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx @@ -85,7 +85,7 @@ const General: FC = ({ const classes = useStyles(); const [saving, setSaving] = useState(false); const initState: any = {}; - const { updateApiOperations } = useContext(GlobalPolicyContext); + const { updateGlobalOperations } = useContext(GlobalPolicyContext); policySpec.policyAttributes.forEach(attr => { initState[attr.name] = null }); const [state, setState] = useState(initState); @@ -135,7 +135,7 @@ const General: FC = ({ const apiPolicyToSave = {...apiPolicy}; apiPolicyToSave.parameters = updateCandidates; - updateApiOperations(apiPolicyToSave, target, verb, currentFlow); + updateGlobalOperations(apiPolicyToSave, target, verb, currentFlow); if (setDroppedPolicy) setDroppedPolicy(null); setSaving(false); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx index 758f4f1a63d..76f1416850b 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx @@ -285,7 +285,7 @@ const Policies: FC = ({ * @param {string} verb Verb. * @param {string} currentFlow Folow request/response/fault. */ - const updateApiOperations = ( + const updateGlobalOperations = ( updatedOperation: any, target: string, verb: string, currentFlow: string, ) => { const newApiLevelPolicies: any = cloneDeep(globalLevelPolicies); @@ -359,12 +359,12 @@ const Policies: FC = ({ const providerValue = useMemo( () => ({ globalLevelPolicies, - updateApiOperations, + updateGlobalOperations, deleteGlobalOperation, }), [ globalLevelPolicies, - updateApiOperations, + updateGlobalOperations, deleteGlobalOperation, ], ); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx index df816ca08e2..37352bb36a4 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx @@ -74,11 +74,9 @@ const PolicyConfigurationEditDrawer: FC = ({ allPolicies, drawerOpen, setDrawerOpen, - isAPILevelPolicy, }) => { const classes = useStyles(); const { api } = useContext(ApiContext); - const { apiOperations } = useContext(GlobalPolicyContext); const { globalLevelPolicies } = useContext(GlobalPolicyContext); const [policySpec, setPolicySpec] = useState(); @@ -103,13 +101,7 @@ const PolicyConfigurationEditDrawer: FC = ({ } })(); }, [policyObj]); - - const operationInAction = (!isAPILevelPolicy) ? apiOperations.find( - (op: any) => - op.target === target && - op.verb.toLowerCase() === verb.toLowerCase(), - ) : null; - const operationFlowPolicy = ((isAPILevelPolicy) ? globalLevelPolicies : operationInAction.operationPolicies)[ + const operationFlowPolicy = (globalLevelPolicies)[ currentFlow ].find((policy: any) => policy.uuid === policyObj?.uniqueKey); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index e9f910393a4..aa478b377d3 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -89,7 +89,7 @@ const PoliciesExpansion: FC = ({ /** * In here, we are populating the attached policy list for each flow. * This will be triggered once we saved a drag`n`droped policy. - * This comes after Policies.tsx updateApiOperations() method. + * This comes after Policies.tsx updateGlobalOperations() method. * This will hold data in the UI until we save the policy. */ useEffect(() => { From d9919481e41fa2e20bd23aaff1472977c0f171b1 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 14:10:33 +0530 Subject: [PATCH 063/102] rearrangeGlobalOperations context --- .../Policies/AttachedPolicyList.tsx | 4 ++-- .../Policies/GlobalComponents/Policies.tsx | 20 +++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx index d72a842711b..ce4f1f414ff 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx @@ -61,7 +61,7 @@ const AttachedPolicyList: FC = ({ policyDisplayStartDirection === 'left' ? currentPolicyList : reversedPolicyList; - const { rearrangeApiOperations } = useContext(GlobalPolicyContext); + const { rearrangeGlobalOperations } = useContext(GlobalPolicyContext); const sensors = useSensors( useSensor(PointerSensor, { @@ -83,7 +83,7 @@ const AttachedPolicyList: FC = ({ (item) => item.uniqueKey === over?.id, ); - rearrangeApiOperations( + rearrangeGlobalOperations( oldIndex, newIndex, target, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx index 76f1416850b..60a04f236dd 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx @@ -28,6 +28,7 @@ import Icon from '@material-ui/core/Icon'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DndProvider } from 'react-dnd'; import { FormattedMessage } from 'react-intl'; +import { arrayMove } from '@dnd-kit/sortable'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import cloneDeep from 'lodash.clonedeep'; @@ -307,6 +308,23 @@ const Policies: FC = ({ setGlobalLevelPolicies(newApiLevelPolicies); } + /** + * Function to rearrange the API Operation ordering + * @param {string} oldIndex original index of the policy + * @param {string} newIndex new index of the policy + * @param {string} target target that needs to be updated + * @param {string} verb verb of the operation that neeeds to be updated + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault + */ + const rearrangeGlobalOperations = ( + oldIndex: number, newIndex: number, target: string, verb: string, currentFlow: string, + ) => { + const newAPIPolicies: any = cloneDeep(globalLevelPolicies); + const policyArray = newAPIPolicies[currentFlow]; + newAPIPolicies[currentFlow] = arrayMove(policyArray, oldIndex, newIndex); + setGlobalLevelPolicies(newAPIPolicies); + }; + /** * Function to save a policy mapping * @@ -361,11 +379,13 @@ const Policies: FC = ({ globalLevelPolicies, updateGlobalOperations, deleteGlobalOperation, + rearrangeGlobalOperations }), [ globalLevelPolicies, updateGlobalOperations, deleteGlobalOperation, + rearrangeGlobalOperations ], ); From 93181cbf922b8d7fda3c2e26687e1a51e7eb44da Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 14:37:47 +0530 Subject: [PATCH 064/102] Code refactoring --- .../Policies/AttachedPolicyCard.tsx | 8 ++--- .../Policies/GlobalComponents/General.tsx | 14 ++++----- .../Policies/GlobalComponents/Policies.tsx | 30 +++++++++---------- .../PolicyConfigurationEditDrawer.tsx | 6 ++-- .../PolicyConfiguringDrawer.tsx | 6 ++-- .../Policies/PolicyForm/SourceDetails.tsx | 8 ++--- .../GlobalPolicies/Policies/Types.d.ts | 4 +-- 7 files changed, 38 insertions(+), 38 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index 5f10af0fbf2..0dc490094e4 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -89,13 +89,13 @@ const AttachedPolicyCard: FC = ({ event.stopPropagation(); event.preventDefault(); if (policyObj.isAPISpecific) { - const apiPolicyContentPromise = API.getOperationPolicyContent( + const globalPolicyContentPromise = API.getOperationPolicyContent( policyObj.id, api.id, ); - apiPolicyContentPromise - .then((apiPolicyResponse) => { - Utils.forceDownload(apiPolicyResponse); + globalPolicyContentPromise + .then((globalPolicyResponse) => { + Utils.forceDownload(globalPolicyResponse); }) .catch((error) => { console.error(error); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx index be203921d1e..55adb7e9359 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx @@ -34,7 +34,7 @@ import { } from '@material-ui/core'; import { FormattedMessage, useIntl } from 'react-intl'; import { Progress } from 'AppComponents/Shared'; -import { PolicySpec, ApiPolicy, AttachedPolicy, Policy, PolicySpecAttribute } from '../Types'; +import { PolicySpec, GlobalPolicy, AttachedPolicy, Policy, PolicySpecAttribute } from '../Types'; import GlobalPolicyContext from "../GlobalPolicyContext"; const useStyles = makeStyles(theme => ({ @@ -64,7 +64,7 @@ interface GeneralProps { currentFlow: string; target: string; verb: string; - apiPolicy: ApiPolicy; + globalPolicy: GlobalPolicy; policySpec: PolicySpec; handleDrawerClose: () => void; isEditMode: boolean; @@ -76,7 +76,7 @@ const General: FC = ({ currentFlow, target, verb, - apiPolicy, + globalPolicy, policySpec, handleDrawerClose, isEditMode, @@ -106,7 +106,7 @@ const General: FC = ({ } const getValueOfPolicyParam = (policyParamName: string) => { - return apiPolicy.parameters[policyParamName]; + return globalPolicy.parameters[policyParamName]; } /** @@ -132,10 +132,10 @@ const General: FC = ({ }); // Saving field changes to backend - const apiPolicyToSave = {...apiPolicy}; - apiPolicyToSave.parameters = updateCandidates; + const globalPolicyToSave = {...globalPolicy}; + globalPolicyToSave.parameters = updateCandidates; - updateGlobalOperations(apiPolicyToSave, target, verb, currentFlow); + updateGlobalOperations(globalPolicyToSave, target, verb, currentFlow); if (setDroppedPolicy) setDroppedPolicy(null); setSaving(false); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx index 60a04f236dd..9b5778ecdd9 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx @@ -34,7 +34,7 @@ import { Progress } from 'AppComponents/Shared'; import cloneDeep from 'lodash.clonedeep'; import { useHistory, Link } from 'react-router-dom'; import PolicyList from './PolicyList'; -import type { Policy, PolicySpec, ApiLevelPolicy } from '../Types'; +import type { Policy, PolicySpec, GlobalLevelPolicy } from '../Types'; import GatewaySelector from './GatewaySelector'; import { GlobalPolicyContextProvider } from '../GlobalPolicyContext'; import PolicyPanel from './PolicyPanel'; @@ -115,19 +115,20 @@ const Policies: FC = ({ setIsChoreoConnectEnabled(isCCEnabled); } - const initApiLevelPolicy: ApiLevelPolicy = { + const initGlobalLevelPolicy: GlobalLevelPolicy = { request: [], response: [], fault: [], } - const getInitAPILevelPoliciesState = () => { - return initApiLevelPolicy; + const getInitGlobalLevelPoliciesState = () => { + return initGlobalLevelPolicy; }; // As we are reusing 30+ components from the API level policies, we are using the same context provider for both. // Even though name is globalLevelPolicies, in these cases, it will be global level policies. - const [globalLevelPolicies, setGlobalLevelPolicies] = useState(getInitAPILevelPoliciesState()); + const [globalLevelPolicies, + setGlobalLevelPolicies] = useState(getInitGlobalLevelPoliciesState()); /** * Fetches all common policies. @@ -205,7 +206,6 @@ const Policies: FC = ({ return inputResponse; }; - const fetchGlobalPolicyByID = () => { // // hardcoded response console.log("fetching global policy mapping: 'GET' '/gateway-policies/" + {policyID}); @@ -251,7 +251,7 @@ const Policies: FC = ({ } const removeAPIPoliciesForGatewayChange = () => { - setGlobalLevelPolicies(initApiLevelPolicy); + setGlobalLevelPolicies(initGlobalLevelPolicy); } useEffect(() => { @@ -269,10 +269,10 @@ const Policies: FC = ({ * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault */ const deleteGlobalOperation = (uuid: string, target: string, verb: string, currentFlow: string) => { - const newApiLevelPolicies: any = cloneDeep(globalLevelPolicies); - const index = newApiLevelPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); - newApiLevelPolicies[currentFlow].splice(index, 1); - setGlobalLevelPolicies(newApiLevelPolicies); + const newGlobalLevelPolicies: any = cloneDeep(globalLevelPolicies); + const index = newGlobalLevelPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); + newGlobalLevelPolicies[currentFlow].splice(index, 1); + setGlobalLevelPolicies(newGlobalLevelPolicies); } /** @@ -289,8 +289,8 @@ const Policies: FC = ({ const updateGlobalOperations = ( updatedOperation: any, target: string, verb: string, currentFlow: string, ) => { - const newApiLevelPolicies: any = cloneDeep(globalLevelPolicies); - const flowPolicy = (newApiLevelPolicies)[currentFlow].find( + const newGlobalLevelPolicies: any = cloneDeep(globalLevelPolicies); + const flowPolicy = (newGlobalLevelPolicies)[currentFlow].find( (p: any) => p.policyId === updatedOperation.policyId && p.uuid === updatedOperation.uuid, @@ -302,10 +302,10 @@ const Policies: FC = ({ } else { // Add new policy const uuid = uuidv4(); - (newApiLevelPolicies)[currentFlow].push({ ...updatedOperation, uuid } + (newGlobalLevelPolicies)[currentFlow].push({ ...updatedOperation, uuid } ); } - setGlobalLevelPolicies(newApiLevelPolicies); + setGlobalLevelPolicies(newGlobalLevelPolicies); } /** diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx index 37352bb36a4..50c1ebf5f2c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx @@ -35,7 +35,7 @@ import Divider from '@material-ui/core/Divider'; import API from 'AppData/api'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import General from './General'; -import type { PolicySpec, ApiPolicy, AttachedPolicy } from '../Types'; +import type { PolicySpec, GlobalPolicy, AttachedPolicy } from '../Types'; import GlobalPolicyContext from '../GlobalPolicyContext'; const useStyles = makeStyles((theme: Theme) => ({ @@ -105,7 +105,7 @@ const PolicyConfigurationEditDrawer: FC = ({ currentFlow ].find((policy: any) => policy.uuid === policyObj?.uniqueKey); - const apiPolicy: ApiPolicy = operationFlowPolicy || { + const globalPolicy: GlobalPolicy = operationFlowPolicy || { policyName: policyObj?.name, policyId: policyObj?.id, policyVersion: policyObj?.version, @@ -157,7 +157,7 @@ const PolicyConfigurationEditDrawer: FC = ({ target={target} verb={verb} policySpec={policySpec} - apiPolicy={apiPolicy} + globalPolicy={globalPolicy} handleDrawerClose={handleDrawerClose} isEditMode /> diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx index d1bedaf5e6f..70825f946c7 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx @@ -34,7 +34,7 @@ import { Settings, Close } from '@material-ui/icons'; import Divider from '@material-ui/core/Divider'; import { Progress } from 'AppComponents/Shared'; import General from './General'; -import { PolicySpec, ApiPolicy, Policy } from '../Types'; +import { PolicySpec, GlobalPolicy, Policy } from '../Types'; const useStyles = makeStyles((theme: Theme) => ({ drawerPaper: { @@ -90,7 +90,7 @@ const PolicyConfiguringDrawer: FC = ({ return ; } - const apiPolicy: ApiPolicy = { + const globalPolicy: GlobalPolicy = { policyName: policyObj?.name, policyId: policyObj?.id, policyVersion: policyObj?.version, @@ -162,7 +162,7 @@ const PolicyConfiguringDrawer: FC = ({ target={target} verb={verb} policySpec={policySpec} - apiPolicy={apiPolicy} + globalPolicy={globalPolicy} handleDrawerClose={handleDrawerClose} isEditMode={false} /> diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx index 10c81132a92..7bcd46d2556 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx @@ -84,13 +84,13 @@ const SourceDetails: FC = ({ const handlePolicyDownload = () => { if (policyId) { if (isAPISpecific) { - const apiPolicyContentPromise = API.getOperationPolicyContent( + const globalPolicyContentPromise = API.getOperationPolicyContent( policyId, api.id, ); - apiPolicyContentPromise - .then((apiPolicyResponse) => { - Utils.forceDownload(apiPolicyResponse); + globalPolicyContentPromise + .then((globalPolicyResponse) => { + Utils.forceDownload(globalPolicyResponse); }) .catch((error) => { console.error(error); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts index 852c2b3340c..c9574dd8fdf 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts @@ -79,7 +79,7 @@ export type CreatePolicySpec = { policyAttributes: PolicySpecAttribute[]; }; -export type ApiPolicy = { +export type GlobalPolicy = { policyName?: string; policyId?: string; policyVersion?: string; @@ -87,7 +87,7 @@ export type ApiPolicy = { uuid?: string; }; -export type ApiLevelPolicy = { +export type GlobalLevelPolicy = { request?: any[]; response?: any[]; fault?: any[]; From ad4cfd4b6f0a2c0ff9ed275a8826a5aa4f535f29 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 8 Nov 2023 16:20:11 +0530 Subject: [PATCH 065/102] Improve the code readability --- .../Policies/AttachedPolicyCard.tsx | 2 - .../Policies/AttachedPolicyList.tsx | 2 - .../Policies/GlobalComponents/General.tsx | 16 ++-- .../Policies/GlobalComponents/Policies.tsx | 90 +++++-------------- .../PolicyConfigurationEditDrawer.tsx | 2 +- .../PolicyConfiguringDrawer.tsx | 2 +- .../Policies/components/FlowArrow.tsx | 5 +- 7 files changed, 37 insertions(+), 82 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx index 0dc490094e4..7551b330aae 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx @@ -73,8 +73,6 @@ const AttachedPolicyCard: FC = ({ setCurrentPolicyList(filteredList); deleteGlobalOperation( policyToDelete?.uniqueKey, - target, - verb, currentFlow, ); event.stopPropagation(); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx index ce4f1f414ff..2cc56749dcd 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx @@ -86,8 +86,6 @@ const AttachedPolicyList: FC = ({ rearrangeGlobalOperations( oldIndex, newIndex, - target, - verb, currentFlow, ); } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx index 55adb7e9359..a4a626b2fc1 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx @@ -70,12 +70,16 @@ interface GeneralProps { isEditMode: boolean; } +/** + * This component renders the form of adding a global policy as a global level policy. + * This is used inside the PolicyConfigurationEditDrawer component. + * @param {GeneralProps} props The props passed to the component. + * @returns {TSX} Returns the JSX element. + */ const General: FC = ({ policyObj, setDroppedPolicy, currentFlow, - target, - verb, globalPolicy, policySpec, handleDrawerClose, @@ -110,8 +114,9 @@ const General: FC = ({ } /** - * This function is triggered when the form is submitted for save - * @param {React.FormEvent} event Form submit event + * This function is triggered when the form is submitted for save. + * This handle the dynamic nature of the form, where the form fields are generated based on the policy spec. + * @param {React.FormEvent} event Form submit event. */ const submitForm = async (event: React.FormEvent) => { event.preventDefault(); @@ -131,11 +136,10 @@ const General: FC = ({ } }); - // Saving field changes to backend const globalPolicyToSave = {...globalPolicy}; globalPolicyToSave.parameters = updateCandidates; - updateGlobalOperations(globalPolicyToSave, target, verb, currentFlow); + updateGlobalOperations(globalPolicyToSave, currentFlow); if (setDroppedPolicy) setDroppedPolicy(null); setSaving(false); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx index 9b5778ecdd9..cf6f923c217 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx @@ -40,25 +40,7 @@ import { GlobalPolicyContextProvider } from '../GlobalPolicyContext'; import PolicyPanel from './PolicyPanel'; import { uuidv4 } from '../Utils'; -const Configurations = require('Config'); - const useStyles = makeStyles((theme) => ({ - gridItem: { - display: 'flex', - width: '100%', - }, - ccTypography: { - paddingLeft: '10px', - marginTop: '20px', - }, - flowTabs: { - '& button': { - minWidth: 50, - }, - }, - flowTab: { - fontSize: 'smaller', - }, textField: { backgroundColor: 'white', }, @@ -88,8 +70,7 @@ interface PolicyProps { } /** - * Renders the policy management page. - * This is the page which is used to add global policies. + * Renders the Global Policy management page. * @param {boolean} isCreateNew This value is true if form is for create new and false for edit. * @param {string} policyID This value is to indentify the policy (Null if creating a new one). * @returns {TSX} Policy management page to render. @@ -104,34 +85,30 @@ const Policies: FC = ({ const [policies, setPolicies] = useState(null); const [allPolicies, setAllPolicies] = useState(null); const [isChoreoConnectEnabled, setIsChoreoConnectEnabled] = useState(false); - const { showMultiVersionPolicies } = Configurations.apis; const [name, setName] = useState(''); const [description, setDescription] = useState(''); const [appliedGatewayLabels, setAppliedGatewayLabels] = useState([]); - // If Choreo Connect radio button is selected in GatewaySelector, it will pass - // value as true to render other UI changes specific to the Choreo Connect. + // If Choreo Connect radio button is selected in GatewaySelector, it will be true + // to render other UI changes specific to the Choreo Connect. const setIsChangedToCCGatewayType = (isCCEnabled: boolean) => { setIsChoreoConnectEnabled(isCCEnabled); } + // Global Level Policy - global level policy mapping. It will be initially empty. const initGlobalLevelPolicy: GlobalLevelPolicy = { request: [], response: [], fault: [], } - const getInitGlobalLevelPoliciesState = () => { return initGlobalLevelPolicy; }; - - // As we are reusing 30+ components from the API level policies, we are using the same context provider for both. - // Even though name is globalLevelPolicies, in these cases, it will be global level policies. const [globalLevelPolicies, setGlobalLevelPolicies] = useState(getInitGlobalLevelPoliciesState()); /** - * Fetches all common policies. + * Fetches all common policies to front-end. * Sets the allPolicies state: this allPolicies state is used to get policies from any given policy ID. * Sets the policies state: policy state is used to display the available policies that are draggable. */ @@ -140,37 +117,24 @@ const Policies: FC = ({ Promise.all([commonPoliciesPromise]).then((response) => { const [commonPoliciesResponse] = response; const commonPolicies = commonPoliciesResponse.body.list; - const mergedList = [...commonPolicies]; - - // Get all common policies and API specific policies - setAllPolicies(mergedList); + setAllPolicies(commonPolicies); - let unionByPolicyDisplayName; - if (showMultiVersionPolicies) { - // Get the union of policies depending on the policy display name and version - unionByPolicyDisplayName = [...mergedList - .reduce((map, obj) => map.set(obj.name + obj.version, obj), new Map()).values()]; - } else { - // Get the union of policies depending on the policy display name - unionByPolicyDisplayName = [...mergedList - .reduce((map, obj) => map.set(obj.name, obj), new Map()).values()]; - } - unionByPolicyDisplayName.sort( + // Sort the policies list + commonPolicies.sort( (a: Policy, b: Policy) => a.name.localeCompare(b.name)) + // Filter the policies based on the gateway type let filteredByGatewayTypeList = null; if (!isChoreoConnectEnabled) { // Get synpase gateway supported policies - filteredByGatewayTypeList = unionByPolicyDisplayName.filter( + filteredByGatewayTypeList = commonPolicies.filter( (policy: Policy) => policy.supportedGateways.includes('Synapse')); } else { // Get CC gateway supported policies - filteredByGatewayTypeList = unionByPolicyDisplayName.filter( + filteredByGatewayTypeList = commonPolicies.filter( (policy: Policy) => policy.supportedGateways.includes('ChoreoConnect')); } - setPolicies(filteredByGatewayTypeList); - }).catch((error) => { console.error(error); Alert.error('Error occurred while retrieving the policy list'); @@ -263,12 +227,10 @@ const Policies: FC = ({ /** * Triggers as we click delete icon in a drag`n`droped the policy. - * @param {string} uuid operation uuid - * @param {string} target target that needs to be updated - * @param {string} verb verb of the operation that neeeds to be updated - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault + * @param {string} uuid operation uuid. + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault. */ - const deleteGlobalOperation = (uuid: string, target: string, verb: string, currentFlow: string) => { + const deleteGlobalOperation = (uuid: string, currentFlow: string) => { const newGlobalLevelPolicies: any = cloneDeep(globalLevelPolicies); const index = newGlobalLevelPolicies[currentFlow].map((p: any) => p.uuid).indexOf(uuid); newGlobalLevelPolicies[currentFlow].splice(index, 1); @@ -282,12 +244,10 @@ const Policies: FC = ({ * policyId: <>, * policyName: <>, * policyVersion: <>. - * @param {string} target Target. - * @param {string} verb Verb. * @param {string} currentFlow Folow request/response/fault. */ const updateGlobalOperations = ( - updatedOperation: any, target: string, verb: string, currentFlow: string, + updatedOperation: any, currentFlow: string, ) => { const newGlobalLevelPolicies: any = cloneDeep(globalLevelPolicies); const flowPolicy = (newGlobalLevelPolicies)[currentFlow].find( @@ -309,15 +269,13 @@ const Policies: FC = ({ } /** - * Function to rearrange the API Operation ordering - * @param {string} oldIndex original index of the policy - * @param {string} newIndex new index of the policy - * @param {string} target target that needs to be updated - * @param {string} verb verb of the operation that neeeds to be updated - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault + * Function to rearrange the API Operation ordering. + * @param {string} oldIndex original index of the policy. + * @param {string} newIndex new index of the policy. + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault. */ const rearrangeGlobalOperations = ( - oldIndex: number, newIndex: number, target: string, verb: string, currentFlow: string, + oldIndex: number, newIndex: number, currentFlow: string, ) => { const newAPIPolicies: any = cloneDeep(globalLevelPolicies); const policyArray = newAPIPolicies[currentFlow]; @@ -326,8 +284,7 @@ const Policies: FC = ({ }; /** - * Function to save a policy mapping - * + * Function to save a policy mapping. */ const save = () => { setLoading(true); @@ -349,8 +306,7 @@ const Policies: FC = ({ } /** - * Function to update a policy mapping - * + * Function to update a policy mapping. */ const update = () => { setLoading(true); @@ -372,7 +328,7 @@ const Policies: FC = ({ } /** - * To memoize the value passed into GlobalPolicyContextProvider + * To memoize the value passed into GlobalPolicyContextProvider. */ const providerValue = useMemo( () => ({ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx index 50c1ebf5f2c..cb54956ec07 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx @@ -62,7 +62,7 @@ interface PolicyConfigurationEditDrawerProps { } /** - * Renders the policy configuration edit drawer. + * Renders the policy configuration edit drawer. (Right drawer for editing an added policy). * @param {JSON} props Input props from parent components. * @returns {TSX} Right drawer for policy configuration. */ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx index 70825f946c7..a74dc405d8f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx @@ -59,7 +59,7 @@ interface PolicyConfiguringDrawerProps { } /** - * Renders the policy configuring drawer. + * Renders the policy configuring drawer. (Right drawer for adding a policy) * @param {JSON} props Input props from parent components. * @returns {TSX} Right drawer for policy configuration. */ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx index bdc249d8838..69d242d31ef 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx @@ -24,10 +24,9 @@ interface FlowArrowProps { } /** - * Tab panel component to render content of a particular tab. - * Renders the available policy list under the relevant flow related tab (i.e. request, response or fault). + * Flow Arrow component. * @param {JSON} props Input props from parent components. - * @returns {TSX} Tab panel. + * @returns {TSX} Flow Arrow component. */ const FlowArrow: FC = ({ arrowDirection }) => { return ( From 3b406ccaa3430202d7e9389108ff5fd98ad018a1 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 9 Nov 2023 12:44:30 +0530 Subject: [PATCH 066/102] Removed unwanted components from Global Policies --- .../GlobalPolicies/Policies/CreatePolicy.tsx | 111 -------------- .../GlobalPolicies/Policies/DeletePolicy.tsx | 82 ---------- .../Policies/DraggablePolicyCard.tsx | 8 +- .../GlobalComponents/PoliciesSection.tsx | 2 +- .../Policies/GlobalComponents/PolicyList.tsx | 11 -- .../Policies/GlobalComponents/PolicyPanel.tsx | 4 +- .../Policies/PoliciesExpansion.tsx | 1 + .../GlobalPolicies/Policies/ViewPolicy.tsx | 27 +--- .../Shared/PoliciesUI/CreatePolicy.tsx | 141 ------------------ .../Shared/PoliciesUI/DeletePolicy.tsx | 117 --------------- 10 files changed, 12 insertions(+), 492 deletions(-) delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx deleted file mode 100644 index c9f6a894639..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/CreatePolicy.tsx +++ /dev/null @@ -1,111 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { useContext, useState } from 'react'; -import API from 'AppData/api.js'; -import Alert from 'AppComponents/Shared/Alert'; -import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; -import CreatePolicyShared from 'AppComponents/Shared/PoliciesUI/CreatePolicy'; -import type { CreatePolicySpec } from './Types'; -import PolicyCreateForm from './PolicyForm/PolicyCreateForm'; - -interface CreatePolicyProps { - handleDialogClose: () => void; - dialogOpen: boolean; - fetchPolicies: () => void; -} - -/** - * Renders the UI to create a new policy. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy create UI. - */ -const CreatePolicy: React.FC = ({ - handleDialogClose, - dialogOpen, - fetchPolicies, -}) => { - const { api } = useContext(ApiContext); - const [saving, setSaving] = useState(false); - const [synapsePolicyDefinitionFile, setSynapsePolicyDefinitionFile] = useState([]); - const [ccPolicyDefinitionFile, setCcPolicyDefinitionFile] = useState([]); - - const savePolicy = ( - policySpecContent: CreatePolicySpec, - synapsePolicyDefinition: any, - ccPolicyDefinition: any, - ) => { - setSaving(true); - const promisedCommonPolicyAdd = API.addOperationPolicy( - policySpecContent, - api.id, - synapsePolicyDefinition, - ccPolicyDefinition, - ); - promisedCommonPolicyAdd - .then(() => { - Alert.info('Policy created successfully!'); - setSynapsePolicyDefinitionFile([]); - setCcPolicyDefinitionFile([]); - handleDialogClose(); - fetchPolicies(); - }) - .catch((error) => { - handleDialogClose(); - console.error(error); - Alert.error('Something went wrong while creating policy'); - }) - .finally(() => { - setSaving(false); - }); - }; - - const onSave = (policySpecification: CreatePolicySpec) => { - const synapseFile = synapsePolicyDefinitionFile.length !== 0 ? synapsePolicyDefinitionFile : null; - const ccFile = ccPolicyDefinitionFile.length !== 0 ? ccPolicyDefinitionFile : null; - savePolicy( - policySpecification, - synapseFile, - ccFile, - ); - handleDialogClose(); - }; - - const stopPropagation = ( - e: React.MouseEvent, - ) => { - e.stopPropagation(); - }; - - return ( - - ); -}; - -export default CreatePolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx deleted file mode 100644 index 77c581a622a..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DeletePolicy.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { useState, FC, useContext } from 'react'; -import Alert from 'AppComponents/Shared/Alert'; -import API from 'AppData/api'; -import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; -import DeletePolicyShared from 'AppComponents/Shared/PoliciesUI/DeletePolicy'; - -interface DeletePolicyProps { - policyId: string; - policyName: string; - fetchPolicies: () => void; -} - -/** - * Renders the policy configuring drawer. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Right drawer for policy configuration. - */ -const DeletePolicy: FC = ({ - policyId, - policyName, - fetchPolicies, -}) => { - const { api } = useContext(ApiContext); - const [open, setOpen] = useState(false); - const setOpenLocal = setOpen; // Need to copy this to access inside the promise.then - const toggleOpen = () => { - setOpen(!open); - }; - - const handleDelete = () => { - const promisedCommonPolicyDelete = API.deleteOperationPolicy( - api.id, - policyId, - ); - promisedCommonPolicyDelete - .then(() => { - Alert.info(`${policyName} policy deleted successfully!`); - setOpenLocal(!open); - fetchPolicies(); - }) - .catch((error) => { - console.error(error); - Alert.error('Error occurred while deleteting policy'); - setOpenLocal(!open); - }); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - ); -}; - -export default DeletePolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx index e902624384b..8f0e97d947c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx @@ -20,7 +20,6 @@ import React, { useState } from 'react'; import DraggablePolicyCardShared from 'AppComponents/Shared/PoliciesUI/DraggablePolicyCard'; import type { Policy } from './Types'; import ViewPolicy from './ViewPolicy'; -import DeletePolicy from './DeletePolicy'; interface DraggablePolicyCardProps { policyObj: Policy; @@ -52,6 +51,11 @@ const DraggablePolicyCard: React.FC = ({ setDialogOpen(false); }; + // If the policy is local to the API, we don't need to render the draggable card since this is global policies. + if (isLocalToAPI) { + return null; + } + return ( = ({ dialogOpen={dialogOpen} handleViewPolicyClose={handleViewPolicyClose} ViewPolicy={ViewPolicy} - DeletePolicy={DeletePolicy} + DeletePolicy={null} /> ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx index 1809d8b71f5..6de0ccbde07 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx @@ -29,7 +29,7 @@ interface PolicySectionProps { } /** - * Renders the policy management page. + * Renders the policy management page (Basically the PoliciesExpansion component). * @returns {TSX} Policy management page to render. */ const PoliciesSection: FC = ({ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx index 1d1706e00a4..45d3ac74133 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx @@ -29,7 +29,6 @@ import { makeStyles } from '@material-ui/core'; import CONSTS from 'AppData/Constants'; import type { Policy } from '../Types'; import TabPanel from '../Components/TabPanel'; -import CreatePolicy from '../CreatePolicy'; const useStyles = makeStyles(() => ({ flowTabs: { @@ -65,13 +64,8 @@ interface PolicyListPorps { const PolicyList: FC = ({policyList, fetchPolicies, isChoreoConnectEnabled}) => { const classes = useStyles(); const [selectedTab, setSelectedTab] = useState(0); // Request flow related tab is active by default - const [dialogOpen, setDialogOpen] = React.useState(false); let gatewayType = CONSTS.GATEWAY_TYPE.synapse; - const handleAddPolicyClose = () => { - setDialogOpen(false); - }; - if (isChoreoConnectEnabled) { gatewayType = CONSTS.GATEWAY_TYPE.choreoConnect; } @@ -163,11 +157,6 @@ const PolicyList: FC = ({policyList, fetchPolicies, isChoreoCon - ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx index aad2e226ec2..bd709cd5f76 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx @@ -29,8 +29,8 @@ interface PolicyPanelProps { } /** - * Tab panel component to render content of a particular tab. - * Renders the policy section under the relevant tab (i.e. API Level or Operation Level). + * Renders the policy section of the policy management page. + * This inculdes the dropping zone. The policies are rendered in the PoliciesSection component. * @param {JSON} props Input props from parent components. * @returns {TSX} Tab panel. */ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx index aa478b377d3..167bdeae794 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx @@ -66,6 +66,7 @@ const PoliciesExpansion: FC = ({ const { globalLevelPolicies } = useContext(GlobalPolicyContext); + // This is where the applicable (droppable) flows are set for each policy. useEffect(() => { const requestList = []; const responseList = []; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx index 67628ce31d8..d872ba14fe9 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx @@ -16,11 +16,10 @@ * under the License. */ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Alert from 'AppComponents/Shared/Alert'; import { Progress } from 'AppComponents/Shared'; import API from 'AppData/api'; -import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import ViewPolicyShared from 'AppComponents/Shared/PoliciesUI/ViewPolicy'; import type { Policy, PolicySpec } from './Types'; import PolicyViewForm from './PolicyForm/PolicyViewForm'; @@ -43,33 +42,11 @@ const ViewPolicy: React.FC = ({ policyObj, isLocalToAPI, }) => { - const { api } = useContext(ApiContext); const [policySpec, setPolicySpec] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { - if (dialogOpen && isLocalToAPI) { - setLoading(true); - const promisedPolicyGet = API.getOperationPolicy( - policyObj.id, - api.id, - ); - promisedPolicyGet - .then((response) => { - setPolicySpec(response.body); - }) - .catch((error) => { - console.error(error); - if (error.response) { - Alert.error(error.response.body.description); - } else { - Alert.error('Something went wrong while retrieving policy details'); - } - }) - .finally(() => { - setLoading(false); - }); - } else if (dialogOpen && !isLocalToAPI) { + if (dialogOpen && !isLocalToAPI) { const promisedCommonPolicyGet = API.getCommonOperationPolicy( policyObj.id, ); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx deleted file mode 100644 index e6affbc1307..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/CreatePolicy.tsx +++ /dev/null @@ -1,141 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React from 'react'; -import { Typography, makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import { Link } from 'react-router-dom'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Icon from '@material-ui/core/Icon'; -import IconButton from '@material-ui/core/IconButton'; -import LaunchIcon from '@material-ui/icons/Launch'; -import { FormattedMessage } from 'react-intl'; -import CONSTS from 'AppData/Constants'; -import type { CreatePolicySpec } from './Types'; - -const useStyles = makeStyles((theme: Theme) => ({ - link: { - color: theme.palette.primary.dark, - marginLeft: theme.spacing(2), - display: 'inline', - }, -})); - -interface CreatePolicySharedProps { - handleDialogClose: () => void; - dialogOpen: boolean; - stopPropagation: any; - onSave: (policySpecification: CreatePolicySpec) => void; - synapsePolicyDefinitionFile: any[]; - setSynapsePolicyDefinitionFile: any; - ccPolicyDefinitionFile: any[]; - setCcPolicyDefinitionFile: any; - saving: any; - PolicyCreateForm: any; -} - -const CreatePolicyShared: React.FC = ({ - handleDialogClose, - dialogOpen, - stopPropagation, - onSave, - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - saving, - PolicyCreateForm -}) => { - const classes = useStyles(); - - return ( - <> - - - - - - - - - - close - - - - - - - - - - - - - - Want to create a common policy that will be visible to all APIs instead? - - - - - - - ); -} - -export default CreatePolicyShared; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx deleted file mode 100644 index cb9d767f9f8..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DeletePolicy.tsx +++ /dev/null @@ -1,117 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { FormattedMessage } from 'react-intl'; -import DeleteIcon from '@material-ui/icons/Delete'; -import IconButton from '@material-ui/core/IconButton'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Button from '@material-ui/core/Button'; -import DialogContent from '@material-ui/core/DialogContent'; -import Tooltip from '@material-ui/core/Tooltip'; - -interface DeletePolicySharedProps { - policyId: string; - policyName: string; - toggleOpen: () => void; - handleClose: () => void; - open: boolean; - handleDelete: () => void; -} - -const DeletePolicyShared: FC = ({ - policyId, - policyName, - toggleOpen, - handleClose, - open, - handleDelete -}) => { - return ( - <> - - } - > - - - - - { - e.preventDefault(); - e.stopPropagation(); - }} - open={open} - onClose={handleClose} - > - - - - - - - - - - - - - - - ); -} - -export default DeletePolicyShared; From e65da158af5776f55457d760b4196a6722f989a7 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 9 Nov 2023 15:02:56 +0530 Subject: [PATCH 067/102] Unique PolicyForm components for Global Policies --- .../Policies/PolicyForm/GeneralDetails.tsx | 337 +++++++--- .../Policies/PolicyForm/PolicyAttributes.tsx | 569 ++++++++++++---- .../Policies/PolicyForm/PolicyCreateForm.tsx | 280 -------- .../Policies/PolicyForm/PolicyViewForm.tsx | 56 +- .../Policies/PolicyForm/SourceDetails.tsx | 256 ++++--- .../Shared/PoliciesUI/GeneralDetails.tsx | 362 ---------- .../Shared/PoliciesUI/PolicyAttributes.tsx | 627 ------------------ .../Shared/PoliciesUI/PolicyCreateForm.tsx | 140 ---- .../Shared/PoliciesUI/SourceDetails.tsx | 270 -------- 9 files changed, 903 insertions(+), 1994 deletions(-) delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx index 45749b295d8..052ff51c833 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx @@ -17,8 +17,27 @@ */ import React, { FC } from 'react'; -import GeneralDetailsShared from 'AppComponents/Shared/PoliciesUI/GeneralDetails'; -import { ACTIONS } from './PolicyCreateForm'; +import { makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import InputAdornment from '@material-ui/core/InputAdornment'; +import TextField from '@material-ui/core/TextField'; +import Typography from '@material-ui/core/Typography'; +import { FormattedMessage } from 'react-intl'; +import FormControl from '@material-ui/core/FormControl'; + +const useStyles = makeStyles((theme: Theme) => ({ + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, + formGroup: { + display: 'flex', + flexDirection: 'row', + }, +})); interface GeneralDetailsProps { displayName: string | null; @@ -26,8 +45,6 @@ interface GeneralDetailsProps { description: string; applicableFlows: string[]; supportedApiTypes: string[]; - dispatch?: React.Dispatch; - isViewMode: boolean; } /** @@ -41,81 +58,249 @@ const GeneralDetails: FC = ({ description, applicableFlows, supportedApiTypes, - dispatch, - isViewMode, }) => { - // Validates whether atleast one flow (i.e. request, response or fault) is selected - // True if none of the flows are selected. - const applicableFlowsError = applicableFlows.length === 0; - - // Validates whether atleast one Api Type (i.e. HTTP, SOAP or SOAPTOREST) is selected - // True if none of the API types are selected. - const supportedApiTypesError = supportedApiTypes.length === 0; - - // Name validation - const nameError = displayName === ''; - - // Version validation - const versionError = version === ''; - - /** - * Function to handle text field inputs - * @param {React.ChangeEvent} event event - */ - const handleInputChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_METADATA, - field: event.target.name, - value: event.target.value, - }); - } - }; - - /** - * Function to handle applicable flows related checkbox changes - * @param {React.ChangeEvent} event event - */ - const handleChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_APPLICALBLE_FLOWS, - name: event.target.name, - checked: event.target.checked, - }); - } - }; - - /** - * Function to handle supported Api Type related checkbox changes - * @param {React.ChangeEvent} event event - */ - const handleApiTypeChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_SUPPORTED_API_TYPES, - name: event.target.name, - checked: event.target.checked, - }); - } - }; + const classes = useStyles(); return ( - + + + + + + + + + + + + + + + } + margin='dense' + variant='outlined' + value={displayName} + inputProps={{ + readOnly: true, + style: { cursor: 'auto' }, + }} + /> + + + + } + margin='dense' + variant='outlined' + value={ + version ? ( + version.replace('v', '') + ) : ( + version + ) + } + inputProps={{ + readOnly: true, + style: { cursor: 'auto' }, + startAdornment: v + }} + /> + + + + } + helperText={ + + } + fullWidth + margin='dense' + variant='outlined' + value={description} + inputProps={{ + readOnly: true, + style: { cursor: 'auto' }, + }} + /> + + + + * + + + + + + } + label='Request' + data-testid='request-flow' + /> + + } + label='Response' + data-testid='response-flow' + /> + + } + label='Fault' + data-testid='fault-flow' + /> + + + + + + + + * + + + + + + } + label='HTTP' + data-testid='http-type' + /> + + } + label='SOAP' + data-testid='soap-type' + /> + + } + label='SOAPTOREST' + data-testid='soaptorest-flow' + /> + + + + + + + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx index df56b02a4b8..4b685d08653 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx @@ -17,15 +17,57 @@ */ import React, { FC, useState, } from 'react'; -import { useIntl } from 'react-intl'; -import PolicyAttributesShared from 'AppComponents/Shared/PoliciesUI/PolicyAttributes'; +import { makeStyles, Theme } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import TextField from '@material-ui/core/TextField'; +import Grid from '@material-ui/core/Grid'; +import Popover from '@material-ui/core/Popover'; +import Select from '@material-ui/core/Select'; +import FormControl from '@material-ui/core/FormControl'; +import InputLabel from '@material-ui/core/InputLabel'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import PriorityHighOutlined from '@material-ui/icons/PriorityHighOutlined'; +import { FormattedMessage } from 'react-intl'; +import Tooltip from '@material-ui/core/Tooltip'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import SubjectOutlinedIcon from '@material-ui/icons/SubjectOutlined'; +import FormatListBulletedOutlinedIcon from '@material-ui/icons/FormatListBulletedOutlined'; +import DeleteIcon from '@material-ui/icons/Delete'; import { PolicyAttribute } from './Types'; -import { ACTIONS } from './PolicyCreateForm'; + +const useStyles = makeStyles((theme: Theme) => ({ + attributeProperty: { + marginLeft: theme.spacing(0.5), + marginRight: theme.spacing(0.5), + }, + formControlSelect: { + marginTop: theme.spacing(2), + }, + selectRoot: { + padding: '11.5px 14px', + width: 100, + }, + buttonIcon: { + marginRight: theme.spacing(1), + }, + requiredToggleButton: { + height: '37.28px', + width: '37.28px', + '&.Mui-selected, &.Mui-selected:hover': { + color: 'white', + backgroundColor: theme.palette.primary.main, + } + }, + toggleButton: { + height: '37.28px', + width: '37.28px', + }, +})); interface PolicyAttributesProps { policyAttributes: PolicyAttribute[]; - dispatch?: React.Dispatch; - isViewMode: boolean; } /** @@ -33,127 +75,13 @@ interface PolicyAttributesProps { * @param {JSON} props Input props from parent components. * @returns {TSX} Policy attributes UI. */ -const PolicyAttributes: FC = ({ - policyAttributes, dispatch, isViewMode -}) => { - const intl = useIntl(); +const PolicyAttributes: FC = ({policyAttributes}) => { + const classes = useStyles(); const [descriptionAnchorEl, setDescriptionAnchorEl] = useState(null); const [valuePropertiesAnchorEl, setValuePropertiesAnchorEl] = useState(null); const [openedDescriptionPopoverId, setOpenedDescriptionPopoverId] = useState(null); const [openedValuesPopoverId, setOpenedValuesPopoverId] = useState(null); - const addNewPolicyAttribute = () => { - if (dispatch) { - dispatch({ type: ACTIONS.ADD_POLICY_ATTRIBUTE }); - } - } - - const getAttributeFormError = (attribute: PolicyAttribute, fieldName: string) => { - let error = ''; - switch(fieldName) { - case 'name': { - if (attribute.name === '') { - error = intl.formatMessage({ - id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.name.required.error', - defaultMessage: 'Name is Empty', - }); - } - return error; - } - case 'displayName': { - if (attribute.displayName === '') { - error = intl.formatMessage({ - id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.displayName.required.error', - defaultMessage: 'Display Name is Empty', - }); - } - return error; - } - case 'validationRegex': { - const regex = attribute.validationRegex; - if (regex && regex !== '') { - try { - // eslint-disable-next-line no-new - new RegExp(regex); - } catch(e) { - error = intl.formatMessage({ - id: 'AApis.Details.Policies.PolicyForm.PolicyAttributes.validationRegex.invalid', - defaultMessage: 'Provided regular expression is invalid', - }) - } - } - return error; - } - case 'defaultValue': { - const defaultVal = attribute.defaultValue; - const regex = attribute.validationRegex; - if (defaultVal && defaultVal !== '' && regex && regex !== '') { - try { - if (!new RegExp(regex).test(defaultVal)) { - error = intl.formatMessage({ - id: 'Apis.Details.Policies.PolicyForm.PolicyAttributes.defaultValue.validation.error', - defaultMessage: 'Please enter a valid input', - }); - } - } catch(e) { - console.error(e); - } - } - return error; - } - default: - return error; - } - } - - /** - * Function to handle form inputs - * @param {any} event Event - * @param {string} id Policy Attribute ID - */ - const handleAttributeChange = (event: any, id: string) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, - id, - field: event.target.name, - value: event.target.value - }); - } - } - - /** - * Function to handle toggle of required attribute - * @param {boolean} currentState Current state of the required attrbute before toggle - * @param {string} id Policy Attribute ID - */ - const handleToggle = (currentState: boolean, id: string) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, - id, - field: 'required', - value: !currentState, - }); - } - } - - /** - * Function to handle allowed values attribute - * @param {React.ChangeEvent} event Event - * @param {string} id Policy Attribute ID - */ - const handleAllowedValues = (event: React.ChangeEvent, id: string) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_POLICY_ATTRIBUTE, - id, - field: event.target.name, - value: event.target.value.split(/[,][\s]*/) - }); - } - } - // Description toggle button related actions const handleDescriptionToggle = (event: React.FormEvent, id: string) => { setOpenedDescriptionPopoverId(id); @@ -175,25 +103,386 @@ const PolicyAttributes: FC = ({ }; return ( - + <> + + + + + + + + + + + {policyAttributes.length === 0 && ( + + + + + + + + + + )} + + + + + {policyAttributes.map((attribute: PolicyAttribute) => ( + + + + + + } + margin='dense' + value={attribute.name} + data-testid='add-policy-attribute-name-btn' + variant='outlined' + inputProps={{ + readOnly: true, + style: {cursor: 'auto'}, + }} + /> + + + + } + margin='dense' + value={attribute.displayName} + data-testid='add-policy-attribute-display-name-btn' + variant='outlined' + inputProps={{ + readOnly: true, + style: {cursor: 'auto'}, + }} + /> + + + + {/* Attribute required or not */} + + } + arrow + > + + + + + + {/* Attribute description */} + + } + arrow + > + handleDescriptionToggle(e, attribute.id)} + > + + + + + + + } + margin='dense' + value={attribute.description} + variant='outlined' + inputProps={{ + readOnly: true, + style: {cursor: 'auto'}, + }} + /> + + + + {/* Attribute values */} + + } + arrow + > + handleValuePropertiesToggle(e, attribute.id)} + > + + + + + + + + + + + + + {/* Type */} + + Type + + Attribute Type + + + {/* Allowed Values */} + {attribute.type.toLowerCase() === 'enum' && ( + + + } + margin='dense' + variant='outlined' + value={attribute.allowedValues} + helperText={ + + } + inputProps={{ + readOnly: true, + style: {cursor: 'auto'}, + }} + /> + + )} + + {/* Validation Regex */} + + + } + margin='dense' + value={attribute.validationRegex} + variant='outlined' + inputProps={{ + readOnly: true, + style: {cursor: 'auto'}, + }} + /> + + + {/* Default Value */} + + + } + margin='dense' + value={attribute.defaultValue} + variant='outlined' + inputProps={{ + readOnly: true, + style: {cursor: 'auto'}, + }} + /> + + + + + + {/* Attribute delete */} + + } + arrow + > + + + + + + + + + + ))} + + + ); } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx deleted file mode 100644 index e3729e2d3e5..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyCreateForm.tsx +++ /dev/null @@ -1,280 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC, useEffect, useReducer, useState } from 'react'; -import CONSTS from 'AppData/Constants'; -import PolicyCreateFormShared from 'AppComponents/Shared/PoliciesUI/PolicyCreateForm'; -import type { CreatePolicySpec } from '../Types'; -import type { NewPolicyState, PolicyAttribute } from './Types'; -import PolicyAttributes from './PolicyAttributes'; -import uuidv4 from '../Utils'; -import GeneralDetails from './GeneralDetails'; -import SourceDetails from './SourceDetails'; - -export const ACTIONS = { - UPDATE_POLICY_METADATA: 'updatePolicyMetadata', - UPDATE_APPLICALBLE_FLOWS: 'updateApplicableFlows', - UPDATE_SUPPORTED_API_TYPES: 'updateSupportedApiTypes', - UPDATE_SUPPORTED_GATEWAYS: 'updateSupportedGateways', - ADD_POLICY_ATTRIBUTE: 'addPolicyAttribute', - UPDATE_POLICY_ATTRIBUTE: 'updatePolicyAttribute', - DELETE_POLICY_ATTRIBUTE: 'deletePolicyAttribute', -}; - -/** - * Reducer to manage policy creation related logic - * @param {NewPolicyState} state State - * @param {any} action Action - * @returns {Promise} Promised state - */ -function policyReducer(state: NewPolicyState, action: any) { - switch (action.type) { - case ACTIONS.UPDATE_POLICY_METADATA: { - return { - ...state, - [action.field]: action.value, - }; - } - case ACTIONS.UPDATE_APPLICALBLE_FLOWS: { - return { - ...state, - applicableFlows: action.checked - ? [...state.applicableFlows, action.name] - : state.applicableFlows.filter( - (flow: string) => flow !== action.name, - ), - }; - } - case ACTIONS.UPDATE_SUPPORTED_API_TYPES: { - return { - ...state, - supportedApiTypes: action.checked - ? [...state.supportedApiTypes, action.name] - : state.supportedApiTypes.filter( - (apiType: string) => apiType !== action.name, - ), - }; - } - case ACTIONS.UPDATE_SUPPORTED_GATEWAYS: { - return { - ...state, - supportedGateways: action.checked - ? [...state.supportedGateways, action.name] - : state.supportedGateways.filter( - (gateway: string) => gateway !== action.name, - ), - }; - } - case ACTIONS.ADD_POLICY_ATTRIBUTE: { - return { - ...state, - policyAttributes: [ - ...state.policyAttributes, - { - id: uuidv4(), - name: null, - displayName: null, - version: null, - description: '', - required: false, - type: 'String', - validationRegex: null, - defaultValue: null, - allowedValues: [], - }, - ], - }; - } - case ACTIONS.UPDATE_POLICY_ATTRIBUTE: { - return { - ...state, - policyAttributes: state.policyAttributes.map( - (policyAttribute: PolicyAttribute) => - policyAttribute.id === action.id - ? { - ...policyAttribute, - [action.field]: action.value, - } - : policyAttribute, - ), - }; - } - case ACTIONS.DELETE_POLICY_ATTRIBUTE: { - return { - ...state, - policyAttributes: state.policyAttributes.filter( - (policyAttribute: PolicyAttribute) => - policyAttribute.id !== action.id, - ), - }; - } - default: - return state; - } -} - -interface PolicyCreateFormProps { - onSave: (policySpecification: CreatePolicySpec) => void; - synapsePolicyDefinitionFile: any[]; - setSynapsePolicyDefinitionFile: React.Dispatch>; - ccPolicyDefinitionFile: any[]; - setCcPolicyDefinitionFile: React.Dispatch>; - onCancel: () => void; - saving: boolean; -} - -/** - * Renders the policy create form. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Right drawer for policy configuration. - */ -const PolicyCreateForm: FC = ({ - onSave, - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - onCancel, - saving, -}) => { - const initialState: NewPolicyState = { - displayName: null, - version: null, - description: '', - applicableFlows: ['request', 'response', 'fault'], - supportedApiTypes: ['HTTP'], - supportedGateways: ['Synapse'], - policyAttributes: [], - }; - const [state, dispatch] = useReducer(policyReducer, initialState); - const [isFormDisabled, setIsFormDisabled] = useState(false); - - useEffect(() => { - let hasError = false; - - // Display name current state validation - if (!state.displayName || state.displayName === '') hasError = true; - - // Display name current state validation - if (!state.version || state.version === '') hasError = true; - - // Applicable flows current state validation - if (state.applicableFlows.length === 0) hasError = true; - - // Applicable api types current state validation - if (state.supportedApiTypes.length === 0) hasError = true; - - // Supported gateways current state validation - if (state.supportedGateways.length === 0) hasError = true; - - // Policy file upload current state validation for Synapse - if ( - state.supportedGateways.includes(CONSTS.GATEWAY_TYPE.synapse) && - synapsePolicyDefinitionFile.length === 0 - ) - hasError = true; - - // Policy file upload current state validation for Choreo Connect - if ( - state.supportedGateways.includes(CONSTS.GATEWAY_TYPE.choreoConnect) && - ccPolicyDefinitionFile.length === 0 - ) - hasError = true; - - // Policy attributes current state validation - state.policyAttributes.forEach((attribute: PolicyAttribute) => { - if ( - !attribute.name || - !attribute.displayName || - attribute.name === '' || - attribute.displayName === '' - ) - hasError = true; - }); - - setIsFormDisabled(hasError); - }, [ - state.displayName, - state.version, - state.applicableFlows, - state.supportedApiTypes, - state.supportedGateways, - state.policyAttributes, - synapsePolicyDefinitionFile, - ccPolicyDefinitionFile - ]); - - /** - * Cleans and retrieves the policy attributes of the policy to be created - * @returns {PolicyAttribute[]} List of policy attributes relevant to the policy to be created - */ - const getPolicyAttributes = () => { - const policyAttributesCopy = state.policyAttributes.map((attribute: PolicyAttribute) => { - return { - name: attribute.name, - displayName: attribute.displayName, - version: attribute.version, - description: attribute.description, - required: attribute.required, - type: attribute.type, - ...(attribute.validationRegex !== null ? {validationRegex: attribute.validationRegex} : {}), - ...(attribute.defaultValue !== null ? {defaultValue: attribute.defaultValue} : {}), - allowedValues: attribute.allowedValues, - } - }) - return policyAttributesCopy; - } - - const onPolicySave = () => { - if (state.displayName) { - const policySpec = { - category: 'Mediation', - name: state.displayName.replace(/[^A-Za-z0-9]+/gi, ''), - displayName: state.displayName, - version: 'v' + state.version, - description: state.description, - applicableFlows: state.applicableFlows, - supportedApiTypes: state.supportedApiTypes, - supportedGateways: state.supportedGateways, - policyAttributes: getPolicyAttributes(), - }; - onSave(policySpec); - } - }; - - return ( - - ); -}; - -export default PolicyCreateForm; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx index 5139d9a2754..3cb315225aa 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx @@ -17,13 +17,28 @@ */ import React, { FC } from 'react'; -import PolicyViewFormShared from 'AppComponents/Shared/PoliciesUI/PolicyViewForm'; +import { makeStyles } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Divider from '@material-ui/core/Divider'; +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import { FormattedMessage } from 'react-intl'; import type { PolicySpec, PolicySpecAttribute } from '../Types'; import PolicyAttributes from './PolicyAttributes'; import GeneralDetails from './GeneralDetails'; import SourceDetails from './SourceDetails'; import uuidv4 from '../Utils'; +const useStyles = makeStyles(() => ({ + root: { + flexGrow: 1, + marginTop: 10, + display: 'flex', + flexDirection: 'column', + padding: 20, + }, +})); + interface PolicyViewFormProps { policySpec: PolicySpec; onDone: () => void; @@ -35,6 +50,8 @@ interface PolicyViewFormProps { * @returns {TSX} Right drawer for policy configuration. */ const PolicyViewForm: FC = ({ policySpec, onDone }) => { + const classes = useStyles(); + const getPolicyAttributes = () => { const policyAttributeList = policySpec.policyAttributes.map( (attribute: PolicySpecAttribute) => { @@ -45,14 +62,35 @@ const PolicyViewForm: FC = ({ policySpec, onDone }) => { }; return ( - + + {/* General details of policy */} + + + {/* Gateway specific details of policy */} + + + {/* Attributes of policy */} + + + + + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx index 7bcd46d2556..4df05d08a00 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx @@ -16,27 +16,41 @@ * under the License. */ -import React, { FC, useContext } from 'react'; +import React, { FC } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import Checkbox from '@material-ui/core/Checkbox'; +import Typography from '@material-ui/core/Typography'; import { FormattedMessage } from 'react-intl'; +import FormControl from '@material-ui/core/FormControl'; +import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; +import Button from '@material-ui/core/Button'; import Utils from 'AppData/Utils'; import API from 'AppData/api.js'; import { Alert } from 'AppComponents/Shared'; import CONSTS from 'AppData/Constants'; -import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; -import SourceDetailsShared from 'AppComponents/Shared/PoliciesUI/SourceDetails'; -import { ACTIONS } from './PolicyCreateForm'; -import UploadPolicyDropzone from './UploadPolicyDropzone'; + +const useStyles = makeStyles((theme: Theme) => ({ + mandatoryStar: { + color: theme.palette.error.main, + marginLeft: theme.spacing(0.1), + }, + formGroup: { + display: 'flex', + flexDirection: 'row', + }, +})); + +export const GATEWAY_TYPE_LABELS = { + SYNAPSE: 'Regular Gateway', + CC: 'Choreo Connect' +} interface SourceDetailsProps { supportedGateways: string[]; - synapsePolicyDefinitionFile?: any[]; - setSynapsePolicyDefinitionFile?: React.Dispatch>; - ccPolicyDefinitionFile?: any[]; - setCcPolicyDefinitionFile?: React.Dispatch>; - dispatch?: React.Dispatch; - isViewMode?: boolean; policyId?: string; - isAPISpecific?: boolean; } /** @@ -46,94 +60,156 @@ interface SourceDetailsProps { */ const SourceDetails: FC = ({ supportedGateways, - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - dispatch, - isViewMode, policyId, - isAPISpecific, }) => { - const { api } = useContext(ApiContext); - - // Validates whether atleast one gateway type (i.e. synapse, or CC ) is selected - // True if none of the available gateways are selected. - const supportedGatewaysError = supportedGateways.length === 0; - - /** - * Function to handle supported gateways related checkbox changes - * @param {React.ChangeEvent} event event - */ - const handleChange = (event: React.ChangeEvent) => { - if (dispatch) { - dispatch({ - type: ACTIONS.UPDATE_SUPPORTED_GATEWAYS, - name: - event.target.name === 'regularGateway' - ? CONSTS.GATEWAY_TYPE.synapse - : CONSTS.GATEWAY_TYPE.choreoConnect, - checked: event.target.checked, - }); - } - }; + const classes = useStyles(); /** * Hanlde policy download */ const handlePolicyDownload = () => { - if (policyId) { - if (isAPISpecific) { - const globalPolicyContentPromise = API.getOperationPolicyContent( - policyId, - api.id, - ); - globalPolicyContentPromise - .then((globalPolicyResponse) => { - Utils.forceDownload(globalPolicyResponse); - }) - .catch((error) => { - console.error(error); - Alert.error( - , - ); - }); - } else { - const commonPolicyContentPromise = - API.getCommonOperationPolicyContent(policyId); - commonPolicyContentPromise - .then((commonPolicyResponse) => { - Utils.forceDownload(commonPolicyResponse); - }) - .catch((error) => { - console.error(error); - Alert.error( - , - ); - }); - } + if (policyId) { + const commonPolicyContentPromise = + API.getCommonOperationPolicyContent(policyId); + commonPolicyContentPromise + .then((commonPolicyResponse) => { + Utils.forceDownload(commonPolicyResponse); + }) + .catch((error) => { + console.error(error); + Alert.error( + , + ); + }); } }; - return( - + return ( + + + + + + + + + + + + + + + + * + + + + + + } + label={GATEWAY_TYPE_LABELS.SYNAPSE} + data-testid='regular-gateway-label' + /> + + } + label={GATEWAY_TYPE_LABELS.CC} + data-testid='choreo-connect-label' + /> + + + + + + + + + * + + + + + + + + + + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx deleted file mode 100644 index 746d9dedc3d..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/GeneralDetails.tsx +++ /dev/null @@ -1,362 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import { FormattedMessage } from 'react-intl'; -import FormControl from '@material-ui/core/FormControl'; - -const useStyles = makeStyles((theme: Theme) => ({ - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, - formGroup: { - display: 'flex', - flexDirection: 'row', - }, -})); - -interface GeneralDetailsSharedProps { - displayName: string | null; - version: string | null; - description: string; - applicableFlows: string[]; - supportedApiTypes: string[]; - isViewMode: boolean; - nameError: any; - versionError: any; - handleInputChange: (event: React.ChangeEvent) => void; - applicableFlowsError: any; - handleChange: (event: React.ChangeEvent) => void; - supportedApiTypesError: any; - handleApiTypeChange: (event: React.ChangeEvent) => void; -} - -const GeneralDetailsShared: FC = ({ - displayName, - version, - description, - applicableFlows, - supportedApiTypes, - isViewMode, - nameError, - versionError, - handleInputChange, - applicableFlowsError, - handleChange, - supportedApiTypesError, - handleApiTypeChange -}) => { - const classes = useStyles(); - - return ( - - - - - - - - - - - - - - - } - error={nameError} - helperText={ - nameError ? ( - 'Name is Empty' - ) : ( - - ) - } - margin='dense' - variant='outlined' - value={displayName} - onChange={handleInputChange} - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? { cursor: 'auto' } : {}, - }} - /> - - - - } - error={versionError} - helperText={ - versionError ? ( - 'Version is Empty' - ) : ( - - ) - } - margin='dense' - variant='outlined' - value={ - isViewMode && version ? ( - version.replace('v', '') - ) : ( - version - ) - } - onChange={handleInputChange} - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? { cursor: 'auto' } : {}, - startAdornment: v, - }} - /> - - - - } - helperText={ - - } - fullWidth - margin='dense' - variant='outlined' - value={description} - onChange={handleInputChange} - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? { cursor: 'auto' } : {}, - }} - /> - - - - * - - - - - - } - label='Request' - data-testid='request-flow' - /> - - } - label='Response' - data-testid='response-flow' - /> - - } - label='Fault' - data-testid='fault-flow' - /> - - - {applicableFlowsError - ? 'Please select one or more flows' - : ''} - - - - - - - - * - - - - - - } - label='HTTP' - data-testid='http-type' - /> - - } - label='SOAP' - data-testid='soap-type' - /> - - } - label='SOAPTOREST' - data-testid='soaptorest-flow' - /> - - - {supportedApiTypesError - ? 'Please select one or more API Types' - : ''} - - - - - - - - ); -} - -export default GeneralDetailsShared; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx deleted file mode 100644 index fb6aa32c7df..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyAttributes.tsx +++ /dev/null @@ -1,627 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { Button, makeStyles, Theme } from '@material-ui/core'; -import Typography from '@material-ui/core/Typography'; -import Box from '@material-ui/core/Box'; -import TextField from '@material-ui/core/TextField'; -import Grid from '@material-ui/core/Grid'; -import Popover from '@material-ui/core/Popover'; -import Select from '@material-ui/core/Select'; -import FormControl from '@material-ui/core/FormControl'; -import InputLabel from '@material-ui/core/InputLabel'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import PriorityHighOutlined from '@material-ui/icons/PriorityHighOutlined'; -import { FormattedMessage } from 'react-intl'; -import Tooltip from '@material-ui/core/Tooltip'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -import SubjectOutlinedIcon from '@material-ui/icons/SubjectOutlined'; -import FormatListBulletedOutlinedIcon from '@material-ui/icons/FormatListBulletedOutlined'; -import DeleteIcon from '@material-ui/icons/Delete'; -import { AddCircle } from '@material-ui/icons'; -import { PolicyAttribute } from './Types'; - -const useStyles = makeStyles((theme: Theme) => ({ - attributeProperty: { - marginLeft: theme.spacing(0.5), - marginRight: theme.spacing(0.5), - }, - formControlSelect: { - marginTop: theme.spacing(2), - }, - selectRoot: { - padding: '11.5px 14px', - width: 100, - }, - buttonIcon: { - marginRight: theme.spacing(1), - }, - requiredToggleButton: { - height: '37.28px', - width: '37.28px', - '&.Mui-selected, &.Mui-selected:hover': { - color: 'white', - backgroundColor: theme.palette.primary.main, - } - }, - toggleButton: { - height: '37.28px', - width: '37.28px', - }, -})); - -interface PolicyAttributesSharedProps { - policyAttributes: PolicyAttribute[]; - dispatch?: React.Dispatch, - isViewMode: boolean; - addNewPolicyAttribute: () => void; - getAttributeFormError: (attribute: PolicyAttribute, fieldName: string) => string; - handleAttributeChange: (event: any, id: string) => void; - handleToggle: (currentState: boolean, id: string) => void; - handleDescriptionToggle: (event: React.FormEvent, id: string) => void; - openedDescriptionPopoverId: string | null; - descriptionAnchorEl: HTMLButtonElement | null; - handleDescriptionClose: () => void; - handleValuePropertiesToggle: (event: React.FormEvent, id: string) => void; - openedValuesPopoverId: string | null; - valuePropertiesAnchorEl: HTMLButtonElement | null; - handleValuePropertiesClose: () => void; - handleAllowedValues: (event: React.ChangeEvent, id: string) => void; - ACTIONS: any; -} - -const PolicyAttributesShared: FC = ({ - policyAttributes, - dispatch, - isViewMode, - addNewPolicyAttribute, - getAttributeFormError, - handleAttributeChange, - handleToggle, - handleDescriptionToggle, - openedDescriptionPopoverId, - descriptionAnchorEl, - handleDescriptionClose, - handleValuePropertiesToggle, - openedValuesPopoverId, - valuePropertiesAnchorEl, - handleValuePropertiesClose, - handleAllowedValues, - ACTIONS, -}) => { - const classes = useStyles(); - - return ( - <> - - - - - - - - - - - {!isViewMode && ( - - - - - - - - )} - {isViewMode && policyAttributes.length === 0 && ( - - - - - - - - - - )} - - - - - {policyAttributes.map((attribute: PolicyAttribute) => ( - - - - - - } - error={getAttributeFormError(attribute, 'name') !== ''} - margin='dense' - value={attribute.name} - data-testid='add-policy-attribute-name-btn' - helperText={ - getAttributeFormError( - attribute, - 'name', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - } - error={getAttributeFormError(attribute, 'displayName') !== ''} - margin='dense' - value={attribute.displayName} - data-testid='add-policy-attribute-display-name-btn' - helperText={ - getAttributeFormError( - attribute, - 'displayName', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - {/* Attribute required or not */} - - } - arrow - > - handleToggle(attribute.required, attribute.id)} - style={ isViewMode ? {cursor: 'auto'} : {}} - > - - - - - {/* Attribute description */} - - } - arrow - > - handleDescriptionToggle(e, attribute.id)} - > - - - - - - - } - error={getAttributeFormError(attribute, 'description') !== ''} - margin='dense' - value={attribute.description} - helperText={ - getAttributeFormError( - attribute, - 'description', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - {/* Attribute values */} - - } - arrow - > - handleValuePropertiesToggle(e, attribute.id)} - > - - - - - - - - - - - - - {/* Type */} - - Type - - Attribute Type - - - {/* Allowed Values */} - {attribute.type.toLowerCase() === 'enum' && ( - - - } - margin='dense' - variant='outlined' - value={attribute.allowedValues} - helperText={ - - } - onChange={ - (e) => handleAllowedValues(e, attribute.id) - } - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - )} - - {/* Validation Regex */} - - - } - error={ - getAttributeFormError( - attribute, - 'validationRegex', - ) !== '' - } - margin='dense' - value={attribute.validationRegex} - helperText={ - getAttributeFormError( - attribute, - 'validationRegex', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - {/* Default Value */} - - - } - error={ - getAttributeFormError( - attribute, - 'defaultValue' - ) !== '' - } - margin='dense' - value={attribute.defaultValue} - helperText={ - getAttributeFormError( - attribute, - 'defaultValue', - ) || ( - - ) - } - onChange={(e) => handleAttributeChange(e, attribute.id)} - variant='outlined' - inputProps={{ - readOnly: isViewMode, - style: isViewMode ? {cursor: 'auto'} : {}, - }} - /> - - - - - - {/* Attribute delete */} - - } - arrow - > - - dispatch && dispatch({ - type: ACTIONS.DELETE_POLICY_ATTRIBUTE, - id: attribute.id, - }) - } - style={ isViewMode ? {cursor: 'auto'} : {}} - > - - - - - - - - - ))} - - - - ); -} - -export default PolicyAttributesShared; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx deleted file mode 100644 index cc1ef4c1b16..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyCreateForm.tsx +++ /dev/null @@ -1,140 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { CircularProgress, makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import Divider from '@material-ui/core/Divider'; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; -import { FormattedMessage } from 'react-intl'; - -const useStyles = makeStyles((theme: Theme) => ({ - root: { - flexGrow: 1, - marginTop: 10, - display: 'flex', - flexDirection: 'column', - padding: 20, - }, - cancelBtn: { - marginLeft: theme.spacing(1), - }, -})); - -interface PolicyCreateFormSharedProps { - synapsePolicyDefinitionFile: any[]; - setSynapsePolicyDefinitionFile: React.Dispatch>; - ccPolicyDefinitionFile: any[]; - setCcPolicyDefinitionFile: React.Dispatch>; - onCancel: () => void; - saving: boolean; - state: any; - dispatch: any; - onPolicySave: () => void; - isFormDisabled: boolean; - PolicyAttributes: any; - GeneralDetails: any; - SourceDetails: any; - isRestricted: any; -} - -const PolicyCreateFormShared: FC = ({ - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - onCancel, - saving, - state, - dispatch, - onPolicySave, - isFormDisabled, - PolicyAttributes, - GeneralDetails, - SourceDetails, - isRestricted -}) => { - const classes = useStyles(); - - return ( - - {/* General details of policy */} - - - {/* Gateway specific details of policy */} - - - {/* Attributes of policy */} - - - - - - - ); -} - -export default PolicyCreateFormShared; \ No newline at end of file diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx deleted file mode 100644 index 4ecc961aad5..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/SourceDetails.tsx +++ /dev/null @@ -1,270 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import Typography from '@material-ui/core/Typography'; -import { FormattedMessage } from 'react-intl'; -import FormControl from '@material-ui/core/FormControl'; -import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; -import Button from '@material-ui/core/Button'; -import CONSTS from 'AppData/Constants'; - -const useStyles = makeStyles((theme: Theme) => ({ - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, - formGroup: { - display: 'flex', - flexDirection: 'row', - }, -})); - -export const GATEWAY_TYPE_LABELS = { - SYNAPSE: 'Regular Gateway', - CC: 'Choreo Connect' -} - -interface SourceDetailsSharedProps { - supportedGateways: string[]; - synapsePolicyDefinitionFile?: any[]; - setSynapsePolicyDefinitionFile?: React.Dispatch>; - ccPolicyDefinitionFile?: any[]; - setCcPolicyDefinitionFile?: React.Dispatch>; - isViewMode?: boolean; - handlePolicyDownload?: () => void; - supportedGatewaysError: any; - handleChange?: (event: React.ChangeEvent) => void; - UploadPolicyDropzone: any; -} - -/** - * Renders the general details section. - * @param {JSON} props Input props from parent components. - * @returns {TSX} General details of the policy. - */ -const SourceDetailsShared: FC = ({ - supportedGateways, - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - isViewMode, - handlePolicyDownload, - supportedGatewaysError, - handleChange, - UploadPolicyDropzone -}) => { - const classes = useStyles(); - - /** - * Renders the policy file upload related section - * @param {any[]} policyFile Policy file - * @param {React.Dispatch>} setPolicyFile Policy file setter - * @param {string} gateway Gateway type - * @returns {TSX} Policy upload section - */ - const renderPolicyFileUpload = ( - policyFile: any[], - setPolicyFile: React.Dispatch>, - gateway: string, - ) => { - return ( - - ); - }; - - /** - * - * @returns {TSX} Policy download section - */ - const renderPolicyDownload = () => { - return ( - <> - - - - * - - - - - - - - - - ); - } - - return ( - - - - - - - - - - - - - - - - * - - - - - - } - label={GATEWAY_TYPE_LABELS.SYNAPSE} - data-testid='regular-gateway-label' - /> - - } - label={GATEWAY_TYPE_LABELS.CC} - data-testid='choreo-connect-label' - /> - - - {supportedGatewaysError - ? 'Please select one or more Gateways' - : ''} - - - - - - {/* Render dropzones for policy file uploads */} - {supportedGateways.includes(CONSTS.GATEWAY_TYPE.synapse) && - !isViewMode && - synapsePolicyDefinitionFile && - setSynapsePolicyDefinitionFile && - renderPolicyFileUpload( - synapsePolicyDefinitionFile, - setSynapsePolicyDefinitionFile, - GATEWAY_TYPE_LABELS.SYNAPSE, - - )} - {supportedGateways.includes(CONSTS.GATEWAY_TYPE.choreoConnect) && - !isViewMode && - ccPolicyDefinitionFile && - setCcPolicyDefinitionFile && - renderPolicyFileUpload( - ccPolicyDefinitionFile, - setCcPolicyDefinitionFile, - GATEWAY_TYPE_LABELS.CC, - )} - - {/* Render policy file download option in view mode */} - {isViewMode && renderPolicyDownload()} - - - ); -}; - -export default SourceDetailsShared; From 9a0a234caf5fde026f6129226627d768eaad9d47 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 9 Nov 2023 16:05:23 +0530 Subject: [PATCH 068/102] Remove PolicyView as it's not needed --- .../Policies/DraggablePolicyCard.tsx | 76 --- .../GlobalComponents}/DraggablePolicyCard.tsx | 86 ++- .../Policies/PolicyForm/GeneralDetails.tsx | 307 ----------- .../Policies/PolicyForm/PolicyAttributes.tsx | 489 ------------------ .../Policies/PolicyForm/PolicyViewForm.tsx | 97 ---- .../Policies/PolicyForm/SourceDetails.tsx | 216 -------- .../Policies/PolicyForm/Types.d.ts | 40 -- .../PolicyForm/UploadPolicyDropzone.tsx | 53 -- .../GlobalPolicies/Policies/ViewPolicy.tsx | 103 ---- .../Policies/components/TabPanel.tsx | 2 +- .../Shared/PoliciesUI/PolicyViewForm.tsx | 94 ---- .../PoliciesUI/UploadPolicyDropzone.tsx | 205 -------- .../Shared/PoliciesUI/ViewPolicy.tsx | 97 ---- 13 files changed, 37 insertions(+), 1828 deletions(-) delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx rename portals/publisher/src/main/webapp/source/src/app/components/{Shared/PoliciesUI => GlobalPolicies/Policies/GlobalComponents}/DraggablePolicyCard.tsx (71%) delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx delete mode 100644 portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx deleted file mode 100644 index 8f0e97d947c..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/DraggablePolicyCard.tsx +++ /dev/null @@ -1,76 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { useState } from 'react'; -import DraggablePolicyCardShared from 'AppComponents/Shared/PoliciesUI/DraggablePolicyCard'; -import type { Policy } from './Types'; -import ViewPolicy from './ViewPolicy'; - -interface DraggablePolicyCardProps { - policyObj: Policy; - showCopyIcon?: boolean; - isLocalToAPI: boolean; - fetchPolicies: () => void; -} - -/** - * Renders a single draggable policy block. - * @param {any} DraggablePolicyCardProps Input props from parent components. - * @returns {TSX} Draggable Policy card UI. - */ -const DraggablePolicyCard: React.FC = ({ - policyObj, - showCopyIcon, - isLocalToAPI, - fetchPolicies, -}) => { - const [hovered, setHovered] = useState(false); - const [dialogOpen, setDialogOpen] = useState(false); - - - const handleViewPolicy = () => { - setDialogOpen(true); - }; - - const handleViewPolicyClose = () => { - setDialogOpen(false); - }; - - // If the policy is local to the API, we don't need to render the draggable card since this is global policies. - if (isLocalToAPI) { - return null; - } - - return ( - - ); -}; - -export default DraggablePolicyCard; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/DraggablePolicyCard.tsx similarity index 71% rename from portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/DraggablePolicyCard.tsx index e481e396504..23814b12501 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/DraggablePolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/DraggablePolicyCard.tsx @@ -16,11 +16,12 @@ * under the License. */ -import React, { CSSProperties, useMemo } from 'react'; +import React, { useState, CSSProperties, useMemo } from 'react'; import { makeStyles } from '@material-ui/core'; import Avatar from '@material-ui/core/Avatar'; import Box from '@material-ui/core/Box'; import Tooltip from '@material-ui/core/Tooltip'; +import { Link } from 'react-router-dom'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; @@ -29,7 +30,7 @@ import VisibilityIcon from '@material-ui/icons/Visibility'; import IconButton from '@material-ui/core/IconButton'; import { FormattedMessage } from 'react-intl'; import { useDrag } from 'react-dnd'; -import type { Policy } from './Types'; +import type { Policy } from '../Types'; const useStyles = makeStyles(() => ({ policyCardText: { @@ -56,33 +57,25 @@ const style: CSSProperties = { borderRadius: '0.3em', }; -interface DraggablePolicyCardSharedProps { +interface DraggablePolicyCardProps { policyObj: Policy; showCopyIcon?: boolean; isLocalToAPI: boolean; fetchPolicies: () => void; - setHovered: any; - hovered: boolean; - handleViewPolicy: () => void; - dialogOpen: boolean; - handleViewPolicyClose: () => void; - ViewPolicy: any; - DeletePolicy: any; } -const DraggablePolicyCardShared: React.FC = ({ +/** + * Renders a single draggable policy block. + * @param {any} DraggablePolicyCardProps Input props from parent components. + * @returns {TSX} Draggable Policy card UI. + */ +const DraggablePolicyCard: React.FC = ({ policyObj, showCopyIcon, isLocalToAPI, - fetchPolicies, - setHovered, - hovered, - handleViewPolicy, - dialogOpen, - handleViewPolicyClose, - ViewPolicy, - DeletePolicy }) => { + const [hovered, setHovered] = useState(false); + const classes = useStyles(); const [{ isDragging }, drag] = useDrag( @@ -109,6 +102,11 @@ const DraggablePolicyCardShared: React.FC = ({ [isDragging], ); + // If the policy is local to the API, we don't need to render the draggable card since this is global policies. + if (isLocalToAPI) { + return null; + } + return ( <> @@ -158,41 +156,29 @@ const DraggablePolicyCardShared: React.FC = ({ justifyContent='flex-end' className={!hovered ? classes.policyActions : ''} > - - } - > - - - - - {isLocalToAPI && ( - - )} + + + } + > + + + + + - ); -} +}; -export default DraggablePolicyCardShared; +export default DraggablePolicyCard; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx deleted file mode 100644 index 052ff51c833..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/GeneralDetails.tsx +++ /dev/null @@ -1,307 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import { FormattedMessage } from 'react-intl'; -import FormControl from '@material-ui/core/FormControl'; - -const useStyles = makeStyles((theme: Theme) => ({ - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, - formGroup: { - display: 'flex', - flexDirection: 'row', - }, -})); - -interface GeneralDetailsProps { - displayName: string | null; - version: string | null; - description: string; - applicableFlows: string[]; - supportedApiTypes: string[]; -} - -/** - * Renders the general details section. - * @param {JSON} props Input props from parent components. - * @returns {TSX} General details of the policy. - */ -const GeneralDetails: FC = ({ - displayName, - version, - description, - applicableFlows, - supportedApiTypes, -}) => { - const classes = useStyles(); - - return ( - - - - - - - - - - - - - - - } - margin='dense' - variant='outlined' - value={displayName} - inputProps={{ - readOnly: true, - style: { cursor: 'auto' }, - }} - /> - - - - } - margin='dense' - variant='outlined' - value={ - version ? ( - version.replace('v', '') - ) : ( - version - ) - } - inputProps={{ - readOnly: true, - style: { cursor: 'auto' }, - startAdornment: v - }} - /> - - - - } - helperText={ - - } - fullWidth - margin='dense' - variant='outlined' - value={description} - inputProps={{ - readOnly: true, - style: { cursor: 'auto' }, - }} - /> - - - - * - - - - - - } - label='Request' - data-testid='request-flow' - /> - - } - label='Response' - data-testid='response-flow' - /> - - } - label='Fault' - data-testid='fault-flow' - /> - - - - - - - - * - - - - - - } - label='HTTP' - data-testid='http-type' - /> - - } - label='SOAP' - data-testid='soap-type' - /> - - } - label='SOAPTOREST' - data-testid='soaptorest-flow' - /> - - - - - - - - ); -}; - -export default React.memo(GeneralDetails); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx deleted file mode 100644 index 4b685d08653..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyAttributes.tsx +++ /dev/null @@ -1,489 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC, useState, } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; -import Typography from '@material-ui/core/Typography'; -import Box from '@material-ui/core/Box'; -import TextField from '@material-ui/core/TextField'; -import Grid from '@material-ui/core/Grid'; -import Popover from '@material-ui/core/Popover'; -import Select from '@material-ui/core/Select'; -import FormControl from '@material-ui/core/FormControl'; -import InputLabel from '@material-ui/core/InputLabel'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import PriorityHighOutlined from '@material-ui/icons/PriorityHighOutlined'; -import { FormattedMessage } from 'react-intl'; -import Tooltip from '@material-ui/core/Tooltip'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -import SubjectOutlinedIcon from '@material-ui/icons/SubjectOutlined'; -import FormatListBulletedOutlinedIcon from '@material-ui/icons/FormatListBulletedOutlined'; -import DeleteIcon from '@material-ui/icons/Delete'; -import { PolicyAttribute } from './Types'; - -const useStyles = makeStyles((theme: Theme) => ({ - attributeProperty: { - marginLeft: theme.spacing(0.5), - marginRight: theme.spacing(0.5), - }, - formControlSelect: { - marginTop: theme.spacing(2), - }, - selectRoot: { - padding: '11.5px 14px', - width: 100, - }, - buttonIcon: { - marginRight: theme.spacing(1), - }, - requiredToggleButton: { - height: '37.28px', - width: '37.28px', - '&.Mui-selected, &.Mui-selected:hover': { - color: 'white', - backgroundColor: theme.palette.primary.main, - } - }, - toggleButton: { - height: '37.28px', - width: '37.28px', - }, -})); - -interface PolicyAttributesProps { - policyAttributes: PolicyAttribute[]; -} - -/** - * Handles the addition of policy attributes for a given policy. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy attributes UI. - */ -const PolicyAttributes: FC = ({policyAttributes}) => { - const classes = useStyles(); - const [descriptionAnchorEl, setDescriptionAnchorEl] = useState(null); - const [valuePropertiesAnchorEl, setValuePropertiesAnchorEl] = useState(null); - const [openedDescriptionPopoverId, setOpenedDescriptionPopoverId] = useState(null); - const [openedValuesPopoverId, setOpenedValuesPopoverId] = useState(null); - - // Description toggle button related actions - const handleDescriptionToggle = (event: React.FormEvent, id: string) => { - setOpenedDescriptionPopoverId(id); - setDescriptionAnchorEl(event.currentTarget); - } - const handleDescriptionClose = () => { - setOpenedDescriptionPopoverId(null); - setDescriptionAnchorEl(null); - }; - - // Value properties toggle button related actions - const handleValuePropertiesToggle = (event: React.FormEvent, id: string) => { - setOpenedValuesPopoverId(id); - setValuePropertiesAnchorEl(event.currentTarget); - } - const handleValuePropertiesClose = () => { - setOpenedValuesPopoverId(null); - setValuePropertiesAnchorEl(null); - }; - - return ( - <> - - - - - - - - - - - {policyAttributes.length === 0 && ( - - - - - - - - - - )} - - - - - {policyAttributes.map((attribute: PolicyAttribute) => ( - - - - - - } - margin='dense' - value={attribute.name} - data-testid='add-policy-attribute-name-btn' - variant='outlined' - inputProps={{ - readOnly: true, - style: {cursor: 'auto'}, - }} - /> - - - - } - margin='dense' - value={attribute.displayName} - data-testid='add-policy-attribute-display-name-btn' - variant='outlined' - inputProps={{ - readOnly: true, - style: {cursor: 'auto'}, - }} - /> - - - - {/* Attribute required or not */} - - } - arrow - > - - - - - - {/* Attribute description */} - - } - arrow - > - handleDescriptionToggle(e, attribute.id)} - > - - - - - - - } - margin='dense' - value={attribute.description} - variant='outlined' - inputProps={{ - readOnly: true, - style: {cursor: 'auto'}, - }} - /> - - - - {/* Attribute values */} - - } - arrow - > - handleValuePropertiesToggle(e, attribute.id)} - > - - - - - - - - - - - - - {/* Type */} - - Type - - Attribute Type - - - {/* Allowed Values */} - {attribute.type.toLowerCase() === 'enum' && ( - - - } - margin='dense' - variant='outlined' - value={attribute.allowedValues} - helperText={ - - } - inputProps={{ - readOnly: true, - style: {cursor: 'auto'}, - }} - /> - - )} - - {/* Validation Regex */} - - - } - margin='dense' - value={attribute.validationRegex} - variant='outlined' - inputProps={{ - readOnly: true, - style: {cursor: 'auto'}, - }} - /> - - - {/* Default Value */} - - - } - margin='dense' - value={attribute.defaultValue} - variant='outlined' - inputProps={{ - readOnly: true, - style: {cursor: 'auto'}, - }} - /> - - - - - - {/* Attribute delete */} - - } - arrow - > - - - - - - - - - - ))} - - - - ); -} - -export default React.memo(PolicyAttributes); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx deleted file mode 100644 index 3cb315225aa..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/PolicyViewForm.tsx +++ /dev/null @@ -1,97 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { makeStyles } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import Divider from '@material-ui/core/Divider'; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; -import { FormattedMessage } from 'react-intl'; -import type { PolicySpec, PolicySpecAttribute } from '../Types'; -import PolicyAttributes from './PolicyAttributes'; -import GeneralDetails from './GeneralDetails'; -import SourceDetails from './SourceDetails'; -import uuidv4 from '../Utils'; - -const useStyles = makeStyles(() => ({ - root: { - flexGrow: 1, - marginTop: 10, - display: 'flex', - flexDirection: 'column', - padding: 20, - }, -})); - -interface PolicyViewFormProps { - policySpec: PolicySpec; - onDone: () => void; -} - -/** - * Renders the policy view form. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Right drawer for policy configuration. - */ -const PolicyViewForm: FC = ({ policySpec, onDone }) => { - const classes = useStyles(); - - const getPolicyAttributes = () => { - const policyAttributeList = policySpec.policyAttributes.map( - (attribute: PolicySpecAttribute) => { - return { ...attribute, id: uuidv4() }; - }, - ); - return policyAttributeList; - }; - - return ( - - {/* General details of policy */} - - - {/* Gateway specific details of policy */} - - - {/* Attributes of policy */} - - - - - - ); -}; - -export default PolicyViewForm; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx deleted file mode 100644 index 4df05d08a00..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/SourceDetails.tsx +++ /dev/null @@ -1,216 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormGroup from '@material-ui/core/FormGroup'; -import Checkbox from '@material-ui/core/Checkbox'; -import Typography from '@material-ui/core/Typography'; -import { FormattedMessage } from 'react-intl'; -import FormControl from '@material-ui/core/FormControl'; -import CloudDownloadIcon from '@material-ui/icons/CloudDownload'; -import Button from '@material-ui/core/Button'; -import Utils from 'AppData/Utils'; -import API from 'AppData/api.js'; -import { Alert } from 'AppComponents/Shared'; -import CONSTS from 'AppData/Constants'; - -const useStyles = makeStyles((theme: Theme) => ({ - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, - formGroup: { - display: 'flex', - flexDirection: 'row', - }, -})); - -export const GATEWAY_TYPE_LABELS = { - SYNAPSE: 'Regular Gateway', - CC: 'Choreo Connect' -} - -interface SourceDetailsProps { - supportedGateways: string[]; - policyId?: string; -} - -/** - * Renders the general details section. - * @param {JSON} props Input props from parent components. - * @returns {TSX} General details of the policy. - */ -const SourceDetails: FC = ({ - supportedGateways, - policyId, -}) => { - const classes = useStyles(); - - /** - * Hanlde policy download - */ - const handlePolicyDownload = () => { - if (policyId) { - const commonPolicyContentPromise = - API.getCommonOperationPolicyContent(policyId); - commonPolicyContentPromise - .then((commonPolicyResponse) => { - Utils.forceDownload(commonPolicyResponse); - }) - .catch((error) => { - console.error(error); - Alert.error( - , - ); - }); - } - }; - - return ( - - - - - - - - - - - - - - - - * - - - - - - } - label={GATEWAY_TYPE_LABELS.SYNAPSE} - data-testid='regular-gateway-label' - /> - - } - label={GATEWAY_TYPE_LABELS.CC} - data-testid='choreo-connect-label' - /> - - - - - - - - - * - - - - - - - - - - - ); -}; - -export default React.memo(SourceDetails); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts deleted file mode 100644 index 1b5a12165b2..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/Types.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -export type PolicyAttribute = { - id: string; - name: string; - displayName: string; - version: string; - description: string; - required: boolean; - type: string; - validationRegex: string; - defaultValue: any; - allowedValues: string[]; -}; - -export type NewPolicyState = { - displayName: string | null; - version: string | null; - description: string; - applicableFlows: string[]; - supportedGateways: string[]; - supportedApiTypes: string[]; - policyAttributes: any; -}; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx deleted file mode 100644 index 947201c64a3..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyForm/UploadPolicyDropzone.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import UploadPolicyDropzoneShared from 'AppComponents/Shared/PoliciesUI/UploadPolicyDropzone'; - -interface UploadPolicyDropzoneProps { - policyDefinitionFile: any[]; - setPolicyDefinitionFile: React.Dispatch>; - gateway: string; -} - -/** - * Handles the policy file upload. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy file upload managing UI. - */ -const UploadPolicyDropzone: FC = ({ - policyDefinitionFile, - setPolicyDefinitionFile, - gateway, -}) => { - - const handleDrop = (policyDefinition: any) => { - setPolicyDefinitionFile(policyDefinition); - }; - - return ( - - ); -}; - -export default UploadPolicyDropzone; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx deleted file mode 100644 index d872ba14fe9..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/ViewPolicy.tsx +++ /dev/null @@ -1,103 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { useEffect, useState } from 'react'; -import Alert from 'AppComponents/Shared/Alert'; -import { Progress } from 'AppComponents/Shared'; -import API from 'AppData/api'; -import ViewPolicyShared from 'AppComponents/Shared/PoliciesUI/ViewPolicy'; -import type { Policy, PolicySpec } from './Types'; -import PolicyViewForm from './PolicyForm/PolicyViewForm'; - -interface ViewPolicyProps { - handleDialogClose: () => void; - dialogOpen: boolean; - policyObj: Policy; - isLocalToAPI: boolean; -} - -/** - * Renders the UI to view a policy selected from the policy list. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy view UI. - */ -const ViewPolicy: React.FC = ({ - handleDialogClose, - dialogOpen, - policyObj, - isLocalToAPI, -}) => { - const [policySpec, setPolicySpec] = useState(null); - const [loading, setLoading] = useState(false); - - useEffect(() => { - if (dialogOpen && !isLocalToAPI) { - const promisedCommonPolicyGet = API.getCommonOperationPolicy( - policyObj.id, - ); - promisedCommonPolicyGet - .then((response) => { - setPolicySpec(response.body); - }) - .catch((error) => { - console.error(error); - if (error.response) { - Alert.error(error.response.body.description); - } else { - Alert.error('Something went wrong while retrieving policy details'); - } - }) - .finally(() => { - setLoading(false); - }); - } - }, [dialogOpen]); - - const stopPropagation = ( - e: React.MouseEvent, - ) => { - e.stopPropagation(); - }; - - const toggleOpen = () => { - handleDialogClose(); - }; - - if (loading) { - return ; - } - - if (!policySpec) { - return <>; - } - - return ( - - ); -}; - -export default ViewPolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx index 82a513f4f6a..0b54f0be55e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx @@ -19,7 +19,7 @@ import React, { FC } from 'react'; import TabPanelShared from 'AppComponents/Shared/PoliciesUI/TabPanel'; import type { Policy } from '../Types'; -import DraggablePolicyCard from '../DraggablePolicyCard'; +import DraggablePolicyCard from '../GlobalComponents/DraggablePolicyCard'; interface TabPanelProps { children?: React.ReactNode; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx deleted file mode 100644 index ade614703bd..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyViewForm.tsx +++ /dev/null @@ -1,94 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { makeStyles } from '@material-ui/core'; -import Box from '@material-ui/core/Box'; -import Divider from '@material-ui/core/Divider'; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; -import { FormattedMessage } from 'react-intl'; -import type { PolicySpec } from './Types'; - -const useStyles = makeStyles(() => ({ - root: { - flexGrow: 1, - marginTop: 10, - display: 'flex', - flexDirection: 'column', - padding: 20, - }, -})); - -interface PolicyViewFormSharedProps { - policySpec: PolicySpec; - onDone: () => void; - getPolicyAttributes: () => any; - PolicyAttributes: any; - GeneralDetails: any; - SourceDetails: any; -} - -const PolicyViewFormShared: FC = ({ - policySpec, - onDone, - getPolicyAttributes, - PolicyAttributes, - GeneralDetails, - SourceDetails -}) => { - const classes = useStyles(); - - return ( - - {/* General details of policy */} - - - {/* Gateway specific details of policy */} - - - {/* Attributes of policy */} - - - - - - ); -}; - -export default PolicyViewFormShared; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx deleted file mode 100644 index 212a4af5737..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/UploadPolicyDropzone.tsx +++ /dev/null @@ -1,205 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React, { FC } from 'react'; -import { List, makeStyles, IconButton, Theme } from '@material-ui/core'; -import Typography from '@material-ui/core/Typography'; -import Box from '@material-ui/core/Box'; -import { FormattedMessage } from 'react-intl'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemAvatar from '@material-ui/core/ListItemAvatar'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Tooltip from '@material-ui/core/Tooltip'; -import Avatar from '@material-ui/core/Avatar'; -import InsertDriveFile from '@material-ui/icons/InsertDriveFile'; -import DeleteIcon from '@material-ui/icons/Delete'; -import Dropzone from 'react-dropzone'; -import clsx from 'clsx'; -import green from '@material-ui/core/colors/green'; -import red from '@material-ui/core/colors/red'; -import Icon from '@material-ui/core/Icon'; -import { HelpOutline } from '@material-ui/icons'; -import { GATEWAY_TYPE_LABELS } from 'AppComponents/Shared/PoliciesUI/SourceDetails'; - -const useStyles = makeStyles((theme: Theme) => ({ - dropZoneWrapper: { - border: '1px dashed ' + theme.palette.primary.main, - borderRadius: '5px', - cursor: 'pointer', - padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`, - position: 'relative', - textAlign: 'center', - width: '75%', - height: '4em', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'column', - '& span': { - fontSize: 64, - color: theme.palette.primary.main, - }, - }, - acceptDrop: { - backgroundColor: green[50], - borderColor: 'green', - }, - rejectDrop: { - backgroundColor: red[50], - borderColor: 'red', - }, - uploadedFileDetails: { - width: '75%', - }, - mandatoryStar: { - color: theme.palette.error.main, - marginLeft: theme.spacing(0.1), - }, -})); - -interface UploadPolicyDropzoneSharedProps { - policyDefinitionFile: any[]; - setPolicyDefinitionFile: React.Dispatch>; - gateway: string; - handleDrop: (policyDefinition: any) => void; -} - -/** - * Handles the policy file upload. - * @param {JSON} props Input props from parent components. - * @returns {TSX} Policy file upload managing UI. - */ -const UploadPolicyDropzoneShared: FC = ({ - policyDefinitionFile, - setPolicyDefinitionFile, - gateway, - handleDrop, -}) => { - const classes = useStyles(); - - const renderPolicyFileDropzone = () => { - return ( - - {({ - getRootProps, - getInputProps, - isDragAccept, - isDragReject, - }) => { - return ( - // eslint-disable-next-line react/jsx-props-no-spreading -
-
- {/* eslint-disable-next-line react/jsx-props-no-spreading */} - - cloud_upload - - - -
-
- ); - }} - - ); - }; - - return ( - <> - - - - - * - - - - - - - - - - - - - {policyDefinitionFile.length === 0 ? ( - renderPolicyFileDropzone() - ) : ( - - - - - - - - - - setPolicyDefinitionFile([])} - > - - - - - - )} - - - ); -}; - -export default UploadPolicyDropzoneShared; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx deleted file mode 100644 index eb95f4197c5..00000000000 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/ViewPolicy.tsx +++ /dev/null @@ -1,97 +0,0 @@ -/* -* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. -* -* WSO2 LLC. licenses this file to you under the Apache License, -* Version 2.0 (the "License"); you may not use this file except -* in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import Icon from '@material-ui/core/Icon'; -import IconButton from '@material-ui/core/IconButton'; -import type { Policy, PolicySpec } from './Types'; - -interface ViewPolicySharedProps { - handleDialogClose: () => void; - dialogOpen: boolean; - policyObj: Policy; - isLocalToAPI: boolean; - stopPropagation: (e: React.MouseEvent) => void; - toggleOpen: () => void; - policySpec: PolicySpec; - PolicyViewForm: any; -} - -const ViewPolicyShared: React.FC = ({ - handleDialogClose, - dialogOpen, - policyObj, - stopPropagation, - toggleOpen, - policySpec, - PolicyViewForm -}) => { - return ( - <> - - - - - {policyObj.displayName} - - - - - close - - - - - - - - - - - - - ); -}; - -export default ViewPolicyShared; From feca38c2bab93a12318fa18393b728a7f1e35083 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 9 Nov 2023 16:31:37 +0530 Subject: [PATCH 069/102] Remove unwanted data types --- .../Policies/GlobalComponents/General.tsx | 1 - .../GlobalPolicies/Policies/Types.d.ts | 13 ----- .../components/Shared/PoliciesUI/Types.d.ts | 50 ------------------- 3 files changed, 64 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx index a4a626b2fc1..d8192dea13c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx @@ -72,7 +72,6 @@ interface GeneralProps { /** * This component renders the form of adding a global policy as a global level policy. - * This is used inside the PolicyConfigurationEditDrawer component. * @param {GeneralProps} props The props passed to the component. * @returns {TSX} Returns the JSX element. */ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts index c9574dd8fdf..9df14f1095e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/Types.d.ts @@ -66,19 +66,6 @@ export type PolicySpec = { md5?: string; }; -export type CreatePolicySpec = { - id?: string; - category: string; - name: string; - displayName: string; - version: string; - description: string; - applicableFlows: string[]; - supportedGateways: string[]; - supportedApiTypes: string[]; - policyAttributes: PolicySpecAttribute[]; -}; - export type GlobalPolicy = { policyName?: string; policyId?: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts index 8f8dd083f80..91bfd0ee553 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/Types.d.ts @@ -65,53 +65,3 @@ export type PolicySpec = { isAPISpecific?: boolean; md5?: string; }; - -export type CreatePolicySpec = { - id?: string; - category: string; - name: string; - displayName: string; - version: string; - description: string; - applicableFlows: string[]; - supportedGateways: string[]; - supportedApiTypes: string[]; - policyAttributes: PolicySpecAttribute[]; -}; - -export type ApiPolicy = { - policyName?: string; - policyId?: string; - policyVersion?: string; - parameters: any; - uuid?: string; -}; - -export type ApiLevelPolicy = { - request?: any[]; - response?: any[]; - fault?: any[]; -}; - -export type PolicyAttribute = { - id: string; - name: string; - displayName: string; - version: string; - description: string; - required: boolean; - type: string; - validationRegex: string; - defaultValue: any; - allowedValues: string[]; -}; - -export type NewPolicyState = { - displayName: string | null; - version: string | null; - description: string; - applicableFlows: string[]; - supportedGateways: string[]; - supportedApiTypes: string[]; - policyAttributes: any; -}; From 5d4be8dc7401c077bed91eb1bd5f414fb08dd9fe Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 9 Nov 2023 16:38:58 +0530 Subject: [PATCH 070/102] Refactor the code --- .../components/GlobalPolicies/Create/CreateGlobalPolicy.tsx | 2 +- .../app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx | 2 +- .../DraggablePolicyCard.tsx | 0 .../GatewaySelector.tsx | 0 .../General.tsx | 0 .../Policies.tsx | 0 .../PoliciesSection.tsx | 2 +- .../PolicyConfigurationEditDrawer.tsx | 0 .../PolicyConfiguringDrawer.tsx | 0 .../PolicyList.tsx | 2 +- .../PolicyPanel.tsx | 0 .../Policies/{ => SharedComponents}/AttachedPolicyCard.tsx | 6 +++--- .../Policies/{ => SharedComponents}/AttachedPolicyList.tsx | 4 ++-- .../Policies/{components => SharedComponents}/FlowArrow.tsx | 0 .../Policies/{ => SharedComponents}/PoliciesExpansion.tsx | 6 +++--- .../Policies/{ => SharedComponents}/PolicyDropzone.tsx | 4 ++-- .../Policies/{components => SharedComponents}/TabPanel.tsx | 2 +- 17 files changed, 15 insertions(+), 15 deletions(-) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/DraggablePolicyCard.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/GatewaySelector.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/General.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/Policies.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/PoliciesSection.tsx (96%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/PolicyConfigurationEditDrawer.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/PolicyConfiguringDrawer.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/PolicyList.tsx (99%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{GlobalComponents => GlobalSpecificComponents}/PolicyPanel.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => SharedComponents}/AttachedPolicyCard.tsx (96%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => SharedComponents}/AttachedPolicyList.tsx (96%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{components => SharedComponents}/FlowArrow.tsx (100%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => SharedComponents}/PoliciesExpansion.tsx (98%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{ => SharedComponents}/PolicyDropzone.tsx (94%) rename portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/{components => SharedComponents}/TabPanel.tsx (95%) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx index 29d3d4b72dd..b3974c2a92f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -15,7 +15,7 @@ // under the License. import React from 'react'; -import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalComponents/Policies'; +import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalSpecificComponents/Policies'; /** * Global Policies Creating Page. diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx index 0a451707139..51cf6398e62 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx @@ -17,7 +17,7 @@ */ import React from 'react'; -import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalComponents/Policies'; +import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalSpecificComponents/Policies'; import { useParams } from 'react-router-dom'; interface RouteParams { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/DraggablePolicyCard.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/DraggablePolicyCard.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/DraggablePolicyCard.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/GatewaySelector.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/GatewaySelector.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/GatewaySelector.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/General.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/Policies.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PoliciesSection.tsx similarity index 96% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PoliciesSection.tsx index 6de0ccbde07..864c25efd88 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PoliciesSection.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PoliciesSection.tsx @@ -20,7 +20,7 @@ import { Grid } from '@material-ui/core'; import React, { FC } from 'react'; import Box from '@material-ui/core/Box'; import type { Policy, PolicySpec } from '../Types'; -import PoliciesExpansion from '../PoliciesExpansion'; +import PoliciesExpansion from '../SharedComponents/PoliciesExpansion'; interface PolicySectionProps { isChoreoConnectEnabled: boolean; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfigurationEditDrawer.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfigurationEditDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfigurationEditDrawer.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfiguringDrawer.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyConfiguringDrawer.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfiguringDrawer.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx similarity index 99% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx index 45d3ac74133..0096589f030 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx @@ -28,7 +28,7 @@ import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core'; import CONSTS from 'AppData/Constants'; import type { Policy } from '../Types'; -import TabPanel from '../Components/TabPanel'; +import TabPanel from '../SharedComponents/TabPanel'; const useStyles = makeStyles(() => ({ flowTabs: { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyPanel.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalComponents/PolicyPanel.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyPanel.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx similarity index 96% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx index 7551b330aae..46a8039edfa 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx @@ -23,9 +23,9 @@ import Utils from 'AppData/Utils'; import { FormattedMessage } from 'react-intl'; import ApiContext from 'AppComponents/Apis/Details/components/ApiContext'; import AttachedPolicyCardShared from 'AppComponents/Shared/PoliciesUI/AttachedPolicyCard'; -import type { AttachedPolicy, PolicySpec } from './Types'; -import PolicyConfigurationEditDrawer from './GlobalComponents/PolicyConfigurationEditDrawer'; -import GlobalPolicyContext from './GlobalPolicyContext'; +import type { AttachedPolicy, PolicySpec } from '../Types'; +import PolicyConfigurationEditDrawer from '../GlobalSpecificComponents/PolicyConfigurationEditDrawer'; +import GlobalPolicyContext from '../GlobalPolicyContext'; interface AttachedPolicyCardProps { policyObj: AttachedPolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyList.tsx similarity index 96% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyList.tsx index 2cc56749dcd..a29e7b3ea27 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/AttachedPolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyList.tsx @@ -26,8 +26,8 @@ import { import AttachedPolicyListShared from 'AppComponents/Shared/PoliciesUI/AttachedPolicyList'; import AttachedPolicyCard from './AttachedPolicyCard'; -import type { AttachedPolicy, PolicySpec } from './Types'; -import GlobalPolicyContext from './GlobalPolicyContext'; +import type { AttachedPolicy, PolicySpec } from '../Types'; +import GlobalPolicyContext from '../GlobalPolicyContext'; interface AttachedPolicyListProps { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/FlowArrow.tsx similarity index 100% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/FlowArrow.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/FlowArrow.tsx diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx similarity index 98% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx index 167bdeae794..05da14b1d66 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx @@ -19,9 +19,9 @@ import React, { FC, useContext, useEffect, useState } from 'react'; import PoliciesExpansionShared from 'AppComponents/Shared/PoliciesUI/PoliciesExpansion'; import PolicyDropzone from './PolicyDropzone'; -import type { AttachedPolicy, Policy, PolicySpec } from './Types'; -import FlowArrow from './Components/FlowArrow'; -import GlobalPolicyContext from './GlobalPolicyContext'; +import type { AttachedPolicy, Policy, PolicySpec } from '../Types'; +import FlowArrow from './FlowArrow'; +import GlobalPolicyContext from '../GlobalPolicyContext'; const defaultPolicyForMigration = { id: '', diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PolicyDropzone.tsx similarity index 94% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PolicyDropzone.tsx index 2ee9ba68b6a..9b8c036ea83 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PolicyDropzone.tsx @@ -19,9 +19,9 @@ import React, { FC, useState } from 'react'; import { useDrop } from 'react-dnd'; import PolicyDropzoneShared from 'AppComponents/Shared/PoliciesUI/PolicyDropzone'; -import type { AttachedPolicy, Policy, PolicySpec } from './Types'; +import type { AttachedPolicy, Policy, PolicySpec } from '../Types'; import AttachedPolicyList from './AttachedPolicyList'; -import PolicyConfiguringDrawer from './GlobalComponents/PolicyConfiguringDrawer'; +import PolicyConfiguringDrawer from '../GlobalSpecificComponents/PolicyConfiguringDrawer'; interface PolicyDropzoneProps { policyDisplayStartDirection: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/TabPanel.tsx similarity index 95% rename from portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx rename to portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/TabPanel.tsx index 0b54f0be55e..540f1d5c902 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/components/TabPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/TabPanel.tsx @@ -19,7 +19,7 @@ import React, { FC } from 'react'; import TabPanelShared from 'AppComponents/Shared/PoliciesUI/TabPanel'; import type { Policy } from '../Types'; -import DraggablePolicyCard from '../GlobalComponents/DraggablePolicyCard'; +import DraggablePolicyCard from '../GlobalSpecificComponents/DraggablePolicyCard'; interface TabPanelProps { children?: React.ReactNode; From f37255d2f6060131d3336b7adc45306d48865caf Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 10 Nov 2023 10:22:05 +0530 Subject: [PATCH 071/102] Add form validation to global policies form --- .../GlobalSpecificComponents/Policies.tsx | 111 +++++++++++------- 1 file changed, 71 insertions(+), 40 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index cf6f923c217..ba85058fb50 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -135,8 +135,8 @@ const Policies: FC = ({ (policy: Policy) => policy.supportedGateways.includes('ChoreoConnect')); } setPolicies(filteredByGatewayTypeList); - }).catch((error) => { - console.error(error); + }).catch((/* error */) => { + // console.error(error); Alert.error('Error occurred while retrieving the policy list'); }); } @@ -206,8 +206,9 @@ const Policies: FC = ({ setName(responseUpdated.displayName); setAppliedGatewayLabels(responseUpdated.appliedGatewayLabels); }) - .catch((error) => { - console.error(error); + .catch((/* error */) => { + // console.error(error); + Alert.error('Error occurred while retrieving the policy'); }) .finally(() => { setLoading(false); @@ -237,6 +238,21 @@ const Policies: FC = ({ setGlobalLevelPolicies(newGlobalLevelPolicies); } + /** + * Function to rearrange the API Operation ordering. + * @param {string} oldIndex original index of the policy. + * @param {string} newIndex new index of the policy. + * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault. + */ + const rearrangeGlobalOperations = ( + oldIndex: number, newIndex: number, currentFlow: string, + ) => { + const newAPIPolicies: any = cloneDeep(globalLevelPolicies); + const policyArray = newAPIPolicies[currentFlow]; + newAPIPolicies[currentFlow] = arrayMove(policyArray, oldIndex, newIndex); + setGlobalLevelPolicies(newAPIPolicies); + }; + /** * Triggers as we saved a drag`n`droped policy. * @param {any} updatedOperation Saving info as @@ -269,19 +285,27 @@ const Policies: FC = ({ } /** - * Function to rearrange the API Operation ordering. - * @param {string} oldIndex original index of the policy. - * @param {string} newIndex new index of the policy. - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault. + * Function to validate before saving or updating. + * @returns {boolean} true if all the required fields are filled. */ - const rearrangeGlobalOperations = ( - oldIndex: number, newIndex: number, currentFlow: string, - ) => { - const newAPIPolicies: any = cloneDeep(globalLevelPolicies); - const policyArray = newAPIPolicies[currentFlow]; - newAPIPolicies[currentFlow] = arrayMove(policyArray, oldIndex, newIndex); - setGlobalLevelPolicies(newAPIPolicies); - }; + const validate = () => { + let isValidate = true; + if (name === '') { + Alert.error('Policy name cannot be empty'); + isValidate = false; + } + if (description === '') { + Alert.error('Policy description cannot be empty'); + isValidate = false; + } + if ((!globalLevelPolicies.request || globalLevelPolicies.request.length === 0) && + (!globalLevelPolicies.response || globalLevelPolicies.response.length === 0) && + (!globalLevelPolicies.fault || globalLevelPolicies.fault.length === 0)) { + Alert.error('Policy mapping cannot be empty'); + isValidate = false; + } + return isValidate; + } /** * Function to save a policy mapping. @@ -289,20 +313,24 @@ const Policies: FC = ({ const save = () => { setLoading(true); - // call the backend API - const requestBody = { - "id": uuidv4(), - "policyMapping": globalLevelPolicies, - "description": description, - "displayName": name, - "appliedGatewayLabels": [] - }; - // API.postDeployGatewayPolicies(); - console.log("creating a new global policy mapping: 'POST' '/gateway-policies"); - console.log("request body", requestBody); + if (validate()){ + // call the backend API + const requestBody = { + "id": uuidv4(), + "policyMapping": globalLevelPolicies, + "description": description, + "displayName": name, + "appliedGatewayLabels": [] + }; + // API.postDeployGatewayPolicies(); + console.log("creating a new global policy mapping: 'POST' '/gateway-policies"); + console.log("request body", requestBody); + + setLoading(false); + history.goBack(); + } setLoading(false); - history.goBack(); } /** @@ -311,20 +339,23 @@ const Policies: FC = ({ const update = () => { setLoading(true); - // call the backend API - const requestBody = { - "id": policyID, - "policyMapping": globalLevelPolicies, - "description": description, - "displayName": name, - "appliedGatewayLabels": appliedGatewayLabels - }; - // API.putGatewayPolicies(); - console.log("Update global policy mapping: 'PUT' '/gateway-policies/" + {policyID}); - console.log("request body", requestBody); + if (validate()){ + // call the backend API + const requestBody = { + "id": policyID, + "policyMapping": globalLevelPolicies, + "description": description, + "displayName": name, + "appliedGatewayLabels": appliedGatewayLabels + }; + // API.putGatewayPolicies(); + console.log("Update global policy mapping: 'PUT' '/gateway-policies/" + {policyID}); + console.log("request body", requestBody); + setLoading(false); + history.goBack(); + } setLoading(false); - history.goBack(); } /** From cb15c437d8d4ad13329960e8aa2d50fc3b44b758 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 10 Nov 2023 10:31:55 +0530 Subject: [PATCH 072/102] Improve the code security --- .../app/components/GlobalPolicies/Listing/Listing.tsx | 11 +++++++---- .../Policies/GlobalSpecificComponents/General.tsx | 6 ++++-- .../Policies/SharedComponents/AttachedPolicyCard.tsx | 8 ++++---- .../Policies/SharedComponents/PoliciesExpansion.tsx | 10 +++++++--- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 8b130038f15..c44a515251c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -31,6 +31,7 @@ import { TableCell, TableRow } from '@material-ui/core'; +import Alert from 'AppComponents/Shared/Alert'; import Icon from '@material-ui/core/Icon'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; @@ -247,8 +248,9 @@ const Listing: React.FC = () => { .then((response) => { setPolicies(response.list); }) - .catch((error) => { - console.error(error); + .catch((/* error */) => { + // console.error(error); + Alert.error('Error while fetching policies'); setnotFound(true); }) .finally(() => { @@ -266,8 +268,9 @@ const Listing: React.FC = () => { .then((response: any) => { setEnvironments(response.environment); }) - .catch((error: any) => { - console.error(error); + .catch((/* error */) => { + // console.error(error); + Alert.error('Error while fetching settings'); setnotFound(true); }) .finally(() => { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx index d8192dea13c..938b522649c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx @@ -32,6 +32,7 @@ import { FormControl, FormHelperText, } from '@material-ui/core'; +import Alert from 'AppComponents/Shared/Alert'; import { FormattedMessage, useIntl } from 'react-intl'; import { Progress } from 'AppComponents/Shared'; import { PolicySpec, GlobalPolicy, AttachedPolicy, Policy, PolicySpecAttribute } from '../Types'; @@ -172,8 +173,9 @@ const General: FC = ({ defaultMessage: 'Please enter a valid input', }); } - } catch(e) { - console.error(e); + } catch { + // console.error(error); + Alert.error('Error while validating the regex'); } } } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx index 46a8039edfa..8450762cccc 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx @@ -95,8 +95,8 @@ const AttachedPolicyCard: FC = ({ .then((globalPolicyResponse) => { Utils.forceDownload(globalPolicyResponse); }) - .catch((error) => { - console.error(error); + .catch((/* error */) => { + // console.error(error); Alert.error( = ({ .then((commonPolicyResponse) => { Utils.forceDownload(commonPolicyResponse); }) - .catch((error) => { - console.error(error); + .catch((/* error */) => { + // console.error(error); Alert.error( = ({ if (policyObj) { requestFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { - console.error("Cannot find policyObj for policyId: " + policyId); + // console.error("Cannot find policyObj for policyId: " + policyId); + Alert.error("Cannot find policyObj for policyId: " + policyId); } } } @@ -151,7 +153,8 @@ const PoliciesExpansion: FC = ({ if (policyObj) { responseFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { - console.error("Cannot find policyObj for policyId: " + policyId); + // console.error("Cannot find policyObj for policyId: " + policyId); + Alert.error("Cannot find policyObj for policyId: " + policyId); } } } @@ -182,7 +185,8 @@ const PoliciesExpansion: FC = ({ if (policyObj) { faultFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { - console.error("Cannot find policyObj for policyId: " + policyId); + // console.error("Cannot find policyObj for policyId: " + policyId); + Alert.error("Cannot find policyObj for policyId: " + policyId); } } } From ea139d0c3c004dee714526bcdb2b49ab5d73c3db Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 10 Nov 2023 15:14:54 +0530 Subject: [PATCH 073/102] Improve the expanded area --- .../GlobalPolicies/Listing/Listing.tsx | 43 +++++++++++-------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index c44a515251c..4ccc5facebb 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -29,9 +29,11 @@ import { Table, TableBody, TableCell, - TableRow + TableRow, + Paper } from '@material-ui/core'; -import Alert from 'AppComponents/Shared/Alert'; +import Alert from '@material-ui/lab/Alert'; +import APIMAlert from 'AppComponents/Shared/Alert'; import Icon from '@material-ui/core/Icon'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; @@ -250,7 +252,7 @@ const Listing: React.FC = () => { }) .catch((/* error */) => { // console.error(error); - Alert.error('Error while fetching policies'); + APIMAlert.error('Error while fetching policies'); setnotFound(true); }) .finally(() => { @@ -270,7 +272,7 @@ const Listing: React.FC = () => { }) .catch((/* error */) => { // console.error(error); - Alert.error('Error while fetching settings'); + APIMAlert.error('Error while fetching settings'); setnotFound(true); }) .finally(() => { @@ -444,6 +446,13 @@ const Listing: React.FC = () => { const policiesList = getPoliciesList(); + const shortName = (name: string) => { + if (name.length > 20) { + return `${name.substring(0, 20)}...`; + } + return name; + } + /** * Columns for the MUI table. */ @@ -548,24 +557,24 @@ const Listing: React.FC = () => { return ( - - - Descrpiton : {policy.description} - + + {policy.description} - + {gatewayList.map((gateway: string) => ( - + - + + + - + {isDeployed(gateway, policy.appliedGatewayLabels) ? ( - ) : ( -
- + From 315abe6e95366586c67757b8ef1330629994b1c4 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 10 Nov 2023 15:35:03 +0530 Subject: [PATCH 074/102] Refactor elemet IDs --- .../GlobalPolicies/Listing/Listing.tsx | 13 ++++--------- .../DraggablePolicyCard.tsx | 2 +- .../GatewaySelector.tsx | 13 +++++-------- .../GlobalSpecificComponents/General.tsx | 19 +++++++++---------- .../GlobalSpecificComponents/Policies.tsx | 4 ++-- .../PolicyConfigurationEditDrawer.tsx | 2 +- .../PolicyConfiguringDrawer.tsx | 2 +- .../GlobalSpecificComponents/PolicyList.tsx | 2 +- .../SharedComponents/AttachedPolicyCard.tsx | 4 ++-- 9 files changed, 26 insertions(+), 35 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 4ccc5facebb..297d66f2a88 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -45,7 +45,6 @@ import OnboardingMenuCard from 'AppComponents/Shared/Onboarding/OnboardingMenuCa import Onboarding from 'AppComponents/Shared/Onboarding/Onboarding'; import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; import ResourceNotFoundError from 'AppComponents/Base/Errors/ResourceNotFoundError'; -import CONSTS from 'AppData/Constants'; import { Link } from 'react-router-dom'; import GlobalPolicyGatewaySelector from './GlobalPolicyGatewaySelector'; @@ -613,23 +612,19 @@ const Listing: React.FC = () => { title={ } subTitle={ } > ); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/DraggablePolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/DraggablePolicyCard.tsx index 23814b12501..ffcdc57fb30 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/DraggablePolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/DraggablePolicyCard.tsx @@ -161,7 +161,7 @@ const DraggablePolicyCard: React.FC = ({ placement='top' title={ } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/GatewaySelector.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/GatewaySelector.tsx index 2adabc2013a..824a9809776 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/GatewaySelector.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/GatewaySelector.tsx @@ -180,7 +180,7 @@ const GatewaySelector: FC = ({ @@ -188,11 +188,8 @@ const GatewaySelector: FC = ({ @@ -203,7 +200,7 @@ const GatewaySelector: FC = ({ variant='outlined' > @@ -213,7 +210,7 @@ const GatewaySelector: FC = ({ variant='contained' > diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx index 938b522649c..114844b70c2 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx @@ -280,7 +280,7 @@ const General: FC = ({
@@ -289,23 +289,22 @@ const General: FC = ({
{policySpec.description ? ( ) : ( )} @@ -415,7 +414,7 @@ const General: FC = ({ className={classes.btn} > @@ -430,13 +429,13 @@ const General: FC = ({ ? <> : <> diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index ba85058fb50..8cfd9786410 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -485,12 +485,12 @@ const Policies: FC = ({ > {isCreateNew ? : } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfigurationEditDrawer.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfigurationEditDrawer.tsx index cb54956ec07..250d49f923a 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfigurationEditDrawer.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyConfigurationEditDrawer.tsx @@ -133,7 +133,7 @@ const PolicyConfigurationEditDrawer: FC = ({ primary={ = ({ primary={ = ({policyList, fetchPolicies, isChoreoCon diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx index 8450762cccc..bcdec040f12 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx @@ -99,7 +99,7 @@ const AttachedPolicyCard: FC = ({ // console.error(error); Alert.error( , ); @@ -116,7 +116,7 @@ const AttachedPolicyCard: FC = ({ // console.error(error); Alert.error( , ); From eb97c6e5b3595b97d783a0e012c43b918adeb7fa Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 10 Nov 2023 15:36:23 +0530 Subject: [PATCH 075/102] Update en and raw.en files --- .../main/webapp/site/public/locales/en.json | 132 ++++++++++++++++-- .../webapp/site/public/locales/raw.en.json | 64 ++++++++- 2 files changed, 183 insertions(+), 13 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index f739762d84c..44649054b18 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -6071,12 +6071,6 @@ "value": "Save" } ], - "Apis.Details.Policies.SaveOperationPolicies.update": [ - { - "type": 0, - "value": "Update" - } - ], "Apis.Details.ProductResources.ProductResourcesEdit.api.resources": [ { "type": 0, @@ -8783,16 +8777,138 @@ "value": "Error while validating the imported schema" } ], + "Global.Details.Policies.AttachedPolicyCard.apiSpecificPolicy.download.error": [ + { + "type": 0, + "value": "Something went wrong while downloading the policy" + } + ], + "Global.Details.Policies.AttachedPolicyCard.commonPolicy.download.error": [ + { + "type": 0, + "value": "Something went wrong while downloading the policy" + } + ], + "Global.Details.Policies.AttachedPolicyForm.General.cancel": [ + { + "type": 0, + "value": "Cancel" + } + ], + "Global.Details.Policies.AttachedPolicyForm.General.description.title": [ + { + "type": 0, + "value": "Description" + } + ], + "Global.Details.Policies.AttachedPolicyForm.General.description.value.not.provided": [ + { + "type": 0, + "value": "Oops! Looks like this policy does not have a description" + } + ], + "Global.Details.Policies.AttachedPolicyForm.General.description.value.provided": [ + { + "type": 1, + "value": "description" + } + ], + "Global.Details.Policies.AttachedPolicyForm.General.reset": [ + { + "type": 0, + "value": "Reset" + } + ], + "Global.Details.Policies.AttachedPolicyForm.General.save": [ + { + "type": 0, + "value": "Save" + } + ], + "Global.Details.Policies.AttachedPolicyForm.General.saving": [ + { + "type": 0, + "value": "Saving" + } + ], + "Global.Details.Policies.DraggablePolicyCard.policy.view": [ + { + "type": 0, + "value": "View" + } + ], + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.cancel": [ + { + "type": 0, + "value": "Cancel" + } + ], + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.content": [ + { + "type": 0, + "value": "Changing the gateway type will remove all existing policies" + } + ], + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.proceed": [ + { + "type": 0, + "value": "Proceed" + } + ], + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.title": [ + { + "type": 0, + "value": "Change Gateway Type" + } + ], + "Global.Details.Policies.PolicyConfigurationEditDrawer.title": [ + { + "type": 0, + "value": "Configure " + }, + { + "type": 1, + "value": "policy" + } + ], + "Global.Details.Policies.PolicyConfiguringDrawer.title": [ + { + "type": 0, + "value": "Configure " + }, + { + "type": 1, + "value": "policy" + } + ], + "Global.Details.Policies.PolicyList.title": [ + { + "type": 0, + "value": "Policy List" + } + ], + "Global.Details.Policies.SaveOperationPolicies.save": [ + { + "type": 0, + "value": "Save" + } + ], + "Global.Details.Policies.SaveOperationPolicies.update": [ + { + "type": 0, + "value": "Update" + } + ], "GlobalPolicies.Listing.onboarding.create.new": [ { "type": 0, - "value": "Let’s get started !" + "value": "Let’s get started!" } ], "GlobalPolicies.Listing.onboarding.policies.tooltip": [ { "type": 0, - "value": "Policies provide the capability to alter the behavior of API resources" + "value": "Currently there are no policies to show" } ], "GlobalPolicies.Listing.policies.title.add.new.policy": [ diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 756bb24adc3..cc9090352a4 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -2886,9 +2886,6 @@ "Apis.Details.Policies.SaveOperationPolicies.save": { "defaultMessage": "Save" }, - "Apis.Details.Policies.SaveOperationPolicies.update": { - "defaultMessage": "Update" - }, "Apis.Details.ProductResources.ProductResourcesEdit.api.resources": { "defaultMessage": "Select API Resources" }, @@ -4197,11 +4194,68 @@ "Error.while.validating.the.imported.graphQLSchema": { "defaultMessage": "Error while validating the imported schema" }, + "Global.Details.Policies.AttachedPolicyCard.apiSpecificPolicy.download.error": { + "defaultMessage": "Something went wrong while downloading the policy" + }, + "Global.Details.Policies.AttachedPolicyCard.commonPolicy.download.error": { + "defaultMessage": "Something went wrong while downloading the policy" + }, + "Global.Details.Policies.AttachedPolicyForm.General.cancel": { + "defaultMessage": "Cancel" + }, + "Global.Details.Policies.AttachedPolicyForm.General.description.title": { + "defaultMessage": "Description" + }, + "Global.Details.Policies.AttachedPolicyForm.General.description.value.not.provided": { + "defaultMessage": "Oops! Looks like this policy does not have a description" + }, + "Global.Details.Policies.AttachedPolicyForm.General.description.value.provided": { + "defaultMessage": "{description}" + }, + "Global.Details.Policies.AttachedPolicyForm.General.reset": { + "defaultMessage": "Reset" + }, + "Global.Details.Policies.AttachedPolicyForm.General.save": { + "defaultMessage": "Save" + }, + "Global.Details.Policies.AttachedPolicyForm.General.saving": { + "defaultMessage": "Saving" + }, + "Global.Details.Policies.DraggablePolicyCard.policy.view": { + "defaultMessage": "View" + }, + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.cancel": { + "defaultMessage": "Cancel" + }, + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.content": { + "defaultMessage": "Changing the gateway type will remove all existing policies" + }, + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.proceed": { + "defaultMessage": "Proceed" + }, + "Global.Details.Policies.GatewaySelector.change.gateway.confirm.title": { + "defaultMessage": "Change Gateway Type" + }, + "Global.Details.Policies.PolicyConfigurationEditDrawer.title": { + "defaultMessage": "Configure {policy}" + }, + "Global.Details.Policies.PolicyConfiguringDrawer.title": { + "defaultMessage": "Configure {policy}" + }, + "Global.Details.Policies.PolicyList.title": { + "defaultMessage": "Policy List" + }, + "Global.Details.Policies.SaveOperationPolicies.save": { + "defaultMessage": "Save" + }, + "Global.Details.Policies.SaveOperationPolicies.update": { + "defaultMessage": "Update" + }, "GlobalPolicies.Listing.onboarding.create.new": { - "defaultMessage": "Let’s get started !" + "defaultMessage": "Let’s get started!" }, "GlobalPolicies.Listing.onboarding.policies.tooltip": { - "defaultMessage": "Policies provide the capability to alter the behavior of API resources" + "defaultMessage": "Currently there are no policies to show" }, "GlobalPolicies.Listing.policies.title.add.new.policy": { "defaultMessage": "Add New Global Policy" From 254f4bdb2ed236b050fa3c1a67f5aec6f0d6e0e7 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Mon, 13 Nov 2023 16:12:44 +0530 Subject: [PATCH 076/102] Improve the Global Policies Icon --- .../src/app/components/Shared/CustomIcon.jsx | 37 ++++--------------- 1 file changed, 8 insertions(+), 29 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx index d051e809332..bcac6f7b49c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx @@ -418,8 +418,6 @@ export default function CustomIcon(props) { ); } else if (icon === 'global-policies') { - // a copy of normal policies for now - // this needs be changed to a new icon later return (
- - - = ({ @@ -507,7 +476,6 @@ const Policies: FC = ({ diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PoliciesSection.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PoliciesSection.tsx index 864c25efd88..73619e82416 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PoliciesSection.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PoliciesSection.tsx @@ -23,7 +23,6 @@ import type { Policy, PolicySpec } from '../Types'; import PoliciesExpansion from '../SharedComponents/PoliciesExpansion'; interface PolicySectionProps { - isChoreoConnectEnabled: boolean; allPolicies: PolicySpec[] | null; policyList: Policy[]; } @@ -33,7 +32,6 @@ interface PolicySectionProps { * @returns {TSX} Policy management page to render. */ const PoliciesSection: FC = ({ - isChoreoConnectEnabled, allPolicies, policyList, }) => { @@ -51,7 +49,7 @@ const PoliciesSection: FC = ({ target={null} verb='None' allPolicies={allPolicies} - isChoreoConnectEnabled={isChoreoConnectEnabled} + isChoreoConnectEnabled={false} policyList={policyList} isAPILevelPolicy /> diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx index a13b129c0a7..cdf63477019 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx @@ -53,7 +53,6 @@ const useStyles = makeStyles(() => ({ interface PolicyListPorps { policyList: Policy[]; fetchPolicies: () => void; - isChoreoConnectEnabled: boolean; } /** @@ -61,14 +60,10 @@ interface PolicyListPorps { * @param {JSON} props Input props from parent components. * @returns {TSX} List of policies local to the API segment. */ -const PolicyList: FC = ({policyList, fetchPolicies, isChoreoConnectEnabled}) => { +const PolicyList: FC = ({policyList, fetchPolicies}) => { const classes = useStyles(); const [selectedTab, setSelectedTab] = useState(0); // Request flow related tab is active by default - let gatewayType = CONSTS.GATEWAY_TYPE.synapse; - - if (isChoreoConnectEnabled) { - gatewayType = CONSTS.GATEWAY_TYPE.choreoConnect; - } + const gatewayType = CONSTS.GATEWAY_TYPE.synapse; return ( @@ -104,13 +99,11 @@ const PolicyList: FC = ({policyList, fetchPolicies, isChoreoCon id='response-tab' aria-controls='response-tabpanel' /> - {!isChoreoConnectEnabled && ( - Fault} - id='fault-tab' - aria-controls='fault-tabpanel' - />) - } + Fault} + id='fault-tab' + aria-controls='fault-tabpanel' + /> = ({policyList, fetchPolicies, isChoreoCon selectedTab={selectedTab} fetchPolicies={fetchPolicies} /> - {!isChoreoConnectEnabled && ( - - policy.applicableFlows.includes('fault'), - )} - index={2} - selectedTab={selectedTab} - fetchPolicies={fetchPolicies} - /> - )} + + policy.applicableFlows.includes('fault'), + )} + index={2} + selectedTab={selectedTab} + fetchPolicies={fetchPolicies} + />
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyPanel.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyPanel.tsx index bd709cd5f76..a4932d1ad94 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyPanel.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyPanel.tsx @@ -23,7 +23,6 @@ import type { Policy, PolicySpec } from '../Types'; interface PolicyPanelProps { children?: React.ReactNode; - isChoreoConnectEnabled: boolean; allPolicies: PolicySpec[] | null; policyList: Policy[]; } @@ -35,7 +34,6 @@ interface PolicyPanelProps { * @returns {TSX} Tab panel. */ const PolicyPanel: FC = ({ - isChoreoConnectEnabled, allPolicies, policyList, }) => { @@ -43,7 +41,6 @@ const PolicyPanel: FC = ({ return ( From cb18f309d421860066174a63ba2b56a036de1be7 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 15 Nov 2023 12:12:25 +0530 Subject: [PATCH 080/102] Improved the listing UI --- .../GlobalPolicies/Listing/Listing.tsx | 28 ++++--------------- 1 file changed, 5 insertions(+), 23 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index c5e1d012296..d5d61c76c9f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -137,15 +137,14 @@ const Listing: React.FC = () => { promisedPolicies .then((response: any) => { setPolicies(response.body.list); + setLoading(false); }) .catch((/* error */) => { // console.error(error); APIMAlert.error('Error while fetching policies'); setnotFound(true); - }) - .finally(() => { setLoading(false); - }); + }) }; /** @@ -168,23 +167,6 @@ const Listing: React.FC = () => { }); }; - /** - * Provides the gateway specific policies list (In there, we can filter the list). - * - * @returns {array} Return the policy list after filtering. - */ - const getPoliciesList = () => { - // let gatewayType = CONSTS.GATEWAY_TYPE.synapse; - // if (isAllowedToFilterCCPolicies) { - // gatewayType = CONSTS.GATEWAY_TYPE.choreoConnect; - // } - // if (policies) { - // return policies.filter((policy) => policy.appliedGatewayLabels.includes(gatewayType)); - // } - // return []; - return policies; - } - /** * Check if the gateway is deployed for the Golbal Policy. * @@ -333,7 +315,7 @@ const Listing: React.FC = () => { policies?.sort((a: Policy, b: Policy) => a.displayName.localeCompare(b.displayName)); - const policiesList = getPoliciesList(); + const policiesList = policies; const shortName = (name: string) => { if (name.length > 20) { @@ -525,7 +507,7 @@ const Listing: React.FC = () => { /** * If there are no policies, then show the onboarding page. */ - if (policies && policies.length === 0) { + if (policies && policies.length === 0 && !loading) { return ( { } if (loading) { - return ; + return ; } if (notFound || !policies) { From 4f85e1d77a56fa52f2b95a034befff443267b5e3 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 15 Nov 2023 12:51:11 +0530 Subject: [PATCH 081/102] Connect backend to delete policy --- .../GlobalPolicies/Listing/Listing.tsx | 20 +++++++++++++------ .../main/webapp/source/src/app/data/api.js | 15 ++++++++++++++ 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index d5d61c76c9f..3b3b04ffbef 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -289,12 +289,20 @@ const Listing: React.FC = () => { setIsDialogOpen(false); setLoading(true); // call the backend API - // API.deleteGatewayPolicies(); - console.log("delete policy: 'DELETE' '/gateway-policies/{gatewayPolicyMappingId}"); - // If successful, remove it from the UI - const updatedPolicies = policies.filter((policy) => policy.id !== gatewayPolicyMappingId); - setPolicies(updatedPolicies); - setLoading(false); + const promise = API.deleteGatewayPolicyByPolicyId(gatewayPolicyMappingId); + promise + .then(() => { + // If successful, remove it from the UI + const updatedPolicies = policies.filter((policy) => policy.id !== gatewayPolicyMappingId); + setPolicies(updatedPolicies); + APIMAlert.success('Policy deleted successfully'); + setLoading(false); + }) + .catch((/* error */) => { + // console.error(error); + APIMAlert.error('Error while deleting the policy'); + setLoading(false); + }); } useEffect(() => { diff --git a/portals/publisher/src/main/webapp/source/src/app/data/api.js b/portals/publisher/src/main/webapp/source/src/app/data/api.js index 446e247647e..5f843e5f0cc 100644 --- a/portals/publisher/src/main/webapp/source/src/app/data/api.js +++ b/portals/publisher/src/main/webapp/source/src/app/data/api.js @@ -3089,6 +3089,21 @@ class API extends Resource { ); }); } + + /** + * Delete a global policy + * @param {String} gatewayPolicyMappingId UUID of the global policy to delete + * @returns {Promise} Response + */ + static deleteGatewayPolicyByPolicyId(gatewayPolicyMappingId) { + const restApiClient = new APIClientFactory().getAPIClient(Utils.getCurrentEnvironment(), Utils.CONST.API_CLIENT).client; + return restApiClient.then(client => { + return client.apis['Gateway Policies'].deleteGatewayPolicyByPolicyId( + {gatewayPolicyMappingId}, + this._requestMetaData(), + ); + }); + } } API.CONSTS = { From a8fbabdf21c956cc4fa9a62e63296bc90859c150 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 15 Nov 2023 15:16:22 +0530 Subject: [PATCH 082/102] Connect Backend to Edit Global Policies --- .../GlobalSpecificComponents/Policies.tsx | 65 ++++++++----------- .../main/webapp/source/src/app/data/api.js | 51 +++++++++++---- 2 files changed, 66 insertions(+), 50 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index 52409e31bde..e587ceda73f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -179,36 +179,12 @@ const Policies: FC = ({ }; const fetchGlobalPolicyByID = () => { - // // hardcoded response - console.log("fetching global policy mapping: 'GET' '/gateway-policies/" + {policyID}); - const promisedPolicy = Promise.resolve({ - id: policyID, - policyMapping: { - request: [ - { - policyName: "addHeader", - policyVersion: "v1", - policyId: "f10ee49b-779b-4109-843c-884f9341df91", - parameters: { - headerName: 'a', - headerValue: 'a', - } - } - ], - response: [], - fault: [] - }, - description: "Set header value to the request with item type", - displayName: "item_type_setter", - appliedGatewayLabels: [ - "gatewayLabel_1" - ] - }); - // hardcoded response ends - + setLoading(true); + const gatewayPolicyMappingId = String(policyID); + const promisedPolicy = API.getGatewayPolicyMappingContentByPolicyMappingId(gatewayPolicyMappingId); promisedPolicy .then((response) => { - const responseUpdated = assignUUIDs(response); + const responseUpdated = assignUUIDs(response.body); setGlobalLevelPolicies(responseUpdated.policyMapping); setDescription(responseUpdated.description); setName(responseUpdated.displayName); @@ -225,7 +201,7 @@ const Policies: FC = ({ useEffect(() => { fetchPolicies(); - if (!isCreateNew){ + if (!isCreateNew && policyID){ fetchGlobalPolicyByID(); } }, []); @@ -270,6 +246,7 @@ const Policies: FC = ({ updatedOperation: any, currentFlow: string, ) => { const newGlobalLevelPolicies: any = cloneDeep(globalLevelPolicies); + // Check whether the policy operation already exists const flowPolicy = (newGlobalLevelPolicies)[currentFlow].find( (p: any) => p.policyId === updatedOperation.policyId && @@ -277,10 +254,10 @@ const Policies: FC = ({ ); if (flowPolicy) { - // Edit policy + // Edit policy operation if already exists flowPolicy.parameters = { ...updatedOperation.parameters }; } else { - // Add new policy + // Add new policy operation const uuid = uuidv4(); (newGlobalLevelPolicies)[currentFlow].push({ ...updatedOperation, uuid } ); @@ -354,19 +331,31 @@ const Policies: FC = ({ if (validate()){ // call the backend API + const policyMapping = removeUUIDs(globalLevelPolicies); const requestBody = { "id": policyID, - "policyMapping": globalLevelPolicies, + "policyMapping": policyMapping, "description": description, "displayName": name, "appliedGatewayLabels": appliedGatewayLabels }; - // API.putGatewayPolicies(); - console.log("Update global policy mapping: 'PUT' '/gateway-policies/" + {policyID}); - console.log("request body", requestBody); - - setLoading(false); - history.goBack(); + const gatewayPolicyMappingId = String(policyID); + const promise = API.updateGatewayPoliciesToFlows(gatewayPolicyMappingId, requestBody); + promise + .then((response) => { + if (response.status === 200 || response.status === 201) { + setLoading(false); + Alert.success('Policy mapping updated successfully'); + history.goBack(); + } + else { + Alert.error(response.body.message); + } + }) + .catch((/* error */) => { + // console.error(error); + Alert.error('Error occurred while updating the policy mapping'); + }) } setLoading(false); } diff --git a/portals/publisher/src/main/webapp/source/src/app/data/api.js b/portals/publisher/src/main/webapp/source/src/app/data/api.js index 5f843e5f0cc..db24828bb57 100644 --- a/portals/publisher/src/main/webapp/source/src/app/data/api.js +++ b/portals/publisher/src/main/webapp/source/src/app/data/api.js @@ -3056,11 +3056,7 @@ class API extends Resource { const restApiClient = new APIClientFactory().getAPIClient(Utils.getCurrentEnvironment(), Utils.CONST.API_CLIENT).client; return restApiClient.then(client => { return client.apis['Gateway Policies'].getAllGatewayPolicies( - { - limit, - offset, - query - }, + { limit, offset, query }, this._requestMetaData(), ); }); @@ -3073,19 +3069,14 @@ class API extends Resource { */ static addGatewayPoliciesToFlows(body) { const apiClient = new APIClientFactory().getAPIClient(Utils.getCurrentEnvironment(), Utils.CONST.API_CLIENT).client; - const payload = { - 'Content-Type': 'multipart/form-data' - }; const requestBody = { requestBody: body, }; return apiClient.then(client => { return client.apis['Gateway Policies'].addGatewayPoliciesToFlows( - payload, + {}, requestBody, - this._requestMetaData({ - 'Content-Type': 'multipart/form-data', - }), + tthis._requestMetaData(), ); }); } @@ -3104,6 +3095,42 @@ class API extends Resource { ); }); } + + /** + * Get the global policy by ID + * @param {String} gatewayPolicyMappingId UUID of the global policy + * @returns {Promise} Response containing the information of the requested global policy + */ + static getGatewayPolicyMappingContentByPolicyMappingId(gatewayPolicyMappingId) { + const restApiClient = new APIClientFactory().getAPIClient(Utils.getCurrentEnvironment(), Utils.CONST.API_CLIENT).client; + return restApiClient.then(client => { + return client.apis['Gateway Policies'].getGatewayPolicyMappingContentByPolicyMappingId( + {gatewayPolicyMappingId}, + this._requestMetaData(), + ); + }); + } + + /** + * Update the global policy by ID + * @param {String} gatewayPolicyMappingId UUID of the global policy + * @param {Object} body policy schema which holds the updated data + * @returns {Promise} Response containing the information of the requested global policy + */ + static updateGatewayPoliciesToFlows(gatewayPolicyMappingId, body) { + const restApiClient = new APIClientFactory().getAPIClient(Utils.getCurrentEnvironment(), Utils.CONST.API_CLIENT).client; + const requestBody = { + requestBody: body, + }; + console.log(body); + return restApiClient.then(client => { + return client.apis['Gateway Policies'].updateGatewayPoliciesToFlows( + {gatewayPolicyMappingId}, + requestBody, + this._requestMetaData(), + ); + }); + } } API.CONSTS = { From d46b5bcbac825acbcb39c82671ab7fe5616ed438 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 15 Nov 2023 17:24:05 +0530 Subject: [PATCH 083/102] Connect backend to deploy and undeploy --- .../GlobalPolicies/Listing/Listing.tsx | 114 +++++++++++------- .../main/webapp/source/src/app/data/api.js | 22 +++- 2 files changed, 90 insertions(+), 46 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 3b3b04ffbef..7fb0f4f61c6 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -99,6 +99,11 @@ interface Policy { appliedGatewayLabels: string[]; } +interface Deployment { + gatewayLabel: string; + gatewayDeployment: boolean; +} + interface Environment { id: string; name: string; @@ -182,6 +187,37 @@ const Listing: React.FC = () => { return false; } + // Get the applied gateway labels as an array list for a specific policy by ID + const getAppliedGatewayLabelsById = (id: string) => { + const policy = policies.find(item => item.id === id); + return policy ? policy.appliedGatewayLabels : []; + } + + // Get the deployment array for a specific policy by ID + // [{"gatewayLabel": "Default","gatewayDeployment": false},{"gatewayLabel": "GateWay1","gatewayDeployment": false}] + const getDeploymentArray = (policyId: string) => { + const appliedGatewayList = getAppliedGatewayLabelsById(policyId); + const allGatewayList = environments.map((env: any) => { + return env.name; + }); + return allGatewayList.map(gatewayLabel => ({ + gatewayLabel, + gatewayDeployment: appliedGatewayList.includes(gatewayLabel), + })); + } + + // Toggle the deployment status of a specific gateway for a specific policy + // If false, it will become true (depolying) and vice versa (undeploying) + const toggleGatewayDeployment = (deploymentArray: Deployment[], environment: string) => { + const updatedArray = deploymentArray.map(item => { + if (item.gatewayLabel === environment) { + return { ...item, gatewayDeployment: !item.gatewayDeployment }; + } + return item; + }); + return updatedArray; + }; + /** * Function to add a label to a specific policy in UI * @@ -204,33 +240,6 @@ const Listing: React.FC = () => { setPolicies(updatedPolicies); }; - /** - * Function to deploy a policy mapping to another enviroment/gateway - * - * @param {string} gatewayPolicyMappingId : Policy Identifier. - * @param {string} environement : Deploying enviroment/gateway. - */ - const deploy = (gatewayPolicyMappingId: string, environement: string) => { - setLoading(true); - - // call the backend API - const requestBody = [ - { - "mappingUUID": {gatewayPolicyMappingId}, - "gatewayLabel": {environement}, - "gatewayDeployment": true - } - ]; - // API.postDeployGatewayPolicies(); - console.log("deploying policy to specific gateway: 'POST' '/gateway-policies/{gatewayPolicyMappingId}/deploy"); - console.log("request body", requestBody); - - // If successful, update the policies list for the UI - addLabelToPolicy(gatewayPolicyMappingId, environement); - - setLoading(false); - } - /** * Function to remove a label from a specific policy in UI * @@ -258,25 +267,40 @@ const Listing: React.FC = () => { * * @param {string} gatewayPolicyMappingId : Policy Identifier. * @param {string} environement : Deploying enviroment/gateway. + * @param {boolean} deploying : Deploying or undeploying. */ - const undeploy = (gatewayPolicyMappingId: string, environement: string) => { + const deployOrUndeploy = (gatewayPolicyMappingId: string, environement: string, deploying: boolean) => { setLoading(true); - + const deploymentArray = getDeploymentArray(gatewayPolicyMappingId); + const updatedDeploymentArray = toggleGatewayDeployment(deploymentArray, environement); // call the backend API - const requestBody = [ - { - "mappingUUID": {gatewayPolicyMappingId}, - "gatewayLabel": {environement}, - "gatewayDeployment": false - } - ]; - // API.postDeployGatewayPolicies(); - console.log("undeploying policy to specifc gateway: 'POST' '/gateway-policies/{gatewayPolicyMappingId}/deploy"); - console.log("request body", requestBody); - - // If successful, update the policies list for the UI - removeLabelFromPolicy(gatewayPolicyMappingId, environement); - + const promise = API.engageGlobalPolicy(gatewayPolicyMappingId, updatedDeploymentArray); + promise + .then((response) => { + if (response.status === 200 || response.status === 201) { + setLoading(false); + if (deploying) { + APIMAlert.success('Policy deployed successfully'); + // If successful, update the policies list for the UI + addLabelToPolicy(gatewayPolicyMappingId, environement); + } else { + APIMAlert.success('Policy undeployed successfully'); + // If successful, update the policies list for the UI + removeLabelFromPolicy(gatewayPolicyMappingId, environement); + } + } + else { + APIMAlert.error(response.body.message); + } + }) + .catch((/* error */) => { + // console.error(error); + if (deploying) { + APIMAlert.error('Error occurred while deploying the policy'); + } else { + APIMAlert.error('Error occurred while undeploying the policy'); + } + }) setLoading(false); } @@ -485,7 +509,7 @@ const Listing: React.FC = () => { @@ -493,7 +517,7 @@ const Listing: React.FC = () => { diff --git a/portals/publisher/src/main/webapp/source/src/app/data/api.js b/portals/publisher/src/main/webapp/source/src/app/data/api.js index db24828bb57..b0ecf10b8ac 100644 --- a/portals/publisher/src/main/webapp/source/src/app/data/api.js +++ b/portals/publisher/src/main/webapp/source/src/app/data/api.js @@ -3122,7 +3122,6 @@ class API extends Resource { const requestBody = { requestBody: body, }; - console.log(body); return restApiClient.then(client => { return client.apis['Gateway Policies'].updateGatewayPoliciesToFlows( {gatewayPolicyMappingId}, @@ -3131,6 +3130,27 @@ class API extends Resource { ); }); } + + /** + * Deploy the global policy for an gateway environment + * @param {String} gatewayPolicyMappingId UUID of the global policy + * @param {Object} body policy schema which holds the deployed and undeployed gateyway environments + * @returns {Promise} Response + */ + static engageGlobalPolicy(gatewayPolicyMappingId, body) { + const restApiClient = new APIClientFactory().getAPIClient(Utils.getCurrentEnvironment(), Utils.CONST.API_CLIENT).client; + const requestBody = { + requestBody: body, + }; + console.log(body); + return restApiClient.then(client => { + return client.apis['Gateway Policies'].engageGlobalPolicy( + {gatewayPolicyMappingId}, + requestBody, + this._requestMetaData(), + ); + }); + } } API.CONSTS = { From bb354f997a8b654e2603d270ff1293fd565e74ff Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 16 Nov 2023 11:33:35 +0530 Subject: [PATCH 084/102] Fix the onboarding page and fix some issues --- .../images/landing-icons/globalpolicies.svg | 148 ++++++++++++++++++ .../main/webapp/site/public/locales/en.json | 2 +- .../webapp/site/public/locales/raw.en.json | 2 +- .../GlobalPolicies/Listing/Listing.tsx | 29 +++- .../main/webapp/source/src/app/data/api.js | 2 +- .../source/src/app/data/defaultTheme.js | 1 + 6 files changed, 174 insertions(+), 10 deletions(-) create mode 100644 portals/publisher/src/main/webapp/site/public/images/landing-icons/globalpolicies.svg diff --git a/portals/publisher/src/main/webapp/site/public/images/landing-icons/globalpolicies.svg b/portals/publisher/src/main/webapp/site/public/images/landing-icons/globalpolicies.svg new file mode 100644 index 00000000000..323b0a81cc4 --- /dev/null +++ b/portals/publisher/src/main/webapp/site/public/images/landing-icons/globalpolicies.svg @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index b718e242b79..af5d693acf1 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8884,7 +8884,7 @@ "GlobalPolicies.Listing.onboarding.policies.tooltip": [ { "type": 0, - "value": "Currently there are no policies to show" + "value": "Global Policies provide you the ability to deploy policy mappings to whole gateways and not just one single API. Click below to create your first Global Policy" } ], "GlobalPolicies.Listing.policies.title.add.new.policy": [ diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 0fcae1fc980..c011bb7e62d 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4243,7 +4243,7 @@ "defaultMessage": "Let’s get started!" }, "GlobalPolicies.Listing.onboarding.policies.tooltip": { - "defaultMessage": "Currently there are no policies to show" + "defaultMessage": "Global Policies provide you the ability to deploy policy mappings to whole gateways and not just one single API. Click below to create your first Global Policy" }, "GlobalPolicies.Listing.policies.title.add.new.policy": { "defaultMessage": "Add New Global Policy" diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 7fb0f4f61c6..7bacd7c3b00 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -35,7 +35,8 @@ import { DialogTitle, DialogContent, DialogActions, - DialogContentText + DialogContentText, + useTheme } from '@material-ui/core'; import Alert from '@material-ui/lab/Alert'; import APIMAlert from 'AppComponents/Shared/Alert'; @@ -131,7 +132,9 @@ const Listing: React.FC = () => { const [isDialogOpen, setIsDialogOpen] = useState(false); const [selectedPolicyName, setSelectedPolicyName] = useState(''); const [selectedPolicyId, setSelectedPolicyId] = useState(''); - + + const theme : any = useTheme(); + const { globalPolicyAddIcon } = theme.custom.landingPage.icons; /** * Fetch the data from the backend to the compoenent. */ @@ -326,7 +329,7 @@ const Listing: React.FC = () => { // console.error(error); APIMAlert.error('Error while deleting the policy'); setLoading(false); - }); + }); } useEffect(() => { @@ -403,9 +406,18 @@ const Listing: React.FC = () => { const policyName = tableMeta.rowData[1]; const handleDeleteClick = () => { - setSelectedPolicyId(policyId); - setSelectedPolicyName(policyName); - setIsDialogOpen(true); + // If there is active depoloyments, we need to block the deletion + const appliedGatewayList = getAppliedGatewayLabelsById(policyId); + if (appliedGatewayList.length > 0){ + APIMAlert.error((appliedGatewayList.length === 1) ? + 'An active deployment is available' + : 'Active deployments are available'); + } + else { + setSelectedPolicyId(policyId); + setSelectedPolicyName(policyName); + setIsDialogOpen(true); + } }; return ( @@ -551,13 +563,16 @@ const Listing: React.FC = () => { subTitle={ } > ); diff --git a/portals/publisher/src/main/webapp/source/src/app/data/api.js b/portals/publisher/src/main/webapp/source/src/app/data/api.js index b0ecf10b8ac..6903e240d0f 100644 --- a/portals/publisher/src/main/webapp/source/src/app/data/api.js +++ b/portals/publisher/src/main/webapp/source/src/app/data/api.js @@ -3076,7 +3076,7 @@ class API extends Resource { return client.apis['Gateway Policies'].addGatewayPoliciesToFlows( {}, requestBody, - tthis._requestMetaData(), + this._requestMetaData(), ); }); } diff --git a/portals/publisher/src/main/webapp/source/src/app/data/defaultTheme.js b/portals/publisher/src/main/webapp/source/src/app/data/defaultTheme.js index 07004e1cbfc..b4432f16c57 100644 --- a/portals/publisher/src/main/webapp/source/src/app/data/defaultTheme.js +++ b/portals/publisher/src/main/webapp/source/src/app/data/defaultTheme.js @@ -251,6 +251,7 @@ export default { scopesAddIcon: '/site/public/images/landing-icons/scopes.svg', commonPolicyAddIcon: '/site/public/images/landing-icons/scopes.svg', apiproductAddIcon: '/site/public/images/landing-icons/apiproduct.svg', + globalPolicyAddIcon: '/site/public/images/landing-icons/globalpolicies.svg' }, menu: { primary: '#34679D', From 8e630754bb023c2b80d75c4275fb2610eb3c549e Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 16 Nov 2023 14:00:54 +0530 Subject: [PATCH 085/102] Fix CSS --- .../GlobalPolicies/Listing/Listing.tsx | 35 ++++++++++++++----- .../GlobalSpecificComponents/Policies.tsx | 8 +++-- .../GlobalSpecificComponents/PolicyList.tsx | 10 +++--- 3 files changed, 39 insertions(+), 14 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 7bacd7c3b00..c0000793af1 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -88,9 +88,28 @@ const useStyles = makeStyles((theme) => ({ buttonIcon: { marginRight: theme.spacing(1), }, + button: { + width: '112px', + }, icon: { marginRight: theme.spacing(0.5), - } + }, + chip: { + marginRight: '8px' + }, + gatewayChip: { + width: '200px', + justifyContent: 'center' + }, + dialogBackdrop: { + backgroundColor: 'rgba(0, 0, 0, 0.08)' + }, + dialogPaper: { + boxShadow: 'none' + }, + tableContainer: { + maxWidth: '400px' + }, })); interface Policy { @@ -387,7 +406,7 @@ const Listing: React.FC = () => { key={gateway} label={gateway} variant='outlined' - style={{ marginRight: '8px' }} + className={classes.chip} /> ))} @@ -449,8 +468,8 @@ const Listing: React.FC = () => { /> Confirm Delete @@ -504,21 +523,21 @@ const Listing: React.FC = () => { {policy.description} - + {gatewayList.map((gateway: string) => ( - {isDeployed(gateway, policy.appliedGatewayLabels) ? ( - ) : ( - + {/** + * Dialog box (Modal or Pop up) which as for the confirmation to delete. + */} { expandableRowsHeader: false, expandableRowsOnClick: false, renderExpandableRow: (rowData, rowMeta) => { + /** + * Expandable area where you can deploy and undeploy. + */ const gatewayList = environments.map((env: any) => { return env.name; }); const rowIndex = rowMeta.dataIndex; + + /** + * Expanded row's policy information. + */ const policy = policiesList[rowIndex]; return ( diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index a1fd1aba85b..6e333aaeb15 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -74,9 +74,9 @@ interface PolicyProps { /** * Renders the Global Policy management page. - * @param {boolean} isCreateNew This value is true if form is for create new and false for edit. - * @param {string} policyID This value is to indentify the policy (Null if creating a new one). - * @returns {TSX} Policy management page to render. + * @param {boolean} isCreateNew - This value is true if form is for create new and false for edit. + * @param {string} policyID - This value is to indentify the policy (Null if creating a new one). + * @returns {TSX} - Policy management page to render. */ const Policies: FC = ({ isCreateNew, @@ -91,7 +91,9 @@ const Policies: FC = ({ const [description, setDescription] = useState(''); const [appliedGatewayLabels, setAppliedGatewayLabels] = useState([]); - // Global Level Policy - global level policy mapping. It will be initially empty. + /** + * Global level policy mapping. It will be initially empty. + */ const initGlobalLevelPolicy: GlobalLevelPolicy = { request: [], response: [], @@ -104,18 +106,19 @@ const Policies: FC = ({ setGlobalLevelPolicies] = useState(getInitGlobalLevelPoliciesState()); /** - * Fetches all common policies to front-end. - * Sets the allPolicies state: this allPolicies state is used to get policies from any given policy ID. - * Sets the policies state: policy state is used to display the available policies that are draggable. + * Fetches all common policies to front-end to show in the Policy List. */ const fetchPolicies = () => { const commonPoliciesPromise = API.getCommonOperationPolicies(); Promise.all([commonPoliciesPromise]).then((response) => { const [commonPoliciesResponse] = response; const commonPolicies = commonPoliciesResponse.body.list; + /** + * Similar to policies in Global Policies scenario. + * But as we are reusing PoliciesExpansion, both PolicySpec[] and Policy[] types are required. + */ setAllPolicies(commonPolicies); - // Sort the policies list commonPolicies.sort( (a: Policy, b: Policy) => a.name.localeCompare(b.name)) @@ -126,9 +129,13 @@ const Policies: FC = ({ }); } - // PolicyID is to identify the policy. ex: AddHeader, RemoveHeader, etc. - // But this same policy can be used multiple times with different names/values. - // For the frontend, we need different ids for each similar policy to uniquely identify. + /** + * Assign UUIDs to the input. + * Each Policy operation requires a uuid to identify (Since two operations can have same policy ID). + * This requires for the UI so assigning this is required after getting data from the backend. + * @param {any} input - Policy List. + * @returns {any} - Policy list which has UUIDs for each operations. + */ const assignUUIDs = (input: any) => { const inputResponse: any = cloneDeep(input); if (inputResponse && inputResponse.policyMapping) { @@ -155,7 +162,13 @@ const Policies: FC = ({ return inputResponse; }; - // remove uuids from the policy mapping + /** + * Remove UUIDs from the input. + * Each Policy operation has a uuid to identify (Since two operations can have same policy ID). + * This requires for the UI so removing this is required before sending to backend to overcome backend validation. + * @param {any} input - Global Level Policies which has UUIDs for each operations. + * @returns {any} - Global Level Policies which does not have UUIDs for each operations. + */ const removeUUIDs = (input: any) => { const inputWithoutUUIDs: any = cloneDeep(input); if (inputWithoutUUIDs) { @@ -182,9 +195,16 @@ const Policies: FC = ({ return inputWithoutUUIDs; }; + /** + * If this is the editng page (isCreateNew:False), fetching the data from backend. + */ const fetchGlobalPolicyByID = () => { setLoading(true); const gatewayPolicyMappingId = String(policyID); + + /** + * Backend Call and handle the response. + */ const promisedPolicy = API.getGatewayPolicyMappingContentByPolicyMappingId(gatewayPolicyMappingId); promisedPolicy .then((response) => { @@ -211,9 +231,10 @@ const Policies: FC = ({ }, []); /** + * A Context Operation for Policy Panel UI. * Triggers as we click delete icon in a drag`n`droped the policy. - * @param {string} uuid operation uuid. - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault. + * @param {string} uuid - Operation uuid. + * @param {string} currentFlow - Which flow needs to be udpated: request, response or fault. */ const deleteGlobalOperation = (uuid: string, currentFlow: string) => { const newGlobalLevelPolicies: any = cloneDeep(globalLevelPolicies); @@ -223,10 +244,11 @@ const Policies: FC = ({ } /** + * A Context Operation for Policy Panel UI. * Function to rearrange the API Operation ordering. - * @param {string} oldIndex original index of the policy. - * @param {string} newIndex new index of the policy. - * @param {string} currentFlow depicts which flow needs to be udpated: request, response or fault. + * @param {string} oldIndex - Original index of the policy. + * @param {string} newIndex - New index of the policy. + * @param {string} currentFlow - Which flow needs to be udpated: request, response or fault. */ const rearrangeGlobalOperations = ( oldIndex: number, newIndex: number, currentFlow: string, @@ -238,19 +260,18 @@ const Policies: FC = ({ }; /** - * Triggers as we saved a drag`n`droped policy. - * @param {any} updatedOperation Saving info as - * parameters: {headerName: <>, headerValue: <>}, - * policyId: <>, - * policyName: <>, - * policyVersion: <>. - * @param {string} currentFlow Folow request/response/fault. + * A Context Operation for Policy Panel UI. + * Triggers as we saved a drag`n`droped policy or edit a already dragged one. + * @param {any} updatedOperation - Saved info as parameters: {headerName: <>, headerValue: <>}, policyId: <>, etc. + * @param {string} currentFlow - Folow request/response/fault. */ const updateGlobalOperations = ( updatedOperation: any, currentFlow: string, ) => { const newGlobalLevelPolicies: any = cloneDeep(globalLevelPolicies); - // Check whether the policy operation already exists + /** + * Check whether the policy operation already exists. + */ const flowPolicy = (newGlobalLevelPolicies)[currentFlow].find( (p: any) => p.policyId === updatedOperation.policyId && @@ -258,10 +279,14 @@ const Policies: FC = ({ ); if (flowPolicy) { - // Edit policy operation if already exists + /** + * Edit the already dragged and dropped policy. + */ flowPolicy.parameters = { ...updatedOperation.parameters }; } else { - // Add new policy operation + /** + * Save the newly dragged and dropped policy. + */ const uuid = uuidv4(); (newGlobalLevelPolicies)[currentFlow].push({ ...updatedOperation, uuid } ); @@ -271,7 +296,7 @@ const Policies: FC = ({ /** * Function to validate before saving or updating. - * @returns {boolean} true if all the required fields are filled. + * @returns {boolean} - True if all the required fields are filled. */ const validate = () => { let isValidate = true; @@ -294,13 +319,21 @@ const Policies: FC = ({ /** * Function to save a policy mapping. + * Triggers if we click save button. */ const save = () => { setLoading(true); if (validate()){ - // call the backend API + /** + * Remove UUIDs before sending to backend. + * If not, as backend is not expecting UUIDs, backend validation will fail. + */ const policyMapping = removeUUIDs(globalLevelPolicies); + + /** + * Backend Call and handle the response. + */ const requestBody = { "id": uuidv4(), "policyMapping": policyMapping, @@ -329,13 +362,21 @@ const Policies: FC = ({ /** * Function to update a policy mapping. + * Triggers if we click update button. */ const update = () => { setLoading(true); if (validate()){ - // call the backend API + /** + * Remove UUIDs before sending to backend. + * If not, as backend is not expecting UUIDs, backend validation will fail. + */ const policyMapping = removeUUIDs(globalLevelPolicies); + + /** + * Backend Call and handle the response. + */ const requestBody = { "id": policyID, "policyMapping": policyMapping, @@ -382,14 +423,25 @@ const Policies: FC = ({ ], ); + /** + * Handle Name field changes. + * @param {any} event changing event. + */ const handleNameChange = (event: any) => { setName(event.target.value); }; + /** + * Handle Description field changes. + * @param {any} event changing event. + */ const handleDescriptionChange = (event: any) => { setDescription(event.target.value); }; + /** + * Loading screen if loading is true or there is no policies yet. + */ if (!policies || loading) { return } @@ -398,6 +450,9 @@ const Policies: FC = ({ + {/** + * Breadcrumb Navigation. + */}
@@ -424,6 +479,10 @@ const Policies: FC = ({
+ + {/** + * Name & Description Fields. + */} = ({ className={classes.textField} /> + + {/** + * Left side panel where we can droped policies. + */} @@ -466,13 +529,20 @@ const Policies: FC = ({ + {/** + * Right side policy list. + */} - + + {/** + * Edit & Save buttons. + */} +
- {gatewayList.map((gateway: string) => ( - - - - + {gatewayList.map((gateway: string) => { + let button; + + if (isDeployed(gateway, policy.appliedGatewayLabels)) { + button = ( + + ); + } else if (allDepoloyedGateways.includes(gateway)) { + button = ( + + + + - - - {isDeployed(gateway, policy.appliedGatewayLabels) ? ( - - ) : ( - - )} - - - ))} + ); + } else { + button = ( + + ); + } + return ( + + + + + + + + {button} + + + ); + })}
From d42f7c7945dd6fb0726dfbd0d29b573c34b2c68f Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Wed, 22 Nov 2023 09:27:18 +0530 Subject: [PATCH 092/102] Addressed required changes in Code Review - Asked to convert normal text to useIntl or FormattedMessage --- .../main/webapp/site/public/locales/en.json | 210 ++++++++++++++++++ .../webapp/site/public/locales/raw.en.json | 105 +++++++++ .../GlobalPolicies/Listing/Listing.tsx | 134 ++++++++--- .../GlobalSpecificComponents/General.tsx | 5 +- .../GlobalSpecificComponents/Policies.tsx | 50 ++++- .../GlobalSpecificComponents/PolicyList.tsx | 21 +- .../SharedComponents/PoliciesExpansion.tsx | 17 +- 7 files changed, 494 insertions(+), 48 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index af5d693acf1..ba78c903ce1 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -17,6 +17,12 @@ "value": "Cancel" } ], + "Adding.Policy.Mapping.Error": [ + { + "type": 0, + "value": "Error occurred while adding the policy mapping" + } + ], "Api.category.dropdown.tooltip": [ { "type": 0, @@ -8631,6 +8637,18 @@ "value": "Scopes" } ], + "Cancel": [ + { + "type": 0, + "value": "Cancel" + } + ], + "Cannot.find.policyObj.for.policyId": [ + { + "type": 0, + "value": "Cannot find policyObj for policyId:" + } + ], "CommonPolicies.CreatePolicy.breadcrumb.create.new.policy": [ { "type": 0, @@ -8759,24 +8777,108 @@ "value": "Policies" } ], + "Confirm.Delete": [ + { + "type": 0, + "value": "Confirm Delete" + } + ], + "Confirm.Delete.Verify": [ + { + "type": 0, + "value": "Are you sure you want to delete the policy" + } + ], "Connection.Timeout": [ { "type": 0, "value": "Connection Timeout" } ], + "Delete": [ + { + "type": 0, + "value": "Delete" + } + ], + "Deploy": [ + { + "type": 0, + "value": "Deploy" + } + ], + "Deployed.Gateway.Listing.Table.Header.Name": [ + { + "type": 0, + "value": "Deployed Gateways" + } + ], + "Deployed.Gateway.Listing.Table.not.available": [ + { + "type": 0, + "value": "No Deployed Gateways" + } + ], "Endpoint.Suspension.State": [ { "type": 0, "value": "Endpoint Suspension State" } ], + "Error.Deploy.Policy": [ + { + "type": 0, + "value": "Error occurred while deploying the policy" + } + ], + "Error.Retrieve.Policy": [ + { + "type": 0, + "value": "Error occurred while retrieving the policy" + } + ], + "Error.Retrieve.Policy.List": [ + { + "type": 0, + "value": "Error occurred while retrieving the policy list" + } + ], + "Error.Undeploy.Policy": [ + { + "type": 0, + "value": "Error occurred while undeploying the policy" + } + ], + "Error.Validating.Regex": [ + { + "type": 0, + "value": "Error while validating the regex" + } + ], "Error.while.validating.the.imported.graphQLSchema": [ { "type": 0, "value": "Error while validating the imported schema" } ], + "Fault.Details.Policies.PolicyList.title": [ + { + "type": 0, + "value": "Fault" + } + ], + "Fetching.Policies.Error": [ + { + "type": 0, + "value": "Error while fetching policies" + } + ], + "Fetching.Policies.Settings": [ + { + "type": 0, + "value": "Error while fetching settings" + } + ], "Global.Details.Policies.AttachedPolicyCard.apiSpecificPolicy.download.error": [ { "type": 0, @@ -8875,6 +8977,18 @@ "value": "Update" } ], + "Global.Policies": [ + { + "type": 0, + "value": "Global Policies" + } + ], + "Global.Policy.Listing.Table.Header.Name": [ + { + "type": 0, + "value": "Global Policy" + } + ], "GlobalPolicies.Listing.onboarding.create.new": [ { "type": 0, @@ -8935,6 +9049,84 @@ "value": "Error 403 : Forbidden" } ], + "Policy.Already.Deployed": [ + { + "type": 0, + "value": "Another global policy has been already deployed in this gateway" + } + ], + "Policy.Deploy.Successful": [ + { + "type": 0, + "value": "Policy deployed successfully" + } + ], + "Policy.Description.Cannot.Be.Empty": [ + { + "type": 0, + "value": "Policy description cannot be empty" + } + ], + "Policy.Mapping.Added.Successfully": [ + { + "type": 0, + "value": "Policy mapping added successfully" + } + ], + "Policy.Mapping.Cannot.Be.Empty": [ + { + "type": 0, + "value": "Policy mapping cannot be empty" + } + ], + "Policy.Mapping.Update.Error": [ + { + "type": 0, + "value": "Error occurred while updating the policy mapping" + } + ], + "Policy.Mapping.Update.Success": [ + { + "type": 0, + "value": "Policy mapping updated successfully" + } + ], + "Policy.Name.Cannot.Be.Empty": [ + { + "type": 0, + "value": "Policy name cannot be empty" + } + ], + "Policy.Undeploy.Successful": [ + { + "type": 0, + "value": "Policy undeployed successfully" + } + ], + "Policy.delete.error": [ + { + "type": 0, + "value": "Error while deleting the policy" + } + ], + "Policy.delete.successful": [ + { + "type": 0, + "value": "Policy deleted successfully" + } + ], + "Request.Details.Policies.PolicyList.title": [ + { + "type": 0, + "value": "Request" + } + ], + "Response.Details.Policies.PolicyList.title": [ + { + "type": 0, + "value": "Response" + } + ], "Scopes.Create.CreateScope.cancel": [ { "type": 0, @@ -9727,6 +9919,12 @@ "value": "Version" } ], + "Undeploy": [ + { + "type": 0, + "value": "Undeploy" + } + ], "UnexpectedError.logout": [ { "type": 0, @@ -9745,6 +9943,18 @@ "value": "Internal Server Error" } ], + "active.development.available": [ + { + "type": 0, + "value": "An active deployment is available" + } + ], + "active.developments.available": [ + { + "type": 0, + "value": "Active deployments are available" + } + ], "api.console.security.heading": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index c011bb7e62d..3a24b655af9 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -8,6 +8,9 @@ "APIs.details.endpoints.certificate.usage.cancel": { "defaultMessage": "Cancel" }, + "Adding.Policy.Mapping.Error": { + "defaultMessage": "Error occurred while adding the policy mapping" + }, "Api.category.dropdown.tooltip": { "defaultMessage": "Allow to group APIs that have similar attributes. There has to be pre-defined API categories in the environment in order to be attached to an API." }, @@ -4125,6 +4128,12 @@ "Base.Header.navbar.GlobalNavBar.scopes": { "defaultMessage": "Scopes" }, + "Cancel": { + "defaultMessage": "Cancel" + }, + "Cannot.find.policyObj.for.policyId": { + "defaultMessage": "Cannot find policyObj for policyId:" + }, "CommonPolicies.CreatePolicy.breadcrumb.create.new.policy": { "defaultMessage": "Create New Policy" }, @@ -4185,15 +4194,57 @@ "CommonPolicies.ViewPolicy.policies.title": { "defaultMessage": "Policies" }, + "Confirm.Delete": { + "defaultMessage": "Confirm Delete" + }, + "Confirm.Delete.Verify": { + "defaultMessage": "Are you sure you want to delete the policy" + }, "Connection.Timeout": { "defaultMessage": "Connection Timeout" }, + "Delete": { + "defaultMessage": "Delete" + }, + "Deploy": { + "defaultMessage": "Deploy" + }, + "Deployed.Gateway.Listing.Table.Header.Name": { + "defaultMessage": "Deployed Gateways" + }, + "Deployed.Gateway.Listing.Table.not.available": { + "defaultMessage": "No Deployed Gateways" + }, "Endpoint.Suspension.State": { "defaultMessage": "Endpoint Suspension State" }, + "Error.Deploy.Policy": { + "defaultMessage": "Error occurred while deploying the policy" + }, + "Error.Retrieve.Policy": { + "defaultMessage": "Error occurred while retrieving the policy" + }, + "Error.Retrieve.Policy.List": { + "defaultMessage": "Error occurred while retrieving the policy list" + }, + "Error.Undeploy.Policy": { + "defaultMessage": "Error occurred while undeploying the policy" + }, + "Error.Validating.Regex": { + "defaultMessage": "Error while validating the regex" + }, "Error.while.validating.the.imported.graphQLSchema": { "defaultMessage": "Error while validating the imported schema" }, + "Fault.Details.Policies.PolicyList.title": { + "defaultMessage": "Fault" + }, + "Fetching.Policies.Error": { + "defaultMessage": "Error while fetching policies" + }, + "Fetching.Policies.Settings": { + "defaultMessage": "Error while fetching settings" + }, "Global.Details.Policies.AttachedPolicyCard.apiSpecificPolicy.download.error": { "defaultMessage": "Something went wrong while downloading the policy" }, @@ -4239,6 +4290,12 @@ "Global.Details.Policies.SaveOperationPolicies.update": { "defaultMessage": "Update" }, + "Global.Policies": { + "defaultMessage": "Global Policies" + }, + "Global.Policy.Listing.Table.Header.Name": { + "defaultMessage": "Global Policy" + }, "GlobalPolicies.Listing.onboarding.create.new": { "defaultMessage": "Let’s get started!" }, @@ -4269,6 +4326,45 @@ "LoginDenied.title": { "defaultMessage": "Error 403 : Forbidden" }, + "Policy.Already.Deployed": { + "defaultMessage": "Another global policy has been already deployed in this gateway" + }, + "Policy.Deploy.Successful": { + "defaultMessage": "Policy deployed successfully" + }, + "Policy.Description.Cannot.Be.Empty": { + "defaultMessage": "Policy description cannot be empty" + }, + "Policy.Mapping.Added.Successfully": { + "defaultMessage": "Policy mapping added successfully" + }, + "Policy.Mapping.Cannot.Be.Empty": { + "defaultMessage": "Policy mapping cannot be empty" + }, + "Policy.Mapping.Update.Error": { + "defaultMessage": "Error occurred while updating the policy mapping" + }, + "Policy.Mapping.Update.Success": { + "defaultMessage": "Policy mapping updated successfully" + }, + "Policy.Name.Cannot.Be.Empty": { + "defaultMessage": "Policy name cannot be empty" + }, + "Policy.Undeploy.Successful": { + "defaultMessage": "Policy undeployed successfully" + }, + "Policy.delete.error": { + "defaultMessage": "Error while deleting the policy" + }, + "Policy.delete.successful": { + "defaultMessage": "Policy deleted successfully" + }, + "Request.Details.Policies.PolicyList.title": { + "defaultMessage": "Request" + }, + "Response.Details.Policies.PolicyList.title": { + "defaultMessage": "Response" + }, "Scopes.Create.CreateScope.cancel": { "defaultMessage": "Cancel" }, @@ -4647,6 +4743,9 @@ "ServiceCatalog.ServicesTableView.ServicesTableView.version": { "defaultMessage": "Version" }, + "Undeploy": { + "defaultMessage": "Undeploy" + }, "UnexpectedError.logout": { "defaultMessage": "Logout" }, @@ -4656,6 +4755,12 @@ "UnexpectedError.title": { "defaultMessage": "Internal Server Error" }, + "active.development.available": { + "defaultMessage": "An active deployment is available" + }, + "active.developments.available": { + "defaultMessage": "Active deployments are available" + }, "api.console.security.heading": { "defaultMessage": "Security" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index a4d98d4db04..57601a59871 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -43,7 +43,7 @@ import APIMAlert from 'AppComponents/Shared/Alert'; import Icon from '@material-ui/core/Icon'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; -import { FormattedMessage } from 'react-intl'; +import { useIntl, FormattedMessage } from 'react-intl'; import AddCircle from '@material-ui/icons/AddCircle'; import MUIDataTable, { MUIDataTableOptions, MUIDataTableColumnDef } from 'mui-datatables'; import Box from '@material-ui/core/Box'; @@ -152,6 +152,7 @@ const Listing: React.FC = () => { const [selectedPolicyId, setSelectedPolicyId] = useState(''); const theme : any = useTheme(); const { globalPolicyAddIcon } = theme.custom.landingPage.icons; + const intl = useIntl(); /** * Fetch the data from the backend to the compoenent. @@ -167,7 +168,10 @@ const Listing: React.FC = () => { }) .catch((/* error */) => { // console.error(error); - APIMAlert.error('Error while fetching policies'); + APIMAlert.error(intl.formatMessage({ + id: 'Fetching.Policies.Error', + defaultMessage: 'Error while fetching policies', + })); setnotFound(true); setLoading(false); }) @@ -186,7 +190,10 @@ const Listing: React.FC = () => { }) .catch((/* error */) => { // console.error(error); - APIMAlert.error('Error while fetching settings'); + APIMAlert.error(intl.formatMessage({ + id: 'Fetching.Policies.Settings', + defaultMessage: 'Error while fetching settings', + })); setnotFound(true); }) .finally(() => { @@ -306,13 +313,19 @@ const Listing: React.FC = () => { if (response.status === 200 || response.status === 201) { setLoading(false); if (deploying) { - APIMAlert.success('Policy deployed successfully'); + APIMAlert.success(intl.formatMessage({ + id: 'Policy.Deploy.Successful', + defaultMessage: 'Policy deployed successfully', + })); /** * If successful, add to the state rather than getting from backend. */ addLabelToPolicy(gatewayPolicyMappingId, environement); } else { - APIMAlert.success('Policy undeployed successfully'); + APIMAlert.success(intl.formatMessage({ + id: 'Policy.Undeploy.Successful', + defaultMessage: 'Policy undeployed successfully', + })); /** * If successful, remove from the state rather than getting from backend. */ @@ -323,12 +336,18 @@ const Listing: React.FC = () => { APIMAlert.error(response.body.message); } }) - .catch((error) => { - console.error(error); + .catch((/* error */) => { + // console.error(error); if (deploying) { - APIMAlert.error('Error occurred while deploying the policy'); + APIMAlert.error(intl.formatMessage({ + id: 'Error.Deploy.Policy', + defaultMessage: 'Error occurred while deploying the policy', + })); } else { - APIMAlert.error('Error occurred while undeploying the policy'); + APIMAlert.error(intl.formatMessage({ + id: 'Error.Undeploy.Policy', + defaultMessage: 'Error occurred while undeploying the policy', + })); } }) setLoading(false); @@ -358,12 +377,18 @@ const Listing: React.FC = () => { */ const updatedPolicies = policies.filter((policy) => policy.id !== gatewayPolicyMappingId); setPolicies(updatedPolicies); - APIMAlert.success('Policy deleted successfully'); + APIMAlert.success(intl.formatMessage({ + id: 'Policy.Delete.Successful', + defaultMessage: 'Policy deleted successfully', + })); setLoading(false); }) .catch((/* error */) => { // console.error(error); - APIMAlert.error('Error while deleting the policy'); + APIMAlert.error(intl.formatMessage({ + id: 'Policy.Delete.Error', + defaultMessage: 'Error while deleting the policy', + })); setLoading(false); }); } @@ -417,14 +442,20 @@ const Listing: React.FC = () => { }, { name: 'displayName', - label: 'Global Policy', + label: intl.formatMessage({ + id: 'Global.Policy.Listing.Table.Header.Name', + defaultMessage: 'Global Policy', + }), }, /** * Deployed Gateway Column. */ { name: 'appliedGatewayLabels', - label: 'Deployed Gateways', + label: intl.formatMessage({ + id: 'Deployed.Gateway.Listing.Table.Header.Name', + defaultMessage: 'Deployed Gateways', + }), options: { customBodyRender: (value: string[] | undefined) => { if (value && value.length > 0) { @@ -441,7 +472,10 @@ const Listing: React.FC = () => { ); } else { - return "No deployed gateways"; + return intl.formatMessage({ + id: 'Deployed.Gateway.Listing.Table.Not.Available', + defaultMessage: 'No Deployed Gateways', + }); } } } @@ -462,10 +496,16 @@ const Listing: React.FC = () => { const handleDeleteClick = () => { // If there is active depoloyments, we need to block the deletion const appliedGatewayList = getAppliedGatewayLabelsById(policyId); - if (appliedGatewayList.length > 0){ + if (appliedGatewayList.length > 0){ APIMAlert.error((appliedGatewayList.length === 1) ? - 'An active deployment is available' - : 'Active deployments are available'); + intl.formatMessage({ + id: 'Active.Development.Available', + defaultMessage: 'An active deployment is available', + }) + : intl.formatMessage({ + id: 'Active.Developments.Available', + defaultMessage: 'Active deployments are available', + })); } else { setSelectedPolicyId(policyId); @@ -485,7 +525,7 @@ const Listing: React.FC = () => { edit @@ -509,18 +549,33 @@ const Listing: React.FC = () => { BackdropProps={{ className: classes.dialogBackdrop }} PaperProps={{ className: classes.dialogPaper }} > - Confirm Delete + + + - Are you sure you want to delete {selectedPolicyName}? + + {selectedPolicyName}? @@ -583,15 +638,23 @@ const Listing: React.FC = () => { color='default' onClick={() => deployOrUndeploy(policy.id, gateway, false)} > - Undeploy + ); } else if (allDepoloyedGateways.includes(gateway)) { button = ( + title={( + + )} + > @@ -612,7 +678,10 @@ const Listing: React.FC = () => { color='primary' onClick={() => deployOrUndeploy(policy.id, gateway, true)} > - Deploy + ); } @@ -665,14 +734,19 @@ const Listing: React.FC = () => { + )} iconName={globalPolicyAddIcon} /> ); } - if (loading) { + if (loading) { return ; } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx index f460131e6b0..c96144dfaea 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx @@ -175,7 +175,10 @@ const General: FC = ({ } } catch { // console.error(error); - Alert.error('Error while validating the regex'); + Alert.error(intl.formatMessage({ + id: 'Error.Validating.Regex', + defaultMessage: 'Error while validating the regex', + })); } } } diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index 624b81d6a80..35477887252 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -27,7 +27,7 @@ import Box from '@material-ui/core/Box'; import Icon from '@material-ui/core/Icon'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DndProvider } from 'react-dnd'; -import { FormattedMessage } from 'react-intl'; +import { useIntl, FormattedMessage } from 'react-intl'; import { arrayMove } from '@dnd-kit/sortable'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; @@ -90,6 +90,7 @@ const Policies: FC = ({ const [name, setName] = useState(''); const [description, setDescription] = useState(''); const [appliedGatewayLabels, setAppliedGatewayLabels] = useState([]); + const intl = useIntl(); /** * Global level policy mapping. It will be initially empty. @@ -124,8 +125,11 @@ const Policies: FC = ({ setPolicies(commonPolicies); }).catch((/* error */) => { - // console.error(error); - Alert.error('Error occurred while retrieving the policy list'); + // console.error(error); + Alert.error(intl.formatMessage({ + id: 'Error.Retrieve.Policy.List', + defaultMessage: 'Error occurred while retrieving the policy list', + })); }); } @@ -216,7 +220,10 @@ const Policies: FC = ({ }) .catch((/* error */) => { // console.error(error); - Alert.error('Error occurred while retrieving the policy'); + Alert.error(intl.formatMessage({ + id: 'Error.Retrieve.Policy', + defaultMessage: 'Error occurred while retrieving the policy', + })); }) .finally(() => { setLoading(false); @@ -301,17 +308,26 @@ const Policies: FC = ({ const validate = () => { let isValidate = true; if (name === '') { - Alert.error('Policy name cannot be empty'); + Alert.error(intl.formatMessage({ + id: 'Policy.Name.Cannot.Be.Empty', + defaultMessage: 'Policy name cannot be empty', + })); isValidate = false; } if (description === '') { - Alert.error('Policy description cannot be empty'); + Alert.error(intl.formatMessage({ + id: 'Policy.Description.Cannot.Be.Empty', + defaultMessage: 'Policy description cannot be empty', + })); isValidate = false; } if ((!globalLevelPolicies.request || globalLevelPolicies.request.length === 0) && (!globalLevelPolicies.response || globalLevelPolicies.response.length === 0) && (!globalLevelPolicies.fault || globalLevelPolicies.fault.length === 0)) { - Alert.error('Policy mapping cannot be empty'); + Alert.error(intl.formatMessage({ + id: 'Policy.Mapping.Cannot.Be.Empty', + defaultMessage: 'Policy mapping cannot be empty', + })); isValidate = false; } return isValidate; @@ -346,7 +362,10 @@ const Policies: FC = ({ .then((response) => { setLoading(false); if (response.status === 200 || response.status === 201) { - Alert.success('Policy mapping added successfully'); + Alert.success(intl.formatMessage({ + id: 'Policy.Mapping.Added.Successfully', + defaultMessage: 'Policy mapping added successfully', + })); history.goBack(); } else { @@ -355,7 +374,10 @@ const Policies: FC = ({ }) .catch((/* error */) => { // console.error(error); - Alert.error('Error occurred while adding the policy mapping'); + Alert.error(intl.formatMessage({ + id: 'Adding.Policy.Mapping.Error', + defaultMessage: 'Error occurred while adding the policy mapping', + })); }) } setLoading(false); @@ -391,7 +413,10 @@ const Policies: FC = ({ .then((response) => { if (response.status === 200 || response.status === 201) { setLoading(false); - Alert.success('Policy mapping updated successfully'); + Alert.success(intl.formatMessage({ + id: 'Policy.Mapping.Update.Success', + defaultMessage: 'Policy mapping updated successfully', + })); history.goBack(); } else { @@ -400,7 +425,10 @@ const Policies: FC = ({ }) .catch((/* error */) => { // console.error(error); - Alert.error('Error occurred while updating the policy mapping'); + Alert.error(intl.formatMessage({ + id: 'Policy.Mapping.Update.Error', + defaultMessage: 'Error occurred while updating the policy mapping', + })); }) } setLoading(false); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx index c3aff29303a..62badc2907c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/PolicyList.tsx @@ -92,17 +92,32 @@ const PolicyList: FC = ({policyList, fetchPolicies}) => { className={classes.flowTabs} > Request} + label={ + + } id='request-tab' aria-controls='request-tabpanel' /> Response} + label={ + + } id='response-tab' aria-controls='response-tabpanel' /> Fault} + label={ + + } id='fault-tab' aria-controls='fault-tabpanel' /> diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx index 1ee690bad55..6b975ff913c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx @@ -19,6 +19,7 @@ import React, { FC, useContext, useEffect, useState } from 'react'; import { Alert } from 'AppComponents/Shared'; import PoliciesExpansionShared from 'AppComponents/Shared/PoliciesUI/PoliciesExpansion'; +import { useIntl } from 'react-intl'; import PolicyDropzone from './PolicyDropzone'; import type { AttachedPolicy, Policy, PolicySpec } from '../Types'; import FlowArrow from './FlowArrow'; @@ -70,6 +71,7 @@ const PoliciesExpansion: FC = ({ const [faultFlowDroppablePolicyList, setFaultFlowDroppablePolicyList] = useState([]); const { globalLevelPolicies } = useContext(GlobalPolicyContext); + const intl = useIntl(); /** * This is where the applicable (droppable) flows are set for each policy. @@ -133,7 +135,10 @@ const PoliciesExpansion: FC = ({ requestFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { // console.error("Cannot find policyObj for policyId: " + policyId); - Alert.error("Cannot find policyObj for policyId: " + policyId); + Alert.error(intl.formatMessage({ + id: 'Cannot.Find.PolicyObj.For.PolicyId', + defaultMessage: 'Cannot find policyObj for policyId: ', + }) + policyId); } } } @@ -168,7 +173,10 @@ const PoliciesExpansion: FC = ({ responseFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { // console.error("Cannot find policyObj for policyId: " + policyId); - Alert.error("Cannot find policyObj for policyId: " + policyId); + Alert.error(intl.formatMessage({ + id: 'Cannot.Find.PolicyObj.For.PolicyId', + defaultMessage: 'Cannot find policyObj for policyId: ', + }) + policyId); } } } @@ -204,7 +212,10 @@ const PoliciesExpansion: FC = ({ faultFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { // console.error("Cannot find policyObj for policyId: " + policyId); - Alert.error("Cannot find policyObj for policyId: " + policyId); + Alert.error(intl.formatMessage({ + id: 'Cannot.Find.PolicyObj.For.PolicyId', + defaultMessage: 'Cannot find policyObj for policyId: ', + }) + policyId); } } } From 37d6e2466b6b2b8ff624ed1501e036c340182992 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 23 Nov 2023 11:22:21 +0530 Subject: [PATCH 093/102] Add the required changes --- .../main/webapp/site/public/locales/en.json | 76 ++++++++++--------- .../webapp/site/public/locales/raw.en.json | 43 ++++++----- .../GlobalPolicies/Listing/Listing.tsx | 12 ++- .../GlobalSpecificComponents/Policies.tsx | 10 ++- 4 files changed, 81 insertions(+), 60 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index ba78c903ce1..33920f3548c 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -17,6 +17,24 @@ "value": "Cancel" } ], + "Actions": [ + { + "type": 0, + "value": "Actions" + } + ], + "Active.Development.Available": [ + { + "type": 0, + "value": "An active deployment is available" + } + ], + "Active.Developments.Available": [ + { + "type": 0, + "value": "Active deployments are available" + } + ], "Adding.Policy.Mapping.Error": [ { "type": 0, @@ -8643,7 +8661,7 @@ "value": "Cancel" } ], - "Cannot.find.policyObj.for.policyId": [ + "Cannot.Find.PolicyObj.For.PolicyId": [ { "type": 0, "value": "Cannot find policyObj for policyId:" @@ -8813,7 +8831,7 @@ "value": "Deployed Gateways" } ], - "Deployed.Gateway.Listing.Table.not.available": [ + "Deployed.Gateway.Listing.Table.Not.Available": [ { "type": 0, "value": "No Deployed Gateways" @@ -8861,7 +8879,7 @@ "value": "Error while validating the imported schema" } ], - "Fault.Details.Policies.PolicyList.title": [ + "Fault.Details.Policies.PolicyList.Title": [ { "type": 0, "value": "Fault" @@ -8989,6 +9007,12 @@ "value": "Global Policy" } ], + "GlobalPolicies.Listing.Table.Header.Actions.Edit": [ + { + "type": 0, + "value": "Edit" + } + ], "GlobalPolicies.Listing.onboarding.create.new": [ { "type": 0, @@ -9025,12 +9049,6 @@ "value": "Delete" } ], - "GlobalPolicies.Listing.table.header.actions.edit": [ - { - "type": 0, - "value": "Edit" - } - ], "LoginDenied.logout": [ { "type": 0, @@ -9055,6 +9073,18 @@ "value": "Another global policy has been already deployed in this gateway" } ], + "Policy.Delete.Error": [ + { + "type": 0, + "value": "Error while deleting the policy" + } + ], + "Policy.Delete.Successful": [ + { + "type": 0, + "value": "Policy deleted successfully" + } + ], "Policy.Deploy.Successful": [ { "type": 0, @@ -9103,25 +9133,13 @@ "value": "Policy undeployed successfully" } ], - "Policy.delete.error": [ - { - "type": 0, - "value": "Error while deleting the policy" - } - ], - "Policy.delete.successful": [ - { - "type": 0, - "value": "Policy deleted successfully" - } - ], - "Request.Details.Policies.PolicyList.title": [ + "Request.Details.Policies.PolicyList.Title": [ { "type": 0, "value": "Request" } ], - "Response.Details.Policies.PolicyList.title": [ + "Response.Details.Policies.PolicyList.Title": [ { "type": 0, "value": "Response" @@ -9943,18 +9961,6 @@ "value": "Internal Server Error" } ], - "active.development.available": [ - { - "type": 0, - "value": "An active deployment is available" - } - ], - "active.developments.available": [ - { - "type": 0, - "value": "Active deployments are available" - } - ], "api.console.security.heading": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 3a24b655af9..aad6a33ffd1 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -8,6 +8,15 @@ "APIs.details.endpoints.certificate.usage.cancel": { "defaultMessage": "Cancel" }, + "Actions": { + "defaultMessage": "Actions" + }, + "Active.Development.Available": { + "defaultMessage": "An active deployment is available" + }, + "Active.Developments.Available": { + "defaultMessage": "Active deployments are available" + }, "Adding.Policy.Mapping.Error": { "defaultMessage": "Error occurred while adding the policy mapping" }, @@ -4131,7 +4140,7 @@ "Cancel": { "defaultMessage": "Cancel" }, - "Cannot.find.policyObj.for.policyId": { + "Cannot.Find.PolicyObj.For.PolicyId": { "defaultMessage": "Cannot find policyObj for policyId:" }, "CommonPolicies.CreatePolicy.breadcrumb.create.new.policy": { @@ -4212,7 +4221,7 @@ "Deployed.Gateway.Listing.Table.Header.Name": { "defaultMessage": "Deployed Gateways" }, - "Deployed.Gateway.Listing.Table.not.available": { + "Deployed.Gateway.Listing.Table.Not.Available": { "defaultMessage": "No Deployed Gateways" }, "Endpoint.Suspension.State": { @@ -4236,7 +4245,7 @@ "Error.while.validating.the.imported.graphQLSchema": { "defaultMessage": "Error while validating the imported schema" }, - "Fault.Details.Policies.PolicyList.title": { + "Fault.Details.Policies.PolicyList.Title": { "defaultMessage": "Fault" }, "Fetching.Policies.Error": { @@ -4296,6 +4305,9 @@ "Global.Policy.Listing.Table.Header.Name": { "defaultMessage": "Global Policy" }, + "GlobalPolicies.Listing.Table.Header.Actions.Edit": { + "defaultMessage": "Edit" + }, "GlobalPolicies.Listing.onboarding.create.new": { "defaultMessage": "Let’s get started!" }, @@ -4314,9 +4326,6 @@ "GlobalPolicies.Listing.table.header.actions.delete": { "defaultMessage": "Delete" }, - "GlobalPolicies.Listing.table.header.actions.edit": { - "defaultMessage": "Edit" - }, "LoginDenied.logout": { "defaultMessage": "Logout" }, @@ -4329,6 +4338,12 @@ "Policy.Already.Deployed": { "defaultMessage": "Another global policy has been already deployed in this gateway" }, + "Policy.Delete.Error": { + "defaultMessage": "Error while deleting the policy" + }, + "Policy.Delete.Successful": { + "defaultMessage": "Policy deleted successfully" + }, "Policy.Deploy.Successful": { "defaultMessage": "Policy deployed successfully" }, @@ -4353,16 +4368,10 @@ "Policy.Undeploy.Successful": { "defaultMessage": "Policy undeployed successfully" }, - "Policy.delete.error": { - "defaultMessage": "Error while deleting the policy" - }, - "Policy.delete.successful": { - "defaultMessage": "Policy deleted successfully" - }, - "Request.Details.Policies.PolicyList.title": { + "Request.Details.Policies.PolicyList.Title": { "defaultMessage": "Request" }, - "Response.Details.Policies.PolicyList.title": { + "Response.Details.Policies.PolicyList.Title": { "defaultMessage": "Response" }, "Scopes.Create.CreateScope.cancel": { @@ -4755,12 +4764,6 @@ "UnexpectedError.title": { "defaultMessage": "Internal Server Error" }, - "active.development.available": { - "defaultMessage": "An active deployment is available" - }, - "active.developments.available": { - "defaultMessage": "Active deployments are available" - }, "api.console.security.heading": { "defaultMessage": "Security" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 57601a59871..516fc3fa5a2 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -333,7 +333,10 @@ const Listing: React.FC = () => { } } else { - APIMAlert.error(response.body.message); + APIMAlert.error(intl.formatMessage({ + id: 'Error.Deploy.Policy', + defaultMessage: 'Error occurred while deploying the policy', + })); } }) .catch((/* error */) => { @@ -427,7 +430,7 @@ const Listing: React.FC = () => { return `${name.substring(0, 20)}...`; } return name; - } + }; /** * Columns for the MUI table. @@ -484,7 +487,10 @@ const Listing: React.FC = () => { * Action Column. */ { - name: 'Actions', + name: intl.formatMessage({ + id: 'Actions', + defaultMessage: 'Actions', + }), options: { customBodyRender: (value: any, tableMeta: any) => { const policyId = tableMeta.rowData[0]; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index 35477887252..794686d10ef 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -369,7 +369,10 @@ const Policies: FC = ({ history.goBack(); } else { - Alert.error(response.body.message); + Alert.error(intl.formatMessage({ + id: 'Adding.Policy.Mapping.Error', + defaultMessage: 'Error occurred while adding the policy mapping', + })); } }) .catch((/* error */) => { @@ -420,7 +423,10 @@ const Policies: FC = ({ history.goBack(); } else { - Alert.error(response.body.message); + Alert.error(intl.formatMessage({ + id: 'Policy.Mapping.Update.Error', + defaultMessage: 'Error occurred while updating the policy mapping', + })); } }) .catch((/* error */) => { From 8d2f5409e0de664bf6ec9779a3629c2227e8980c Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 23 Nov 2023 13:40:33 +0530 Subject: [PATCH 094/102] Get description to a MUI column as a tooltip icon --- .../main/webapp/site/public/locales/en.json | 6 +++ .../webapp/site/public/locales/raw.en.json | 3 ++ .../GlobalPolicies/Listing/Listing.tsx | 45 ++++++++++++++++--- 3 files changed, 49 insertions(+), 5 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 33920f3548c..ef5ab91fc87 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8825,6 +8825,12 @@ "value": "Deploy" } ], + "Deployed.Gateway.Listing.Table.Header.Description": [ + { + "type": 0, + "value": "Description" + } + ], "Deployed.Gateway.Listing.Table.Header.Name": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index aad6a33ffd1..514b2692cf0 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4218,6 +4218,9 @@ "Deploy": { "defaultMessage": "Deploy" }, + "Deployed.Gateway.Listing.Table.Header.Description": { + "defaultMessage": "Description" + }, "Deployed.Gateway.Listing.Table.Header.Name": { "defaultMessage": "Deployed Gateways" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 516fc3fa5a2..f4900e2e1d5 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -38,7 +38,6 @@ import { DialogContentText, useTheme } from '@material-ui/core'; -import Alert from '@material-ui/lab/Alert'; import APIMAlert from 'AppComponents/Shared/Alert'; import Icon from '@material-ui/core/Icon'; import API from 'AppData/api'; @@ -110,6 +109,10 @@ const useStyles = makeStyles((theme) => ({ tableContainer: { maxWidth: '400px' }, + noDeployedGateways: { + color: 'grey', + fontStyle: 'italic' + } })); interface Policy { @@ -474,6 +477,40 @@ const Listing: React.FC = () => { ))} ); + } else { + return ( +

+ +

+ ); + } + } + } + }, + /** + * Description Column. + */ + { + name: 'description', + label: intl.formatMessage({ + id: 'Deployed.Gateway.Listing.Table.Header.Description', + defaultMessage: 'Description', + }), + options: { + customBodyRender: (value: string) => { + if (value) { + return ( +
+ + + info + + +
+ ); } else { return intl.formatMessage({ id: 'Deployed.Gateway.Listing.Table.Not.Available', @@ -626,10 +663,8 @@ const Listing: React.FC = () => { const allDepoloyedGateways = getAllDepoloyedGateways(); return ( - - - {policy.description} - + + From 7227b724731493e7818f7640c0cf3c046fa2a41d Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Thu, 7 Dec 2023 14:27:30 +0530 Subject: [PATCH 095/102] Do the required design change Multi selecting dropdown design for deployment and undeploy from chip --- .../main/webapp/site/public/locales/en.json | 18 +- .../webapp/site/public/locales/raw.en.json | 9 +- .../GlobalPolicies/Listing/Listing.tsx | 419 ++++++++++-------- 3 files changed, 249 insertions(+), 197 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index ef5ab91fc87..a40f28956ba 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -9073,12 +9073,6 @@ "value": "Error 403 : Forbidden" } ], - "Policy.Already.Deployed": [ - { - "type": 0, - "value": "Another global policy has been already deployed in this gateway" - } - ], "Policy.Delete.Error": [ { "type": 0, @@ -9471,6 +9465,12 @@ "value": "List of APIs" } ], + "Select.Gateways": [ + { + "type": 0, + "value": "Select Gateways to Deploy" + } + ], "ServiceCatalog.CreateApi.api.context.label": [ { "type": 0, @@ -9943,12 +9943,6 @@ "value": "Version" } ], - "Undeploy": [ - { - "type": 0, - "value": "Undeploy" - } - ], "UnexpectedError.logout": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 514b2692cf0..3cf0c0c69d9 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4338,9 +4338,6 @@ "LoginDenied.title": { "defaultMessage": "Error 403 : Forbidden" }, - "Policy.Already.Deployed": { - "defaultMessage": "Another global policy has been already deployed in this gateway" - }, "Policy.Delete.Error": { "defaultMessage": "Error while deleting the policy" }, @@ -4533,6 +4530,9 @@ "Scopes.Usage.UsageViewAPI.api.usage": { "defaultMessage": "List of APIs" }, + "Select.Gateways": { + "defaultMessage": "Select Gateways to Deploy" + }, "ServiceCatalog.CreateApi.api.context.label": { "defaultMessage": "Context" }, @@ -4755,9 +4755,6 @@ "ServiceCatalog.ServicesTableView.ServicesTableView.version": { "defaultMessage": "Version" }, - "Undeploy": { - "defaultMessage": "Undeploy" - }, "UnexpectedError.logout": { "defaultMessage": "Logout" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index f4900e2e1d5..5379af277bc 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -16,6 +16,8 @@ * under the License. */ +/* eslint-disable react/jsx-props-no-spreading */ + import React, { useState, useEffect } from 'react'; import { Button, @@ -25,21 +27,20 @@ import { Typography, makeStyles, Chip, - TableContainer, - Table, - TableBody, TableCell, TableRow, - Paper, Dialog, + TextField, DialogTitle, DialogContent, DialogActions, DialogContentText, useTheme } from '@material-ui/core'; +import Autocomplete from '@material-ui/lab/Autocomplete'; import APIMAlert from 'AppComponents/Shared/Alert'; import Icon from '@material-ui/core/Icon'; +import CloudOffRoundedIcon from '@material-ui/icons/CloudOffRounded'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import { useIntl, FormattedMessage } from 'react-intl'; @@ -89,16 +90,15 @@ const useStyles = makeStyles((theme) => ({ }, button: { width: '112px', + height: '37px', }, icon: { marginRight: theme.spacing(0.5), }, chip: { - marginRight: '8px' - }, - gatewayChip: { - width: '200px', - justifyContent: 'center' + marginRight: '8px', + marginBottom: '4px', + marginTop: '4px', }, dialogBackdrop: { backgroundColor: 'rgba(0, 0, 0, 0.08)' @@ -106,13 +106,10 @@ const useStyles = makeStyles((theme) => ({ dialogPaper: { boxShadow: 'none' }, - tableContainer: { - maxWidth: '400px' - }, noDeployedGateways: { color: 'grey', fontStyle: 'italic' - } + }, })); interface Policy { @@ -140,6 +137,11 @@ interface Environment { additionalProperties: any; } +interface SelectedGateway { + id: string; + gatewayLabels: string[]; +} + /** * Global policies Lisitng Page. * @returns {TSX} - Listing Page. @@ -147,6 +149,7 @@ interface Environment { const Listing: React.FC = () => { const classes = useStyles(); const [policies, setPolicies] = useState([]); + const [selectedGateways, setSelectedGateways] = useState([]); const [environments, setEnvironments] = useState([]); const [loading, setLoading] = useState(false); const [notFound, setnotFound] = useState(false); @@ -157,6 +160,45 @@ const Listing: React.FC = () => { const { globalPolicyAddIcon } = theme.custom.landingPage.icons; const intl = useIntl(); + /** + * Empty array to store the policies + * @param {Policy[]} inputPolicies - Policies. + * @returns {Policy[]} - Initial object array to hold selected gateways from the dropdown. + */ + const getInitialSelectedGateways = (inputPolicies: Policy[]): SelectedGateway[] => { + const selectedGatewaysList: SelectedGateway[] = []; + + inputPolicies.forEach((policy) => { + const { id } = policy; + const selectedGatewayValue: SelectedGateway = { + id, + gatewayLabels: [], + }; + selectedGatewaysList.push(selectedGatewayValue); + }); + + return selectedGatewaysList; + }; + + /** + * After deploying or undeploying, we need to clean the selected gateways list. + * @param {string} policyId - Policy ID. + * @returns {SelectedGateway[]} - Deployed policies' selected gateways should be empty. + */ + const cleanSeletectedGateways = (policyId: string): SelectedGateway[] => { + const updatedSelectedGateways: SelectedGateway[] = selectedGateways.map((data) => { + if (data.id === policyId) { + return { + ...data, + gatewayLabels: [], + }; + } + return data; + }); + + return updatedSelectedGateways; + }; + /** * Fetch the data from the backend to the compoenent. */ @@ -167,6 +209,7 @@ const Listing: React.FC = () => { promisedPolicies .then((response: any) => { setPolicies(response.body.list); + setSelectedGateways(getInitialSelectedGateways(response.body.list)); setLoading(false); }) .catch((/* error */) => { @@ -204,19 +247,6 @@ const Listing: React.FC = () => { }); }; - /** - * Check if the gateway is deployed for the Golbal Policy. - * @param {string} gateway - Gateway. - * @param {string[]} appliedGatewayLabels - Applied Gateway Labels. - * @returns {boolean} - Return true if deployed. - */ - const isDeployed = (gateway: string, appliedGatewayLabels: string[]) => { - if (appliedGatewayLabels.includes(gateway)) { - return true; - } - return false; - } - /** * Get the applied gateway labels as an array list for a specific policy by ID. * @param {string} id - Policy Identifier. @@ -227,6 +257,16 @@ const Listing: React.FC = () => { return policy ? policy.appliedGatewayLabels : []; } + /** + * Get the applied gateway labels as an array list for a specific policy by ID. + * @param {string} id - Policy Identifier. + * @returns {string[]} - Applied Gateway labels list. + */ + const getSelectedGatewayLabelsById = (id: string) => { + const policy = selectedGateways.find(item => item.id === id); + return policy ? policy.gatewayLabels : []; + } + /** * Get the deployment array for a specific policy by ID. Below is an example. * [{"gatewayLabel": "A","gatewayDeployment": false},{"B": "GateWay1","gatewayDeployment": false}]. @@ -264,19 +304,20 @@ const Listing: React.FC = () => { /** * Function to add a label to a specific policy in UI. * @param {string} policyId - Policy Identifier. - * @param {string} newLabel - Newly added enviroment/gateway to applied Gateway Labels. + * @param {string[]} newLabels - Newly added enviroment/gateway to applied Gateway Labels. */ - const addLabelToPolicy = (policyId: string, newLabel: string) => { - const updatedPolicies = policies.map((policy) => { + const addLabelsToPolicy = (policyId: string, newLabels: string[]) => { + const updatedPolicies: Policy[] = policies.map((policy) => { if (policy.id === policyId) { return { ...policy, - appliedGatewayLabels: [...policy.appliedGatewayLabels, newLabel], + appliedGatewayLabels: [...policy.appliedGatewayLabels, ...newLabels], }; } return policy; }); setPolicies(updatedPolicies); + setSelectedGateways(cleanSeletectedGateways(policyId)); }; /** @@ -295,6 +336,7 @@ const Listing: React.FC = () => { return policy; }); setPolicies(updatedPolicies); + setSelectedGateways(cleanSeletectedGateways(policyId)); }; /** @@ -303,7 +345,7 @@ const Listing: React.FC = () => { * @param {string} environement - Deploying enviroment/gateway. * @param {boolean} deploying - Deploying or undeploying. */ - const deployOrUndeploy = (gatewayPolicyMappingId: string, environement: string, deploying: boolean) => { + const undeploy = (gatewayPolicyMappingId: string, environement: string) => { setLoading(true); const deploymentArray = getDeploymentArray(gatewayPolicyMappingId); const updatedDeploymentArray = toggleGatewayDeployment(deploymentArray, environement); @@ -314,26 +356,15 @@ const Listing: React.FC = () => { promise .then((response) => { if (response.status === 200 || response.status === 201) { - setLoading(false); - if (deploying) { - APIMAlert.success(intl.formatMessage({ - id: 'Policy.Deploy.Successful', - defaultMessage: 'Policy deployed successfully', - })); - /** - * If successful, add to the state rather than getting from backend. - */ - addLabelToPolicy(gatewayPolicyMappingId, environement); - } else { - APIMAlert.success(intl.formatMessage({ - id: 'Policy.Undeploy.Successful', - defaultMessage: 'Policy undeployed successfully', - })); - /** - * If successful, remove from the state rather than getting from backend. - */ - removeLabelFromPolicy(gatewayPolicyMappingId, environement); - } + setLoading(false); + APIMAlert.success(intl.formatMessage({ + id: 'Policy.Undeploy.Successful', + defaultMessage: 'Policy undeployed successfully', + })); + /** + * If successful, remove from the state rather than getting from backend. + */ + removeLabelFromPolicy(gatewayPolicyMappingId, environement); } else { APIMAlert.error(intl.formatMessage({ @@ -344,17 +375,67 @@ const Listing: React.FC = () => { }) .catch((/* error */) => { // console.error(error); - if (deploying) { + APIMAlert.error(intl.formatMessage({ + id: 'Error.Undeploy.Policy', + defaultMessage: 'Error occurred while undeploying the policy', + })); + }) + setLoading(false); + } + + /** + * Function to undeploy a policy mapping to another enviroment/gateway. + * @param {string} gatewayPolicyMappingId - Policy Identifier. + * @param {string[]} deployingGateways - Deploying enviroment/gateway. + * @param {boolean} deploying - Deploying or undeploying. + */ + const deploy = (gatewayPolicyMappingId: string, deployingGateways: string[]) => { + setLoading(true); + const deploymentArray = getDeploymentArray(gatewayPolicyMappingId); + + /** + * Iterate through the selected gateways and update the deployment array. + */ + const updatedDeploymentArray = deploymentArray.map(({ gatewayLabel, gatewayDeployment }) => { + if (deployingGateways.includes(gatewayLabel) && gatewayDeployment === false) { + return { gatewayLabel, gatewayDeployment: true }; + } + return { gatewayLabel, gatewayDeployment }; + }); + + /** + * call the backend API and handle the response + */ + const promise = API.engageGlobalPolicy(gatewayPolicyMappingId, updatedDeploymentArray); + promise + .then((response) => { + if (response.status === 200 || response.status === 201) { + setLoading(false); + APIMAlert.success(intl.formatMessage({ + id: 'Policy.Deploy.Successful', + defaultMessage: 'Policy deployed successfully', + })); + /** + * If successful, add to the state rather than getting from backend. + */ + addLabelsToPolicy( + gatewayPolicyMappingId, + deployingGateways + ); + } + else { APIMAlert.error(intl.formatMessage({ id: 'Error.Deploy.Policy', defaultMessage: 'Error occurred while deploying the policy', })); - } else { - APIMAlert.error(intl.formatMessage({ - id: 'Error.Undeploy.Policy', - defaultMessage: 'Error occurred while undeploying the policy', - })); - } + } + }) + .catch((/* error */) => { + // console.error(error); + APIMAlert.error(intl.formatMessage({ + id: 'Error.Deploy.Policy', + defaultMessage: 'Error occurred while deploying the policy', + })); }) setLoading(false); } @@ -383,6 +464,8 @@ const Listing: React.FC = () => { */ const updatedPolicies = policies.filter((policy) => policy.id !== gatewayPolicyMappingId); setPolicies(updatedPolicies); + // Remove from the selected gateways list as well + setSelectedGateways(selectedGateways.filter((gateway) => gateway.id !== gatewayPolicyMappingId)); APIMAlert.success(intl.formatMessage({ id: 'Policy.Delete.Successful', defaultMessage: 'Policy deleted successfully', @@ -423,18 +506,6 @@ const Listing: React.FC = () => { const policiesList = policies; - /** - * Make a short version for 20+ character strings. - * @param {string} name - Any string (Ex: Gateway Label) - * @returns {string} - First 20 characters and if exceeded, three dots for the rest. - */ - const shortName = (name: string) => { - if (name.length > 20) { - return `${name.substring(0, 20)}...`; - } - return name; - }; - /** * Columns for the MUI table. */ @@ -463,17 +534,23 @@ const Listing: React.FC = () => { defaultMessage: 'Deployed Gateways', }), options: { - customBodyRender: (value: string[] | undefined) => { + customBodyRender: (value: string[] | undefined, tableMeta: any) => { + const policyId = tableMeta.rowData[0]; if (value && value.length > 0) { return (
{value.map((gateway: string) => ( - + <> + undeploy(policyId, gateway)} + deleteIcon={} + + /> + ))}
); @@ -500,23 +577,16 @@ const Listing: React.FC = () => { defaultMessage: 'Description', }), options: { - customBodyRender: (value: string) => { - if (value) { - return ( -
- - - info - - -
- ); - } else { - return intl.formatMessage({ - id: 'Deployed.Gateway.Listing.Table.Not.Available', - defaultMessage: 'No Deployed Gateways', - }); - } + customBodyRender: (value: string) => { + return ( +
+ + + info_outlined + + +
+ ); } } }, @@ -537,7 +607,9 @@ const Listing: React.FC = () => { * Handle deletion. If verifications are passed, it will open the dialog box for the confirmation. */ const handleDeleteClick = () => { - // If there is active depoloyments, we need to block the deletion + /** + * If there is active depoloyments, we need to block the deletion. + */ const appliedGatewayList = getAppliedGatewayLabelsById(policyId); if (appliedGatewayList.length > 0){ APIMAlert.error((appliedGatewayList.length === 1) ? @@ -660,94 +732,83 @@ const Listing: React.FC = () => { * Expanded row's policy information. */ const policy = policiesList[rowIndex]; + /** + * Gateways which are deployed by any policy. These cannot be deployed again. + */ const allDepoloyedGateways = getAllDepoloyedGateways(); + /** + * Gateways except the ones which are already deployed. + */ + const gatewaysWithoutAppliedLabels = + gatewayList.filter((item) => !policy.appliedGatewayLabels.includes(item)); + const deployableGateways = + gatewaysWithoutAppliedLabels.filter((item) => !allDepoloyedGateways.includes(item)); + + const handleSelectChange = (id: string) => ( + event: React.ChangeEvent<{}>, + value: string[], + ) => { + const newSelectedGateways = selectedGateways.map((data) => { + if (data.id === id) { + return { + ...data, + gatewayLabels: value, + }; + } + return data; + }); + setSelectedGateways(newSelectedGateways); + }; + return ( - - - -
- - {gatewayList.map((gateway: string) => { - let button; - - if (isDeployed(gateway, policy.appliedGatewayLabels)) { - button = ( - - ); - } else if (allDepoloyedGateways.includes(gateway)) { - button = ( - - )} - > - - - - - ); - } else { - button = ( - - ); - } - return ( - - - - - - - - {button} - - - ); - })} - -
- - + + + +
+ ( + + )} + /> +
+ + + + + - - + ); }, }; From 64379b7d58dd289c3061ad008f9cedbf4e1beef0 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 8 Dec 2023 17:40:32 +0530 Subject: [PATCH 096/102] Imrpove the list component --- .../main/webapp/site/public/locales/en.json | 18 ++ .../webapp/site/public/locales/raw.en.json | 9 + .../GlobalPolicies/Listing/Listing.tsx | 304 +++++++++++++----- 3 files changed, 246 insertions(+), 85 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index a40f28956ba..212bb4003ca 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8807,6 +8807,18 @@ "value": "Are you sure you want to delete the policy" } ], + "Confirm.Deploy": [ + { + "type": 0, + "value": "Confirm Deploy" + } + ], + "Confirm.Deploy.Verify": [ + { + "type": 0, + "value": "Are you sure you want to depoly the policy in the selected gateways?" + } + ], "Connection.Timeout": [ { "type": 0, @@ -8825,6 +8837,12 @@ "value": "Deploy" } ], + "Deploy.Helper": [ + { + "type": 0, + "value": "If a Global Policy is deployed to a Gateway,respective gateway will not be available for deploymnet for ths policy. Please undeploy other global policy first." + } + ], "Deployed.Gateway.Listing.Table.Header.Description": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 3cf0c0c69d9..d0b6b209083 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4209,6 +4209,12 @@ "Confirm.Delete.Verify": { "defaultMessage": "Are you sure you want to delete the policy" }, + "Confirm.Deploy": { + "defaultMessage": "Confirm Deploy" + }, + "Confirm.Deploy.Verify": { + "defaultMessage": "Are you sure you want to depoly the policy in the selected gateways?" + }, "Connection.Timeout": { "defaultMessage": "Connection Timeout" }, @@ -4218,6 +4224,9 @@ "Deploy": { "defaultMessage": "Deploy" }, + "Deploy.Helper": { + "defaultMessage": "If a Global Policy is deployed to a Gateway,respective gateway will not be available for deploymnet for ths policy. Please undeploy other global policy first." + }, "Deployed.Gateway.Listing.Table.Header.Description": { "defaultMessage": "Description" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 5379af277bc..b59fcb4c779 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -41,6 +41,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; import APIMAlert from 'AppComponents/Shared/Alert'; import Icon from '@material-ui/core/Icon'; import CloudOffRoundedIcon from '@material-ui/icons/CloudOffRounded'; +import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import { useIntl, FormattedMessage } from 'react-intl'; @@ -110,6 +111,9 @@ const useStyles = makeStyles((theme) => ({ color: 'grey', fontStyle: 'italic' }, + iconSmall: { + fontSize: '16px' + }, })); interface Policy { @@ -153,9 +157,12 @@ const Listing: React.FC = () => { const [environments, setEnvironments] = useState([]); const [loading, setLoading] = useState(false); const [notFound, setnotFound] = useState(false); - const [isDialogOpen, setIsDialogOpen] = useState(false); + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + const [isDeployDialogOpen, setIsDeployDialogOpen] = useState(false); + const [isUndeployDialogOpen, setIsUndeployDialogOpen] = useState(false); const [selectedPolicyName, setSelectedPolicyName] = useState(''); const [selectedPolicyId, setSelectedPolicyId] = useState(''); + const [deployingGateway, setDeployingGateway] = useState(''); const theme : any = useTheme(); const { globalPolicyAddIcon } = theme.custom.landingPage.icons; const intl = useIntl(); @@ -346,6 +353,7 @@ const Listing: React.FC = () => { * @param {boolean} deploying - Deploying or undeploying. */ const undeploy = (gatewayPolicyMappingId: string, environement: string) => { + setIsUndeployDialogOpen(false); setLoading(true); const deploymentArray = getDeploymentArray(gatewayPolicyMappingId); const updatedDeploymentArray = toggleGatewayDeployment(deploymentArray, environement); @@ -390,6 +398,7 @@ const Listing: React.FC = () => { * @param {boolean} deploying - Deploying or undeploying. */ const deploy = (gatewayPolicyMappingId: string, deployingGateways: string[]) => { + setIsDeployDialogOpen(false); setLoading(true); const deploymentArray = getDeploymentArray(gatewayPolicyMappingId); @@ -451,7 +460,7 @@ const Listing: React.FC = () => { * @param {string} gatewayPolicyMappingId - Policy Identifier. */ const deletePolicy = (gatewayPolicyMappingId: string) => { - setIsDialogOpen(false); + setIsDeleteDialogOpen(false); setLoading(true); /** * call the backend API and handle the response @@ -506,16 +515,148 @@ const Listing: React.FC = () => { const policiesList = policies; + /** + * Dialog box (Modal or Pop up) which as for the confirmation to delete. + * @returns {JSX.Element} - Delete Dialog. + */ + const deleteDialog = () => { + return ( + + + + + + + + {selectedPolicyName}? + + + + + + + + ); + } + + /** + * Dialog box (Modal or Pop up) which as for the confirmation to deploy. + * @param {string} policyID - Policy ID. + * @param {string[]} deployingGatewayList - Deploying Gateway List. + * @returns {JSX.Element} - Delete Dialog. + */ + const deployDialog = (policyID: string, deployingGatewayList: string[]) => { + return ( + + + + + + + + + + + + + + + ); + } + + /** + * Dialog box (Modal or Pop up) which as for the confirmation to deploy. + * @param {string} policyID - Policy ID. + * @param {string} gateway - Undeploying Gateway. + * @returns {JSX.Element} - Delete Dialog. + */ + const undeployDialog = (policyID: string, gateway: string) => { + return ( + + + + + + + + + + + + + + + ); + } + /** * Columns for the MUI table. */ const columns: MUIDataTableColumnDef[] = [ { name: 'id', - options: { - display: 'excluded', + options: { filter: false, - }, + display: false, + viewColumns: false, + } }, { name: 'displayName', @@ -536,22 +677,29 @@ const Listing: React.FC = () => { options: { customBodyRender: (value: string[] | undefined, tableMeta: any) => { const policyId = tableMeta.rowData[0]; + + const handleUndeployClick = (gateway: string) => { + setDeployingGateway(gateway); + setIsUndeployDialogOpen(true); + } + if (value && value.length > 0) { return (
- {value.map((gateway: string) => ( - <> - undeploy(policyId, gateway)} - deleteIcon={} - - /> - - ))} + {value.slice().sort((a, b) => + a.localeCompare(b, undefined, { sensitivity: 'base' })).map((gateway: string) => + ( + <> + handleUndeployClick(gateway)} + deleteIcon={} + /> + ))} + {undeployDialog(policyId, deployingGateway)}
); } else { @@ -580,10 +728,10 @@ const Listing: React.FC = () => { customBodyRender: (value: string) => { return (
- - - info_outlined - + + + +
); @@ -625,7 +773,7 @@ const Listing: React.FC = () => { else { setSelectedPolicyId(policyId); setSelectedPolicyName(policyName); - setIsDialogOpen(true); + setIsDeleteDialogOpen(true); } }; @@ -660,40 +808,7 @@ const Listing: React.FC = () => { {/** * Dialog box (Modal or Pop up) which as for the confirmation to delete. */} - - - - - - - - {selectedPolicyName}? - - - - - - - + {deleteDialog()} ); @@ -762,35 +877,52 @@ const Listing: React.FC = () => { return ( - + + -
- ( - - )} - /> -
+ + + + a.localeCompare(b, undefined, { sensitivity: 'base' }))} + value={getSelectedGatewayLabelsById(policy.id)} + onChange={handleSelectChange(policy.id)} + renderInput={(params) => ( + + )} + /> + + + + + + + + + + {deployDialog(policy.id, getSelectedGatewayLabelsById(policy.id))} From d4ee41c935d52399b8226a1a06e113e30921734f Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Tue, 12 Dec 2023 10:10:59 +0530 Subject: [PATCH 097/102] Add scope management to the Global Policies Issue - https://github.com/wso2/api-manager/issues/1710 --- .../main/webapp/site/public/locales/en.json | 22 +++++- .../webapp/site/public/locales/raw.en.json | 13 ++- .../Base/Header/navbar/GlobalNavLinks.jsx | 4 +- .../GlobalPolicies/GlobalPolicies.tsx | 37 +++++---- .../GlobalPolicies/Listing/Listing.tsx | 79 +++++++++++-------- 5 files changed, 103 insertions(+), 52 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 212bb4003ca..d3a0feb74d5 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -8798,7 +8798,7 @@ "Confirm.Delete": [ { "type": 0, - "value": "Confirm Delete" + "value": "Confirm Deletion" } ], "Confirm.Delete.Verify": [ @@ -8810,7 +8810,7 @@ "Confirm.Deploy": [ { "type": 0, - "value": "Confirm Deploy" + "value": "Confirm Deployment" } ], "Confirm.Deploy.Verify": [ @@ -8819,6 +8819,18 @@ "value": "Are you sure you want to depoly the policy in the selected gateways?" } ], + "Confirm.UnDeploy": [ + { + "type": 0, + "value": "Confirm Undeployment" + } + ], + "Confirm.Undeploy.Verify": [ + { + "type": 0, + "value": "Are you sure you want to undepoly the policy?" + } + ], "Connection.Timeout": [ { "type": 0, @@ -9961,6 +9973,12 @@ "value": "Version" } ], + "Undeploy": [ + { + "type": 0, + "value": "Undeploy" + } + ], "UnexpectedError.logout": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index d0b6b209083..7c1004f3089 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4204,17 +4204,23 @@ "defaultMessage": "Policies" }, "Confirm.Delete": { - "defaultMessage": "Confirm Delete" + "defaultMessage": "Confirm Deletion" }, "Confirm.Delete.Verify": { "defaultMessage": "Are you sure you want to delete the policy" }, "Confirm.Deploy": { - "defaultMessage": "Confirm Deploy" + "defaultMessage": "Confirm Deployment" }, "Confirm.Deploy.Verify": { "defaultMessage": "Are you sure you want to depoly the policy in the selected gateways?" }, + "Confirm.UnDeploy": { + "defaultMessage": "Confirm Undeployment" + }, + "Confirm.Undeploy.Verify": { + "defaultMessage": "Are you sure you want to undepoly the policy?" + }, "Connection.Timeout": { "defaultMessage": "Connection Timeout" }, @@ -4764,6 +4770,9 @@ "ServiceCatalog.ServicesTableView.ServicesTableView.version": { "defaultMessage": "Version" }, + "Undeploy": { + "defaultMessage": "Undeploy" + }, "UnexpectedError.logout": { "defaultMessage": "Logout" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx index 2fc012ddf99..e99c82abeeb 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx @@ -22,7 +22,7 @@ import List from '@material-ui/core/List'; import LaunchIcon from '@material-ui/icons/Launch'; import { useTheme } from '@material-ui/styles'; import { FormattedMessage } from 'react-intl'; -import AuthManager from 'AppData/AuthManager'; +import AuthManager, { isRestricted } from 'AppData/AuthManager'; import { makeStyles } from '@material-ui/core/styles'; import Divider from '@material-ui/core/Divider'; @@ -118,7 +118,7 @@ function GlobalNavLinks(props) { defaultMessage='Policies' /> - {(adminUser) + {(!isRestricted(['apim:gateway_policy_manage', 'apim:gateway_policy_view'])) && ( { return ( - - - + {!isRestricted(['apim:gateway_policy_manage', 'apim:gateway_policy_view']) && + + } + {!isRestricted(['apim:gateway_policy_manage']) && + <> + + + + } ); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index b59fcb4c779..39305eb811d 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -42,6 +42,7 @@ import APIMAlert from 'AppComponents/Shared/Alert'; import Icon from '@material-ui/core/Icon'; import CloudOffRoundedIcon from '@material-ui/icons/CloudOffRounded'; import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import { isRestricted } from 'AppData/AuthManager'; import API from 'AppData/api'; import { Progress } from 'AppComponents/Shared'; import { useIntl, FormattedMessage } from 'react-intl'; @@ -212,7 +213,7 @@ const Listing: React.FC = () => { const fetchGlobalPolicies = () => { setLoading(true); // Due to a bug in current backend, we pass 0, 10 as a workaround for now - const promisedPolicies = API.getAllGatewayPolicies(0, 30); + const promisedPolicies = API.getAllGatewayPolicies(); promisedPolicies .then((response: any) => { setPolicies(response.body.list); @@ -623,7 +624,7 @@ const Listing: React.FC = () => { @@ -664,6 +665,27 @@ const Listing: React.FC = () => { id: 'Global.Policy.Listing.Table.Header.Name', defaultMessage: 'Global Policy', }), + options: { + customBodyRender: (value: string, tableMeta: any) => { + const policyDescription = tableMeta.rowData[3]; + return ( +
+ + + {value} + + + + + + + + + +
+ ); + } + } }, /** * Deployed Gateway Column. @@ -696,7 +718,9 @@ const Listing: React.FC = () => { variant='outlined' className={classes.chip} onDelete={() => handleUndeployClick(gateway)} - deleteIcon={} + deleteIcon={ + !isRestricted(['apim:gateway_policy_manage']) + ? :<>} /> ))} {undeployDialog(policyId, deployingGateway)} @@ -725,17 +749,7 @@ const Listing: React.FC = () => { defaultMessage: 'Description', }), options: { - customBodyRender: (value: string) => { - return ( -
- - - - - -
- ); - } + display: false, } }, /** @@ -747,6 +761,7 @@ const Listing: React.FC = () => { defaultMessage: 'Actions', }), options: { + display: !isRestricted(['apim:gateway_policy_manage']), customBodyRender: (value: any, tableMeta: any) => { const policyId = tableMeta.rowData[0]; const policyName = tableMeta.rowData[1]; @@ -831,7 +846,7 @@ const Listing: React.FC = () => { download: false, viewColumns: false, rowsPerPageOptions: [5, 10, 25, 50, 100], - expandableRows: true, + expandableRows: !isRestricted(['apim:gateway_policy_manage']), expandableRowsHeader: false, expandableRowsOnClick: false, renderExpandableRow: (rowData, rowMeta) => { @@ -1031,22 +1046,24 @@ const Listing: React.FC = () => { - - - + {!isRestricted(['apim:gateway_policy_manage']) + ? + + + :null} Date: Tue, 12 Dec 2023 11:24:50 +0530 Subject: [PATCH 098/102] Add view option to view scope --- .../main/webapp/site/public/locales/en.json | 6 ++ .../webapp/site/public/locales/raw.en.json | 3 + .../Create/CreateGlobalPolicy.tsx | 2 +- .../GlobalPolicies/Edit/EditGlobalPolicy.tsx | 2 +- .../GlobalPolicies/GlobalPolicies.tsx | 8 ++ .../GlobalPolicies/Listing/Listing.tsx | 92 ++++++++++++------- .../GlobalSpecificComponents/Policies.tsx | 6 +- .../GlobalPolicies/View/ViewGlobalPolicy.tsx | 38 ++++++++ 8 files changed, 122 insertions(+), 35 deletions(-) create mode 100644 portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/View/ViewGlobalPolicy.tsx diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index d3a0feb74d5..113d239ad7a 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -9049,6 +9049,12 @@ "value": "Edit" } ], + "GlobalPolicies.Listing.Table.Header.Actions.View": [ + { + "type": 0, + "value": "View" + } + ], "GlobalPolicies.Listing.onboarding.create.new": [ { "type": 0, diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 7c1004f3089..cba9ca231a8 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4326,6 +4326,9 @@ "GlobalPolicies.Listing.Table.Header.Actions.Edit": { "defaultMessage": "Edit" }, + "GlobalPolicies.Listing.Table.Header.Actions.View": { + "defaultMessage": "View" + }, "GlobalPolicies.Listing.onboarding.create.new": { "defaultMessage": "Let’s get started!" }, diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx index 0fb27347695..53dab2e3d99 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -23,7 +23,7 @@ import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalSpecificCompon */ const CreateGlobalPolicy: React.FC = () => { return ( - + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx index 28cc26ef23b..9842d51c97e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Edit/EditGlobalPolicy.tsx @@ -31,7 +31,7 @@ interface RouteParams { const EditGlobalPolicy: React.FC = () => { const { policyId } = useParams(); return ( - + ); }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx index 90d698b7f71..8001a3a2fb8 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/GlobalPolicies.tsx @@ -23,6 +23,7 @@ import { isRestricted } from 'AppData/AuthManager'; import Listing from './Listing/Listing'; import GlobalPoliciesCreate from './Create/CreateGlobalPolicy'; import GlobalPoliciesEdit from './Edit/EditGlobalPolicy'; +import GlobalPoliciesView from './View/ViewGlobalPolicy'; /** * `Route` elements for shared Global Policies UI. @@ -52,6 +53,13 @@ const GlobalPolicies = () => { /> } + {!isRestricted(['apim:gateway_policy_view']) && + + } ); diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 39305eb811d..5342218af0e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -506,6 +506,15 @@ const Listing: React.FC = () => { return `/global-policies/${policyId}/edit`; }; + /** + * Get the Global Policy view link. + * @param {string} policyId - Policy Identifier. + * @returns {string} - Url for the Global Policy view. + */ + const getViewUrl = (policyId: string) => { + return `/global-policies/${policyId}/view`; + }; + /** * Sorts an array of Policy objects by their display names in ascending order. * @param {Policy[]} policies - An array of Policy objects to be sorted. @@ -720,7 +729,7 @@ const Listing: React.FC = () => { onDelete={() => handleUndeployClick(gateway)} deleteIcon={ !isRestricted(['apim:gateway_policy_manage']) - ? :<>} + ? : <>} /> ))} {undeployDialog(policyId, deployingGateway)} @@ -761,7 +770,6 @@ const Listing: React.FC = () => { defaultMessage: 'Actions', }), options: { - display: !isRestricted(['apim:gateway_policy_manage']), customBodyRender: (value: any, tableMeta: any) => { const policyId = tableMeta.rowData[0]; const policyName = tableMeta.rowData[1]; @@ -791,42 +799,62 @@ const Listing: React.FC = () => { setIsDeleteDialogOpen(true); } }; - - return ( - - - <> + if (!isRestricted(['apim:gateway_policy_manage'])){ + return ( + + + <> + + {/** + * Dialog box (Modal or Pop up) which as for the confirmation to delete. + */} + {deleteDialog()} + + + ); + } + else { + return ( + - {/** - * Dialog box (Modal or Pop up) which as for the confirmation to delete. - */} - {deleteDialog()} - - - ); + + ); + } }, filter: false, sort: false, @@ -893,7 +921,7 @@ const Listing: React.FC = () => { return ( - + diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index 794686d10ef..207afca33cc 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -70,17 +70,20 @@ const useStyles = makeStyles((theme) => ({ interface PolicyProps { isCreateNew: boolean; policyID: string | null; + disabled: boolean; } /** * Renders the Global Policy management page. * @param {boolean} isCreateNew - This value is true if form is for create new and false for edit. * @param {string} policyID - This value is to indentify the policy (Null if creating a new one). + * @param {boolean} disabled - This value is to disable the form (True if viewing the policy). * @returns {TSX} - Policy management page to render. */ const Policies: FC = ({ isCreateNew, - policyID + policyID, + disabled, }) => { const classes = useStyles(); const history = useHistory(); @@ -583,6 +586,7 @@ const Policies: FC = ({ type='submit' variant='contained' color='primary' + disabled={disabled} onClick={() => isCreateNew? save() : update()} > {isCreateNew ? diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/View/ViewGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/View/ViewGlobalPolicy.tsx new file mode 100644 index 00000000000..14848f41ad2 --- /dev/null +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/View/ViewGlobalPolicy.tsx @@ -0,0 +1,38 @@ +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ + +import React from 'react'; +import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalSpecificComponents/Policies'; +import { useParams } from 'react-router-dom'; + +interface RouteParams { + policyId: string; +} + +/** + * Global Policies Editing Page. + * @returns {JSX} - Editing Page. + */ +const ViewGlobalPolicy: React.FC = () => { + const { policyId } = useParams(); + return ( + + ); +}; + +export default ViewGlobalPolicy; \ No newline at end of file From fddf57fa7308a53094c808e9bf2d2b40ed71b644 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 15 Dec 2023 11:43:22 +0530 Subject: [PATCH 099/102] Addresssed the concerns in the PR review --- .../Create/CreateGlobalPolicy.tsx | 34 ++++++++++--------- .../GlobalPolicies/Listing/Listing.tsx | 24 +++++-------- .../GlobalSpecificComponents/General.tsx | 1 - .../GlobalSpecificComponents/Policies.tsx | 31 +++++++++-------- .../SharedComponents/AttachedPolicyCard.tsx | 6 ++-- .../SharedComponents/AttachedPolicyList.tsx | 5 +-- .../SharedComponents/PoliciesExpansion.tsx | 3 -- .../SharedComponents/PolicyDropzone.tsx | 4 +-- .../Shared/PoliciesUI/PolicyDropzone.tsx | 4 +-- 9 files changed, 48 insertions(+), 64 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx index 53dab2e3d99..752be1c09cc 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Create/CreateGlobalPolicy.tsx @@ -1,18 +1,20 @@ -// Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. - -// WSO2 Inc. licenses this file to you under the Apache License, -// Version 2.0 (the "License"); you may not use this file except -// in compliance with the License. -// You may obtain a copy of the License at - -// http://www.apache.org/licenses/LICENSE-2.0 - -// Unless required by applicable law or agreed to in writing, -// software distributed under the License is distributed on an -// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -// KIND, either express or implied. See the License for the -// specific language governing permissions and limitations -// under the License. +/* +* Copyright (c) 2023, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. +* +* WSO2 LLC. licenses this file to you under the Apache License, +* Version 2.0 (the "License"); you may not use this file except +* in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ import React from 'react'; import Policies from 'AppComponents/GlobalPolicies/Policies/GlobalSpecificComponents/Policies'; @@ -27,4 +29,4 @@ const CreateGlobalPolicy: React.FC = () => { ); }; -export default CreateGlobalPolicy; \ No newline at end of file +export default CreateGlobalPolicy; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 5342218af0e..6b1e1516aaf 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -212,7 +212,6 @@ const Listing: React.FC = () => { */ const fetchGlobalPolicies = () => { setLoading(true); - // Due to a bug in current backend, we pass 0, 10 as a workaround for now const promisedPolicies = API.getAllGatewayPolicies(); promisedPolicies .then((response: any) => { @@ -220,8 +219,7 @@ const Listing: React.FC = () => { setSelectedGateways(getInitialSelectedGateways(response.body.list)); setLoading(false); }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { APIMAlert.error(intl.formatMessage({ id: 'Fetching.Policies.Error', defaultMessage: 'Error while fetching policies', @@ -242,8 +240,7 @@ const Listing: React.FC = () => { .then((response: any) => { setEnvironments(response.environment); }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { APIMAlert.error(intl.formatMessage({ id: 'Fetching.Policies.Settings', defaultMessage: 'Error while fetching settings', @@ -382,8 +379,7 @@ const Listing: React.FC = () => { })); } }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { APIMAlert.error(intl.formatMessage({ id: 'Error.Undeploy.Policy', defaultMessage: 'Error occurred while undeploying the policy', @@ -440,8 +436,7 @@ const Listing: React.FC = () => { })); } }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { APIMAlert.error(intl.formatMessage({ id: 'Error.Deploy.Policy', defaultMessage: 'Error occurred while deploying the policy', @@ -482,8 +477,7 @@ const Listing: React.FC = () => { })); setLoading(false); }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { APIMAlert.error(intl.formatMessage({ id: 'Policy.Delete.Error', defaultMessage: 'Error while deleting the policy', @@ -942,12 +936,12 @@ const Listing: React.FC = () => { size='small' variant='outlined' label={intl.formatMessage({ - id: 'Select.Gateways', - defaultMessage: 'Select Gateways to Deploy', + id: 'Select.Gateways.Label', + defaultMessage: 'Select gateways to deploy', })} placeholder={intl.formatMessage({ - id: 'Select.Gateways', - defaultMessage: 'Select Gateways to Deploy', + id: 'Select.Gateways.Placeholder', + defaultMessage: 'Select gateways to deploy', })} /> )} diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx index c96144dfaea..9ae3d8d8ed7 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/General.tsx @@ -174,7 +174,6 @@ const General: FC = ({ }); } } catch { - // console.error(error); Alert.error(intl.formatMessage({ id: 'Error.Validating.Regex', defaultMessage: 'Error while validating the regex', diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx index 207afca33cc..a951c735de6 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/GlobalSpecificComponents/Policies.tsx @@ -127,8 +127,7 @@ const Policies: FC = ({ (a: Policy, b: Policy) => a.name.localeCompare(b.name)) setPolicies(commonPolicies); - }).catch((/* error */) => { - // console.error(error); + }).catch(() => { Alert.error(intl.formatMessage({ id: 'Error.Retrieve.Policy.List', defaultMessage: 'Error occurred while retrieving the policy list', @@ -221,8 +220,7 @@ const Policies: FC = ({ setName(responseUpdated.displayName); setAppliedGatewayLabels(responseUpdated.appliedGatewayLabels); }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { Alert.error(intl.formatMessage({ id: 'Error.Retrieve.Policy', defaultMessage: 'Error occurred while retrieving the policy', @@ -298,8 +296,7 @@ const Policies: FC = ({ * Save the newly dragged and dropped policy. */ const uuid = uuidv4(); - (newGlobalLevelPolicies)[currentFlow].push({ ...updatedOperation, uuid } - ); + (newGlobalLevelPolicies)[currentFlow].push({ ...updatedOperation, uuid }); } setGlobalLevelPolicies(newGlobalLevelPolicies); } @@ -378,8 +375,7 @@ const Policies: FC = ({ })); } }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { Alert.error(intl.formatMessage({ id: 'Adding.Policy.Mapping.Error', defaultMessage: 'Error occurred while adding the policy mapping', @@ -432,8 +428,7 @@ const Policies: FC = ({ })); } }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { Alert.error(intl.formatMessage({ id: 'Policy.Mapping.Update.Error', defaultMessage: 'Error occurred while updating the policy mapping', @@ -506,12 +501,12 @@ const Policies: FC = ({ {isCreateNew ? : } @@ -526,7 +521,10 @@ const Policies: FC = ({ fullWidth required id='outlined-required' - label='Name' + label={intl.formatMessage({ + id: 'Polcies.TextField.Name', + defaultMessage: 'Name', + })} variant='outlined' value={name} onChange={handleNameChange} @@ -538,7 +536,10 @@ const Policies: FC = ({ fullWidth required id='outlined-multiline-static' - label='Description' + label={intl.formatMessage({ + id: 'Polcies.TextField.Description', + defaultMessage: 'Description', + })} multiline rows={3} variant='outlined' @@ -550,7 +551,7 @@ const Policies: FC = ({ {/** - * Left side panel where we can droped policies. + * Left side panel where we can drop policies. */} diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx index b11c9a5e8ce..c0d8e5ec611 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/AttachedPolicyCard.tsx @@ -95,8 +95,7 @@ const AttachedPolicyCard: FC = ({ .then((globalPolicyResponse) => { Utils.forceDownload(globalPolicyResponse); }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { Alert.error( = ({ .then((commonPolicyResponse) => { Utils.forceDownload(commonPolicyResponse); }) - .catch((/* error */) => { - // console.error(error); + .catch(() => { Alert.error( = ({ isAPILevelPolicy, }) => { const reversedPolicyList = [...currentPolicyList].reverse(); - const policyListToDisplay = - policyDisplayStartDirection === 'left' - ? currentPolicyList - : reversedPolicyList; + const policyListToDisplay = (policyDisplayStartDirection === 'left') ? currentPolicyList : reversedPolicyList; const { rearrangeGlobalOperations } = useContext(GlobalPolicyContext); const sensors = useSensors( diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx index 6b975ff913c..02f130cbe18 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx @@ -134,7 +134,6 @@ const PoliciesExpansion: FC = ({ if (policyObj) { requestFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { - // console.error("Cannot find policyObj for policyId: " + policyId); Alert.error(intl.formatMessage({ id: 'Cannot.Find.PolicyObj.For.PolicyId', defaultMessage: 'Cannot find policyObj for policyId: ', @@ -172,7 +171,6 @@ const PoliciesExpansion: FC = ({ if (policyObj) { responseFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { - // console.error("Cannot find policyObj for policyId: " + policyId); Alert.error(intl.formatMessage({ id: 'Cannot.Find.PolicyObj.For.PolicyId', defaultMessage: 'Cannot find policyObj for policyId: ', @@ -211,7 +209,6 @@ const PoliciesExpansion: FC = ({ if (policyObj) { faultFlowList.push({ ...policyObj, uniqueKey: uuid }); } else { - // console.error("Cannot find policyObj for policyId: " + policyId); Alert.error(intl.formatMessage({ id: 'Cannot.Find.PolicyObj.For.PolicyId', defaultMessage: 'Cannot find policyObj for policyId: ', diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PolicyDropzone.tsx index cb80631d8b7..c0cccdba739 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PolicyDropzone.tsx @@ -26,9 +26,7 @@ import PolicyConfiguringDrawer from '../GlobalSpecificComponents/PolicyConfiguri interface PolicyDropzoneProps { policyDisplayStartDirection: string; currentPolicyList: AttachedPolicy[]; - setCurrentPolicyList: React.Dispatch< - React.SetStateAction - >; + setCurrentPolicyList: React.Dispatch>; droppablePolicyList: string[]; currentFlow: string; target: string; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx index 3a2b097d838..bfd80483b4c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PolicyDropzone.tsx @@ -60,9 +60,7 @@ const useStyles = makeStyles((theme: Theme) => ({ interface PolicyDropzoneSharedProps { policyDisplayStartDirection: string; currentPolicyList: AttachedPolicy[]; - setCurrentPolicyList: React.Dispatch< - React.SetStateAction - >; + setCurrentPolicyList: React.Dispatch>; currentFlow: string; target: string; verb: string; From 0ad490c497b08f999babbe521feaf83d029a6698 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 15 Dec 2023 12:00:05 +0530 Subject: [PATCH 100/102] en.json and raw.en.json changes for the PR review's requested changes --- .../main/webapp/site/public/locales/en.json | 26 ++++++++++++++++--- .../webapp/site/public/locales/raw.en.json | 17 +++++++++--- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 113d239ad7a..60f3d92c844 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -9109,6 +9109,18 @@ "value": "Error 403 : Forbidden" } ], + "Polcies.TextField.Description": [ + { + "type": 0, + "value": "Description" + } + ], + "Polcies.TextField.Name": [ + { + "type": 0, + "value": "Name" + } + ], "Policy.Delete.Error": [ { "type": 0, @@ -9501,10 +9513,16 @@ "value": "List of APIs" } ], - "Select.Gateways": [ + "Select.Gateways.Label": [ + { + "type": 0, + "value": "Select gateways to deploy" + } + ], + "Select.Gateways.Placeholder": [ { "type": 0, - "value": "Select Gateways to Deploy" + "value": "Select gateways to deploy" } ], "ServiceCatalog.CreateApi.api.context.label": [ @@ -10102,13 +10120,13 @@ "globalPolicies.create.create.heading": [ { "type": 0, - "value": "Create A New Global Policy" + "value": "Create a new global policy" } ], "globalPolicies.create.edit.heading": [ { "type": 0, - "value": "Edit Global Policy" + "value": "Edit global policy" } ], "globalPolicies.heading": [ diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index cba9ca231a8..5e4f9df0b51 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -4356,6 +4356,12 @@ "LoginDenied.title": { "defaultMessage": "Error 403 : Forbidden" }, + "Polcies.TextField.Description": { + "defaultMessage": "Description" + }, + "Polcies.TextField.Name": { + "defaultMessage": "Name" + }, "Policy.Delete.Error": { "defaultMessage": "Error while deleting the policy" }, @@ -4548,8 +4554,11 @@ "Scopes.Usage.UsageViewAPI.api.usage": { "defaultMessage": "List of APIs" }, - "Select.Gateways": { - "defaultMessage": "Select Gateways to Deploy" + "Select.Gateways.Label": { + "defaultMessage": "Select gateways to deploy" + }, + "Select.Gateways.Placeholder": { + "defaultMessage": "Select gateways to deploy" }, "ServiceCatalog.CreateApi.api.context.label": { "defaultMessage": "Context" @@ -4834,10 +4843,10 @@ "defaultMessage": "The server encountered an internal error or misconfiguration and was unable to complete your request." }, "globalPolicies.create.create.heading": { - "defaultMessage": "Create A New Global Policy" + "defaultMessage": "Create a new global policy" }, "globalPolicies.create.edit.heading": { - "defaultMessage": "Edit Global Policy" + "defaultMessage": "Edit global policy" }, "globalPolicies.heading": { "defaultMessage": "Global Policies" From 438eda28bd2fe1277ef9bfaf4d83f6f6bed66e79 Mon Sep 17 00:00:00 2001 From: piyumaldk Date: Fri, 15 Dec 2023 12:06:45 +0530 Subject: [PATCH 101/102] Change Global Policies icon name --- .../main/webapp/source/src/app/components/Shared/CustomIcon.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx index bcac6f7b49c..a27c126264c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomIcon.jsx @@ -427,7 +427,7 @@ export default function CustomIcon(props) { aria-hidden='true' xmlns='http://www.w3.org/2000/svg' > - File with Documents Icon + Global Policies Date: Fri, 15 Dec 2023 12:57:48 +0530 Subject: [PATCH 102/102] Addressed PR review's requested changes --- .../main/webapp/site/public/locales/en.json | 18 ++++++------- .../webapp/site/public/locales/raw.en.json | 18 ++++++------- .../GlobalPolicies/Listing/Listing.tsx | 25 ++++++++++--------- .../SharedComponents/PoliciesExpansion.tsx | 6 ++--- 4 files changed, 34 insertions(+), 33 deletions(-) diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json index 60f3d92c844..d9e75cd5582 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/en.json @@ -23,13 +23,13 @@ "value": "Actions" } ], - "Active.Development.Available": [ + "Active.Deployment.Available": [ { "type": 0, "value": "An active deployment is available" } ], - "Active.Developments.Available": [ + "Active.Deployments.Available": [ { "type": 0, "value": "Active deployments are available" @@ -8664,7 +8664,7 @@ "Cannot.Find.PolicyObj.For.PolicyId": [ { "type": 0, - "value": "Cannot find policyObj for policyId:" + "value": "Cannot find policy for Id:" } ], "CommonPolicies.CreatePolicy.breadcrumb.create.new.policy": [ @@ -8804,7 +8804,7 @@ "Confirm.Delete.Verify": [ { "type": 0, - "value": "Are you sure you want to delete the policy" + "value": "Are you sure you want to delete the policy?" } ], "Confirm.Deploy": [ @@ -8852,7 +8852,7 @@ "Deploy.Helper": [ { "type": 0, - "value": "If a Global Policy is deployed to a Gateway,respective gateway will not be available for deploymnet for ths policy. Please undeploy other global policy first." + "value": "If another global policy is already deployed to a gateway, that gateway will not be available for deployment of this policy. Please undeploy the previously deployed global policy first." } ], "Deployed.Gateway.Listing.Table.Header.Description": [ @@ -8870,7 +8870,7 @@ "Deployed.Gateway.Listing.Table.Not.Available": [ { "type": 0, - "value": "No Deployed Gateways" + "value": "No deployed gateways" } ], "Endpoint.Suspension.State": [ @@ -9064,13 +9064,13 @@ "GlobalPolicies.Listing.onboarding.policies.tooltip": [ { "type": 0, - "value": "Global Policies provide you the ability to deploy policy mappings to whole gateways and not just one single API. Click below to create your first Global Policy" + "value": "Global policies provide you the ability to deploy policy mappings to all the APIs deployed in a specific gateway and not just one single API. Click below to create your first global policy" } ], "GlobalPolicies.Listing.policies.title.add.new.policy": [ { "type": 0, - "value": "Add New Global Policy" + "value": "Add new global policy" } ], "GlobalPolicies.Listing.policies.title.name": [ @@ -9082,7 +9082,7 @@ "GlobalPolicies.Listing.policies.title.tooltip": [ { "type": 0, - "value": "This will add policies globaly to the gateways.Please navigate to the Policies tab under any desired APIif you want to add API / operation level policies" + "value": "This will add policies globally to the gateways. Please navigate to the Policies tab under any desired API if you want to add API / operation level policies" } ], "GlobalPolicies.Listing.table.header.actions.delete": [ diff --git a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json index 5e4f9df0b51..bb371fcee1b 100644 --- a/portals/publisher/src/main/webapp/site/public/locales/raw.en.json +++ b/portals/publisher/src/main/webapp/site/public/locales/raw.en.json @@ -11,10 +11,10 @@ "Actions": { "defaultMessage": "Actions" }, - "Active.Development.Available": { + "Active.Deployment.Available": { "defaultMessage": "An active deployment is available" }, - "Active.Developments.Available": { + "Active.Deployments.Available": { "defaultMessage": "Active deployments are available" }, "Adding.Policy.Mapping.Error": { @@ -4141,7 +4141,7 @@ "defaultMessage": "Cancel" }, "Cannot.Find.PolicyObj.For.PolicyId": { - "defaultMessage": "Cannot find policyObj for policyId:" + "defaultMessage": "Cannot find policy for Id:" }, "CommonPolicies.CreatePolicy.breadcrumb.create.new.policy": { "defaultMessage": "Create New Policy" @@ -4207,7 +4207,7 @@ "defaultMessage": "Confirm Deletion" }, "Confirm.Delete.Verify": { - "defaultMessage": "Are you sure you want to delete the policy" + "defaultMessage": "Are you sure you want to delete the policy?" }, "Confirm.Deploy": { "defaultMessage": "Confirm Deployment" @@ -4231,7 +4231,7 @@ "defaultMessage": "Deploy" }, "Deploy.Helper": { - "defaultMessage": "If a Global Policy is deployed to a Gateway,respective gateway will not be available for deploymnet for ths policy. Please undeploy other global policy first." + "defaultMessage": "If another global policy is already deployed to a gateway, that gateway will not be available for deployment of this policy. Please undeploy the previously deployed global policy first." }, "Deployed.Gateway.Listing.Table.Header.Description": { "defaultMessage": "Description" @@ -4240,7 +4240,7 @@ "defaultMessage": "Deployed Gateways" }, "Deployed.Gateway.Listing.Table.Not.Available": { - "defaultMessage": "No Deployed Gateways" + "defaultMessage": "No deployed gateways" }, "Endpoint.Suspension.State": { "defaultMessage": "Endpoint Suspension State" @@ -4333,16 +4333,16 @@ "defaultMessage": "Let’s get started!" }, "GlobalPolicies.Listing.onboarding.policies.tooltip": { - "defaultMessage": "Global Policies provide you the ability to deploy policy mappings to whole gateways and not just one single API. Click below to create your first Global Policy" + "defaultMessage": "Global policies provide you the ability to deploy policy mappings to all the APIs deployed in a specific gateway and not just one single API. Click below to create your first global policy" }, "GlobalPolicies.Listing.policies.title.add.new.policy": { - "defaultMessage": "Add New Global Policy" + "defaultMessage": "Add new global policy" }, "GlobalPolicies.Listing.policies.title.name": { "defaultMessage": "Global Policies" }, "GlobalPolicies.Listing.policies.title.tooltip": { - "defaultMessage": "This will add policies globaly to the gateways.Please navigate to the Policies tab under any desired APIif you want to add API / operation level policies" + "defaultMessage": "This will add policies globally to the gateways. Please navigate to the Policies tab under any desired API if you want to add API / operation level policies" }, "GlobalPolicies.Listing.table.header.actions.delete": { "defaultMessage": "Delete" diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx index 6b1e1516aaf..308e067eb58 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Listing/Listing.tsx @@ -539,7 +539,7 @@ const Listing: React.FC = () => { {selectedPolicyName}? @@ -734,7 +734,7 @@ const Listing: React.FC = () => {

); @@ -779,11 +779,11 @@ const Listing: React.FC = () => { if (appliedGatewayList.length > 0){ APIMAlert.error((appliedGatewayList.length === 1) ? intl.formatMessage({ - id: 'Active.Development.Available', + id: 'Active.Deployment.Available', defaultMessage: 'An active deployment is available', }) : intl.formatMessage({ - id: 'Active.Developments.Available', + id: 'Active.Deployments.Available', defaultMessage: 'Active deployments are available', })); } @@ -950,9 +950,9 @@ const Listing: React.FC = () => { @@ -999,8 +999,9 @@ const Listing: React.FC = () => { subTitle={ } > @@ -1056,8 +1057,8 @@ const Listing: React.FC = () => { @@ -1081,7 +1082,7 @@ const Listing: React.FC = () => { diff --git a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx index 02f130cbe18..f184143ad33 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/GlobalPolicies/Policies/SharedComponents/PoliciesExpansion.tsx @@ -136,7 +136,7 @@ const PoliciesExpansion: FC = ({ } else { Alert.error(intl.formatMessage({ id: 'Cannot.Find.PolicyObj.For.PolicyId', - defaultMessage: 'Cannot find policyObj for policyId: ', + defaultMessage: 'Cannot find policy for Id: ', }) + policyId); } } @@ -173,7 +173,7 @@ const PoliciesExpansion: FC = ({ } else { Alert.error(intl.formatMessage({ id: 'Cannot.Find.PolicyObj.For.PolicyId', - defaultMessage: 'Cannot find policyObj for policyId: ', + defaultMessage: 'Cannot find policy for Id: ', }) + policyId); } } @@ -211,7 +211,7 @@ const PoliciesExpansion: FC = ({ } else { Alert.error(intl.formatMessage({ id: 'Cannot.Find.PolicyObj.For.PolicyId', - defaultMessage: 'Cannot find policyObj for policyId: ', + defaultMessage: 'Cannot find policy for Id: ', }) + policyId); } }