1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-03 01:18:43 +02:00

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">
This commit is contained in:
Thomas Heartman 2024-02-21 13:28:37 +08:00 committed by GitHub
parent ddae97080d
commit f46d420b10
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,5 +1,6 @@
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';
@ -7,6 +8,7 @@ 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>