fix: minor ui issues

pixel-point · Jan 27, 2025 · e85a797 · e85a797
1 parent e089604
commit e85a797
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 120 deletions.
diff --git a/apps/gitness/src/framework/context/AppContext.tsx b/apps/gitness/src/framework/context/AppContext.tsx
@@ -54,19 +54,15 @@ export const AppProvider: FC<{ children: ReactNode }> = ({ children }) => {
   } | null>(null)
 
   const fetchUser = async (): Promise<void> => {
-    setIsUpdateUserLoading(true)
-    setUpdateUserLoadingError(null)
     try {
       const userResponse = await getUser({})
       setCurrentUser(userResponse.body)
-      setIsUpdateUserLoading(false)
     } catch (error) {
       const typedError = error as GetUserErrorResponse
       setUpdateUserLoadingError({
         type: ProfileSettingsErrorType.PROFILE,
         message: typedError.message || 'An unknown fetch user error occurred.'
       })
-      setIsUpdateUserLoading(false)
     }
   }
 

diff --git a/apps/gitness/src/pages-v2/profile-settings/profile-settings-general-container.tsx b/apps/gitness/src/pages-v2/profile-settings/profile-settings-general-container.tsx
@@ -33,8 +33,6 @@ export const SettingsProfileGeneralPage: FC = () => {
     }
   )
 
