feat: add warning icons to environments in selector (#6290)

This PR adds warning icons to the environment selector for environments
that have problems detected. However, because we don't have any way
detect problems yet, this PR only adds the icons and the infrastructure
to display them. They're always set to "not displayed" for now.

The icons have "problems detected" as accessible text.

It looks like this when you add them in (for every environment):

<img width="1137" alt="image"
src="https://github.com/Unleash/unleash/assets/17786332/c29bfa52-ddee-4b16-b3ac-5c1f8fcc326e">

frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import useApplication from 'hooks/api/getters/useApplication/useApplication';
+import { WarningAmber } from '@mui/icons-material';
 import { formatDateYMDHMS } from 'utils/formatDate';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useConnectedInstancesTable } from './useConnectedInstancesTable';
 import { ConnectedInstancesTable } from './ConnectedInstancesTable';
 import { IApplication } from 'interfaces/application';
 import { useQueryParam } from 'use-query-params';
 import { styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const Container = styled('div')(({ theme }) => ({
     '* + *': {
@@ -16,13 +18,24 @@ const Container = styled('div')(({ theme }) => ({
 
 const EnvironmentSelectionContainer = styled('div')(({ theme }) => ({
     label: {
+        '--padding-horizontal': theme.spacing(3),
+        '--padding-vertical': theme.spacing(1),
         color: theme.palette.primary.main,
         background: theme.palette.background,
-        paddingInline: theme.spacing(2),
-        paddingBlock: theme.spacing(1),
+        paddingInline: 'var(--padding-horizontal)',
+        paddingBlock: 'var(--padding-vertical)',
         border: `1px solid ${theme.palette.background.alternative}`,
         borderInlineStart: 'none',
         fontWeight: 'bold',
+        position: 'relative',
+
+        svg: {
+            color: theme.palette.warning.main,
+            position: 'absolute',
+            fontSize: theme.fontSizes.bodySize,
+            top: 'calc(var(--padding-vertical) * .7)',
+            right: 'calc(var(--padding-horizontal) * .2)',
+        },
     },
     'label:first-of-type': {
         borderInlineStart: `1px solid ${theme.palette.background.alternative}`,
@@ -34,6 +47,10 @@ const EnvironmentSelectionContainer = styled('div')(({ theme }) => ({
     'label:has(input:checked)': {
         background: theme.palette.background.alternative,
         color: theme.palette.primary.contrastText,
+
+        svg: {
+            color: 'inherit',
+        },
     },
     'label:focus-within': {
         outline: `2px solid ${theme.palette.background.alternative}`,
@@ -74,9 +91,9 @@ export const ConnectedInstances = () => {
             (instance) => instance.environment,
         ),
     );
-    const allEnvironmentsSorted = Array.from(availableEnvironments).sort(
-        (a, b) => a.localeCompare(b),
-    );
+    const allEnvironmentsSorted = Array.from(availableEnvironments)
+        .sort((a, b) => a.localeCompare(b))
+        .map((env) => ({ name: env, problemsDetected: false }));
 
     const tableData = useMemo(() => {
         const map = ({
@@ -116,15 +133,24 @@ export const ConnectedInstances = () => {
                     </legend>
                     {allEnvironmentsSorted.map((env) => {
                         return (
-                            <label key={env}>
-                                {env}
+                            <label key={env.name}>
+                                {env.name}
+
+                                <ConditionallyRender
+                                    condition={env.problemsDetected}
+                                    show={
+                                        <WarningAmber titleAccess='Problems detected' />
+                                    }
+                                />
                                 <input
-                                    defaultChecked={currentEnvironment === env}
+                                    defaultChecked={
+                                        currentEnvironment === env.name
+                                    }
                                     className='visually-hidden'
                                     type='radio'
                                     name='active-environment'
                                     onClick={() => {
-                                        setCurrentEnvironment(env);
+                                        setCurrentEnvironment(env.name);
                                     }}
                                 />
                             </label>