Skip to content

Commit

Permalink
Merge pull request #885 from SavinduDimal/org-feature-basic-info-change
Browse files Browse the repository at this point in the history 
[Publisher] Add multiple changes related to organization feature
  • Loading branch information
@SavinduDimal
SavinduDimal authored Feb 7, 2025
2 parents 759af1c + ac8fc1a commit 6748dd1
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 91 deletions.
16 changes: 9 additions & 7 deletions ...main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -603,13 +603,6 @@ export default function DesignConfigurations() {
categories={api.categories}
/>
</Box>
<Box py={1}>
<SharedOrganizations
api={apiConfig}
configDispatcher={configDispatcher}
organizations={api.visibleOrganizations}
/>
</Box>
<Box py={1}>
<Social
slackURL={slackURLProperty && slackURLProperty.value}
Expand All @@ -628,6 +621,15 @@ export default function DesignConfigurations() {
/>
)}
</Box>
{ settings && settings.orgAccessControlEnabled && (
<Box py={1}>
<SharedOrganizations
api={apiConfig}
configDispatcher={configDispatcher}
organizations={api.visibleOrganizations}
/>
</Box>
)}
{ settings && !settings.portalConfigurationOnlyModeEnabled && (
<Box py={1}>
<DefaultVersion api={apiConfig} configDispatcher={configDispatcher} />
Expand Down
179 changes: 104 additions & 75 deletions ...p/source/src/app/components/Apis/Details/Configuration/components/SharedOrganizations.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,22 @@
import React, { useState, useEffect } from 'react';
import { styled } from '@mui/material/styles';
import PropTypes from 'prop-types';
import TextField from '@mui/material/TextField';
import { FormattedMessage } from 'react-intl';
import Autocomplete from '@mui/material/Autocomplete';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import Checkbox from '@mui/material/Checkbox';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import HelpOutline from '@mui/icons-material/HelpOutline';
import API from 'AppData/api';
import {
RadioGroup,
FormControlLabel,
FormLabel,
Radio,
TextField,
Checkbox,
Tooltip,
Box,
} from "@mui/material";

const PREFIX = 'SharedOrganizations';

Expand All @@ -39,9 +45,8 @@ const classes = {

const StyledBox = styled(Box)(({ theme }) => ({
[`& .${classes.tooltip}`]: {
position: 'absolute',
right: theme.spacing(-4),
top: theme.spacing(1),
marginLeft: theme.spacing(1),
},

[`& .${classes.listItemText}`]: {
Expand All @@ -62,90 +67,114 @@ const checkedIcon = <CheckBoxIcon fontSize='small' />;
function SharedOrganizations(props) {
const [organizations, setOrganizations] = useState({});
const { api, configDispatcher } = props;
const [selectionMode, setSelectionMode] = useState("all");

useEffect(() => {
API.getOrganizations().then((response) => setOrganizations(response.body));
if (api.visibleOrganizations.includes("all")) {
setSelectionMode("all");
} else if (api.visibleOrganizations.length === 0) {
setSelectionMode("none");
} else {
setSelectionMode("select");
}
}, []);

if (organizations && !organizations.list) {
return null;
} else if (organizations && organizations.list) {
const allOption = { organizationId: "all", displayName: "All Organizations" };
const optionsList = [allOption, ...organizations.list];
const handleChange = (event, newValue) => {
if (newValue.some((org) => org.organizationId === "all")) {
const optionsList = organizations.list;
const handleRadioChange = (event) => {
const { value } = event.target;
setSelectionMode(value);
if (value === "all") {
configDispatcher({ action: "visibleOrganizations", value: ["all"] });
} else if (newValue.length === 0) {
} else if (value === "none") {
configDispatcher({ action: "visibleOrganizations", value: [] });
} else {
configDispatcher({
action: "visibleOrganizations",
value: newValue.map((org) => org.organizationId),
});
}
};
const handleDropdownChange = (event, newValue) => {
configDispatcher({
action: "visibleOrganizations",
value: newValue.map((org) => org.organizationId),
});
};

return (
<StyledBox style={{ position: 'relative', marginTop: 10 }}>
<Autocomplete
multiple
fullWidth
limitTags={5}
id='SharedOrganizations-autocomplete'
options={optionsList}
noOptionsText='No Organizations selected'
disableCloseOnSelect
getOptionLabel={(option) => option.displayName}
isOptionEqualToValue={(option, value) => option.organizationId === value.organizationId}
value={
api.visibleOrganizations.includes("all")
? [allOption]
: organizations.list.filter((org) => api.visibleOrganizations.includes(org.organizationId))
}
onChange={handleChange}
renderOption={(optionProps, option, { selected }) => (
<li {...optionProps}>
<Checkbox
key={option.organizationId}
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.displayName}
</li>
)}
renderInput={(params) => (
<TextField
{...params}
fullWidth
label='Shared Organizations'
placeholder='Add Organizations'
helperText='Select organizations for sharing the API'
margin='normal'
variant='outlined'
<StyledBox style={{ position: 'relative'}}>
<Box display='flex' alignItems='center'>
<FormLabel component='legend'>
<FormattedMessage
id='Apis.Details.Configuration.components.Shared.Organizations.label'
defaultMessage='Share API with Organizations'
/>
)}
/>
<Tooltip
title={(
<>
<p>
<FormattedMessage
id='Shared.organizations.dropdown.tooltip'
defaultMessage={'Allow to share API with other organizations.'
+ ' There has to be pre-defined organizations in the'
+ ' environment in order to share the API.'}
</FormLabel>
<Tooltip
title={(
<>
<p>
<FormattedMessage
id='Apis.Details.Configuration.components.Shared.organizations.dropdown.tooltip'
defaultMessage={'Allow to share API with other organizations.'
+ ' There has to be pre-defined organizations in the'
+ ' environment in order to share the API.'}
/>
</p>
</>
)}
aria-label='Shared Organizations'
placement='right-end'
interactive
className={classes.tooltip}
>
<HelpOutline />
</Tooltip>
</Box>
<RadioGroup value={selectionMode} onChange={handleRadioChange} row>
<FormControlLabel value='all' control={<Radio />} label='All' />
<FormControlLabel value='none' control={<Radio />} label='None' />
<FormControlLabel value='select' control={<Radio />} label='Select' />
</RadioGroup>
{selectionMode === "select" && (
<Autocomplete
multiple
fullWidth
limitTags={5}
id='SharedOrganizations-autocomplete'
options={optionsList}
noOptionsText='No organizations registered'
disableCloseOnSelect
getOptionLabel={(option) => option.displayName}
isOptionEqualToValue={(option, value) => option.organizationId === value.organizationId}
value={organizations.list.filter((org) =>
api.visibleOrganizations.includes(org.organizationId)
)}
onChange={handleDropdownChange}
renderOption={(optionProps, option, { selected }) => (
<li {...optionProps}>
<Checkbox
key={option.organizationId}
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
</p>
</>
)}
aria-label='Shared Organizations'
placement='right-end'
interactive
className={classes.tooltip}
>
<HelpOutline />
</Tooltip>
{option.displayName}
</li>
)}
renderInput={(params) => (
<TextField
{...params}
fullWidth
label='Shared Organizations'
placeholder='Add Organizations'
helperText='Select organizations for sharing the API'
margin='normal'
variant='outlined'
/>
)}
/>
)}
</StyledBox>
);
}
Expand Down
13 changes: 8 additions & 5 deletions .../src/app/components/Apis/Details/Subscriptions/OrganizationSubscriptionPoliciesManage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
const PREFIX = 'OrganizationSubscriptionPoliciesManage';

const classes = {
subscriptionPoliciesPaper: `${PREFIX}-subscriptionPoliciesPaper`,
heading: `${PREFIX}-heading`,
grid: `${PREFIX}-grid`,
gridLabel: `${PREFIX}-gridLabel`,
mainTitle: `${PREFIX}-mainTitle`
Expand All @@ -49,9 +49,9 @@ const Root = styled('div')((
theme
}
) => ({
[`& .${classes.subscriptionPoliciesPaper}`]: {
marginTop: theme.spacing(2),
padding: theme.spacing(2),
[`& .${classes.heading}`]: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
},

[`& .${classes.grid}`]: {
Expand Down Expand Up @@ -160,7 +160,9 @@ function OrganizationSubscriptionPoliciesManage(props) {

return (
<Root>
<Typography variant='h6' style={{ marginTop: '20px' }}>Organization Specific Business Plans</Typography>
<div className={classes.heading}>
<Typography variant='h6' style={{ marginTop: '20px' }}>Organization Specific Business Plans</Typography>
</div>
<Paper>
<TableContainer>
<Table>
Expand All @@ -178,6 +180,7 @@ function OrganizationSubscriptionPoliciesManage(props) {
<Autocomplete
multiple
disableCloseOnSelect
limitTags={5}
options={subscriptionPolicies}
getOptionLabel={(option) =>
option?.displayName ?
Expand Down
10 changes: 6 additions & 4 deletions ...er/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/Subscriptions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,12 @@ function Subscriptions(props) {
.then((result) => {
setSubscriptions(result.body.count);
});
restApi.organizations()
.then((result) => {
setOrganizations(result.body.list);
})
if (settings && settings.orgAccessControlEnabled ) {
restApi.organizations()
.then((result) => {
setOrganizations(result.body.list);
})
}
setPolices([...api.policies]);
setOriginalPolicies([...api.policies]);
setOrganizationPolicies(api.organizationPolicies ? [...api.organizationPolicies] : []);
Expand Down

0 comments on commit 6748dd1

Please sign in to comment.