Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reuse shared components in API Policies #536

Merged
merged 2 commits into from
Feb 2, 2024
Merged

Reuse shared components in API Policies #536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a788b9
Reuse shared components in API Policies
piyumaldk Dec 19, 2023
d1fb4e1
Addressed requested improvement
piyumaldk Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 16 additions & 107 deletions ...er/src/main/webapp/source/src/app/components/Apis/Details/Policies/AttachedPolicyCard.tsx
View file
Open in desktop
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}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we passing down a component here? Can't we simply import the required component within the shared component itself (i.e. within AttachedPolicyCardShared)

Copy link
Contributor Author

@piyumaldk piyumaldk Feb 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We cannot do that as the shared component is shared by two different features. Since those have different data contexts and different funtionalities, we cannot import them as a common identical one in the shared component. By passing them down to components, we do not need seperate implementations to identify the compoenent's feature.

/>
);
};

Expand Down
46 changes: 14 additions & 32 deletions ...er/src/main/webapp/source/src/app/components/Apis/Details/Policies/AttachedPolicyList.tsx
View file
Open in desktop
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}
ashera96 marked this conversation as resolved.
Show resolved Hide resolved
/>
);
};

Expand Down
111 changes: 19 additions & 92 deletions ...her/src/main/webapp/source/src/app/components/Apis/Details/Policies/PoliciesExpansion.tsx
View file
Open in desktop
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}
ashera96 marked this conversation as resolved.
Show resolved Hide resolved
/>
);
};

Expand Down
Loading
Loading