feat: add user invitation modal and update user list message in Teams…

… component

Dashboard/src/Pages/Settings/UserView.tsx

@@ -24,7 +24,7 @@ const UserView: FunctionComponent<PageComponentProps> = (
 
   return (
     <Fragment>
-      {/* API Key View  */}
+
       <CardModelDetail
         name="User Details"
         cardProps={{
@@ -67,7 +67,7 @@ const UserView: FunctionComponent<PageComponentProps> = (
               title: "User ID",
             },
           ],
-          modelId: Navigation.getLastParamAsObjectID(),
+          modelId: modelId,
         }}
       />
 

Dashboard/src/Pages/Settings/Users.tsx

@@ -10,10 +10,20 @@ import Team from "Common/Models/DatabaseModels/Team";
 import TeamsElement from "../../Components/Team/TeamsElement";
 import Route from "Common/Types/API/Route";
 import { RouteUtil } from "../../Utils/RouteMap";
+import { ButtonStyleType } from "Common/UI/Components/Button/Button";
+import IconProp from "Common/Types/Icon/IconProp";
+import ModelFormModal from "Common/UI/Components/ModelFormModal/ModelFormModal";
+import TeamMember from "Common/Models/DatabaseModels/TeamMember";
+import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType";
+import { FormType } from "Common/UI/Components/Forms/ModelForm";
+import Navigation from "Common/UI/Utils/Navigation";
 
 const Teams: FunctionComponent<PageComponentProps> = (
   props: PageComponentProps,
 ): ReactElement => {
+
+  const [showInviteUserModal, setShowInviteUserModal] = React.useState<boolean>(false);
+
   return (
     <Fragment>
       <ModelTable<ProjectUser>
@@ -27,8 +37,18 @@ const Teams: FunctionComponent<PageComponentProps> = (
         cardProps={{
           title: "Users",
           description: "Here is a list of all the users in this project.",
+          buttons: [
+            {
+              title: "Invite User",
+              buttonStyle: ButtonStyleType.NORMAL,
+              icon: IconProp.Add,
+              onClick: () => {
+                setShowInviteUserModal(true);
+              },
+            }
+          ]
         }}
-        noItemsMessage={"No users found."}
+        noItemsMessage={"Please wait, we are refreshing the list of users for this project. Please try again in sometime."}
         query={{
           projectId: DashboardNavigation.getProjectId()!,
         }}
@@ -137,6 +157,62 @@ const Teams: FunctionComponent<PageComponentProps> = (
           },
         ]}
       />
+      {showInviteUserModal && (
+        <ModelFormModal<TeamMember>
+          modelType={TeamMember}
+          name="Invite New User"
+          title="Invite New User"
+          description="Invite new user to this project."
+          onClose={() => {
+            setShowInviteUserModal(false);
+          }}
+          submitButtonText="Invite"
+          onSuccess={(teamMember: TeamMember | null) => {
+            // go to users page. 
+            if (teamMember) {
+              const userId: string = teamMember.user?.id?.toString() || teamMember.userId?.toString() || "";
+              const viewPageRoute: string =
+                RouteUtil.populateRouteParams(props.pageRoute).toString() + "/" + userId;
+              Navigation.navigate(new Route(viewPageRoute));
+            }
+            setShowInviteUserModal(false);
+          }}
+          formProps={{
+            name: "Create New Project",
+            modelType: TeamMember,
+            id: "create-project-from",
+            fields: [{
+              field: {
+                user: true,
+              },
+              title: "User Email",
+              description:
+                "Please enter the email of the user you would like to invite. We will send them an email to let them know they have been invited to team you have selected.",
+              fieldType: FormFieldSchemaType.Email,
+              required: true,
+              placeholder: "[email protected]",
+              overrideFieldKey: "email",
+            },
+            {
+              field: {
+                team: true,
+              },
+              title: "Team",
+              description:
+                "Select the team you would like to add this user to.",
+              fieldType: FormFieldSchemaType.Dropdown,
+              required: true,
+              dropdownModal: {
+                type: Team,
+                labelField: "name",
+                valueField: "_id",
+              },
+              placeholder: "Select a team",
+            }],
+            formType: FormType.Create,
+          }}
+        />
+      )}
     </Fragment>
   );
 };