fix-Update minor UI changes

app/client/src/components/editorComponents/form/FormDialogComponent.tsx

@@ -7,6 +7,9 @@ import { isPermitted } from "pages/Applications/permissionHelpers";
 const StyledDialog = styled(Dialog)<{ setMaxWidth?: boolean }>`
   && {
     background: white;
+    & .bp3-dialog-header {
+      padding: 36px;
+    }
     & .bp3-dialog-footer-actions {
       display: block;
     }
@@ -68,4 +71,4 @@ export const FormDialogComponent = (props: FormDialogComponentProps) => {
   );
 };
 
-export default connect()(FormDialogComponent);
+export default connect()(FormDialogComponent);

app/client/src/pages/organization/InviteUsersFromv2.tsx

@@ -11,22 +11,28 @@ import {
   getRoles,
   getDefaultRole,
   getRolesForField,
+  getAllUsers,
 } from "selectors/organizationSelectors";
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
 import { InviteUsersToOrgFormValues, inviteUsersToOrg } from "./helpers";
 import { OrgRole } from "constants/orgConstants";
 import { INVITE_USERS_TO_ORG_FORM } from "constants/forms";
+import { Classes } from "@blueprintjs/core";
 
 const StyledForm = styled.div`
   width: 100%;
   background: white;
-  padding: ${props => props.theme.spaces[11]}px;
+  padding: ${props => props.theme.spaces[5]}px;
 
   &&& {
     .bp3-input {
       box-shadow: none;
     }
   }
+  .manageUsers {
+    float: right;
+    margin-top: 12px;
+  }
 `;
 const StyledInviteFieldGroup = styled.div`
   && {
@@ -35,22 +41,37 @@ const StyledInviteFieldGroup = styled.div`
     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;
-    }
+  .bp3-popover-target {
+    padding-right: 10px;
+    padding-top: 5px;
+  }
+`;
+
+const UserList = styled.div`
+  max-height: 100px;
+  overflow-y: scroll;
+  .user {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+`;
+
+const StyledButton = styled(Button)`
+  &&&.${Classes.BUTTON} {
+    width: 100px;
+    height: 32px;
   }
 `;
 
 const InviteUsersForm = (props: any) => {
-  const { handleSubmit } = props;
+  const { handleSubmit, allUsers } = props;
   useEffect(() => {
+    props.fetchUser(props.orgId);
     props.fetchAllRoles(props.orgId);
   }, [props.orgId]);
 
@@ -66,21 +87,41 @@ const InviteUsersForm = (props: any) => {
             intent="success"
           />
         </FormGroup>
-        <SelectField
-          name={`role`}
-          placeholder="Select a role"
-          options={props.roles}
-          size="large"
-        />
-        <Button
+        <FormGroup fill>
+          <SelectField
+            name="role"
+            placeholder="Select a role"
+            options={props.roles}
+            size="large"
+          />
+        </FormGroup>
+        <StyledButton
+          className="invite"
           text="Invite"
-          filled
           intent="primary"
+          filled
           onClick={handleSubmit((values: any, dispatch: any) => {
             inviteUsersToOrg({ ...values, orgId: props.orgId }, dispatch);
           })}
         />
       </StyledInviteFieldGroup>
+      <UserList style={{ justifyContent: "space-between" }}>
+        {allUsers.map((user: { username: string; roleName: string }) => {
+          return (
+            <div className="user" key={user.username}>
+              <div>{user.username}</div>
+              <div>{user.roleName}</div>
+            </div>
+          );
+        })}
+      </UserList>
+      <Button
+        className="manageUsers"
+        text="Manage Users"
+        intent="primary"
+        filled
+        onClick={() => {}}
+      />
     </StyledForm>
   );
 };
@@ -90,6 +131,7 @@ export default connect(
     return {
       roles: getRolesForField(state),
       defaultRole: getDefaultRole(state),
+      allUsers: getAllUsers(state),
     };
   },
   (dispatch: any) => ({
@@ -100,6 +142,13 @@ export default connect(
           orgId,
         },
       }),
+    fetchUser: (orgId: string) =>
+      dispatch({
+        type: ReduxActionTypes.FETCH_ALL_USERS_INIT,
+        payload: {
+          orgId,
+        },
+      }),
   }),
 )(
   reduxForm<
@@ -108,4 +157,4 @@ export default connect(
   >({
     form: INVITE_USERS_TO_ORG_FORM,
   })(InviteUsersForm),
-);
+);