mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 13:37:30 +00:00
a85476c23b
* added reducers and kolide api teams code, hooked up empty state * request for get all teams and remove unused loading bar * added create team functionality|gs * update link cell to be more generic * create teams detail page and hook it up * added tabbing and styling to top nav team details * added edit and delete modal functionality * add in table and modals for members for teams * created reusable edit user modal and use it in manage teams page * creating add member autocomplete * hook up adding members to teams * hook up real members from api into table, and empty state for table * fix proptype warning * hooked up table querying for member page * added remove member modal * added tems to edit useres on member page * finish remove member from team * fixed up editing on members page * fix the role value in member table * fix prettier errors * fixes from PR comments round 1 * add missing error handler on add member * add dynamic team name to member page and user dynamic user and team names to succuess and errors * add test for userManagementHelper module * fix lint errors * fix tests * add member test to row results on member page
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import React, { useState, useCallback } from "react";
|
||
|
||
import Modal from "components/modals/Modal";
|
||
import Button from "components/buttons/Button";
|
||
import InfoBanner from "components/InfoBanner/InfoBanner";
|
||
// @ts-ignore
|
||
import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon";
|
||
|
||
const baseClass = "create-team-modal";
|
||
|
||
export interface ICreateTeamFormData {
|
||
name: string;
|
||
}
|
||
|
||
interface ICreateTeamModalProps {
|
||
onCancel: () => void;
|
||
onSubmit: (formData: ICreateTeamFormData) => void;
|
||
}
|
||
|
||
const CreateTeamModal = (props: ICreateTeamModalProps): JSX.Element => {
|
||
const { onCancel, onSubmit } = props;
|
||
|
||
const [name, setName] = useState("");
|
||
|
||
const onInputChange = useCallback(
|
||
(value: string) => {
|
||
setName(value);
|
||
},
|
||
[setName]
|
||
);
|
||
|
||
const onFormSubmit = useCallback(() => {
|
||
onSubmit({
|
||
name,
|
||
});
|
||
}, [onSubmit, name]);
|
||
|
||
return (
|
||
<Modal title={"Create team"} onExit={onCancel} className={baseClass}>
|
||
<form className={`${baseClass}__form`}>
|
||
<InputFieldWithIcon
|
||
autofocus
|
||
// error={errors.name}
|
||
name="name"
|
||
onChange={onInputChange}
|
||
placeholder="Team name"
|
||
value={name}
|
||
/>
|
||
<InfoBanner className={`${baseClass}__sandbox-info`}>
|
||
<p className={`${baseClass}__info-header`}>
|
||
Need to test queries and configurations before deploying?
|
||
</p>
|
||
<p>
|
||
A popular pattern is to end a team’s name with “- Sandbox”, then you
|
||
can use this to test new queries and configuration with staging
|
||
hosts or volunteers acting as canaries.
|
||
</p>
|
||
</InfoBanner>
|
||
<div className={`${baseClass}__btn-wrap`}>
|
||
<Button
|
||
className={`${baseClass}__btn`}
|
||
type="button"
|
||
variant="brand"
|
||
onClick={onFormSubmit}
|
||
>
|
||
Create
|
||
</Button>
|
||
<Button
|
||
className={`${baseClass}__btn`}
|
||
onClick={onCancel}
|
||
variant="inverse"
|
||
>
|
||
Cancel
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default CreateTeamModal;
|