feat: application issues (#6347)

![image](https://github.com/Unleash/unleash/assets/964450/90153533-322c-46fd-8a1b-5853cbe0c35c)

frontend/src/component/application/ApplicationIssues/ApplicationIssues.test.tsx

@@ -0,0 +1,27 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { ApplicationIssues } from './ApplicationIssues';
+import { ApplicationOverviewIssuesSchema } from 'openapi';
+
+test('Display all application issues', async () => {
+    const issues: ApplicationOverviewIssuesSchema[] = [
+        {
+            type: 'missingFeatures',
+            items: ['my-app'],
+        },
+        {
+            type: 'missingStrategies',
+            items: ['defaultStrategy', 'mainStrategy'],
+        },
+    ];
+    render(<ApplicationIssues issues={issues} />);
+
+    await screen.findByText('my-app');
+    await screen.findByText('mainStrategy');
+    await screen.findByText(
+        `We detected 1 feature flag defined in the SDK that does not exist in Unleash`,
+    );
+    await screen.findByText(
+        `We detected 2 strategy types defined in the SDK that do not exist in Unleash`,
+    );
+});

frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx

@@ -0,0 +1,117 @@
+import { Box, styled } from '@mui/material';
+import { ConditionallyRender } from '../../common/ConditionallyRender/ConditionallyRender';
+import { WarningAmberRounded } from '@mui/icons-material';
+import { ApplicationOverviewIssuesSchema } from 'openapi';
+
+const WarningContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: theme.spacing(8),
+}));
+
+const WarningHeader = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    padding: theme.spacing(2, 3, 2, 3),
+    alignItems: 'flex-start',
+    gap: theme.spacing(1.5),
+    alignSelf: 'stretch',
+    borderRadius: `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
+    border: `1px solid ${theme.palette.warning.border}`,
+    background: theme.palette.warning.light,
+}));
+
+const SmallText = styled(Box)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+}));
+
+const WarningHeaderText = styled(SmallText)(({ theme }) => ({
+    color: theme.palette.warning.dark,
+    fontWeight: theme.fontWeight.bold,
+}));
+
+const StyledList = styled('ul')(({ theme }) => ({
+    padding: theme.spacing(0, 0, 0, 2),
+}));
+
+const StyledListElement = styled('li')(({ theme }) => ({
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSizes.smallBody,
+}));
+
+const IssueContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    padding: theme.spacing(3),
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    gap: theme.spacing(3),
+    borderRadius: ` 0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`,
+    border: `1px solid ${theme.palette.warning.border}`,
+}));
+
+const IssueTextContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    padding: theme.spacing(2),
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    gap: theme.spacing(0.5),
+    borderRadius: theme.spacing(1),
+    border: `1px solid ${theme.palette.divider}`,
+}));
+
+export interface IApplicationIssuesProps {
+    issues: ApplicationOverviewIssuesSchema[];
+}
+
+const resolveIssueText = (issue: ApplicationOverviewIssuesSchema) => {
+    const issueCount = issue.items.length;
+    let issueText = '';
+
+    switch (issue.type) {
+        case 'missingFeatures':
+            issueText = `feature flag${issueCount !== 1 ? 's' : ''}`;
+            break;
+        case 'missingStrategies':
+            issueText = `strategy type${issueCount !== 1 ? 's' : ''}`;
+            break;
+    }
+
+    return `We detected ${issueCount} ${issueText} defined in the SDK that ${
+        issueCount !== 1 ? 'do' : 'does'
+    } not exist in Unleash`;
+};
+
+export const ApplicationIssues = ({ issues }: IApplicationIssuesProps) => {
+    return (
+        <ConditionallyRender
+            condition={issues.length > 0}
+            show={
+                <WarningContainer>
+                    <WarningHeader>
+                        <WarningAmberRounded />
+                        <WarningHeaderText>
+                            We detected {issues.length} issues in this
+                            application
+                        </WarningHeaderText>
+                    </WarningHeader>
+                    <IssueContainer>
+                        {issues.map((issue) => (
+                            <IssueTextContainer key={issue.type}>
+                                <SmallText>{resolveIssueText(issue)}</SmallText>
+                                <StyledList>
+                                    {issue.items.map((item) => (
+                                        <StyledListElement key={item}>
+                                            {item}
+                                        </StyledListElement>
+                                    ))}
+                                </StyledList>
+                            </IssueTextContainer>
+                        ))}
+                    </IssueContainer>
+                </WarningContainer>
+            }
+        />
+    );
+};

frontend/src/component/application/ApplicationList/ApplicationList.tsx

@@ -20,7 +20,7 @@ import { sortTypes } from 'utils/sortTypes';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { ApplicationUsageCell } from './ApplicationUsageCell/ApplicationUsageCell';
-import { ApplicationSchema } from '../../../openapi';
+import { ApplicationSchema } from 'openapi';
 
 export const ApplicationList = () => {
     const { applications: data, loading } = useApplications();

frontend/src/component/application/ApplicationList/ApplicationUsageCell/ApplicationUsageCell.tsx

@@ -2,7 +2,7 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { styled, Typography, useTheme } from '@mui/material';
 import { Link } from 'react-router-dom';
-import { ApplicationUsageSchema } from '../../../../openapi';
+import { ApplicationUsageSchema } from 'openapi';
 
 export interface IApplicationUsageCellProps {
     usage: ApplicationUsageSchema[] | undefined;

frontend/src/component/application/ApplicationList/PaginatedApplicationList.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { PaginatedApplicationList } from './PaginatedApplicationList';
-import { ApplicationSchema } from '../../../openapi';
+import { ApplicationSchema } from 'openapi';
 
 const server = testServerSetup();
 

frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx

@@ -12,7 +12,7 @@ import { PaginatedTable } from 'component/common/Table';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { ApplicationUsageCell } from './ApplicationUsageCell/ApplicationUsageCell';
-import { ApplicationSchema } from '../../../openapi';
+import { ApplicationSchema } from 'openapi';
 import {
     encodeQueryParams,
     NumberParam,

frontend/src/component/application/ApplicationOverview.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { Route, Routes } from 'react-router-dom';
-import { ApplicationOverviewSchema } from '../../openapi';
+import { ApplicationOverviewSchema } from 'openapi';
 import ApplicationOverview from './ApplicationOverview';
 
 const server = testServerSetup();