Marie
0001c2e7d0
https://github.com/user-attachments/assets/c4e63edb-6e98-44bc-841f-ee110ae712d4 How it works - `manifest.json` files are now committed when apps are published to our repo - to display available apps, from the server, we read into our github repo, using a pod-scoped cache - feature flagged - app installation will be behind permission gate MARKETPLACE_APPS Limitations and what is yet to develop - content and settings tabs - installed apps tab - app installation - test and potentially fix reading from .manifest.json once [Reshape manifest structure](https://github.com/twentyhq/core-team-issues/issues/2183) is done. additional work is expected on assets notably. (couldnt properly do it here as manifest.json will only be committed after this pr) - we only read in community/ folder for now - we may want tochange that - the cache is rather artisanal for now and scoped by pod - we may want to change that
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import {
|
|
StyledSettingsCardContent,
|
|
StyledSettingsCardDescription,
|
|
StyledSettingsCardThirdLine,
|
|
StyledSettingsCardTitle,
|
|
} from '@/settings/components/SettingsOptions/SettingsCardContentBase';
|
|
import styled from '@emotion/styled';
|
|
import { t } from '@lingui/core/macro';
|
|
import { Link } from 'react-router-dom';
|
|
import { SettingsPath } from 'twenty-shared/types';
|
|
import { getSettingsPath } from 'twenty-shared/utils';
|
|
import { Avatar } from 'twenty-ui/display';
|
|
import { Card } from 'twenty-ui/layout';
|
|
import { type AvailableApplication } from '~/pages/settings/applications/types/availableApplication';
|
|
|
|
type SettingsAvailableApplicationCardProps = {
|
|
application: AvailableApplication;
|
|
};
|
|
|
|
const StyledLink = styled(Link)`
|
|
display: flex;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
`;
|
|
|
|
const StyledDescription = styled(StyledSettingsCardDescription)`
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
`;
|
|
|
|
export const SettingsAvailableApplicationCard = ({
|
|
application,
|
|
}: SettingsAvailableApplicationCardProps) => {
|
|
return (
|
|
<StyledLink
|
|
to={getSettingsPath(SettingsPath.AvailableApplicationDetail, {
|
|
availableApplicationId: application.id,
|
|
})}
|
|
>
|
|
<Card rounded fullWidth>
|
|
<StyledSettingsCardContent alignItems="flex-start" fullHeight>
|
|
<Avatar
|
|
avatarUrl={application.logoPath || null}
|
|
placeholder={application.name}
|
|
placeholderColorSeed={application.name}
|
|
size="lg"
|
|
type="squared"
|
|
/>
|
|
<div>
|
|
<StyledSettingsCardTitle>
|
|
{application.name}
|
|
</StyledSettingsCardTitle>
|
|
<StyledDescription>{application.description}</StyledDescription>
|
|
<StyledSettingsCardThirdLine>
|
|
{t`by {author}`} {application.author}
|
|
</StyledSettingsCardThirdLine>
|
|
</div>
|
|
</StyledSettingsCardContent>
|
|
</Card>
|
|
</StyledLink>
|
|
);
|
|
};
|