mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
fix: integrations UI (#4670)
## About the changes UI adjustments - text, spacing Co-authored-by: NicolaeUnleash <103567375+NicolaeUnleash@users.noreply.github.com>
This commit is contained in:
Tymoteusz Czech
GitHub
parent
dbaa386697
commit
ed6547b6f1
@ -69,7 +69,7 @@ export const IntegrationDelete: VFC<IIntegrationDeleteProps> = ({ id }) => {
|
||||
onClose={() => setIsOpen(false)}
|
||||
title="Confirm deletion"
|
||||
>
|
||||
<div>Are you sure you want to delete this Addon?</div>
|
||||
<div>Are you sure you want to delete this Integration?</div>
|
||||
</Dialogue>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -224,7 +224,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
||||
navigate(integrationsRework ? '/integrations' : '/addons');
|
||||
setToastData({
|
||||
type: 'success',
|
||||
title: 'Addon updated successfully',
|
||||
title: 'Integration updated successfully',
|
||||
});
|
||||
} else {
|
||||
await createAddon(formValues as Omit<AddonSchema, 'id'>);
|
||||
@ -232,7 +232,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
||||
setToastData({
|
||||
type: 'success',
|
||||
confetti: true,
|
||||
title: 'Addon created successfully',
|
||||
title: 'Integration created successfully',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@ -248,6 +248,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
||||
|
||||
const {
|
||||
name,
|
||||
displayName,
|
||||
description,
|
||||
documentationUrl = 'https://unleash.github.io/docs/addons',
|
||||
installation,
|
||||
@ -264,7 +265,9 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
||||
}
|
||||
description={description || ''}
|
||||
documentationLink={documentationUrl}
|
||||
documentationLinkLabel="Addon documentation"
|
||||
documentationLinkLabel={`${
|
||||
displayName || capitalizeFirst(`${name} `)
|
||||
} documentation`}
|
||||
formatApiCode={formatApiCode}
|
||||
footer={
|
||||
<StyledButtonContainer>
|
||||
|
||||
@ -17,7 +17,7 @@ const StyledBox = styled(Box)(({ theme }) => ({
|
||||
export const IntegrationInstall = ({
|
||||
url,
|
||||
title = 'Install addon',
|
||||
helpText = 'Click this button to install this addon.',
|
||||
helpText = 'Click this button to install this integration.',
|
||||
}: IAddonInstallProps) => {
|
||||
return (
|
||||
<Box>
|
||||
|
||||
@ -18,7 +18,7 @@ interface IAvailableIntegrationsProps {
|
||||
const StyledContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(12),
|
||||
gap: theme.spacing(8),
|
||||
}));
|
||||
|
||||
const StyledSection = styled('section')(({ theme }) => ({
|
||||
@ -27,6 +27,18 @@ const StyledSection = styled('section')(({ theme }) => ({
|
||||
gap: theme.spacing(2),
|
||||
}));
|
||||
|
||||
const StyledSdksSection = styled('section')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(4),
|
||||
}));
|
||||
|
||||
const StyledSdksGroup = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(2),
|
||||
}));
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
* // TODO: refactor
|
||||
@ -59,23 +71,31 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
|
||||
<StyledContainer>
|
||||
<StyledSection>
|
||||
<StyledCardsGrid>
|
||||
{providers?.map(
|
||||
({
|
||||
name,
|
||||
displayName,
|
||||
description,
|
||||
deprecated,
|
||||
}) => (
|
||||
<IntegrationCard
|
||||
key={name}
|
||||
icon={name}
|
||||
title={displayName || name}
|
||||
description={description}
|
||||
link={`/integrations/create/${name}`}
|
||||
deprecated={deprecated}
|
||||
/>
|
||||
{providers
|
||||
?.sort(
|
||||
(a, b) =>
|
||||
a.displayName?.localeCompare(
|
||||
b.displayName
|
||||
) || 0
|
||||
)
|
||||
)}
|
||||
.map(
|
||||
({
|
||||
name,
|
||||
displayName,
|
||||
description,
|
||||
deprecated,
|
||||
}) => (
|
||||
<IntegrationCard
|
||||
key={name}
|
||||
icon={name}
|
||||
title={displayName || name}
|
||||
description={description}
|
||||
link={`/integrations/create/${name}`}
|
||||
deprecated={deprecated}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
{/* TODO: sort providers from backend with custom providers */}
|
||||
{customProviders?.map(
|
||||
({ name, displayName, description }) => (
|
||||
<IntegrationCard
|
||||
@ -84,7 +104,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
|
||||
title={displayName || name}
|
||||
description={description}
|
||||
link={`/integrations/view/${name}`}
|
||||
configureActionText={'View integration'}
|
||||
configureActionText="Learn more"
|
||||
/>
|
||||
)
|
||||
)}
|
||||
@ -139,99 +159,116 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
|
||||
</a>
|
||||
</Typography>
|
||||
</div>
|
||||
<Box sx={theme => ({ marginTop: theme.spacing(2) })}>
|
||||
<Typography component="h4" variant="h4">
|
||||
Server-side SDKs
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Server-side clients run on your server and
|
||||
communicate directly with your Unleash instance.
|
||||
</Typography>
|
||||
</Box>
|
||||
<StyledCardsGrid small>
|
||||
{serverSdks?.map(
|
||||
({
|
||||
name,
|
||||
displayName,
|
||||
description,
|
||||
documentationUrl,
|
||||
}) => (
|
||||
<IntegrationCard
|
||||
key={name}
|
||||
icon={name}
|
||||
title={displayName || name}
|
||||
description={description}
|
||||
link={documentationUrl}
|
||||
configureActionText={'View documentation'}
|
||||
isExternal
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</StyledCardsGrid>
|
||||
<Box sx={theme => ({ marginTop: theme.spacing(2) })}>
|
||||
<Typography component="h4" variant="h4">
|
||||
Client-side SDKs
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Client-side SDKs can connect to the{' '}
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/unleash-edge"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Unleash Edge
|
||||
</a>{' '}
|
||||
or to the{' '}
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/front-end-api"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Unleash front-end API
|
||||
</a>
|
||||
, but not to the regular Unleash client API.
|
||||
</Typography>
|
||||
</Box>
|
||||
<StyledCardsGrid small>
|
||||
{clientSdks?.map(
|
||||
({
|
||||
name,
|
||||
displayName,
|
||||
description,
|
||||
documentationUrl,
|
||||
}) => (
|
||||
<IntegrationCard
|
||||
key={name}
|
||||
icon={name}
|
||||
title={displayName || name}
|
||||
description={description}
|
||||
link={documentationUrl}
|
||||
configureActionText={'View documentation'}
|
||||
isExternal
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</StyledCardsGrid>
|
||||
</StyledSection>
|
||||
<StyledSection>
|
||||
<StyledGrayContainer>
|
||||
<div>
|
||||
<Typography component="h3" variant="h4">
|
||||
Community SDKs
|
||||
</Typography>
|
||||
<Typography>
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/sdks#community-sdks"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<StyledSdksSection>
|
||||
<StyledSdksGroup>
|
||||
<Box>
|
||||
<Typography component="h4" variant="h4">
|
||||
Server-side SDKs
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
Here's some of the fantastic work
|
||||
</a>{' '}
|
||||
our community has build to make Unleash work in
|
||||
even more contexts.
|
||||
</Typography>
|
||||
</div>
|
||||
</StyledGrayContainer>
|
||||
Server-side clients run on your server and
|
||||
communicate directly with your Unleash
|
||||
instance.
|
||||
</Typography>
|
||||
</Box>
|
||||
<StyledCardsGrid small>
|
||||
{serverSdks?.map(
|
||||
({
|
||||
name,
|
||||
displayName,
|
||||
description,
|
||||
documentationUrl,
|
||||
}) => (
|
||||
<IntegrationCard
|
||||
key={name}
|
||||
icon={name}
|
||||
title={displayName || name}
|
||||
description={description}
|
||||
link={documentationUrl}
|
||||
configureActionText={
|
||||
'View documentation'
|
||||
}
|
||||
isExternal
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</StyledCardsGrid>
|
||||
</StyledSdksGroup>
|
||||
<StyledSdksGroup>
|
||||
<Box>
|
||||
<Typography component="h4" variant="h4">
|
||||
Client-side SDKs
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
Client-side SDKs can connect to the{' '}
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/unleash-edge"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Unleash Edge
|
||||
</a>{' '}
|
||||
or to the{' '}
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/front-end-api"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Unleash front-end API
|
||||
</a>
|
||||
, but not to the regular Unleash client API.
|
||||
</Typography>
|
||||
</Box>
|
||||
<StyledCardsGrid small>
|
||||
{clientSdks?.map(
|
||||
({
|
||||
name,
|
||||
displayName,
|
||||
description,
|
||||
documentationUrl,
|
||||
}) => (
|
||||
<IntegrationCard
|
||||
key={name}
|
||||
icon={name}
|
||||
title={displayName || name}
|
||||
description={description}
|
||||
link={documentationUrl}
|
||||
configureActionText={
|
||||
'View documentation'
|
||||
}
|
||||
isExternal
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</StyledCardsGrid>
|
||||
</StyledSdksGroup>
|
||||
<StyledSdksGroup>
|
||||
<StyledGrayContainer>
|
||||
<div>
|
||||
<Typography component="h4" variant="h3">
|
||||
Community SDKs
|
||||
</Typography>
|
||||
<Typography>
|
||||
<a
|
||||
href="https://docs.getunleash.io/reference/sdks#community-sdks"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Here's some of the fantastic work
|
||||
</a>{' '}
|
||||
our community has build to make Unleash
|
||||
work in even more contexts.
|
||||
</Typography>
|
||||
</div>
|
||||
</StyledGrayContainer>
|
||||
</StyledSdksGroup>
|
||||
</StyledSdksSection>
|
||||
</StyledSection>
|
||||
</StyledContainer>
|
||||
</PageContent>
|
||||
|
||||
@ -67,6 +67,7 @@ const StyledAction = styled(Typography)(({ theme }) => ({
|
||||
alignItems: 'center',
|
||||
color: theme.palette.primary.main,
|
||||
fontWeight: theme.typography.fontWeightBold,
|
||||
fontSize: theme.typography.body2.fontSize,
|
||||
marginTop: 'auto',
|
||||
paddingTop: theme.spacing(1),
|
||||
gap: theme.spacing(0.5),
|
||||
@ -81,7 +82,7 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
|
||||
title,
|
||||
description,
|
||||
isEnabled,
|
||||
configureActionText = 'Configure',
|
||||
configureActionText = 'Open',
|
||||
link,
|
||||
addon,
|
||||
deprecated,
|
||||
|
||||
@ -35,6 +35,9 @@ const StyledDescriptionHeader = styled(Typography)(({ theme }) => ({
|
||||
|
||||
const StyledLink = styled('a')({
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
});
|
||||
|
||||
const StyledFigure = styled('figure')(({ theme }) => ({
|
||||
|
||||
@ -6,6 +6,7 @@ import { FC } from 'react';
|
||||
export const StyledFigure = styled('figure')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
gap: theme.spacing(2),
|
||||
margin: theme.spacing(2, 0),
|
||||
flexDirection: 'column',
|
||||
}));
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
|
||||
import { Divider, styled } from '@mui/material';
|
||||
|
||||
import LaunchIcon from '@mui/icons-material/Launch';
|
||||
import cr from './assets/cr.png';
|
||||
import connect from './assets/connect.png';
|
||||
import manage from './assets/manage.png';
|
||||
@ -20,10 +20,14 @@ const StyledGrayContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(1),
|
||||
marginBottom: theme.spacing(2),
|
||||
}));
|
||||
|
||||
const StyledLink = styled('a')({
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
});
|
||||
|
||||
export const JIRA_INFO = {
|
||||
@ -57,7 +61,14 @@ export const JiraIntegration = () => {
|
||||
rel="noopener noreferrer"
|
||||
href="https://marketplace.atlassian.com/apps/1231447/unleash-enterprise-for-jira"
|
||||
>
|
||||
View plugin on Atlassian marketplace
|
||||
View plugin on Atlassian marketplace{' '}
|
||||
<LaunchIcon
|
||||
fontSize="inherit"
|
||||
sx={{
|
||||
verticalAlign: 'middle',
|
||||
marginBottom: '2px',
|
||||
}}
|
||||
/>
|
||||
</StyledLink>
|
||||
</StyledGrayContainer>
|
||||
<Divider />
|
||||
|
||||
@ -22,7 +22,7 @@ export const getAddons: (args: {
|
||||
|
||||
if (slackAppAddonEnabled) {
|
||||
slackAddon.definition.deprecated =
|
||||
'This addon is deprecated. Please try the new Slack App addon instead.';
|
||||
'This addon is deprecated. Please try the new Slack App integration instead.';
|
||||
}
|
||||
|
||||
const addons: Addon[] = [
|
||||
|
||||
@ -39,7 +39,7 @@ const slackAppDefinition: IAddonDefinition = {
|
||||
url: 'https://unleash-slack-app.vercel.app/install',
|
||||
title: 'Slack App installation',
|
||||
helpText:
|
||||
'After installing the Unleash Slack app in your Slack workspace, paste the access token into the appropriate field below in order to configure this addon.',
|
||||
'After installing the Unleash Slack app in your Slack workspace, paste the access token into the appropriate field below in order to configure this integration.',
|
||||
},
|
||||
parameters: [
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user