diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx index a500c1237c..2cdac7087e 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx @@ -1,3 +1,4 @@ +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { SettingsAdminDeleteJobsConfirmationModal } from '@/settings/admin-panel/health-status/components/SettingsAdminDeleteJobsConfirmationModal'; import { SettingsAdminJobDetailsExpandable } from '@/settings/admin-panel/health-status/components/SettingsAdminJobDetailsExpandable'; import { SettingsAdminJobStateBadge } from '@/settings/admin-panel/health-status/components/SettingsAdminJobStateBadge'; @@ -49,12 +50,6 @@ const StyledControlsContainer = styled.div` justify-content: space-between; `; -const StyledEmptyState = styled.div` - color: ${themeCssVariables.font.color.tertiary}; - padding: ${themeCssVariables.spacing[8]}; - text-align: center; -`; - const StyledPaginationContainer = styled.div` align-items: center; display: flex; @@ -261,9 +256,9 @@ export const SettingsAdminQueueJobsTable = ({ {loading && jobs.length === 0 ? ( - {t`Loading jobs...`} + {t`Loading jobs...`} ) : jobs.length === 0 ? ( - {t`No jobs found`} + {t`No jobs found`} ) : ( <> diff --git a/packages/twenty-front/src/modules/settings/components/SettingsEmptyPlaceholder.tsx b/packages/twenty-front/src/modules/settings/components/SettingsEmptyPlaceholder.tsx new file mode 100644 index 0000000000..9680154abc --- /dev/null +++ b/packages/twenty-front/src/modules/settings/components/SettingsEmptyPlaceholder.tsx @@ -0,0 +1,35 @@ +import { styled } from '@linaria/react'; +import { type ReactNode } from 'react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; + +type ThemeSpacingKey = keyof typeof themeCssVariables.spacing; + +type SettingsEmptyPlaceholderProps = { + children: ReactNode; + padding?: ThemeSpacingKey; + textAlign?: 'left' | 'center' | 'right'; +}; + +const StyledPlaceholder = styled.div<{ + placeholderPadding: string; + placeholderTextAlign: string; +}>` + color: ${themeCssVariables.font.color.tertiary}; + padding: ${({ placeholderPadding }) => placeholderPadding}; + text-align: ${({ placeholderTextAlign }) => placeholderTextAlign}; +`; + +export const SettingsEmptyPlaceholder = ({ + children, + padding = '8', + textAlign = 'center', +}: SettingsEmptyPlaceholderProps) => { + return ( + + {children} + + ); +}; diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx index ad02dcb9eb..e3270b7958 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentEntityPickerDropdown.tsx @@ -1,3 +1,4 @@ +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; @@ -35,12 +36,6 @@ const StyledItemName = styled.div` font-weight: ${themeCssVariables.font.weight.medium}; `; -const StyledEmptyState = styled.div` - color: ${themeCssVariables.font.color.tertiary}; - padding: ${themeCssVariables.spacing[2]}; - text-align: center; -`; - type EntityData = Agent | ApiKeyForRole; type SettingsRoleAssignmentEntityPickerDropdownProps = { @@ -138,7 +133,9 @@ export const SettingsRoleAssignmentEntityPickerDropdown = ({ )) ) : ( - {getEmptyStateMessage()} + + {getEmptyStateMessage()} + )} diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolParameterTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolParameterTable.tsx index a6cfda0c42..c606dd3e4e 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolParameterTable.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolParameterTable.tsx @@ -1,3 +1,4 @@ +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { type ComponentType, useContext } from 'react'; @@ -89,7 +90,9 @@ export const SettingsToolParameterTable = ({ const entries = Object.entries(schemaProperties); if (entries.length === 0 && !functionLink) { - return
{t`No parameters`}
; + return ( + {t`No parameters`} + ); } return ( diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx index 7f97091399..14cc4cacb1 100644 --- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx +++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx @@ -1,3 +1,4 @@ +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { SETTINGS_OBJECT_TABLE_COLUMN_WIDTH } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents'; import { Table } from '@/ui/layout/table/components/Table'; import { TableHeader } from '@/ui/layout/table/components/TableHeader'; @@ -39,12 +40,6 @@ const StyledSearchInputContainer = styled.div` padding-bottom: ${themeCssVariables.spacing[2]}; `; -const StyledEmptyState = styled.div` - color: ${themeCssVariables.font.color.tertiary}; - padding: ${themeCssVariables.spacing[8]}; - text-align: center; -`; - export const SettingsApplicationDataTable = ({ objectRows, fieldGroupRows, @@ -102,7 +97,7 @@ export const SettingsApplicationDataTable = ({ /> {hasNoResults ? ( - {t`No object found`} + {t`No object found`} ) : (
diff --git a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationPermissionsTab.tsx b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationPermissionsTab.tsx index 68855d7297..6b3c92cdd9 100644 --- a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationPermissionsTab.tsx +++ b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationPermissionsTab.tsx @@ -5,6 +5,7 @@ import { SettingsRolesQueryEffect } from '@/settings/roles/components/SettingsRo import { SettingsRolePermissions } from '@/settings/roles/role-permissions/components/SettingsRolePermissions'; import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState'; import { type RoleWithPartialMembers } from '@/settings/roles/types/RoleWithPartialMembers'; +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState'; import { t } from '@lingui/core/macro'; import { useCallback, useEffect, useMemo, useState } from 'react'; @@ -393,5 +394,9 @@ export const SettingsApplicationPermissionsTab = ({ ); } - return
{t`No permissions configured for this application.`}
; + return ( + + {t`No permissions configured for this application.`} + + ); }; diff --git a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsAvailableTab.tsx b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsAvailableTab.tsx index ede140c610..d2b3187ace 100644 --- a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsAvailableTab.tsx +++ b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsAvailableTab.tsx @@ -1,3 +1,4 @@ +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -26,12 +27,6 @@ const StyledCardsGrid = styled.div` } `; -const StyledEmptyState = styled.div` - color: ${themeCssVariables.font.color.tertiary}; - padding: ${themeCssVariables.spacing[4]}; - text-align: center; -`; - const StyledHintLink = styled.button` background: none; border: none; @@ -73,7 +68,7 @@ export const SettingsApplicationsAvailableTab = () => { if (isLoading) { return (
- {t`Loading applications...`} + {t`Loading applications...`}
); } @@ -115,7 +110,7 @@ export const SettingsApplicationsAvailableTab = () => { {filteredApplications.length === 0 ? ( - + {showNonFeaturedHint ? t`No featured applications found. ${nonFeaturedCount} non-featured result(s) available — ` : t`No applications available`} @@ -124,7 +119,7 @@ export const SettingsApplicationsAvailableTab = () => { {t`show all`} )} - + ) : ( {filteredApplications.map((application) => ( diff --git a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx index 763c5bea55..e7a8c04f02 100644 --- a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx +++ b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx @@ -1,4 +1,5 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { SettingsListCard } from '@/settings/components/SettingsListCard'; import { StyledActionTableCell, @@ -50,12 +51,6 @@ const StyledSearchInputContainer = styled.div` padding-bottom: ${themeCssVariables.spacing[2]}; `; -const StyledEmptyState = styled.div` - color: ${themeCssVariables.font.color.tertiary}; - padding: ${themeCssVariables.spacing[8]}; - text-align: center; -`; - const StyledTableRowsContainer = styled.div` border-bottom: 1px solid ${themeCssVariables.border.color.light}; padding: ${themeCssVariables.spacing[2]} 0; @@ -235,7 +230,7 @@ export const SettingsApplicationsDeveloperTab = () => { /> {filteredMarketplaceApps.length === 0 ? ( - {t`No application found`} + {t`No application found`} ) : (
diff --git a/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomainDetail.tsx b/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomainDetail.tsx index 879d6d3111..6914b0632e 100644 --- a/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomainDetail.tsx +++ b/packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomainDetail.tsx @@ -1,3 +1,4 @@ +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsEmailingDomainVerificationRecords } from '@/settings/emailing-domains/components/SettingsEmailingDomainVerificationRecords'; @@ -26,11 +27,15 @@ export const SettingsEmailingDomainDetail = () => { ); if (loading) { - return
{t`Loading...`}
; + return {t`Loading...`}; } if (isDefined(error) || !isDefined(emailingDomain)) { - return Domain not found; + return ( + + Domain not found + + ); } return ( diff --git a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx index 7fc35e3fab..ef9638287f 100644 --- a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx +++ b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx @@ -1,3 +1,4 @@ +import { SettingsEmptyPlaceholder } from '@/settings/components/SettingsEmptyPlaceholder'; import { styled } from '@linaria/react'; import { msg } from '@lingui/core/macro'; import { Trans, useLingui } from '@lingui/react/macro'; @@ -132,12 +133,6 @@ const StyledResizeHandle = styled.div<{ isResizing: boolean }>` } `; -const StyledEmptyState = styled.div` - color: ${themeCssVariables.font.color.tertiary}; - padding: ${themeCssVariables.spacing[8]}; - text-align: center; -`; - const StyledLoadingMore = styled.div` color: ${themeCssVariables.font.color.tertiary}; padding: ${themeCssVariables.spacing[4]}; @@ -292,9 +287,9 @@ export const EventLogResultsTable = ({ if (!loading && records.length === 0) { return ( - + No event logs found - + ); }