Skip to content

Commit

Permalink
Add search (Autocomplete) in group dropdown for useGroups (#1356)
Browse files Browse the repository at this point in the history 
### Feature or Bugfix
- Feature

### Detail
Autocomplete for environments and teams in the following frontend views
as requested in 1012. In this PR the changes apply to those views that
use `useGroups` to define the `groupOptions`
- [x] WorksheetCreateForm.js
- [x] EnvironmentCreateForm.js
- [x] OrganizationCreateForm.js
- [x] GlossaryCreateForm.js

❗ In the EnvironmentCreateForm we might need to filter out the list of
groups provided. At the moment users can select any group that they
belong to. With the changes done by @SofiaSazonova in #1306 I think we
need to review if that is still appropriate. Do you think we should open
a new PR for this change?

### Relates
- #1012 

### Security
Please answer the questions below briefly where applicable, or write
`N/A`. Based on
[OWASP 10](https://owasp.org/Top10/en/).

- Does this PR introduce or modify any input fields or queries - this
includes
fetching data from storage outside the application (e.g. a database, an
S3 bucket)?
  - Is the input sanitized?
- What precautions are you taking before deserializing the data you
consume?
  - Is injection prevented by parametrizing queries?
  - Have you ensured no `eval` or similar functions are used?
- Does this PR introduce any functionality or component that requires
authorization?
- How have you ensured it respects the existing AuthN/AuthZ mechanisms?
  - Are you logging failed auth attempts?
- Are you using or adding any cryptographic features?
  - Do you use a standard proven implementations?
  - Are the used keys controlled by the customer? Where are they stored?
- Are you introducing any new policies/roles/users?
  - Have you used the least-privilege principle? How?


By submitting this pull request, I confirm that my contribution is made
under the terms of the Apache 2.0 license.
  • Loading branch information
@dlpzx
dlpzx authored Jun 25, 2024
1 parent 342798c commit ac53b54
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 93 deletions.
61 changes: 34 additions & 27 deletions frontend/src/modules/Environments/views/EnvironmentCreateForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
Grid,
IconButton,
Link,
MenuItem,
Switch,
TextField,
Typography
Expand Down Expand Up @@ -73,9 +72,7 @@ const EnvironmentCreateForm = (props) => {
const [trustedAccount, setTrustedAccount] = useState(null);
const [pivotRoleName, setPivotRoleName] = useState(null);
const [loading, setLoading] = useState(true);
const groupOptions = groups
? groups.map((g) => ({ value: g, label: g }))
: [];

const fetchItem = useCallback(async () => {
setLoading(true);
const response = await client.query(getOrganization(params.uri));
Expand Down Expand Up @@ -175,7 +172,7 @@ const EnvironmentCreateForm = (props) => {
organizationUri: organization.organizationUri,
AwsAccountId: values.AwsAccountId,
label: values.label,
SamlGroupName: values.SamlGroupName,
SamlGroupName: values.SamlAdminGroupName,
tags: values.tags,
description: values.description,
region: values.region,
Expand Down Expand Up @@ -506,7 +503,7 @@ const EnvironmentCreateForm = (props) => {
initialValues={{
label: '',
description: '',
SamlGroupName: '',
SamlAdminGroupName: '',
AwsAccountId: '',
region: '',
tags: [],
Expand All @@ -525,7 +522,7 @@ const EnvironmentCreateForm = (props) => {
.max(255)
.required('*Environment name is required'),
description: Yup.string().max(5000),
SamlGroupName: Yup.string()
SamlAdminGroupName: Yup.string()
.max(255)
.required('*Team is required'),
AwsAccountId: Yup.number(
Expand Down Expand Up @@ -873,27 +870,37 @@ const EnvironmentCreateForm = (props) => {
/>
</CardContent>
<CardContent>
<TextField
fullWidth
label="Team"
name="SamlGroupName"
error={Boolean(
touched.SamlGroupName && errors.SamlGroupName
<Autocomplete
id="SamlAdminGroupName"
disablePortal
options={groups}
onChange={(event, value) => {
if (value) {
setFieldValue('SamlAdminGroupName', value);
} else {
setFieldValue('SamlAdminGroupName', '');
}
}}
inputValue={values.SamlAdminGroupName}
renderInput={(params) => (
<TextField
{...params}
fullWidth
error={Boolean(
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
)}
helperText={
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
}
label="Team"
onChange={handleChange}
name="SamlAdminGroupName"
variant="outlined"
/>
)}
helperText={
touched.SamlGroupName && errors.SamlGroupName
}
onChange={handleChange}
select
value={values.SamlGroupName}
variant="outlined"
>
{groupOptions.map((group) => (
<MenuItem key={group.value} value={group.value}>
{group.label}
</MenuItem>
))}
</TextField>
/>
</CardContent>
<CardContent>
<TextField
Expand Down
32 changes: 20 additions & 12 deletions frontend/src/modules/Glossaries/views/GlossaryCreateForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,14 @@ const GlossaryCreateForm = (props) => {
const client = useClient();
const { settings } = useSettings();
const groups = useGroups();
const groupOptions = groups
? groups.map((g) => ({ value: g, label: g }))
: [];

async function submit(values, setStatus, setSubmitting, setErrors) {
try {
const response = await client.mutate(
createGlossary({
label: values.label,
readme: values.readme,
admin: values.admin
admin: values.SamlAdminGroupName
})
);

Expand Down Expand Up @@ -212,21 +209,32 @@ const GlossaryCreateForm = (props) => {
</CardContent>
<CardContent>
<Autocomplete
id="groupUri"
freeSolo
options={groupOptions.map((option) => option.value)}
id="SamlAdminGroupName"
disablePortal
options={groups}
onChange={(event, value) => {
setFieldValue('admin', value);
if (value) {
setFieldValue('SamlAdminGroupName', value);
} else {
setFieldValue('SamlAdminGroupName', '');
}
}}
inputValue={values.SamlAdminGroupName}
renderInput={(params) => (
<TextField
{...params}
fullWidth
error={Boolean(
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
)}
helperText={
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
}
label="Team"
margin="normal"
error={Boolean(touched.admin && errors.admin)}
helperText={touched.admin && errors.admin}
onChange={handleChange}
value={values.admin}
name="SamlAdminGroupName"
variant="outlined"
/>
)}
Expand Down
61 changes: 34 additions & 27 deletions frontend/src/modules/Organizations/views/OrganizationCreateForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { LoadingButton } from '@mui/lab';
import {
Autocomplete,
Box,
Breadcrumbs,
Button,
Expand All @@ -10,7 +11,6 @@ import {
FormHelperText,
Grid,
Link,
MenuItem,
TextField,
Typography
} from '@mui/material';
Expand All @@ -36,17 +36,14 @@ const OrganizationCreateForm = (props) => {
const client = useClient();
const groups = useGroups();
const { settings } = useSettings();
const groupOptions = groups
? groups.map((g) => ({ value: g, label: g }))
: [];

async function submit(values, setStatus, setSubmitting, setErrors) {
try {
const response = await client.mutate(
createOrganization({
label: values.label,
description: values.description,
SamlGroupName: values.SamlGroupName,
SamlGroupName: values.SamlAdminGroupName,
tags: values.tags
})
);
Expand Down Expand Up @@ -147,15 +144,15 @@ const OrganizationCreateForm = (props) => {
initialValues={{
label: '',
description: '',
SamlGroupName: '',
SamlAdminGroupName: '',
tags: []
}}
validationSchema={Yup.object().shape({
label: Yup.string()
.max(255)
.required('*Organization name is required'),
description: Yup.string().max(5000),
SamlGroupName: Yup.string()
SamlAdminGroupName: Yup.string()
.max(255)
.required('*Team is required'),
tags: Yup.array().nullable()
Expand Down Expand Up @@ -230,27 +227,37 @@ const OrganizationCreateForm = (props) => {
<Card>
<CardHeader title="Organize" />
<CardContent>
<TextField
error={Boolean(
touched.SamlGroupName && errors.SamlGroupName
<Autocomplete
id="SamlAdminGroupName"
disablePortal
options={groups}
onChange={(event, value) => {
if (value) {
setFieldValue('SamlAdminGroupName', value);
} else {
setFieldValue('SamlAdminGroupName', '');
}
}}
inputValue={values.SamlAdminGroupName}
renderInput={(params) => (
<TextField
{...params}
fullWidth
error={Boolean(
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
)}
helperText={
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
}
label="Team"
onChange={handleChange}
name="SamlAdminGroupName"
variant="outlined"
/>
)}
helperText={
touched.SamlGroupName && errors.SamlGroupName
}
fullWidth
label="Team"
name="SamlGroupName"
onChange={handleChange}
select
value={values.SamlGroupName}
variant="outlined"
>
{groupOptions.map((group) => (
<MenuItem key={group.value} value={group.value}>
{group.label}
</MenuItem>
))}
</TextField>
/>
</CardContent>
<CardContent>
<Box>
Expand Down
61 changes: 34 additions & 27 deletions frontend/src/modules/Worksheets/views/WorksheetCreateForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { LoadingButton } from '@mui/lab';
import {
Autocomplete,
Box,
Breadcrumbs,
Button,
Expand All @@ -10,7 +11,6 @@ import {
FormHelperText,
Grid,
Link,
MenuItem,
TextField,
Typography
} from '@mui/material';
Expand All @@ -36,17 +36,14 @@ const WorksheetCreateForm = (props) => {
const client = useClient();
const groups = useGroups();
const { settings } = useSettings();
const groupOptions = groups
? groups.map((g) => ({ value: g, label: g }))
: [];

async function submit(values, setStatus, setSubmitting, setErrors) {
try {
const response = await client.mutate(
createWorksheet({
label: values.label,
description: values.description,
SamlAdminGroupName: values.SamlGroupName,
SamlAdminGroupName: values.SamlAdminGroupName,
tags: values.tags
})
);
Expand Down Expand Up @@ -141,15 +138,15 @@ const WorksheetCreateForm = (props) => {
initialValues={{
label: '',
description: '',
SamlGroupName: '',
SamlAdminGroupName: '',
tags: []
}}
validationSchema={Yup.object().shape({
label: Yup.string()
.max(255)
.required('*Worksheet name is required'),
description: Yup.string().max(5000),
SamlGroupName: Yup.string()
SamlAdminGroupName: Yup.string()
.max(255)
.required('* Team is required'),
tags: Yup.array().nullable()
Expand Down Expand Up @@ -224,27 +221,37 @@ const WorksheetCreateForm = (props) => {
<Card>
<CardHeader title="Organize" />
<CardContent>
<TextField
fullWidth
error={Boolean(
touched.SamlGroupName && errors.SamlGroupName
<Autocomplete
id="SamlAdminGroupName"
disablePortal
options={groups}
onChange={(event, value) => {
if (value) {
setFieldValue('SamlAdminGroupName', value);
} else {
setFieldValue('SamlAdminGroupName', '');
}
}}
inputValue={values.SamlAdminGroupName}
renderInput={(params) => (
<TextField
{...params}
fullWidth
error={Boolean(
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
)}
helperText={
touched.SamlAdminGroupName &&
errors.SamlAdminGroupName
}
label="Team"
onChange={handleChange}
name="SamlAdminGroupName"
variant="outlined"
/>
)}
helperText={
touched.SamlGroupName && errors.SamlGroupName
}
label="Team"
name="SamlGroupName"
onChange={handleChange}
select
value={values.SamlGroupName}
variant="outlined"
>
{groupOptions.map((group) => (
<MenuItem key={group.value} value={group.value}>
{group.label}
</MenuItem>
))}
</TextField>
/>
</CardContent>
<CardContent>
<Box>
Expand Down

0 comments on commit ac53b54

Please sign in to comment.