Marie
90a30263ac
In this PR - Content tab for marketplace apps and installed apps: complies with [figma](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=34845-126856); addition of field section showing fields added to standard objects; initiative: arrow opens a sub-table of fields rows. (suggested because 1/ for marketplace apps we cannot redirect to the actual object page in settings since the object does not exist yet in the workspace 2/ since we dont have an quick "go back to application page" option, it can be annoying to be redirected to a different setting page when we just want to look at the content of the app objects) - Permission tab for marketplace apps and installed apps - left to do - settings tab (in another PR) There are breaking changes but it's behind a feature flag not exposed (access to marketplace) so not problematic marketplace apps https://github.com/user-attachments/assets/4c660101-50fc-47ce-b90a-8d6f17db5e74 installed apps https://github.com/user-attachments/assets/c9229ee1-e75f-4cad-8766-758b2c5b37b4
94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { useLingui } from '@lingui/react/macro';
|
|
import { type ReactNode } from 'react';
|
|
|
|
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
|
import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
|
|
import {
|
|
StyledActionTableCell,
|
|
StyledNameTableCell,
|
|
StyledObjectTableRow,
|
|
} from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
|
|
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
|
import { useIcons } from 'twenty-ui/display';
|
|
|
|
export type SettingsObjectMetadataItemTableRowProps = {
|
|
action: ReactNode;
|
|
objectMetadataItem: ObjectMetadataItem;
|
|
link?: string;
|
|
totalObjectCount: number;
|
|
};
|
|
|
|
const StyledNameContainer = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 0;
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
`;
|
|
|
|
const StyledNameLabel = styled.div`
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
`;
|
|
|
|
const StyledInactiveLabel = styled.span`
|
|
color: ${({ theme }) => theme.font.color.extraLight};
|
|
font-size: ${({ theme }) => theme.font.size.sm};
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex: 0 999 auto;
|
|
min-width: 48px;
|
|
|
|
&::before {
|
|
content: '·';
|
|
margin-right: ${({ theme }) => theme.spacing(1)};
|
|
}
|
|
`;
|
|
|
|
export const SettingsObjectMetadataItemTableRow = ({
|
|
action,
|
|
objectMetadataItem,
|
|
link,
|
|
totalObjectCount,
|
|
}: SettingsObjectMetadataItemTableRowProps) => {
|
|
const { t } = useLingui();
|
|
const theme = useTheme();
|
|
|
|
const { getIcon } = useIcons();
|
|
const Icon = getIcon(objectMetadataItem.icon);
|
|
|
|
return (
|
|
<StyledObjectTableRow key={objectMetadataItem.namePlural} to={link}>
|
|
<StyledNameTableCell>
|
|
{!!Icon && (
|
|
<Icon
|
|
style={{ minWidth: theme.icon.size.md }}
|
|
size={theme.icon.size.md}
|
|
stroke={theme.icon.stroke.sm}
|
|
/>
|
|
)}
|
|
<StyledNameContainer>
|
|
<StyledNameLabel title={objectMetadataItem.labelPlural}>
|
|
{objectMetadataItem.labelPlural}
|
|
</StyledNameLabel>
|
|
{!objectMetadataItem.isActive && (
|
|
<StyledInactiveLabel>{t`Deactivated`}</StyledInactiveLabel>
|
|
)}
|
|
</StyledNameContainer>
|
|
</StyledNameTableCell>
|
|
<TableCell>
|
|
<SettingsItemTypeTag item={objectMetadataItem} />
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
{objectMetadataItem.fields.filter((field) => !field.isSystem).length}
|
|
</TableCell>
|
|
<TableCell align="right">{totalObjectCount}</TableCell>
|
|
<StyledActionTableCell>{action}</StyledActionTableCell>
|
|
</StyledObjectTableRow>
|
|
);
|
|
};
|