feat: #3272 fixes search, loses inline loader on tables (#3285)

reapit · Jan 14, 2021 · 979da10 · 979da10
1 parent 64d590a
commit 979da10
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 9 deletions.
diff --git a/...nagement/src/components/ui/offices/__tests__/__snapshots__/office-list-cell.test.tsx.snap b/...nagement/src/components/ui/offices/__tests__/__snapshots__/office-list-cell.test.tsx.snap
@@ -16,13 +16,17 @@ exports[`OfficeListCell should match a snapshot 1`] = `
 `;
 
 exports[`OfficeName lol should match a snapshot 1`] = `
-<span>
-  Reapit, 
-</span>
+<mock-styled.div>
+  <span>
+    Reapit, 
+  </span>
+</mock-styled.div>
 `;
 
 exports[`OfficeName should match a snapshot 1`] = `
-<span>
-  Reapit, 
-</span>
+<mock-styled.div>
+  <span>
+    Reapit, 
+  </span>
+</mock-styled.div>
 `;
diff --git a/packages/reapit-connect-management/src/components/ui/offices/create-office-group.tsx b/packages/reapit-connect-management/src/components/ui/offices/create-office-group.tsx
@@ -124,6 +124,8 @@ export const CreateOfficeGroupModal: React.FC<CreateOfficeGroupModalProps> = ({
                   options={options}
                   onSearch={(value: string) => debouncedSearch(value)}
                   required
+                  filterOption={true}
+                  optionFilterProp="children"
                 />
                 <FormChangeEffect setSelectedOffice={setSelectedOffice} options={options} />
               </Section>

diff --git a/packages/reapit-connect-management/src/components/ui/offices/edit-office-group.tsx b/packages/reapit-connect-management/src/components/ui/offices/edit-office-group.tsx
@@ -113,6 +113,8 @@ export const UpdateOfficeGroupModal: React.FC<UpdateOfficeGroupModalProps> = ({
                   name={officeIds.name}
                   labelText={officeIds.label}
                   options={officeOptions}
+                  filterOption={true}
+                  optionFilterProp="children"
                 />
               </Section>
               <Section isFlex hasPadding={false} hasMargin={false}>

diff --git a/packages/reapit-connect-management/src/components/ui/offices/office-list-cell.tsx b/packages/reapit-connect-management/src/components/ui/offices/office-list-cell.tsx
@@ -1,13 +1,18 @@
 import React from 'react'
 import useSWR from 'swr'
 import { URLS } from '../../../constants/api'
-import { Loader } from '@reapit/elements'
+import { FadeIn } from '@reapit/elements'
 
 export const OfficeName: React.FC<{ id: string; isLast: boolean }> = ({ id, isLast }) => {
   const { data }: any = useSWR(id && `${URLS.OFFICES}/${id}`)
-  if (!data) return <Loader body={false} />
+  if (!data) return null
   const { name } = data
-  return <span>{name ? `${name}${isLast ? '' : ', '}` : ''}</span>
+
+  return (
+    <FadeIn>
+      <span>{name ? `${name}${isLast ? '' : ', '}` : ''}</span>
+    </FadeIn>
+  )
 }
 
 const OfficeListCell = ({ cell: { value } }) => {

diff --git a/packages/reapit-connect-management/src/components/ui/users/edit-user-group.tsx b/packages/reapit-connect-management/src/components/ui/users/edit-user-group.tsx
@@ -160,6 +160,8 @@ export const UpdateUserGroupModal: React.FC<UpdateUserGroupModalProps> = ({
                   name={groupIds.name}
                   labelText={groupIds.label}
                   options={UserGroupGroupOptions}
+                  filterOption={true}
+                  optionFilterProp="children"
                 />
               </Section>
               <Section isFlex hasPadding={false} hasMargin={false}>

diff --git a/packages/reapit-connect-management/src/components/ui/users/edit-user.tsx b/packages/reapit-connect-management/src/components/ui/users/edit-user.tsx
@@ -99,6 +99,8 @@ export const UpdateUserModal: React.FC<UpdateUserModalProps> = ({ editingUser, s
                   name={groupIds.name}
                   labelText={groupIds.label}
                   options={userGroupOptions}
+                  filterOption={true}
+                  optionFilterProp="children"
                 />
               </Section>
               <Section isFlex hasPadding={false} hasMargin={false}>