fix(new-dashboard): team member invite & creation (#4487)

Author: jyash97

packages/app/src/app/components/UserSearchInput/UserSearchInput.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import Downshift, { DownshiftProps } from 'downshift';
 import css from '@styled-system/css';
 import { Input, List, ListAction } from '@codesandbox/components';
+import { useOvermind } from 'app/overmind';
 
 type User = {
   id: string;
@@ -11,17 +12,25 @@ type User = {
 
 interface IUserAutoComplete {
   inputValue: string;
+  allowSelf?: boolean;
   children: (answer: {
     users: User[];
     loading: boolean;
     error: Error | null;
   }) => JSX.Element;
 }
 
-const UserAutoComplete = ({ inputValue, children }: IUserAutoComplete) => {
+const UserAutoComplete = ({
+  inputValue,
+  children,
+  allowSelf = false,
+}: IUserAutoComplete) => {
   const [users, setUsers] = React.useState<User[]>([]);
   const [loading, setLoading] = React.useState<boolean>(true);
   const [error, setError] = React.useState<Error | null>(null);
+  const {
+    state: { user },
+  } = useOvermind();
   useEffect(() => {
     setLoading(true);
     setError(null);
@@ -34,7 +43,10 @@ const UserAutoComplete = ({ inputValue, children }: IUserAutoComplete) => {
         fetch(`/api/v1/users/search?username=${inputValue}`)
           .then(x => x.json())
           .then(x => {
-            setUsers(x);
+            const fetchedUsers = allowSelf
+              ? x
+              : x.filter(member => member.username !== user?.username);
+            setUsers(fetchedUsers);
             setLoading(false);
           })
           .catch(e => {
@@ -50,14 +62,15 @@ const UserAutoComplete = ({ inputValue, children }: IUserAutoComplete) => {
         clearTimeout(timeoutId);
       }
     };
-  }, [inputValue]);
+  }, [allowSelf, inputValue, user]);
 
   return children({ users, loading, error });
 };
 
 interface IUserSearchInputProps {
   onInputValueChange: DownshiftProps<string>['onInputValueChange'];
   inputValue: string;
+  allowSelf?: boolean;
   [key: string]: any;
 }
 
@@ -67,6 +80,7 @@ const InputWithoutTypes = Input as any;
 export const UserSearchInput = ({
   onInputValueChange,
   inputValue,
+  allowSelf = false,
   ...props
 }: IUserSearchInputProps) => (
   <Downshift
@@ -98,7 +112,7 @@ export const UserSearchInput = ({
           />
         </div>
 
-        <UserAutoComplete inputValue={currentInputValue}>
+        <UserAutoComplete allowSelf={allowSelf} inputValue={currentInputValue}>
           {({ users, error }) =>
             users.length > 0 && !error && isOpen ? (
               <List

packages/app/src/app/pages/NewDashboard/Content/routes/Settings/NewTeam.tsx

@@ -17,14 +17,26 @@ export const NewTeam = () => {
   const onSubmit = async event => {
     event.preventDefault();
     const teamName = event.target.name.value;
-    console.warn(teamName, 'created by', user.username);
-    setLoading(true);
-    try {
-      await dashboard.createTeam({ teamName });
-      setLoading(false);
-      history.push(dashboardUrls.teamInvite(activeTeam));
-    } catch {
-      setLoading(false);
+    if (teamName && teamName.trim()) {
+      console.warn(teamName, 'created by', user.username);
+      event.target.name.setCustomValidity('');
+      setLoading(true);
+      try {
+        await dashboard.createTeam({ teamName });
+        setLoading(false);
+        history.push(dashboardUrls.teamInvite(activeTeam));
+      } catch {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleInput = e => {
+    const { value } = e.target;
+    if (value && value.trim()) {
+      e.target.setCustomValidity('');
+    } else {
+      e.target.setCustomValidity('Workspace name is required.');
     }
   };
 
@@ -66,6 +78,8 @@ export const NewTeam = () => {
                   type="text"
                   placeholder="Workspace name"
                   autoFocus
+                  required
+                  onChange={handleInput}
                   css={css({ height: 8 })}
                 />
                 <Button

packages/app/src/app/pages/NewDashboard/Content/routes/Settings/TeamSettings.tsx

@@ -195,6 +195,7 @@ export const TeamSettings = () => {
             >
               <UserSearchInput
                 inputValue={inviteValue}
+                allowSelf={false}
                 onInputValueChange={val => {
                   setInviteValue(val);
                 }}