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

[Publisher] Add multiple changes related to organization feature #885

Merged
merged 3 commits into from
Feb 7, 2025
Merged

[Publisher] Add multiple changes related to organization feature #885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6aa1a0
Add radio buttons to select shared organizations
SavinduDimal Feb 7, 2025
c41e777
Fix subscriptions page stryling issues
SavinduDimal Feb 7, 2025
ac8fc1a
Check configurations for organization access control
SavinduDimal Feb 7, 2025
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
16 changes: 9 additions & 7 deletions ...main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading