Spaces:
Sleeping
Sleeping
File size: 2,172 Bytes
c40c75a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React from "react";
import { Select, TextInput } from "@tremor/react";
import { Form, Radio, Select as AntSelect } from "antd";
import TeamDropdown from "./team_dropdown";
import { getPossibleUserRoles } from "../networking";
import TextArea from "antd/es/input/TextArea";
interface UserFormProps {
form: any;
teams: any[] | null;
possibleUIRoles: null | Record<string, Record<string, string>>;
setPossibleUIRoles?: (roles: any) => void;
accessToken?: string;
}
const UserForm: React.FC<UserFormProps> = ({
form,
teams,
possibleUIRoles,
setPossibleUIRoles,
accessToken
}) => {
React.useEffect(() => {
// Fetch roles if they're not available and we have a setter
if (!possibleUIRoles && setPossibleUIRoles && accessToken) {
getPossibleUserRoles(accessToken).then(roles => {
setPossibleUIRoles(roles);
});
}
}, [possibleUIRoles, setPossibleUIRoles, accessToken]);
return (
<>
<Form.Item
label="User Email"
name="user_email"
rules={[{ required: true, message: "Please input user email" }]}
>
<TextInput placeholder="" />
</Form.Item>
<Form.Item
label="User Role"
name="user_role"
rules={[{ required: true, message: "Please select a role" }]}
>
<Select>
{possibleUIRoles &&
Object.entries(possibleUIRoles).map(
([role, { ui_label, description }]) => (
<AntSelect.Option key={role} value={role} title={ui_label}>
<div className="flex">
{ui_label}{" "}
<p className="ml-2" style={{ color: "gray", fontSize: "12px" }}>
{description}
</p>
</div>
</AntSelect.Option>
)
)}
</Select>
</Form.Item>
<Form.Item label="Team" name="team_id">
<TeamDropdown teams={teams} />
</Form.Item>
<Form.Item label="Metadata" name="metadata">
<TextArea rows={4} placeholder="Enter metadata as JSON" />
</Form.Item>
</>
);
};
export default UserForm; |