6446 improve information banner component to make it scale better (#6545)

Closes #6446

packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/ui/input/button/components/Button';
+import styled from '@emotion/styled';
+import { Banner, IconComponent } from 'twenty-ui';
+
+const StyledBanner = styled(Banner)`
+  position: absolute;
+`;
+
+const StyledText = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const InformationBanner = ({
+  message,
+  buttonTitle,
+  buttonIcon,
+  buttonOnClick,
+}: {
+  message: string;
+  buttonTitle: string;
+  buttonIcon?: IconComponent;
+  buttonOnClick: () => void;
+}) => {
+  return (
+    <StyledBanner>
+      <StyledText>{message}</StyledText>
+      <Button
+        variant="secondary"
+        title={buttonTitle}
+        Icon={buttonIcon}
+        size="small"
+        inverted
+        onClick={buttonOnClick}
+      />
+    </StyledBanner>
+  );
+};

packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx

@@ -0,0 +1,21 @@
+import { InformationBannerReconnectAccountEmailAliases } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases';
+import { InformationBannerReconnectAccountInsufficientPermissions } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions';
+import styled from '@emotion/styled';
+
+const StyledInformationBannerWrapper = styled.div`
+  height: 40px;
+  position: relative;
+
+  &:empty {
+    height: 0;
+  }
+`;
+
+export const InformationBannerWrapper = () => {
+  return (
+    <StyledInformationBannerWrapper>
+      <InformationBannerReconnectAccountInsufficientPermissions />
+      <InformationBannerReconnectAccountEmailAliases />
+    </StyledInformationBannerWrapper>
+  );
+};

packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases.tsx

@@ -0,0 +1,26 @@
+import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { InformationBannerKeys } from '@/information-banner/enums/InformationBannerKeys.enum';
+import { useAccountToReconnect } from '@/information-banner/hooks/useAccountToReconnect';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
+import { IconRefresh } from 'twenty-ui';
+
+export const InformationBannerReconnectAccountEmailAliases = () => {
+  const { accountToReconnect } = useAccountToReconnect(
+    InformationBannerKeys.ACCOUNTS_TO_RECONNECT_EMAIL_ALIASES,
+  );
+
+  const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
+
+  if (!accountToReconnect) {
+    return null;
+  }
+
+  return (
+    <InformationBanner
+      message={`Please reconnect your mailbox ${accountToReconnect?.handle} to update your email aliases:`}
+      buttonTitle="Reconnect"
+      buttonIcon={IconRefresh}
+      buttonOnClick={() => triggerGoogleApisOAuth()}
+    />
+  );
+};

packages/twenty-front/src/modules/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions.tsx

@@ -0,0 +1,27 @@
+import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { InformationBannerKeys } from '@/information-banner/enums/InformationBannerKeys.enum';
+import { useAccountToReconnect } from '@/information-banner/hooks/useAccountToReconnect';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
+import { IconRefresh } from 'twenty-ui';
+
+export const InformationBannerReconnectAccountInsufficientPermissions = () => {
+  const { accountToReconnect } = useAccountToReconnect(
+    InformationBannerKeys.ACCOUNTS_TO_RECONNECT_INSUFFICIENT_PERMISSIONS,
+  );
+
+  const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
+
+  if (!accountToReconnect) {
+    return null;
+  }
+
+  return (
+    <InformationBanner
+      message={`Sync lost with mailbox ${accountToReconnect?.handle}. Please
+    reconnect for updates:`}
+      buttonTitle="Reconnect"
+      buttonIcon={IconRefresh}
+      buttonOnClick={() => triggerGoogleApisOAuth()}
+    />
+  );
+};