fix(ui): Fix inconsistency in UI and improve UX (#314)

* fix(ui): Fix inconsistency in UI and improve UX

* fix(ui): Make text clickable again

* fix(ui): Remove unused component

* fix(ui): Change page titles to Title Case, Fix and optimize searchbar, adjust height of headers in console pages

ui/src/components/app-bar/app-bar-search.tsx

@@ -269,27 +269,7 @@ const AppBarSearch = () => {
 
   const handleClear = useCallback(() => {
     setBuffer('')
-    if (isFiles) {
-      navigate(`/workspace/${workspaceId}/file/${fileId}`)
-    } else if (isWorkspaces) {
-      navigate(`/workspace`)
-    } else if (isGroups) {
-      navigate(`/group`)
-    } else if (isOrgs) {
-      navigate(`/organization`)
-    } else if (isOrgMembers) {
-      navigate(`/organization/${workspaceId}/member`)
-    } else if (isGroupMembers) {
-      navigate(`/group/${workspaceId}/member`)
-    } else if (isConsoleUsers) {
-      navigate(`/console/users`)
-    } else if (isConsoleOrganizations) {
-      navigate(`/console/organization`)
-    } else if (isConsoleGroups) {
-      navigate(`/console/groups`)
-    } else if (isConsoleWorkspaces) {
-      navigate(`/console/workspaces`)
-    }
+    handleSearch('')
   }, [
     workspaceId,
     fileId,
@@ -299,12 +279,16 @@ const AppBarSearch = () => {
     isOrgs,
     isOrgMembers,
     isGroupMembers,
+    isConsoleUsers,
+    isConsoleOrganizations,
+    isConsoleGroups,
+    isConsoleWorkspaces,
     navigate,
   ])
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === 'Enter' && buffer.length >= 3) {
+      if (event.key === 'Enter' && buffer.trim().length >= 3) {
         handleSearch(buffer.trim())
       } else if (
         event.key === 'Enter' &&

ui/src/components/console/console-confirmation-modal.tsx

@@ -19,6 +19,7 @@ import {
   ModalHeader,
   ModalOverlay,
 } from '@chakra-ui/react'
+import cx from 'classnames'
 
 interface ConsoleConfirmationModalProps {
   action: string | undefined
@@ -66,28 +67,30 @@ const ConsoleConfirmationModal = (props: ConsoleConfirmationModalProps) => {
             Please confirm this action
           </ModalBody>
           <ModalFooter>
-            <Button
-              type="button"
-              variant="outline"
-              colorScheme="blue"
-              disabled={props.isSubmitting}
-              onClick={() => {
-                props.closeConfirmationWindow()
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              variant="solid"
-              colorScheme="blue"
-              isLoading={props.isSubmitting}
-              onClick={async () => {
-                await props.request(null, null, null, true)
-              }}
-            >
-              Confirm
-            </Button>
+            <div className={cx('flex', 'flex-row', 'items-center', 'gap-1')}>
+              <Button
+                type="button"
+                variant="outline"
+                colorScheme="blue"
+                disabled={props.isSubmitting}
+                onClick={() => {
+                  props.closeConfirmationWindow()
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                variant="solid"
+                colorScheme="blue"
+                isLoading={props.isSubmitting}
+                onClick={async () => {
+                  await props.request(null, null, null, true)
+                }}
+              >
+                Confirm
+              </Button>
+            </div>
           </ModalFooter>
         </ModalContent>
       </Modal>

ui/src/components/console/console-rename-modal.tsx

@@ -23,12 +23,13 @@ import {
 } from '@chakra-ui/react'
 import { Field, FieldAttributes, FieldProps, Form, Formik } from 'formik'
 import * as Yup from 'yup'
+import cx from 'classnames'
 
 interface ConsoleRenameModalProps {
   closeConfirmationWindow: () => void
   isOpen: boolean
   isSubmitting: boolean
-  previousName: string | undefined
+  previousName: string
   object: string
   formSchema: Yup.ObjectSchema<
     { name: string },
@@ -69,7 +70,7 @@ const ConsoleRenameModal = (props: ConsoleRenameModalProps) => {
         <ModalCloseButton />
         <Formik
           enableReinitialize={true}
-          initialValues={{ name: '' }}
+          initialValues={{ name: props.previousName }}
           validationSchema={props.formSchema}
           validateOnBlur={false}
           onSubmit={async (event) => {
@@ -98,25 +99,29 @@ const ConsoleRenameModal = (props: ConsoleRenameModalProps) => {
                 </Field>
               </ModalBody>
               <ModalFooter>
-                <Button
-                  type="button"
-                  variant="outline"
-                  colorScheme="blue"
-                  disabled={isSubmitting}
-                  onClick={() => {
-                    props.closeConfirmationWindow()
-                  }}
+                <div
+                  className={cx('flex', 'flex-row', 'items-center', 'gap-1')}
                 >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  variant="solid"
-                  colorScheme="blue"
-                  isLoading={isSubmitting}
-                >
-                  Confirm
-                </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    colorScheme="blue"
+                    disabled={isSubmitting}
+                    onClick={() => {
+                      props.closeConfirmationWindow()
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    variant="solid"
+                    colorScheme="blue"
+                    isLoading={isSubmitting}
+                  >
+                    Confirm
+                  </Button>
+                </div>
               </ModalFooter>
             </Form>
           )}

ui/src/pages/console/console-panel-database-indexes.tsx

@@ -145,7 +145,7 @@ const ConsolePanelDatabaseIndexes = () => {
         </ModalContent>
       </Modal>
       <Helmet>
-        <title>Index management</title>
+        <title>Index Management</title>
       </Helmet>
       <div className={cx('flex', 'flex-col', 'gap-3.5', 'pb-3.5')}>
         {list && list.data.length > 0 ? (
@@ -156,7 +156,7 @@ const ConsolePanelDatabaseIndexes = () => {
                   <Th>Name</Th>
                   <Th>Table</Th>
                   <Th>Syntax</Th>
-                  <Th>Actions</Th>
+                  <Th></Th>
                 </Tr>
               </Thead>
               <Tbody>

ui/src/pages/console/console-panel-database-overview.tsx

@@ -14,7 +14,7 @@ const ConsolePanelDatabaseOverview = () => {
   return (
     <>
       <Helmet>
-        <title>Database management</title>
+        <title>Database Management</title>
       </Helmet>
       <div className={cx('flex', 'flex-col', 'gap-3.5', 'pb-3.5')}></div>
     </>

ui/src/pages/console/console-panel-database.tsx

@@ -17,7 +17,7 @@ const ConsolePanelDatabase = () => {
   const location = useLocation()
   const navigate = useNavigate()
   const [tabIndex, setTabIndex] = useState(0)
-  const [indexesAvailable, setIndexesAvailable] = useState(true)
+  const [indexesAvailable, setIndexesAvailable] = useState(false)
 
   useEffect(() => {
     const segments = location.pathname.split('/')
@@ -38,7 +38,7 @@ const ConsolePanelDatabase = () => {
   return (
     <div className={cx('flex', 'flex-col', 'gap-3.5', 'pb-3.5')}>
       <Heading className={cx('text-heading', 'shrink-0')} noOfLines={1}>
-        Database management
+        Database Management
       </Heading>
       <Tabs variant="solid-rounded" colorScheme="gray" index={tabIndex}>
         <TabList>

ui/src/pages/console/console-panel-groups.tsx

@@ -11,7 +11,13 @@ import { useEffect, useState } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import {
   Button,
+  Center,
   Heading,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
   Stack,
   Table,
   Tbody,
@@ -27,6 +33,7 @@ import { Helmet } from 'react-helmet-async'
 import ConsoleApi, { GroupManagementList } from '@/client/console/console'
 import ConsoleRenameModal from '@/components/console/console-rename-modal'
 import { consoleGroupsPaginationStorage } from '@/infra/pagination'
+import { IconMoreVert } from '@/lib/components/icons'
 import PagePagination from '@/lib/components/page-pagination'
 import SectionSpinner from '@/lib/components/section-spinner'
 import { decodeQuery } from '@/lib/helpers/query'
@@ -45,7 +52,7 @@ const ConsolePanelGroups = () => {
   })
   const [confirmRenameWindowOpen, setConfirmRenameWindowOpen] = useState(false)
   const [isSubmitting, setSubmitting] = useState(false)
-  const [currentName, setCurrentName] = useState<string>()
+  const [currentName, setCurrentName] = useState<string>('')
   const [groupId, setGroupId] = useState<string>()
   const formSchema = Yup.object().shape({
     name: Yup.string().required('Name is required').max(255),
@@ -64,7 +71,7 @@ const ConsolePanelGroups = () => {
       } finally {
         closeConfirmationWindow()
       }
-    } else if (id !== null && currentName !== null) {
+    } else if (id !== null && currentName !== null && currentName !== '') {
       setConfirmRenameWindowOpen(true)
       setCurrentName(currentName)
       setGroupId(id)
@@ -74,7 +81,7 @@ const ConsolePanelGroups = () => {
   const closeConfirmationWindow = () => {
     setConfirmRenameWindowOpen(false)
     setSubmitting(false)
-    setCurrentName(undefined)
+    setCurrentName('')
     setGroupId(undefined)
   }
 
@@ -108,10 +115,10 @@ const ConsolePanelGroups = () => {
         request={renameGroup}
       />
       <Helmet>
-        <title>Group management</title>
+        <title>Group Management</title>
       </Helmet>
       <div className={cx('flex', 'flex-col', 'gap-3.5', 'pb-3.5')}>
-        <Heading className={cx('text-heading')}>Group management</Heading>
+        <Heading className={cx('text-heading')}>Group Management</Heading>
         {list && list.data.length > 0 ? (
           <Stack direction="column" spacing={2}>
             <Table variant="simple">
@@ -121,7 +128,7 @@ const ConsolePanelGroups = () => {
                   <Th>Organization</Th>
                   <Th>Create time</Th>
                   <Th>Update time</Th>
-                  <Th>Actions</Th>
+                  <Th></Th>
                 </Tr>
               </Thead>
               <Tbody>
@@ -150,13 +157,25 @@ const ConsolePanelGroups = () => {
                       <Text>{new Date(group.updateTime).toLocaleString()}</Text>
                     </Td>
                     <Td>
-                      <Button
-                        onClick={async () => {
-                          await renameGroup(group.id, group.name, null)
-                        }}
-                      >
-                        Rename
-                      </Button>
+                      <Center>
+                        <Menu>
+                          <MenuButton
+                            as={IconButton}
+                            icon={<IconMoreVert />}
+                            variant="ghost"
+                            aria-label=""
+                          />
+                          <MenuList>
+                            <MenuItem
+                              onClick={async () => {
+                                await renameGroup(group.id, group.name, null)
+                              }}
+                            >
+                              Rename
+                            </MenuItem>
+                          </MenuList>
+                        </Menu>
+                      </Center>
                     </Td>
                   </Tr>
                 ))}