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();

frontend/src/component/application/ApplicationOverview.tsx

@@ -10,11 +10,11 @@ import {
 } from '@mui/material';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useNavigate } from 'react-router-dom';
-import Check from '@mui/icons-material/CheckCircle';
-import Warning from '@mui/icons-material/Warning';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { FC, useLayoutEffect, useRef, useState } from 'react';
 import { useApplicationOverview } from 'hooks/api/getters/useApplicationOverview/useApplicationOverview';
+import { WarningAmberRounded } from '@mui/icons-material';
+import { ApplicationIssues } from './ApplicationIssues/ApplicationIssues';
 
 const StyledTable = styled('table')(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
@@ -33,8 +33,9 @@ const StyleApplicationContainer = styled(Box)(({ theme }) => ({
     justifyContent: 'center',
 }));
 
-const StyledApplicationBox = styled(Box)<{ mode: 'success' | 'warning' }>(
+const StyledApplicationBox = styled(Box)<{
-    ({ theme, mode }) => ({
+    mode: 'success' | 'warning';
+}>(({ theme, mode }) => ({
     borderRadius: theme.shape.borderRadiusMedium,
     border: '1px solid',
     borderColor: theme.palette[mode].border,
@@ -43,21 +44,21 @@ const StyledApplicationBox = styled(Box)<{ mode: 'success' | 'warning' }>(
     flexDirection: 'column',
     alignItems: 'center',
     padding: theme.spacing(1.5, 3, 2, 3),
-    }),
+}));
-);
 
-const StyledStatus = styled(Typography)<{ mode: 'success' | 'warning' }>(
+const StyledStatus = styled(Typography)<{
-    ({ theme, mode }) => ({
+    mode: 'success' | 'warning';
+}>(({ theme, mode }) => ({
     gap: theme.spacing(1),
     fontSize: theme.fontSizes.smallBody,
     color: theme.palette[mode].dark,
     display: 'flex',
     alignItems: 'center',
-    }),
+}));
-);
 
-const StyledEnvironmentBox = styled(Box)<{ mode: 'success' | 'warning' }>(
+const StyledEnvironmentBox = styled(Box)<{
-    ({ theme, mode }) => ({
+    mode: 'success' | 'warning';
+}>(({ theme, mode }) => ({
     borderRadius: theme.shape.borderRadiusMedium,
     border: '1px solid',
     borderColor:
@@ -66,8 +67,7 @@ const StyledEnvironmentBox = styled(Box)<{ mode: 'success' | 'warning' }>(
         theme.palette[mode === 'success' ? 'secondary' : 'warning'].light,
     display: 'inline-block',
     padding: theme.spacing(1.5, 1.5, 1.5, 1.5),
-    }),
+}));
-);
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     marginTop: theme.spacing(2),
@@ -88,7 +88,7 @@ const EnvironmentHeader = styled(Typography)(({ theme }) => ({
 
 const SuccessStatus = () => (
     <StyledStatus mode='success'>
-        <Check
+        <WarningAmberRounded
             sx={(theme) => ({
                 color: theme.palette.success.main,
             })}
@@ -99,7 +99,7 @@ const SuccessStatus = () => (
 
 const WarningStatus: FC = ({ children }) => (
     <StyledStatus mode='warning'>
-        <Warning
+        <WarningAmberRounded
             sx={(theme) => ({
                 color: theme.palette.warning.main,
             })}
@@ -116,7 +116,10 @@ const useElementWidth = () => {
         setWidth(`${elementRef.current?.scrollWidth}px`);
     }, [elementRef, setWidth]);
 
-    return { elementRef, width };
+    return {
+        elementRef,
+        width,
+    };
 };
 
 export const ApplicationOverview = () => {
@@ -135,13 +138,16 @@ export const ApplicationOverview = () => {
 
     const { elementRef, width } = useElementWidth();
 
-    const mode: 'success' | 'warning' = 'success';
+    const mode: 'success' | 'warning' =
+        data.issues.length === 0 ? 'success' : 'warning';
 
     return (
         <ConditionallyRender
             condition={!loading && data.environments.length === 0}
             show={<Alert severity='warning'>No data available.</Alert>}
             elseShow={
+                <>
+                    <ApplicationIssues issues={data.issues} />
                     <Box sx={{ width }}>
                         <ArcherContainer
                             strokeColor={theme.palette.secondary.border}
@@ -158,8 +164,8 @@ export const ApplicationOverview = () => {
                                             style: {
                                                 strokeColor:
                                                     mode === 'success'
-                                                    ? theme.palette.secondary
+                                                        ? theme.palette
-                                                          .border
+                                                              .secondary.border
                                                         : theme.palette.warning
                                                               .border,
                                             },
@@ -178,8 +184,10 @@ export const ApplicationOverview = () => {
                                         </Typography>
                                         <Typography
                                             sx={(theme) => ({
-                                            fontSize: theme.fontSizes.bodySize,
+                                                fontSize:
-                                            fontWeight: theme.fontWeight.bold,
+                                                    theme.fontSizes.bodySize,
+                                                fontWeight:
+                                                    theme.fontWeight.bold,
                                             })}
                                         >
                                             {applicationName}
@@ -192,7 +200,8 @@ export const ApplicationOverview = () => {
                                             show={<SuccessStatus />}
                                             elseShow={
                                                 <WarningStatus>
-                                                3 issues detected
+                                                    {data.issues.length} issues
+                                                    detected
                                                 </WarningStatus>
                                             }
                                         />
@@ -233,7 +242,11 @@ export const ApplicationOverview = () => {
                                                         <StyledCell>
                                                             {environment.sdks.map(
                                                                 (sdk) => (
-                                                                <div key={sdk}>
+                                                                    <div
+                                                                        key={
+                                                                            sdk
+                                                                        }
+                                                                    >
                                                                         {sdk}
                                                                     </div>
                                                                 ),
@@ -245,7 +258,9 @@ export const ApplicationOverview = () => {
                                                             Last seen:
                                                         </StyledCell>
                                                         <StyledCell>
-                                                        {environment.lastSeen}
+                                                            {
+                                                                environment.lastSeen
+                                                            }
                                                         </StyledCell>
                                                     </tr>
                                                 </tbody>
@@ -256,6 +271,7 @@ export const ApplicationOverview = () => {
                             </StyledEnvironmentsContainer>
                         </ArcherContainer>
                     </Box>
+                </>
             }
         />
     );

frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx

@@ -22,7 +22,7 @@ import { MetricsSummaryChart } from './MetricsSummaryChart/MetricsSummaryChart';
 import {
     ExecutiveSummarySchemaMetricsSummaryTrendsItem,
     ExecutiveSummarySchemaProjectFlagTrendsItem,
-} from '../../openapi';
+} from 'openapi';
 import { HealthStats } from './HealthStats/HealthStats';
 import { Badge } from 'component/common/Badge/Badge';
 

frontend/src/component/feedbackNew/FeedbackComponent.tsx

@@ -12,7 +12,7 @@ import { useFeedbackContext } from './useFeedback';
 import React, { useState } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import useToast from 'hooks/useToast';
-import { ProvideFeedbackSchema } from '../../openapi';
+import { ProvideFeedbackSchema } from 'openapi';
 import { useUserFeedbackApi } from 'hooks/api/actions/useUserFeedbackApi/useUserFeedbackApi';
 import { useUserSubmittedFeedback } from 'hooks/useSubmittedFeedback';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

frontend/src/component/feedbackNew/FeedbackList.tsx

@@ -13,7 +13,7 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
 import { useSearch } from 'hooks/useSearch';
 import theme from 'themes/theme';
 import { useState } from 'react';
-import { FeedbackSchema } from '../../openapi';
+import { FeedbackSchema } from 'openapi';
 
 interface IFeedbackSchemaCellProps {
     value?: string | null; // FIXME: proper type

frontend/src/component/project/ProjectApplications/ProjectApplications.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { ProjectApplications } from './ProjectApplications';
-import { ProjectApplicationSchema } from '../../../openapi';
+import { ProjectApplicationSchema } from 'openapi';
 import { Route, Routes } from 'react-router-dom';
 import { SEARCH_INPUT } from 'utils/testIds';
 

frontend/src/component/project/ProjectApplications/ProjectApplications.tsx

@@ -19,7 +19,7 @@ import useLoading from 'hooks/useLoading';
 import { createColumnHelper, useReactTable } from '@tanstack/react-table';
 import { withTableState } from 'utils/withTableState';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
-import { ProjectApplicationSchema } from '../../../openapi';
+import { ProjectApplicationSchema } from 'openapi';
 import mapValues from 'lodash.mapvalues';
 import {
     DEFAULT_PAGE_LIMIT,

frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts

@@ -3,6 +3,12 @@ import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler';
 import { ApplicationOverviewSchema } from 'openapi';
 
+const placeHolderApplication: ApplicationOverviewSchema = {
+    environments: [],
+    featureCount: 0,
+    projects: [],
+    issues: [],
+};
 export const useApplicationOverview = (
     application: string,
     options: SWRConfiguration = {},
@@ -17,7 +23,7 @@ export const useApplicationOverview = (
     );
 
     return {
-        data: data || { environments: [], featureCount: 0, projects: [] },
+        data: data || placeHolderApplication,
         error,
         loading: !error && !data,
     };