feat(approval-domain): add UI for approval domains (#10480)

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -36,6 +36,7 @@ const StyledButton = styled.button`
 type SettingsListCardProps<ListItem extends { id: string }> = {
   items: ListItem[];
   getItemLabel: (item: ListItem) => string;
+  getItemDescription?: (item: ListItem) => string;
   hasFooter?: boolean;
   isLoading?: boolean;
   onRowClick?: (item: ListItem) => void;
@@ -54,6 +55,7 @@ export const SettingsListCard = <
 >({
   items,
   getItemLabel,
+  getItemDescription,
   hasFooter,
   isLoading,
   onRowClick,
@@ -75,6 +77,7 @@ export const SettingsListCard = <
           key={item.id}
           LeftIcon={RowIconFn ? RowIconFn(item) : RowIcon}
           label={getItemLabel(item)}
+          description={getItemDescription?.(item)}
           rightComponent={<RowRightComponent item={item} />}
           divider={index < items.length - 1}
           onClick={() => onRowClick?.(item)}

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -17,8 +17,16 @@ const StyledRow = styled(CardContent)`
   min-height: ${({ theme }) => theme.spacing(6)};
 `;
 
-const StyledLabel = styled.span`
+const StyledContent = styled.div`
   flex: 1 0 auto;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  padding-left: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledLink = styled(Link)`
@@ -32,6 +40,7 @@ const StyledLink = styled(Link)`
 
 type SettingsListItemCardContentProps = {
   label: string;
+  description?: string;
   divider?: boolean;
   LeftIcon?: IconComponent;
   onClick?: () => void;
@@ -41,6 +50,7 @@ type SettingsListItemCardContentProps = {
 
 export const SettingsListItemCardContent = ({
   label,
+  description,
   divider,
   LeftIcon,
   onClick,
@@ -52,7 +62,10 @@ export const SettingsListItemCardContent = ({
   const content = (
     <StyledRow onClick={onClick} divider={divider}>
       {!!LeftIcon && <LeftIcon size={theme.icon.size.md} />}
-      <StyledLabel>{label}</StyledLabel>
+      <StyledContent>
+        {label}
+        {!!description && <StyledDescription>{description}</StyledDescription>}
+      </StyledContent>
       {rightComponent}
     </StyledRow>
   );

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx

@@ -15,6 +15,7 @@ import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedA
 import { SettingsSecurityApprovedAccessDomainRowDropdownMenu } from '@/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu';
 import { SettingsSecurityApprovedAccessDomainValidationEffect } from '@/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect';
 import { useGetApprovedAccessDomainsQuery } from '~/generated/graphql';
+import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
 const StyledLink = styled(Link)`
   text-decoration: none;
@@ -41,6 +42,11 @@ export const SettingsApprovedAccessDomainsListCard = () => {
     },
   });
 
+  const getItemDescription = (createdAt: string) => {
+    const beautifyPastDateRelative = beautifyPastDateRelativeToNow(createdAt);
+    return t`Added ${beautifyPastDateRelative}`;
+  };
+
   return loading || !approvedAccessDomains.length ? (
     <StyledLink to={getSettingsPath(SettingsPath.NewApprovedAccessDomain)}>
       <SettingsCard
@@ -53,9 +59,8 @@ export const SettingsApprovedAccessDomainsListCard = () => {
       <SettingsSecurityApprovedAccessDomainValidationEffect />
       <SettingsListCard
         items={approvedAccessDomains}
-        getItemLabel={(approvedAccessDomain) =>
-          `${approvedAccessDomain.domain} - ${approvedAccessDomain.createdAt}`
-        }
+        getItemLabel={({ domain }) => domain}
+        getItemDescription={({ createdAt }) => getItemDescription(createdAt)}
         RowIcon={IconAt}
         RowRightComponent={({ item: approvedAccessDomain }) => (
           <SettingsSecurityApprovedAccessDomainRowDropdownMenu