diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
index 3f992e2387..efe5ac57e8 100644
--- a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
+++ b/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';
diff --git a/frontend/src/component/integrations/ViewIntegration/EdgeIntegration/EdgeIntegration.tsx b/frontend/src/component/integrations/ViewIntegration/EdgeIntegration/EdgeIntegration.tsx
new file mode 100644
index 0000000000..6f0bf6e8a9
--- /dev/null
+++ b/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 (
+
+
+
+
+ How does it work?
+
+ {howTo}
+
+
+
+ View Unleash Edge on GitHub{' '}
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/integrations/JiraIntegration/JiraImageContainer.tsx b/frontend/src/component/integrations/ViewIntegration/JiraIntegration/JiraImageContainer.tsx
similarity index 94%
rename from frontend/src/component/integrations/JiraIntegration/JiraImageContainer.tsx
rename to frontend/src/component/integrations/ViewIntegration/JiraIntegration/JiraImageContainer.tsx
index cba28045c2..09969ce011 100644
--- a/frontend/src/component/integrations/JiraIntegration/JiraImageContainer.tsx
+++ b/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 }) => ({
diff --git a/frontend/src/component/integrations/JiraIntegration/JiraIntegration.tsx b/frontend/src/component/integrations/ViewIntegration/JiraIntegration/JiraIntegration.tsx
similarity index 96%
rename from frontend/src/component/integrations/JiraIntegration/JiraIntegration.tsx
rename to frontend/src/component/integrations/ViewIntegration/JiraIntegration/JiraIntegration.tsx
index df13fe678a..4a21776619 100644
--- a/frontend/src/component/integrations/JiraIntegration/JiraIntegration.tsx
+++ b/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';
diff --git a/frontend/src/component/integrations/ViewIntegration/ViewIntegration.tsx b/frontend/src/component/integrations/ViewIntegration/ViewIntegration.tsx
new file mode 100644
index 0000000000..c7e2b42d50
--- /dev/null
+++ b/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 = () => {
+ const { providerId } = useParams<{ providerId: string }>();
+
+ if (providerId === 'jira') {
+ return ;
+ }
+
+ if (providerId === 'edge') {
+ return ;
+ }
+
+ return ;
+};
diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts
index 385b7180a4..60ba3b2838 100644
--- a/frontend/src/component/menu/routes.ts
+++ b/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: {},
},