feat: edge integrations page (#4639)

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

@@ -5,7 +5,7 @@ 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 { JIRA_INFO } from '../../JiraIntegration/JiraIntegration';
+import { JIRA_INFO } from '../../ViewIntegration/JiraIntegration/JiraIntegration';
 import { StyledCardsGrid } from '../IntegrationList.styles';
 import { RequestIntegrationCard } from '../RequestIntegrationCard/RequestIntegrationCard';
 import { OFFICIAL_SDKS } from './SDKs';

frontend/src/component/integrations/ViewIntegration/EdgeIntegration/EdgeIntegration.tsx

@@ -0,0 +1,91 @@
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
+import { styled } from '@mui/material';
+
+import { IntegrationIcon } from '../../IntegrationList/IntegrationIcon/IntegrationIcon';
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+}));
+
+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),
+}));
+
+const StyledIconLine = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const StyledLink = styled('a')({
+    textDecoration: 'none',
+});
+
+export const EDGE_INFO = {
+    name: 'unleash',
+    displayName: 'Unleash Edge',
+    description: 'Unleash Edge is the successor to the Unleash Proxy.',
+    documentationUrl: 'https://docs.getunleash.io/reference/unleash-edge',
+    howTo: `Unleash Edge sits between the Unleash API and your SDKs and provides a cached read-replica of your Unleash instance. This means you can scale up your Unleash instance to thousands of connected SDKs without increasing the number of requests you make to your Unleash instance.
+Unleash Edge offers two important features:
+  - **Performance:** Unleash Edge caches in memory and can run close to your end-users. A single instance can handle tens to hundreds of thousands of requests per second.
+  - **Resilience:** Unleash Edge is designed to survive restarts and operate properly even if you lose connection to your Unleash server.`,
+};
+
+export const EdgeIntegration = () => {
+    const { name, displayName, description, documentationUrl, howTo } =
+        EDGE_INFO;
+
+    return (
+        <FormTemplate
+            title={`${displayName}`}
+            description={description || ''}
+            documentationLink={documentationUrl}
+            documentationLinkLabel="Unleash Edge documentation"
+        >
+            <StyledContainer>
+                <StyledGrayContainer>
+                    <StyledIconLine>
+                        <IntegrationIcon name={name} /> How does it work?
+                    </StyledIconLine>
+                    <ReactMarkdown>{howTo}</ReactMarkdown>
+                </StyledGrayContainer>
+                <StyledGrayContainer>
+                    <StyledLink
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href="https://github.com/Unleash/unleash-edge#readme"
+                    >
+                        View Unleash Edge on GitHub{' '}
+                        <LaunchIcon
+                            fontSize="inherit"
+                            sx={{
+                                verticalAlign: 'middle',
+                                marginBottom: '2px',
+                            }}
+                        />
+                    </StyledLink>
+                </StyledGrayContainer>
+                <iframe
+                    src="https://www.youtube-nocookie.com/embed/6uIdF-yByWs?si=rPzsFCM_2IheaTUo"
+                    title="YouTube video player"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                    style={{
+                        width: '100%',
+                        aspectRatio: '16/9',
+                    }}
+                ></iframe>
+            </StyledContainer>
+        </FormTemplate>
+    );
+};

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

@@ -1,6 +1,6 @@
 import { styled, Typography } from '@mui/material';
 
-import { formatAssetPath } from '../../../utils/formatPath';
+import { formatAssetPath } from 'utils/formatPath';
 import { FC } from 'react';
 
 export const StyledFigure = styled('figure')(({ theme }) => ({

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

@@ -1,7 +1,7 @@
-import FormTemplate from '../../common/FormTemplate/FormTemplate';
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { Divider, styled } from '@mui/material';
 
-import { IntegrationIcon } from '../IntegrationList/IntegrationIcon/IntegrationIcon';
+import { IntegrationIcon } from '../../IntegrationList/IntegrationIcon/IntegrationIcon';
 import cr from 'assets/img/jira/cr.png';
 import connect from 'assets/img/jira/connect.png';
 import manage from 'assets/img/jira/manage.png';

frontend/src/component/integrations/ViewIntegration/ViewIntegration.tsx

@@ -0,0 +1,21 @@
+import { VFC } from 'react';
+import { useParams } from 'react-router-dom';
+import NotFound from 'component/common/NotFound/NotFound';
+import { JiraIntegration } from './JiraIntegration/JiraIntegration';
+import { EdgeIntegration } from './EdgeIntegration/EdgeIntegration';
+
+interface IViewIntegrationProps {}
+
+export const ViewIntegration: VFC<IViewIntegrationProps> = () => {
+    const { providerId } = useParams<{ providerId: string }>();
+
+    if (providerId === 'jira') {
+        return <JiraIntegration />;
+    }
+
+    if (providerId === 'edge') {
+        return <EdgeIntegration />;
+    }
+
+    return <NotFound />;
+};

frontend/src/component/menu/routes.ts

@@ -45,7 +45,7 @@ import { LoginHistory } from 'component/loginHistory/LoginHistory';
 import { FeatureTypesList } from 'component/featureTypes/FeatureTypesList';
 import { AddonsList } from 'component/integrations/IntegrationList/AddonsList';
 import { TemporaryApplicationListWrapper } from 'component/application/ApplicationList/TemporaryApplicationListWrapper';
-import { JiraIntegration } from '../integrations/JiraIntegration/JiraIntegration';
+import { ViewIntegration } from 'component/integrations/ViewIntegration/ViewIntegration';
 
 export const routes: IRoute[] = [
     // Splash
@@ -342,7 +342,7 @@ export const routes: IRoute[] = [
         path: '/integrations/view/:providerId',
         parent: '/integrations',
         title: 'View',
-        component: JiraIntegration,
+        component: ViewIntegration,
         type: 'protected',
         menu: {},
     },