From 042e8d097a233f2d75f1e98b4c39dc0e9604b1ff Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 8 Sep 2023 10:46:27 +0200
Subject: [PATCH] feat: link to request integration (#4634)

## About the changes

![image](https://github.com/Unleash/unleash/assets/2625371/5c0852d2-28cf-4272-8892-e36de782ab61)

https://linear.app/unleash/issue/1-1343/request-integration
---
 .../AvailableIntegrations.tsx                 |  4 +-
 .../RequestIntegrationCard.tsx                | 47 +++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/component/integrations/IntegrationList/RequestIntegrationCard/RequestIntegrationCard.tsx

diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
index b64edfb892..3f992e2387 100644
--- a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
+++ b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
@@ -1,4 +1,5 @@
 import { type VFC } from 'react';
+import { Typography, styled } from '@mui/material';
 import type { AddonTypeSchema } from 'openapi';
 import useLoading from 'hooks/useLoading';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -6,7 +7,7 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { IntegrationCard } from '../IntegrationCard/IntegrationCard';
 import { JIRA_INFO } from '../../JiraIntegration/JiraIntegration';
 import { StyledCardsGrid } from '../IntegrationList.styles';
-import { Typography, styled } from '@mui/material';
+import { RequestIntegrationCard } from '../RequestIntegrationCard/RequestIntegrationCard';
 import { OFFICIAL_SDKS } from './SDKs';
 
 interface IAvailableIntegrationsProps {
@@ -89,6 +90,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                                 />
                             )
                         )}
+                        <RequestIntegrationCard />
                     </StyledCardsGrid>
                 </StyledSection>
                 <StyledSection>
diff --git a/frontend/src/component/integrations/IntegrationList/RequestIntegrationCard/RequestIntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/RequestIntegrationCard/RequestIntegrationCard.tsx
new file mode 100644
index 0000000000..8ac6c71d9b
--- /dev/null
+++ b/frontend/src/component/integrations/IntegrationList/RequestIntegrationCard/RequestIntegrationCard.tsx
@@ -0,0 +1,47 @@
+import { VFC } from 'react';
+import { styled, Typography } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+
+const StyledLink = styled('a')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(3),
+    borderRadius: `${theme.shape.borderRadiusMedium}px`,
+    border: `1px dashed ${theme.palette.secondary.border}`,
+    textDecoration: 'none',
+    color: 'inherit',
+    background: theme.palette.background.elevation1,
+    ':hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
+}));
+
+const StyledAction = styled(Typography)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold,
+    paddingTop: theme.spacing(3),
+    gap: theme.spacing(0.5),
+}));
+
+export const RequestIntegrationCard: VFC = () => (
+    <StyledLink
+        href="https://docs.google.com/forms/d/e/1FAIpQLScR1_iuoQiKq89c0TKtj0gM02JVWyQ2hQ-YchBMc2GRrGf7uw/viewform"
+        target="_blank"
+        rel="noopener noreferrer"
+    >
+        <Typography variant="body2" color="text.secondary" data-loading>
+            Are we missing any integration that you need?
+        </Typography>
+        <Typography variant="body2" color="text.secondary" data-loading>
+            Go ahead and request it!
+        </Typography>
+        <StyledAction data-loading>
+            <AddIcon />
+            Request integration
+        </StyledAction>
+    </StyledLink>
+);