refactor(ui): more refinements

kouprlabs · Nov 30, 2024 · 98ceab6 · 98ceab6
1 parent d2a4901
commit 98ceab6
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 58 deletions.
diff --git a/ui/src/client/api/user.ts b/ui/src/client/api/user.ts
@@ -42,6 +42,7 @@ export type ListOptions = {
   organizationId?: string
   groupId?: string
   excludeGroupMembers?: boolean
+  excludeMe?: boolean
   size?: number
   page?: number
   sortBy?: SortBy
@@ -57,6 +58,7 @@ type ListQueryParams = {
   organization_id?: string
   group_id?: string
   exclude_group_members?: string
+  exclude_me?: string
 }
 
 export default class UserAPI {
@@ -90,6 +92,9 @@ export default class UserAPI {
     if (options?.excludeGroupMembers) {
       params.exclude_group_members = options.excludeGroupMembers.toString()
     }
+    if (options?.excludeMe) {
+      params.exclude_me = options.excludeMe.toString()
+    }
     if (options?.page) {
       params.page = options.page.toString()
     }

diff --git a/ui/src/components/common/organization-selector.tsx b/ui/src/components/common/organization-selector.tsx
@@ -41,10 +41,14 @@ import OrganizationAPI, {
 import { swrConfig } from '@/client/options'
 
 export type OrganizationSelectorProps = {
+  defaultValue?: Organization
   onConfirm?: (organization: Organization) => void
 }
 
-const OrganizationSelector = ({ onConfirm }: OrganizationSelectorProps) => {
+const OrganizationSelector = ({
+  defaultValue,
+  onConfirm,
+}: OrganizationSelectorProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [page, setPage] = useState(1)
   const [query, setQuery] = useState('')
@@ -69,6 +73,10 @@ const OrganizationSelector = ({ onConfirm }: OrganizationSelectorProps) => {
   const isListEmpty = list && !listError && list.totalElements === 0
   const isListReady = list && !listError && list.totalElements > 0
 
+  useEffect(() => {
+    setConfirmed(defaultValue)
+  }, [defaultValue])
+
   useEffect(() => {
     mutate().then()
   }, [page, query, mutate])
@@ -190,7 +198,6 @@ const OrganizationSelector = ({ onConfirm }: OrganizationSelectorProps) => {
                     {hasPageSwitcher ? (
                       <Pagination
                         maxButtons={3}
-                        size="sm"
                         page={page}
                         totalPages={list.totalPages}
                         onPageChange={(value) => setPage(value)}

diff --git a/ui/src/components/sharing/sharing-group-overview.tsx b/ui/src/components/sharing/sharing-group-overview.tsx
@@ -10,7 +10,7 @@
 import { useCallback, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { Button } from '@chakra-ui/react'
-import { IconAdd, IconCheck, Select } from '@koupr/ui'
+import { IconAdd, IconCheck, SectionPlaceholder, Select } from '@koupr/ui'
 import { OptionBase } from 'chakra-react-select'
 import cx from 'classnames'
 import FileAPI from '@/client/api/file'
@@ -123,23 +123,31 @@ const SharingGroupOverview = () => {
         </div>
       ) : null}
       {groups && groups.totalElements === 0 ? (
-        <div className={cx('flex', 'items-center', 'justify-center')}>
-          <div className={cx('flex', 'flex-col', 'items-center', 'gap-1.5')}>
-            <span>This organization has no groups.</span>
-            {workspace &&
-            geEditorPermission(workspace.organization.permission) ? (
-              <Button
-                as={Link}
-                leftIcon={<IconAdd />}
-                to={`/new/group?org=${workspace.organization.id}`}
-              >
-                New Group
-              </Button>
-            ) : null}
-          </div>
-        </div>
+        <SectionPlaceholder
+          text="This organization has no groups."
+          content={
+            <>
+              {workspace &&
+              geEditorPermission(workspace.organization.permission) ? (
+                <Button
+                  as={Link}
+                  leftIcon={<IconAdd />}
+                  to={`/new/group?org=${workspace.organization.id}`}
+                >
+                  New Group
+                </Button>
+              ) : null}
+            </>
+          }
+          height="auto"
+        />
+      ) : null}
+      {isSingleSelection ? (
+        <>
+          <hr />
+          <SharingGroupPermissions />
+        </>
       ) : null}
-      {isSingleSelection ? <SharingGroupPermissions /> : null}
     </div>
   )
 }

diff --git a/ui/src/components/sharing/sharing-group-permissions.tsx b/ui/src/components/sharing/sharing-group-permissions.tsx
@@ -20,7 +20,7 @@ import {
   Badge,
   Avatar,
 } from '@chakra-ui/react'
-import { IconDelete, Spinner, Text } from '@koupr/ui'
+import { IconDelete, SectionPlaceholder, SectionSpinner, Text } from '@koupr/ui'
 import cx from 'classnames'
 import FileAPI, { GroupPermission } from '@/client/api/file'
 import { geOwnerPermission } from '@/client/api/permission'
@@ -61,16 +61,9 @@ const SharingGroupPermissions = () => {
 
   return (
     <>
-      <hr />
-      {!permissions ? (
-        <div className={cx('flex', 'items-center', 'justify-center')}>
-          <Spinner />
-        </div>
-      ) : null}
+      {!permissions ? <SectionSpinner /> : null}
       {permissions && permissions.length === 0 ? (
-        <div className={cx('flex', 'items-center', 'justify-center')}>
-          <span>Not shared with any groups.</span>
-        </div>
+        <SectionPlaceholder text="Not shared with any groups." height="auto" />
       ) : null}
       {permissions && permissions.length > 0 ? (
         <Table>

diff --git a/ui/src/components/sharing/sharing-user-overview.tsx b/ui/src/components/sharing/sharing-user-overview.tsx
@@ -10,7 +10,7 @@
 import { useCallback, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Button } from '@chakra-ui/react'
-import { IconCheck, IconPersonAdd, Select } from '@koupr/ui'
+import { IconCheck, IconPersonAdd, SectionPlaceholder, Select } from '@koupr/ui'
 import { OptionBase } from 'chakra-react-select'
 import cx from 'classnames'
 import FileAPI from '@/client/api/file'
@@ -48,6 +48,7 @@ const SharingUserOverview = () => {
   const { data: users } = UserAPI.useList(
     {
       organizationId: workspace?.organization.id,
+      excludeMe: true,
     },
     swrConfig(),
   )
@@ -102,20 +103,23 @@ const SharingUserOverview = () => {
     <div className={cx('flex', 'flex-col', 'gap-1.5')}>
       {!users ? <SharingFormSkeleton /> : null}
       {users && users.totalElements === 0 ? (
-        <div className={cx('flex', 'items-center', 'justify-center')}>
-          <div className={cx('flex', 'flex-col', 'items-center', 'gap-1.5')}>
-            <span>This organization has no members.</span>
-            {workspace &&
-            geEditorPermission(workspace.organization.permission) ? (
-              <Button
-                leftIcon={<IconPersonAdd />}
-                onClick={handleInviteMembersClick}
-              >
-                Invite Members
-              </Button>
-            ) : null}
-          </div>
-        </div>
+        <SectionPlaceholder
+          text="This organization has no members."
+          content={
+            <>
+              {workspace &&
+              geEditorPermission(workspace.organization.permission) ? (
+                <Button
+                  leftIcon={<IconPersonAdd />}
+                  onClick={handleInviteMembersClick}
+                >
+                  Invite Members
+                </Button>
+              ) : null}
+            </>
+          }
+          height="auto"
+        />
       ) : null}
       {users && users.totalElements > 0 ? (
         <div className={cx('flex', 'flex-col', 'gap-1.5')}>
@@ -149,7 +153,12 @@ const SharingUserOverview = () => {
           </Button>
         </div>
       ) : null}
-      {isSingleSelection ? <SharingUserPermissions /> : null}
+      {isSingleSelection ? (
+        <>
+          <hr />
+          <SharingUserPermissions />
+        </>
+      ) : null}
     </div>
   )
 }

diff --git a/ui/src/components/sharing/sharing-user-permissions.tsx b/ui/src/components/sharing/sharing-user-permissions.tsx
@@ -20,7 +20,7 @@ import {
   Badge,
   Avatar,
 } from '@chakra-ui/react'
-import { IconDelete, Spinner, Text } from '@koupr/ui'
+import { IconDelete, SectionPlaceholder, SectionSpinner, Text } from '@koupr/ui'
 import cx from 'classnames'
 import FileAPI, { UserPermission } from '@/client/api/file'
 import { geOwnerPermission } from '@/client/api/permission'
@@ -63,16 +63,9 @@ const SharingUserPermissions = () => {
 
   return (
     <>
-      <hr />
-      {!permissions ? (
-        <div className={cx('flex', 'items-center', 'justify-center')}>
-          <Spinner />
-        </div>
-      ) : null}
+      {!permissions ? <SectionSpinner /> : null}
       {permissions && permissions.length === 0 ? (
-        <div className={cx('flex', 'items-center', 'justify-center')}>
-          <span>Not shared with any users.</span>
-        </div>
+        <SectionPlaceholder text="Not shared with any users." height="auto" />
       ) : null}
       {permissions && permissions.length > 0 ? (
         <Table>

diff --git a/ui/src/pages/new-group-page.tsx b/ui/src/pages/new-group-page.tsx
@@ -8,7 +8,7 @@
 // by the GNU Affero General Public License v3.0 only, included in the file
 // AGPL-3.0-only in the root of this repository.
 import { useCallback, useState } from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import {
   Button,
   FormControl,
@@ -29,6 +29,7 @@ import * as Yup from 'yup'
 import cx from 'classnames'
 import { Helmet } from 'react-helmet-async'
 import GroupAPI from '@/client/api/group'
+import OrganizationAPI from '@/client/api/organization'
 import OrganizationSelector from '@/components/common/organization-selector'
 import { useAppSelector } from '@/store/hook'
 
@@ -39,13 +40,14 @@ type FormValues = {
 
 const NewGroupPage = () => {
   const navigate = useNavigate()
-  const { org } = useParams()
+  const [searchParams] = useSearchParams()
   const mutate = useAppSelector((state) => state.ui.groups.mutate)
   const [isLoading, setIsLoading] = useState(false)
   const formSchema = Yup.object().shape({
     name: Yup.string().required('Name is required').max(255),
     organizationId: Yup.string().required('Organization is required'),
   })
+  const { data: organization } = OrganizationAPI.useGet(searchParams.get('org'))
 
   const handleSubmit = useCallback(
     async (
@@ -80,7 +82,7 @@ const NewGroupPage = () => {
         <Heading className={cx('text-heading')}>New Group</Heading>
         <Formik
           enableReinitialize={true}
-          initialValues={{ name: '', organizationId: org || '' }}
+          initialValues={{ name: '', organizationId: organization?.id || '' }}
           validationSchema={formSchema}
           validateOnBlur={false}
           onSubmit={handleSubmit}
@@ -111,6 +113,7 @@ const NewGroupPage = () => {
                       >
                         <FormLabel>Organization</FormLabel>
                         <OrganizationSelector
+                          defaultValue={organization}
                           onConfirm={(value) =>
                             setFieldValue(field.name, value.id)
                           }