Skip to content

Commit 6748dd1

Browse files
SavinduDimalSavinduDimal
authored
Merge pull request #885 from SavinduDimal/org-feature-basic-info-change
[Publisher] Add multiple changes related to organization feature
2 parents 759af1c + ac8fc1a commit 6748dd1

File tree

4 files changed

+127
-91
lines changed

4 files changed

+127
-91
lines changed

‎portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -603,13 +603,6 @@ export default function DesignConfigurations() {
603603
categories={api.categories}
604604
/>
605605
</Box>
606-
<Box py={1}>
607-
<SharedOrganizations
608-
api={apiConfig}
609-
configDispatcher={configDispatcher}
610-
organizations={api.visibleOrganizations}
611-
/>
612-
</Box>
613606
<Box py={1}>
614607
<Social
615608
slackURL={slackURLProperty && slackURLProperty.value}
@@ -628,6 +621,15 @@ export default function DesignConfigurations() {
628621
/>
629622
)}
630623
</Box>
624+
{ settings && settings.orgAccessControlEnabled && (
625+
<Box py={1}>
626+
<SharedOrganizations
627+
api={apiConfig}
628+
configDispatcher={configDispatcher}
629+
organizations={api.visibleOrganizations}
630+
/>
631+
</Box>
632+
)}
631633
{ settings && !settings.portalConfigurationOnlyModeEnabled && (
632634
<Box py={1}>
633635
<DefaultVersion api={apiConfig} configDispatcher={configDispatcher} />

‎portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/components/SharedOrganizations.jsx‎

Lines changed: 104 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,22 @@
1919
import React, { useState, useEffect } from 'react';
2020
import { styled } from '@mui/material/styles';
2121
import PropTypes from 'prop-types';
22-
import TextField from '@mui/material/TextField';
2322
import { FormattedMessage } from 'react-intl';
2423
import Autocomplete from '@mui/material/Autocomplete';
2524
import CheckBoxIcon from '@mui/icons-material/CheckBox';
2625
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
27-
import Checkbox from '@mui/material/Checkbox';
28-
import Box from '@mui/material/Box';
29-
import Tooltip from '@mui/material/Tooltip';
3026
import HelpOutline from '@mui/icons-material/HelpOutline';
3127
import API from 'AppData/api';
28+
import {
29+
RadioGroup,
30+
FormControlLabel,
31+
FormLabel,
32+
Radio,
33+
TextField,
34+
Checkbox,
35+
Tooltip,
36+
Box,
37+
} from "@mui/material";
3238

3339
const PREFIX = 'SharedOrganizations';
3440

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

4046
const StyledBox = styled(Box)(({ theme }) => ({
4147
[`& .${classes.tooltip}`]: {
42-
position: 'absolute',
43-
right: theme.spacing(-4),
4448
top: theme.spacing(1),
49+
marginLeft: theme.spacing(1),
4550
},
4651

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

6672
useEffect(() => {
6773
API.getOrganizations().then((response) => setOrganizations(response.body));
74+
if (api.visibleOrganizations.includes("all")) {
75+
setSelectionMode("all");
76+
} else if (api.visibleOrganizations.length === 0) {
77+
setSelectionMode("none");
78+
} else {
79+
setSelectionMode("select");
80+
}
6881
}, []);
6982

7083
if (organizations && !organizations.list) {
7184
return null;
7285
} else if (organizations && organizations.list) {
73-
const allOption = { organizationId: "all", displayName: "All Organizations" };
74-
const optionsList = [allOption, ...organizations.list];
75-
const handleChange = (event, newValue) => {
76-
if (newValue.some((org) => org.organizationId === "all")) {
86+
const optionsList = organizations.list;
87+
const handleRadioChange = (event) => {
88+
const { value } = event.target;
89+
setSelectionMode(value);
90+
if (value === "all") {
7791
configDispatcher({ action: "visibleOrganizations", value: ["all"] });
78-
} else if (newValue.length === 0) {
92+
} else if (value === "none") {
7993
configDispatcher({ action: "visibleOrganizations", value: [] });
80-
} else {
81-
configDispatcher({
82-
action: "visibleOrganizations",
83-
value: newValue.map((org) => org.organizationId),
84-
});
8594
}
8695
};
96+
const handleDropdownChange = (event, newValue) => {
97+
configDispatcher({
98+
action: "visibleOrganizations",
99+
value: newValue.map((org) => org.organizationId),
100+
});
101+
};
102+
87103
return (
88-
<StyledBox style={{ position: 'relative', marginTop: 10 }}>
89-
<Autocomplete
90-
multiple
91-
fullWidth
92-
limitTags={5}
93-
id='SharedOrganizations-autocomplete'
94-
options={optionsList}
95-
noOptionsText='No Organizations selected'
96-
disableCloseOnSelect
97-
getOptionLabel={(option) => option.displayName}
98-
isOptionEqualToValue={(option, value) => option.organizationId === value.organizationId}
99-
value={
100-
api.visibleOrganizations.includes("all")
101-
? [allOption]
102-
: organizations.list.filter((org) => api.visibleOrganizations.includes(org.organizationId))
103-
}
104-
onChange={handleChange}
105-
renderOption={(optionProps, option, { selected }) => (
106-
<li {...optionProps}>
107-
<Checkbox
108-
key={option.organizationId}
109-
icon={icon}
110-
checkedIcon={checkedIcon}
111-
style={{ marginRight: 8 }}
112-
checked={selected}
113-
/>
114-
{option.displayName}
115-
</li>
116-
)}
117-
renderInput={(params) => (
118-
<TextField
119-
{...params}
120-
fullWidth
121-
label='Shared Organizations'
122-
placeholder='Add Organizations'
123-
helperText='Select organizations for sharing the API'
124-
margin='normal'
125-
variant='outlined'
104+
<StyledBox style={{ position: 'relative'}}>
105+
<Box display='flex' alignItems='center'>
106+
<FormLabel component='legend'>
107+
<FormattedMessage
108+
id='Apis.Details.Configuration.components.Shared.Organizations.label'
109+
defaultMessage='Share API with Organizations'
126110
/>
127-
)}
128-
/>
129-
<Tooltip
130-
title={(
131-
<>
132-
<p>
133-
<FormattedMessage
134-
id='Shared.organizations.dropdown.tooltip'
135-
defaultMessage={'Allow to share API with other organizations.'
136-
+ ' There has to be pre-defined organizations in the'
137-
+ ' environment in order to share the API.'}
111+
</FormLabel>
112+
<Tooltip
113+
title={(
114+
<>
115+
<p>
116+
<FormattedMessage
117+
id='Apis.Details.Configuration.components.Shared.organizations.dropdown.tooltip'
118+
defaultMessage={'Allow to share API with other organizations.'
119+
+ ' There has to be pre-defined organizations in the'
120+
+ ' environment in order to share the API.'}
121+
/>
122+
</p>
123+
</>
124+
)}
125+
aria-label='Shared Organizations'
126+
placement='right-end'
127+
interactive
128+
className={classes.tooltip}
129+
>
130+
<HelpOutline />
131+
</Tooltip>
132+
</Box>
133+
<RadioGroup value={selectionMode} onChange={handleRadioChange} row>
134+
<FormControlLabel value='all' control={<Radio />} label='All' />
135+
<FormControlLabel value='none' control={<Radio />} label='None' />
136+
<FormControlLabel value='select' control={<Radio />} label='Select' />
137+
</RadioGroup>
138+
{selectionMode === "select" && (
139+
<Autocomplete
140+
multiple
141+
fullWidth
142+
limitTags={5}
143+
id='SharedOrganizations-autocomplete'
144+
options={optionsList}
145+
noOptionsText='No organizations registered'
146+
disableCloseOnSelect
147+
getOptionLabel={(option) => option.displayName}
148+
isOptionEqualToValue={(option, value) => option.organizationId === value.organizationId}
149+
value={organizations.list.filter((org) =>
150+
api.visibleOrganizations.includes(org.organizationId)
151+
)}
152+
onChange={handleDropdownChange}
153+
renderOption={(optionProps, option, { selected }) => (
154+
<li {...optionProps}>
155+
<Checkbox
156+
key={option.organizationId}
157+
icon={icon}
158+
checkedIcon={checkedIcon}
159+
style={{ marginRight: 8 }}
160+
checked={selected}
138161
/>
139-
</p>
140-
</>
141-
)}
142-
aria-label='Shared Organizations'
143-
placement='right-end'
144-
interactive
145-
className={classes.tooltip}
146-
>
147-
<HelpOutline />
148-
</Tooltip>
162+
{option.displayName}
163+
</li>
164+
)}
165+
renderInput={(params) => (
166+
<TextField
167+
{...params}
168+
fullWidth
169+
label='Shared Organizations'
170+
placeholder='Add Organizations'
171+
helperText='Select organizations for sharing the API'
172+
margin='normal'
173+
variant='outlined'
174+
/>
175+
)}
176+
/>
177+
)}
149178
</StyledBox>
150179
);
151180
}

‎portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/OrganizationSubscriptionPoliciesManage.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
3838
const PREFIX = 'OrganizationSubscriptionPoliciesManage';
3939

4040
const classes = {
41-
subscriptionPoliciesPaper: `${PREFIX}-subscriptionPoliciesPaper`,
41+
heading: `${PREFIX}-heading`,
4242
grid: `${PREFIX}-grid`,
4343
gridLabel: `${PREFIX}-gridLabel`,
4444
mainTitle: `${PREFIX}-mainTitle`
@@ -49,9 +49,9 @@ const Root = styled('div')((
4949
theme
5050
}
5151
) => ({
52-
[`& .${classes.subscriptionPoliciesPaper}`]: {
53-
marginTop: theme.spacing(2),
54-
padding: theme.spacing(2),
52+
[`& .${classes.heading}`]: {
53+
marginTop: theme.spacing(3),
54+
marginBottom: theme.spacing(2),
5555
},
5656

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

161161
return (
162162
<Root>
163-
<Typography variant='h6' style={{ marginTop: '20px' }}>Organization Specific Business Plans</Typography>
163+
<div className={classes.heading}>
164+
<Typography variant='h6' style={{ marginTop: '20px' }}>Organization Specific Business Plans</Typography>
165+
</div>
164166
<Paper>
165167
<TableContainer>
166168
<Table>
@@ -178,6 +180,7 @@ function OrganizationSubscriptionPoliciesManage(props) {
178180
<Autocomplete
179181
multiple
180182
disableCloseOnSelect
183+
limitTags={5}
181184
options={subscriptionPolicies}
182185
getOptionLabel={(option) =>
183186
option?.displayName ?

‎portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/Subscriptions.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,10 +131,12 @@ function Subscriptions(props) {
131131
.then((result) => {
132132
setSubscriptions(result.body.count);
133133
});
134-
restApi.organizations()
135-
.then((result) => {
136-
setOrganizations(result.body.list);
137-
})
134+
if (settings && settings.orgAccessControlEnabled ) {
135+
restApi.organizations()
136+
.then((result) => {
137+
setOrganizations(result.body.list);
138+
})
139+
}
138140
setPolices([...api.policies]);
139141
setOriginalPolicies([...api.policies]);
140142
setOrganizationPolicies(api.organizationPolicies ? [...api.organizationPolicies] : []);

0 commit comments

Comments
 (0)