diff --git a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx index 5bd72ecdc2..8fd3cd035e 100644 --- a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx +++ b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx @@ -4,12 +4,13 @@ import { connect } from "react-redux"; import { Dialog, Classes } from "@blueprintjs/core"; import { isPermitted } from "pages/Applications/permissionHelpers"; -const StyledDialog = styled(Dialog)` +const StyledDialog = styled(Dialog)<{ setMaxWidth?: boolean }>` && { background: white; & .bp3-dialog-footer-actions { display: block; } + ${props => props.setMaxWidth && `width: 100vh;`} } `; @@ -23,6 +24,7 @@ type FormDialogComponentProps = { trigger: ReactNode; permissionRequired?: string; permissions?: string[]; + setMaxWidth?: boolean; }; export const FormDialogComponent = (props: FormDialogComponentProps) => { @@ -53,6 +55,7 @@ export const FormDialogComponent = (props: FormDialogComponentProps) => { title={props.title} onClose={onClose} isOpen={isOpen} + setMaxWidth={props.setMaxWidth} >
props.theme.fontSizes[1]}px; + justify-content: space-between; `; const ApplicationCardsWrapper = styled.div` @@ -142,6 +145,13 @@ class Applications extends Component { )} /> )} + } + Form={InviteUsersFormv2} + orgId={organization.id} + title={"Invite Users"} + setMaxWidth + /> props.theme.spaces[11]}px; + + &&& { + .bp3-input { + box-shadow: none; + } + } +`; +const StyledInviteFieldGroup = styled.div` + && { + display: flex; + flex-direction: row; + flex-wrap: none; + justify-content: space-between; + align-items: flex-start; + + & > div { + min-width: 150px; + margin: 0em 1em 1em 0em; + } + & > div:last-of-type { + min-width: 0; + display: flex; + align-self: center; + } + } +`; + +const InviteUsersForm = (props: any) => { + const { handleSubmit } = props; + useEffect(() => { + props.fetchAllRoles(props.orgId); + }, [props.orgId]); + + return ( + + + + + + +