From fd6740fa880b0ce8a6baa6c0ee5dc385fca499e9 Mon Sep 17 00:00:00 2001 From: Falgun Patel <92120797+falgunmpatel@users.noreply.github.com> Date: Tue, 24 Sep 2024 20:32:58 +0530 Subject: [PATCH] fix issue (#7152 : Improve relation empty states on record page) (#7157) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - "No xxx" removed for empty relations - All(0) removed --------- Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com> --- ...ordDetailRelationRecordsListEmptyState.tsx | 35 ------------------- .../RecordDetailRelationSection.tsx | 28 ++++++--------- ...ordDetailRelationSectionSkeletonLoader.tsx | 31 ---------------- .../components/RecordDetailSectionHeader.tsx | 17 ++++++--- 4 files changed, 24 insertions(+), 87 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx delete mode 100644 packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionSkeletonLoader.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx deleted file mode 100644 index a47aa9de0..000000000 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; -import { useIcons } from 'twenty-ui'; - -import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; - -type RecordDetailRelationRecordsListEmptyStateProps = { - relationObjectMetadataItem: ObjectMetadataItem; -}; - -const StyledRelationRecordsListEmptyState = styled.div` - color: ${({ theme }) => theme.font.color.light}; - align-items: center; - justify-content: center; - gap: ${({ theme }) => theme.spacing(2)}; - display: flex; - height: ${({ theme }) => theme.spacing(10)}; - text-transform: capitalize; -`; - -export const RecordDetailRelationRecordsListEmptyState = ({ - relationObjectMetadataItem, -}: RecordDetailRelationRecordsListEmptyStateProps) => { - const theme = useTheme(); - - const { getIcon } = useIcons(); - const Icon = getIcon(relationObjectMetadataItem.icon); - - return ( - - -
No {relationObjectMetadataItem.labelSingular}
- - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx index 54e21a486..23fc1f070 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx @@ -13,8 +13,6 @@ import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/re import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput'; import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { RecordDetailRelationRecordsList } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsList'; -import { RecordDetailRelationRecordsListEmptyState } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState'; -import { RecordDetailRelationSectionSkeletonLoader } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionSkeletonLoader'; import { RecordDetailSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailSection'; import { RecordDetailSectionHeader } from '@/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; @@ -133,20 +131,10 @@ export const RecordDetailRelationSection = ({ }?${qs.stringify(filterQueryParams)}`; const showContent = () => { - if (loading) { - return ( - - ); - } - - return relationRecords.length ? ( - - ) : ( - + return ( + relationRecords.length > 0 && ( + + ) ); }; @@ -158,6 +146,8 @@ export const RecordDetailRelationSection = ({ recordId, }); + if (loading) return null; + return ( 0 + ? `All (${relationRecords.length})` + : '', } : undefined } hideRightAdornmentOnMouseLeave={!isDropdownOpen && !isMobile} + areRecordsAvailable={relationRecords.length > 0} rightAdornment={ theme.spacing(4)}; - height: 40px; -`; - -export const RecordDetailRelationSectionSkeletonLoader = ({ - numSkeletons = 1, -}: { - numSkeletons?: number; -}) => { - const theme = useTheme(); - return ( - - - {Array.from({ length: numSkeletons }).map((_, index) => ( - - ))} - - - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader.tsx index b9087184b..158a80e67 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader.tsx @@ -1,12 +1,16 @@ +import styled from '@emotion/styled'; import { useState } from 'react'; import { Link } from 'react-router-dom'; -import styled from '@emotion/styled'; -const StyledHeader = styled.header<{ isDropdownOpen?: boolean }>` +const StyledHeader = styled.header<{ + isDropdownOpen?: boolean; + areRecordsAvailable?: boolean; +}>` align-items: center; display: flex; height: 24px; - margin-bottom: ${({ theme }) => theme.spacing(2)}; + margin-bottom: ${({ theme, areRecordsAvailable }) => + areRecordsAvailable && theme.spacing(2)}; `; const StyledTitle = styled.div` @@ -34,6 +38,7 @@ type RecordDetailSectionHeaderProps = { link?: { to: string; label: string }; rightAdornment?: React.ReactNode; hideRightAdornmentOnMouseLeave?: boolean; + areRecordsAvailable?: boolean; }; export const RecordDetailSectionHeader = ({ @@ -41,11 +46,13 @@ export const RecordDetailSectionHeader = ({ link, rightAdornment, hideRightAdornmentOnMouseLeave = true, + areRecordsAvailable = false, }: RecordDetailSectionHeaderProps) => { const [isHovered, setIsHovered] = useState(false); return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > @@ -53,7 +60,9 @@ export const RecordDetailSectionHeader = ({ {title} {link && {link.label}} - {hideRightAdornmentOnMouseLeave && !isHovered ? null : rightAdornment} + {hideRightAdornmentOnMouseLeave && !isHovered && areRecordsAvailable + ? null + : rightAdornment} ); };