Skip to content

Commit

Permalink
Merge pull request #536 from piyumaldk/global-policies-v4
Browse files Browse the repository at this point in the history 
Reuse shared components in API Policies
  • Loading branch information
@piyumaldk
piyumaldk authored Feb 2, 2024
2 parents eee563e + d1fb4e1 commit d07d95e
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 375 deletions.
123 changes: 16 additions & 107 deletions ...er/src/main/webapp/source/src/app/components/Apis/Details/Policies/AttachedPolicyCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +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 AttachedPolicyCardShared from 'AppComponents/Shared/PoliciesUI/AttachedPolicyCard';
import ApiContext from '../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[];
Expand All @@ -69,36 +53,9 @@ const AttachedPolicyCard: FC<AttachedPolicyCardProps> = ({
allPolicies,
isAPILevelPolicy,
}) => {
const classes = useStyles();
const { api } = useContext<any>(ApiContext);
const { deleteApiOperation } = useContext<any>(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
Expand Down Expand Up @@ -176,68 +133,20 @@ const AttachedPolicyCard: FC<AttachedPolicyCardProps> = ({
};

return (
<>
<div
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
onClick={handleDrawerOpen}
onKeyDown={handleDrawerOpen}
>
<Tooltip
key={policyObj.id}
title={`${policyObj.displayName} : ${policyObj.version}`}
placement='top'
>
<Avatar
style={{
margin: '0.2em',
backgroundColor: policyColor,
}}
>
{Utils.stringAvatar(
policyObj.displayName.toUpperCase(),
)}
</Avatar>
</Tooltip>
<Box className={classes.actionsBox}>
<IconButton
key={`${policyObj.id}-download`}
aria-label='Download policy'
size='small'
onClick={handlePolicyDownload}
disableFocusRipple
disableRipple
disabled={policyObj.id === ''} // Disabling policy download for migrated policy
>
<CloudDownloadIcon />
</IconButton>
<IconButton
key={`${policyObj.id}-delete`}
aria-label='delete attached policy'
size='small'
onClick={handleDelete}
disableFocusRipple
disableRipple
>
<DeleteIcon />
</IconButton>
</Box>
</div>
{drawerOpen && (
<PolicyConfigurationEditDrawer
policyObj={policyObj}
drawerOpen={drawerOpen}
setDrawerOpen={setDrawerOpen}
currentFlow={currentFlow}
target={target}
verb={verb}
allPolicies={allPolicies}
isAPILevelPolicy={isAPILevelPolicy}
/>
)}
</>
<AttachedPolicyCardShared
policyObj={policyObj}
currentFlow={currentFlow}
verb={verb}
target={target}
allPolicies={allPolicies}
isAPILevelPolicy={isAPILevelPolicy}
drawerOpen={drawerOpen}
handleDrawerOpen={handleDrawerOpen}
handlePolicyDownload={handlePolicyDownload}
handleDelete={handleDelete}
setDrawerOpen={setDrawerOpen}
PolicyConfigurationEditDrawer={PolicyConfigurationEditDrawer}
/>
);
};

Expand Down
46 changes: 14 additions & 32 deletions ...er/src/main/webapp/source/src/app/components/Apis/Details/Policies/AttachedPolicyList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,13 @@

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';
Expand Down Expand Up @@ -98,32 +93,19 @@ const AttachedPolicyList: FC<AttachedPolicyListProps> = ({
};

return (
<>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext
items={currentPolicyList.map((item) => item.uniqueKey)}
strategy={horizontalListSortingStrategy}
>
{policyListToDisplay.map((policy: AttachedPolicy) => (
<AttachedPolicyCard
key={policy.uniqueKey}
policyObj={policy}
currentPolicyList={currentPolicyList}
setCurrentPolicyList={setCurrentPolicyList}
currentFlow={currentFlow}
target={target}
verb={verb}
allPolicies={allPolicies}
isAPILevelPolicy={isAPILevelPolicy}
/>
))}
</SortableContext>
</DndContext>
</>
<AttachedPolicyListShared
currentPolicyList={currentPolicyList}
setCurrentPolicyList={setCurrentPolicyList}
currentFlow={currentFlow}
target={target}
verb={verb}
allPolicies={allPolicies}
isAPILevelPolicy={isAPILevelPolicy}
sensors={sensors}
handleDragEnd={handleDragEnd}
policyListToDisplay={policyListToDisplay}
AttachedPolicyCard={AttachedPolicyCard}
/>
);
};

Expand Down
111 changes: 19 additions & 92 deletions ...her/src/main/webapp/source/src/app/components/Apis/Details/Policies/PoliciesExpansion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,14 @@
*/

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 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',
Expand Down Expand Up @@ -78,7 +66,6 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
const [responseFlowDroppablePolicyList, setResponseFlowDroppablePolicyList] = useState<string[]>([]);
const [faultFlowDroppablePolicyList, setFaultFlowDroppablePolicyList] = useState<string[]>([]);

const classes = useStyles();
const { apiOperations } = useContext<any>(ApiOperationContext);
const { apiLevelPolicies } = useContext<any>(ApiOperationContext);
const { api } = useContext<any>(APIContext);
Expand Down Expand Up @@ -247,84 +234,24 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
}, [apiOperations, apiLevelPolicies]);

