feat: user management improvements (#1162)

pluralsh · Jul 25, 2023 · 8b5be4a · 8b5be4a
1 parent 09d0910
commit 8b5be4a
Show file tree

Hide file tree

Showing 44 changed files with 2,348 additions and 310 deletions.
diff --git a/www/src/components/Invite.tsx b/www/src/components/Invite.tsx
@@ -1,25 +1,24 @@
-import { useState } from 'react'
-import { useParams } from 'react-router-dom'
-import { GqlError } from 'forge-core'
 import { Button } from '@pluralsh/design-system'
+import { GqlError } from 'forge-core'
 
 import { Div, Flex, Form, P } from 'honorable'
-
-import { setToken } from '../helpers/authentication'
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
 
 import {
-  Invite as InviteT,
+  Invite,
   User,
   useInviteQuery,
   useRealizeInviteMutation,
   useSignupInviteMutation,
 } from '../generated/graphql'
+import { setToken } from '../helpers/authentication'
 
-import { LoginPortal } from './users/LoginPortal'
 import { LabelledInput } from './users/LabelledInput'
-import { WelcomeHeader } from './utils/WelcomeHeader'
-import { ConfirmPasswordField, SetPasswordField } from './users/Signup'
+import { LoginPortal } from './users/LoginPortal'
 import { validatePassword } from './users/PasswordValidation'
+import { ConfirmPasswordField, SetPasswordField } from './users/Signup'
+import { WelcomeHeader } from './utils/WelcomeHeader'
 
 function InvalidInvite() {
   return (
@@ -39,7 +38,7 @@ function ExistingInvite({
   id,
   user,
 }: {
-  invite: InviteT
+  invite: Invite
   id: any
   user: User
 }) {
@@ -120,9 +119,9 @@ export default function Invite() {
   if (data?.invite?.user) {
     return (
       <ExistingInvite
-        invite={data.invite}
+        invite={data?.invite as Invite}
         id={inviteId}
-        user={data.invite.user}
+        user={data?.invite?.user as User}
       />
     )
   }

diff --git a/www/src/components/account/CreateGroup.tsx b/www/src/components/account/CreateGroup.tsx
@@ -3,11 +3,8 @@ import { Box } from 'grommet'
 import { Button, Modal, ValidatedInput } from '@pluralsh/design-system'
 
 import { appendConnection, updateCache } from '../../utils/graphql'
-
 import { GqlError } from '../utils/Alert'
-
 import { GroupsDocument, useCreateGroupMutation } from '../../generated/graphql'
-
 import SubscriptionContext from '../../contexts/SubscriptionContext'
 
 import BillingFeatureBlockModal from './billing/BillingFeatureBlockModal'

diff --git a/www/src/components/account/Groups.tsx b/www/src/components/account/Groups.tsx
@@ -1,5 +1,3 @@
-import { useContext, useState } from 'react'
-import { Flex } from 'honorable'
 import {
   Button,
   GearTrainIcon,
@@ -10,35 +8,33 @@ import {
   PeopleIcon,
   SearchIcon,
 } from '@pluralsh/design-system'
+import { Flex } from 'honorable'
+import { useContext, useState } from 'react'
 
 import CurrentUserContext from '../../contexts/CurrentUserContext'
+import SubscriptionContext from '../../contexts/SubscriptionContext'
 import {
   Group as GroupT,
   GroupsDocument,
   Permission,
   useDeleteGroupMutation,
 } from '../../generated/graphql'
-import { removeConnection, updateCache } from '../../utils/graphql'
-import ListInput from '../utils/ListInput'
-import { List } from '../utils/List'
-import { DeleteIconButton } from '../utils/IconButtons'
-
 import { canEdit } from '../../utils/account'
-
-import SubscriptionContext from '../../contexts/SubscriptionContext'
-
+import { removeConnection, updateCache } from '../../utils/graphql'
 import { Confirm } from '../utils/Confirm'
+import { DeleteIconButton } from '../utils/IconButtons'
+import { List } from '../utils/List'
+import ListInput from '../utils/ListInput'
 
+import BillingFeatureBlockBanner from './billing/BillingFeatureBlockBanner'
+import BillingLegacyUserBanner from './billing/BillingLegacyUserBanner'
 import BillingTrialBanner from './billing/BillingTrialBanner'
-
-import { ViewGroup } from './Group'
 import { CreateGroup } from './CreateGroup'
 import { EditGroupAttributes, EditGroupMembers } from './EditGroup'
+import { ViewGroup } from './Group'
+import { GroupsList } from './GroupsList'
 import { Info } from './Info'
 import { hasRbac } from './utils'
-import { GroupsList } from './GroupsList'
-import BillingLegacyUserBanner from './billing/BillingLegacyUserBanner'
-import BillingFeatureBlockBanner from './billing/BillingFeatureBlockBanner'
 
 function Header({ q, setQ }: any) {
   return (

diff --git a/www/src/components/account/InviteUser.tsx b/www/src/components/account/InviteUser.tsx
@@ -1,20 +1,17 @@
-import { Button, Div, P, Span } from 'honorable'
+import { useMutation } from '@apollo/client'
 import {
   Codeline,
   MailIcon,
   Modal,
   ValidatedInput,
 } from '@pluralsh/design-system'
+import { Button, Div, P, Span } from 'honorable'
 import { useCallback, useContext, useState } from 'react'
-import { useMutation } from '@apollo/client'
-
 import { Link } from 'react-router-dom'
 
-import { GqlError } from '../utils/Alert'
-
 import { useCurrentUser } from '../../contexts/CurrentUserContext'
-
 import SubscriptionContext from '../../contexts/SubscriptionContext'
+import { GqlError } from '../utils/Alert'
 
 import { CREATE_INVITE } from './queries'
 import { inviteLink } from './utils'

diff --git a/www/src/components/account/Typeaheads.tsx b/www/src/components/account/Typeaheads.tsx
@@ -86,11 +86,13 @@ function TagInput({
   hint,
   suggestions,
   items,
+  customItems,
   icon,
   onRemove,
   onAdd,
   width,
   onChange,
+  dropdownFooterFixed,
 }: any) {
   const [inputValue, setInputValue] = useState('')
 
@@ -108,6 +110,7 @@ function TagInput({
         <ComboBox
           aria-label={label}
           inputValue={inputValue}
+          dropdownFooterFixed={dropdownFooterFixed}
           onSelectionChange={(key) => {
             const selection = suggestions.find((s) => s?.value?.id === key)
 
@@ -126,19 +129,23 @@ function TagInput({
         </ComboBox>
         {items?.length > 0 && (
           <ChipList
-            maxVisible={Infinity}
-            chips={items.map((key) => (
-              <Chip
-                size="small"
-                clickable
-                onClick={() => {
-                  onRemove(key)
-                }}
-                closeButton
-              >
-                {key}
-              </Chip>
-            ))}
+            maxVisible={10}
+            chips={[
+              ...items.map((key) => (
+                <Chip
+                  fillLevel={2}
+                  size="small"
+                  clickable
+                  onClick={() => {
+                    onRemove(key)
+                  }}
+                  closeButton
+                >
+                  {key}
+                </Chip>
+              )),
+              ...(customItems ?? []),
+            ]}
           />
         )}
       </FormField>
@@ -167,11 +174,13 @@ export function BindingInput({
   type,
   fetcher,
   bindings,
+  customBindings,
   remove,
   add,
   hint,
   placeholder = TEXT[type]?.placeholder,
   label = TEXT[type]?.label,
+  dropdownFooterFixed,
 }: any) {
   const client = useApolloClient()
   const [suggestions, setSuggestions] = useState([])
@@ -188,9 +197,11 @@ export function BindingInput({
       width="100%"
       suggestions={suggestions}
       items={bindings}
+      customItems={customBindings}
       onRemove={remove}
       onAdd={({ value }) => add(value)}
       onChange={({ target: { value } }) => fetch(client, value, setSuggestions)}
+      dropdownFooterFixed={dropdownFooterFixed}
     />
   )
 }