-  const isLoadingUser = isLoadingUserData || isUpdateUserLoading
-
   const updateUserMutation = useUpdateUserMutation(
     {},
     {
@@ -117,14 +115,14 @@ export const SettingsProfileGeneralPage: FC = () => {
       <SettingsAccountGeneralPage
         useProfileSettingsStore={useProfileSettingsStore}
         useTranslationStore={useTranslationStore}
-        isLoadingUser={isLoadingUser}
-        isUpdatingUser={isLoadingUser}
-        isUpdatingPassword={isLoadingUser}
+        isLoadingUser={isLoadingUserData}
+        isUpdatingUser={isUpdateUserLoading}
+        isUpdatingPassword={isUpdateUserLoading}
         error={apiError || updateUserLoadingError}
         onUpdateUser={handleUpdateUser}
         onUpdatePassword={handleUpdatePassword}
-        profileUpdateSuccess={!isLoadingUser && !apiError && !updateUserLoadingError}
-        passwordUpdateSuccess={!isLoadingUser && !apiError && !updateUserLoadingError}
+        profileUpdateSuccess={updateUserMutation.isSuccess}
+        passwordUpdateSuccess={updatePasswordMutation.isSuccess}
       />
     </>
   )

diff --git a/apps/gitness/src/pages-v2/profile-settings/profile-settings-keys-container.tsx b/apps/gitness/src/pages-v2/profile-settings/profile-settings-keys-container.tsx
@@ -86,7 +86,7 @@ export const SettingsProfileKeysPage = () => {
     order: 'asc'
   }
 
-  const { data: { body: tokenList, headers } = {} } = useListTokensQuery(
+  const { data: { body: tokenList, headers } = {}, isLoading: isLoadingTokenList } = useListTokensQuery(
     {},
     {
       onError: (error: ListTokensErrorResponse) => {
@@ -96,7 +96,7 @@ export const SettingsProfileKeysPage = () => {
     }
   )
 
-  const { data: { body: publicKeysList } = {} } = useListPublicKeyQuery(
+  const { data: { body: publicKeysList } = {}, isLoading: isLoadingPublicKeys } = useListPublicKeyQuery(
     { queryParams },
     {
       onError: (error: ListPublicKeyErrorResponse) => {
@@ -226,6 +226,8 @@ export const SettingsProfileKeysPage = () => {
         error={apiError}
         headers={headers}
         useTranslationStore={useTranslationStore}
+        isLoadingTokenList={isLoadingTokenList}
+        isLoadingKeysList={isLoadingPublicKeys}
       />
       <ProfileSettingsTokenCreateDialog
         open={openCreateTokenDialog}

diff --git a/packages/ui/src/components/dialogs/delete-alert-dialog.tsx b/packages/ui/src/components/dialogs/delete-alert-dialog.tsx
@@ -45,7 +45,7 @@ export const DeleteAlertDialog: FC<DeleteAlertDialogProps> = ({
 
   return (
     <AlertDialog.Root open={open} onOpenChange={onClose}>
-      <AlertDialog.Content>
+      <AlertDialog.Content onOverlayClick={onClose} onClose={onClose}>
         <AlertDialog.Header>
           <AlertDialog.Title>{t('component:deleteDialog.title', 'Are you sure?')}</AlertDialog.Title>
           <AlertDialog.Description>

diff --git a/packages/ui/src/components/skeletons/skeleton-table.tsx b/packages/ui/src/components/skeletons/skeleton-table.tsx
@@ -16,7 +16,7 @@ export const SkeletonTable = ({ className, countRows = 12, countColumns = 5 }: S
   return (
     <TableBody className={cn('relative h-full w-full', className)}>
       {Array.from({ length: countRows }).map((_, index) => (
-        <TableRow className="flex" key={`row-${index}`}>
+        <TableRow key={`row-${index}`}>
           {Array.from({ length: countColumns }).map((_, columnIndex) => (
             <TableCell className="flex-1 h-12 content-center" key={`cell-${index}-${columnIndex}`}>
               <Skeleton className="h-2.5" style={{ width: getRandomPercentageWidth(30, 80) }} />

diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
@@ -1,25 +1,41 @@
 import { FC } from 'react'
 
-import { Icon, MoreActionsTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components'
+import {
+  Icon,
+  MoreActionsTooltip,
+  SkeletonTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components'
 import { timeAgo } from '@utils/utils'
 import { TranslationStore } from '@views/repo'
 
 import { KeysList } from '../types'
 
 interface ProfileKeysListProps {
   publicKeys: KeysList[]
+  isLoading: boolean
   openAlertDeleteDialog: (params: { identifier: string; type: string }) => void
   useTranslationStore: () => TranslationStore
 }
 
 export const ProfileKeysList: FC<ProfileKeysListProps> = ({
   publicKeys,
+  isLoading,
   openAlertDeleteDialog,
   useTranslationStore
 }) => {
   const { t } = useTranslationStore()
+
   return (
-    <Table variant="asStackedList">
+    <Table
+      className={isLoading ? '[mask-image:linear-gradient(to_bottom,black_30%,transparent_100%)]' : ''}
+      variant="asStackedList"
+    >
       <TableHeader>
         <TableRow>
           <TableHead>{t('views:profileSettings.name', 'Name')}</TableHead>
@@ -28,55 +44,62 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
           <TableHead></TableHead>
         </TableRow>
       </TableHeader>
-      <TableBody>
-        {publicKeys.length ? (
-          publicKeys.map((key: KeysList) => (
-            <TableRow key={key.identifier}>
-              <TableCell className="content-center">
-                <div className="inline-flex items-center gap-x-2.5">
-                  <Icon name="ssh-key" size={32} />
-                  <div className="flex flex-col">
-                    <span className="font-medium text-foreground-1 block max-w-[200px] truncate">{key.identifier}</span>
-                    <span className="max-w-[200px] truncate text-12 text-foreground-3">{key.fingerprint}</span>
+
+      {isLoading ? (
+        <SkeletonTable countRows={4} countColumns={4} />
+      ) : (
+        <TableBody>
+          {publicKeys.length ? (
+            publicKeys.map((key: KeysList) => (
+              <TableRow key={key.identifier}>
+                <TableCell className="content-center">
+                  <div className="inline-flex items-center gap-x-2.5">
+                    <Icon name="ssh-key" size={32} />
+                    <div className="flex flex-col">
+                      <span className="font-medium text-foreground-1 block max-w-[200px] truncate">
+                        {key.identifier}
+                      </span>
+                      <span className="max-w-[200px] truncate text-12 text-foreground-3">{key.fingerprint}</span>
+                    </div>
                   </div>
-                </div>
-              </TableCell>
-              <TableCell className="h-1 content-center">
-                <span className="text-foreground-1">{timeAgo(new Date(key.created!).getTime())}</span>
-              </TableCell>
-              <TableCell className="h-1 content-center">
-                {/* TODO: pass the data to KeysList item about last used date */}
-                {/* <span className="text-foreground-1">
+                </TableCell>
+                <TableCell className="h-1 content-center">
+                  <span className="text-foreground-1">{timeAgo(new Date(key.created!).getTime())}</span>
+                </TableCell>
+                <TableCell className="h-1 content-center">
+                  {/* TODO: pass the data to KeysList item about last used date */}
+                  {/* <span className="text-foreground-1">
                   {key.last_used ? new Date(key.last_used).toLocaleString() : 'Never used'}
                 </span> */}
-              </TableCell>
-              <TableCell className="text-right content-center">
-                <MoreActionsTooltip
-                  isInTable
-                  actions={[
-                    {
-                      isDanger: true,
-                      title: t('views:profileSettings.deleteSshKey', 'Delete SSH key'),
-                      onClick: () => openAlertDeleteDialog({ identifier: key.identifier!, type: 'key' })
-                    }
-                  ]}
-                />
+                </TableCell>
+                <TableCell className="text-right content-center">
+                  <MoreActionsTooltip
+                    isInTable
+                    actions={[
+                      {
+                        isDanger: true,
+                        title: t('views:profileSettings.deleteSshKey', 'Delete SSH key'),
+                        onClick: () => openAlertDeleteDialog({ identifier: key.identifier!, type: 'key' })
+                      }
+                    ]}
+                  />
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow className="hover:bg-transparent">
+              <TableCell className="!p-4 content-center" colSpan={4}>
+                <p className="text-center text-14 text-foreground-4">
+                  {t(
+                    'views:profileSettings.noDataKeysDescription',
+                    'There are no SSH keys associated with this account.'
+                  )}
+                </p>
               </TableCell>
             </TableRow>
-          ))
-        ) : (
-          <TableRow className="hover:bg-transparent">
-            <TableCell className="!p-4 content-center" colSpan={4}>
-              <p className="text-center text-14 text-foreground-4">
-                {t(
-                  'views:profileSettings.noDataKeysDescription',
-                  'There are no SSH keys associated with this account.'
-                )}
-              </p>
-            </TableCell>
-          </TableRow>
-        )}
-      </TableBody>
+          )}
+        </TableBody>
+      )}
     </Table>
   )
 }