return (
<ExpansionPanelDetails>
<Grid
spacing={2}
container
direction='row'
justify='flex-start'
alignItems='flex-start'
>
<Grid item xs={12} md={12}>
<Box className={classes.flowSpecificPolicyAttachGrid} data-testid='drop-policy-zone-request'>
<Typography variant='subtitle2' align='left'>
<FormattedMessage
id='Apis.Details.Policies.PoliciesExpansion.request.flow.title'
defaultMessage='Request Flow'
/>
</Typography>
<FlowArrow arrowDirection='left' />
<PolicyDropzone
policyDisplayStartDirection='left'
currentPolicyList={requestFlowPolicyList}
setCurrentPolicyList={setRequestFlowPolicyList}
droppablePolicyList={requestFlowDroppablePolicyList}
currentFlow='request'
target={target}
verb={verb}
allPolicies={allPolicies}
isAPILevelPolicy={isAPILevelPolicy}
/>
</Box>
<Box className={classes.flowSpecificPolicyAttachGrid} data-testid='drop-policy-zone-response'>
<Typography variant='subtitle2' align='left'>
<FormattedMessage
id='Apis.Details.Policies.PoliciesExpansion.response.flow.title'
defaultMessage='Response Flow'
/>
</Typography>
<FlowArrow arrowDirection='right' />
<PolicyDropzone
policyDisplayStartDirection='right'
currentPolicyList={responseFlowPolicyList}
setCurrentPolicyList={setResponseFlowPolicyList}
droppablePolicyList={
responseFlowDroppablePolicyList
}
currentFlow='response'
target={target}
verb={verb}
allPolicies={allPolicies}
isAPILevelPolicy={isAPILevelPolicy}
/>
</Box>
{!isChoreoConnectEnabled && (
<Box className={classes.flowSpecificPolicyAttachGrid}>
<Typography variant='subtitle2' align='left'>
<FormattedMessage
id='Apis.Details.Policies.PoliciesExpansion.fault.flow.title'
defaultMessage='Fault Flow'
/>
</Typography>
<FlowArrow arrowDirection='right' />
<PolicyDropzone
policyDisplayStartDirection='right'
currentPolicyList={faultFlowPolicyList}
setCurrentPolicyList={setFaultFlowPolicyList}
droppablePolicyList={
faultFlowDroppablePolicyList
}
currentFlow='fault'
target={target}
verb={verb}
allPolicies={allPolicies}
isAPILevelPolicy={isAPILevelPolicy}
/>
</Box>
)}
</Grid>
</Grid>
</ExpansionPanelDetails>
<PoliciesExpansionShared
target={target}
verb={verb}
allPolicies={allPolicies}
isChoreoConnectEnabled={isChoreoConnectEnabled}
isAPILevelPolicy={isAPILevelPolicy}
requestFlowPolicyList={requestFlowPolicyList}
setRequestFlowPolicyList={setRequestFlowPolicyList}
requestFlowDroppablePolicyList={requestFlowDroppablePolicyList}
responseFlowPolicyList={responseFlowPolicyList}
setResponseFlowPolicyList={setResponseFlowPolicyList}
responseFlowDroppablePolicyList={responseFlowDroppablePolicyList}
faultFlowPolicyList={faultFlowPolicyList}
setFaultFlowPolicyList={setFaultFlowPolicyList}
faultFlowDroppablePolicyList={faultFlowDroppablePolicyList}
FlowArrow={FlowArrow}
PolicyDropzone={PolicyDropzone}
/>
);
};

Expand Down
Loading

0 comments on commit d07d95e

Please sign in to comment.