feat: integration sections (#4631)

Co-authored-by: sjaanus <sellinjaanus@gmail.com>

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -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,32 +45,94 @@ 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}>
+            <StyledContainer>
-                {providers?.map(({ name, displayName, description }) => (
+                <StyledSection>
-                    <IntegrationCard
+                    <div>
-                        key={name}
+                        <Typography component="h3" variant="h2">
-                        icon={name}
+                            Title
-                        title={displayName || name}
+                        </Typography>
-                        description={description}
+                        <Typography variant="body2" color="text.secondary">
-                        link={`/integrations/create/${name}`}
+                            Description
-                    />
+                        </Typography>
-                ))}
+                    </div>
-                {customProviders?.map(({ name, displayName, description }) => (
+                    <StyledCardsGrid>
-                    <IntegrationCard
+                        {providers?.map(
-                        key={name}
+                            ({ name, displayName, description }) => (
-                        icon={name}
+                                <IntegrationCard
-                        title={displayName || name}
+                                    key={name}
-                        description={description}
+                                    icon={name}
-                        link={`/integrations/view/${name}`}
+                                    title={displayName || name}
-                        configureActionText={'View integration'}
+                                    description={description}
-                    />
+                                    link={`/integrations/create/${name}`}
-                ))}
+                                />
-            </StyledCardsGrid>
+                            )
+                        )}
+                        {customProviders?.map(
+                            ({ name, displayName, description }) => (
+                                <IntegrationCard
+                                    key={name}
+                                    icon={name}
+                                    title={displayName || name}
+                                    description={description}
+                                    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>
     );
 };

frontend/src/component/integrations/IntegrationList/IntegrationList.styles.tsx

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

frontend/src/component/integrations/JiraIntegration/JiraIntegration.tsx

@@ -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 }) => ({
+const StyledGrayContainer = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.grey[100],
+    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',
 });