Twenty config admin panel integration (#11755)

closes https://github.com/twentyhq/core-team-issues/issues/761
closes https://github.com/twentyhq/core-team-issues/issues/762

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -238,6 +238,7 @@ export {
   IconPuzzle,
   IconQuestionMark,
   IconRefresh,
+  IconRefreshAlert,
   IconRefreshDot,
   IconRelationManyToMany,
   IconRelationOneToMany,

packages/twenty-ui/src/display/index.ts

@@ -299,6 +299,7 @@ export {
   IconPuzzle,
   IconQuestionMark,
   IconRefresh,
+  IconRefreshAlert,
   IconRefreshDot,
   IconRelationManyToMany,
   IconRelationOneToMany,

packages/twenty-ui/src/display/typography/components/H3Title.tsx

@@ -1,11 +1,18 @@
 import styled from '@emotion/styled';
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
 import { ReactNode } from 'react';
 
 type H3TitleProps = {
   title: ReactNode;
+  description?: string;
   className?: string;
 };
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 const StyledH3Title = styled.h3`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.lg};
@@ -13,6 +20,29 @@ const StyledH3Title = styled.h3`
   margin: 0;
 `;
 
-export const H3Title = ({ title, className }: H3TitleProps) => {
-  return <StyledH3Title className={className}>{title}</StyledH3Title>;
+const StyledDescription = styled.h4`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const H3Title = ({ title, description, className }: H3TitleProps) => {
+  return (
+    <StyledContainer className={className}>
+      <StyledH3Title>{title}</StyledH3Title>
+      {description && (
+        // Design rule: Never set a description for H3 if there are any H2 in the page
+        // (in that case, each H2 must have its own description)
+        <StyledDescription>
+          <OverflowingTextWithTooltip
+            text={description}
+            displayedMaxRows={2}
+            isTooltipMultiline={true}
+          />
+        </StyledDescription>
+      )}
+    </StyledContainer>
+  );
 };