From 64a7725ac781ccafaff4911fcb7bc444b67002bc Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Mon, 13 Apr 2026 19:28:50 +0200
Subject: [PATCH] Add banner for not vetted apps (#19655)

https://github.com/user-attachments/assets/4038e21a-d5d9-4b93-8589-7a4baf35ef5b

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---
 .../SettingsDataModelObjectAboutForm.tsx      |  75 ++--------
 .../tabs/SettingsApplicationsDeveloperTab.tsx | 130 ++++++++++--------
 .../banner/components/InlineBanner.tsx        |  61 ++++++++
 packages/twenty-ui/src/display/index.ts       |   1 +
 4 files changed, 148 insertions(+), 119 deletions(-)
 create mode 100644 packages/twenty-ui/src/display/banner/components/InlineBanner.tsx

diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
index 9cef109831..11429d18fd 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@@ -19,8 +19,8 @@ import {
   IconLink,
   IconRefresh,
   TooltipDelay,
+  InlineBanner,
 } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
 import { Card } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { parseThemeColor } from 'twenty-ui/utilities';
@@ -73,42 +73,6 @@ const StyledLabel = styled.span`
   margin-bottom: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledConflictBanner = styled.div`
-  align-items: center;
-  background-color: ${themeCssVariables.accent.secondary};
-  border-radius: ${themeCssVariables.border.radius.md};
-  box-sizing: border-box;
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
-  margin-bottom: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledBannerContent = styled.div`
-  align-items: center;
-  display: flex;
-  flex: 1;
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
-const StyledBannerText = styled.span`
-  color: ${themeCssVariables.color.blue};
-  flex: 1;
-`;
-
-const StyledConflictButtonContainer = styled.div`
-  > button {
-    border-color: ${themeCssVariables.color.blue};
-    color: ${themeCssVariables.color.blue};
-    &:hover {
-      background: ${themeCssVariables.accent.secondary};
-    }
-    &:focus-visible {
-      box-shadow: 0 0 0 3px ${themeCssVariables.accent.tertiary};
-    }
-  }
-`;
-
 const infoCircleElementId = 'info-circle-id';
 
 export const SettingsDataModelObjectAboutForm = ({
@@ -293,31 +257,18 @@ export const SettingsDataModelObjectAboutForm = ({
         <StyledAdvancedSettingsContainer>
           <StyledAdvancedSettingsSectionInputWrapper>
             {isDefined(conflictingObjectMetadataItem) && (
-              <StyledConflictBanner>
-                <StyledBannerContent>
-                  <IconInfoCircle
-                    color={theme.color.blue}
-                    size={theme.icon.size.md}
-                  />
-                  <StyledBannerText>
-                    {t`An object with this name already exists`}
-                  </StyledBannerText>
-                </StyledBannerContent>
-                <StyledConflictButtonContainer>
-                  <Button
-                    size="small"
-                    variant="secondary"
-                    accent="blue"
-                    title={t`Open`}
-                    onClick={() =>
-                      navigateSettings(SettingsPath.ObjectDetail, {
-                        objectNamePlural:
-                          conflictingObjectMetadataItem.namePlural,
-                      })
-                    }
-                  />
-                </StyledConflictButtonContainer>
-              </StyledConflictBanner>
+              <InlineBanner
+                color={'blue'}
+                message={t`An object with this name already exists`}
+                button={{
+                  title: t`Open`,
+                  onClick: () =>
+                    navigateSettings(SettingsPath.ObjectDetail, {
+                      objectNamePlural:
+                        conflictingObjectMetadataItem.namePlural,
+                    }),
+                }}
+              />
             )}
             {[
               {
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 e7a8c04f02..5853cd7860 100644
--- a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx
+++ b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx
@@ -27,6 +27,7 @@ import {
   IconCopy,
   IconFileInfo,
   OverflowingTextWithTooltip,
+  InlineBanner,
 } from 'twenty-ui/display';
 import { Button, SearchInput } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
@@ -85,6 +86,8 @@ export const SettingsApplicationsDeveloperTab = () => {
   const { theme } = useContext(ThemeContext);
   const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState);
 
+  const [displayNotVettedApps, setDisplayNotVettedApps] = useState(false);
+
   const { copyToClipboard } = useCopyToClipboard();
 
   const { data, loading } = useQuery(FindManyApplicationRegistrationsDocument);
@@ -222,64 +225,77 @@ export const SettingsApplicationsDeveloperTab = () => {
             title={t`NPM packages`}
             description={t`Apps made by other developers published on npm`}
           />
-          <StyledSearchInputContainer>
-            <SearchInput
-              placeholder={t`Search an application`}
-              value={npmSearchTerm}
-              onChange={setNpmSearchTerm}
-            />
-          </StyledSearchInputContainer>
-          {filteredMarketplaceApps.length === 0 ? (
-            <SettingsEmptyPlaceholder>{t`No application found`}</SettingsEmptyPlaceholder>
-          ) : (
-            <Table>
-              <TableRow gridAutoColumns={NPM_PACKAGES_GRID_COLUMNS}>
-                <TableHeader>{t`Name`}</TableHeader>
-                <TableHeader>{t`Description`}</TableHeader>
-                <TableHeader />
-              </TableRow>
-              <StyledTableRowsContainer>
-                {filteredMarketplaceApps.map((application) => (
-                  <TableRow
-                    key={application.id}
-                    gridAutoColumns={NPM_PACKAGES_GRID_COLUMNS}
-                    to={getSettingsPath(
-                      SettingsPath.AvailableApplicationDetail,
-                      {
-                        availableApplicationId: application.id,
-                      },
-                    )}
-                  >
-                    <StyledNameTableCell>
-                      <Avatar
-                        avatarUrl={application.logo || null}
-                        placeholder={application.name}
-                        placeholderColorSeed={application.name}
-                        size="md"
-                        type="squared"
-                      />
-                      <OverflowingTextWithTooltip text={application.name} />
-                    </StyledNameTableCell>
-                    <TableCell
-                      overflow="hidden"
-                      textOverflow="ellipsis"
-                      whiteSpace="nowrap"
-                    >
-                      <OverflowingTextWithTooltip
-                        text={application.description}
-                      />
-                    </TableCell>
-                    <StyledActionTableCell>
-                      <IconChevronRight
-                        size={theme.icon.size.md}
-                        stroke={theme.icon.stroke.sm}
-                        color={theme.font.color.tertiary}
-                      />
-                    </StyledActionTableCell>
+          <InlineBanner
+            color={'danger'}
+            message={t`These apps are not vetted. Use at your own risk.`}
+            button={{
+              title: t`Access`,
+              hidden: displayNotVettedApps,
+              onClick: () => setDisplayNotVettedApps(true),
+            }}
+          />
+          {displayNotVettedApps && (
+            <>
+              <StyledSearchInputContainer>
+                <SearchInput
+                  placeholder={t`Search an application`}
+                  value={npmSearchTerm}
+                  onChange={setNpmSearchTerm}
+                />
+              </StyledSearchInputContainer>
+              {filteredMarketplaceApps.length === 0 ? (
+                <SettingsEmptyPlaceholder>{t`No application found`}</SettingsEmptyPlaceholder>
+              ) : (
+                <Table>
+                  <TableRow gridAutoColumns={NPM_PACKAGES_GRID_COLUMNS}>
+                    <TableHeader>{t`Name`}</TableHeader>
+                    <TableHeader>{t`Description`}</TableHeader>
+                    <TableHeader />
                   </TableRow>
-                ))}
-              </StyledTableRowsContainer>
-            </Table>
+                  <StyledTableRowsContainer>
+                    {filteredMarketplaceApps.map((application) => (
+                      <TableRow
+                        key={application.id}
+                        gridAutoColumns={NPM_PACKAGES_GRID_COLUMNS}
+                        to={getSettingsPath(
+                          SettingsPath.AvailableApplicationDetail,
+                          {
+                            availableApplicationId: application.id,
+                          },
+                        )}
+                      >
+                        <StyledNameTableCell>
+                          <Avatar
+                            avatarUrl={application.logo || null}
+                            placeholder={application.name}
+                            placeholderColorSeed={application.name}
+                            size="md"
+                            type="squared"
+                          />
+                          <OverflowingTextWithTooltip text={application.name} />
+                        </StyledNameTableCell>
+                        <TableCell
+                          overflow="hidden"
+                          textOverflow="ellipsis"
+                          whiteSpace="nowrap"
+                        >
+                          <OverflowingTextWithTooltip
+                            text={application.description}
+                          />
+                        </TableCell>
+                        <StyledActionTableCell>
+                          <IconChevronRight
+                            size={theme.icon.size.md}
+                            stroke={theme.icon.stroke.sm}
+                            color={theme.font.color.tertiary}
+                          />
+                        </StyledActionTableCell>
+                      </TableRow>
+                    ))}
+                  </StyledTableRowsContainer>
+                </Table>
+              )}
+            </>
           )}
         </Section>
       )}
diff --git a/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx b/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx
new file mode 100644
index 0000000000..be13f67e5e
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx
@@ -0,0 +1,61 @@
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { Button } from '@ui/input/button/components/Button/Button';
+import { type IconComponent } from '@ui/display/icon/types/IconComponent';
+import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons';
+import { Banner, type BannerColor } from './Banner';
+
+const StyledBanner = styled(Banner)`
+  border-radius: ${themeCssVariables.border.radius.md};
+  margin-bottom: ${themeCssVariables.spacing[4]};
+`;
+
+const StyledBannerContent = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: ${themeCssVariables.spacing[2]};
+`;
+
+const StyledBannerText = styled.span`
+  flex: 1;
+`;
+
+type InlineBannerProps = {
+  color?: BannerColor;
+  message: string;
+  button?: {
+    title?: string;
+    onClick?: () => void;
+    hidden?: boolean;
+  };
+  LeftIcon?: IconComponent;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const InlineBanner = ({
+  color,
+  message,
+  button,
+  LeftIcon = IconInfoCircle,
+}: InlineBannerProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <StyledBanner color={color} variant={'secondary'}>
+      <StyledBannerContent>
+        <LeftIcon size={theme.icon.size.md} />
+        <StyledBannerText>{message}</StyledBannerText>
+      </StyledBannerContent>
+      {button && !button.hidden && (
+        <Button
+          size="small"
+          variant="secondary"
+          accent={color}
+          title={button?.title}
+          onClick={button?.onClick}
+        />
+      )}
+    </StyledBanner>
+  );
+};
diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts
index 1c0adee7ef..5a4666b9cb 100644
--- a/packages/twenty-ui/src/display/index.ts
+++ b/packages/twenty-ui/src/display/index.ts
@@ -17,6 +17,7 @@ export type { AvatarSize } from './avatar/types/AvatarSize';
 export type { AvatarType } from './avatar/types/AvatarType';
 export type { BannerColor, BannerVariant } from './banner/components/Banner';
 export { Banner } from './banner/components/Banner';
+export { InlineBanner } from './banner/components/InlineBanner';
 export type { SidePanelInformationBannerProps } from './banner/components/SidePanelInformationBanner';
 export { SidePanelInformationBanner } from './banner/components/SidePanelInformationBanner';
 export type { CalloutVariant, CalloutProps } from './callout/Callout';