Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: integration sections (#4631)

Browse Source 
Co-authored-by: sjaanus <sellinjaanus@gmail.com>
This commit is contained in:
Tymoteusz Czech 2023-09-07 11:20:12 +02:00 committed by GitHub
parent 1d414db982
commit 2be77fb55e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 126 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
View File

@ -4,14 +4,40 @@ import useLoading from 'hooks/useLoading';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { IntegrationCard } from '../IntegrationCard/IntegrationCard';
import { StyledCardsGrid } from '../IntegrationList.styles';
import { JIRA_INFO } from '../../JiraIntegration/JiraIntegration';
import { StyledCardsGrid } from '../IntegrationList.styles';
import { Paper, Typography, styled } from '@mui/material';
interface IAvailableIntegrationsProps {
providers: AddonTypeSchema[];
loading?: boolean;
}
const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(12),
}));
const StyledSection = styled('section')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
}));
/**
* @deprecated
* // TODO: refactor
*/
const StyledGrayContainer = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.background.elevation1,
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(3),
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
}));
export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
providers,
loading,
@ -19,13 +45,26 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
const customProviders = [JIRA_INFO];
const ref = useLoading(loading || false);
return (
<PageContent
header={<PageHeader title="Available integrations" />}
header={<PageHeader title="Integrations" secondary />}
isLoading={loading}
ref={ref}
>
<StyledCardsGrid ref={ref}>
{providers?.map(({ name, displayName, description }) => (
<StyledContainer>
<StyledSection>
<div>
<Typography component="h3" variant="h2">
Title
</Typography>
<Typography variant="body2" color="text.secondary">
Description
</Typography>
</div>
<StyledCardsGrid>
{providers?.map(
({ name, displayName, description }) => (
<IntegrationCard
key={name}
icon={name}
@ -33,8 +72,10 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
description={description}
link={`/integrations/create/${name}`}
/>
))}
{customProviders?.map(({ name, displayName, description }) => (
)
)}
{customProviders?.map(
({ name, displayName, description }) => (
<IntegrationCard
key={name}
icon={name}
@ -43,8 +84,55 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
link={`/integrations/view/${name}`}
configureActionText={'View integration'}
/>
))}
)
)}
</StyledCardsGrid>
</StyledSection>
<StyledSection>
<div>
<Typography component="h3" variant="h2">
Performance and security
</Typography>
<Typography variant="body2" color="text.secondary">
Description
</Typography>
</div>
<StyledCardsGrid small>
{/* TODO: edge and proxy */}
{/* {providers?.map(
({ name, displayName, description }) => (
<IntegrationCard
key={name}
icon={name}
title={displayName || name}
description={description}
link={`/integrations/create/${name}`}
/>
)
)} */}
</StyledCardsGrid>
</StyledSection>
<StyledSection>
<StyledGrayContainer>
<div>
<Typography component="h3" variant="h2">
Other
</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>
</StyledSection>
</StyledContainer>
</PageContent>
);
};

10
frontend/src/component/integrations/IntegrationList/IntegrationList.styles.tsx
View File

@ -1,8 +1,12 @@
import { styled } from '@mui/material';
export const StyledCardsGrid = styled('div')(({ theme }) => ({
gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
export const StyledCardsGrid = styled('div')<{ small?: boolean }>(
({ theme, small = false }) => ({
gridTemplateColumns: `repeat(auto-fit, minmax(${
small ? '250px' : '350px'
}, 1fr))`,
gridAutoRows: '1fr',
gap: theme.spacing(2),
display: 'grid',
}));
})
);

11
frontend/src/component/integrations/JiraIntegration/JiraIntegration.tsx
View File

@ -5,17 +5,16 @@ import { IntegrationIcon } from '../IntegrationList/IntegrationIcon/IntegrationI
import cr from 'assets/img/jira/cr.png';
import connect from 'assets/img/jira/connect.png';
import manage from 'assets/img/jira/manage.png';
import React from 'react';
import { JiraImageContainer } from './JiraImageContainer';
export const StyledContainer = styled('div')(({ theme }) => ({
const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
}));
export const StyledGrayContainer = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.grey[100],
const StyledGrayContainer = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.background.elevation1,
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(3),
display: 'flex',
@ -23,13 +22,13 @@ export const StyledGrayContainer = styled('div')(({ theme }) => ({
gap: theme.spacing(1),
}));
export const StyledIconLine = styled('div')(({ theme }) => ({
const StyledIconLine = styled('div')(({ theme }) => ({
display: 'flex',
marginLeft: theme.spacing(1),
alignItems: 'center',
}));
export const StyledLink = styled('a')({
const StyledLink = styled('a')({
textDecoration: 'none',
});