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)}
|
onClose={() => setIsOpen(false)}
|
||||||
title="Confirm deletion"
|
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>
|
</Dialogue>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -224,7 +224,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
|||||||
navigate(integrationsRework ? '/integrations' : '/addons');
|
navigate(integrationsRework ? '/integrations' : '/addons');
|
||||||
setToastData({
|
setToastData({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
title: 'Addon updated successfully',
|
title: 'Integration updated successfully',
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
await createAddon(formValues as Omit<AddonSchema, 'id'>);
|
await createAddon(formValues as Omit<AddonSchema, 'id'>);
|
||||||
@ -232,7 +232,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
|||||||
setToastData({
|
setToastData({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
confetti: true,
|
confetti: true,
|
||||||
title: 'Addon created successfully',
|
title: 'Integration created successfully',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@ -248,6 +248,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
|||||||
|
|
||||||
const {
|
const {
|
||||||
name,
|
name,
|
||||||
|
displayName,
|
||||||
description,
|
description,
|
||||||
documentationUrl = 'https://unleash.github.io/docs/addons',
|
documentationUrl = 'https://unleash.github.io/docs/addons',
|
||||||
installation,
|
installation,
|
||||||
@ -264,7 +265,9 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
|
|||||||
}
|
}
|
||||||
description={description || ''}
|
description={description || ''}
|
||||||
documentationLink={documentationUrl}
|
documentationLink={documentationUrl}
|
||||||
documentationLinkLabel="Addon documentation"
|
documentationLinkLabel={`${
|
||||||
|
displayName || capitalizeFirst(`${name} `)
|
||||||
|
} documentation`}
|
||||||
formatApiCode={formatApiCode}
|
formatApiCode={formatApiCode}
|
||||||
footer={
|
footer={
|
||||||
<StyledButtonContainer>
|
<StyledButtonContainer>
|
||||||
|
|||||||
@ -17,7 +17,7 @@ const StyledBox = styled(Box)(({ theme }) => ({
|
|||||||
export const IntegrationInstall = ({
|
export const IntegrationInstall = ({
|
||||||
url,
|
url,
|
||||||
title = 'Install addon',
|
title = 'Install addon',
|
||||||
helpText = 'Click this button to install this addon.',
|
helpText = 'Click this button to install this integration.',
|
||||||
}: IAddonInstallProps) => {
|
}: IAddonInstallProps) => {
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
|
|||||||
@ -18,7 +18,7 @@ interface IAvailableIntegrationsProps {
|
|||||||
const StyledContainer = styled('div')(({ theme }) => ({
|
const StyledContainer = styled('div')(({ theme }) => ({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
gap: theme.spacing(12),
|
gap: theme.spacing(8),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledSection = styled('section')(({ theme }) => ({
|
const StyledSection = styled('section')(({ theme }) => ({
|
||||||
@ -27,6 +27,18 @@ const StyledSection = styled('section')(({ theme }) => ({
|
|||||||
gap: theme.spacing(2),
|
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
|
* @deprecated
|
||||||
* // TODO: refactor
|
* // TODO: refactor
|
||||||
@ -59,23 +71,31 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
|
|||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledSection>
|
<StyledSection>
|
||||||
<StyledCardsGrid>
|
<StyledCardsGrid>
|
||||||
{providers?.map(
|
{providers
|
||||||
({
|
?.sort(
|
||||||
name,
|
(a, b) =>
|
||||||
displayName,
|
a.displayName?.localeCompare(
|
||||||
description,
|
b.displayName
|
||||||
deprecated,
|
) || 0
|
||||||
}) => (
|
|
||||||
<IntegrationCard
|
|
||||||
key={name}
|
|
||||||
icon={name}
|
|
||||||
title={displayName || name}
|
|
||||||
description={description}
|
|
||||||
link={`/integrations/create/${name}`}
|
|
||||||
deprecated={deprecated}
|
|
||||||
/>
|
|
||||||
)
|
)
|
||||||
)}
|
.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(
|
{customProviders?.map(
|
||||||
({ name, displayName, description }) => (
|
({ name, displayName, description }) => (
|
||||||
<IntegrationCard
|
<IntegrationCard
|
||||||
@ -84,7 +104,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
|
|||||||
title={displayName || name}
|
title={displayName || name}
|
||||||
description={description}
|
description={description}
|
||||||
link={`/integrations/view/${name}`}
|
link={`/integrations/view/${name}`}
|
||||||
configureActionText={'View integration'}
|
configureActionText="Learn more"
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
@ -139,99 +159,116 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
|
|||||||
</a>
|
</a>
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
<Box sx={theme => ({ marginTop: theme.spacing(2) })}>
|
<StyledSdksSection>
|
||||||
<Typography component="h4" variant="h4">
|
<StyledSdksGroup>
|
||||||
Server-side SDKs
|
<Box>
|
||||||
</Typography>
|
<Typography component="h4" variant="h4">
|
||||||
<Typography variant="body2" color="text.secondary">
|
Server-side SDKs
|
||||||
Server-side clients run on your server and
|
</Typography>
|
||||||
communicate directly with your Unleash instance.
|
<Typography
|
||||||
</Typography>
|
variant="body2"
|
||||||
</Box>
|
color="text.secondary"
|
||||||
<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"
|
|
||||||
>
|
>
|
||||||
Here's some of the fantastic work
|
Server-side clients run on your server and
|
||||||
</a>{' '}
|
communicate directly with your Unleash
|
||||||
our community has build to make Unleash work in
|
instance.
|
||||||
even more contexts.
|
</Typography>
|
||||||
</Typography>
|
</Box>
|
||||||
</div>
|
<StyledCardsGrid small>
|
||||||
</StyledGrayContainer>
|
{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>
|
</StyledSection>
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
</PageContent>
|
</PageContent>
|
||||||
|
|||||||
@ -67,6 +67,7 @@ const StyledAction = styled(Typography)(({ theme }) => ({
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
color: theme.palette.primary.main,
|
color: theme.palette.primary.main,
|
||||||
fontWeight: theme.typography.fontWeightBold,
|
fontWeight: theme.typography.fontWeightBold,
|
||||||
|
fontSize: theme.typography.body2.fontSize,
|
||||||
marginTop: 'auto',
|
marginTop: 'auto',
|
||||||
paddingTop: theme.spacing(1),
|
paddingTop: theme.spacing(1),
|
||||||
gap: theme.spacing(0.5),
|
gap: theme.spacing(0.5),
|
||||||
@ -81,7 +82,7 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
|
|||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
isEnabled,
|
isEnabled,
|
||||||
configureActionText = 'Configure',
|
configureActionText = 'Open',
|
||||||
link,
|
link,
|
||||||
addon,
|
addon,
|
||||||
deprecated,
|
deprecated,
|
||||||
|
|||||||
@ -35,6 +35,9 @@ const StyledDescriptionHeader = styled(Typography)(({ theme }) => ({
|
|||||||
|
|
||||||
const StyledLink = styled('a')({
|
const StyledLink = styled('a')({
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const StyledFigure = styled('figure')(({ theme }) => ({
|
const StyledFigure = styled('figure')(({ theme }) => ({
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import { FC } from 'react';
|
|||||||
export const StyledFigure = styled('figure')(({ theme }) => ({
|
export const StyledFigure = styled('figure')(({ theme }) => ({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
gap: theme.spacing(2),
|
gap: theme.spacing(2),
|
||||||
|
margin: theme.spacing(2, 0),
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
|
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
|
||||||
import { Divider, styled } from '@mui/material';
|
import { Divider, styled } from '@mui/material';
|
||||||
|
import LaunchIcon from '@mui/icons-material/Launch';
|
||||||
import cr from './assets/cr.png';
|
import cr from './assets/cr.png';
|
||||||
import connect from './assets/connect.png';
|
import connect from './assets/connect.png';
|
||||||
import manage from './assets/manage.png';
|
import manage from './assets/manage.png';
|
||||||
@ -20,10 +20,14 @@ const StyledGrayContainer = styled('div')(({ theme }) => ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
gap: theme.spacing(1),
|
gap: theme.spacing(1),
|
||||||
|
marginBottom: theme.spacing(2),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledLink = styled('a')({
|
const StyledLink = styled('a')({
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const JIRA_INFO = {
|
export const JIRA_INFO = {
|
||||||
@ -57,7 +61,14 @@ export const JiraIntegration = () => {
|
|||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
href="https://marketplace.atlassian.com/apps/1231447/unleash-enterprise-for-jira"
|
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>
|
</StyledLink>
|
||||||
</StyledGrayContainer>
|
</StyledGrayContainer>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|||||||
@ -22,7 +22,7 @@ export const getAddons: (args: {
|
|||||||
|
|
||||||
if (slackAppAddonEnabled) {
|
if (slackAppAddonEnabled) {
|
||||||
slackAddon.definition.deprecated =
|
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[] = [
|
const addons: Addon[] = [
|
||||||
|
|||||||
@ -39,7 +39,7 @@ const slackAppDefinition: IAddonDefinition = {
|
|||||||
url: 'https://unleash-slack-app.vercel.app/install',
|
url: 'https://unleash-slack-app.vercel.app/install',
|
||||||
title: 'Slack App installation',
|
title: 'Slack App installation',
|
||||||
helpText:
|
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: [
|
parameters: [
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user