Change member invite to autocomplete (codesandbox#3948)

* Change member invite to autocomplete

* Use old colors for consistency

* Remove comment

Author: CompuIves

…Header/Collaborators/UserSearchInput.tsx …ents/UserSearchInput/UserSearchInput.tsxpackages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/UserSearchInput.tsx renamed to packages/app/src/app/components/UserSearchInput/UserSearchInput.tsx packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/UserSearchInput.tsx renamed to packages/app/src/app/components/UserSearchInput/UserSearchInput.tsx

@@ -0,0 +1 @@
+export { UserSearchInput } from './UserSearchInput';

packages/app/src/app/components/UserSearchInput/index.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 
+import codesandbox from '@codesandbox/components/lib/themes/codesandbox.json';
+import { ThemeProvider } from '@codesandbox/components';
+
 import { RecentSandboxes } from './routes/RecentSandboxes';
 import PathedSandboxes from './routes/PathedSandboxes';
 import { Templates } from './routes/Templates';
@@ -10,25 +13,27 @@ import CreateTeam from './routes/CreateTeam';
 import TeamView from './routes/TeamView';
 
 const Content = () => (
-  <Switch>
-    <Route path="/dashboard/recent" component={RecentSandboxes} />
-    <Route path="/dashboard/trash" component={DeletedSandboxes} />
-    <Route path="/dashboard/templates" exact component={Templates} />
-    <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
-    <Route path="/dashboard/search" component={SearchSandboxes} />
-    <Route path="/dashboard/teams/new" component={CreateTeam} />
-    <Route exact path="/dashboard/teams/:teamId" component={TeamView} />
-    <Route
-      path="/dashboard/teams/:teamId/sandboxes/:path*"
-      component={PathedSandboxes}
-    />
-    <Route
-      path="/dashboard/teams/:teamId/templates"
-      component={Templates}
-      exact
-    />
-    <Redirect to="/dashboard/recent" />
-  </Switch>
+  <ThemeProvider theme={codesandbox}>
+    <Switch>
+      <Route path="/dashboard/recent" component={RecentSandboxes} />
+      <Route path="/dashboard/trash" component={DeletedSandboxes} />
+      <Route path="/dashboard/templates" exact component={Templates} />
+      <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
+      <Route path="/dashboard/search" component={SearchSandboxes} />
+      <Route path="/dashboard/teams/new" component={CreateTeam} />
+      <Route exact path="/dashboard/teams/:teamId" component={TeamView} />
+      <Route
+        path="/dashboard/teams/:teamId/sandboxes/:path*"
+        component={PathedSandboxes}
+      />
+      <Route
+        path="/dashboard/teams/:teamId/templates"
+        component={Templates}
+        exact
+      />
+      <Redirect to="/dashboard/recent" />
+    </Switch>
+  </ThemeProvider>
 );
 
 export default withRouter(Content);

packages/app/src/app/pages/Dashboard/Content/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { Button } from '@codesandbox/components';
+
 import { useMutation } from '@apollo/react-hooks';
 
-import Input from '@codesandbox/common/lib/components/Input';
-import { Button } from '@codesandbox/common/lib/components/Button';
 import track from '@codesandbox/common/lib/utils/analytics';
 
+import { UserSearchInput } from 'app/components/UserSearchInput';
+
 import { useOvermind } from 'app/overmind';
 import { INVITE_TO_TEAM } from '../../../../queries';
 import { IAddTeamMemberProps, IMutationVariables } from './types';
@@ -21,13 +23,13 @@ const ErrorMessage = styled.div`
 export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
   const { actions } = useOvermind();
   const [inviteToTeam, { loading, error }] = useMutation(INVITE_TO_TEAM);
-  let input: HTMLInputElement = null;
+  const [inviteValue, setInviteValue] = React.useState('');
 
   const submit: React.FormEventHandler = e => {
     e.preventDefault();
     e.stopPropagation();
 
-    let isEmail = input.value.includes('@');
+    let isEmail = inviteValue.includes('@');
 
     track('Team - Add Member', { email: isEmail });
 
@@ -37,23 +39,22 @@ export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
 
     const variables: IMutationVariables = { teamId };
 
-    const { value } = input;
     if (isEmail) {
-      variables.email = value;
+      variables.email = inviteValue;
     } else {
-      variables.username = value;
+      variables.username = inviteValue;
     }
 
     inviteToTeam({
       variables,
     }).then(() => {
       actions.notificationAdded({
-        title: `${value} has been invited!`,
+        title: `${inviteValue} has been invited!`,
         notificationType: 'success',
       });
     });
 
-    input.value = '';
+    setInviteValue('');
   };
 
   const errorMessage =
@@ -63,14 +64,13 @@ export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
     <>
       {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
       <form style={{ display: 'flex' }} onSubmit={loading ? undefined : submit}>
-        <Input
-          ref={node => {
-            input = node;
+        <UserSearchInput
+          inputValue={inviteValue}
+          onInputValueChange={val => {
+            setInviteValue(val);
           }}
-          placeholder="Add member by username"
-          block
         />
-        <Button type="submit" disabled={loading} style={{ width: 200 }} small>
+        <Button type="submit" loading={loading} style={{ width: 200 }}>
           {loading ? 'Adding Member...' : 'Add Member'}
         </Button>
       </form>

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx

@@ -1,5 +1,5 @@
 import AutosizeTextArea from '@codesandbox/common/lib/components/AutosizeTextArea';
-import { Button } from '@codesandbox/common/lib/components/Button';
+import { Button } from '@codesandbox/components';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
 import track from '@codesandbox/common/lib/utils/analytics';
@@ -133,20 +133,18 @@ class TeamView extends React.PureComponent {
                                     }}
                                   >
                                     <Button
-                                      style={{ marginRight: '.5rem' }}
-                                      red
-                                      small
+                                      style={{ marginRight: '.5rem', flex: 1 }}
+                                      variant="danger"
                                       onClick={stopEditing}
                                       type="reset"
-                                      disabled={descriptionLoading}
+                                      loading={descriptionLoading}
                                     >
                                       Cancel
                                     </Button>
                                     <Button
-                                      style={{ marginLeft: '.5rem' }}
-                                      small
+                                      style={{ marginLeft: '.5rem', flex: 1 }}
                                       type="submit"
-                                      disabled={descriptionLoading}
+                                      loading={descriptionLoading}
                                     >
                                       Confirm
                                     </Button>

packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js

@@ -5,7 +5,8 @@ import css from '@styled-system/css';
 
 import { Authorization } from 'app/graphql/types';
 import { useOvermind } from 'app/overmind';
-import { UserSearchInput } from './UserSearchInput';
+import { UserSearchInput } from 'app/components/UserSearchInput';
+
 import { PermissionSelect, MENU_WIDTH } from './PermissionSelect';
 
 export const AddCollaboratorForm = () => {