Add isConfigured to application registration in App admin panel (#20326)

## After
Added "Configured" column in admin panel apps tab
<img width="1171" height="611" alt="image"
src="https://github.com/user-attachments/assets/e6850b39-5789-4ad2-b3df-192a28cb03e2"
/>

Add a banner to ask to configure the application 
<img width="1218" height="483" alt="image"
src="https://github.com/user-attachments/assets/1491363c-3479-41ca-97b7-c7dc9e07ff16"
/>
This commit is contained in:
martmull
2026-05-07 09:59:01 +02:00
committed by GitHub
parent eddd2c979a
commit 948ed964bb
16 changed files with 190 additions and 37 deletions
@@ -19,6 +19,7 @@ import { SearchInput } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { MenuItemToggle } from 'twenty-ui/navigation';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { Tag } from 'twenty-ui/components';
import {
type ApplicationRegistrationFragmentFragment,
ApplicationRegistrationSourceType,
@@ -30,8 +31,8 @@ const StyledTableContainer = styled.div`
margin-top: ${themeCssVariables.spacing[3]};
`;
const TABLE_GRID = '1fr 100px 100px 40px';
const TABLE_GRID_MOBILE = '3fr 3fr 1fr 40px';
const TABLE_GRID = '1fr 100px 100px 100px 40px';
const TABLE_GRID_MOBILE = '3fr 3fr 1fr 1fr 40px';
export const SettingsAdminApps = () => {
const apolloAdminClient = useApolloAdminClient();
@@ -42,26 +43,27 @@ export const SettingsAdminApps = () => {
client: apolloAdminClient,
});
const registrations: ApplicationRegistrationFragmentFragment[] =
data?.findAllApplicationRegistrations ?? [];
const registrations = data?.findAllApplicationRegistrations ?? [];
const query = searchQuery.trim().toLowerCase();
const filtered = registrations.filter((registration) => {
if (showPreInstalledOnly && !registration.isPreInstalled) {
return false;
}
const filtered = registrations
.filter((registration) => {
if (showPreInstalledOnly && !registration.isPreInstalled) {
return false;
}
if (query.length === 0) {
return true;
}
if (query.length === 0) {
return true;
}
return (
registration.name.toLowerCase().includes(query) ||
(registration.sourcePackage ?? '').toLowerCase().includes(query) ||
registration.universalIdentifier.toLowerCase().includes(query)
);
});
return (
registration.name.toLowerCase().includes(query) ||
(registration.sourcePackage ?? '').toLowerCase().includes(query) ||
registration.universalIdentifier.toLowerCase().includes(query)
);
})
.toSorted((a, b) => Number(a.isConfigured) - Number(b.isConfigured));
const getFormattedSource = (
registration: ApplicationRegistrationFragmentFragment,
@@ -127,6 +129,7 @@ export const SettingsAdminApps = () => {
<TableHeader>{t`Name`}</TableHeader>
<TableHeader align="right">{t`Source`}</TableHeader>
<TableHeader align="right">{t`Listed`}</TableHeader>
<TableHeader align="right">{t`Configured`}</TableHeader>
<TableHeader></TableHeader>
</TableRow>
<TableBody>
@@ -187,6 +190,12 @@ const SettingsAdminAppsTableRow = ({
<TableCell align="right">
{registration.isListed ? t`Yes` : t`No`}
</TableCell>
<TableCell align="right">
<Tag
color={registration.isConfigured ? 'green' : 'red'}
text={registration.isConfigured ? t`Yes` : t`No`}
/>
</TableCell>
<TableCell align="right">
<IconChevronRight
size={theme.icon.size.md}